├── .editorconfig ├── license ├── readme.org └── tweaks.user.styl /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | indent_size = 4 8 | indent_style = space 9 | insert_final_newline = true 10 | trim_trailing_whitespace = true 11 | 12 | [*.md] 13 | indent_size = 2 14 | trim_trailing_whitespace = false 15 | -------------------------------------------------------------------------------- /license: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 vednoc 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /readme.org: -------------------------------------------------------------------------------- 1 | #+STARTUP: nofold 2 | #+HTML:
3 | 4 | * UserStyles.world Tweaks 5 | Various tweaks for UserStyles.world platform. 6 | 7 | [[https://github.com/userstyles-world/tweaks/releases][https://img.shields.io/github/v/tag/userstyles-world/tweaks.svg?label=version&style=flat]] 8 | [[https://github.com/userstyles-world/tweaks/stargazers][https://img.shields.io/github/stars/userstyles-world/tweaks.svg?style=flat]] 9 | [[https://github.com/userstyles-world/tweaks/network][https://img.shields.io/github/forks/userstyles-world/tweaks.svg?color=007ec6&style=flat]] 10 | [[https://raw.githubusercontent.com/userstyles-world/tweaks/main/tweaks.user.styl][https://img.shields.io/badge/Install%20directly%20with-Stylus-116b59.svg?longCache=true&style=flat]] 11 | 12 | #+HTML: 13 | #+HTML:
14 | 15 | ** About 16 | This userstyle serves as an example of what is possible with Stylus (and 17 | Stylus-lang preprocessor), as well as some additional — opinionated — tweaks 18 | that can be applied to UserStyles.world platform. 19 | 20 | More information is available on [[https://github.com/openstyles/stylus/wiki/Writing-UserCSS][OpenStylus/Stylus/Writing UserCSS]] wiki. 21 | 22 | ** Installation 23 | You have to install [[https://add0n.com/stylus.html][Stylus]] and then click on the install link below. 24 | 25 | [[https://raw.githubusercontent.com/userstyles-world/tweaks/main/tweaks.user.styl][https://img.shields.io/badge/Install%20directly%20with-Stylus-116b59.svg?longCache=true&style=flat]] 26 | 27 | ** Contributing 28 | If you have any feature requests, feel free to open an issue. 29 | 30 | ** License 31 | Code released under the [[license][MIT]] license. 32 | -------------------------------------------------------------------------------- /tweaks.user.styl: -------------------------------------------------------------------------------- 1 | /* ==UserStyle== 2 | @name UserStyles.world Tweaks 3 | @namespace userstyles.world 4 | @description Various tweaks for UserStyles.world that might end up being upstreamed. 5 | @author vednoc (https://github.com/vednoc) 6 | @homepageURL https://github.com/userstyles-world/tweaks 7 | @supportURL https://github.com/userstyles-world/tweaks/issues 8 | @updateURL https://github.com/userstyles-world/tweaks/raw/main/tweaks.user.styl 9 | @preprocessor stylus 10 | @version 1.4.2 11 | @license MIT 12 | 13 | @var checkbox colors 'Force dark mode' 0 14 | @var checkbox oldDark 'Old dark mode colors' 0 15 | @var checkbox navbar 'Enable sticky navbar' 1 16 | @var checkbox blurry 'Enable blurry navbar style' 0 17 | @var checkbox stylus 'Enable "Get Stylus" button' 1 18 | @var checkbox newBars 'Enable new styles for nav/footer bars' 0 19 | @var checkbox version 'Show userstyle version in the footer' 1 20 | @var checkbox monitor 'Enable tweaks for Monitor page' 1 21 | ==/UserStyle== */ 22 | 23 | // This userstyle uses Stylus-lang preprocessor. 24 | // Complete preprocessor documentation at: https://stylus-lang.com 25 | // Writing UserCSS: https://github.com/openstyles/stylus/wiki/Writing-UserCSS 26 | 27 | @-moz-document domain("userstyles.world") { 28 | // Stylus-lang helper variables. 29 | i = !important 30 | 31 | // Dark mode color variables. 32 | darkModeColors = @block { 33 | --bg-1: (oldDark) ? #101010 : #1a1a1a 34 | --bg-2: (oldDark) ? #1d1d1d : #272727 35 | --bg-3: (oldDark) ? #2a2a2a : #343434 36 | --bg-4: (oldDark) ? #363636 : #404040 37 | --bg-5: (oldDark) ? #434343 : #4d4d4d 38 | --fg-1: (oldDark) ? #dddddd : #dddddd 39 | --fg-2: (oldDark) ? #bebebe : #bebebe 40 | --fg-3: (oldDark) ? #a0a0a0 : #a0a0a0 41 | --fg-4: (oldDark) ? #818181 : #919191 42 | --fg-5: (oldDark) ? #636363 : #636363 43 | --ac-1: (oldDark) ? #679cd0 : #679cd0 44 | --ac-2: (oldDark) ? #3673af : #3673af 45 | --ac-3: (oldDark) ? #2d5f90 : #2d5f90 46 | --ac-4: (oldDark) ? #234a71 : #234a71 47 | --ac-5: (oldDark) ? #193652 : #193652 48 | } 49 | 50 | // Embed userstyle version. 51 | :root { 52 | --version: 'UserStyles.world Tweaks v1.4.1' 53 | 54 | // Feat -> Force dark mode. 55 | if colors { 56 | { darkModeColors } 57 | } 58 | 59 | // Feat -> Old dark mode colors. 60 | if oldDark { 61 | @media (prefers-color-scheme: dark) { 62 | { darkModeColors } 63 | } 64 | } 65 | } 66 | 67 | // Feat -> Sticky navbar. 68 | if navbar { 69 | nav { 70 | position: sticky 71 | z-index: 9 72 | top: 0 73 | } 74 | } 75 | 76 | // Feat -> Blurry navbar. 77 | if blurry { 78 | @supports (backdrop-filter: blur()) or (-webkit-backdrop-filter: blur()) { 79 | // Setting class conditionally. Interop new- and old-bar styles. 80 | class = (newBars) ? '> div[class]' : () 81 | check = (colors == 1 && oldDark == 1) 82 | forceDark = (check) ? i : () 83 | 84 | // Generate it. 85 | nav { class } { 86 | $c = (check) ? #1d1d1d : #272727 87 | background-color: transparentify($c, $c, 0.8) forceDark 88 | backdrop-filter: blur(4px) saturate(150%) 89 | -webkit-backdrop-filter: blur(4px) saturate(150%) 90 | 91 | @media (prefers-color-scheme: light) { 92 | $c = #dadada 93 | background-color: transparentify($c, $c, 0.8) 94 | } 95 | } 96 | } 97 | } 98 | 99 | // Feat -> Stylus button. 100 | if !stylus { 101 | #stylus { display: none } 102 | } 103 | 104 | // Feat -> New nav/footer styles. 105 | if newBars { 106 | r = var(--br-2) // helper 107 | 108 | nav { 109 | border: none 110 | background: none 111 | 112 | > div { 113 | padding-top: 0 i 114 | padding-bottom: 0px i 115 | border-radius: 0 0 r r 116 | background-color: var(--bg-2) 117 | box-shadow: 0 0 0 1px var(--bg-1) 118 | 119 | > * { padding: 1rem 0 } 120 | } 121 | } 122 | } 123 | 124 | // Feat -> Show userstyle version in footer. 125 | if version { 126 | .Footer .about { 127 | margin-top: 2rem 128 | 129 | &::before { 130 | margin-top: -2rem 131 | position: absolute 132 | width: max-content 133 | content: var(--version) 134 | } 135 | } 136 | } 137 | } 138 | 139 | @-moz-document url-prefix("https://userstyles.world/monitor") { 140 | // Feat -> Tweaks for Monitor page. 141 | if monitor { 142 | // Change styles. 143 | body > .wrapper { 144 | padding: 30px 8px 145 | 146 | .row { 147 | padding-top: 20px 148 | align-items: flex-start 149 | border-top: 1px solid #eee 150 | } 151 | } 152 | 153 | // Responsive mode. 154 | @media (max-width: 640px) { 155 | h2 { width: 100% } 156 | .row { 157 | flex-direction: column i 158 | align-items: center i 159 | text-align: center i 160 | 161 | // Fix 'memory usage' text. 162 | .column:first-child { width: unset } 163 | } 164 | } 165 | 166 | // Dark mode tweaks. 167 | @media (prefers-color-scheme: dark) { 168 | // Always apply dark mode colors. 169 | :root { 170 | { darkModeColors } 171 | scrollbar-color: var(--bg-5) var(--bg-2) 172 | } 173 | 174 | body { 175 | color: var(--fg-1) 176 | background-color: var(--bg-1) 177 | 178 | .wrapper { 179 | .row { border-color: var(--bg-3) } 180 | .metric { color: var(--fg-5) } 181 | } 182 | 183 | // Invert colors for graphs. 184 | canvas { filter: invert() hue-rotate(180deg) } 185 | } 186 | } 187 | } 188 | } 189 | --------------------------------------------------------------------------------