Linkedin Dracula Theme by RetrozDev

/* ==UserStyle==
@name         Linkedin Dark Breeze
@version      20220122
@namespace    userstyles.world/user/kajika
@description  Dark theme for LinkedIn
@author       kajika
@license      CC BY-SA - Creative Commons Attribution-ShareAlike
==/UserStyle== */
@-moz-document domain("linkedin.com") {
    :root {
        --main-bg-color: #282a36;
        --main-fg-color: #bbb;
        --light-bg-color: #44475a;
        --light-fg-color: #ccc;
        --lighter-bg-color: #282a36;
        --lighter-fg-color: #bd93f9;
        --highlight-bg-color: #282a36;
        --highlight-fg-color: #f8f8f2;
        --dim-fg-color: #999;
        --disable-bg: #394f49;
        --disable-fg: #8c9999;
        --border-color: #888;
        --primary-color: #bd93f9;
        --tint-color: #282a36;
        --tint-dim: #282a36;


        --color-border: var(--border-color);
        --color-label: var(--main-fg-color);
        --color-label-hover: var(--lighter-fg-color);

        --color-background: var(--light-bg-color);
        --color-background-canvas: var(--main-bg-color);
        --color-background-container: var(--light-bg-color);
        --color-background-container-tint: var(--tint-color);
        --color-background-disabled: var(--disable-bg);
        --color-background-brand-accent-4: var(--tint-dim);
        --color-background-brand-accent-5: var(--lighter-bg-color);
        --voyager-color-background-comment: var(--lighter-bg-color);
        --voyager-color-background-container-tint-2: var(--tint-color);
        --voyager-color-background-input-search: var(--lighter-bg-color);
        --voyager-color-action-selected: var(--highlight-bg-color);

        --color-text: var(--main-fg-color);
        --color-text-disabled: var(--disable-fg);
        --color-text-low-emphasis: var(--lighter-fg-color);
        --color-text-low-emphasis-shift: var(--light-fg-color);
        --color-text-meta: var(--disable-fg);

        --color-action: var(--primary-color);

        --color-icon: var(--main-fg-color);
        --color-icon-nav: var(--main-fg-color);
        --color-icon-nav-active: var(--highlight-fg-color);
        --color-icon-nav-selected: var(--lighter-fg-color);
        --color-icon-nav-selected-active: var(--highlight-fg-color);

        --messenger-color-background-input-message: var(--highlight-bg-color);

        --voyager-color-background-brand-accent-5-tint: var(--lighter-bg-color);
        /*--artdeco-reset-base-background-transparent: var(--light-bg-color);*/
    }

    body {
        background: var(--main-bg-color);
        color: var(--main-fg-color);
    }

    hr {
        border-color: var(--border-color);
    }

    .artdeco-loader__bars {
        color: var(--main-fg-color);
    }

    .global-nav__branding-logo li-icon {
        color: var(--primary-color);
    }

    .msg-s-event-listitem__attachment-type--pdf {
        background: var(--main-bg-color);
    }

    .msg-s-event-listitem__attachment-type--pdf .attachment-filename,
    .msg-s-event-listitem__attachment-type--pdf .attachment-filesize {
        color: var(--main-fg-color);
    }

    .iph-widget__search-container,
    .mercado-styling input.iph-widget__search-textbox {
        background: var(--light-bg-color);
    }

    .iph-widget__main-content-article {
        background: var(--light-bg-color);
    }

    .iph-widget__contextual-help-header {
        color: var(--main-fg-color);
    }

    .msg-reactions__pill--viewer-reacted {
        background-color: var(--tint-dim);
    }

    .msg-reactions__pill--viewer-reacted:hover {
        background-color: var(--tint-color);
    }

    .msg-reactions__entry-point .artdeco-button__icon,
    .msg-reactions__pill {
        background-color: var(--tint-dim);
        border-color: var(--tint-color);
    }

    .msg-reactions__entry-point:hover .artdeco-button__icon {
        background-color: var(--tint-color);
        border-color: var(--tint-color);
    }
}

@-moz-document url-prefix("https://www.linkedin.com/psettings") {
    label {
        color: var(--main-fg-color);
    }

    #layout-header.minimal-nav #header-banner {
        background: var(--light-bg-color) !important;
    }

    #layout-header.minimal-nav .minimal-util-nav-link {
        color: var(--lighter-fg-color) !important;
    }

    .discovery-menu-categories-col .category-container .categories {
        background: var(--light-bg-color);
    }

    .discovery-menu-categories-col .category-container .categories a.category,
    .discovery-menu-categories-col .category-container .categories .expanded-category,
    .discovery-menu-categories-col .category-container .categories a.subcategory-nav {
        color: var(--main-fg-color);
    }

    .discovery-menu-categories-col .category-container .categories a.subcategory-nav.active {
        background: var(--lighter-bg-color);
    }

    .discovery-menu-categories-col .category-container .categories a.category:hover {
        background: var(--lighter-bg-color);
    }

    .discovery-menu-categories-col .category-container .categories a.subcategory-nav:focus {
        color: var(--highlight-fg-color);
    }

    .list--levee {
        background: var(--light-bg-color);
    }

    .list .subcategory h2,
    .list > li .heading,
    .data-log-entry-header .data-log-entry-expander {
        color: var(--lighter-fg-color);
    }

    .list p,
    .list legend,
    .list > li .sub-heading,
    .list .expander .indicator,
    .list .expander .state,
    .data-log-entry-header .data-log-entry-expander .date {
        color: var(--main-fg-color);
    }

    .pagination .pagination-control-link {
        color: var(--main-fg-color) !important;
    }

    input[type="radio"] + label::before,
    input[type="checkbox"] + label::before {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset
    }

    select {
        color: var(--main-fg-color);
        border-color: var(--border-color);
    }

    select:hover {
        border-color: var(--light-fg-color);
    }
}

@-moz-document url-prefix("https://www.linkedin.com/login"),
url-prefix("https://www.linkedin.com/uas/login") {
    #app__container {
        background: var(--main-bg-color);
    }

    #app__container .footer__base__wrapper p.copyright,
    .footer__base .footer__base__nav-list a,
    .language-selector__button {
        color: var(--main-fg-color);
    }

    li-icon[type="linkedin-logo"] svg {
        filter: hue-rotate(180deg) invert(0.8);
    }

    .language-selector .language-selector__dropdown {
        background: var(--main-bg-color);
        box-shadow: 0 0 0 1px var(--border-color);
    }

    .card-layout {
        background: var(--light-bg-color);
    }

    .header__content .header__content__heading,
    .header__content .header__content__subheading {
        color: var(--main-fg-color);
    }

    .form__input--floating {
        background: var(--light-bg-color);
    }

    .form__input--floating > input {
        color: var(--main-fg-color);
    }

    .form__input--floating > label,
    .form__input--floating > input:focus + label,
    .form__input--floating > input:autofill + label,
    .form__input--floating > input:valid + label,
    .form__input--floating > input:active + label {
        color: var(--dim-fg-color);
    }
}