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

Updated atMay 28, 2021 01:01

Applies toStylus

Statistics

Learn how we calculate statistics in the FAQ.

Total views381

Total installs607

Weekly installs30

Weekly updates30

Description

Tweaks for Userstyles.World!

Notes

Userstyle doesn't have notes.

History

Daily snapshots of style statistics.

2021-07-072021-07-212021-08-032021-08-172021-08-302021-09-122021-09-262021-10-092021-10-222021-11-052021-11-182021-12-01Date0.003.907.8011.7015.5019.4023.3027.2031.00Daily countDaily installsDaily updatesDaily views
2021-07-072021-07-212021-08-032021-08-172021-08-302021-09-122021-09-262021-10-092021-10-222021-11-052021-11-182021-12-01Date0.0077.00153.00229.00305.00382.00458.00534.00610.00Total countTotal installsTotal views

Source code

/* ==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);
			}
		}
	}
	
}

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!