Miniflux - custom colors by tidy-easy-stockade

/* ==UserStyle==
@name         Miniflux - custom colors
@version      20250309.08.25
@namespace    userstyles.world/user/tidy-easy-stockade
@description  Custom colors for Miniflux.
@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?://(.*\\.)?miniflux(-\\w+)*\\..*")
	accentColor = complement(baseColor)

	:root
		--body-background: adjustColor(baseColor, 0%)
		--body-color: adjustColor(baseColor, 80%)

		--logo-color: adjustColor(baseColor, 80%)

		--title-color: adjustColor(baseColor, 80%)
		--subtitle-color: adjustColor(baseColor, 70%)
		--page-header-title-border-color: adjustColor(baseColor, 45%)

		--link-color: adjustColor(baseColor, 80%)
		--link-hover-color: adjustColor(accentColor, 80%)
		--header-link-color: adjustColor(baseColor, 80%)
		--header-link-hover-color: adjustColor(accentColor, 60%)
		--header-link-focus-color: adjustColor(accentColor, 80%)
		--header-active-link-color: adjustColor(accentColor, 60%)

		/* Alerts */
		--alert-background-color: adjustColor(baseColor, 10%)
		--alert-color: adjustColor(baseColor, 80%)
		--alert-border-color: adjustColor(baseColor, 15%)
		
		--alert-success-background-color: adjustColor(accentColor, 10%)
		--alert-success-color: adjustColor(accentColor, 80%)
		--alert-success-border-color: adjustColor(accentColor, 15%)
		
		--alert-error-background-color: adjustColor(accentColor, 10%)
		--alert-error-color: adjustColor(accentColor, 80%)
		--alert-error-border-color: adjustColor(accentColor, 15%)

		/* Feed Item */
		--item-status-read-title-link-color: adjustColor(baseColor, 40%)
		--item-border-color: adjustColor(baseColor, 30%)
		--category-background-color: adjustColor(baseColor, 8%)
		--category-color: adjustColor(baseColor, 80%)
		--category-link-color: adjustColor(baseColor, 80%)
		--category-border-color: adjustColor(baseColor, 20%)
		--item-meta-focus-color: adjustColor(baseColor, 60%)
		
		/* Feed Parsing Error */
		--feed-parsing-error-background-color: adjustColor(accentColor, 5%)
		--feed-parsing-error-border-color: adjustColor(accentColor, 15%)
		
		/* Feed Has Unread */
		--feed-has-unread-background-color: adjustColor(baseColor, 3%)
		--feed-has-unread-border-color: adjustColor(baseColor, 15%)

		/* Miniflux.app */		
		--dt-color: adjustColor(baseColor, 60%)
		--dd-color: adjustColor(baseColor, 70%)
			
		/* Settings */
		--input-background: adjustColor(baseColor, 5%)
		--input-color: adjustColor(baseColor, 80%)
		--input-border: adjustColor(baseColor, 10%)
		
		--button-primary-background: adjustColor(baseColor, 10%)
		--button-primary-color: adjustColor(baseColor, 80%)
		--button-primary-border-color: adjustColor(baseColor, 20%)
			
		--table-th-background: adjustColor(baseColor, 5%)
		--table-th-color: adjustColor(baseColor, 80%)
		--table-border-color: adjustColor(baseColor, 10%)
			
		--table-tr-hover-background-color: adjustColor(baseColor, 10%)
		--table-tr-hover-color: adjustColor(baseColor, 80%)
			
		--panel-background: adjustColor(baseColor, 5%)
		--panel-color: adjustColor(baseColor, 80%)
		--panel-border-color: adjustColor(baseColor, 10%)

	body
		padding: 0 1em
	
	.confirm
		&, button
			color: adjustColor(accentColor, 60%)
		
		button
			&:hover
				color: adjustColor(accentColor, 80%)
	
	h1, h2
		padding-bottom: .5em
		border-bottom: 1px dotted var(--page-header-title-border-color)

	.header
		.logo
			span
				color: adjustColor(accentColor, 60%)

		ul
			list-style-type: none;
			
			li
				a
					&:hover
						color: adjustColor(accentColor, 80%)
			
	.page-header
		nav
			margin-top: 1em
					
	.items
		margin: 1em 0
		
		.item
			padding: .5em
			
			h1, h2
				padding-bottom: 0
				border-bottom: none
			
			&-meta
				font-size: .85em
				
				a
					color: adjustColor(accentColor, 60%)
				
				:is(a:is(:focus, :hover), button:is(:focus, :hover))
					color: adjustColor(accentColor, 80%)
				
				&-info
					font-size: inherit
					margin-top: .5em
					
				&-icons
					margin-top: .5em
					
					li
						> :is(a, button)
							color: adjustColor(baseColor, 60%)
							font-size: inherit

	dd
		border-color: currentColor
							
	/* Settings */
	fieldset
		border-color: adjustColor(baseColor, 30%)
		
		&:focus-within
			border-color: adjustColor(accentColor, 30%)
	
	.form-help
		color: adjustColor(accentColor, 60%)