User:Vaileasys/Sandbox

Notes for wiki dark theme

Things to remember

• toc uses linear-gradient for .sidebar-toc:after selector
• change wikitable colours (will also modify infobox and various other templates colours)
  • also wikitable caption color
• check to make sure toggleboxes and navboxes use wikitable colors for background-color - otherwise modify
• change sidebar heading colours
  • including toc 'current' heading
• change search bar colours
• edit window
• some files need to be made white and uploaded
  • magnifying glass
  • talk/discuss
  • history
  • watchlist star
  • user avatar
  • down arrow
  • watchlist
  • data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E chevron %3C/title%3E %3Cpath d=%22m9 2 1.3 1.3L3.7 10l6.6 6.7L9 18l-8-8 8-8zm8.5 0L19 3.3 12.2 10l6.7 6.7-1.4 1.3-8-8 8-8z%22/%3E %3C/svg%3E hide sidebar
  • data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E menu %3C/title%3E %3Cpath d=%22M1 3v2h18V3zm0 8h18V9H1zm0 6h18v-2H1z%22/%3E %3C/svg%3E show sidebar

Values

• font (body): #c1ccc1
• font (heading): e3e1df
• font (interface heading): b0a99f
• font (interface selected): d3cfca
• background (body): #1f1f1f
• background (sidebar & vertical bar): #181818
• border: 2b2b2b
• wikitable border: 484e51
• table row1: 1c1c1c
• table row2: 212121
• wikitable header: 2b2b2b

CSS

To change

Vector-2022.css

@media screen {
    body {
        background-color: #f8f9fa; /*vertical bar background color*/
        color: #202122; /*body font color*/
    }

    .mw-page-container {
        background-color: #ffffff; /* body background color */
    }

    /* sticky header that displays after scrolling */
    .vector-sticky-header {
        background: #ffffff;
        background-color: #fffffff7;
        border-bottom: 1px solid #eaecf0;
    }

    .mw-sidebar {
        background-color: #f8f9fa /* sidebar background color */
    }

    .sidebar-toc {
        background-color: #ffffff; /* toc background color */
    }

    /* toc button */
    #vector-toc-collapsed-button {
        display: none;
        float: left;
        margin-right: 4px;
        margin-left: -0.75em;
        padding: 7px 10px 7px 10px;
        background-color: #ffffff
    }

    /* toc button (hover/active) */
    #vector-toc-collapsed-button:hover,#vector-toc-collapsed-button:active {
        background-color: #f8f9fa
    }

    /* Code */
    pre,code,.mw-code {
        background-color: #f8f9fa;
        color: #000;
        border: 1px solid #eaecf0
    }

    /* category links bar */
    .catlinks {
        border: 1px solid #a2a9b1;
        background-color: #f8f9fa;
    }

    /* headings */
    h1,h2,h3,h4,h5,h6 {
        color: #000;
    }

    /* gallery thumb */
    li.gallerybox div.thumb {
        border: 1px solid #c8ccd1;
        background-color: #f8f9fa
    }
}

@media screen and (min-width: 1000px) {
    /* weird toc gradient */
    .vector-toc-not-collapsed .sidebar-toc:after {
        background: linear-gradient(rgba(255,255,255,0),#ffffff); /* change to none */
    }
}

Final

Vector-2022

/* pz-theme */
:root {
  --color-mw: #c1ccc1;
  --color-mw-border: #484e51;
  --background-mw: #f8f9fa; /* TODO */
  --background-red: #f4f3eb; /* TODO */
  --background-blue: #ebf3f4; /* TODO */
  --border-mw: 1px solid #a2a9b1;
}

/* MediaWiki default theme changes */
body {
    background-color: #181818; /*vertical bar color*/
    color: #c1ccc1; /*body font color*/
}

.mw-page-container {
    background-color: #1f1f1f; /* body background color */
}

.mw-sidebar {
    background-color: #181818 /* sidebar background color */
}

pre,
code,.mw-code {
    background-color: #181818;
    color: #c1ccc1;
    border-color: #2b2b2b;
}

/* pre highlight color */
.mw-highlight .hll {
    background-color: #ffffcc;
}

/* pre line number */
.mw-content-ltr.mw-highlight-lines pre,.mw-content-ltr.content .mw-highlight-lines pre {
    padding-left: 3.5em;
    box-shadow: inset 2.75em 0 0 #1f1f1f;
}
.mw-highlight a:hover .linenos {
/* ADD TO SELECTOR FOR HIGHLIGHT TEXT COLOUR: '.mw-highlight .hll a .linenos' */
    color: #ded8d8
}

/* wikitable */
table.wikitable > tr > th,
table.wikitable > * > tr > th {
    background-color: #2b2b2b;
    color: #e3e1df;
}
table.wikitable tr:nth-child(even) td{
	background-color: #1c1c1c;
	color: #c1ccc1;
}
table.wikitable tr:nth-child(odd) td{
	background-color: #212121;
	color: #c1ccc1;
}

/* headings */
h1,h2,h3,h4,h5,h6 {
	color: #e3e1df;
}

/* gallery thumb */
li.gallerybox div.thumb {
    border: 1px solid #c8ccd1;
    background-color: #f8f9fa;
}

/* category links bar */
.catlinks {
    border: 1px solid #a2a9b1;
    background-color: #f8f9fa;
}

/* toc gradient */
.vector-toc-not-collapsed .sidebar-toc:after {
    background: none; 
}

/* edit area - below */
.editOptions {
    background-color: #181818;
    color: #c1ccc1;
    border-color #2b2b2b;
}
/* edit summary */
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
    background-color: #1f1f1f;
    color: #c1ccc1;
    border-color: #2b2b2b;
}
/* buttons */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
    background-color: #1c1c1c;
    color: #c1ccc1;
    border-color: #2b2b2b;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
    background-color: #212121;
    color: #c1ccc1;
    border-color: #2b2b2b
}

/* checkbox */
.oo-ui-checkboxInputWidget [type='checkbox'] + span {
    background-color: #1c1c1c;
    border-color: #2b2b2b;
}

No longer adding

/* gallery grow image on hover */
li.gallerybox div.thumb img {
    transition: all 0.2s ease-in-out
}
li.gallerybox div.thumb img:hover {
    transform: scale(1.05);
}