Readeck - custom colors by tidy-easy-stockade

/* ==UserStyle==
@name         Readeck - custom colors
@version      20250309.15.14
@namespace    userstyles.world/user/tidy-easy-stockade
@description  Custom colors for Readeck.
@author       tidy-easy-stockade
@license      Copyleft
@preprocessor stylus

@var color baseColor "Base Theme Color" #191f23
==/UserStyle== */

adjustColor(color, percent)
	isLight = lightness(color) > 50
	if isLight
		darken(color, percent)
	else
		lighten(color, percent)

@-moz-document regexp("https?://(.*\\.)?readeck(-\\w+)*\\..*")
	accentColor = complement(baseColor)

	:root
		&.dark,
		&.light
			--color-app-bg: adjustColor(baseColor, 5%)
			--color-app-fg: adjustColor(baseColor, 80%)
			--color-gray-200: adjustColor(baseColor, 3%)
				
			--default-shadow: darken(baseColor, 10%)

	.bg-app-bg
		background-color: adjustColor(baseColor, 3%)
		
		&.text-app-fg
			color: adjustColor(baseColor, 80%)
		
		hr
			border-color: adjustColor(baseColor, 10%)
		
		.btn-group
			color: adjustColor(accentColor, 60%)
			border-color: currentColor
		
		.btn-outlined
			color: currentColor
			
			&:hover
				background-color: adjustColor(accentColor, 20%)
				color: adjustColor(accentColor, 80%)
		
		.btn-primary
			background-color: adjustColor(accentColor, 10%)
			color: adjustColor(accentColor, 80%)
			border: 1px solid adjustColor(accentColor, 15%)
			
			&:hover
				background-color: adjustColor(accentColor, 20%)
				color: adjustColor(accentColor, 80%)
				border-color: adjustColor(accentColor, 20%)
			
			svg
				color: adjustColor(accentColor, 80%)
		
		.btn-danger
			color: adjustColor(accentColor, 60%)
			border-color: adjustColor(accentColor, 60%)
			
			&:hover
				background-color: adjustColor(accentColor, 20%)
				color: adjustColor(accentColor, 80%)
				border-color: adjustColor(accentColor, 20%)
		
		.form-input
			background-color: adjustColor(baseColor, 5%)
			border-color: adjustColor(baseColor, 10%)
			
			&:focus-within
				background-color: adjustColor(baseColor, 8%)
			
			input
				--tw-ring-color: adjustColor(baseColor, 10%)
					
				&:focus-visible
					background-color: transparent
		
		.link
			color: adjustColor(baseColor, 60%)
			
			&:hover
				color: adjustColor(accentColor, 60%)				
			
		.prose a
			color: adjustColor(accentColor, 40%)
		
		.layout-topnav
			background-color: adjustColor(baseColor, 1%)
					
		.to-app-bg
			background-color: adjustColor(baseColor, 2%)
			background-image: none
			border-bottom-color: adjustColor(baseColor, 10%)
		
		.sidemenu
			background-color: adjustColor(baseColor, 5%)
			background-image: none
			
			#sidemenu-title
				border-bottom-color: adjustColor(baseColor, 10%)
		
			menu
				a
					&[data-current="true"]
						color: adjustColor(accentColor, 60%)
						border-color: currentColor
						
						.count
							background-color: adjustColor(accentColor, 10%)
							color: inherit
					
					.count
						background-color: adjustColor(baseColor, 10%)
						color: adjustColor(baseColor, 60%)
		
		.bookmark-content
			.bookmark-topbar
				background-color: adjustColor(baseColor, 3%)
				border-bottom-color: adjustColor(baseColor, 10%)

				progress
					&::-moz-progress-bar,
					&::-webkit-progress-value
						--tw-gradient-from: adjustColor(accentColor, 80%)
						--tw-gradient-to: adjustColor(accentColor, 40%)
			
			.bookmark-header
				p
					display: none
			
		.bookmark-card
			&--actions
				color: adjustColor(baseColor, 30%)
					
		.bookmark-sidebar
			border-left-color: adjustColor(baseColor, 10%)
			
			.bg-app-bg
				border-bottom-color: adjustColor(baseColor, 10%)