Content added Content deleted
Eatyourglory (talk | contribs) (Disabled light/dark mode system) |
Eatyourglory (talk | contribs) (temporarily clear css page) Tags: Blanking Reverted |
||
Line 1: | Line 1: | ||
/* All CSS here will be loaded for users of the Vector skin */ |
|||
/* CSS from https://miaruniverse.miraheze.org/wiki/MediaWiki:Vector.css */ |
|||
/*==================*/ |
|||
/* root */ |
|||
/*==================*/ |
|||
:root { |
|||
--bg: #1e0c1b; |
|||
--primary: #990085; |
|||
--secondary: #faebed; |
|||
--accent: #FF7F67; |
|||
--accent-opacity: #ff7f6733; |
|||
--shadow-vignette: inset 0 0 10em 1em var(--accent-opacity); |
|||
--shadow-sticky: 0px 1em 1em -1em var(--accent), 0px 2em 2em -2em var(--primary); |
|||
--shadow-inside: inset 0px 1em 1em -1em var(--accent), inset 0px 2em 2em -2em var(--primary); |
|||
--shadow-outside: 0 0 2px 3px var(--accent), 0px 0 1em 0.25em var(--accent), 0px 0 2em 0.5em var(--primary); |
|||
--shadow-scrollbar-thumb: inset 0px 0 5px 0px var(--accent), inset 0px 0 5px 2px var(--primary), 0px 0 10px 2px var(--accent), 0px 0 10px 4px var(--primary); |
|||
--shadow-scrollbar-track: inset 0px 0 4px 1px var(--accent), inset 0px 0 5px 3px var(--primary); |
|||
} |
|||
/*======================*/ |
|||
/* dark/light system */ |
|||
/*======================*/ |
|||
/* @media (prefers-color-scheme: dark) { |
|||
:root { |
|||
--bg: #1e0c1b; |
|||
--primary: #990085; |
|||
--text: #faebed; |
|||
--secondary: hsl(352, 05%, 25%); |
|||
--accent: #FF7F67; |
|||
} |
|||
} |
|||
@media (prefers-color-scheme: light) { |
|||
:root { |
|||
--bg: #1e0c1b; |
|||
--primary: #990085; |
|||
--text: #1e0c1b; |
|||
--secondary: #faebed; |
|||
--accent: #FF7F67; |
|||
} |
|||
} |
|||
*/ |
|||
html { |
|||
color-scheme: dark light; |
|||
} |
|||
/*==================*/ |
|||
/* general design */ |
|||
/*==================*/ |
|||
html, |
|||
body { |
|||
height: auto; |
|||
} |
|||
html { |
|||
background: repeat repeat url(https://grainy-gradients.vercel.app/noise.svg); |
|||
} |
|||
html::-webkit-scrollbar { |
|||
width: 12px; |
|||
background-color: var(--text); |
|||
} |
|||
html::-webkit-scrollbar-thumb { |
|||
border-radius: 10px; |
|||
border: var(--bg) 1px solid; |
|||
box-shadow: var(--shadow-scrollbar-thumb); |
|||
background-color: var(--bg); |
|||
} |
|||
html::-webkit-scrollbar-track { |
|||
-webkit-box-shadow: var(--shadow-scrollbar-track); |
|||
border-radius: 10px; |
|||
border: var(--accent) 1px solid; |
|||
background-color: var(--bg); |
|||
} |
|||
body { |
|||
position: relative; |
|||
box-shadow: var(--shadow-inside); |
|||
background: var(--bg); |
|||
color: var(--text); |
|||
mix-blend-mode: multiply; |
|||
height: 100%; |
|||
} |
|||
h1, |
|||
h2, |
|||
h3, |
|||
h4, |
|||
h5, |
|||
h6 { |
|||
color: var(--text); |
|||
} |
|||
*>a { |
|||
color: var(--accent); |
|||
} |
|||
#vector-sticky-header { |
|||
opacity: 1; |
|||
box-shadow: var(--shadow-sticky); |
|||
} |
|||
.vector-sticky-header { |
|||
background-color: var(--secondary) !important; |
|||
} |
|||
@supports (animation-timeline: scroll()) { |
|||
#vector-sticky-header { |
|||
animation: scroll-shadow linear both; |
|||
animation-timeline: scroll(); |
|||
animation-range: 0ex 5ex; |
|||
} |
|||
@keyframes scroll-shadow { |
|||
from { |
|||
box-shadow: none; |
|||
} |
|||
to { |
|||
box-shadow: var(--shadow-sticky); |
|||
} |
|||
} |
|||
} |
|||
/* |
|||
.mw-header { |
|||
margin-top: 3em; |
|||
} |
|||
*/ |
|||
.mw-header #mw-sidebar-button { |
|||
margin-right: 0; |
|||
} |
|||
.mw-article-toolbar-container { |
|||
border-bottom: 1px solid transparent; |
|||
} |
|||
.vector-menu-tabs .mw-list-item.selected a, |
|||
.vector-menu-tabs .mw-list-item.selected a:visited { |
|||
color: var(--text); |
|||
} |
|||
.mw-logo-icon { |
|||
margin-right: none; |
|||
width: auto; |
|||
height: 128px; |
|||
} |
|||
.mw-logo-container { |
|||
display: none; |
|||
} |
|||
#p-lang-btn-label>span.vector-menu-heading-label { |
|||
font-size: 0; |
|||
} |
|||
#mw-sidebar-button, |
|||
.vector-user-menu-more .vector-menu-content-list, |
|||
.vector-user-menu-overflow .vector-menu-content-list, |
|||
#p-personal-label { |
|||
filter: invert(1); |
|||
} |
|||
.vector-menu-checkbox:checked~.vector-menu-content { |
|||
border-radius: .25em; |
|||
opacity: .75; |
|||
backdrop-filter: blur(1em); |
|||
} |
|||
.vector-menu-dropdown .vector-menu-content { |
|||
transition-duration: 250ms; |
|||
} |
|||
.skin--responsive .mw-page-container { |
|||
background-position: left -3em top; |
|||
background-color: transparent; |
|||
scroll-behavior: smooth; |
|||
} |
|||
.mw-content-container { |
|||
grid-area: content; |
|||
padding-right: 1em; |
|||
padding-left: 1em; |
|||
border-radius: .25em; |
|||
} |
|||
.mw-sidebar { |
|||
box-sizing: border-box; |
|||
padding: 12px 19px 12px 9px; |
|||
background-image: none; |
|||
background-color: var(--secondary); |
|||
border-radius: .25em; |
|||
} |
|||
.mw-content-ltr .thumbcaption { |
|||
text-align: left; |
|||
display: none; |
|||
} |
|||
.vector-menu-checkbox:checked~.vector-menu-content, |
|||
.mw-content-container, |
|||
.mw-sidebar, |
|||
.mw-footer-container { |
|||
box-shadow: var(--shadow-vignette), var(--shadow-outside); |
|||
background: var(--secondary); |
|||
} |
|||
.mw-footer { |
|||
border-top: 0; |
|||
} |
|||
.mw-footer li { |
|||
color: var(--text); |
|||
} |
|||
.mw-footer-container { |
|||
margin-top: 50px; |
|||
padding-top: 0; |
|||
margin-bottom: 82px; |
|||
padding-bottom: 0; |
|||
border-radius: .25em; |
|||
} |