hn.user.styl

/* ==UserStyle==
@name         Dark HackerNews
@namespace    gitlab.com/vednoc/dark-hackernews
@version      0.3.3
@description  Customizable dark theme for HackerNews.
@author       vednoc
@homepageURL  https://gitlab.com/vednoc/dark-hackernews
@supportURL   https://gitlab.com/vednoc/dark-hackernews/issues
@updateURL    https://gitlab.com/vednoc/dark-hackernews/raw/master/hn.user.styl
@preprocessor stylus

@var checkbox shrink_nav "Shrink navigation to match content width" 1
@var checkbox sticky_nav "Enable sticky navigation bar" 1
@var checkbox custom_con "Enable custom connector lines" 1
@var text max_width "Custom width for content area" 85%
@var text b_radius "Custom border radius" 3px

@var color dark    "Dark color.   " #222222
@var color darker  "Darker color. " #2f2f2f
@var color light   "Light color.  " #d1d1d1
@var color lighter "Lighter color." #c9c9c9
@var color icon    "Icon color.   " #e1e1e1
@var color accent  "Accent color. " #de935f
@var color yellow  "Yellow color. " #f0c674
@var color orange  "Orange color. " #de935f
@var color red     "Red color.    " #a54242
@var color magenta "Magenta color." #b294bb
@var color violet  "Violet color. " #85678f
@var color blue    "Blue color.   " #5f819d
@var color cyan    "Cyan color.   " #5e8d87
@var color green   "Green color.  " #8c9440
@var color shadow  "Shadow color. " #00000020
==/UserStyle== */

