Cleaner Stylus by freeplay
Imported from https://codeberg.org/Freeplay/UserStyles/raw/branch/main/cleaner-stylus.user.css
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.
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!