Razzi: Try copying the dark mode less extension code compiled to css

2023-12-24T11:23:19Z

Try copying the dark mode less extension code compiled to css

New page

/* Link colors chosen for level AA conformance, see T233266 and T213778 */
@media screen {
/* set height for Monobook and Timeless, because the filter in FF needs dimensions to get it to apply */
html {
height: 100%;
}
.ext-darkmode-link::before {
content: '\263E';
/* Moon icon */
display: inline-block;
}
/* Vector 2022 has its own icon, set in Hooks.php */
.skin-vector-2022 .ext-darkmode-link::before {
display: none;
}
/* START OF DARKMODE STYLES */
.client-darkmode {
/* Needed for some skins that have weird DOM structures and CSS such that elements don't appear over the <body> */
/* This also helps save energy on OLED displays (such as smart phones). */
background: #fff;
/* "Default mode" link */
/* Reset overrides, needed where double application above isn't working. */
/* Vector modern */
/* Backgrounds */
/* Borders */
/* Links */
/* Links: normal */
/* Visited links */
/* Links: red */
/* ::: Special Element Treatments ::: */
/* Image thumbnails */
/* Content image (thumbnail) SVGs */
/* `*not( .mbox-image )` exception doesn't work for unclear reasons */
/* Dealing with false positives from selector above */
/* Page previews */
/* Contributions menu */
/* Mobile logo header */
}
.client-darkmode .ext-darkmode-link::before {
content: '\263C';
/* Sun icon */
}
.client-darkmode:not( .mw-invert ),
.client-darkmode img:not( .mw-invert ),
.client-darkmode video:not( .mw-invert ),
.client-darkmode svg:not( .mw-invert ),
.client-darkmode iframe:not( .mw-invert ),
.client-darkmode .mw-no-invert:not( .mw-invert ),
.client-darkmode .cdx-no-invert:not( .mw-invert ),
.client-darkmode td .diffchange:not( .mw-invert ),
.client-darkmode .skin-minerva .mw-notification-visible .mw-notification-content:not( .mw-invert ) {
filter: invert(1) hue-rotate(180deg);
-webkit-filter: invert(1) hue-rotate(180deg);
}
.client-darkmode .skin-vector .mw-logo-wordmark,
.client-darkmode .skin-vector .mw-logo-tagline,
.client-darkmode .skin-timeless .mw-wiki-title > img,
.client-darkmode .cdx-icon svg {
filter: none;
}
.client-darkmode table,
.client-darkmode table.ambox-content,
.client-darkmode table.toccolours,
.client-darkmode .mw-notification,
.client-darkmode .mwe-popups,
.client-darkmode .infobox,
.client-darkmode .toc,
.client-darkmode .thumbinner,
.client-darkmode .wikitable,
.client-darkmode .cbnnr-main,
.client-darkmode .cx-callout,
.client-darkmode #simpleSearch,
.client-darkmode #searchInput,
.client-darkmode #centralNotice .cnotice {
background-color: #ddd;
}
.client-darkmode,
.client-darkmode h1,
.client-darkmode h2,
.client-darkmode h3,
.client-darkmode h4,
.client-darkmode h5,
.client-darkmode h6,
.client-darkmode table.ambox-content,
.client-darkmode table.toccolours,
.client-darkmode .mw-notification,
.client-darkmode .infobox,
.client-darkmode .toc,
.client-darkmode .thumbinner,
.client-darkmode #mw-head,
.client-darkmode #mw-panel,
.client-darkmode #content.mw-body,
.client-darkmode #simpleSearch,
.client-darkmode #searchInput,
.client-darkmode #centralNotice .cnotice {
border-color: #cdcbc8;
}
.client-darkmode a,
.client-darkmode .vector-menu-tabs li a,
.client-darkmode .vectorTabs li a,
.client-darkmode .toctogglelabel,
.client-darkmode .mw-parser-output a.external,
.client-darkmode .mw-parser-output a.extiw,
.client-darkmode .mw-parser-output a.extiw:active,
.client-darkmode #mw-panel .portal .body li a {
color: #36c;
}
.client-darkmode a:visited,
.client-darkmode .mw-parser-output a.extiw:visited,
.client-darkmode #mw-panel .portal .body li a:visited {
color: #6b4ba1;
}
.client-darkmode a.new,
.client-darkmode .vector-menu-tabs li.new a,
.client-darkmode .vectorTabs li.new a {
color: #ff6e6e;
}
.client-darkmode .thumbimage {
border: 0;
}
.client-darkmode .image img[src*='svg'] {
background-color: #fff;
border-radius: 1px;
}
.client-darkmode .mw-echo-ui-notificationItemWidget-icon img[src*='svg'],
.client-darkmode .mbox-image .image img[src*='svg'],
.client-darkmode .image img[alt^='Symbol'] {
background-color: transparent;
}
.client-darkmode .mwe-popups {
box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.3), 0 0 1px #000;
}
.client-darkmode .mwe-popups.flipped-y::after,
.client-darkmode .mwe-popups.flipped-x-y::after {
border-top: 11px solid #ddd;
}
.client-darkmode .mwe-popups.mwe-popups-no-image-pointer::after {
border-bottom: 11px solid #ddd;
}
.client-darkmode html .cx-callout-1::after {
border-bottom-color: #ddd;
}
.client-darkmode html .branding-box img {
filter: brightness(0);
}
}

User:Razzi/vector.css - Revision history

Razzi: Try copying the dark mode less extension code compiled to css