JAMA Network Dark Mode by alythobani

/* ==UserStyle==
@name         JAMA Network Dark Mode
@version      20241212.19.13
@namespace    https://userstyles.world/user/alythobani
@description  Implements dark mode for JAMA Network journal articles, and adds some extra padding/width to the article's content for better readability.
@author       alythobani
@license      GPLv3
==/UserStyle== */

@-moz-document domain("jamanetwork.com") {
/* Search page */
.black {
    color: #aaa !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.master-main .article--title,
.article--title a {
    color: #ccc;
}

.article {
    border-color: #333;
}

.article--authors,
.article--citation {
    color: #888;
}

/* Left sidebar in search page */
.search-facets {
    background: #1a1a1a;
    .offensive-content-statement {
        border: none;
        background: #981b1e11;
        text-align: center;
        a {
            color: #ccc;
            &:hover {
                color: #ccc;
                text-decoration: underline;
            }
        }
    }
    .search-facet {
        border-color: #333;
    }
}

/* Pagination at bottom of search page */
.al-pagination,
.pagination {
    border-color: #333;
}

/* Article page */
body {
    background: #1a1a1a;
    color: #bbb;
}

input[type=text] {
    background: #1a1a1a;
    border-color: #333;
    color: #bbb;
}

label {
    color: #ccc;
}

.article--excerpt {
    color: #aaa;
}

.header-wrap {
    background: #111;
    .network-bar {
        background: #0a0a0a;
    }
}

.site-search {
    .site-search-bar .cs-skin-border {
        &.cs-select span:hover,
        .cs-options span:hover {
            color: #ccc;
            background: #222;
        }
        .cs-options,
        .cs-placeholder {
            /*             border: 1px solid #333; */
            background: #1a1a1a;
            color: #bbb;
            border-radius: 4px 0 0 4px;
            span {
                color: #888;
            }
        }
    }
    .search-input-container {
        background: #1a1a1a;
        input {
            color: #bbb;
        }
    }
}

.article-metrics-wrapper {
    margin-left: 8px;
}

.artmet-condensed-wrap {
    .artmet-item.artmet-views,
    .artmet-citations-link,
    .artmet-comments-link,
    .altmetric-embed a ._altmetric_score {
        /*         padding: 0px 4px; */
        color: #aaa !important;
        &:hover {
            color: #ccc !important;
        }
    }
    .artmet-text,
    .artmet-altmetric a ._altmetric_score:before {
        border-color: transparent !important;
    }
    .artmet-item:after {
        color: #444;
        margin: 8px;
    }
}

/* Buttons above article title */
.toolbar .toolbar-tool-wrap,
.toolbar-trigger .toolbar-tool-wrap {
    border-color: #333;
    &:hover {
        cursor: pointer;
        background: #222;
        .toolbar-tool,
        .toolbar-share-more-link,
        .toolbar-share::before,
        .toolbar-share-more-link:after {
            color: #ddd;
        }
    }
    .toolbar-tool,
    .toolbar-share-more-link,
    .toolbar-share::before,
    .toolbar-share-more-link:after {
        color: #aaa;
    }
}

/* Sidebar */
.resources-panel {
    width: 31%;
    border-color: #222;
    .tab-nav {
        background: #111;
        .tab-nav-trigger {
            color: #aaa;
            border-color: #222;
            &:hover,
            &.target-tab-active {
                background: #1a1a1a;
                color: #ccc;
            }
        }
    }
    .contents-tab .toolbar-pdf {
        color: #bbb;
    }
    .section-jump-link.contents-tab-jump-link {
        color: #aaa;
    }
    .figure-table-links .figure-table-link {
        color: #aaa;
        &:hover {
            color: #ccc;
        }
    }
}

.meta-authors a,
.meta-product a {
    color: #aaa;
    &:hover {
        color: #ccc;
    }
}

/* Buttons above Abstract */
.errata-links {
    background: #222;
    .errata-link .errata-link--btn {
        border: 1px solid #981b1e;
        background: #1a1a1a;
        color: #981b1e;
        &:hover {
            background: #111;
        }
    }
}
.linked-content-toolbar .linked-content-trigger {
    border-left: 1px solid #ddd;
    border-color: #333;
    color: #aaa;
    &:hover {
        color: #ccc;
        border-color: #666;
        background: #222;
    }
}

.content-panel {
    width: 69%;
    .full-text-tab {
        padding: 3em 6em;
    }
}

p strong {
    color: #ccc;
}
}