Content added Content deleted
Eatyourglory (talk | contribs) (temporarily clear css page) Tags: Blanking Reverted |
Eatyourglory (talk | contribs) (readding css) Tag: Manual revert |
||
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; |
|||
} |
Revision as of 18:16, 4 March 2024
/* 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;
}