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);
    }
    
    .article header .picture--with-bg, .ds-article-image--body .picture--placeholder, .ds-article-image--body .picture--with-bg {
  background-color: #000;
}

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

    .ds-btn.ds-btn--secondaryFilled {
        --ds-btn__background-color: #2f2b2b;
        --ds-btn__color: var(--ds-color-text-primary);
    }
}

.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%;
}

.site-body {
    background-color: #000;
}


.error-page {
    text-align: center;
    color: #d7d7d7;
}

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

.didomi-popup-notice-buttons {
  align-items: center !important;
  background-color: #000000eb !important;
  background-image: linear-gradient(180deg,black 0,hsl(0, 0%, 0%) 0,#000 30%);
  bottom: 0;
  box-sizing: border-box;
  flex-direction: column !important;
  left: 0;
  margin-top: 16px !important;
  padding: 64px 24px 24px !important;
  position: absolute;
  width: 100%;
}

.tapet-bottom-bar.tapet-bottom-bar--white {
  --tapet-bottom-bar-color-bg: #514f4f;
  --tapet-bottom-bar-color: var(--tapet-color-black);
  --tapet-bottom-bar-box-shadow: 8px 8px 12px #00000038;
}

.podcast-page {
  background-color: #000;
  color: var(--ds-color-text-primary);
  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-top: 56px;
}

.audio .audio__playback-rate select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #000;
  border: 0;
  color: var(--ds-color-text-primary);
  cursor: poi...