Toggle menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.
This wiki has had no edits or log actions made within the last 45 days and has been automatically marked as inactive. If you would like to prevent this wiki from being closed, please start showing signs of activity here. If there are no signs of this wiki being used within the next 15 days, this wiki will be closed in accordance to the Dormancy Policy (which all wiki founders accept when requesting a wiki). If this wiki is closed and no one reopens it 135 days from now, this wiki will become eligible for deletion. Note: If you are a bureaucrat, you can go to Special:ManageWiki and uncheck "inactive" yourself.

MediaWiki:Vector.css

MediaWiki interface page
Revision as of 16:06, 4 March 2024 by Eatyourglory (talk | contribs) (Credited Correctly)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* 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;
}
Cookies help us deliver our services. By using our services, you agree to our use of cookies.