dark_bbc_news.user.css

/* ==UserStyle==
@name Dark BBC News
@author James Tattersall
@version 3.1.6
@description Full dark theme for BBC News
@namespace github.com/jamerst/userstyles
@license MIT

@homepageURL https://github.com/jamerst/userstyles
@supportURL https://github.com/jamerst/userstyles/issues
@updateURL https://github.com/jamerst/userstyles/raw/master/dark_bbc_news.user.css
==/UserStyle== */
@-moz-document url-prefix("https://www.bbc.co.uk/news"), url-prefix("https://www.bbc.com/news") {
    :root {
        --primary: #bb1919;
        --primary-dark: #8B1414;
        --bg-1: #212121;
        --bg-2: #424242;
        --bg-3: #616161;
        --text-1: #e0e0e0;
        --text-2: #ccc;
        --text-3: #bbb;
        --text-4: #aaa;
    }
    
    /* Old Styling (still used on Homepage) */
    /* ====== General ====== */
    /* primary background */
    body,
    .nw-c-slice-heading__action-text,
    .nw-c-slice-heading__title,
    .nw-p-default .gs-c-media-indicator {
        background: var(--bg-1);
    }

    /* secondary background  */
    .nw-p-oat.lx-c-dynamic-promo,
    #orb-modules > header,
    .nw-c-watch-listen__body,
    .ls-c-search__input,
    .gs-c-promo-image .gs-c-media-indicator,
    .nw-c-breaking-news-banner,
    .gs-t-news .lx-stream-related-story--cta-button,
    .gs-t-news .lx-o-panel,
    .lx-chameleon-colours .gs-t-news .lx-o-panel--primary,
    .nw-c-login-promo-theme,
    .orbit-ux-v5 .orbit-search__button,
    .news-index-chameleon-enabled .lx-c-dynamic-promo {
        background: var(--bg-2) !important;
    }

    /* tertiary background */
    .nw-c-watch-listen__title--listen,
    .gs-t-news .lx-stream-post--breaking,
    .lx-chameleon-colours .gs-t-news .lx-stream-post--breaking,
    .gs-t-news .lx-get-involved__button,
    .gs-t-news .lx-pagination__btn--active, .gs-t-sport .lx-pagination__btn--active,
    .gs-t-news .lx-pagination__btn--inactive, .gs-t-sport .lx-pagination__btn--inactive {
        background: var(--bg-3);
    }

    /* remove background */
    .nw-c-nav__wide-morebutton:hover {
        background: none;
    }

    /* primary text colour */
    a,
    .nw-o-link-split__text,
    .gs-t-news .lx-c-dynamic-promo__title,
    .gs-t-news .lx-c-timeline__heading-text,
    .nw-o-link,
    .gs-c-promo-heading,
    .nw-c-slice-heading,
    .ls-c-search__input::placeholder,
    #latest-updates,
    .lx-stream-post__header-link,
    .gs-t-news .lx-stream-related-story--cta-button,
    .gs-t-news .lx-stream-post-body,
    .nw-c-nav__wide-section__title div,
    .gs-t-news .lx-o-panel,
    .gs-t-news .lx-stream-post__header,
    .gs-t-news .lx-stream-post-body a,
    .nw-c-nav__wide-secondary__title span,
    .nw-c-login-promo-theme {
        color: var(--text-1);
    }

    /* secondary text colour */
    .nw-c-promo-summary,
    .nw-c-timestamp,
    .nw-c-local__add-location,
    .gs-o-responsive-image img::before,
    #topos-component .nw-c-related-items__text,
    .gs-c-media-indicator__text,
    .gs-t-news .lx-stream-post,
    .gs-t-news .lx-stream-post__meta-time {
        color: var(--text-2);
    }

    .nw-c-circle.nw-c-circle,
    .nw-p-default .gs-c-media-indicator {
        color: inherit;
    }

    /* link hover */
    a:hover,
    a:visited:hover,
    a:focus,
    .nw-o-link-split__anchor:hover .nw-o-link-split__text,
    .nw-o-link-split__anchor:focus .nw-o-link-split__text,
    .nw-o-link:focus,
    .nw-o-link:hover,
    .lx-c-dynamic-promo--hover .nw-o-link-split__text,
    #topos-component .nw-c-related-items__text:hover,
    .gs-t-news .lx-stream-post-body a:hover,
    .gs-t-news .lx-c-more-from__item-link:hover {
        color: var(--primary);
        text-decoration: none;
    }
    
    a:hover .nw-c-circle {
        color: var(--text-1);
    }

    /* link visited */
    a:visited,
    .nw-o-link--no-visited-state:visited,
    .nw-o-link:visited {
        color: var(--text-3);
    }

    /* image placeholder */
    .gs-o-responsive-image {
        background-color: var(--bg-2)
    }

    /* ====== Header ====== */
    /* top bar */
    .orb-nav-pri {
        background: var(--primary-dark);
        border-color: #000;
        color: #e0e0e0;
    }
    .orb-nav-links li,
    .orb-nav-pri .orb-nav-id,
    .orb-nav-links ul,
    .notificationsBell-0-2-4 {
        border-color: #000;
    }

    .nw-c-nav__wide-morebutton:hover {
        border-bottom: 4px solid #fff;
        padding-bottom: 6px;
    }

    /* invert background images*/
    .orb-nav-id #idcta-statusbar,
    div[class^='notificationLinkTriangle'],
    button[class*='notificationsSignedInBell']::before {
        filter: invert(1);
    }

    .notificationLinkTriangle-0-2-20:first-of-type {
        border: none;
    }
    
    #notification-link::before {
        filter: brightness(100);
    }
    
    
    .orbit-header-account a#idcta-link {
        color: #fff;    
    }
    
    #idcta-link::before {
        filter: invert(1);
    }

    /* header text */
    .nw-c-nav__wide-menuitem-container a,
    .nw-c-nav__secondary-menuitem-container a,
    .nw-c-nav__secondary-menuitem-container a:visited,
    .nw-c-nav__secondary-menuitem-container a:hover,
    .orb-nav-pri a,
    #orb-banner a:hover,
    #orb-banner a:focus,
    #orb-banner a:visited,
    #orb-banner a:visited:hover,
    #orb-modules > header a:hover,
    #orb-modules > header a:focus,
    #orb-modules > header a:visited,
    #orb-modules > header a:visited:hover {
        color: #fff;
    }
    
    /* Header icons */
    .orb-nav-blocks svg path,
    .orbit-header-notifications svg,
    .orbit-header-right svg,
    .orbit-more-drawer-close svg path {
        fill: #fff;
    }
    
    .orbit-header-account a#idcta-link span::after,
    .orbit-header-links a span::after,
    .orbit-header-links ul li a::after,
    .orbit-header-more::after,
    .orbit-header-notifications::after,
    .orbit-header-right a span::after,
    .orbit-more-drawer li a span::after,
    .orbit-more-drawer ul li a::after,
    .orbit-more-drawer-close::after {
        background: #fff;
    }

    /* ====== Homepage ====== */
    .ls-c-search__submit {
        background-color: var(--bg-2);
    }

    .gs-c-media-indicator__icon svg {
        fill: var(--text-1);
    }
    
    a:hover .gs-c-media-indicator__icon svg {
        fill: var(--primary);
    }
    
    .nw-p-oat .nw-c-maxim-wrap {
        background: none;
    }
    
    .nw-p-oat .nw-o-bullet__icon .gs-c-media-indicator {
        background-color: transparent;
    }

    /* ====== Section pages ====== */
    .nw-c-correspondents-promo {
        background-color: var(--bg-2)
    }
    
    .qa-heading-link:hover {
        color: var(--primary) !important;
    }
    
    .gs-t-news .lx-stream-related-story--cta-button {
        border: none;
    }
    
    .gs-t-news .lx-stream-related-story--cta-button:hover {
        color: var(--text-1);
        background: var(--bg-3)
    }

    /* ====== Live feed ====== */
    .gs-t-news .lx-stream-post--breaking {
        border-top: none;
        border-bottom: none;
    }
    
    .lx-card-format .lx-page {
        background: none;
    }
    
    .lx-card-format .lx-page .lx-o-panel-is-commentary {
        background: var(--bg-2) !important;
    }
    
    .lx-card-format .lx-page .lx-stream__post-container,
    .lx-card-format .lx-page.gs-t-news .lx-stream-post--breaking,
    .lx-card-format .lx-page .lx-stream-post--pinned {
        background: var(--bg-3);
    }
    
    .lx-c-carousel__button {
        background: var(--bg-3)
    }
    
    .lx-c-carousel__button svg {
        fill: var(--text-1);
    }
    
    /* Find us here */
    .ws-o-social-secondary-icon svg path {
        fill: var(--text-1) !important;
    }
    
    .ws-o-social-secondary-icon .ws-o-social-secondary-icon__divider {
        border-color: var(--text-1)
    }
    
    .ws-c-get-in-touch {
        color: var(--text-1)
    }
}

