Aftenposten Nord by shard

/* ==UserStyle==
@name         Aftenposten Nord
@version      20240620.14.29
@namespace    https://userstyles.world/user/shard
@description  OS color scheme responsive theme for Aftenposten based on the Nord palette.
@author       shard
@license      No License
==/UserStyle== */

@-moz-document domain("aftenposten.no") {
:root {
    /* Nord color scheme */
    --nord0: #2e3440;
    --nord1: #3b4252;
    --nord2: #434c5e;
    --nord3: #4c566a;
    --nord4dark: #d1d8e3;
    --nord4: #d8dee9;
    --nord5: #e5e9f0;
    --nord6: #eceff4;
    --nord7: #8fbcbb;
    --nord8: #88c0d0;
    --nord9: #81a1c1;
    --nord10: #5e81ac;
    --nord11: #bf616a;
    --nord12: #d08770;
    --nord13: #ebcb8b;
    --nord14: #a3be8c;
    --nord15: #b48ead;
    --nordBlack: #252932;
    --nordInactive: #9b9ea4;
    --rgbnord0: 46, 52, 64;
    --rgbnord1: 59, 66, 82;
    --rgbnord2: 67, 76, 94;
    --rgbnord3: 76, 86, 106;
    --rgbnord4dark: 209, 216, 227;
    --rgbnord4: 216, 222, 233;
    --rgbnord5: 229, 233, 240;
    --rgbnord6: 236, 239, 244;
    --rgbnord7: 143, 188, 187;
    --rgbnord8: 136, 192, 208;
    --rgbnord9: 129, 161, 193;
    --rgbnord10: 94, 129, 172;
    --rgbnord11: 191, 97, 106;
    --rgbnord12: 208.135.112;
    --rgbnord13: 235, 203, 139;
    --rgbnord14: 163, 190, 140;
    --rgbnord15: 180, 142, 173;
    --rgbnordBlack: 37, 41, 50;
    --rgbnordInactive: 155, 158, 164;
    
    --c-shade-2: var(--nord10);
    --c-breaking-light: var(--nord11);
    --c-breaking-dark: var(--nord11);
    --c-breaking-bg-yellow: var(--nord13);
    --c-breaking-bg-red: var(--nord11);
    --c-oslo-primary-2: var(--nord11);
    --c-text-to-speech-primary-1: var(--nord10);
    --c-semantic-success-shade-1: var(--nord14);
    --c-semantic-success-tint-1: #d0ece7;
    --c-semantic-warning-shade-1: var(--nord13);
    --c-semantic-warning-shade-2: var(--nord13);
    --c-semantic-warning-tint-2: var(--nord13);
    --c-semantic-warning-tint-3: var(--nord13);
    --c-semantic-info-tint-3: var(--nord8);
    --c-info: var(--nord9);
    --c-hyperlink-pressed: var(--nord15);
    --c-gray: var(--nord3);
    --c-dark-gray: var(--nordInactive);
    --c-yellow-bright: var(--nord13);
    --c-yellow-medio: var(--nord13);
    --c-pink-bright: var(--nord15);
    --c-pink-medio: var(--nord15);
    --c-blue-bright: var(--nord9);
    --c-blue-medio: var(--nord9);
    --c-green-bright: var(--nord14);
    --c-green-medio: var(--nord14);
}

@media (prefers-color-scheme: dark) {
    :root {
        --blackout: var(--nordBlack);
        --background0: var(--nord0);
        --background1: var(--nord1);
        --background2: var(--nord2);
        --background3: var(--nord3);
        --foreground0: var(--nord6);
        --foreground1: var(--nord5);
        --foreground2: var(--nord4);
        --foreground3: var(--nord4dark);
        --textPrimary: var(--nord4);
        --link: var(--nord9);
        --linkhover: var(--nord10);
        
        --rgblackout: var(--rgbnordBlack);
        --rgbackground0: var(--rgbnord0);
        --rgbackground1: var(--rgbnord1);
        --rgbackground2: var(--rgbnord2);
        --rgbackground3: var(--rgbnord3);
        --rgbforeground0: var(--rgbnord6);
        --rgbforeground1: var(--rgbnord5);
        --rgbforeground2: var(--rgbnord4);
        --rgbforeground3: var(--rgbnord4dark);
        
        --c-primary-01: var(--link);
        --c-primary-02: var(--background0);
        --c-primary-03: var(--link);
        --c-primary-04: var(--textPrimary);
        --c-light: var(--background0);
        --c-dark: var(--textPrimary);
        --c-shade: var(--textPrimary);
        --divider-line: 1px solid var(--background3);
        --divider-line-bundle: 1px solid var(--background3);
        --divider-line-bundle-strong: 2px solid var(--background3);
        
        --c-neutral-01: var(--background0);
        --c-neutral-02: var(--background0);
        --c-neutral-03: var(--background1);
        --c-neutral-04: var(--background2);
        --c-neutral-05: var(--nordInactive);
        --c-neutral-06: var(--foreground2);
        --c-neutral-07: var(--foreground2);
        --c-neutral-08: var(--foreground1);
        --c-neutral-09: var(--foreground0);
        
        --c-background: var(--background0);
        --component-background-color-01: var(--background0);
        --component-background-color-02: var(--background1);
        --component-background-color-03: var(--background2);
        --component-text-color-01: var(--textPrimary);
        --component-text-color-02: var(--textPrimary);
        --component-text-color-03: var(--nordInactive);
        
        --filter-dark: none;
        --filter-blue: invert(67%) sepia(52%) saturate(223%) hue-rotate(169deg) brightness(84%) contrast(88%);
        --newsletterIllustration: invert(50%) sepia(0%) saturate(0%) hue-rotate(180deg) brightness(1900%) contrast(402%);
    }
    .admin.bookmark img,
    .search img,
    .menu-wrapper img {
        filter: var(--filter-light);
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --blackout: var(--nord0);
        --background0: var(--nord6);
        --background1: var(--nord5);
        --background2: var(--nord4);
        --background3: var(--nord4dark);
        --foreground0: var(--nord0);
        --foreground1: var(--nord1);
        --foreground2: var(--nord2);
        --foreground3: var(--nord3);
        --textPrimary: var(--nord1);
        --link: var(--nord10);
        --linkhover: var(--nord9);
        
        --rgbackground0: var(--rgbnord6);
        --rgbackground1: var(--rgbnord5);
        --rgbackground2: var(--rgbnord4);
        --rgbackground3: var(--rgbnord4dark);
        --rgbforeground0: var(--rgbnord0);
        --rgbforeground1: var(--rgbnord1);
        --rgbforeground2: var(--rgbnord2);
        --rgbforeground3: var(--rgbnord3);
        
        --c-primary-01: var(--link);
        --c-primary-02: var(--background0);
        --c-primary-03: var(--link);
        --c-primary-04: var(--textPrimary);
        --c-light: var(--background0);
        --c-dark: var(--textPrimary);
        --c-shade: var(--textPrimary);
        --divider-line: 1px solid var(--background3);
        --divider-line-bundle: 1px solid var(--background3);
        --divider-line-bundle-strong: 2px solid var(--background3);
        
        --c-neutral-01: var(--background0);
        --c-neutral-02: var(--background0);
        --c-neutral-03: var(--background1);
        --c-neutral-04: var(--background2);
        --c-neutral-05: var(--nordInactive);
        --c-neutral-06: var(--foreground2);
        --c-neutral-07: var(--foreground2);
        --c-neutral-08: var(--foreground1);
        --c-neutral-09: var(--foreground0);
        
        --c-background: var(--background0);
        --component-background-color-01: var(--background0);
        --component-background-color-02: var(--background1);
        --component-background-color-03: var(--background2);
        --component-text-color-01: var(--textPrimary);
        --component-text-color-02: var(--textPrimary);
        --component-text-color-03: var(--nordInactive);
        
        --filter-blue: invert(52%) sepia(79%) saturate(260%) hue-rotate(173deg) brightness(81%) contrast(84%);
        --newsletterIllustration: invert(50%) sepia(35%) saturate(138%) hue-rotate(184deg) brightness(98%) contrast(89%);
    }
}

html, body,
.carousel,
.content-main-container, .content-container,
#main div div:has(article),
.intro-v-side-by-side.fullScreenTop,
div:has(> div > label[aria-label="Abonnér på nyhetsbrev"]),
.teaser .text-wrapper {
    background-color: var(--background0);
}
a:focus, a:hover, a:visited,
#main :not(div.dark) :is(div, p, span, h1, h2, h3, a) {
    color: var(--textPrimary);
}
.teaser.feature .information .context-label, .desktop .teaser.feature .title {
    color: var(--nord4);
}
.most-read-widget .widget-articles article .widget-article .index,
.react-widget-wrapper__link, .react-widget-wrapper__link:hover,
.benefits-widget-container .benefits-teaser-content .benefits-teaser-tag {
    color: var(--link);
}
a {
    border-bottom-color: var(--link) !important;
}
.react-widget-wrapper__link-arrow {
    background-color: var(--link);
}
cite,
.authors-wrapper .time-stamp,
.teaser .bottom-tags {
    color: var(--nordInactive) !important;
}
.word-explainer-text{
    color: var(--nord1) !important;
}
.word-explanation {
    background: var(--background3) !important;
}
.word-explanation-title, .word-explanation-content,
blockquote,
li::before,
.list, .paragraph {
    color: var(--textPrimary) !important;
}

