MediaWiki:Vector.css: Difference between revisions
m improve enabled interwiki cell & inline container backgrounds |
m fix metadata background |
||
| Line 92: | Line 92: | ||
table.mw-interwikitable.body td.mw-interwikitable-local-yes { /* Interwiki data special page */ | table.mw-interwikitable.body td.mw-interwikitable-local-yes { /* Interwiki data special page */ | ||
background-color: var(--content-hl-color); /* enabled table cell */ | background-color: var(--content-hl-color); /* enabled table cell */ | ||
} | |||
.mw_metadata td { | |||
background-color: var(--content-box-color); /* file metadata details */ | |||
} | } | ||
Revision as of 19:03, 7 September 2024
/* Dark BOTF-Wiki style for the Vector skin. */
/* Globally applied through MediaWiki:Vector.css page. */
/* Editing requires interface administrator permission. */
.skin-vector-2022 {
--background-color-base: #000000b2; /* wiki background color */
background-color: #202020; /* outer background color */
color: #f0f0f0; /* wiki page font color */
/* local variables used by this skin */
--content-bg-color: #00000050; /* main content container background */
--sidebar-bg-color: var(--content-bg-color); /* sidebar container background */
--content-topic-color: white; /* content topic font color */
--content-text-color: #f0f0f0; /* content text font color */
--content-box-color: #15002f87; /* inline box color of the content */
--content-fl-color: #26013ee8; /* less transparent floating content box */
--content-hl-color: #4a0179e0; /* highlighted floating content box */
--button-bg-color: none; /* menu button background color */
--button-fl-color: #330055b5; /* floating menu button background color */
--button-hl-color: #6100a4a1; /* top-right menu button hover color */
--button-text-color: var(--content-text-color); /* menu button text color */
--toc-button-bg-color: #550023; /* table-of-contents collapse button background 420060; */
--toc-button-hl-color: #ae004a; /* table-of-contents collapse button hover color */
--menu-bg-color: var(--content-fl-color); /* popup menu background color */
--menu-link-color: #ffe453; /* popup menu link color */
--menu-vlink-color: #ffa42e; /* popup menu visited link color */
/* Background */
&.mediawiki.ltr {
background-image: url(/botf/wiki/images/background/Freezerondigital-Space-Backgrounds/Space-Background-Image-3.jpg);
background-attachment: fixed;
background-position: center;
}
/* Page Content Container */
.mw-content-container {
.vector-page-titlebar {
background-color: var(--content-bg-color); /* header line background */
padding: 5px 16px 0px 16px; /* pad header line background */
}
.vector-page-titlebar::after {
margin: 0px 16px; /* align header underline */
}
.vector-page-toolbar {
background-color: var(--content-bg-color); /* content toolbar background */
padding: 0px 16px; /* pad content toolbar background */
}
#bodyContent {
background-color: var(--content-bg-color); /* content background */
padding: 0px 16px; /* pad content background */
}
}
/* Page Content */
.mw-heading, .vector-menu-heading, h1, h2, h3, h4, h5, h6 {
color: var(--content-topic-color); /* topic color */
}
li::marker {
color: var(--content-text-color); /* wiki page list marker color */
}
ul {
list-style-image: none; /* remove black list item image */
}
.mw-footer li {
color: var(--content-text-color); /* footer color */
}
code, .mw-code {
background-color: var(--content-box-color); /* code box color */
color: var(--content-text-color); /* code font color */
}
.catlinks {
background-color: var(--content-box-color); /* category links footer */
}
.mw-changeslist-legend {
background-color: transparent; /* content legend */
}
.mw-body-content .infobox {
background-color: transparent; /* info box */
}
@media screen {
.wikitable { /* content table */
background-color: transparent;
color: var(--content-text-color);
tr > th {
background-color: var(--content-fl-color);
color: var(--content-topic-color);
}
}
li.gallerybox div.thumb { /* files gallery box */
background-color: var(--content-fl-color);
}
}
table.mw-interwikitable.body td.mw-interwikitable-local-yes { /* Interwiki data special page */
background-color: var(--content-hl-color); /* enabled table cell */
}
.mw_metadata td {
background-color: var(--content-box-color); /* file metadata details */
}
/* Link Colors */
a, a.external:not(.text), .vector-pinnable-element .mw-list-item a,
.vector-menu-tabs .mw-list-item a, .vector-toc .vector-toc-link {
color: #ffe453; /* link color */
}
a:visited, .vector-pinnable-element .mw-list-item a:visited,
.vector-menu-tabs .mw-list-item a:visited {
color: #ffa42e; /* visited link color */
}
a.external.text {
filter: hue-rotate(190deg) brightness(2.2);
filter: hue-rotate(190deg) brightness(2.2); /* external link text & icon color */
}
a:visited.external.text, .mw-parser-output a:visited.external.text {
color: #36c;
filter: hue-rotate(150deg) brightness(2); /* visited external link text & icon color */
}
#mw-indicator-mw-helplink a {
filter: invert(100%); /* invert help link icon */
color: #0010ff; /* inverted help link text */
}
@media screen {
.mw-parser-output { /* external link icon color */
a.external {
filter: hue-rotate(190deg) brightness(2.2);
color: #36c;
}
a.external:visited {
color: #0e50b7; /* filter is not permitted on visited links */
}
}
}
/* Menu Items */
.vector-menu-tabs .mw-list-item.selected a, .vector-menu-tabs .mw-list-item.selected a:visited {
color: #e63213; /* selected menu tabs*/
}
.vector-dropdown label::after {
filter: invert(100%); /* invert dropdown icon color */
}
.vector-toc .vector-toc-list-item-active > .vector-toc-link {
color: #ffa42e; /* active contents link color */
}
.vector-toc .vector-toc-level-1-active > .vector-toc-link {
color: #ffa42e; /* active parent link color */
}
#pt-userpage-2 a {
color: #ffe453; /* top user page link color */
}
.vector-icon {
filter: invert(100%); /* invert icon colors */
-webkit-filter: invert(100%);
}
/* Components */
.oo-ui-window-frame {
color: black; /* for VisualEditor save and other dialogs */
}
.vector-dropdown .cdx-button:enabled, .vector-dropdown .cdx-button.cdx-button--fake-button--enabled {
color: #ff4ff4; /* dropdown text color */
}
.cdx-button--framed:hover, /* hovered top search button */
.cdx-button:enabled.cdx-button--weight-quiet:hover,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet:hover { /* hovered top right menu button */
background-color: var(--button-hl-color);
}
.cdx-button.cdx-button--fake-button--enabled {
background-color: var(--button-bg-color); /* menu button */
color: var(--button-text-color);
}
&.vector-below-page-title .vector-page-titlebar-toc .cdx-button.cdx-button--fake-button--enabled {
background-color: var(--button-fl-color); /* scrolled down top-left mobile menu button */
}
.vector-dropdown-content {
background-color: var(--menu-bg-color); /* popup menu background */
.mw-list-item a {
color: var(--menu-link-color); /* popup menu link color */
&:visited {
color: var(--menu-vlink-color);
}
}
}
button.cdx-button, button.cdx-button:enabled {
background-color: var(--button-bg-color); /* toggle button */
color: var(--button-text-color);
}
button.cdx-button:enabled:hover {
background-color: var(--button-hl-color); /* hovered toggle button */
color: var(--button-text-color);
}
figure > figcaption {
background-color: #282828; /* image description */
}
#preferences .mw-htmlform-submit-buttons {
background-color: var(--content-fl-color); /* floating preferences save footer */
}
#pagehistory li.selected {
background-color: #a504ff3d; /* selected page history entry */
color: var(--content-text-color);
}
/* search */
.cdx-search-input--has-end-button {
background-color: var(--button-bg-color); /* top search button */
color: var(--button-text-color);
}
.cdx-menu {
background-color: var(--content-fl-color); /* search suggestions box */
.cdx-menu-item--enabled .cdx-menu-item__content {
color: var(--content-text-color);
}
.cdx-icon {
color: #ffe453; /* search icon */
}
.cdx-thumbnail__placeholder {
background-color: transparent; /* missing thumbnail placeholder */
}
}
/* Menu Alignment Fixtures */
.mw-page-container-inner {
margin-left: -11px; /* compensate menu margin */
}
.vector-pinned-container {
background-color: var(--sidebar-bg-color); /* left and right tool boxes */
margin-left: 11px; /* prevent collapse button to be cut off */
padding: 8px 15px; /* increase pinned container padding */
}
.vector-toc .vector-pinnable-header {
margin-left: 0px; /* fix left contents menu pedding */
}
.vector-toc .vector-toc-list-item {
padding-left: 0px; /* fix left contents menu pedding */
}
.vector-column-start .vector-sticky-pinned-container {
margin-left: 0px; /* fix left contents menu alignment */
}
.vector-sticky-pinned-container::after {
margin-left: 11px; /* match .vector-pinned-container */
background: none; /* remove empty gradient stripes */
}
/* Fix Overlapping Collapse Button */
.vector-toc-list-item {
/* .vector-toc-link:has(+ .cdx-button) {
margin-left: 16px;
} */
.vector-toc-list {
/* margin-left: 16px; */
font-size: 0.87em; /* reduce sub-topic items */
line-height: 0.87em;
}
button.cdx-button.vector-toc-toggle {
background-color: var(--toc-button-bg-color);
left: -28px; /* prevent collapse button overlapping */
&:hover {
background-color: var(--toc-button-hl-color);
}
}
}
/* Fix Footer Spacing */
#footer-icons li a {
margin-left: 8px; /* add some footer icon spacing */
}
/* Popup Colors */
.mwe-popups {
background: transparent;
color: white; /* change text color */
a, a:visited {
color: white;
}
.popups-icon {
filter: invert(100%); /* invert settings & notification icon color */
-webkit-filter: invert(100%); /* for: "There was an issue displaying this preview" */
}
.mwe-popups-container {
background-color: #260535; /* color popup background */
border: solid 2px #461159; /* color border for better visibility */
.mwe-popups-extract::after {
background-image: linear-gradient(to right,rgba(255,255,255,0),#260535 50%); /* adjust text fade-out color */
}
footer {
padding: 0 16px 8px; /* adjust for bottom-border */
}
.mwe-popups-extract {
margin-bottom: 20px; /* reduce settings icon spacing */
/* Note that some spacing is needed for the "Go to this page" text,
when there was an issue displaying the preview. ( when articles have no introduction ) */
}
}
/* popup with clipped top arrow */
&:not(.flipped-x-y, .flipped-y) {
.mwe-popups-container {
padding-top: 0px; /* fix top padding */
border-top: 10px solid #461159; /* color clipped top border */
}
}
/* popup with clipped bottom arrow */
&.flipped-x-y, &.flipped-y {
.mwe-popups-container {
border-bottom: 10px solid #461159; /* color clipped bottom border */
}
}
}
}