Difference between revisions of "MediaWiki:Vector.css"

From Foundation - Wiki
Jump to navigation Jump to search
 
(31 intermediate revisions by 3 users not shown)
Line 2: Line 2:


:root {
:root {
--header: #9b6835;
--header: #dddddd;
--content-header: #fca349;
--secondary-header: #fca349;
--secondary-header: #fca349;
--label-color: #ffd28f;
--label-color: #ffd28f;
--line-color: #03611c;
--line-color: #777777;
--dark-mode-background: #3e3e3e;
--dark-mode-background: #3e3e3e;
--dark-mode-secondary-background: darkgrey;
--dark-mode-secondary-background: darkgrey;
--dark-mode-alt-link: #2d456c;
--dark-mode-alt-link-new: #9d0303;
--dark-mode-text: white;
}
}


Line 28: Line 32:


.mainpage-buttons ul li {
.mainpage-buttons ul li {
background: var(--header);
background: #dddddd;
box-shadow: 2px 2px var(--line-color);
box-shadow: 2px 2px var(--line-color);
}
}
Line 66: Line 70:
/* ################################## */
/* ################################## */


.mw-dark-mode .mw-page-base {
.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);
     background: var(--dark-mode-background);
}
}


.mw-dark-mode .mw-body {
.mw-dark-mode #catlinks, .mw-dark-mode .vector-menu-portal {
     background: var(--dark-mode-background);
     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 {
.mw-dark-mode #catlinks a.new:link, .mw-dark-mode #catlinks a.new:hover,
     background: var(--dark-mode-background);
.mw-dark-mode #catlinks a.new:visited {
     color: var(--dark-mode-alt-link-new);
}
}


.mw-dark-mode #mw-panel {
.mw-dark-mode #content, .mw-dark-mode #footer, .mw-dark-mode .vector-menu-heading,
     background: var(--dark-mode-background);
.mw-dark-mode .mw-headline {
     color: var(--dark-mode-text);
}
}


.mw-dark-mode #mw-head {
.mw-dark-mode #mw-content-text, .mw-dark-mode #mw-content-text h2,
    background: var(--dark-mode-background);
.mw-dark-mode #firstHeading, .mw-dark-mode #footer-info-lastmod {
    color: inherit;
}
}


.mw-dark-mode #catlinks {
.mw-dark-mode .mw-body ul {
     background: var(--dark-mode-secondary-background);
     list-style: none;
}
}


.mw-dark-mode .vector-menu-portal {
.mw-dark-mode .mw-body #catlinks ul li::before,
    background: var(--dark-mode-secondary-background);
.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 #content {
.mw-dark-mode .mw-body ul li::before {
    content: "\2022";
     color: white;
     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 #mw-content-text {
.mw-dark-mode .mainpage-buttons a:link, .mw-dark-mode .mainpage-buttons a:hover,
     color: inherit;
.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 #firstHeading {
.mw-dark-mode ins.diffchange {
    color: inherit;
background: #51a2ef;
}
}


.mw-dark-mode #footer {
.mw-dark-mode del.diffchange {
    color: white;
background: #a58843;
}
}


.mw-dark-mode #footer-info-lastmod {
.mw-dark-mode .mw-plusminus-pos {
    color: inherit;
color: #18ab18;
}
}


.mw-dark-mode .vector-menu-heading {
.mw-dark-mode .mw-plusminus-neg {
color: white;
color: #ff0101;
}
}


.mw-dark-mode .mw-body ul {
.mw-datatable, .ext-replacetext-searchoptions, .ext-replacetext-searchoptions {
    list-style: none;
color: black;
}
}


.mw-dark-mode .mw-body #catlinks ul li::before {
.mw-dark-mode .oo-ui-labelWidget.oo-ui-inline-help {
    display: none;
color: var(--dark-mode-text);
}
}


.mw-dark-mode .mw-body div:not(.catlinks) ul li::before {
.mw-dark-mode .oo-ui-fieldLayout-disabled > .oo-ui-fieldLayout-body >
    content: "\2022";
.oo-ui-fieldLayout-header > .oo-ui-labelElement-label {
    color: white;
color: var(--dark-mode-text);
    display: inline-block;
    width: 0.75em;
    font-size: 1.5em;
    line-height: 1em;
    margin-left: -1em;
}
}

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);
}