MediaWiki:Common.css: Difference between revisions

/* CSS placed here will be applied to all skins */

/* set infoboxes to full width to clear anything on the side */
/* if the interface is too narrow for it to make sense */
@media screen and (max-width: 720px) {
    div.infobox {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 1em 0 !important;
        box-sizing: border-box !important;
    }
}

/* for bracket-like templates e.g. [[Template: Bra]] and [[Template: Ket]] */
/* no effects for now */
span.left-delim, span.right-delim {
}

/* text-align property for a small selection of table rows, default is set by the *-all class */
table.left-all td, 
table.left-1 td:nth-child(1), 
table.left-2 td:nth-child(2),
table.left-3 td:nth-child(3), 
table.left-4 td:nth-child(4),
table.left-5 td:nth-child(5), 
table.left-6 td:nth-child(6),
table.left-7 td:nth-child(7), 
table.left-8 td:nth-child(8),
table.left-9 td:nth-child(9),
table.left-10 td:nth-child(10),
table.left-11 td:nth-child(11),
table.left-12 td:nth-child(12) {
  text-align: left;
}
table.center-all td, 
table.center-1 td:nth-child(1), 
table.center-2 td:nth-child(2),
table.center-3 td:nth-child(3), 
table.center-4 td:nth-child(4),
table.center-5 td:nth-child(5), 
table.center-6 td:nth-child(6),
table.center-7 td:nth-child(7), 
table.center-8 td:nth-child(8),
table.center-9 td:nth-child(9),
table.center-10 td:nth-child(10),
table.center-11 td:nth-child(11),
table.center-12 td:nth-child(12) {
  text-align: center;
}
table.right-all td, 
table.right-1 td:nth-child(1), 
table.right-2 td:nth-child(2),
table.right-3 td:nth-child(3), 
table.right-4 td:nth-child(4),
table.right-5 td:nth-child(5), 
table.right-6 td:nth-child(6),
table.right-7 td:nth-child(7), 
table.right-8 td:nth-child(8),
table.right-9 td:nth-child(9),
table.right-10 td:nth-child(10),
table.right-11 td:nth-child(11),
table.right-12 td:nth-child(12) {
  text-align: right;
}

/* Don't display the function "rollback with one click" */
span.mw-rollback-link {
    display: none;
}

/* use HEJI2Text font if class="heji" */
@font-face {
    font-family: HEJI2Text;
    src: url(https://plainsound.org/fonts/HEJI2Text.otf);
}
.heji {
    font-family: HEJI2Text;
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;
}

/* use BravuraText font if class="bravura" */
@font-face {
    font-family: BravuraText;
    src: url(fonts/BravuraText.woff2) format('woff2');
}
.bravura {
    font-family: BravuraText;
    vertical-align: text-top;
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;
}


/* class="adv" selector, TODO finish formatting */
.adv {
    opacity: 0.60;
}

/* Style in Visual Editor */
.oo-ui-labelElement .oo-ui-labelElement-label {
    color: #888 !important;
}
.oo-ui-tool-title {
    color: #000 !important;
}
.oo-ui-toolbar-bar {
    color: #fff !important;
}
.ve-ui-symbolListPage h3 {
    color: #fff !important;
}
.ve-ui-mwLatexDialog-symbol {
    color: #fff !important;
}
.ve-ui-symbolListPage-symbol {
    color: #fff !important;
}


.mw-content-ltr.mw-highlight-lines pre, .mw-content-ltr.content .mw-highlight-lines pre {
    box-shadow: inset 2.75em 0 0 #000;
}

.mw-highlight {
    background: #000;
}


@media (prefers-color-scheme: light) {
.thl, .wikitable .thl {
	color: #000 !important;
	background-color: #cba !important;
}
.prime2 {
background-color: #BFBFBF !important;
color: black !important;
}
.prime3 {
background-color: #EE5F64 !important;
color: black !important;
}
.prime5 {
background-color: #C5FE95 !important;
color: black !important;
}
.prime7 {
background-color: #7F5FC5 !important;
color: black !important;
}
.prime11 {
background-color: #FFDD71 !important;
color: black !important;
}
.prime13 {
background-color: #D35FD5 !important;
color: black !important;
}
.prime17 {
background-color: #83CFEF !important;
color: black !important;
}
.prime19 {
background-color: #9BEFB5 !important;
color: black !important;
}
.prime23 {
background-color: #EEAE6E !important;
color: black !important;
}
.prime29 {
background-color: #6D75C1 !important;
color: black !important;
}
.prime31 {
background-color: #6D9DCC !important;
color: black !important;
}
.prime37 {
background-color: #A0E0D1 !important;
color: black !important;
}
.prime41 {
background-color: #CFE099 !important;
color: black !important;
}
.prime43 {
background-color: #E0D491 !important;
color: black !important;
}
.prime47 {
background-color: #E0987C !important;
color: black !important;
}
.prime53 {
background-color: #B17CC5 !important;
color: black !important;
}
.acc0 {
background-color: #EBF !important;
color: black !important;
}
.acc1 {
background-color: #BBEEEE !important;
color: black !important;
}
.acc2 {
background-color: #BBFFD3 !important;
color: black !important;
}
.acc3 {
background-color: #CCFFBB !important;
color: black !important;
}
.acc4 {
background-color: #E8FFBB !important;
color: black !important;
}
.acc5 {
background-color: #FFF8BB !important;
color: black !important;
}
.acc6 {
background-color: #FFD8BB !important;
color: black !important;
}
.acc7 {
background-color: #FFBBBB !important;
color: black !important;
}
}

@media (prefers-color-scheme: dark) {
.thl, .wikitable .thl {
	color: #fff !important;
	background-color: #531 !important;
}
.prime2 {
background-color: #3F3F3F !important;
color: white !important;
}
.prime3 {
background-color: #8F0005 !important;
color: white !important;
}
.prime5 {
background-color: #669F36 !important;
color: white !important;
}
.prime7 {
background-color: #200066 !important;
color: white !important;
}
.prime11 {
background-color: #A07E12 !important;
color: white !important;
}
.prime13 {
background-color: #740076 !important;
color: white !important;
}
.prime17 {
background-color: #247090 !important;
color: white !important;
}
.prime19 {
background-color: #3C9056 !important;
color: white !important;
}
.prime23 {
background-color: #8F4F0F !important;
color: white !important;
}
.prime29 {
background-color: #0E1662 !important;
color: white !important;
}
.prime31 {
background-color: #0E3E6D !important;
color: white !important;
}
.prime37 {
background-color: #418172 !important;
color: white !important;
}
.prime41 {
background-color: #70813A !important;
color: white !important;
}
.prime43 {
background-color: #817532 !important;
color: white !important;
}
.prime47 {
background-color: #81391D !important;
color: white !important;
}
.prime53 {
background-color: #521D66 !important;
color: white !important;
}
.acc0 {
background-color: #304 !important;
color: white !important;
}
.acc1 {
background-color: #033 !important;
color: white !important;
}
.acc2 {
background-color: #004418 !important;
color: white !important;
}
.acc3 {
background-color: #140 !important;
color: white !important;
}
.acc4 {
background-color: #2D4400 !important;
color: white !important;
}
.acc5 {
background-color: #443D00 !important;
color: white !important;
}
.acc6 {
background-color: #441D00 !important;
color: white !important;
}
.acc7 {
background-color: #440000 !important;
color: white !important;
}
}