Jump to content

MediaWiki:Vector-2022.css: Difference between revisions

test because dark mode is real
No edit summary
Tags: Mobile edit Mobile web edit
 
(7 intermediate revisions by the same user not shown)
Line 11: Line 11:


     --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;
}
}
Line 40: Line 40:
{
{
     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 */
}
}


Line 50: Line 58:
     background-color: var(--background-color-base);
     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 */
  }
}