DarkGray - Wykop 2023 by vocus

/* ==UserStyle==
@name           DarkGray - Wykop 2023
@namespace      github.com/openstyles/stylus
@version        1.1.1
@description    Motyw DarkGray dla wykop.pl 2023
@author         vocus
@preprocessor stylus

@var checkbox hide_wosp "Ukryj Logo WOŚP" 0
@var checkbox hide_voters "Ukryj Plusujących w komentarzach" 0
@var checkbox hide_news "Ukryj panel 'Hity Wykopu'" 0
@var checkbox hide_categories "Ukryj domyślne kategorie Wykopu" 0
@var checkbox hide_corners "Wyłącz zaokrąglone rogi" 0
@var checkbox push_image_right "Przenieś obrazki znalezisk na prawą stronę" 0
@var checkbox hide_ads "Ukryj boxy reklamowe (domyślnie ukryte)" 1
@var checkbox floating_button_off "Ukryj pływające przyciski 'Nowości' i 'Dodaj' (domyślnie ukryte)" 1

@var range comments_padding "Zmień rozmiar wcięcia komentarzy" [50, 5, 100, 5, 'px']
@var range comments_font_size "Zmień rozmiar czcionki w komentarzyach" [14, 12, 18, 1, 'px']
@var range home_width "Zmień szerokość strony" [1350, 1100, 1500, 50, 'px']
@var range left_panel_width "Zmień szerokość panelu z kategoriami" [250, 250, 350, 5, 'px']
@var range comment_image_size "Zmień rozmiar obrazka w Mikroblog" [300, 150, 400, 5, 'px']

@var text ui_font "Zmień czcionkę (domyślnie IBM Plex Sans)" "IBM Plex Sans"
==/UserStyle== */
@-moz-document domain("wykop.pl") {
    font = ui_font, sans-serif;
    font_code = 'Anonymous Pro', monospace;
    autor = 'DarkGray by vocus';
    ui_font_primary = #e4e6eb;
    ui_font_secondary = #8c8c8d;
    ui_font_visited = #646465;
    ui_white = #fff;
    ui_primary = #40916c;
    ui_secondary = #bc4749;
    ui_orange = #e36414;
    ui_plus = #40916c;
    ui_plus_border = #19390b;
    ui_minus = #bc4749;
    ui_minus_border = #34242b;
    ui_user_green = #40916c;
    ui_user_orange = #e36414;
    ui_user_red = #bc4749;
    bg_primary = #18191a;
    bg_secondary = #222426;
    bg_hover = #303336;
    bg_autor = #181a1c;
    ui_gradient_1 = rgba(64, 145, 108, 0.1);
    ui_gradient_2 = t;
    t = transparent;
    i = !important;
    n = none;
    b = block;

    // Wykop default colors
    :root [data-night-mode] {
        --porcelain: bg_primary;
        --geyser: bg_secondary;
        --whitish: bg_secondary;
        --squeeze: bg_hover;
        --athensGray: ui_primary;
        --cinnabar: ui_secondary;
        --orange: ui_secondary;
        --tuna: ui_font_primary;
        --steelBluish: ui_font_primary;
        --heather: ui_font_secondary;
        --gullGray: ui_font_secondary;
    }

    if (hide_wosp) {
        [data-night-mode] aside.doodle > * img {
            display: n i
        }
    }

    if (hide_voters) {
        [data-night-mode] section.entry-voters {
            display: n i
        }
    }

    if (hide_news) {
        [data-night-mode] aside.hits-slider {
            display: n i
        }
    }

    if (hide_categories) {
        [data-night-mode] aside.left-panel > section.links > .content ul.categories li {
            display: n i
        }
    }

    if (comments_padding) {
        [data-night-mode] section.entry > .comments {
            padding: 10px 0 0 comments_padding
        }
    }

    if (comments_font_size) {
        [data-night-mode] section.entry-content {
            font-size: comments_font_size
        }
    }

    if (push_image_right) {
        [data-night-mode] section.home-page section.link-block > section > article, [data-night-mode] section.upcoming-page section.link-block > section > article {
            padding: 24px 260px 25px 0 i
        }

        [data-night-mode] section.home-page section.link-block > section > article figure, [data-night-mode] section.upcoming-page section.link-block > section > article figure {
            right: 16px i
            left: inherit i
        }
    }

    if (comments_font_size) {
        [data-night-mode] main.main[data-theme='default'] > section, [data-night-mode] main.main[data-theme='default'] > aside.wide-top {
            max-width: home_width
        }
    }

    if (left_panel_width) {
        [data-night-mode] aside.left-panel {
            width: left_panel_width
            top: calc(74px + 6px)
												box-shadow: n
												-webkit-box-shadow: n
        }
    }

    if (hide_ads) {
        html body section.pub-slot-wrapper > *, html body section.pub-slot-wrapper[class*='sponsored'], html body section.pub-slot-wrapper[class*='market'], html body section.pub-slot-wrapper.top, html body section.pub-slot-wrapper.sidebar-1, html body section.pub-slot-wrapper {
            display: n i
        }
    }

    if (hide_corners) {
        aside, section, button, .button, ul > li, a, span, div, p, img, input, :before, :after {
            border-radius: 0 i
        }
    }

    if (comment_image_size) {
        [data-night-mode] section.entry-photo figure {
            max-width: comment_image_size
        }
    }

    if (floating_button_off) {
        [data-night-mode] ul.floating-btn, [data-night-mode] .onboarding-btn {
            display: n i
        }
    }

    [data-night-mode] aside.doodle > * img {
        display: b
    }

    [data-night-mode] section.entry-voters {
        display: b
    }

    [data-night-mode] aside.hits-slider {
        display: b
    }

    [data-night-mode] aside.left-panel > section.links > .content ul.categories li {
        display: b
    }

    [data-night-mode] section.home-page section.link-block > section > article, [data-night-mode] section.upcoming-page section.link-block > section > article {
        padding: 24px 10px 25px 260px
    }

    [data-night-mode] section.home-page section.link-block > section > article figure, [data-night-mode] section.upcoming-page section.link-block > section > article figure {
        right: inherit
        left: 16px
    }

    aside, section, button, .button, ul > li, a, span, div, p, img, input, :before, :after {
        border-radius: 6px
    }

    html body section.pub-slot-wrapper > *, html body section.pub-slot-wrapper[class*='sponsored'], html body section.pub-slot-wrapper[class*='market'], html body section.pub-slot-wrapper.top, html body section.pub-slot-wrapper.sidebar-1, html body section.pub-slot-wrapper {
        display: b
    }

    [data-night-mode] ul.floating-btn, [data-night-mode] .onboarding-btn {
        display: b
    }

    body {
        font-family: font i
        -webkit-font-smoothing: subpixel-antialiased
        -moz-osx-font-smoothing: grayscale
    }

    input, button, select, textarea {
        font-family: font i
    }

    [data-night-mode] .burgundy-profile {
        color: ui_user_red i
    }

    [data-night-mode] .orange-profile {
        color: ui_user_orange i
    }

    [data-night-mode] .green-profile {
        color: ui_user_green i
    }

    [data-night-mode] section.entry > article > header > div.right > div a.username {
        font-weight: 600
        font-size: 14px i
    }

    [data-night-mode] .header {
        position: sticky i
        color: bg_secondary i
        height: 60px i
        box-shadow: 0px 25px 20px -20px rgba(0, 0, 0, 0.5)
    }

    [data-night-mode] header.header > .left > a.logotype, [data-night-mode] header.header > .left > a.logo {
        background: ui_primary i
    }

    [data-night-mode] header.header {
        position: relative
    }

    [data-night-mode] header.header:after {
        content: autor
        position: absolute
        color: ui_font_primary
        top: 44px
        left: 117px
        font-size: 8px
        font-weight: 500
    }

    [data-night-mode] header.header > .left > nav.main > ul li a + strong {
        background: ui_primary i
        box-shadow: n i
    }

    [data-night-mode] header.header > .left > nav.main > ul li.active a {
        background: t i
        border-bottom: 2px solid ui_primary
        border-radius: 0
    }

    [data-night-mode] header.header > .left > nav.main > ul li:hover a {
        background-color: bg_hover i
    }

    [data-night-mode] header.header > .left > button {
        background: bg_hover i
    }

    [data-night-mode] body > section.open-left-panel:not(.is-mobile) main.main {
        max-width: calc(100% - 300px - 6px)
    }

    [data-night-mode] main.main[data-theme='default'] > section > .content {
        width: calc(100% - 350px - 20px)
    }

    [data-night-mode] section.sidebar {
        width: 350px i
    }

    [data-night-mode] main.main > section {
        margin: 0 auto 0 auto i
    }

    [data-night-mode] section.sidebar > * + * {
        margin-top: 0px i
        margin-bottom: 10px
    }

    [data-night-mode] aside.left-panel, [data-night-mode] section.sidebar, [data-night-mode] section.link-page, [data-night-mode] section.messages-page, [data-night-mode] section.bucket-create-page, [data-night-mode] section.bucket-page, [data-night-mode] section.search-page {
        margin-top: 20px
    }

    [data-night-mode] main.main[data-theme='default'] > aside.wide-top {
        margin: 20px auto 20px auto
    }

    [data-night-mode] header.stream-top {
        padding: 20px 0 0 i
    }

    [data-night-mode] aside.left-panel > section.links > .content ul li.active a:before {
        background: ui_white i
    }

    [data-night-mode] aside.left-panel > section.links > .content ul li.active a > span {
        background: bg_hover i
        font-weight: 500 i
        color: ui_white i
    }

    [data-night-mode] aside.left-panel > section.links > .content ul li i {
        background: ui_font_primary i
    }

    [data-night-mode] aside.left-panel > section.links > .content ul li:hover:not(.active) a > span {
        background: bg_hover i
    }

    [data-night-mode] section.search-input form > label {
        background: ui_font_primary i
    }

    [data-night-mode] section.search-input form > input[type='search'] {
        color: ui_font_primary i
        background: bg_hover i
        border: 1px solid bg_hover i
    }

    [data-night-mode] section.search-input form > input[type='search']::placeholder {
        ...