@-moz-document domain("news.ycombinator.com") {
    :root {
        --dark    : dark;
        --darker  : darker;
        --light   : light;
        --lighter : lighter;
        --accent  : accent;
        --icon    : icon;
        --shadow  : shadow;
        --bshadow : 0 2px 3px 0 var(--shadow);
        --yellow  : yellow;
        --orange  : orange;
        --red     : red;
        --magenta : magenta;
        --violet  : violet;
        --blue    : blue;
        --cyan    : cyan;
        --green   : green;
        --t       : transparent !important;
        --width   : max_width;
        --radius  : b_radius;
    }

    // * Use stylus-lang variables with CSS variables.
    $dark    = var(--dark);
    $darker  = var(--darker);
    $light   = var(--light);
    $lighter = var(--lighter);
    $accent  = var(--accent);
    $icon    = var(--icon);
    $shadow  = var(--shadow);
    $bshadow = var(--box-shadow);
    $yellow  = var(--yellow);
    $orange  = var(--orange);
    $red     = var(--red);
    $magenta = var(--magenta);
    $violet  = var(--violet);
    $blue    = var(--blue);
    $cyan    = var(--cyan);
    $green   = var(--green);
    $t       = var(--t);
    $radius  = var(--radius);

    // * Color mixin.
    // ? All colors -> colors: $light, $darker, $dark;
    // ? Only background-color -> colors: 0, 0, $dark;
    colors(x, y, z) {
        if x is a 'call' { color: x !important; }
        if y is a 'call' { border-color: y !important; }
        if z is a 'call' { background-color: z !important; }
    }

    // * Connector helper mixins.
    line(x, y) {
        z-index: -1;
        content: "";
        position: absolute;
        if x != false { border-left: 2px solid $darker; }
        if y != false { border-bottom: 2px solid $darker; }
    }
    nav(a, b, c, d) {
        if a != 'boolean' { top: a; }
        if b != 'boolean' { right: b; }
        if c != 'boolean' { bottom: c; }
        if d != 'boolean' { left: d; }
    }

    // * Browser reset.
    body {
        margin: 0;
        colors: 0, 0, $dark;
        table {
            colors: 0, 0, $t;
            td {
                colors: $light, 0, 0;
                a { colors: $light, 0, 0; }
                a:visited { colors: $blue, 0, 0; }
                a.storylink { font-weight: bold; }
            }
        }
    }

    // * Navbar.
    #hnmain > tbody > tr:first-child [bgcolor="#ff6600"] {
        padding: 8px;
        border-bottom: 1px solid;
        colors: 0, $darker, $dark;
        box-shadow: 0 2px 4px 0 $shadow;
        // ? Navigation items.
        table[style^="padding:2px"] {
            padding: 0px !important;
            span {
                colors: $lighter, 0, 0;
                &.topsel a, font[color="#ffffff"] { colors: $accent, 0, 0; }
            }
            a {
                colors: $lighter, 0, 0;
                transition: 0.15s ease;
                &:hover { colors: $light, 0, 0; }
            }
            img { colors: 0, $light, 0; }
        }
        // ? Sticky navigation.
        if ( sticky_nav == 1 ) {
            top: 0;
            z-index: 999;
            position: sticky;
        }
    }

    // * Content.
    #hnmain {
        border: 0;
        width: 100%;

        // ? Custom width for content area items.
        tbody > tr > td > table[class] {
            padding: 4px 0px;
            margin: 0 auto;
            display: flex;
            width: 100%;
            max-width: var(--width);

            // ? Comment tree buggy width.
            &.comment-tree > tbody {
                width: 100%;
                .comtr { display: flex; }
            }

            // ? Post/comment details.
            &.fatitem {
                display: flex;
                textarea {
                    min-width: 300px;
                    min-height: 60px;
                    padding: 8px;
                    border: 1px solid;
                    border-radius: $radius;
                    colors: $lighter, $darker, $dark;
                }
                input {
                    padding: 4px 8px;
                    border: 1px solid;
                    border-radius: $radius;
                    colors: $lighter, $darker, $dark;
                    &:hover { colors: $light, 0, $darker; }
                }
                // ? Reset height of the first (of the two) <br> elements.
                + br { font-size: 0; }
            }
        }

        // ? Navbar wrapper.
        [bgcolor="#ff6600"] > table {
            if shrink_nav { max-width: var(--width); }
            margin: 0 auto;
        }

        // ? Upvote wrapper.
        .votelinks {
            position: relative;
            z-index: 0 !important;
            // ? Upvote button wrapper.
            a[href^="vote?"] > div {
                margin: 0;
                padding: 4px;
                border-radius: 50%;
                colors: 0, 0, $darker;
                box-shadow: 0 0 0 4px $dark;
                // ? Upvote icon wrapper.
                &[title="upvote"] {
                    position: relative;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background-image: none;
                    // ? Change icon color on hover.
                    &:hover::after { border-bottom-color: $green !important; }
                    // ? Custom upvote icon.
                    &::after {
                        $size = 5px;
                        content: "";
                        top: 6px;
                        position: absolute;
                        border-left: ($size - 1px) solid $t;
                        border-right: ($size - 1px) solid $t;
                        border-bottom: $size solid $lighter;
                        transition: 0.15s ease;
                    }
                }
            }
            // ? Show upvoted posts.
            a[href*="upvoted"] {
                visibility: visible;
                // Upvoted entries.
                > div[title="upvote"] {
                    colors: 0, 0, $dark;
                    box-shadow: 0 0 0 1px inset $darker;
                    &::after { border-bottom-color: $blue; }
                }
            }
            // ? Fix a small overlapping issue with box-shadow.
            > center { padding-right: 4px; }
            // ? Hidden button.
            &.nosee {
                visibility: visible !important;
                .votearrow::after { display: none; }
            }
        }
    }

    // * Content -> Page hacks.
    #pagespace {
        height: 16px !important;
        // * .../user?id=user
        &[title*="Profile:"] ~ tr table tbody {
            display: flex;
            flex-direction: column;
            tr {
                display: flex;
                > td:first-child { flex: 1 1 100px; }
                > td:last-child { flex: 1 1 100%; }
            }
        }
        // * .../threads?id=user
        &[title*="comments"] ~ tr {
            display: flex;
            margin: 0 auto;
            max-width: var(--width);
        }
    }

    // * Content -> Comments.
    tr[id] {
        // ? A bit more whitespace between post author and post content.
        div[style*="margin-bottom:-10px"] { margin-bottom: -6px !important; }
        // ? Comment header.
        .comhead {
            opacity: 0.6;
            a {
                colors: $light, 0, 0;
                &[color="#3c963c"] { colors: $green, 0, 0; }
                &:hover { colors: $lighter, 0, 0; }
            }
            span { colors: $light, 0, 0; }
        }
        // ? Comment body.
        .comment {
            a {
                colors: $accent, 0, 0;
                &[href^="reply?"] {
                    opacity: 0.6;
                    colors: $light, 0, 0;
                    transition: 0.15s ease;
                    &:hover { opacity: 1; }
                }
            }
            span, p { colors: $light, 0, 0; }
        }
    }

    // * Content -> Connectors.
    if ( custom_con == 1 ) {
        tr.comtr {
            position: relative;
            // ? Indentation.
            .ind {
                position: relative;
                &::before {
                    height: 9px;
                    nav: 0px, 0px, false, 13px;
                    line: true, true;
                    border-radius: 0 0 0 9px;
                    colors: 0, $darker, 0;
                }
                &::after {
                    nav: 0px, false, -8px, 13px;
                    line: true, false;
                    colors: 0, $darker, 0;
                }
            }
            &:hover .ind::before { colors: 0, $accent, 0; }
            // ? Remove connector line from the last child.
            &[id]:last-child .ind::after { display: none; }
        }
    }

    // * Content -> Profile page.
    [title^="Profile:"] {
        // ? Profile wrapper.
        + tr > td > table[border="0"], + tr > td > form.profileform {
            width: 100%;
            margin: 0 auto;
            max-width: var(--width);
        }
        // ? Profile settings.
        + tr form.profileform {
            // ? Reset width in personal profile view.
            > table[border="0"] { width: 100%; }
            input, textarea, select {
                padding: 4px;
                border: 1px solid;
                border-radius: $radius;
                colors: $light, $darker, $dark;
                &:focus { colors: 0, $accent, 0; }
            }
            input[value="submit"] {
                transition: 0.15s ease;
                &:hover { colors: 0, 0, $darker; }
            }
            // ? Reset vertical align.
            td[valign="top"] {
                line-height: 28px;
                ~ td { line-height: 28px; }
            }
            // ? Reset links.
            a[href] > u {
                colors: $light, 0, 0;
                transition: 0.15s ease;
                &:hover { colors: $accent, 0, 0; }
            }
        }
    }

    // * Content -> Submit page.
    tbody > tr > td > form[method="post"] {
        padding: 4px 0px;
        margin: 0 auto;
        width: 100%;
        max-width: var(--width);
        input, textarea, select {
            padding: 4px;
            border: 1px solid;
            border-radius: $radius;
            colors: $light, $darker, $dark;
            &:focus { colors: 0, $accent, 0; }
        }
        input[value="submit"] {
            transition: 0.15s ease;
            &:hover { colors: 0, 0, $darker; }
        }
    }

    // * Content -> Bookmarklet page.
    table[width="500"] tr > td[bgcolor="#fafaf0"] {
        colors: 0, 0, $t;
        a {
            colors: $accent, 0, 0;
            img {
                opacity: 0.6;
                transition: 0.15s ease;
                transition-delay: 0.15s;
                &:hover {
                    opacity: 1;
                    transition-delay: 0.6s;
                }
            }
        }
        b, p, span { colors: $light, 0, 0; }
    }

    // * Content -> Procrastination timer.
    #hnmain > tbody > tr:first-child {
        // ? Hack to only select the wrapper element.
        > td:first-child:not([bgcolor="#ff6600"]) {
            display: flex;
            flex-direction: column;
            margin: 3rem auto 1rem;
            max-width: var(--width);
            b {
                colors: $light, 0, 0;
                line-height: 4rem;
            }
            p {
                margin: 0;
                colors: $lighter, 0, 0;
                &:first-child { colors: 0, 0, $blue; }
                u { line-height: 2rem; }
            }
            tt {
                padding: 0 0.2rem;
                border-radius: $radius;
                box-shadow: 0 0 0 1px inset $darker;
            }
        }
    }

    // * Footer.
    #hnmain > tbody > tr:last-child {
        td[bgcolor="#ff6600"] {
            border-bottom: 1px solid $darker;
            colors: 0, 0, $t;
        }
        a[href$="apply/"] {
            colors: $lighter, 0, 0;
            transition: 0.15s ease;
            &:hover { colors: $accent, 0, 0; }
        }
        span.yclinks {
            colors: $lighter, 0, 0;
            a {
                colors: $lighter, 0, 0;
                transition: 0.15s ease;
                &:hover { colors: $accent, 0, 0; }
            }
        }
        form > input {
            width: 100%;
            max-width: 30em;
            padding: 4px;
            border: 1px solid $darker;
            colors: $light, 0, $dark;
        }
    }
}