Difference between revisions of "MediaWiki:Common.css"

From Free Software Directory
Jump to: navigation, search
m (+Backlog: single-touch/single-click selection for Task/Issue IDs;)
(42 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
/* CSS placed here will be applied to all skins */
 
/* CSS placed here will be applied to all skins */
 
span.checkboxSpan {
 
span.checkboxSpan {
width: 220px;
+
    width: 220px;
display: block;
+
    display: block;
float: left;
+
    float: left;
 +
}
 +
 
 +
/* Generally for divs which distribute to 3 columns */
 +
.use-3-columns {
 +
    columns: 3;
 +
    margin: 2px 2px 2px 2px;
 +
}
 +
 
 +
/* For SMW queries to to be inserted in 3-column divs */
 +
.list-without-bullets {
 +
    list-style: none;
 +
}
 +
 
 +
.spaced-whitesmoke {
 +
    background-color: whitesmoke;
 +
    border: 2px inset black;
 +
    border-radius: 3px;
 +
    margin: 2px 20px 2px 20px;
 +
    padding: 0.7em;
 +
}
 +
 
 +
.Tor {
 +
    background: url("//svnweb.fsf.org/static/trunk/directory/images/logos/Tor.jpg") no-repeat;
 +
    width: 100px;
 +
    height: 100px;
 +
    display: block;
 +
    text-indent: -9999px;
 
}
 
}
  
.Tor { background: url("//svnweb.fsf.org/static/trunk/directory/images/logos/Tor.jpg") no-repeat; width: 100px; height: 100px;display: block; text-indent: -9999px;}
+
.TorChat {
.TorChat { background: url("//svnweb.fsf.org/static/trunk/directory/images/logos/Tor.jpg") no-repeat; width: 100px; height: 100px;display: block; text-indent: -9999px;}
+
    background: url("//svnweb.fsf.org/static/trunk/directory/images/logos/Tor.jpg") no-repeat;
 +
    width: 100px;
 +
    height: 100px;
 +
    display: block;
 +
    text-indent: -9999px;
 +
}
  
table.antifeature { border:2px solid red; padding:5px; }
+
table.antifeature {
 +
    border: 2px solid red;
 +
    padding: 5px;
 +
}
  
 
/*The 2 column text of Package entries in desktop mode becomes inline in mobile view*/
 
/*The 2 column text of Package entries in desktop mode becomes inline in mobile view*/
 
.left-float {
 
.left-float {
float:left;  
+
    float: left;
width:60%;  
+
    width: 60%;
margin: 2px 4px 0px 4px;}
+
    margin: 2px 4px 0px 4px;
 +
}
  
.right-float{
+
.right-float {
float:right;  
+
    float: right;
width:35%;  
+
    width: 35%;
margin: 2px 4px 0px 4px;}
+
    margin: 2px 4px 0px 4px;
 +
}
  
@media only screen and (max-width: 800px){
+
@media only screen and (max-width: 800px) {
.left-float,
+
    .left-float, .right-float {
.right-float {
+
        float: inherit;
float: inherit;
+
        width: inherit;
width: inherit;
+
    }
}
 
 
}
 
}
  
Line 38: Line 74:
 
     float: left;
 
     float: left;
 
     width: 17%;
 
     width: 17%;
  padding: 2px;
+
    padding: 2px;
 
}
 
}
  
.license-wide-column{
+
.license-wide-column {
float: left;
+
    float: left;
width: 49%;
+
    width: 49%;
padding: 2px;
+
    padding: 2px;
+
}
}
 
  
 
.license-row:after {
 
.license-row:after {
Line 59: Line 94:
 
         width: 100%;
 
         width: 100%;
 
     }
 
     }
     .license-wide-column{
+
 
    width: 100%
+
     .license-wide-column {
 +
        width: 100%
 
     }
 
     }
 
}
 
}
  
.button {
+
.subject_header {
  border-radius: 4px;
+
    width: 100%;
   background-color: #f4511e;
+
    font-family: Arial, Helvetica, sans-serif;
   border: none;
+
    font-weight: bold;
   color: #FFFFFF;
+
    border-top-color: #e74c3c;
 +
    border-top-style: solid;
 +
    border-width: 4px 0px 0px 0px;
 +
    color: #e74c3c;
 +
    font-size: 20px;
 +
    padding-bottom: 10px;
 +
    padding-top: 10px;
 +
    text-transform: uppercase;
 +
}
 +
 
 +
span.get_involved a:hover {
 +
    border-radius: inherit;
 +
    background-color: #64cb00;
 +
}
 +
 
 +
span.get_involved_test a:hover {
 +
    border-radius: inherit;
 +
    background-color: black;
 +
}
 +
 
 +
/* Small screens: prevent Category 6 of the Entry formedit from being corrupted */
 +
#pfForm .section-6 .checkboxesSpan label {
 +
    display: inline-block;
 +
}
 +
 
 +
/* also delineate the table rows to aid distinguishing the categories */
 +
#pfForm .section-6 table.formtable {
 +
    border-collapse: collapse;
 +
}
 +
 
 +
