Difference between revisions of "MediaWiki:Common.css"

From Ring of Brodgar
m (+General Class-support tester - (for easy checking if a particular MW/SMW part support class input))
m (format-style clean-up)
(4 intermediate revisions by the same user not shown)
Line 87: Line 87:
  
 
/* Image frame fix */
 
/* Image frame fix */
div.tright, div.tleft {
+
div.tright,
 +
div.tleft {
 
   border: 1px solid silver;
 
   border: 1px solid silver;
 
}
 
}
Line 110: Line 111:
 
   padding: 2px 0 2px 0;
 
   padding: 2px 0 2px 0;
 
}
 
}
.lang-blockN, .lang-block0, .lang-block1, .lang-block2, .lang-block3 {
+
.lang-blockN,
 +
.lang-block0,
 +
.lang-block1,
 +
.lang-block2,
 +
.lang-block3 {
 
   margin: 2px 4px 2px 4px; /* t, l, b, r */
 
   margin: 2px 4px 2px 4px; /* t, l, b, r */
 
   width:238px;
 
   width:238px;
 
   border-collapse: collapse;
 
   border-collapse: collapse;
 
}
 
}
td.lang-codeN, td.lang-code0, td.lang-code1, td.lang-code2, td.lang-code3 {
+
td.lang-codeN,
 +
td.lang-code0,
 +
td.lang-code1,
 +
td.lang-code2,
 +
td.lang-code3 {
 
   text-align:center;
 
   text-align:center;
 
   font-size:14pt;
 
   font-size:14pt;
Line 121: Line 130:
 
   height:45px;
 
   height:45px;
 
}
 
}
td.lang-descriptionN, td.lang-description0, td.lang-description1,
+
td.lang-descriptionN,
td.lang-description2, td.lang-description3 {
+
td.lang-description0,
  font-size:8pt;
+
td.lang-description1,
  padding:4pt;
+
td.lang-description2,
  line-height:1.25em;
+
td.lang-description3 {
 +
  font-size:8pt;
 +
  padding:4pt;
 +
  line-height:1.25em;
 
}
 
}
  
Line 132: Line 144:
 
}
 
}
 
td.lang-code0 {
 
td.lang-code0 {
  background-color: #FFB3B3;
+
  background-color: #FFB3B3;
  color: black;
+
  color: black;
 
}
 
}
 
td.lang-description0 {
 
td.lang-description0 {
  background-color: #FFE0E8;
+
  background-color: #FFE0E8;
  color: black;
+
  color: black;
 
}
 
}
  
.lang-block1, .lang-block2, .lang-block3 {
+
.lang-block1,
 +
.lang-block2,
 +
.lang-block3 {
 
   border:1px solid #99B3FF;
 
   border:1px solid #99B3FF;
 
}
 
}
td.lang-code1, td.lang-code2, td.lang-code3 {
+
td.lang-code1,
  background-color: #99B3FF;
+
td.lang-code2,
  color: black;
+
td.lang-code3 {
 +
  background-color: #99B3FF;
 +
  color: black;
 
}
 
}
td.lang-description1, td.lang-description2, td.lang-description3 {
+
td.lang-description1,
  background-color: #E0E8FF;
+
td.lang-description2,
  color: black;
+
td.lang-description3 {
 +
  background-color: #E0E8FF;
 +
  color: black;
 
}
 
}
  
Line 156: Line 174:
 
}
 
}
 
td.lang-codeN {
 
td.lang-codeN {
  background-color: #6EF7A7;
+
  background-color: #6EF7A7;
  color: black;
+
  color: black;
 
}
 
}
 
td.lang-descriptionN {
 
td.lang-descriptionN {
  background-color: #C5FCDC;
+
  background-color: #C5FCDC;
  color: black;
+
  color: black;
 
}
 
}
  
Line 167: Line 185:
 
/* Normal font styling for table row headers with scope="row" tag */
 
/* Normal font styling for table row headers with scope="row" tag */
 
.smwtable.plainrowheaders th[scope=row] {
 
.smwtable.plainrowheaders th[scope=row] {
    font-weight: normal;
+
  font-weight: normal;
    text-align: left;
+
  text-align: left;
 
}
 
}
 
   
 
   
Line 175: Line 193:
 
.smwtable td ol,
 
.smwtable td ol,
 
.smwtable td dl {
 
.smwtable td dl {
    text-align: left;
+
  text-align: left;
 
}
 
}
  
 
/* smwtable class for skinning normal tables
 
/* smwtable class for skinning normal tables
* keep on sync with commonPrint.css
+
** keep on sync with commonPrint.css
 
*/
 
*/
 
