Jump to content

MediaWiki:Vector-2022.css: Difference between revisions

From Red Letter Media Wiki
← Older edit
No edit summary
No edit summary
Tags: Mobile edit Mobile web edit
 
(18 intermediate revisions by the same user not shown)
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
body
{
{
     background: #222;
     /*background: #222;
     color: white;
     color: white;


     --background-color-base: #222;
     --background-color-base: #222;


     --primary: white;
     --primary: white; */


     --link: #FF2020;
     --link: #FF2020;
     --link-new: #AA0000;
     --link-new: #A00000;
     --link--visited: #FF8080;
     --link--visited: #FF6A6A;
     --link-new--visited: #AA4040;
     --link-new--visited: #A06060;
     --heading: #CCC;
     --heading: #CCC;
}
.vector-pinned-container
{
    background: var(--background-color-base)
}
}


Line 38: Line 26:
.vector-toc .vector-toc-list-item-active.vector-toc-level-1-active > .vector-toc-link
.vector-toc .vector-toc-list-item-active.vector-toc-level-1-active > .vector-toc-link
{
{
    color: var(--white);
     font-weight: bold;
     font-weight: bold;
}
span.vector-icon.mw-ui-icon-unStar.mw-ui-icon-wikimedia-unStar
{
    filter: invert(1);
}
}


Line 53: Line 35:
.vector-toc .vector-toc-link,
.vector-toc .vector-toc-link,
.vector-menu-tabs .mw-list-item a,
.vector-menu-tabs .mw-list-item a,
#pt-userpage-2 a:not(.mw-selflink)
#pt-userpage-2 a:not(.mw-selflink),
.mw-parser-output a.extiw,
.mw-parser-output a.external
{
{
     color: var(--link)
     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 {
.vector-pinnable-element .vector-menu-heading {
     color: var(--heading);
     color: var(--heading);
Line 64: Line 57:
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
     background-color: var(--background-color-base);
     background-color: var(--background-color-base);
}
} */


/* Edits to "zebra design" popups like the visual editor to let them look nice with our color hacks */
/* override: our wordmark is designed for dark mode */


.vector-feature-zebra-design-disabled body {
html header.mw-header a.mw-logo span.mw-logo-container,
    background-color: #321616; /* @background-color-interactive-subtle */
html header.mw-header a.mw-logo img.mw-logo-icon {
  color-scheme: dark;
  filter: none;
}
}


.vector-feature-zebra-design-disabled #vector-main-menu-pinned-container .vector-main-menu {
html.skin-theme-clientpref-day header.mw-header a.mw-logo span.mw-logo-container,
    background-color: #242424; /* @background-color-base */
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);
}
}


h1, h2, h3, h4, h5, h6 {
@media screen and (prefers-color-scheme: light) {
     color: #DDD; /* @color-base */
  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);
  }
}
}


.catlinks, figure[typeof~='mw:File/Thumb'], figure[typeof~='mw:File/Frame'], figure[typeof~='mw:File/Thumb'] > figcaption, figure[typeof~='mw:File/Frame'] > figcaption {
/* dumb hack to make our wordmark appear at different browser sizes */
    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 {
.mw-logo-container { display: block; }
  background: #242424;
.mw-logo-icon { display: none; }
}
.wikitable > tr > th, .wikitable > * > tr > th {
    background-color: #331616;
}


.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td {
@media screen and (max-width:720px) {
   border-color: #494949;
  .mw-logo-container { display: none; }
   .mw-logo-icon { display: block; }
}
}


.mw-parser-output div.documentation, .mw-parser-output div.documentation-metadata {
@media screen and (max-width: calc(639px)) {
     /* Over-qualifying this selector makes it take precedence */
  .vector-header {
    background-color: #03130a;
     flex-flow: row; /* fuck off and stay a row forever asshole */
  }
}
}


label.cdx-button:enabled, label.cdx-button.cdx-button--fake-button--enabled {
.cdx-text-input { min-width: auto; } /* WHY IS THIS EVEN SET? WHO KLUDGED TOGETHER THIS AWFUL SKIN */
    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;
    }
}


@media screen and (min-width: 1000px) {
@media all {
    /* this is it. this is the worst CSS i've ever written before in my life. */
  .mw-logo {
    .mw-logo .mw-logo-container {
     min-width: auto; /* fixes width being too big on mobile */
        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: '';
    }
}
}

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 */
  }
}
Retrieved from "https://redlettermedia.wiki/mediawiki/index.php?title=MediaWiki:Vector-2022.css&oldid=2722"