Content added Content deleted
Eatyourglory (talk | contribs) (Added new CSS by @allaze_eroler on Discord.) |
Eatyourglory (talk | contribs) (Credited Correctly) |
||
Line 1: | Line 1: | ||
/* All CSS here will be loaded for users of the Vector skin */ |
/* All CSS here will be loaded for users of the Vector skin */ |
||
/* CSS from |
/* CSS from https://miaruniverse.miraheze.org/wiki/MediaWiki:Vector.css */ |
||
/*==================*/ |
/*==================*/ |
Revision as of 16:06, 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;
}