Cleaner Stylus by freeplay

Imported 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 atApril 7, 2021 01:06

Updated atMay 26, 2022 16:30

Applies toStylus

Statistics

Learn how we calculate statistics in the FAQ.

Total views870

Total installs2346

Weekly installs123

Description

Tweaks for Userstyles.World!

Notes

Userstyle doesn't have notes.

History

Daily snapshots of style statistics.

2021-07-072021-07-312021-08-232021-09-152021-10-082021-10-312021-11-232021-12-162022-01-082022-01-312022-02-232022-03-18Date0.006.0012.0018.0024.0030.0036.0042.0048.00Daily countDaily installsDaily updatesDaily views
2021-07-072021-08-022021-08-272021-09-222021-10-172021-11-112021-12-072022-01-012022-01-272022-02-212022-03-18Date0.00190.00380.00570.00750.00940.001130.001320.001500.00Total countTotal installsTotal views

Source code

/* ==UserStyle==
@name           Cleaner Stylus
@version        1.2.0
@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 {
		transition background-color .2s
		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;
			transition background-color .2s
		}
		input, select {
			border: 1px solid rgba(0,0,0,0.1) !important;
			border-radius: 4px !important;
		}
		.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);
			border-right: none;
			border-bottom: none;
		}

		.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;
			.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: 1px solid rgba(0,0,0,.07);
					
				}
				&: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-content-wrapper {
			.actions {
				display flex
				flex-wrap wrap
				align-items center
				margin 0
				.install {
					flex-grow 1
					margin-right 1em
					padding-right 3em !important
				}
			}
			.meta-description {
				font-size 1.1em
				margin 0
			}
		}
		
	}
	#stylus-manage {		
		overflow-x: hidden;
		height: auto;
		#header {
			display: flex;
			flex-direction: column;
			padding: 25px 0;
			background: inherit;
			// box-shadow none
			background rgba(150,150,150,0.05)
			#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;
				}
				#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 {
		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: 4px !important;
			margin-right: 0 !important;
			position: relative;
			flex-grow: 1;
			// padding-top: 16px;
			// padding-bottom: 16px;
			padding var(--inner-padding)
			display: flex;
			flex-wrap wrap
			align-items center
			justify-content space-between
			// flex-direction: column;
			background: inherit;
			background rgba(150,150,150,0.07)

			.main-controls {
				display contents
			}
			#disable-all-wrapper, #find-styles {
				margin-bottom calc(var(--inner-padding) / 2) !important
			}
			#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;
				padding 0
				margin-left calc(var(--inner-padding) / 2)
				box-sizing: border-box;
				border: none !important;
			}
			#find-styles {
				// position: fixed;
				// position: absolute;
				// top: 15px;
				// bottom: 14px;
				// right: 16px;
				margin: 0;
				margin-right var(--inner-padding)
				z-index: 2;
				// padding-block 4px
				#find-styles-link {
					// border: 1px solid rgba(0,0,0,0.1);
					margin: -8px 0;
					text-decoration: none;
					margin-right: 8px;
					font-weight 700
					// background-color rgba(145, 208, 198, .4)
				}
			}
			#write-style {
				display: flex;
				flex-wrap: wrap;
				width 100%
				// margin-top calc(var(--inner-padding) / 4)
				padding 8px calc(var(--inner-padding) / 2)
				// border-top 1px solid rgba(0,0,0,.1)
				#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 0 calc(var(--inner-padding) / 2)
				flex-grow 1
			}
		}
		#search-results {
			margin-left: auto !important;
			margin-right: auto !important;
			width: 100%;
			order: 3;
			padding-top: 30px;
			background-color: inherit;
			box-sizing border-box
			.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;
						margin-left 0 !important
					}
					svg {
						top: 8px;
						right: 8px;
					}
				}
			}
			.search-results-nav {
				position: sticky;
				bottom: 0;
				background: inherit;
				filter invert(.05)
				margin-inline calc(0px - var(--inner-padding))
				margin-top 1em
			}
			#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.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 {
			#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: 1px solid rgba(0,0,0,0.07) !important;
				}
			}
			#message-box-buttons {
				background: none;
				border-top: 1px solid rgba(0,0,0,0.1);
				display flex
				align-items center
				label {
					margin 0 1em
					margin-left auto
				}
			}
		}
	}
	
}

Reviews

sha-razeek reviewed and gave 5/5 ⭐ on September 06, 2021 at 03:02
Just what the doctor ordered. If you have a light theme running on Windows and all your applications, this goes really well with them!