DN.se Darkmode (2025) by orginallinus

/* ==UserStyle==
@name       www.dn.se
@version    20250121.12.27
@namespace  ?
==/UserStyle== */
@-moz-document url-prefix("https://www.dn.se/") {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        background-color: var(--ds-color-surface-background);
        color: #c82626;
        font-family: Georgia, Times New Roman, Times, serif;
        font-size: 18px;
        line-height: 1.3333333333;
        margin: 0;
    }

    .article {
        background-color: #020202;
        font-family: var(--ds-font--serif);
        font-size: 1.125rem;
        font-size: clamp(18px, 1.125rem, 34px);
        font-variation-settings: "opsz" 18;
        font-weight: 400;
        letter-spacing: normal;
        line-height: 1.5;
        padding-bottom: 16px;
        padding-top: var(--ds-spacing-px-lg);
    }

    .direkt-post {
        background-color: #020202;
        box-sizing: border-box;
        color: #e1e1e1;
        margin-bottom: 8px;
        padding: 16px;
        position: relative;
    }

    .direkt-column-wrapper .direkt-column--main .ad {
        background-color: #020202;
        margin: 8px 0;
        padding-bottom: 16px;
    }

    .ad.ad--mob-article,
    .ad.ad--mob-special,
    .ad.ad--panorama-article,
    .ad.ad--panorama-article-scroll,
    .ad.ad--panorama-special {
        background-color: #020202;
        margin-bottom: 32px;
        margin-top: 16px;
        padding-bottom: 32px;
    }

    .fade-element::before {
        background-image: var(--ds-color-gradient-content-fade-left);
        content: "";
        height: 100%;
        left: -31px;
        pointer-events: none;
        position: absolute;
        width: 32px;
    }

    .fade-element {
        background-color: #000;
        height: 36px;
        position: relative;
        width: 4px;
    }

    .ds-group-header {
        https: //www.researchgate.net/publication/28610218_Naturkultur
        --group-header-background: var(--ds-color-background-primary);
        --group-header-color: var(--ds-color-text-primary);
        --group-header-icon-color: currentColor;
        align-items: stretch;
        background: #2f2b2b;
        color: var(--group-header-color);
        display: flex;
        flex-basis: 48px;
        font-family: var(--ds-font--sans);
        font-size: 1rem;
        font-size: clamp(16px, 1rem, 31px);
        font-variation-settings: "opsz" 16;
        font-weight: 400;
        justify-content: space-between;
        letter-spacing: normal;
        line-height: 1.5;
    }


    .ds-tag-header {
        background-color: #020202;
        display: flex;
        padding-bottom: 16px;
        width: 100%;
    }

    .ds-teaser {
        background-color: #2f2b2b;
        display: block;
        position: relative;
        text-decoration: none;
    }

    .ds-teaser-list-vertical {
        background-color: #020202;
    }

    .ds-teaser.ds-teaser--native {
        border-bottom: 4px solid #0b0b0a;
        overflow: hidden;
    }


    .section .section__contact {
        background: #000;
        color: #d9d4d4;
        padding: var(--ds-spacing-px-md) 16px;
    }


    .ds-btn.ds-btn--secondary.ds-btn--default,
    .ds-btn.ds-btn--secondary.ds-btn--elevated {
        --ds-btn__background-color: #282828;
        --ds-btn__color: var(--ds-color-text-primary);
    }

    .ds-split-container {
        background: #2f2b2b;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        padding: 12px 16px 16px;
        position: relative;
    }

    .ds-disclaimer .ds-disclaimer__body-html {
        color: #780e0e;
        flex-grow: 1;
        font-family: var(--ds-font--sans);
        font-size: .875rem;
        font-size: clamp(14px, .875rem, 27px);
        font-variation-settings: "opsz" 14;
        font-weight: 400;
        letter-spacing: normal;
        line-height: 1.5;
        margin: 0;
    }
    .ds-disclaimer .ds-disclaimer__body-html,
    .ds-disclaimer .ds-disclaimer__icon-wrapper {
        background-color: #000;
        padding: 12px 16px;
    }

    .others-are-reading {
        align-self: stretch;
        background-color: #2f2b2b;
        display: flex;
        flex-direction: column;
        padding: 16px 0;
    }
    
    .direkt-pagination-button-wrap {
  background-color: #020202;
  padding: 16px;
  text-align: center;
}

    .picture--placeholder,
    .picture--with-bg {
        background-color: hsla(0, 0%, 2.4%, 0.3);
    }

    .bn-tapet .tapet-paywall__content {
        background-color: #242424;
        width: 100%;
        text-align: var(--tapet-paywall-content-text-align);
        padding: 32px 16px 24px;
    }

    .th-border {
        border-color: #000;
    }

    .sticky-header__logo-wrapper > .icon--dn,
    .sticky-header__logo-wrapper > .icon--dn-small {
        fill: #dad4d4;
    }

    .page::after {
        background-color: #2f2b2b;
        border-right: 1px solid var(--ds-color-border-primary);
        box-sizing: border-box;
        content: "";
        display: block;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        width: 1px;
    }
}

