UserStyles.world Tweaks by vednoc

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

UserStyles.world Tweaks screenshot
Homepage Install Get Stylus Write a review

Details

Authorvednoc

LicenseMIT

Created

Updated

Categoryuserstyles

Statistics

Learn how we calculate statistics in the FAQ.

Total views

Total installs

Weekly installs

Description

Various tweaks for UserStyles.world that might end up being upstreamed.

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.

History

Daily snapshots of style statistics.

No style history. Come back in a couple of days.

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
@updateURL    https://github.com/userstyles-world/tweaks/raw/main/tweaks.user.styl
@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.