Cleaner Stylus by freeplay

/* ==UserStyle==
@name           Cleaner Stylus
@version        1.4.0
@description    Makes the Stylus extension look a bit nicer!
@preprocessor   stylus

 -- AUTHOR STUFF --
@namespace      Freeplay
@author         Freeplay (https://freeplay.codeberg.page/)
@homepageURL    https://codeberg.org/Freeplay/UserStyles
@supportURL     https://codeberg.org/Freeplay/UserStyles/issues
==/UserStyle== */

@-moz-document url-prefix("moz-extension://"), url-prefix("chrome-extension://") {
	#stylus-manage, #stylus-popup, #stylus {
		transition background-color .2s
		--border 1px solid rgba(150,150,150,.2)
		button, #find-styles-link {
			border-color: rgba(0,0,0,0.1) !important;
			border-radius: 4px !important;
			&:not(#save-button) {
				padding: 8px 14px !important;
			}
			background-image: none;
			height: auto !important;
			width unset !important
			transition background-color .2s
		}
		.split-btn {
			display flex
			position relative
			// border-ra
			button:first-of-type {
				border-top-right-radius 0 !important
				border-bottom-right-radius 0 !important
				flex-grow 1
			}
			button:last-of-type {
				border-top-left-radius 0 !important
				border-bottom-left-radius 0 !important
				padding-inline 12px !important
				&::after {
					// margin-bottom 1px
				}
			}
		}
		.split-btn-menu {
			box-shadow 0 4px 12px rgba(0,0,0,.1) !important
			border-radius 6px
			border 0
			margin-bottom 18px !important
			left 0
			right 0
		}
		.filter-selection {
			// margin 0 !important
			inset unset !important
			border-radius 6px
			overflow hidden
			display flex
			align-items center
			// background-color rgba(100,100,100,0.05)
			border var(--border)

			margin-bottom 4px
			> label {
				// padding 12px
				height 2.5em !important
				padding-right 6px
				border-right var(--border)
			}
			.select-resizer {
				position relative
				inset unset
				flex-grow 1
				// padding 7px
				height 2.5em
				align-items center
				padding-bottom 2px
				box-sizing border-box
				select {
					margin-left 0 !important
					padding-left 2px
					position absolute
					inset 0 !important
					height unset
					width 100% !important
				}
				svg {
					top unset
					right .5em
				}
				&:hover, &:focus {
					background-color rgba(100,100,100,0.1)
				}
			}
		}
		.sorter-selection {
			height 2.5em
			align-items center
			select {
				height 100%
				padding-inline .4em
			}
			svg {
				top unset
				right .5em
			}
		}
		input, select {
			border: var(--border) !important;
			border-radius: 4px !important;
		}
		.checkbox-wrapper {
			height max-content
			align-self center
		}
		.checkbox-container {
			margin-right .5em
		}
		.filter-selection .select-resizer > select {
			border: none !important;
		}
		.svg-icon.checked {
			transform: scale(1.7) translate(1px,-1.5px) !important;
		}
		#header {
			box-shadow: 2px 0 24px rgba(0,0,0,0.07);
		}
		#header-resizer {
			opacity 0
			&:hover {
				opacity 1
			}
		}

		.menu-items-wrapper, #message-box > div, #confirm, #stylus-options {
			border: none;
			border-radius: 6px;
			overflow: hidden;
			#options-title {
				border-top-left-radius: 6px;
				border-top-right-radius: 6px;
				overflow: hidden;
			}
			#options {
				border-bottom-left-radius: 6px;
				border-bottom-right-radius: 6px;
			}
		}
		.colorview-swatch {
			border: 1px solid rgba(0, 0, 0, 0.1) !important;
			border-radius: 4px !important;
		}
		a.color-swatch {
			border: none;
			border-radius: 4px !important;
			margin: 4px;
			box-sizing: border-box;
			bottom: 0;
			right: 0;
			height: 12px !important;
			width: 52px !important;
		}
		
		.select-resizer > select, #only-updates > span {
			margin-left: 4px !important;
		}
		
		
		#installed {
			padding-top: 4px;
			padding-bottom: 4px;
			border-bottom: none;
			border 0 !important
			.entry {
				position relative
				margin: 0 4px;
				background-color: transparent;
				border-radius: 6px;
				overflow: hidden;
				// border-bottom: 1px solid rgba(0,0,0,.07);
				transition background-color .2s
				&:not(:first-of-type)::after {
					content: "";
					position: absolute;
					left: 10px;
					right: 10px;
					top: 0px;
					border-bottom: var(--border);
					
				}
				&:hover {
					background-color: hsla(180, 50%, 30%, 0.1);
					&::after, & + .entry::after {
						opacity 0
					}
				}
				.entry-content {
					height: auto;
					.style-name {
						padding: 0px;
						padding-left: 30px;
						&::before {
							background: transparent;
						}
						.checker, .svg-icon.checked {
							top: 7.5px !important;
						}
					}
				}
			}
		}
		
	}
	#stylus-install-usercss {
		#header {
			padding 20px
		}
		#header-contents {
			#install-wrapper {
				display flex
				flex-wrap wrap
				align-items center
				.install {
					flex-grow 1
					margin-right 1em
					padding-right 3em !important
				}
			}
			.meta-description {
				font-size 1.1em
				margin 0
			}
		}
		
	}
	#stylus-manage, #stylus-install-usercss {
		#header {
			background inherit
			padding 24px 18px
			box-shadow none
			// border-bottom 6px solid #339999
			// border-bottom-right-radius 10px
			h1 {
				opacity .9
				
			}
			button {
				// flex-grow 1
				margin-right 6px
				.split-btn > ^[-1..-1]:first-child {
					margin-right 0 !important
				}
				
			}
			#search-help, #sorter-help {
				margin 0
				margin-left .4em
				align-self center
			}
			details {
				padding 12px
				// padding-bottom 0
				border var(--border)
				border-radius 6px
				overflow hidden
				margin-block 20px !important
				box-shadow 0 8px 24px rgba(0,0,0,0.04)
				// background-color white
				background-color rgba(255,255,255,0.03)
				&::marker {
					position absolute
					right 0
				}
				summary {
					margin 0
					// border-bottom var(--border)
					margin -12px !important
					// margin-bottom 0 !important
					padding-top 12px !important
					padding-inline 16px !important
					& + * {
						margin-top 12px
					}
					// margin-bottom 12px !important
					// padding 0
					padding 8px 12px
					// background-color rgba(100,100,100,0.03)
					h2 {
						font-size 1.2em
						// font-weight 500
						margin-left .2em
						text-transform uppercase
						font-size .85em
						opacity .8
					}
				}
			}
			#search-wrapper {
				display flex
				flex-wrap wrap
				align-items center
				width 100%
				input, select {
					padding .4em
					padding-right 16px
					height 2.5em
					width 100%
					
				}
				.select-wrapper {
					display flex
					align-items center
					flex-grow 1
					margin-top 6px
					// width 100%
					select {
						width 100% !important
					}
					svg {
						top unset !important
						margin-top 1px
						right 6px
					}
				}
			}
			
		}
		#manage-text {
			line-height 2
			text-underline-offset .3em
			letter-spacing .05em
			opacity .85
			span {
				&::after {
					content: "/"
					margin-inline 1em !important
				}
			}
			
		}
	}
	.oldUI #stylus-manage #installed {
		max-width: 100%;
		.entry {
			margin: 20px;
			max-width: 100%;
			box-sizing: border-box;
			// border-radius: 0;
			border: 1px solid rgba(0,0,0,0.07);
			background: none !important;
			transition: box-shadow .2s;
			&:hover {
				box-shadow: 0 8px 24px rgba(0,0,0,0.1);
			}
			p {
				padding: 0;
			}
			.actions {
				max-width: 100%;
				button, a {
					flex-grow: 1;
					display: flex;
					justify-content: center;
				}
				button {
					padding: 10px 16px !important;
					border-radius: 6px !important;
				}
			}
		}
	}
	.newUI #stylus-manage #installed {
		// border: 0 !important;
		// font-family system-ui
		background-color rgba(100,100,100,0.04)
		box-shadow 0 0 0 24px rgba(100,100,100,0.04)
		margin 0
		padding-top 0
		.entry {
			transition background .2s
			border-radius 16px
			// opacity .8
			vertical-align: center
			margin-inline 12px !important
			line-height 2em
			.style-name {
				padding: 15px 10px;
				padding-left: 45px;
				opacity .9
				max-height max-content !important
			}
			
			.style-name::before {
				content: unset !important;
			}
			.checkmate {
				margin-right 1.5em
				// height 100%
				position absolute
				margin 0
				// line-height 100%
				left 1.5em
				margin-top .4em
				input {
					background none
					border-width 1px !important
					transform scale(1.5)
					border-radius 4px !important
				}
			}
			.actions {
				background-color rgba(100,100,100,0.04)
				height max-content
				margin auto
				padding-inline 12px
				> * {
					// padding .5em
					// border-radius 12px
					// background-color rgba(100,100,100,0.1)
					&:last-child {
						margin-right 0
					}
					svg {
						width 100%
					}
					&:empty {
						// display none
					}
				}
			}
			.style-info {
				padding-inline .5em
			}
			.applies-to {
				padding 15px
				.targets {
					display flex
					flex-wrap wrap
					gap .5em
					.target {
						padding .4em .8em
						background rgba(100,100,200,0.08)
						border-radius 12px
						max-width 20em
						letter-spacing .02em !important
						img, b::after {
							min-width 16px
							margin 0
							margin-right .5em
							border-radius 100px
							filter unset !important
							opacity 1 !important
						}
					}
				}
			}
		}
	}
	
	#stylus-popup {
		overflow: hidden auto;
		.blocked-info {
			border-bottom: 0 !important;
			padding: 8px 16px !important;
			padding-bottom: 0 !important;
			label {
				font-size: 1.2em;
			}
			& ~ #installed,
			& ~ .actions #write-style {
				display: none !important;
			}
			& ~ .actions {
				padding-top: 0;
				padding-bottom: 20px;
			}
		}
		
		
		
		
		
		& > .actions {
			order unset !important
			margin: 0;
			// margin-left: 4px !important;
			margin-right: 0 !important;
			position: relative;
			flex-grow: 1;
			// padding-top: 16px;
			// padding-bottom: 16px;
			padding 0 calc(var(--inner-padding) / 2 + 4px) !important
			padding-top calc( var(--inner-padding) / 2) !important
			display: flex;
			flex-wrap wrap
			justify-content space-between
			// flex-direction: column;
			.main-controls {
				display contents
			}
			#disableAll-label {
				margin-top .5em
				margin-bottom .1em
				padding-left calc(var(--inner-padding) + 4px) !important
			}
			#write-style {
				display: flex;
				flex-wrap: wrap;
				width 100%
				// margin-top calc(var(--inner-padding) / 4)
				padding 8px 0
				// padding-left calc(var(--inner-padding) + 4px)
				// border-top 1px solid rgba(0,0,0,.1)
				margin 0
				// align-items center
				#write-as {
					position relative
					// margin-top 4px
					left unset !important
					display flex
					margin-right 4px
					align-self center
					> div {
						// margin 0 !important
						margin-left 4px !important
						padding-inline 3px
					}
					// order 2
				}
				#write-style-for {
					font-size: 16px;
					font-weight: 700;
					order -1
					margin-right .5em
					flex-grow 1
					width calc(100% - 50px)
				}
				#write-for-frames {
					margin-left 4px !important
					margin-right 8px !important
					// align-self flex-end
					order 1
					margin-top .4em
				}
				.match {
					// width: 100%;
					margin-left padding-left calc(var(--inner-padding) + 4px)
					margin-top .4em
					span a {
						text-decoration: none;
						font-size: 13px;
					}
					.breadcrumbs ~ span {
						margin-left 10px !important
						// display flex
						// align-items center
						&::before {
							margin-top .4em
						}
					}
				}
				#write-for-frames {
					position: relative;
					margin: 6.5px;
					margin-left: 0;
					margin-right: 10px;
					&::after {
						border-radius: 100%;
						margin: -4px;
					}
				}
			}
		}
		// #popup-options, & > .actions {
		// 	background: inherit;
		// 	// background rgba(150,150,150,0.07)
		// 	filter invert(.02)
		// 	z-index 2
		// }
		&::before {
			content ""
			position absolute
			background inherit
			inset 0
			filter invert(0.04)
		}
		#installed {
			background inherit
			border-radius 12px 12px 0 0
			padding-top 8px !important
			&:nth-child(2) {
				border-radius 0 0 12px 12px !important
			}
		}
		#popup-options {
			padding var(--outer-padding) calc(var(--inner-padding) / 2 + 4px) !important
			padding-top 0 !important
			padding-bottom 10px !important
			gap 4px
			> * {
				// flex-grow 0
			}
			#options-btn {
				// padding-inline 8px !important
				margin-left auto
				flex-grow 0
				svg {
					fill currentColor
					stroke transparent
					opacity .5
				}
			}
		}
		#search-results {
			margin-left: auto !important;
			margin-right: auto !important;
			width: 100%;
			order: 3;
			padding-top: 30px;
			background-color: inherit;
			box-sizing border-box
			&::before {
				content unset !important
			}
			.search-results-nav[data-type="top"] {
				display: none;
			}
			#search-params {
				padding: 8px 4px;
				margin-bottom: 8px;
				justify-content: space-between;
				& > input {
					width: 100% !important;
					flex: unset;
					margin: 0 !important;
					margin-bottom: 6px !important; 
					padding: 10px !important;
					border-radius: 4px !important;
					height: 30px !important;
				}
				& > * {
					margin-top: 0 !important;
				}
				& > label {
					margin-left: 10px !important;
					align-items: center;
					display: flex;
					margin-right 10px
				}
				.select-resizer {
					// flex-grow: 1;
					select {
						height: 30px;
						padding-left: 5px;
						flex-grow: 1;
						margin-left 0 !important
					}
					svg {
						top: 8px;
						right: 8px;
					}
				}
			}
			.search-results-nav {
				position: sticky;
				bottom: 10px;
				left 10px
				width max-content !important
				background: inherit;
				// filter invert(.05)
				border var(--border)
				border-radius 100px
				margin-inline calc(0px - var(--inner-padding))
				margin-top 4em
				margin-bottom 0 !important
				overflow hidden
				button {
					margin 0
					padding 4px 8px !important
				}
			}
			#search-results-list {
				display: flex;
				flex-wrap: wrap;
				margin: 0 6px;
				gap 24px
				justify-content: center;
				.search-result {
					box-shadow: 0 4px 12px rgba(0,0,0,0.1);
					border var(--border)
					border none
					width: 280px;
					background none !important
					padding 12px
					padding-bottom 6px
					margin: 0
					border-radius: 8px;
					// padding-bottom: 25px;
					// margin-
					overflow hidden
					background none
					display flex
					flex-direction column
					transition transform .02s
					&:hover {
						transform scale(1.01)
					}
					&:active {
						transform scale(1)
						transition transform .1s
					}
					.search-result-info {
						display contents
					}
					img {
						order -1
						margin -12px
						margin-bottom 0
						width unset
						// border-radius 8px
						// box-shadow 0 4px 8px rgba(0,0,0,0.2)
					}
					.search-result-title {
						text-decoration: none;
						// padding 8px
						padding-bottom 0
						margin-bottom 0
						margin-top 10px
						span {
							font-size 1.2em !important
						}
						img {
							margin 0
							order 2
							margin-left auto
						}
						
					}
					.not-matching-explainer {
						border 0
						z-index 0
						border-radius 8px
						margin 0
						margin-top 12px
						margin-bottom 0
						// order 2
					}
					.search-result-meta {
						padding 0
						// padding-top 4px
						box-sizing border-box
						// bottom 10px
						// left 10px
						// width max-content
						background none
						position static
						&::before {
							content unset !important
						}
						[data-type=author] {
							margin-right auto !important
						}
						> div:not(:first-child) {
							margin-left 10px
							dd {
								font-weight 400
							}
						}
						a {
							font-weight 400
							text-decoration none
						}
					}
					.search-result-status {
						position absolute
						margin 4px
						border-radius 4px
					}
					.search-result-description {
						order 2
						position static
					}
				}
				.search-result:hover {
					background-color: hsla(180, 50%, 30%, 0.1);
				}
			}
			&:not([data-empty])::before {
				filter: opacity(0);
			}
		}
		#search-results-error {
			width: 100%
		}
		
		
		#message-box.config-dialog {
			> div {
				max-height: 100vh;
				min-height 100vh
				// max-height unset
				box-shadow: none;
				max-width: unset;
				width: 100%;
			}
			#message-box-title {
				pointer-events none !important

			}
		}
	}
	
	#message-box #message-box-close-icon, #options-close-icon {
		width: 30px;
		height: 30px;
		top: 6px;
		right: 6px;
		svg {
			width: 30px !important;
			height: 30px !important;
		}
	}
	
	#message-box.config-dialog {
		background: inherit;
		z-index: 9999999;
		& > div {
			box-shadow 0 12px 48px rgba(0,0,0,0.1)
			// box-shadow none
			// border var(--border) !important
			#message-box-title {
				background: none;
				box-shadow: 0 2px 8px rgba(0,0,0,0.1)
				padding-right 50px !important
			}
			#message-box-contents {
				.config-body > label:not(:first-child) {
					border-top: var(--border) !important;
				}
			}
			#message-box-buttons {
				background: none;
				border-top: var(--border);
				display flex
				align-items center
				label {
					margin 0 1em
					margin-left auto
				}
			}
		}
	}
	
}