.hyperion-css-1qqo486, /* Text on white background over images */
.hyperion-css-k09ecx {
    color: var(--nord1) !important;
}

.mm-message__text { /* Message bubbles */
    background: var(--nord9) !important;
}
.mm-message__text p {
    color: var(--nord1) !important;
}
.mm-flip {
    border-top-color: var(--nord9) !important;
}

/* Sammendrag-boks */
.hyperion-css-1pcn7cc,
.hyperion-css-mmznm3 {
    background-color: var(--background2) !important;
}

.information::after {
    background: none !important;
}

.premium-spot, .block .column .ad, .ad, div.block:has(div.column div.ad),
div:has(> div[data-ad-subtype]),
.teaser-bundle.sport,
div[class^="advertory"],
#widget-perks-frontpage {
    display: none;
}

#oppsummert .feed-item-label,
#oppsummert .feed-item-title {
    color: var(--textPrimary);
}
#oppsummert .feed-item .image-wrapper::before {
    background: linear-gradient(180deg,rgba(0,7,36,0) 0,var(--background3) 100%)
}
#oppsummert .feed-item .image-wrapper::after {
    background: var(--background3);
}
#oppsummert .old-news .old-news-inner, #oppsummert .old-news::after, #oppsummert .old-news::before {
    background-color: var(--background3);
}

.ch-core-header .ch-header-main,
.masthead-top-navigation,
.hyperion-css-1gh38c {
    background-color: var(--blackout);
}
.ch-icon-logo::before, .ch-core-header .ch-main-links a:link, .ch-core-header .ch-login .ch-user-name, .ch-core-header .ch-menu...