MediaWiki:Common.css: Difference between revisions

From FrathWiki
Jump to navigationJump to search
(Added .small class for Template:Small. This way everyone can choose how small Template:Small should look for them. The idea with defining it in em is that it will follow an increase in display size)
m (add styles for flexbox alignment)
 
(90 intermediate revisions by 4 users not shown)
Line 1: Line 1:
/* <pre> */
/* <pre> */
body {
  font-family: Chrysanthi Unicode, Doulos SIL, Gentium, GentiumAlt, Code2000, Thryomanes, TITUS Cyberbit Basic, DejaVu Sans, Bitstream Vera Sans, Bitstream Cyberbit, Arial Unicode MS, Cardo, Free Sans, Junicode, Lucida Sans Unicode, Hiragino Kaku Gothic Pro, Matrix Unicode;
  font-family /**/:inherit;
}
/* Firefox's default table style looks like
  an obituary notice, so we have to make it
  more wiki-like */
table, th, td { border-style: hidden; }
/* prevent ugly horizontal page expansion */
/* stolen from mediawiki.org */
pre { overflow: auto; }
.langquote { font-style: italic !important; }


.IPA {
.IPA {
   font-family: Chrysanthi Unicode, Doulos SIL, Gentium, GentiumAlt, Code2000, Thryomanes, TITUS Cyberbit Basic, DejaVu Sans, Bitstream Vera Sans, Bitstream Cyberbit, Arial Unicode MS, Lucida Sans Unicode, Hiragino Kaku Gothic Pro, Matrix Unicode;
   font-family: Chrysanthi Unicode, Doulos SIL, Gentium, GentiumAlt, Code2000, Thryomanes, TITUS Cyberbit Basic, DejaVu Sans, Bitstream Vera Sans, Bitstream Cyberbit, Arial Unicode MS, Cardo, Free Sans, Junicode, Lucida Sans Unicode, Hiragino Kaku Gothic Pro, Matrix Unicode;
   font-family /**/:inherit;
   font-family /**/:inherit;
}
/* Medieval Unicode Font Initiative see <a href="http://www.mufi.info/">MUFI</a> /*
.MUFI {
  font-family: "Andron Scriptor Web", Cardo, Junicode;
  /*font-family /**/:inherit;*/
}
}


.sans {font-family: sans-serif;}
.sans {font-family: sans-serif;}
.red {color: red;}
.red {color: red;}
.small {font-size: 0.75em;}
.small {font-size: x-small;}
.smallcaps {font-variant: small-caps !important;}
.sc{font-variant: small-caps !important;}
.big {font-size: x-large;}
 
.morpho-label {font-variant: small-caps;}
 
* .grayout { background-color: gray; }
* .skipped, * .skipped a { color: lightsteelblue !important; }
* .skipped:hover, * .skipped:hover a { color: lightslategray !important; }
 
.border-left {
  border-left: 2px solid gray;
  padding-left: 1em;
}
 
.align-top-left th {
  vertical-align: top;
  text-align: left;
}
.align-top-left td {
  vertical-align: top;
  text-align: left;
}


.bluetable, .graytable {
.bluetable, .graytable {
Line 14: Line 59:
}
}