table.smwtable {
 
table.smwtable {
margin: 1em 1em 1em 0;
+
  margin: 1em 1em 1em 0;
background: #f9f9f9;
+
  background: #f9f9f9;
border: 1px #aaa solid;
+
  border: 1px #aaa solid;
border-collapse: collapse;
+
  border-collapse: collapse;
 
}
 
}
.smwtable th, .smwtable td {
+
.smwtable th,
border: 1px #aaa solid;
+
.smwtable td {
padding: 0.2em;
+
  border: 1px #aaa solid;
 +
  padding: 0.2em;
 
}
 
}
 
.smwtable th {
 
.smwtable th {
background: #f2f2f2;
+
  background: #f2f2f2;
text-align: center;
+
  text-align: center;
 
}
 
}
 
.smwtable caption {
 
.smwtable caption {
font-weight: bold;
+
  font-weight: bold;
 
}
 
}
 
/* even and odd in smw-tables */
 
/* even and odd in smw-tables */
 
.smwtable .row-odd {
 
.smwtable .row-odd {
background-color: #fff;
+
  background-color: #fff;
 
}
 
}
 
.smwtable .row-even {
 
.smwtable .row-even {
background-color: #eee;
+
  background-color: #eee;
 +
}
 +
 
 +
/* (vht) Vertical Header Text in table header.
 +
** Sortable case needs additional spacing to move the sort-icon out of the text area
 +
** Issue: no good way found (yet) to adjust default vertical alignment (centred) of text.
 +
** - Style "vertical-align: -length;" kinda works (others do not), but gives none general useable result.
 +
** The "th.vht" case works. but also seems to have a initial offset/padding issue (corrects itself when re-sorting).
 +
** The vht table.class has the same issue. (needs further investigation) (more or less ok for personal usage)
 +
*/
 +
table.sortable.vht th,
 +
table.sortable th.vht,
 +
table.sortable th span.vht {
 +
  padding-right: 1em;
 +
}
 +
table.vht th,
 +
table th.vht,
 +
table th span.vht {
 +
  writing-mode:vertical-rl;
 
}
 
}
  
 
/* additional table class for even and odd row colouring (using smw colors) */
 
/* additional table class for even and odd row colouring (using smw colors) */
 
table.bandedRows tr:nth-child(odd) {
 
table.bandedRows tr:nth-child(odd) {
background-color: #fff;
+
  background-color: #fff;
 
}
 
}
 
table.bandedRows tr:nth-child(even) {
 
table.bandedRows tr:nth-child(even) {
background-color: #eee;
+
  background-color: #eee;
 
}
 
}
  
 
/* hide initially collapsed collapsable tables */
 
/* hide initially collapsed collapsable tables */
 
table.collapsed tr.collapsable {
 
table.collapsed tr.collapsable {
display: none;
+
  display: none;
 
}
 
}
  
 
/* Adjusted CODE coloring (default: #f9f9f9) */
 
/* Adjusted CODE coloring (default: #f9f9f9) */
 
code {
 
code {
  background-color: #eee;
+
  background-color: #eee;
 
}
 
}
  
/* General Class support tester */
+
/* General Class support testing */
 
.class_tester {
 
.class_tester {
  background-color: #0f0;
+
  background-color: #0f0;
 +
}
 +
.class_tester2 {
 +
  background-color: #f0f !important;
 
}
 
}

Revision as of 11:17, 13 July 2019

/***** CSS placed here will be applied to all skins on the entire site. *****/

/* Mark redirects in Special:Allpages and Special:Watchlist */
.allpagesredirect {
   font-style: italic;
}
.allpagesredirect:after {
   color: #808080; content: " (redirect)"
}
.watchlistredir {
   font-style: italic;
}

/* Giving headers and TOC a little extra space */
h2 {
   margin-top: 20px;
}
.toc {
   margin-top: 20px;
}

/* Infobox template style */
.infobox {
   border: 1px solid #aaaaaa;
   background-color: #f9f9f9;
   color: black;
   margin-bottom: 0.5em;
   margin-left: 1em;
   padding: 0.2em;
   float: right;
   clear: right;
}
.infobox td,
.infobox th {
   vertical-align: top;
}
.infobox caption {
   font-size: larger;
   margin-left: inherit;
}
.infobox.bordered {
   border-collapse: collapse;
}
.infobox.bordered td,
.infobox.bordered th {
   border: 1px solid #aaaaaa;
}
.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
   border: 0;
}

