UserStyles.world Tweaks by vednoc

Imported 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 atApril 01, 2021 23:44

Updated atAugust 27, 2021 23:27

Applies touserstyles.world

Statistics

Learn how we calculate statistics in the FAQ.

Total views900

Total installs1647

Weekly installs163

Weekly updates151

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.

2021-07-072021-07-172021-07-262021-08-042021-08-132021-08-222021-08-312021-09-092021-09-182021-09-272021-10-062021-10-15Date0.0017.0033.0049.0065.0082.0098.00114.00130.00Daily countDaily installsDaily updatesDaily views
2021-07-072021-07-172021-07-272021-08-062021-08-162021-08-262021-09-052021-09-152021-09-252021-10-052021-10-15Date0.00220.00430.00640.00850.001070.001280.001490.001700.00Total countTotal installsTotal views

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://userstyles.world/api/style/1.user.css
@preprocessor stylus
@version      1.4.1
@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"), regexp("https?://localhost(:[0-9]+)?/.*") {
    // 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 regexp("https?://(userstyles.world|localhost)(:[0-9]+)?/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

azhe403 reviewed and gave 5/5 ⭐ on October 02, 2021 at 08:52
Love a fixed navbar
thomasbnt reviewed and gave 5/5 ⭐ on August 11, 2021 at 14:00
Love the blur on the navbar 💪🏼
vednoc reviewed and gave 5/5 ⭐ on July 18, 2021 at 00:58
Testing style review functionality. More to come soon. (=