Hacker News - Dynamic Dark - fixed size by vlad

/* ==UserStyle==
@name         Hacker News - Dynamic Dark
@version      20211225.17.20
@namespace    userstyles.world/user/calebj0seph
@description  Classic Hacker News design with automatic light/dark mode. Includes some minor spacing and typography tweaks to improve legibility.
@author       calebj0seph
@license      No License
==/UserStyle== */

@-moz-document domain("news.ycombinator.com") {
    body {
        max-width: 800px;
        margin: auto;
    }
    
    .pagetop,
    .yclinks {
        font-family: 'Segoe UI Variable Small', 'Segoe UI', 'Helvetica Neue', sans-serif;
    }

    .pagetop {
        color: rgba(0, 0, 0, 0.7);
    }

    .pagetop a:link {
        color: #000000;
    }

    .pagetop .topsel a:link,
    .pagetop .topsel a:visited,
    .pagetop font[color="#ffffff"] {
        font-weight: bold;
    }

    #hnmain {
        border-radius: 3px;
    }

    #hnmain > tbody > tr:first-child > td:first-child {
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }

    #hnmain > tbody > tr:last-child > td:last-child {
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
    }

    #hnmain > tbody > tr:first-child > td:first-child > table {
        padding: 5px 10px!important;
    }

    .pagetop > b:first-child {
        margin: 0px 8px 0px 3px;
    }

    .title:first-child {
        padding-right: 0.2rem;
        font-family: 'Segoe UI Variable Small', 'Segoe UI', 'Helvetica Neue', sans-serif;
        font-size: 0.95rem;
    }

    .title:last-child {
        font-family: 'Segoe UI Variable Small', 'Segoe UI', 'Helvetica Neue', sans-serif;
        font-size: 0.95rem;
        font-weight: 500;
        padding-bottom: 0.05rem;
    }

    .title .morelink {
        font-size: 0.9rem;
    }

    a:link {
        color: #323232;
    }

    .comhead,
    .subtext {
        font-family: 'Segoe UI Variable Small', 'Segoe UI', 'Helvetica Neue', sans-serif;
        font-size: 0.8rem;
        font-weight: normal;
    }

    .comment {
        font-family: 'Segoe UI Variable Small', 'Segoe UI', 'Helvetica Neue', sans-serif;
        font-size: 0.85rem;
        font-weight: normal;
    }

    td {
        font-family: 'Segoe UI Variable Small', 'Segoe UI', 'Helvetica Neue', sans-serif;
        font-size: 0.8rem;
    }

    .itemlist {
        padding-left: 0.8rem;
    }

    .votelinks {
        padding-right: 0.35rem;
    }

    .votearrow {
        margin-top: 5px;
        background: no-repeat center/10px url('grayarrow2x.gif');
    }

    .reply a {
        font-family: 'Segoe UI Variable Small', 'Segoe UI', 'Helvetica Neue', sans-serif!important;
        font-size: 0.7rem!important;
    }

    tr.spacer {
        height: 0.4rem!important;
    }

    .yclinks {
        font-size: 0.7rem;
    }

    /* Christmas colors */
    td[bgcolor="#cc1010"] .pagetop {
        color: rgba(255, 255, 255, 0.7);
    }

    td[bgcolor="#cc1010"] .pagetop a:link,
    td[bgcolor="#cc1010"] .pagetop a:visited {
        color: #fbfbfb;
    }

    td[bgcolor="#cc1010"] .pagetop > b:first-child {
        color: #fbfbfb;
    }

    td[bgcolor="#cc1010"] .pagetop .topsel a:link,
    td[bgcolor="#cc1010"] .pagetop .topsel a:visited,
    td[bgcolor="#cc1010"] .pagetop font[color="#ffffff"] {
        color: #000000;
    }

    td[bgcolor="#cc1010"] .pagetop > b:first-child a {
        color: #fbfbfb!important;
    }

    td[bgcolor="#cc1010"] .pagetop a:visited {
        color: #fbfbfb;
    }

    @media (prefers-color-scheme: dark) {
        body {
            background: #020202;
        }

        #hnmain,
        [bgcolor="#fafaf0"] {
            background: #30312c;
        }

        #hnmain > tbody > tr:first-child > td:first-child {
            background: #f05900;
        }

        textarea,
        input[type="text"],
        input[type="url"],
        input[type="password"] {
            background: #323232;
            color: #fbfbfb;
            border: 1px solid #767676;
        }

        .pagetop {
            color: rgba(255, 255, 255, 0.7);
        }

        .pagetop a:link,
        .pagetop a:visited {
            color: #fbfbfb;
        }

        .pagetop > b:first-child {
            color: #fbfbfb;
        }

        .pagetop .topsel a:link,
        .pagetop .topsel a:visited,
        .pagetop font[color="#ffffff"] {
            color: #000000;
        }

        font[color="#3c963c"] {
            color: #6ac366;
        }

        .pagetop > b:first-child a,
        td[bgcolor="#ffffaa"] td,
        #me,
        [bgcolor="#fafaf0"] {
            color: #fbfbfb!important;
        }

        .title,
        td,
        .hnmore a:link,
        a:visited {
            color: #ababab;
        }

        a:link,
        .pagetop a:visited {
            color: #fbfbfb;
        }

        .subtext,
        .subtext a:link,
        .subtext a:visited,
        .comhead,
        .comhead a:link,
        .comhead a:visited,
        [bgcolor="#fafaf0"] b {
            color: #b9b9b9;
        }

        .c00,
        .c00 a:link {
            color: #fbfbfb;
        }
        .c5a,
        .c5a a:link,
        .c5a a:visited {
            color: #f1f1f1;
        }
        .c73,
        .c73 a:link,
        .c73 a:visited {
            color: #e4e4e4;
        }
        .c82,
        .c82 a:link,
        .c82 a:visited {
            color: #d4d4d4;
        }
        .c88,
        .c88 a:link,
        .c88 a:visited {
            color: #c3c3c3;
        }
        .c9c,
        .c9c a:link,
        .c9c a:visited {
            color: #b2b2b2;
        }
        .cae,
        .cae a:link,
        .cae a:visited {
            color: #a1a1a1;
        }
        .cbe,
        .cbe a:link,
        .cbe a:visited {
            color: #939393;
        }
        .cce,
        .cce a:link,
        .cce a:visited {
            color: #868686;
        }
        .cdd,
        .cdd a:link,
        .cdd a:visited {
            color: #7e7e7e;
        }

        td[bgcolor="#ffffaa"] {
            background: #977435;
        }

        /* Christmas colors */
        td[bgcolor="#cc1010"] {
            background: #cc1010 !important;
        }

        [color="#005a00"] {
            color: #2ea658;
        }

        [color="#be2828"] {
            color: #f25d50;
        }
    }
}