@-moz-document url-prefix("https://www.bbc.co.uk/news"), url-prefix("https://www.bbc.com/news") {
    /* New Styling */
    /* ====== Header ====== */
    /* top bar */
    nav[class*='GlobalNavigation'] {
        background: var(--primary-dark);
        border-color: #000;
    }

    nav[class*='GlobalNavigation'] a,
    #header-content a {
        color: #fff !important;
    }
    
    #global-navigation-menu a[class*='MenuLink']:hover {
        background: var(--primary);
    }

    li[class*='GlobalNavigationProduct'],
    div[class*='GlobalNavigationItem'],
    div[class*='GlobalNavigationSide'] {
        border-color: #000;
    }
    
    /* BBC logo */
    a[class*='NavigationLink-LogoLink'] svg {
        fill: #fff;
    }

    /* secondary menu and "More" menu */
    div[class*='MenuContainer-SecondaryNavBarContainer'],
    div[class*='MenuContainer-SecondaryNavBarContainer'] ul,
    a[class*='StyledToggle'][aria-expanded=true],
    div[class*='MenuContainer-MoreMenuWrapper'],
    div[class*='MenuContainer-MoreMenuWrapper'] div,
    div[class*='MenuContainer-MoreMenuWrapper'] ul {
        background: var(--bg-2);
    }

    /* "More" menu item hover */
    div[class*='MenuContainer-MoreMenuWrapper'] a[class*='StyledLink']:hover,
    div[class*='MenuContainer-MoreMenuWrapper'] a[class*='StyledLink']:focus {
        background: var(--bg-3);
    }
    
    /* Header search button */
    a[class*='NavigationLink-SearchLink'] {
        background: var(--bg-2);
    }
    
    span[class*='SearchText'],
    span[class*='SearchIconWrapper'] {
        color: var(--text-1);
    }
    
    /* Triple dot icon */
    span[class*='DotsMenuIconWrapper'] path {
        fill: #fff;
    }
    
    /* Header icon hover underlines */
    a[class*='MenuToggleControlLink'] span[class*='NavItemHoverState']::after,
    a[class*='NavigationLink'][href='https://www.bbc.co.uk'] span[class*='NavItemHoverState']::after,
    a[class*='NavigationLink-NotificationLink']::after{
        background: #fff;
    }

    /* ====== Article Content ====== */
    /* primary text */
    article[class*='ArticleWrapper'],
    *[class*='StyledHeading'],
    div[class*='RichTextContainer'],
    div[class*='RichTextComponentWrapper'],
    a[class*='InlineLink']:link,
    a[class*='StyledLink'] {
        color: var(--text-1);
    }

    /* secondary text */
    p[class*='Contributor'],
    p[class*='Contributor'] strong,
    dl[class*='MetadataStrip'],
    div[class*='PromoContent'] > div > p,
    figcaption[class*='StyledFigureCaption'] {
        color: var(--text-2);
    }


    a[class*='InlineLink']:visited {
        color: var(--text-4);
    }
    
    a[class*='InlineLink']:link:hover {
        text-decoration-thickness: 1px;
    }

    span[class*='Placeholder'] {
        background: var(--bg-2);
    }

    div[class*='StyledPanelContent'] {
        background: var(--bg-2);
        border-color: var(--bg-2);
    }

    div[class*='StyledPanelContent']::before,
    div[class*='StyledPanelContent']::after {
        background: var(--bg-2);
    }

    div[class*='CloseButtonWrapper'] svg {
        color: var(--text-1);
    }
    
    blockquote.twitter-tweet {
        background: var(--bg-2);
        color: var(--text-1)
    }

    /* ====== Sidebar ====== */
    a[class*='PromoLink']:link,
    a[class*='Headline']:link {
        color: var(--text-1);
    }

    a[class*='PromoLink']:visited *,
    a[class*='Headline']:visited {
        color: var(--text-3);
    }
    
    div[class*='Promo'] {
        background: none;
    }
    
    li[class*='PromoItem'] {
        background: var(--bg-2);
    }
    
    li[class*='PromoItem'] div[class*='-Container'] {
        background: none
    }

    aside a:hover,
    aside a:focus,
    a[class*='PromoLink']:visited:hover *,
    a[class*='PromoLink']:link:hover *,
    a[class*='Headline']:hover {
        text-decoration: none !important;
        color: var(--primary);
    }
    
    span[class*='LivePulse'] {
        color: var(--primary) !important;
    }
    
    span[class*='LivePulse'] span[class*='IconContainer'] svg {
        fill: var(--primary);
    }
    
    article ~ aside a[class*='InlineLink']:hover {
        text-decoration: underline !important;
    }

    /* video play icon */
    div[class*='PromoImageContainerInner'] span[class*='Container'] {
        background: var(--bg-2);
        color: var(--text-1);
    }
    
    /* video load placeholder */
    div[class*='StyledMediaContainer'] div[class*='ContainerWrapper'] {
        background: none;
    }
    
    div[class*='StyledMediaContainer'] div[class*='Container'] {
        background: var(--bg-2);
    }
    
    div[class*='LogoIconWrapper'] svg {
        fill: var(--text-1);
    }

    /* most read number */
    span[class*='HeadlineContainer'] span[class*='Rank']:first-child {
        color: var(--primary);
    }
}