Cleaner Stylus by freeplay

/* ==UserStyle==
@name           Cleaner Stylus
@version        1.1.2
@description    Tweaks for Userstyles.World!
@updateURL      https://codeberg.org/Freeplay/UserStyles/raw/branch/main/cleaner-stylus.user.css
@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 {
		button, #find-styles-link {
			border-color: rgba(0,0,0,0.1) !important;
			border-radius: 4px !important;
			padding: 8px 16px !important;
			background-image: none;
			height: auto !important;
		}
		input, select {
			border: 1px solid rgba(0,0,0,0.1) !important;
			border-radius: 4px !important;
		}
		.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);
			border-right: none;
			border-bottom: none;
			padding-bottom: 0 !important;
		}

		.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;
			width: 120%;
			border-bottom: none;
			box-shadow: 0 1px 0px rgba(0,0,0,.1);
			.entry {
				margin: 0 4px;
				background-color: transparent;
				border-radius: 6px;
				overflow: hidden;
				// border-bottom: 1px solid rgba(0,0,0,.07);
				&::after {
					content: "";
					position: absolute;
					left: 10px;
					right: 10px;
					bottom: 0px;
					border-bottom: 1px solid rgba(0,0,0,.07);
					
				}
				&:hover {
					background-color: hsla(180, 50%, 30%, 0.1);
				}
				.entry-content {
					height: auto;
					.style-name {
						padding: 0px;
						padding-left: 30px;
						&::before {
							background: transparent;
						}
						.checker, .svg-icon.checked {
							top: 7.5px !important;
						}
					}
				}
			}
		}
		
	}
	
	#stylus-manage {		
		overflow-x: hidden;
		height: auto;
		#header {
			display: flex;
			flex-direction: column;
			padding: 25px 0;
			background: inherit;
			#manage-heading {
				margin: 0 25px;
				font-weight: 500 !important;
				display: unset !important;
			}
			.filter-selection {
				margin-bottom: 7px;
				display: flex;
				& > * {
					flex-grow: 1;
				}
			}
			
		}
		#manage-settings {
			flex-direction: column !important;
			& > .settings-column {
				padding: 20px 0;
				margin: 0 25px;
				border-bottom: 1px solid rgba(0, 0, 0, 0.1);
				margin-top: 0;
				flex-direction: row;
				flex-wrap: wrap;
				& > * {
					flex-grow: 1;
					min-width: 100%;
				}
				details, #update-check {
					display: flex !important;
					flex-direction: row !important;
					a {
						flex-grow: 0;
						width: auto;
						display: flex;
						align-items: center;
						
					}
					& > * {
						flex-grow: 1 !important;
						max-width: unset;
						width: 100%;
					}
				}
				summary {
					margin: 0;
					margin-left: 1px;
					
					h2 {
						font-weight: 500;
						margin: 0 !important;
						margin-left: 2px !important;
						border: none !important;
					}
				}
				#search-wrapper, #sort-wrapper {
					flex-wrap: wrap;
					input {
						width: 100% !important;
						flex: unset;
						margin: 0 !important;
						margin-top: 4px !important;
						margin-bottom: 6px !important; 
						padding: 10px !important;
						border-radius: 4px !important;
						height: 30px !important;
					}
					.select-wrapper, .sorter-selection {
						flex-grow: 1;
						max-width: calc(100% - 28px);
						margin-right: 5px;
						select {
							height: 30px;
							padding-left: 5px;
							flex: 1 1 100px;
							
						}
						svg {
							top: 8px;
							right: 8px;
						}
					}
				}
				#sort-wrapper {
					margin-bottom: 0;
				}
				#check-all-updates {
					margin-right: 8px;
				}
				#add-style-wrapper a, #backup-buttons {
					flex-grow: 1;
					button {
						flex-grow: 1;
					}
				}
				#manage-text span a {
					text-decoration: none;
					font-size: .8rem;
					opacity: .8;
					text-underline-offset: 4px;
				}
				#manage-text span::after {
					content: "/";
					margin-left: 8px;
				}
			}
		}
		
	}
	.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;
		.entry {
			border-radius: 8px;
			transition: background .2s;
			border-radius: 0;
			box-shadow: 0 1px 1px rgba(0,0,0,0.05);
			.style-name {
				padding: 15px 10px;
				padding-left: 35px;
			}
			.style-name::before {
				content: unset !important;
			}
		}
		border: none !important;
	}
	
	#stylus-popup {
		display: flex;
		flex-wrap: wrap;
		margin-top: 45px;
		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 {
			margin: 0;
			margin-left: 0 !important;
			margin-right: 0 !important;
			position: relative;
			flex-grow: 1;
			padding-top: 16px;
			padding-bottom: 16px;
			display: flex;
			flex-direction: column;
			background: inherit;

			
			#disable-all-wrapper {
				background-color: inherit;
				padding: 15px 13px;
				box-shadow: 0 1px 0px rgba(0,0,0,.1), 0 -1px 0px rgba(0,0,0,.1);
				// margin-bottom: 15px;
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				order: 2;
				// margin: 0 -9px !important;
				// margin-top: 16px !important;
				box-sizing: border-box;
				border: none !important;
			}
			#find-styles {
				position: fixed;
				// position: absolute;
				top: 15px;
				// bottom: 14px;
				right: 16px;
				margin: 0;
				z-index: 2;
				#find-styles-link {
					border: 1px solid rgba(0,0,0,0.1);
					margin: -8px 0;
					text-decoration: none;
					margin-right: 8px;
				}
			}
			#write-style {
				display: flex;
				flex-wrap: wrap;
				#write-style-for {
					font-size: 16px;
					font-weight: 1000;
					padding-bottom: 4px;
				}
				.match {
					width: 100%;
					span a {
						text-decoration: none;
						font-size: 13px;
					}
				}
				#write-for-frames {
					position: relative;
					margin: 6.5px;
					margin-left: 0;
					margin-right: 10px;
					&::after {
						border-radius: 100%;
						margin: -4px;
					}
				}
			}
			#popup-options {
				padding: 16px;
				padding-top: 12px;
				padding-top: 0;
				padding-bottom: 0;
			}
		}
		#search-results {
			margin-left: auto !important;
			margin-right: auto !important;
			width: 100%;
			order: 3;
			padding-top: 30px;
			background-color: inherit;
			.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;
				}
				.select-resizer {
					flex-grow: 1;
					select {
						height: 30px;
						padding-left: 5px;
						flex-grow: 1;
					}
					svg {
						top: 8px;
						right: 8px;
					}
				}
			}
			.search-results-nav {
				position: sticky;
				bottom: 0;
				background: inherit;
			}
			#search-results-list {
				display: flex;
				flex-wrap: wrap;
				margin: 0 6px;
				justify-content: center;
				.search-result {
					box-shadow: none;
					border: none;
					width: 360px;
					padding: 8px;
					margin: 0;
					border-radius: 6px;
					padding-bottom: 25px;
					background-color: transparent;
					.search-result-title {
						text-decoration: none;
						span {
							font-size: 14px !important;
						}
					}
					.search-result-meta {
						background-color: hsla(0, 0%, 93%, 0.2);
					}
				}
				.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 #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 {
			max-height: 100vh;
			box-shadow: none;
			max-width: unset;
			width: 100%;
			#message-box-title {
				background: none;
				box-shadow: 0 2px 8px rgba(0,0,0,0.1);
			}
			#message-box-contents {
				.config-body > label:not(:first-child) {
					border-top: 1px solid rgba(0,0,0,0.07) !important;
				}
			}
			#message-box-buttons {
				background: none;
				border-top: 1px solid rgba(0,0,0,0.1);
			}
		}
	}
	
}