.bluetable { border: 1px solid #88a; }
.bluetable .bg1, .blueinfobox .bg1, .lightbluebg { background: #f8f8ff; }
.graytable { border: 1px solid #999; }
.graytable .bg1, .grayinfobox .bg1, .lightgraybg { background: #f8f8f8; }
 
.blueborder { border: 1px solid #88a; }
.grayborder { border: 1px solid #999; }
 
.bluetable .bg2, .blueinfobox .bg2 { background: #eef; }
.bluetable .bg3, .blueinfobox .bg3 { background: #ddf; }
.bluetable .bg4, .blueinfobox .bg4 { background: #ccf; }
 
.graytable .bg2, .grayinfobox .bg2 { background: #f0f0f0; }
.graytable .bg3, .grayinfobox .bg3 { background: #e1e1e1; }
.graytable .bg4, .grayinfobox .bg4 { background: #d2d2d2; }


.bluetable td, .bluetable th, .graytable td, .graytable th {
.bluetable, .graytable, .blueinfobox, .grayinfobox { border-collapse: collapse; }
  padding: 2px;
.blueinfobox, .grayinfobox {
float: right;
margin: 0 0 0.5em 0.5em;
}
}
.blueinfobox { background: #f8f8ff; }
.grayinfobox { background: #f8f8f8; }
.bluetable, .blueinfobox { border: 1px solid #88a; }
.graytable, .grayinfobox { border: 1px solid #999; }
.bluetable td, .bluetable th, .blueinfobox td, .blueinfobox th { border: 1px solid #88a; }
.graytable td, .graytable th, .graytable td, .graytable th { border: 1px solid #999; }


.bluetable td, .bluetable th { border: 1px solid #88a; }
.bluetable td, .bluetable th, .graytable td, .graytable th,
.graytable td, .graytable th { border: 1px solid #999; }
.blueinfobox td, .blueinfobox th, .graytable td, .graytable th { padding: 2px; }
.bluetable td, .bluetable th, .blueinfobox td, .blueinfobox th { border: 1px solid #88a; }
.graytable td, .graytable th, .grayinfobox td, .grayinfobox th { border: 1px solid #999; }


.bluetable th { background: #ccf; }
.bluetable th { background: #ccf; }
.graytable th { background: #d2d2d2; }
.graytable th { background: #d2d2d2; }


.bluetable th:first-child, .graytable th:first-child {
.bluetable th:first-child, .graytable th:first-child, .blueinfobox th, .grayinfobox th { text-align: right; }
  text-align: right;
 
.bluetable .divider, .blueinfobox .divider, .bluetable .header, .blueinfobox .header,
.graytable .divider, .grayinfobox .divider, .graytable .header, .grayinfobox .header { text-align: center !important; }
.bluetable .header, .bluetable .divider, .blueinfobox .header { background: #ccf; }
.graytable .header, .graytable .divider, .grayinfobox .header { background: #d2d2d2; }
 
.blueinfobox .divider { background: #eef; }
.grayinfobox .divider { background: #f0f0f0; }
 
.l { text-align: left; }
.c { text-align: center; }
.r { text-align: right; }
 
.t td, .t th { vertical-align: top; }
.m td, .m th { vertical-align: center; }
.b td, .b th { vertical-align: bottom; }
 
.flex-l { display: flex; justify-content: flex-start; }
.flex-c { display: flex; justify-content: center; }
.flex-r { display: flex; justify-content: flex-end; }
 
 
table.bordertable {
border-width: 1px;
border-spacing: 1px;
padding: 4px;
border-style: solid;
border-color: #aaa;
border-collapse: collapse;
}
}
table.bordertable td, table.bordertable th {
border-width: 1px;
border-spacing: 1px;
padding: 4px;
border-style: solid;
border-color: #aaa;


table.gridtable {
}
border-width: 1px 1px 1px 1px;
 
 
 
table.gridtable, table.wikitable, table.prettytable {
border-width: 1px;
border-spacing: 1px;
border-spacing: 1px;
border-style: none none none none;
border-style: solid;
border-color: gray gray gray gray;
border-color: #aaa;
border-collapse: collapse;
border-collapse: collapse;
}
}
table.gridtable th {
table.gridtable th, table.wikitable th, table.prettytable th {
border-width: 1px 1px 1px 1px;
border-width: 1px;
padding: 3px 3px 3px 3px;
padding: 4px;
border-style: solid solid solid solid;
border-style: solid;
border-color: gray gray gray gray;
border-color: #aaa;
background-color: #eee;
background-color: #eee;
         vertical-align: top
         vertical-align: top
}
}
table.gridtable td {
table.gridtable td, table.wikitable td, table.prettytable td {
border-width: 1px 1px 1px 1px;
border-width: 1px;
padding: 3px 3px 3px 3px;
padding: 4px;
border-style: solid solid solid solid;
border-style: solid;
border-color: gray gray gray gray;
border-color: #aaa;
background-color: white;
background-color: white;
         vertical-align: top
         vertical-align: top
}
}
table.voweltable td { text-align: center;
        vertical-align: middle;
    }
table.voweltable th { text-align: left;
        vertical-align: middle;
    }
/*Add formatting to make sure that "external references" from [[Template:Ref]] do
  not get URL expansion, not even when printed. The mechanism up to MediaWiki 1.4 was
  that the HTML code contained a SPAN following the anchor A; this SPAN had the class
  "urlexpansion", which was not displayed on screen, but was shown when the medium was
  "print". The rules below ensure (a) that there is no extra padding to the right of
  the anchor (displayed as "[<number>]"), (b) that there is no "external link arrow" for
  the link, and (c) that this SPAN of class "urlexpansion" is never shown.
  ~~~~
*/
.plainlinksneverexpand {
  background: none ! important;
  padding: 0 ! important;
}
.plainlinksneverexpand .urlexpansion {
  display: none ! important;
}
/* Make sure that ext links displayed within "plainlinksneverexpand" don't get
  the arrow...
*/
.plainlinksneverexpand a {
  background: none !important;
  padding: 0 !important;
}
/* With MediaWiki 1.5, the mechanism has changed: instead of a SPAN of class "urlexpansion"
  following the anchor A, the anchor itself now has class "external autonumber" and the
  expansion is inserted when printing (see the common printing style sheet at
  http://en.wikipedia.org/skins-1.5/common/commonPrint.css) using the ":after" pseudo-
  element of CSS. We have to switch this off for links due to Template:Ref!
  ~~~~
*/
.plainlinksneverexpand a.external.text:after {
  display: none !important;
}
.plainlinksneverexpand a.external.autonumber:after {
  display: none !important;
}
.reference { font-family: sans-serif ! important;
font-weight: normal ! important;
font-style: normal ! important;
text-decoration: none ! important;
}
/* Make charinsert links not underlined */
p.charinsert > a, span.charinsert > a { text-decoration: none ! important; }
div.charinsert > a { text-decoration: none ! important; }
div.charinsert > p > a { text-decoration: none ! important; }
div.charinsert > span > a { text-decoration: none ! important; }
p.insertchar > a, span.insertchar > a { text-decoration: none ! important; }
div.insertchar > a { text-decoration: none ! important; }
div.insertchar > p > a { text-decoration: none ! important; }
div.insertchar > span > a { text-decoration: none ! important; }
table.aligntop  td, table.aligntop  th {vertical-align: top ! important; }
span.nobreak { white-space: nowrap;}
span.gloss[title] { border-bottom-width: thin;
border-bottom-style: dashed;
border-bottom-color: #999;
  }
table.shadedtable { text-align: center;
    background: #f9f9f9;
    border: 1pt solid #c0c0c0;
    vertical-align: center;
    }
th.shadedtable { text-align:center;
    background: #efefef;
    vertical-align: center;
    }
table.shadedtable td { text-align:center;
    vertical-align: center;
    }
/* Fake margins on infoboxes etc where collapsing margins make them span the full page width */
div.outerpadding { padding: 1em 3em; }
/* INTERLINEAR GLOSS ELEMENTS (see Template:gl) */
dl.gloss { display:inline; float:left; margin:0 0.5em 0 0; }
dl.gloss dd { margin-left: 0; font-size: smaller; }


/* </pre> */
/* </pre> */

Latest revision as of 01:27, 16 October 2016

/* <pre> */

body {
  font-family: Chrysanthi Unicode, Doulos SIL, Gentium, GentiumAlt, Code2000, Thryomanes, TITUS Cyberbit Basic, DejaVu Sans, Bitstream Vera Sans, Bitstream Cyberbit, Arial Unicode MS, Cardo, Free Sans, Junicode, Lucida Sans Unicode, Hiragino Kaku Gothic Pro, Matrix Unicode;
  font-family /**/:inherit;
}

/* Firefox's default table style looks like
   an obituary notice, so we have to make it
   more wiki-like */
table, th, td { border-style: hidden; }

/* prevent ugly horizontal page expansion */
/* stolen from mediawiki.org */
pre { overflow: auto; }

.langquote { font-style: italic !important; }

.IPA {
  font-family: Chrysanthi Unicode, Doulos SIL, Gentium, GentiumAlt, Code2000, Thryomanes, TITUS Cyberbit Basic, DejaVu Sans, Bitstream Vera Sans, Bitstream Cyberbit, Arial Unicode MS, Cardo, Free Sans, Junicode, Lucida Sans Unicode, Hiragino Kaku Gothic Pro, Matrix Unicode;
  font-family /**/:inherit;
}

/* Medieval Unicode Font Initiative see <a href="http://www.mufi.info/">MUFI</a> /*
.MUFI {
  font-family: "Andron Scriptor Web", Cardo, Junicode;
  /*font-family /**/:inherit;*/
}

.sans {font-family: sans-serif;}
.red {color: red;}
.small {font-size: x-small;}
.smallcaps {font-variant: small-caps !important;}
.sc{font-variant: small-caps !important;}
.big {font-size: x-large;}

.morpho-label {font-variant: small-caps;}

* .grayout { background-color: gray; }
* .skipped, * .skipped a { color: lightsteelblue !important; }
* .skipped:hover, * .skipped:hover a { color: lightslategray !important; }

.border-left {
   border-left: 2px solid gray;
   padding-left: 1em;
}

.align-top-left th {
   vertical-align: top;
   text-align: left;
}
.align-top-left td {
   vertical-align: top;
   text-align: left;
}

.bluetable, .graytable {
  border-collapse: collapse;
}

.bluetable .bg1, .blueinfobox .bg1, .lightbluebg { background: #f8f8ff; }
.graytable .bg1, .grayinfobox .bg1, .lightgraybg { background: #f8f8f8; }

.blueborder { border: 1px solid #88a; }
.grayborder { border: 1px solid #999; }

.bluetable .bg2, .blueinfobox .bg2 { background: #eef; }
.bluetable .bg3, .blueinfobox .bg3 { background: #ddf; }
.bluetable .bg4, .blueinfobox .bg4 { background: #ccf; }

.graytable .bg2, .grayinfobox .bg2 { background: #f0f0f0; }
.graytable .bg3, .grayinfobox .bg3 { background: #e1e1e1; }
.graytable .bg4, .grayinfobox .bg4 { background: #d2d2d2; }

.bluetable, .graytable, .blueinfobox, .grayinfobox { border-collapse: collapse; }
.blueinfobox, .grayinfobox {
	float: right;
	margin: 0 0 0.5em 0.5em;
}
.blueinfobox { background: #f8f8ff; }
.grayinfobox { background: #f8f8f8; }

.bluetable, .blueinfobox { border: 1px solid #88a; }
.graytable, .grayinfobox { border: 1px solid #999; }

.bluetable td, .bluetable th, .blueinfobox td, .blueinfobox th { border: 1px solid #88a; }
.graytable td, .graytable th, .graytable td, .graytable th { border: 1px solid #999; }

.bluetable td, .bluetable th, .graytable td, .graytable th,
.blueinfobox td, .blueinfobox th, .graytable td, .graytable th { padding: 2px; }
.bluetable td, .bluetable th, .blueinfobox td, .blueinfobox th { border: 1px solid #88a; }
.graytable td, .graytable th, .grayinfobox td, .grayinfobox th { border: 1px solid #999; }

.bluetable th { background: #ccf; }
.graytable th { background: #d2d2d2; }

.bluetable th:first-child, .graytable th:first-child, .blueinfobox th, .grayinfobox th { text-align: right; }

.bluetable .divider, .blueinfobox .divider, .bluetable .header, .blueinfobox .header,
.graytable .divider, .grayinfobox .divider, .graytable .header, .grayinfobox .header { text-align: center !important; }
.bluetable .header, .bluetable .divider, .blueinfobox .header { background: #ccf; }
.graytable .header, .graytable .divider, .grayinfobox .header { background: #d2d2d2; }

.blueinfobox .divider { background: #eef; }
.grayinfobox .divider { background: #f0f0f0; }

.l { text-align: left; }
.c { text-align: center; }
.r { text-align: right; }

.t td, .t th { vertical-align: top; }
.m td, .m th { vertical-align: center; }
.b td, .b th { vertical-align: bottom; }

.flex-l { display: flex; justify-content: flex-start; }
.flex-c { display: flex; justify-content: center; }
.flex-r { display: flex; justify-content: flex-end; }


table.bordertable {
	border-width: 1px;
	border-spacing: 1px;
	padding: 4px;
	border-style: solid;
	border-color: #aaa;
	border-collapse: collapse;
}
table.bordertable td, table.bordertable th {
	border-width: 1px;
	border-spacing: 1px;
	padding: 4px;
	border-style: solid;
	border-color: #aaa;

}



table.gridtable, table.wikitable, table.prettytable {
	border-width: 1px;
	border-spacing: 1px;
	border-style: solid;
	border-color: #aaa;
	border-collapse: collapse;
}
table.gridtable th, table.wikitable th, table.prettytable th {
	border-width: 1px;
	padding: 4px;
	border-style: solid;
	border-color: #aaa;
	background-color: #eee;
        vertical-align: top
}
table.gridtable td, table.wikitable td, table.prettytable td {
	border-width: 1px;
	padding: 4px;
	border-style: solid;
	border-color: #aaa;
	background-color: white;
        vertical-align: top
}

table.voweltable td { text-align: center;
        vertical-align: middle;
    }
table.voweltable th { text-align: left;
        vertical-align: middle;
    }


/*Add formatting to make sure that "external references" from [[Template:Ref]] do
  not get URL expansion, not even when printed. The mechanism up to MediaWiki 1.4 was
  that the HTML code contained a SPAN following the anchor A; this SPAN had the class
  "urlexpansion", which was not displayed on screen, but was shown when the medium was
  "print". The rules below ensure (a) that there is no extra padding to the right of
  the anchor (displayed as "[<number>]"), (b) that there is no "external link arrow" for
  the link, and (c) that this SPAN of class "urlexpansion" is never shown.
  ~~~~
*/

.plainlinksneverexpand {
  background: none ! important;
  padding: 0 ! important;
}

.plainlinksneverexpand .urlexpansion {
  display: none ! important;
}

/* Make sure that ext links displayed within "plainlinksneverexpand" don't get
   the arrow...
*/
.plainlinksneverexpand a {
   background: none !important;
   padding: 0 !important;
}

/* With MediaWiki 1.5, the mechanism has changed: instead of a SPAN of class "urlexpansion"
   following the anchor A, the anchor itself now has class "external autonumber" and the
   expansion is inserted when printing (see the common printing style sheet at
   http://en.wikipedia.org/skins-1.5/common/commonPrint.css) using the ":after" pseudo-
   element of CSS. We have to switch this off for links due to Template:Ref!
   ~~~~
*/
.plainlinksneverexpand a.external.text:after {
  display: none !important;
}
.plainlinksneverexpand a.external.autonumber:after {
  display: none !important;
}

.reference { font-family: sans-serif ! important;
 font-weight: normal ! important;
 font-style: normal ! important;
 text-decoration: none ! important;
}

/* Make charinsert links not underlined */

p.charinsert > a, span.charinsert > a { text-decoration: none ! important; }
div.charinsert > a { text-decoration: none ! important; }
div.charinsert > p > a { text-decoration: none ! important; }
div.charinsert > span > a { text-decoration: none ! important; }

p.insertchar > a, span.insertchar > a { text-decoration: none ! important; }
div.insertchar > a { text-decoration: none ! important; }
div.insertchar > p > a { text-decoration: none ! important; }
div.insertchar > span > a { text-decoration: none ! important; }

table.aligntop  td, table.aligntop  th {vertical-align: top ! important; }

span.nobreak	{ white-space: nowrap;}

span.gloss[title] { border-bottom-width: thin;
border-bottom-style: dashed;
border-bottom-color: #999;
  }

table.shadedtable { text-align: center;
    background: #f9f9f9;
    border: 1pt solid #c0c0c0;
    vertical-align: center;
    }
th.shadedtable { text-align:center;
    background: #efefef;
    vertical-align: center;
    }
table.shadedtable td { text-align:center;
    vertical-align: center;
    }

/* Fake margins on infoboxes etc where collapsing margins make them span the full page width */

div.outerpadding { padding: 1em 3em; }

/* INTERLINEAR GLOSS ELEMENTS (see Template:gl) */

dl.gloss { display:inline; float:left; margin:0 0.5em 0 0; }
dl.gloss dd { margin-left: 0; font-size: smaller; }

/* </pre> */