Skip to content

UserStyles.world Tweaks by vednoc

Imported and mirrored from https://raw.githubusercontent.com/userstyles-world/tweaks/main/tweaks.user.styl

Screenshot of UserStyles.world Tweaks

Details

Authorvednoc

LicenseMIT

Categoryuserstyles.world

Created

Updated

Size5.7 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Various tweaks for UserStyles.world that might end up being added upstream.

Notes

After you install this userstyle, you can configure it from configuration menu in Stylus' popout menu by clicking on the icon on your toolbar.

Source code

/* ==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) }
            }
        }
    }
}

Reviews

No reviews yet.