#pfForm .section-6 .checkboxesSpan label:hover {
 +
    color: black;
 +
}
 +
 
 +
#pfForm .section-6 table.formtable tr {
 +
    border-top: 3px dotted white;
 +
    border-bottom: 3px dotted white;
 +
}
 +
 
 +
div.FSD_tracker:hover {
 +
   background-color: #f6f8fa;
 +
}
 +
 
 +
div.FSD_tracker a {
 +
  color: #24293a;
 +
}
 +
 
 +
div.FSD_tracker a:hover {
 +
   text-decoration: none;
 +
  color: blue;
 +
}
 +
 
 +
div.FSD_tracker a:visited {
 +
   color: #24293a;
 +
}
 +
 
 +
div.backlogIssue {
 +
  margin: 0.5em;
 +
  margin-top: 1.5em;
 +
  padding-left: 0.5em;
 +
  border-left: 2px solid gray;
 +
  border-top: 3px solid gray;
 +
  border-radius: 0.3em;
 +
}
 +
div.backlogIssue .backlogIssueAnchor {
 +
  float: right;
 +
  font-size: small;
 +
  margin: 0.1em;
 +
  background-color: black;
 +
  border-radius: 0.3em;
 +
  padding: 0.2em;
 +
  color: white;
 +
  box-shadow: gray 2px 2px 3px;
 +
  -moz-user-select: all;
 +
  user-select: all;
 +
}
 +
div.backlogIssue .backlogIssueContent {
 +
  margin: 0.3em;
 +
}
 +
div.backlogIssue.topPriority .backlogIssueAnchor::before {
 +
  display: block;
 +
  content: 'TOP PRIORITY';
 +
  font-size: x-small;
 +
  font-weight: bold;
 +
  margin: 0.1em;
 +
  color: gold;
 
   text-align: center;
 
   text-align: center;
   font-size: 28px;
+
}
   transition: all 0.5s;
+
div.backlogIssue[data-stalledby]::after {
   cursor: pointer;
+
  display: block;
   margin: 5px;
+
   text-align: center;
 +
   content: '↳ Stalled by: ' attr(data-stalledby) ' ↲';
 +
   font-size: small;
 +
   margin-top: 1em;
 +
  text-decoration: overline double purple;
 
}
 
}
  
.button span {
+
/* Hide dangerous and confusing MW commands on certain special pages */
  cursor: pointer;
+
body.page-Main_Page li#ca-delete,
  display: inline-block;
+
body.page-Main_Page li#ca-move,
  position: relative;
+
body.page-Main_Page li#ca-formedit,
   transition: 0.5s;
+
body.page-Free_Software_Directory_Backlog li#ca-delete,
 +
body.page-Free_Software_Directory_Backlog li#ca-move,
 +
body.page-Free_Software_Directory_Backlog li#ca-talk {
 +
   display: none!important;
 
}
 
}
  
.button span:after {
+
body[class*="Backlog"] #n-Backlog, body[class*="Issues"] #n-Backlog {
   content: '\00bb';
+
   text-decoration: underline;
  position: absolute;
 
  opacity: 0;
 
  top: 0;
 
  right: -20px;
 
  transition: 0.5s;
 
 
}
 
}
  
.button:hover span {
+
/* Backlog: support for the Top Priority filter (the star) */
   padding-right: 10px;
+
input#onlyTopPriority ~ label[for="onlyTopPriority"] {
 +
  filter: grayscale(1) drop-shadow(0px 0px 2px black);
 +
  cursor: pointer;
 +
  color: gold;
 +
   padding: 0.4em;
 +
  user-select: none;
 +
  font-size: larger;
 +
}
 +
input#onlyTopPriority:checked ~ label[for="onlyTopPriority"] {
 +
  filter: grayscale(0) drop-shadow(0px 0px 1px black);
 
}
 
}
 
+
input#onlyTopPriority ~ label[for="onlyTopPriority"]:hover {
.button:hover span:after {
+
   filter: grayscale(0.5) drop-shadow(0px 0px 1px black);
   opacity: 1;
+
}
   right: 0;
+
input#onlyTopPriority ~ label[for="onlyTopPriority"]:active {
 +
   cursor: wait;
 
}
 
}

Revision as of 13:19, 27 June 2020

/* CSS placed here will be applied to all skins */
span.checkboxSpan {
    width: 220px;
    display: block;
    float: left;
}

/* Generally for divs which distribute to 3 columns */
.use-3-columns {
    columns: 3;
    margin: 2px 2px 2px 2px;
}

/* For SMW queries to to be inserted in 3-column divs */
.list-without-bullets {
    list-style: none;
}

.spaced-whitesmoke {
    background-color: whitesmoke;
    border: 2px inset black;
    border-radius: 3px;
    margin: 2px 20px 2px 20px;
    padding: 0.7em;
}

.Tor {
    background: url("//svnweb.fsf.org/static/trunk/directory/images/logos/Tor.jpg") no-repeat;
    width: 100px;
    height: 100px;
    display: block;
    text-indent: -9999px;
}

