Difference between revisions of "MediaWiki:Vector.css"
Jump to navigation
Jump to search
(36 intermediate revisions by 3 users not shown) | |||
Line 2: | Line 2: | ||
:root { | :root { | ||
--header: # | --header: #dddddd; | ||
--content-header: #fca349; | |||
--secondary-header: #fca349; | --secondary-header: #fca349; | ||
--label-color: #ffd28f; | --label-color: #ffd28f; | ||
--line-color: # | --line-color: #777777; | ||
--dark-mode-background: #3e3e3e; | |||
--dark-mode-secondary-background: darkgrey; | |||
--dark-mode-alt-link: #2d456c; | |||
--dark-mode-alt-link-new: #9d0303; | |||
--dark-mode-text: white; | |||
} | } | ||
Line 26: | Line 32: | ||
.mainpage-buttons ul li { | .mainpage-buttons ul li { | ||
background: | background: #dddddd; | ||
box-shadow: 2px 2px var(--line-color); | box-shadow: 2px 2px var(--line-color); | ||
} | } | ||
Line 58: | Line 64: | ||
.wikitable > * > tr:nth-child(odd) > td { | .wikitable > * > tr:nth-child(odd) > td { | ||
background: var(--label-color); | background: var(--label-color); | ||
} | |||
/* ################################## */ | |||
/* Dark Mode */ | |||
/* ################################## */ | |||
.mw-dark-mode, .mw-dark-mode .mw-page-base, .mw-dark-mode .mw-body, | |||
.mw-dark-mode #mw-panel, .mw-dark-mode #mw-head | |||
{ | |||
background: var(--dark-mode-background); | |||
} | |||
.mw-dark-mode #catlinks, .mw-dark-mode .vector-menu-portal { | |||
background: var(--dark-mode-secondary-background); | |||
} | |||
.mw-dark-mode #catlinks a:link, .mw-dark-mode #catlinks a:hover, | |||
.mw-dark-mode #catlinks a:visited { | |||
color: var(--dark-mode-alt-link); | |||
} | |||
.mw-dark-mode #catlinks a.new:link, .mw-dark-mode #catlinks a.new:hover, | |||
.mw-dark-mode #catlinks a.new:visited { | |||
color: var(--dark-mode-alt-link-new); | |||
} | |||
.mw-dark-mode #content, .mw-dark-mode #footer, .mw-dark-mode .vector-menu-heading, | |||
.mw-dark-mode .mw-headline { | |||
color: var(--dark-mode-text); | |||
} | |||
.mw-dark-mode #mw-content-text, .mw-dark-mode #mw-content-text h2, | |||
.mw-dark-mode #firstHeading, .mw-dark-mode #footer-info-lastmod { | |||
color: inherit; | |||
} | |||
.mw-dark-mode .mw-body ul { | |||
list-style: none; | |||
} | |||
.mw-dark-mode .mw-body #catlinks ul li::before, | |||
.mw-dark-mode .mw-body #toc ul li::before, | |||
.mw-dark-mode .mw-body .redirectMsg ul li::before, | |||
.mw-dark-mode .mw-body .mainpage-buttons ul li::before, | |||
.mw-dark-mode .mw-body .mw-body-content .gallery li::before { | |||
display: none; | |||
} | |||
.mw-dark-mode .mw-body ul li::before { | |||
content: "\2022"; | |||
color: white; | |||
display: inline-block; | |||
width: 0.75em; | |||
font-size: 1.5em; | |||
line-height: 1em; | |||
margin-left: -1em; | |||
} | |||
.mw-dark-mode .mw-changeslist-legend, .mw-dark-mode .mw-body #catlinks { | |||
color: black; | |||
} | |||
.mw-dark-mode a { | |||
color: #3782ff; | |||
} | |||
.mw-dark-mode a.new { | |||
color: red; | |||
} | |||
.mw-dark-mode .mainpage-buttons a:link, .mw-dark-mode .mainpage-buttons a:hover, | |||
.mw-dark-mode .mainpage-buttons a:visited { | |||
color: var(--dark-mode-alt-link); | |||
} | |||
.mw-dark-mode .mainpage-buttons a.new:link, .mw-dark-mode .mainpage-buttons a.new:hover, | |||
.mw-dark-mode .mainpage-buttons a.new:visited { | |||
color: var(--dark-mode-alt-link-new); | |||
} | |||
/* Recent Changes */ | |||
.mw-dark-mode .mw-changeslist h4 { | |||
color: var(--dark-mode-text); | |||
} | |||
.mw-dark-mode ins.diffchange { | |||
background: #51a2ef; | |||
} | |||
.mw-dark-mode del.diffchange { | |||
background: #a58843; | |||
} | |||
.mw-dark-mode .mw-plusminus-pos { | |||
color: #18ab18; | |||
} | |||
.mw-dark-mode .mw-plusminus-neg { | |||
color: #ff0101; | |||
} | |||
.mw-datatable, .ext-replacetext-searchoptions, .ext-replacetext-searchoptions { | |||
color: black; | |||
} | |||
.mw-dark-mode .oo-ui-labelWidget.oo-ui-inline-help { | |||
color: var(--dark-mode-text); | |||
} | |||
.mw-dark-mode .oo-ui-fieldLayout-disabled > .oo-ui-fieldLayout-body > | |||
.oo-ui-fieldLayout-header > .oo-ui-labelElement-label { | |||
color: var(--dark-mode-text); | |||
} | } |
Latest revision as of 14:44, 17 October 2023
/* All CSS here will be loaded for users of the Vector skin */
:root {
--header: #dddddd;
--content-header: #fca349;
--secondary-header: #fca349;
--label-color: #ffd28f;
--line-color: #777777;
--dark-mode-background: #3e3e3e;
--dark-mode-secondary-background: darkgrey;
--dark-mode-alt-link: #2d456c;
--dark-mode-alt-link-new: #9d0303;
--dark-mode-text: white;
}
.wikitable > * > tr > th {
background: var(--header);
}
.infobox-title {
background: var(--header);
}
.infobox-header {
background: var(--secondary-header);
}
.header-box {
background: var(--header);
box-shadow: 2px 2px var(--line-color);
}
.mainpage-buttons ul li {
background: #dddddd;
box-shadow: 2px 2px var(--line-color);
}
.infobox {
box-shadow: 2px 2px var(--line-color);
border: 1px solid var(--line-color);
}
.infobox-label {
background: var(--label-color);
}
.wikitable {
border:none;
}
.wikitable > tr, .wikitable > * > tr {
border: none;
border-bottom: 1px solid var(--line-color);
}
.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
border: none;
}
.wikitable > tr > td,
.wikitable > * > tr:nth-child(odd) > td {
background: var(--label-color);
}
/* ################################## */
/* Dark Mode */
/* ################################## */
.mw-dark-mode, .mw-dark-mode .mw-page-base, .mw-dark-mode .mw-body,
.mw-dark-mode #mw-panel, .mw-dark-mode #mw-head
{
background: var(--dark-mode-background);
}
.mw-dark-mode #catlinks, .mw-dark-mode .vector-menu-portal {
background: var(--dark-mode-secondary-background);
}
.mw-dark-mode #catlinks a:link, .mw-dark-mode #catlinks a:hover,
.mw-dark-mode #catlinks a:visited {
color: var(--dark-mode-alt-link);
}
.mw-dark-mode #catlinks a.new:link, .mw-dark-mode #catlinks a.new:hover,
.mw-dark-mode #catlinks a.new:visited {
color: var(--dark-mode-alt-link-new);
}
.mw-dark-mode #content, .mw-dark-mode #footer, .mw-dark-mode .vector-menu-heading,
.mw-dark-mode .mw-headline {
color: var(--dark-mode-text);
}
.mw-dark-mode #mw-content-text, .mw-dark-mode #mw-content-text h2,
.mw-dark-mode #firstHeading, .mw-dark-mode #footer-info-lastmod {
color: inherit;
}
.mw-dark-mode .mw-body ul {
list-style: none;
}
.mw-dark-mode .mw-body #catlinks ul li::before,
.mw-dark-mode .mw-body #toc ul li::before,
.mw-dark-mode .mw-body .redirectMsg ul li::before,
.mw-dark-mode .mw-body .mainpage-buttons ul li::before,
.mw-dark-mode .mw-body .mw-body-content .gallery li::before {
display: none;
}
.mw-dark-mode .mw-body ul li::before {
content: "\2022";
color: white;
display: inline-block;
width: 0.75em;
font-size: 1.5em;
line-height: 1em;
margin-left: -1em;
}
.mw-dark-mode .mw-changeslist-legend, .mw-dark-mode .mw-body #catlinks {
color: black;
}
.mw-dark-mode a {
color: #3782ff;
}
.mw-dark-mode a.new {
color: red;
}
.mw-dark-mode .mainpage-buttons a:link, .mw-dark-mode .mainpage-buttons a:hover,
.mw-dark-mode .mainpage-buttons a:visited {
color: var(--dark-mode-alt-link);
}
.mw-dark-mode .mainpage-buttons a.new:link, .mw-dark-mode .mainpage-buttons a.new:hover,
.mw-dark-mode .mainpage-buttons a.new:visited {
color: var(--dark-mode-alt-link-new);
}
/* Recent Changes */
.mw-dark-mode .mw-changeslist h4 {
color: var(--dark-mode-text);
}
.mw-dark-mode ins.diffchange {
background: #51a2ef;
}
.mw-dark-mode del.diffchange {
background: #a58843;
}
.mw-dark-mode .mw-plusminus-pos {
color: #18ab18;
}
.mw-dark-mode .mw-plusminus-neg {
color: #ff0101;
}
.mw-datatable, .ext-replacetext-searchoptions, .ext-replacetext-searchoptions {
color: black;
}
.mw-dark-mode .oo-ui-labelWidget.oo-ui-inline-help {
color: var(--dark-mode-text);
}
.mw-dark-mode .oo-ui-fieldLayout-disabled > .oo-ui-fieldLayout-body >
.oo-ui-fieldLayout-header > .oo-ui-labelElement-label {
color: var(--dark-mode-text);
}