Skip to content

Oros Low Contrast (Wikipedia) by mantacid

Screenshot of Oros Low Contrast (Wikipedia)

Details

Authormantacid

LicenseCC Zero

CategoryWikipedia

Created

Updated

Code size12 kB

Code checksum2e7e1752

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

A Low-Contrast, Rounded style for Wikipedia.

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name           wikipedia.org
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
==/UserStyle== */

@-moz-document domain("wikipedia.org") {
    /* Insert code here... */
    :root {
        --col-page-main-dflt: #273632;
        --col-page-main-intr: #28453E;
        --col-page-main-hovr: #2B5445;
        --col-page-main-actv: #326B51;
        
        --col-page-dark-dflt: #1F2F2A;
        --col-page-dark-intr: #21382C;
        --col-page-dark-hovr: #204130;
        --col-page-dark-actv: #24583C;
        
        --col-page-lght-dflt: #28453E;
        --col-page-lght-intr: #284C3B;
        --col-page-lght-hovr: #2B5F43;
        --col-page-lght-actv: #2C724C;
        
        --col-bord-main: #446B60;
        --col-bord-sbtl: #345F54;
        --col-bord-mutd: #2B5445;
        
        --col-bord-intr-dflt: #8DBAA5;
        --col-bord-intr-hovr: #0E9C62;
        --col-bord-intr-actv: #12FF6A;
        
        --col-text-main: #8DBAA5;
        --col-text-bold: #ffffff;
        --col-text-grey: #446B60;
        --col-text-dsbl: #345F54;
           
        --col-prog-dflt: #0BCF71;
        --col-prog-hovr: #0CED80;
        --col-prog-actv: #4BFF8D;
        --col-prog-focs: #12FF6A;
        
        --col-link-main: var(--col-prog-dflt);
        --col-link-hovr: var(--col-prog-hovr);
        --col-link-actv: var(--col-prog-actv);
        --col-link-vist: #0E9C62;

        
        --geo-bord-rads: 10px;
        --geo-card-padd: 4px;

    }
    
    html.skin-theme-clientpref-night {
        --color-base: var(--col-text-main);
        --color-base--hover: var(--col-text-bold);
        --color-emphasized: var(--col-text-bold);
        --color-subtle: var(--col-text-grey);
        --color-disabled: var(--col-text-dsbl);
        --color-disabled-emphasized: var(--col-text-dsbl);
        --color-inverted: var(--col-page-main-dflt);
        
        --color-progressive: var(--col-prog-dflt);
        --color-progressive--hover: var(--col-prog-hovr);
        --color-progressive--active: var(--col-prog-actv);
        
        --color-destructive: #ED3A51;
        --color-destructive--hover: #DC2940;
        --color-destructive--active: #FC1C39;
        
        --color-visited: var(--col-link-vist);
        --color-visited--hover: var(--col-link-hovr);
        --color-visited--active: var(--col-link-actv);
        
        --color-destructive--visited: #c99391;
        --color-destructive--visited--hover: #dcb5b3;
        --color-destructive--visited--active: #e8cecd;
        
        --color-error: #fd7865;
        --color-error--hover: #fea898;
        --color-error--active: #ffc8bd;
        
        --color-warning: #ca982e;
        --color-success: #2cb491;
        --color-notice: #a2a9b1;
        
        --color-content-added: #80cdb3;
        --color-content-removed: #fd7865;
        --color-base--subtle: #a2a9b1;
        
        --box-shadow-color-base: #fff;
        --box-shadow-color-progressive--focus: var(--col-prog-focs);
        --box-shadow-color-progressive-selected: var(--col-prog-dflt);
        --box-shadow-color-progressive-selected--hover: var(--col-prog-hovr);
        --box-shadow-color-progressive-selected--active: var(--col-prog-actv);
        
        --box-shadow-color-destructive--focus: #6485d1;
        --box-shadow-color-inverted: #000;
        --mix-blend-mode-blend: screen;
        
        --background-color-base: var(--col-page-main-dflt);
        --background-color-neutral: var(--col-page-main-dflt);
        --background-color-neutral-subtle: var(--col-page-dark-dflt);
        
        --background-color-interactive: var(--col-page-main-intr);
        --background-color-interactive--hover: var(--col-page-main-hovr);
        --background-color-interactive--active: var(--col-page-main-actv);
        
        --background-color-interactive-subtle: var(--col-page-dark-intr);
        --background-color-interactive-subtle--hover: var(--col-page-dark-hovr);
        --background-color-interactive-subtle--active: var(--col-page-dark-actv);
        
        --background-color-disabled: var(--col-page-main-dflt);
        --background-color-disabled-subtle: var(--col-page-dark-dflt);
        
        --background-color-inverted: var(--col-text-main);
        
        --background-color-progressive: var(--col-prog-dflt);
        --background-color-progressive--hover: var(--col-prog-hovr);
        --background-color-progressive--active: var(--col-prog-actv);
        --background-color-progressive--focus: var(--col-page-dark-actv);
        --background-color-progressive-subtle: var(--col-page-dark-dflt);
        --background-color-progressive-subtle--hover: var(--col-page-dark-hovr);
        --background-color-progressive-subtle--active: var(--col-page-dark-actv);
        
        --background-color-destructive--focus: #6485d1;
        --background-color-destructive-subtle: #3c1a13;
        --background-color-destructive-subtle--hover: #612419;
        --background-color-destructive-subtle--active: #9f3526;
        
        --background-color-error-subtle: #3c1a13;
        --background-color-error-subtle--hover: #612419;
        --background-color-error-subtle--active: #9f3526;
        
        --background-color-warning-subtle: #2d2212;
        --background-color-success-subtle: #132821;
        --background-color-notice-subtle: #27292d;
        
        --background-color-content-added: #233566;
        --background-color-content-removed: #453217;
        
        --background-color-backdrop-light: rgba(0,0,0,0.65);
        --background-color-backdrop-dark: rgba(255,255,255,0.65);
        
        --border-color-base: var(--col-bord-main);
        --border-color-subtle: var(--col-bord-sbtl);
        --border-color-muted: var(--col-bord-mutd);
        
        --border-color-interactive--hover: var(--col-bord-intr-hovr);
        --border-color-interactive--active: var(--col-bord-intr-actv);
        --border-color-disabled: #54595d;
        --border-color-inverted: #101418;
        
        --border-color-progressive--hover: var(--col-link-hovr);
        --border-color-progressive--active: var(--col-link-actv);
        --border-color-progressive--focus: var(--col-link-main);
        
        --border-color-destructive--hover: #fd7865;
        --border-color-destructive--active: #fea898;
        --border-color-destructive--focus: #6485d1;
        --border-color-error--hover: #fd7865;
        --border-color-error--active: #fea898;
        --border-color-content-added: #233566;
        --border-color-content-removed: #987027;
    }
    
    div.cdx-search-input>div.cdx-search-input__input-wrapper {
        border-radius: var(--geo-bord-rads) 0 0 var(--geo-bord-rads);
        --bord: var(--col-bord-intr-dflt);
        border: 1px solid var(--bord) !important;
    }
    
    div.cdx-search-input:hover>div.cdx-search-input__input-wrapper {
        --bord: var(--col-bord-intr-hovr);
    }
    
    div.cdx-search-input:active>div.cdx-search-input__input-wrapper {
        --bord: var(--col-bord-intr-actv);
    }
    
    div.cdx-search-input__input-wrapper,div.cdx-search-input__input-wrapper>div,div.cdx-search-input__input-wrapper>div>input {
        border-radius: var(--geo-bord-rads) 0 0 var(--geo-bord-rads);
    }
    
    div.cdx-search-input>button.cdx-button {
        --bg: var(--col-page-main-intr);
        --bord: var(--col-bord-intr-dflt);
        border-radius: 0 var(--geo-bord-rads) var(--geo-bord-rads) 0;
        border: 1px solid var(--bord) !important;
        background-color: var(--bg) !important;
    }
    
    div.cdx-search-input>button.cdx-button:hover {
        --bg: var(--col-page-main-hovr);
        --bord: var(--col-bord-intr-hovr);
    }
    
    div.cdx-search-input>button.cdx-button:active {
        --bg: var(--col-page-main-actv);
        --bord: var(--col-bord-intr-actv);
    }
    
    div.cdx-search-input {
        border: none !important;
    }
    
    #catlinks {
        border-radius: var(--geo-bord-rads);
    }
    
    img.mwe-math-fallback-image-inline.mw-invert.skin-invert
    {
        /*this code is here in case some imaeg filter pipeline is added to make the equation colors more in-line with the color scheme.*/
        opacity: 100%;
        mix-blend-mode: overlay;
    }
    
    html.skin-theme-clientpref-night .hatnote:not(.notheme) {
        background-color: transparent !important;
    }
    
    figure {
        border-radius: var(--geo-bord-rads) var(--geo-bord-rads) 0 0 !important;
        border-collapse: separate !important;
        background-color: var(--col-page-dark-dflt) !important;
    }
    
    figure>a.mw-file-description>img.mw-file-element {
        border-radius: calc(var(--geo-bord-rads) - 3px) !important;
    }
    
    figcaption {
        border-radius: 0 0 var(--geo-bord-rads) var(--geo-bord-rads);
        background-color: var(--col-page-dark-dflt) !important;
    }
    
    div.side-box.side-box-right.plainlinks.sistersitebox{
        border-radius: var(--geo-bord-rads) !important;
    }
    
    #footer-poweredbyico>a,#footer-copyrightico>a {
        border-radius: var(--geo-bord-rads) !important;
    }
    
    table.ambox {
        border-top-width: 1px !important;
        
        border-right-color: var(--col-bord-sbtl) !important;
        border-top-color: var(--col-bord-sbtl) !important;
        border-bottom-color: var(--col-bord-sbtl) !important;
        border-left: 10px solid var(--color-warning);
        border-spacing: 0px;
        border-radius: var(--geo-bord-rads) !important;
    }
    
    /*enhance ambox stylings*/
    table.ambox>* {
        border: 0px solid transparent !important;
    }
    
    table.ambox>tbody {
        border-radius: var(--geo-bord-rads) !important;
        background: linear-gradient(90deg, var(--col-bord-sbtl) 49%, var(--col-page-main-dflt) 51%);
        background-color: var(--col-page-main-dflt);
        backgroun...

Reviews

No reviews yet.