.TorChat {
    background: url("//svnweb.fsf.org/static/trunk/directory/images/logos/Tor.jpg") no-repeat;
    width: 100px;
    height: 100px;
    display: block;
    text-indent: -9999px;
}

table.antifeature {
    border: 2px solid red;
    padding: 5px;
}

/*The 2 column text of Package entries in desktop mode becomes inline in mobile view*/
.left-float {
    float: left;
    width: 60%;
    margin: 2px 4px 0px 4px;
}

.right-float {
    float: right;
    width: 35%;
    margin: 2px 4px 0px 4px;
}

@media only screen and (max-width: 800px) {
    .left-float, .right-float {
        float: inherit;
        width: inherit;
    }
}

/*To make licenses section vertical for mobile view*/
* {
    box-sizing: border-box;
}

.license-column {
    float: left;
    width: 17%;
    padding: 2px;
}

.license-wide-column {
    float: left;
    width: 49%;
    padding: 2px;
}

.license-row:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - makes the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 760px) {
    .license-column {
        width: 100%;
    }

    .license-wide-column {
        width: 100%
    }
}

.subject_header {
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    border-top-color: #e74c3c;
    border-top-style: solid;
    border-width: 4px 0px 0px 0px;
    color: #e74c3c;
    font-size: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
    text-transform: uppercase;
}

span.get_involved a:hover {
    border-radius: inherit;
    background-color: #64cb00;
}

span.get_involved_test a:hover {
    border-radius: inherit;
    background-color: black;
}

/* Small screens: prevent Category 6 of the Entry formedit from being corrupted */
#pfForm .section-6 .checkboxesSpan label {
    display: inline-block;
}

/* also delineate the table rows to aid distinguishing the categories */
#pfForm .section-6 table.formtable {
    border-collapse: collapse;
}

#pfForm .section-6 .checkboxesSpan label:hover {
    color: black;
}

#pfForm .section-6 table.formtable tr {
    border-top: 3px dotted white;
    border-bottom: 3px dotted white;
}

div.FSD_tracker:hover {
  background-color: #f6f8fa;
}

div.FSD_tracker a {
  color: #24293a;
}

div.FSD_tracker a:hover {
  text-decoration: none;
  color: blue;
}

div.FSD_tracker a:visited {
  color: #24293a;
}

div.backlogIssue {
  margin: 0.5em;
  margin-top: 1.5em;
  padding-left: 0.5em;
  border-left: 2px solid gray;
  border-top: 3px solid gray;
  border-radius: 0.3em;
}
div.backlogIssue .backlogIssueAnchor {
  float: right;
  font-size: small;
  margin: 0.1em;
  background-color: black;
  border-radius: 0.3em;
  padding: 0.2em;
  color: white;
  box-shadow: gray 2px 2px 3px;
  -moz-user-select: all;
  user-select: all;
}
div.backlogIssue .backlogIssueContent {
  margin: 0.3em;
}
div.backlogIssue.topPriority .backlogIssueAnchor::before {
  display: block;
  content: 'TOP PRIORITY';
  font-size: x-small;
  font-weight: bold;
  margin: 0.1em;
  color: gold;
  text-align: center;
}
div.backlogIssue[data-stalledby]::after {
  display: block;
  text-align: center;
  content: '↳ Stalled by: ' attr(data-stalledby) ' ↲';
  font-size: small;
  margin-top: 1em;
  text-decoration: overline double purple;
}

/* Hide dangerous and confusing MW commands on certain special pages */
body.page-Main_Page li#ca-delete,
body.page-Main_Page li#ca-move,
body.page-Main_Page li#ca-formedit,
body.page-Free_Software_Directory_Backlog li#ca-delete,
body.page-Free_Software_Directory_Backlog li#ca-move,
body.page-Free_Software_Directory_Backlog li#ca-talk {
  display: none!important;
}

body[class*="Backlog"] #n-Backlog, body[class*="Issues"] #n-Backlog {
  text-decoration: underline;
}

/* Backlog: support for the Top Priority filter (the star) */
input#onlyTopPriority ~ label[for="onlyTopPriority"] {
  filter: grayscale(1) drop-shadow(0px 0px 2px black);
  cursor: pointer;
  color: gold;
  padding: 0.4em;
  user-select: none;
  font-size: larger;
}
input#onlyTopPriority:checked ~ label[for="onlyTopPriority"] {
  filter: grayscale(0) drop-shadow(0px 0px 1px black);
}
input#onlyTopPriority ~ label[for="onlyTopPriority"]:hover {
  filter: grayscale(0.5) drop-shadow(0px 0px 1px black);
}
input#onlyTopPriority ~ label[for="onlyTopPriority"]:active {
  cursor: wait;
}


Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.3 or any later version published by the Free Software Foundation; with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. A copy of the license is included in the page “GNU Free Documentation License”.

The copyright and license notices on this page only apply to the text on this page. Any software or copyright-licenses or other similar notices described in this text has its own copyright notice and license, which can usually be found in the distribution or license text itself.