Tagesschau-Userstyle-Darkmode/style.css

/* ==UserStyle==
@name           Tagesschau Dark 2.0
@namespace      USO Archive
@author         Sephger
@description    `A dark theme for Tagesschau.de. Edited from Scherubs Theme (https://uso.kkx.one/style/156101)`
@version        20230413.09.26
@license        CC-BY-NC-SA-4.0
@preprocessor   uso
==/UserStyle== */
@-moz-document domain('tagesschau.de') {

    :root {
        --accent-color: #0098f8;
        --accent-color-hover: #226ccc;
    }

    .label.color--unicorn {
        background-color: #fff;
    }

    body {
        background: #111 !important;
        color: #bbb !important;
    }

    body.tagesschau .box {
        background: #333 !important;
    }

    body.tagesschau .breadcrumb {
        background: #222 !important;
    }

    body.tagesschau .mod {
        background: #222 !important;
    }

    body.tagesschau #content .sectionC,
    body.tagesschau #content .sectionZ,
    body.tagesschau #content .sectionB {
        background: #222 !important;
    }

    body.ard .masternavi ul li.ard,
    body.tagesschau .masternavi ul li.tagesschau,
    body.sportschau .masternavi ul li.sportschau,
    body.boerse .masternavi ul li.boerse,
    body.ratgeber .masternavi ul li.ratgeber,
    body.wissen .masternavi ul li.wissen,
    body.kultur .masternavi ul li.kultur,
    body.kinder .masternavi ul li.kinder,
    body.intern .masternavi ul li.intern,
    body.tv .masternavi ul li.tv,
    body.radio .masternavi ul li.radio,
    body.mediathek .masternavi ul li.mediathek {
        background: #3b3b3b !important;
    }

    strong {
        color: #38b !important;
    }

    .tagesschau #header {
        background: linear-gradient(to bottom, #222 24%, #111 25%, #111 101%) !important;
        /* W3C */
    }

    .tagesschau .modInhaltstypTgs .box div {
        background: #333;
    }

    input {
        background: #3b3b3b !important;
        color: #bbb !important;
    }

    #header .searchForm {
        background: #3b3b3b !important;
    }

    #header .searchBox input {
        color: #bbb !important;
    }

    #header .searchInput.active {
        color: #bbb !important;
    }

    #header .subressort .collapseArrow {
        background: url("http://www.tagesschau.de/resources/framework/img/base/icon/arrow_collapsible.png") no-repeat scroll 0 -100px !important;
    }

    #header .subressort.collapsed .collapseArrow {
        background: url("http://www.tagesschau.de/resources/framework/img/base/icon/arrow_collapsible.png") no-repeat scroll 0 -80px !important;
    }

    #footer {
        background-color: #222 !important;
    }

    #footer .unitD h3 {
        color: #bbb !important;
    }

    a {
        text-decoration: none !important;
        color: var(--accent-color) !important;
        transition: color 0.2s ease-in-out 0s;
    }

    a:hover {
        color: var(--accent-color-hover) !important;
    }

    .masternavi ul li.active {
        border-bottom: 2px solid #333 !important;
    }

    .subnavi .ressorts {
        background: #222 !important;
    }

    /* .subnavi .ressorts span {
    background: #3b3b3b !important;
} */
    .subnavi .ressorts .collapsed span {
        background-color: #00f !important;
    }

    .subnavi .active,
    .subnavi .active.collapsed {
        background: #3b3b3b !important;
    }

    .subnavi .subressorts {
        background: #3b3b3b !important;
    }

    .subnavi .active,
    .subnavi .active.collapsed {
        /*color: #001a4b;*/
        border-bottom: 2px solid #333 !important;
    }

    .subnavi .subressorts span {
        background-color: #333 !important;
    }

    .subnavi .subressorts li {
        border-bottom: 1px solid #2b2b2b !important;
    }

    .subnavi ul.ressorts li:hover,
    .subnavi ul.ressorts li:active,
    .subnavi ul.ressorts li:focus {
        background: #333 !important;
    }

    .storywrapper {
        background: #222 !important;
    }

    .storywrapper .sectionA .con .box {
        background: #222 !important;
    }

    .modParagraph .text a {
        border-bottom: none !important;
    }

    .modParagraph .text a:focus {
        border-bottom: none !important;
    }

    .modParagraph .text a:hover {
        border-bottom: none !important;
    }

    .modParagraph .mediaInfo {
        background-color: #3b3b3b !important;
    }

    .modParagraph .infokasten {
        background: #3b3b3b !important;
    }

    .modParagraph .infokasten.sendungsbezug {
        /*background: url(../img/base/icon/sendebezug.png) no-repeat scroll 8px center #555555;*/
        background: url(http://www.tagesschau.de/resources/framework/img/base/icon/sendebezug.png) no-repeat scroll 8px center #3b3b3b !important;
    }

    .mod .linklist .list li a:focus {
        background: #3b3b3b;
    }

    .mod .linklist .list li a:hover,
    .mod .linklist .list li a:active {
        background: #222;
    }

    .modConSearch #form fieldset {
        background-color: #222 !important;
    }

    blockquote.zitat {
        color: #888;
    }

    #user-login-form {
        background: #333 !important;
    }

    .con {
        background: #3b3b3b !important;
    }

    .conHeadline {
        color: #bbb !important;
    }

    .socialMedia .sharingBar .shareCon.isFixed {
        background: linear-gradient(to right, rgba(51, 51, 51, 1) 0%, rgba(51, 51, 51, 1) 31%, rgba(51, 51, 51, 0.8) 53%, rgba(51, 51, 51, 1) 82%, rgba(51, 51, 51, 1) 100%) !important;
        /* W3C */
    }

    .media li {
        border-bottom: 1px solid #333 !important;
    }

    .modSharing .shareCon .shares li {
        background: #444 !important;
    }

    .modSharing.sharingBar .nachoben a {
        background: transparent url("http://www.tagesschau.de/resources/framework/img/base/icon/arrow_collapsible.png") no-repeat scroll 0 -60px !important;
    }

    .poweruser span {
        color: #bbb;
    }

    .poweruser ul li a {
        background: #1b1b1b !important;
    }

    .poweruser ul li.active a {
        background: #000 !important;
        color: #38b !important;
        font-weight: bold !important;
    }

    .taxonomy .label {
        color: #bbb !important;
    }

    .modTable .table table th {
        background: #444;
        color: #ccc;
    }

    .table tr:nth-child(even) {
        background: #2b2b2b;
    }

    .table tr:nth-child(odd) {
        background: #333;
    }

    .mod .controls.paging .labels .entry {
        background: #222 !important;
    }

    .mod .controls.paging .labels .entry a:hover {
        background: #444 !important;
    }

    .mod .controls .labels .entry.active a {
        background: #111 !important;
        color: #38b !important;
        font-weight: bold !important;
    }

    .modForm fieldset {
        background-color: #333;
    }

    .ui-widget {
        background: #111;
    }

    .ui-widget-header,
    .ui-widget-content {
        color: #ddd;
    }

    .ui-state-default,
    .ui-widget-content .ui-state-default,
    .ui-widget-header .ui-state-default {
        background-color: #222;
    }

    .ui-state-default,
    .ui-widget-content .ui-state-default,
    .ui-widget-header .ui-state-default {
        color: #ddd;
    }

    .ui-datepicker .ui-datepicker-prev {
        background-color: #555;
    }

    .ui-datepicker .ui-datepicker-prev-hover {
        background-color: #666;
    }
    .button {
        color: #ddd !important;
    }

    .button a {
        color: #ddd !important;
    }

    .button,
    .button a,
    div.button.share.collapsed,
    div.button.like.collapsed,
    .modSocialbar .likeCon,
    .mod .controls.buttonfield a,
    .mod .controls .labels .entry.active,
    .modQuiz.voting .voteresult .link {
        background: linear-gradient(to bottom, #444 0%, #333 101%) !important;
        /* W3C */
        transition: color 0.2s ease-in-out 0s;
    }

    .button:hover,
    .button a:hover,
    .mod .controls .labels .entry:hover,
    .mod .controls .labels .entry a:hover,
    .mod .controls.buttonfield:hover,
    .mod .controls.buttonfield a:hover {
        background: linear-gradient(to bottom, #555 0%, #333 101%) !important;
        /* W3C */
        /*     background: #444 !important; */
        color: var(--accent-color) !important;
    }

    .collapseArrow {
        background: url("http://www.tagesschau.de/resources/framework/img/base/icon/arrow_collapsible.png") no-repeat scroll 0px -60px transparent !important;
    }

    .collapsed .collapseArrow {
        background: url("http://www.tagesschau.de/resources/framework/img/base/icon/arrow_collapsible.png") no-repeat scroll 0px -40px transparent !important;
    }
}