wikippuccin by mowser03

/* ==UserStyle==
@name         wikippuccin
@version      20230907.14.10
@namespace    userstyles.world/user/mowser03
@description  Reading view for Wikipedia using theme Catppuccin. 
Note:Please hide table of content menu manually, I didn't hide it automatically as it might be important.
@author       mowser03
@license      MIT , do whatever you want with it
==/UserStyle== */

@-moz-document domain("wikipedia.org") {
/* font selection */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
/* edit root only , editing rest can break code*/
:root {
        --font: 'Roboto', sans-serif;
        --background: #181825;
        --dark-background: #11111b;
        --rosewater: #f5e0dc;
        --red: #eba0ac;
        --pink: #f5c2e7;
        --green: #a6e3a1;
        --sky: #89dceb;
        --purple: #cba6f7;
        --text: #cdd6f4;
        --subtect1: #bac2de;
        --subtext2: #a6adc8;
        --surface: #45475a;
        --overlay: #6c7086;
}
/* setting background and typography settings */
body {
        font-family: var(--font)!important;
        background:var(--background)!important;
        color:var(--text)!important;
        font-size:20px !important;
}
.external , .text , td  {
        font-family: var(--font)!important;
        background:var(--background)!important;
        color:var(--text)!important;  
}
th {
     font-family: var(--font)!important;
        background:var(--background)!important;
        color:var(--text)!important;  
        font-size:22px;
        text-decoration:underline;
}
div {
        font-family: var(--font)!important;
        background:var(--background)!important;
        color:var(--text)!important;
}
.vector-header-container {
        background:var(--background)!important;
}
.mw-page-title-maina,h1 {
        font-family:var(--font)!important;
        font-size:80px!important;
        color:var(--red)!important; 
        text-decoration:none!important;
}
figcaption {
         font-family: var(--font)!important;
        background:var(--background)!important;
        color:var(--text)!important;
        font-size:16px !important;
}
.infobox-header , .infobox-above , .infobox-label {
        background:var(--dark-background)!important;
        color:var(--rosewater);
        text-decoration:underline;
        font-size:14px;

}
caption , p {
        color:var(--text)
}
.mw-headline {
        font-family:var(--font)!important;
        font-size:30px;
        color:var(--pink);
        text-decoration:underline;
}
table,tr,tbody,td,th{
        border:1px solid var(--overlay)!important;
        background:var(--background) !important;
}
table.infobox,
tr.infobo.infoboxx,
tbody.infobox.infobox,
td.infobox.infobox,
th.infobox,
figure.mw-default-size{
        border:0px solid var(--background)!important;
        background:var(--background) !important;
}

.mw-file-element {
        filter: brightness(70%);
}
a:link {
        color: var(--green);
}

/* visited link */
a:visited {
        color: var(--purple);
}

/* mouse over link */
a:hover {
        color: var(--sky);
}

/* selected link */
a:active {
        color: var(--sky);
}
/* Article background */
.mw-parser-output {
        background: var(--background)
}
/* Hide list*/
.mw-header,
.vector-page-toolbar,
.noprint,
.hatnote,
.mw-footer-container,
.vector-dropdown-label{
        visibility:hidden !important;
}
/* experimental */
.mw-body-content {
        min-width:1000px;
}
.mwe-math-fallback-image-inline {
        filter: invert(100%)!important ;
   }
#vector-toc::after {
        background:var(--background)!important ;
}
#toc-mw-content-text{
        display:none;
}
.vector-pinnable-header-label {
        color:var(--rosewater) !important;
}

.vector-pinnable-header-toggle-button , .vector-pinnable-header-unpin-button {
        background-color:var(--background) !important ;
        text-align:center!important ;
        text-decoration:none!important;
        color:var(--green)!important;
        border-radius:12px!important;
        font-family:var(--font) !important;
        font-size:20px;
        border: 2px solid var(--green) !important;
        
}
.mp-h2 {
        background-color:var(--background) !important;
}

}