Skip to content

Cleaner Stylus by Freeplay

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

Screenshot of Cleaner Stylus

Details

AuthorFreeplay

LicenseNo License

CategoryStylus

Created

Updated

Size19 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

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.

Notes

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name           Cleaner Stylus
@version        1.4.3
@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(100,100,100,.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
			min-width max-content
		}
		.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 6px
					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 > div, #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;
				margin-top 1px
				background-color: transparent;
				border-radius: 6px;
				// border-bottom: 1px solid rgba(0,0,0,.07);
				transition background-color .2s
				display flex
				align-items center
				&::before {
					top unset
				}
				&:not(:first-of-type)::after {
					content: "";
					position: absolute;
					inset-inline 10px
					top: -1px;
					border-bottom: var(--border);	
				}
				&:hover {
					background-color: hsla(180, 50%, 30%, 0.07);
					&::after, & + .entry::after {
						opacity 0
					}
				}
				.entry-content {
					height: auto;
					flex-grow 1
					overflow hidden
					.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 24px
			// border-right var(--border)
			box-shadow none
			border-right 1px solid rgba(100,100,100,0.1)
			// 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
			}
			.settings-column {
				margin 0 !important
			}
			details, #sort-wrapper {
				// padding 24px
				// padding-bottom 0
				// border var(--border)
				border-top var(--border)
				// border-radius 6px
				// overflow hidden
				// margin-inline -16px
				padding-block 20px
				margin-block 0 !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 {
					// display flex
					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 .9em
						opacity .8
						// margin-right auto
					}
				}
			}
			#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 {
			align-items unset !important
			transition background .2s
/* 			border-radius 16px */
			// opacity .8
			vertical-align: center
			margin-inline 0 !important
/* 			margin 0 !important */
			padding 0 !important
			line-height 2em
			flex-wrap nowrap
			width 100% !important
			border-radius 0 !important
			.style-name {
				padding: 15px 10px;
				padding-left: 45px;
				opacity .9
				max-height max-content !important
				padding-right: 45px
				.homepage {
					position absolute
					right 0
					width var(--action-size) !important
					margin-right var(--action-margin) !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
					margin-block 0 !important
				}
			}
			.actions > *, .homepage {
				transform translateY(0.125rem)
			}
			.actions {
/* 				position relative
				margin auto
				padding 0 !important
				padding-right 2px !important
				margin 0 !important */
				&::before {
					content ""
					position absolute
					inset 0
					left calc(-14px - (var(--action-size)))
					background-color rgba(100,100,100,0.04)
					pointer-events none
				}
				> * {
					// padding .5em
					// border-radius 12px
					// background-color rgba(100,100,100,0.1)
/* 					margin-block 0 !important */
					&:last-child {
						margin-right 0
					}
					svg {
						width 100%
					}
				}
			}
			.style-info {
				padding-inline .5em
			}
			.applies-to {
				padding 15px
				.targets {
					display flex
					flex-wrap wrap
					gap .5em
					.target {
/* 						display flex !important */
						padding .4em .8em
						background...

Reviews

No reviews yet.