Module:Documentation/styles.css: Difference between revisions

Darken background color for the header in dark mode to pass at least the WCAG 2.2 AA check.
 
Fix Linter errors related to text color in dark mode; this generally works but may cause problems, in which case revert or try specifying a different CSS value.
Line 1: Line 1:
.ts-doc-sandbox .mbox-image {
/* {{pp|small=yes}} */
padding:.75em 0 .75em .75em;
.documentation,
}
.documentation-metadata {
border: 1px solid var( --border-color-base, #a2a9b1 );
.ts-doc-doc {
background-color: #ecfcf4; color:inherit;
clear: both;
clear: both;
background-color: #eaf3ff;
color: var(--color-base, #202122);
border: 1px solid #a3caff;
margin-top: 1em;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
.ts-doc-header {
background-color: #cbd6f6;
color: var(--color-base, #202122);
padding: .642857em 1em .5em;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
.ts-doc-heading {
display: inline-block;
padding-left: 30px;
background: center left / 24px 24px no-repeat;
/* @noflip */
background-image: url( //upload.wikimedia.org/wikipedia/commons/3/32/Codex_icon_puzzle_color-base.svg );
height: 24px;
line-height: 24px;
font-size: 13px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
}
.ts-doc-header .ts-tlinks-tlinks {
line-height: 24px;
margin-left: 0;
}
}


.ts-doc-header .ts-tlinks-tlinks a {
.documentation {
color: var(--color-progressive, #36c);
margin: 1em 0 0 0;
padding: 1em;
}
}


.ts-doc-header .ts-tlinks-tlinks a:active {
.documentation-metadata {
color: var(--color-progressive--active, #233566);
margin: 0.2em 0; /* same margin left-right as .documentation */
    font-style: italic;
    padding: 0.4em 1em; /* same padding left-right as .documentation */
}
}


.ts-doc-header .ts-tlinks-tlinks a:visited {
.documentation-startbox {
color: var(--color-visited, #6a60b0);
padding-bottom: 3px;
border-bottom: 1px solid var( --border-color-base, #a2a9b1 );
margin-bottom: 1ex;
}
}


.ts-doc-header .ts-tlinks-tlinks a:visited:active {
.documentation-heading {
color: var(--color-visited--active, #233566);
font-weight: bold;
font-size: 125%;
}
}


.ts-doc-content {
.documentation-clear { /* Don't want things to stick out where they shouldn't. */
padding: .214286em 1em;
}
 
.ts-doc-content:after {
content: '';
clear: both;
clear: both;
display: block;
}
.ts-doc-content > :first-child {
margin-top: .5em;
}
}


.ts-doc-content > :last-child {
.documentation-toolbar {
margin-bottom: .5em;
font-style: normal;
font-size: 85%;
}
}


.ts-doc-footer {
background-color: #eaf3ff;
color: var(--color-base, #202122);
border: 1px solid #a3caff;
padding: .214286em 1em;
margin-top: .214286em;
font-style: italic;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}


@media all and (min-width: 720px) {
@media screen {
.ts-doc-header .ts-tlinks-tlinks {
    html.skin-theme-clientpref-night .documentation,
float: right;
html.skin-theme-clientpref-night .documentation-metadata {
    background-color: #0b1e1c; color:inherit;
}
}
}
}


html.skin-theme-clientpref-night .ts-doc-header {
background-color: #233566;
}
html.skin-theme-clientpref-night .ts-doc-heading {
background-image: url( '//upload.wikimedia.org/wikipedia/commons/d/d3/OOjs_UI_icon_puzzle-ltr-invert.svg' );
}
html.skin-theme-clientpref-night .ts-doc-doc,
html.skin-theme-clientpref-night .ts-doc-footer {
background-color: #1b223d;
}


@media screen and (prefers-color-scheme: dark) {
@media screen and ( prefers-color-scheme: dark ) {
html.skin-theme-clientpref-os .ts-doc-header {
    html.skin-theme-clientpref-os .documentation,
background-color: #233566;
    html.skin-theme-clientpref-os .documentation-metadata {
}
        background-color: #0b1e1c; color:inherit;
    }
html.skin-theme-clientpref-os .ts-doc-heading {
background-image: url( '//upload.wikimedia.org/wikipedia/commons/d/d3/OOjs_UI_icon_puzzle-ltr-invert.svg' );
}
html.skin-theme-clientpref-os .ts-doc-doc,
html.skin-theme-clientpref-os .ts-doc-footer {
background-color: #1b223d;
}
}
}