Wikipedia Flexoki by KraXen72

/* ==UserStyle==
@name           Wikipedia Flexoki
@namespace      github.com/openstyles/stylus
@version        1.1.0
@description    Flexoki theme for wikipedia
@author         KraXen72
==/UserStyle== */

@-moz-document domain("wikipedia.org") {
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
    
    :root, html, html.skin-theme-clientpref-day {
        --flexoki-bg:      #FFFCF0;
        --flexoki-bg-2:    #F2F0E5;
        --flexoki-ui:      #E6E4D9;
        --flexoki-ui-2:    #DAD8CE;
        --flexoki-ui-3:    #CECDC3;
        --flexoki-tx-3:    #B7B5AC;
        --flexoki-tx-2:    #6F6E69;
        --flexoki-tx:      #100F0F;
        
        --flexoki-red:     #AF3029;
        --flexoki-orange:  #BC5215;
        --flexoki-yellow:  #AD8301;
        --flexoki-green:   #66800B;
        --flexoki-cyan:    #24837B;
        --flexoki-blue:    #205EA6;
        --flexoki-purple:  #5E409D;
        --flexoki-magenta: #A02F6F;
        
        --p-normal: .5rem;
        --p-small: .25rem;
        --br: .3rem;
    }
    :root.skin-theme-clientpref-night, html.skin-theme-clientpref-night {
        --flexoki-bg:      #100F0F;
        --flexoki-bg-2:    #1C1B1A;
        --flexoki-ui:      #282726;
        --flexoki-ui-2:    #343331;
        --flexoki-ui-3:    #403E3C;
        --flexoki-tx-3:    #575653;
        --flexoki-tx-2:    #878580;
        --flexoki-tx:      #CECDC3;
        
        --flexoki-red:     #D14D41;
        --flexoki-orange:  #DA702C;
        --flexoki-yellow:  #D0A215;
        --flexoki-green:   #879A39;
        --flexoki-cyan:    #3AA99F;
        --flexoki-blue:    #4385BE;
        --flexoki-purple:  #8B7EC8;
        --flexoki-magenta: #CE5D97;
    }
    
    
    :root, html, html.skin-theme-clientpref-day, html.skin-theme-clientpref-night {
        --color-base: var(--flexoki-tx);
        --color-base-fixed: var(--flexoki-tx);
        --background-color-base: var(--flexoki-bg);
        --background-color-interactive: var(--flexoki-ui);
        --background-color-neutral-subtle: var(--flexoki-bg-2);
        
        .infobox {
            background-color: var(--flexoki-bg-2);
        }
        /* figure */
        --background-color-interactive-subtle: var(--flexoki-bg-2);
        
        --color-progressive: var(--flexoki-blue) !important;
        --color-destructive: var(--flexoki-red) !important;
        --color-visited: var(--flexoki-purple) !important;
        --color-emphasized: var(--flexoki-tx) !important;
    }
    
    html, body {
        font-family: 'Inter', sans-serif;
        font-weight: 400;
    }
    .mw-body h1, 
    .mw-body .mw-heading1, 
    .mw-body-content h1, 
    .mw-body-content .mw-heading1, 
    .mw-body-content h2, 
    .mw-body-content .mw-heading2,
    .mw-body .mw-heading3, 
    .mw-body h3, 
    .mw-body .mw-heading4, 
    .mw-body h4 {
        font-family: "Lora", serif;
        font-optical-sizing: auto;
        font-weight: 500;
        font-style: normal;
    }
    
    .infobox {
        padding: var(--p-normal);
        border-color: var(--flexoki-ui-3) !important;
    }
    .infobox:not(:has(> caption)) {
        border-radius: var(--br);
    }
    figure[typeof~='mw:File/Thumb'], figure[typeof~='mw:File/Frame'] {
        border-top-left-radius: var(--br) !important;
        border-top-right-radius: var(--br) !important;
        border-collapse: unset;
    }
    figure > a {
        padding: var(--p-normal) var(--p-normal) var(--p-small) var(--p-normal) !important;
    }
    figure > figcaption {
        padding: var(--p-small) var(--p-normal) var(--p-normal) var(--p-normal) !important;
        border-bottom-left-radius: var(--br);
        border-bottom-right-radius: var(--br);
    }
    
    .mw-parser-output .ombox,
    .mw-parser-output .ambox {
        width: 100%;
        margin-inline: 0;
        margin-block: var(--p-normal);
        
        border-color: var(--flexoki-ui-3) !important;
    }
    .mw-parser-output .ombox {
        border-collapse: initial !important;
        border-radius: var(--br) !important;
    }
    .mw-parser-output .ambox {
        background-color: var(--flexoki-bg-2); 
    }
    
    .mw-parser-output .ombox {
        .mbox-text {
            padding: var(--p-normal);
        }
        .mbox-image {
            padding: var(--p-normal) 0 var(--p-normal) var(--p-normal);
        }
        .mbox-imageright {
            padding: var(--p-normal) var(--p-normal) var(--p-normal) 0;
        }
    }
    
    .mw-parser-output .side-box,
    div.thumbinner {
        border-radius: var(--br) !important;
        border-color: var(--flexoki-ui-3) !important;
    }
    div.thumbinner {
        padding: var(--p-normal);
    }
    
    .mw-parser-output .portalborder {
        padding: var(--p-small);
        border-radius: var(--br) !important;
    }
    .catlinks { border-radius: var(--br); }

}