.sticky-header__container {
    align-items: center;
    border-bottom: 1px solid rgb(0, 0, 0);
    box-sizing: border-box;
    display: flex;
    height: 48px;
    padding: 0 16px;
}

.sticky-header {
    background-color: #020202;
    border-style: solid;
    border-width: 4px 0 0;
    left: 0;
    margin: auto;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 10;
}

.site-header {
    background-color: #020202;
    border-style: solid;
    border-width: 4px 0 0;
    box-sizing: border-box;
    color: #ccc;
}

.section .ad.ad--module {
    background-color: #020202;
    padding-bottom: 12px;
}

.section .section__column-main {
    background-color: #020202;
    max-width: calc(100% - 300px - var(--section-gap-horizontal));
    padding: 0;
    width: 100%;
}

.page {
    background-color: #020202;
    overflow: hidden;
    position: relative;
}

.custom-teaser {
    background: #020202;
    box-sizing: border-box;
    color: var(--ds-color-text-primary);
    display: flex;
    flex-direction: column;
    padding: 16px;
}

.follow-dn {
    background-color: #020202;
    color: var(--ds-color-text-primary);
    padding: 0 16px;
}

.follow-dn > .follow-dn__link > .icon {
    color: #000;
}

.quiz-page {
    background-color: #020202;
    padding-bottom: 1px;
    padding-top: 56px;
}

.ds-game-header .ds-game-header__description {
    background-color: #020202;
}

.ds-btn.ds-btn--primary.ds-btn--outline, .ds-btn.ds-btn--primary.ds-btn--transparent {
  --ds-btn__color: #020202;
}

.ds-game-header .ds-game-header__description-content {
    color: #b5b3b3;
    font-family: var(--ds-font--sans);
    font-size: 1rem;
    font-size: clamp(16px, 1rem, 31px);
    font-variation-settings: "opsz" 16;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.5;
    padding: 16px;
}

.ds-link-box-item {
    align-items: flex-start;
    background-color: #020202;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0;
    text-decoration: none;
}

.ds-link-box {
    background-color: #020202;
}

.ds-factbox {
    background-color: #020202;
    box-sizing: border-box;
    margin: 0;
    padding: 16px 0 32px;
}

.ds-factbox .ds-factbox__show-more--collapsable {
    background-color: #020202;
    display: block;
}

.ds-factbox .ds-factbox__show-more--collapsable::before {
    background: #020202;
    height: 3rem;
    position: absolute;
    top: -3rem;
    width: 100%;
}

.ds-factbox .ds-factbox__show-more--collapsable:not([data-factbox-expanded])::after {
    background-color: #020202;
    content: "";
    height: 16px;
    position: absolute;
    width: 100%;
}

.main__light-mode {
    color: #605f5f;
}

.swiper-button-disabled.svelte-lwojaj .svg__light.svelte-lwojaj {
    fill: #fff;
}

.svg__light.svelte-lwojaj.svelte-lwojaj {
    height: 20px;
    width: 20px;
    fill: #ece9e9;
}

.option-button {
    background-color: #1e1e1e;
    border-radius: 2px;
    display: flex;
    height: 100%;
    padding: 12px 16px;
    position: relative;
    text-align: left;
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
    width: 100%;
}

.ad.ad--panorama-special {
    background-color: #000;
    margin-bottom: 32px;
    margin-top: 16px;
    padding-bottom: 32px;
}

html {
    --ds-color-text-primary: #d1c9c9;
    --ds-color-text-primary-02: #a4a3a3;
    --ds-color-text-secondary: #fff;
    --ds-color-text-critical: #da000d;
    --ds-color-text-disabled: #956262;
    --ds-color-text-on-brand: #fff;
    --ds-color-text-on-business: #fff;
    --ds-color-text-on-critical: #fff;
    --ds-color-text-on-success: #fff;
    --ds-color-text-brand: #da000d;
    --ds-color-text-body-link: #4373ce;
    --ds-color-text-body-link-visited: #4373ce;
    --ds-color-text-positive: #3a8352;
    --ds-color-text-culture: #227ac3;
    --ds-color-icon-primary: #050505;
    --ds-color-icon-primary-02: #666;
    --ds-color-icon-secondary: #fff;
    --ds-color-icon-critical: #da000d;
    --ds-color-icon-disabled: #666;
    --ds-color-icon-on-brand: #fff;
    --ds-color-icon-on-business: #fff;
    --ds-color-icon-brand: #da000d;
    --ds-color-icon-on-critical: #fff;
    --ds-color-icon-on-success: #fff;
    --ds-color-icon-culture: #227ac3;
    --ds-color-component-brand: #da000d;
    --ds-color-component-business: #3a8352;
    --ds-color-component-primary: #141414;
    --ds-color-component-primary-overlay: rgba(8, 8, 8, .13);
    --ds-color-component-primary-overlay-02: rgba(8, 8, 8, .2);
    --ds-color-component-secondary: #255cbb;
    --ds-color-component-secondary-overlay: hsla(0, 0%, 100%, .13);
    --ds-color-component-secondary-overlay-02: hsla(0, 0%, 100%, .2);
    --ds-color-component-critical: #ea3e3f;
    --ds-color-component-critical-overlay: #a51d24;
    --ds-color-c...