A Low-Contrast, Rounded style for Wikipedia.
Oros Low Contrast (Wikipedia) by mantacid

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
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...