UserStyles.world Tweaks by vednoc

/* ==UserStyle==
@name         UserStyles.world Tweaks
@namespace    userstyles.world
@description  Various tweaks for UserStyles.world that might end up being upstreamed.
@author       vednoc <vednoc@pm.me> (https://github.com/vednoc)
@homepageURL  https://github.com/userstyles-world/tweaks
@supportURL   https://github.com/userstyles-world/tweaks/issues
@preprocessor stylus
@version      1.4.2
@license      MIT

@var checkbox colors  'Force dark mode' 0
@var checkbox oldDark 'Old dark mode colors' 0
@var checkbox navbar  'Enable sticky navbar' 1
@var checkbox blurry  'Enable blurry navbar style' 0
@var checkbox stylus  'Enable "Get Stylus" button' 1
@var checkbox newBars 'Enable new styles for nav/footer bars' 0
@var checkbox version 'Show userstyle version in the footer' 1
@var checkbox monitor 'Enable tweaks for Monitor page' 1
==/UserStyle== */

// This userstyle uses Stylus-lang preprocessor.
// Complete preprocessor documentation at: https://stylus-lang.com
// Writing UserCSS: https://github.com/openstyles/stylus/wiki/Writing-UserCSS

@-moz-document domain("userstyles.world") {
    // Stylus-lang helper variables.
    i = !important

    // Dark mode color variables.
    darkModeColors = @block {
        --bg-1: (oldDark) ? #101010 : #1a1a1a
        --bg-2: (oldDark) ? #1d1d1d : #272727
        --bg-3: (oldDark) ? #2a2a2a : #343434
        --bg-4: (oldDark) ? #363636 : #404040
        --bg-5: (oldDark) ? #434343 : #4d4d4d
        --fg-1: (oldDark) ? #dddddd : #dddddd
        --fg-2: (oldDark) ? #bebebe : #bebebe
        --fg-3: (oldDark) ? #a0a0a0 : #a0a0a0
        --fg-4: (oldDark) ? #818181 : #919191
        --fg-5: (oldDark) ? #636363 : #636363
        --ac-1: (oldDark) ? #679cd0 : #679cd0
        --ac-2: (oldDark) ? #3673af : #3673af
        --ac-3: (oldDark) ? #2d5f90 : #2d5f90
        --ac-4: (oldDark) ? #234a71 : #234a71
        --ac-5: (oldDark) ? #193652 : #193652
    }

    // Embed userstyle version.
    :root {
        --version: 'UserStyles.world Tweaks v1.4.1'

        // Feat -> Force dark mode.
        if colors {
            { darkModeColors }
        }

        // Feat -> Old dark mode colors.
        if oldDark {
            @media (prefers-color-scheme: dark) {
                { darkModeColors }
            }
        }
    }

    // Feat -> Sticky navbar.
    if navbar {
        nav {
            position: sticky
            z-index: 9
            top: 0
        }
    }

    // Feat -> Blurry navbar.
    if blurry {
        @supports (backdrop-filter: blur()) or (-webkit-backdrop-filter: blur()) {
            // Setting class conditionally. Interop new- and old-bar styles.
            class = (newBars) ? '> div[class]' : ()
            check = (colors == 1 && oldDark == 1)
            forceDark = (check) ? i : ()

            // Generate it.
            nav { class } {
                $c = (check) ? #1d1d1d : #272727
                background-color: transparentify($c, $c, 0.8) forceDark
                backdrop-filter: blur(4px) saturate(150%)
                -webkit-backdrop-filter: blur(4px) saturate(150%)

                @media (prefers-color-scheme: light) {
                    $c = #dadada
                    background-color: transparentify($c, $c, 0.8)
                }
            }
        }
    }

    // Feat -> Stylus button.
    if !stylus {
        #stylus { display: none }
    }

    // Feat -> New nav/footer styles.
    if newBars {
        r = var(--br-2) // helper

        nav {
            border: none
            background: none

            > div {
                padding-top: 0 i
                padding-bottom: 0px i
                border-radius: 0 0 r r
                background-color: var(--bg-2)
                box-shadow: 0 0 0 1px var(--bg-1)

                > * { padding: 1rem 0 }
            }
        }
    }

    // Feat -> Show userstyle version in footer.
    if version {
        .Footer .about {
            margin-top: 2rem

            &::before {
                margin-top: -2rem
                position: absolute
                width: max-content
                content: var(--version)
            }
        }
    }
}

@-moz-document url-prefix("https://userstyles.world/monitor") {
    // Feat -> Tweaks for Monitor page.
    if monitor {
        // Change styles.
        body > .wrapper {
            padding: 30px 8px

            .row {
                padding-top: 20px
                align-items: flex-start
                border-top: 1px solid #eee
            }
        }

        // Responsive mode.
        @media (max-width: 640px) {
            h2 { width: 100% }
            .row {
                flex-direction: column i
                align-items: center i
                text-align: center i

                // Fix 'memory usage' text.
                .column:first-child { width: unset }
            }
        }

        // Dark mode tweaks.
        @media (prefers-color-scheme: dark) {
            // Always apply dark mode colors.
            :root {
                { darkModeColors }
                scrollbar-color: var(--bg-5) var(--bg-2)
            }

            body {
                color: var(--fg-1)
                background-color: var(--bg-1)

                .wrapper {
                    .row { border-color: var(--bg-3) }
                    .metric { color: var(--fg-5) }
                }

                // Invert colors for graphs.
                canvas { filter: invert() hue-rotate(180deg) }
            }
        }
    }
}