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