MediaWiki:Vector-2022.css: Difference between revisions

Revision as of 21:03, 14 June 2025

/* Must be good in both dark and light mode. */

body
{
    /*background: #222;
    color: white;

    --background-color-base: #222;

    --primary: white; */

    --link: #FF2020;
    --link-new: #AA0000;
    --link--visited: #FF8080;
    --link-new--visited: #AA4040;
    --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-pinnable-element .vector-menu-heading {
    color: var(--heading);
}

.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
    background-color: var(--background-color-base);
} */

@@ Line 1: / Line 1: @@
-/* so these were originally internal edits i made to the
+/* Must be good in both dark and light mode. */
-vector 2022 skin in its special variables section that's
-*designed* to let you write your own edits to internal
-variables
-but then a pacman update overwrote my changes
-so now it's all here. nyah. */
 body
 {
-     background: #222;
+     /*background: #222;
      color: white;
      --background-color-base: #222;
-     --primary: white;
+     --primary: white; */
      --link: #FF2020;
@@ Line 23: / Line 16: @@
      --heading: #CCC;
 }
-.vector-pinned-container,
-.vector-dropdown .vector-dropdown-content
-{
-    background: var(--background-color-base)
-}
-.vector-menu-tabs .mw-list-item.selected a,
-.vector-menu-tabs .mw-list-item.selected a:visited
-{ color: var(--white); }
 a { color: var(--link); }
@@ Line 43: / Line 26: @@
 .vector-toc .vector-toc-list-item-active.vector-toc-level-1-active > .vector-toc-link
 {
-    color: var(--white);
      font-weight: bold;
-}
-.vector-icon,
-#mw-indicator-mw-helplink a
-{
-    filter: invert(1);
 }
@@ Line 66: / Line 42: @@
 }
+/*
 .vector-pinnable-element .vector-menu-heading {
      color: var(--heading);
@@ Line 72: / Line 49: @@
 .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
      background-color: var(--background-color-base);
-}
-/* Edits to "zebra design" popups like the visual editor to let them look nice with our color hacks */
-.vector-feature-zebra-design-disabled body {
-    background-color: #321616; /* @background-color-interactive-subtle */
-}
-.vector-feature-zebra-design-disabled #vector-main-menu-pinned-container .vector-main-menu {
-    background-color: #242424; /* @background-color-base */
-}
-h1, h2, h3, h4, h5, h6 {
-    color: #DDD; /* @color-base */
-}
-.catlinks, figure[typeof~='mw:File/Thumb'], figure[typeof~='mw:File/Frame'], figure[typeof~='mw:File/Thumb'] > figcaption, figure[typeof~='mw:File/Frame'] > figcaption {
-    background: #161616;
-}
-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 {
-    border-color: #080808;
-}
-.wikitable {
-  background: #242424;
-}
-.wikitable > tr > th, .wikitable > * > tr > th {
-    background-color: #331616;
-}
-.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td {
-  border-color: #494949;
-}
-.mw-parser-output div.documentation, .mw-parser-output div.documentation-metadata {
-    /* Over-qualifying this selector makes it take precedence */
-    background-color: #03130a;
-}
-label.cdx-button:enabled, label.cdx-button.cdx-button--fake-button--enabled {
-    color: #DDD;
-}
-.mw-parser-output a.extiw:visited, .mw-parser-output a.external:visited {
-    color:#ff6464;
-}
-.oo-ui-window-frame {
-    color: #101010;
-}
-@media (max-width: 720px) {
-    .mw-logo .mw-logo-container {
-        display: none;
-    }
-    .mw-logo .mw-logo-icon {
-        display: block;
-    }
-}
-@media (min-width: 720px) {
-    .mw-logo .mw-logo-icon {
-        display: none;
-    }
-}
-/* this effect was really cool, but it didn't work reliably on all screen sizes, so i scrapped it. */
-/* original comment: this is it. this is the worst CSS i've ever written before in my life. */
-/* @media screen and (min-width: 1000px) {
-    .mw-logo .mw-logo-container {
-        display: none;
-    }
-    .mw-logo .mw-logo-icon {
-        display: block;
-        width: 100%;
-        object-fit: cover;
-        overflow: visible;
-        object-position: top;
-    }
-    .vector-main-menu-container {
-        padding-top: 124px;
-        position: relative;
-    }
-    .vector-menu-content-list a[href=\/w\/Main_Page]::before {
-        position: absolute;
-        top: -70px;
-        left: 0;
-        right: 0;
-        bottom: 200px;
-        content: '';
-    }
 } */
-/* TABLES */
-.mw-datatable th {
-    background-color: #200;
-}
-.mw-datatable td {
-    background-color: #101010;
-}
-.mw-htmlform-ooui .mw-htmlform-matrix tbody tr:hover td {
-    background-color: black !important; /* angry */
-}
-.wikitable > tr > td,
-.wikitable > * > tr > th,
-.wikitable > * > tr > td
-{
-    color: white;
-}
-/* There was a snarky edit here but I actually misunderstood the problem
-   so the snarky edit is gone. Anyway, lists. */
-ul {
-  list-style-image: none;
-}