MediaWiki:Vector-2022.css: Difference between revisions

Latest revision as of 15:29, 16 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: #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)
}

/* links with higher specificity */
.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 */
}

/*
.vector-pinnable-element .vector-menu-heading {
    color: var(--heading);
}

.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
    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;
}

html.skin-theme-clientpref-day header.mw-header a.mw-logo span.mw-logo-container,
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);
}

@media screen and (prefers-color-scheme: light) {
  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);
  }
}

/* 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; }
}

@media screen and (max-width: calc(639px)) {
  .vector-header {
    flex-flow: row; /* fuck off and stay a row forever asshole */
  }
}

.cdx-text-input { min-width: auto; } /* WHY IS THIS EVEN SET? WHO KLUDGED TOGETHER THIS AWFUL SKIN */

@media all {
  .mw-logo {
    min-width: auto; /* fixes width being too big on mobile */
  }
}