Morgenbladet Nord Dark by ogrim

/* ==UserStyle==
@name         Morgenbladet Nord Dark
@version      1.0.0
@namespace    https://userstyles.world/user/ogrim
@description  Dark theme for Morgenbladet based on the Nord palette.
@author       Onkel Ogrim
@license      No License
==/UserStyle== */
@-moz-document domain("morgenbladet.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;

        --dh-box-background: var(--nord2);
        --dh-box-text: var(--nord4);
    }

    @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);

            --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);
        }
    }

    @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);

            --rgbackground0: var(--rgbnord6);
            --rgbackground1: var(--rgbnord5);
            --rgbackground2: var(--rgbnord4);
            --rgbackground3: var(--rgbnord4dark);
            --rgbforeground0: var(--rgbnord0);
            --rgbforeground1: var(--rgbnord1);
            --rgbforeground2: var(--rgbnord2);
            --rgbforeground3: var(--rgbnord3);
        }
    }

    html,    
    body    
    {
        background-color: var(--background0);
        color: var(--textPrimary);
    }
    
    header.page-header,
    header.page-header nav div,
    header.page-header div.dg-submenu-wrap
    {
        background-color: var(--nord3) !important;
    }
    
    .page-header .logo-center,
    .site-morgenbladet h4.header-block
    {
        border-color: var(--nord11);
    }
    
    .site-morgenbladet h3.header-block 
    {
        border-color: var(--nord10)
    }
    
    .site-morgenbladet .extra-large-promo .xl-promo-container .mb-xl-promo-headline,
    .site-morgenbladet .extra-large-promo .xl-promo-container .xl-kicker-label,
    .site-morgenbladet .large-promo .lg-promo-container .lg-headline-wrap .mb-lg-promo-headline,
    .site-morgenbladet .large-promo .lg-promo-container .lg-headline-wrap .lg-kicker-label,
    .site-morgenbladet .small-promo .sm-promo-container .sm-headline-wrap .sm-kicker-label,
    .site-morgenbladet .small-promo .sm-promo-container .sm-headline-wrap .mb-sm-promo-headline,
    .site-morgenbladet h3,
    .site-morgenbladet h4,
    .card-list-headline a    
    {
        color: var(--textPrimary);
    }
    
    .site-morgenbladet .extra-large-promo .xl-promo-container:hover .mb-xl-promo-headline,
    .site-morgenbladet .large-promo .lg-promo-container .lg-headline-wrap:hover .mb-lg-promo-headline,
    .site-morgenbladet .small-promo .sm-promo-container .sm-headline-wrap:hover .mb-sm-promo-headline
    {
        color: var(--background3);
    }
    
    .teasergroup2 .card-list-container
    {
        background-color: var(--background1);
        color: var(--textPrimary);   
    }
    
    h1.headline,
    .fm-overline,
    .fm-sub-headline-paragraph,
    .fm-lead-art-wrapper figcaption p.image-metadata,
    .article-body-wrapper,
    .fm-date,
    p.image-metadata .title, 
    .article-body-wrapper figure p,
    #facts p,
    .card-list-item .headline-list-anchor .headline-text,
    .mb-article-play-button-cta,
    .site-morgenbladet .layout-section .mb-byline a,
    .site-morgenbladet .author-bio .author .descriptions .authorName,
    .card-list-title,
    .header-block,
    .section-title,
    .section-title--styled-link,
    .horizontal-links-menu a, 
    .section-container a
    {
        color: var(--textPrimary) !important;
    }
    
    .article-body-wrapper a :active, .article-body-wrapper a :hover, .article-body-wrapper a:active, .article-body-wrapper a,
    .emailfield-article a
    {
        color: var(--nord11) !important;
    }
    
    .article-body-wrapper a :active, .article-body-wrapper a :hover, .article-body-wrapper a:active, .article-body-wrapper a:hover
    {
        color: var(--background3) !important;
    }
    
    .factbox 
    {
        background-color: var(--background1);
        color: var(--textPrimary); 
        border-color: var(--nord11);
    }
    
}