MediaWiki:Vector-2022.css: Difference between revisions

← Older edit

@@ Line 1: / Line 1: @@
-.vector-feature-zebra-design-disabled body {
+/* Must be good in both dark and light mode. */
-     background-color: #321616; /* @background-color-interactive-subtle */
+body
+{
+    /*background: #222;
+    color: white;
+    --background-color-base: #222;
+    --primary: white; */
+    --link: #FF2020;
+    --link-new: #A00000;
+    --link--visited: #FF6A6A;
+    --link-new--visited: #A06060;
+    --heading: #CCC;
+}
+a { color: var(--link); }
+a:visited { color: var(--link--visited); }
+a.new { color: var(--link-new); }
+a.new:visited { color: var(--link-new--visited); }
+.vector-toc .vector-toc-list-item-active > .vector-toc-link,
+.vector-toc .vector-toc-level-1-active:not(.vector-toc-list-item-expanded) > .vector-toc-link,
+.vector-toc .vector-toc-list-item-active.vector-toc-level-1-active > .vector-toc-link
+{
+     font-weight: bold;
+}
+.vector-pinnable-element .mw-list-item a,
+.vector-dropdown-content .mw-list-item a,
+.vector-pinnable-element .mw-list-item a:not(.mw-selflink):visited,
+.vector-dropdown-content .mw-list-item a:not(.mw-selflink):visited,
+.vector-toc .vector-toc-link,
+.vector-menu-tabs .mw-list-item a,
+#pt-userpage-2 a:not(.mw-selflink),
+.mw-parser-output a.extiw,
+.mw-parser-output a.external
+{
+    color: var(--link)
 }
-.vector-feature-zebra-design-disabled #vector-main-menu-pinned-container .vector-main-menu {
+/* links with higher specificity */
-    background-color: #242424; /* @background-color-base */
+.vector-menu-tabs .mw-list-item a {
+  color: var(--link) !important;
+}
+.vector-menu-tabs .mw-list-item a:visited {
+  color: var(--link--visited) !important; /* complain where god can hear you, not here */
 }
-h1, h2, h3, h4, h5, h6 {
+/*
-     color: #DDD; /* @color-base */
+.vector-pinnable-element .vector-menu-heading {
+     color: var(--heading);
 }
-.catlinks, figure[typeof~='mw:File/Thumb'], figure[typeof~='mw:File/Frame'], figure[typeof~='mw:File/Thumb'] > figcaption, figure[typeof~='mw:File/Frame'] > figcaption {
+.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
-    background: #161616;
+    background-color: var(--background-color-base);
+} */
+/* override: our wordmark is designed for dark mode */
+html header.mw-header a.mw-logo span.mw-logo-container,
+html header.mw-header a.mw-logo img.mw-logo-icon {
+  color-scheme: dark;
+  filter: none;
 }
-figure[typeof~='mw:File/Thumb'] > figcaption, figure[typeof~='mw:File/Frame'] > figcaption, figure[typeof~='mw:File/Thumb'], figure[typeof~='mw:File/Frame'], figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element, figure[typeof~='mw:File/Frame'] > :not(figcaption) .mw-file-element, .catlinks {
+html.skin-theme-clientpref-day header.mw-header a.mw-logo span.mw-logo-container,
-    border-color: #080808;
+html.skin-theme-clientpref-day header.mw-header a.mw-logo img.mw-logo-icon {
+  filter: invert(1) hue-rotate(180deg) saturate(10) brightness(0.7);
 }
-.wikitable {
+@media screen and (prefers-color-scheme: light) {
-  background: #242424;
+  html header.mw-header a.mw-logo span.mw-logo-container,
+  html header.mw-header a.mw-logo img.mw-logo-icon {
+    filter: invert(1) hue-rotate(180deg) saturate(10) brightness(0.7);
+  }
 }
-.wikitable > tr > th, .wikitable > * > tr > th {
-    background-color: #331616;
+/* dumb hack to make our wordmark appear at different browser sizes */
+.mw-logo-container { display: block; }
+.mw-logo-icon { display: none; }
+@media screen and (max-width:720px) {
+  .mw-logo-container { display: none; }
+  .mw-logo-icon { display: block; }
 }
-.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td {
+@media screen and (max-width: calc(639px)) {
-  border-color: #494949;
+  .vector-header {
+    flex-flow: row; /* fuck off and stay a row forever asshole */
+  }
 }
-.mw-parser-output div.documentation, .mw-parser-output div.documentation-metadata {
+.cdx-text-input { min-width: auto; } /* WHY IS THIS EVEN SET? WHO KLUDGED TOGETHER THIS AWFUL SKIN */
-     /* Over-qualifying this selector makes it take precedence */
-    background-color: #03130a;
+@media all {
+  .mw-logo {
+     min-width: auto; /* fixes width being too big on mobile */
+  }
 }