Module:Documentation/styles.css: Difference between revisions

m 1 revision imported
MediaWiki>ExE Boss
Unify doc header link colours to fix dark mode support
Line 6: Line 6:
clear: both;
clear: both;
background-color: #eaf3ff;
background-color: #eaf3ff;
color: var(--color-fixed, #333);
color: var(--color-base, #202122);
border: 1px solid #a3caff;
border: 1px solid #a3caff;
margin-top: 1em;
margin-top: 1em;
Line 14: Line 14:


.ts-doc-header {
.ts-doc-header {
background-color: #c2dcff;
background-color: #cbd6f6;
color: var(--color-fixed, #333 );
color: var(--color-base, #202122);
padding: .642857em 1em .5em;
padding: .642857em 1em .5em;
border-top-left-radius: 2px;
border-top-left-radius: 2px;
Line 40: Line 40:
}
}


.ts-doc-header .ts-tlinks-tlinks a.external {
.ts-doc-header .ts-tlinks-tlinks a {
color: #0645ad;
color: var(--color-progressive, #36c);
}
}


.ts-doc-header .ts-tlinks-tlinks a.external:visited {
.ts-doc-header .ts-tlinks-tlinks a:active {
color: #0b0080;
color: var(--color-progressive--active, #233566);
}
}


.ts-doc-header .ts-tlinks-tlinks a.external:active {
.ts-doc-header .ts-tlinks-tlinks a:visited {
color: #faa700;
color: var(--color-visited, #6a60b0);
}
 
.ts-doc-header .ts-tlinks-tlinks a:visited:active {
color: var(--color-visited--active, #233566);
}
}


Line 72: Line 76:
.ts-doc-footer {
.ts-doc-footer {
background-color: #eaf3ff;
background-color: #eaf3ff;
color: var(--color-fixed, #333);
color: var(--color-base, #202122);
border: 1px solid #a3caff;
border: 1px solid #a3caff;
padding: .214286em 1em;
padding: .214286em 1em;
Line 87: Line 91:
}
}


/* fix headers in dark mode */
html.skin-theme-clientpref-night .ts-doc-header {
.ts-doc-content .mw-heading {
background-color: #3056a9;
color: var(--color-fixed, #222);
}
}
.mw-templatedata-caption,
 
.mw-templatedata-format {
html.skin-theme-clientpref-night .ts-doc-heading {
color: var(--color-fixed, #222);
background-image: url( '//upload.wikimedia.org/wikipedia/commons/d/d3/OOjs_UI_icon_puzzle-ltr-invert.svg' );
}
}
/* fix icon for templatedata params (inline/block) in dark mode */
 
.mw-templatedata-doc-params .oo-ui-widget {
html.skin-theme-clientpref-night .ts-doc-doc,
filter: unset !important;
html.skin-theme-clientpref-night .ts-doc-footer {
background-color: #1b223d;
}
 
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .ts-doc-header {
background-color: #3056a9;
}
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;
}
}
}