Cleaner Stylus by freeplay

Imported and mirrored from https://codeberg.org/Freeplay/UserStyles/raw/branch/main/cleaner-stylus.user.css

Cleaner Stylus screenshot
Homepage Install Get Stylus Write a review

Details

Authorfreeplay

LicenseNo License

Created

Updated

CategoryStylus

Statistics

Learn how we calculate statistics in the FAQ.

Total views

Total installs

Weekly installs

Description

Should be fixed for the new Stylus update

Makes the Stylus extension look a bit nicer!

Works with other styles that change only colors.

History

Daily snapshots of style statistics.

No style history. Come back in a couple of days.

Source code

/* ==UserStyle==
@name           Cleaner Stylus
@version        1.4.0
@description    Makes the Stylus extension look a bit nicer!
@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 {
		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
				}
			}
		}
	}
	
}

Reviews

No reviews yet.