/* Forum formatting (by -Algorithm & -Splaka) */
.forumheader {
   border: 1px solid #aaa;
   margin-top: 1em;
   padding: 12px;
}
.forumlist td.forum_edited a {
   color: black;
   text-decoration: none;
}
.forumlist td.forum_title a {
   padding-left: 20px;
}
.forumlist td.forum_title a.forum_new {
   font-weight: bold;
   background: url(/images/4/4e/Forum_new.gif) center left no-repeat;
   padding-left: 20px;
}
.forumlist td.forum_title a.forum_new:visited {
   font-weight: normal;
   background: none;
   padding-left: 20px;
}
.forumlist th.forum_title {
   padding-left: 20px;
}

/* Recent changes byte indicators */
.mw-plusminus-pos {
   color: #006500;
}
.mw-plusminus-neg {
   color: #8B0000;
}

/* Image frame fix */
div.tright,
div.tleft {
   border: 1px solid silver;
}

div.thumbinner {
   background: inherit;
   border: none;
   color: inherit;
}
#article div.thumb {
   color:inherit;
}

/* === Babel === */

div.babelbox {
   float: right;
   margin-left: 1em;
   margin-bottom: 0.5em;
   width: 246px;
   border: 1px solid #99B3FF;
   padding: 2px 0 2px 0;
}
.lang-blockN,
.lang-block0,
.lang-block1,
.lang-block2,
.lang-block3 {
   margin: 2px 4px 2px 4px; /* t, l, b, r */
   width:238px;
   border-collapse: collapse;
}
td.lang-codeN,
td.lang-code0,
td.lang-code1,
td.lang-code2,
td.lang-code3 {
   text-align:center;
   font-size:14pt;
   width:45px;
   height:45px;
}
td.lang-descriptionN,
td.lang-description0,
td.lang-description1,
td.lang-description2,
td.lang-description3 {
   font-size:8pt;
   padding:4pt;
   line-height:1.25em;
}

.lang-block0 {
   border:1px solid #FFB3B3;
}
td.lang-code0 {
   background-color: #FFB3B3;
   color: black;
}
td.lang-description0 {
   background-color: #FFE0E8;
   color: black;
}

.lang-block1,
.lang-block2,
.lang-block3 {
   border:1px solid #99B3FF;
}
td.lang-code1,
td.lang-code2,
td.lang-code3 {
   background-color: #99B3FF;
   color: black;
}
td.lang-description1,
td.lang-description2,
td.lang-description3 {
   background-color: #E0E8FF;
   color: black;
}

.lang-blockN {
   border:1px solid #6EF7A7;
}
td.lang-codeN {
   background-color: #6EF7A7;
   color: black;
}
td.lang-descriptionN {
   background-color: #C5FCDC;
   color: black;
}

/* CSS placed here will be applied to all skins */
/* Normal font styling for table row headers with scope="row" tag */
.smwtable.plainrowheaders th[scope=row] {
   font-weight: normal;
   text-align: left;
}
 
/* lists in data cells are always left-aligned */
.smwtable td ul,
.smwtable td ol,
.smwtable td dl {
   text-align: left;
}

/* smwtable class for skinning normal tables
** keep on sync with commonPrint.css
*/
table.smwtable {
   margin: 1em 1em 1em 0;
   background: #f9f9f9;
   border: 1px #aaa solid;
   border-collapse: collapse;
}
.smwtable th,
.smwtable td {
   border: 1px #aaa solid;
   padding: 0.2em;
}
.smwtable th {
   background: #f2f2f2;
   text-align: center;
}
.smwtable caption {
   font-weight: bold;
}
/* even and odd in smw-tables */
.smwtable .row-odd {
   background-color: #fff;
}
.smwtable .row-even {
   background-color: #eee;
}

/* (vht) Vertical Header Text in table header.
** Sortable case needs additional spacing to move the sort-icon out of the text area
** Issue: no good way found (yet) to adjust default vertical alignment (centred) of text.
** - Style "vertical-align: -length;" kinda works (others do not), but gives none general useable result.
** The "th.vht" case works. but also seems to have a initial offset/padding issue (corrects itself when re-sorting). 
** The vht table.class has the same issue. (needs further investigation) (more or less ok for personal usage)
*/
table.sortable.vht th,
table.sortable th.vht,
table.sortable th span.vht {
   padding-right: 1em;
}
table.vht th,
table th.vht,
table th span.vht {
   writing-mode:vertical-rl;
}

/* additional table class for even and odd row colouring (using smw colors) */
table.bandedRows tr:nth-child(odd) {
   background-color: #fff;
}
table.bandedRows tr:nth-child(even) {
   background-color: #eee;
}

/* hide initially collapsed collapsable tables */
table.collapsed tr.collapsable {
   display: none;
}

/* Adjusted CODE coloring (default: #f9f9f9) */
code {
   background-color: #eee;
}

/* General Class support testing */
.class_tester {
   background-color: #0f0;
}
.class_tester2 {
   background-color: #f0f !important;
}