UserStyles.world Tweaks by mestikon-agency

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