Cleaner Stylus by freeplay
Imported and mirrored from https://codeberg.org/Freeplay/UserStyles/raw/branch/main/cleaner-stylus.user.css
Details
Authorfreeplay
LicenseNo License
Created
Updated
CategoryStylus
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
History
Daily snapshots of style statistics.
No style history. Come back in a couple of days.Source code
/* ==UserStyle==
@name Cleaner Stylus
@version 1.4.0
@description Makes the Stylus extension look a bit nicer!
@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
--border 1px solid rgba(150,150,150,.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
}
.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 2px
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, #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;
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: var(--border);
}
&: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-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 18px
box-shadow none
// 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
}
details {
padding 12px
// padding-bottom 0
border var(--border)
border-radius 6px
overflow hidden
margin-block 20px !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 {
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 .85em
opacity .8
}
}
}
#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 {
transition background .2s
border-radius 16px
// opacity .8
vertical-align: center
margin-inline 12px !important
line-height 2em
.style-name {
padding: 15px 10px;
padding-left: 45px;
opacity .9
max-height max-content !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
}
}
.actions {
background-color rgba(100,100,100,0.04)
height max-content
margin auto
padding-inline 12px
> * {
// padding .5em
// border-radius 12px
// background-color rgba(100,100,100,0.1)
&:last-child {
margin-right 0
}
svg {
width 100%
}
&:empty {
// display none
}
}
}
.style-info {
padding-inline .5em
}
.applies-to {
padding 15px
.targets {
display flex
flex-wrap wrap
gap .5em
.target {
padding .4em .8em
background rgba(100,100,200,0.08)
border-radius 12px
max-width 20em
letter-spacing .02em !important
img, b::after {
min-width 16px
margin 0
margin-right .5em
border-radius 100px
filter unset !important
opacity 1 !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 {
order unset !important
margin: 0;
// margin-left: 4px !important;
margin-right: 0 !important;
position: relative;
flex-grow: 1;
// padding-top: 16px;
// padding-bottom: 16px;
padding 0 calc(var(--inner-padding) / 2 + 4px) !important
padding-top calc( var(--inner-padding) / 2) !important
display: flex;
flex-wrap wrap
justify-content space-between
// flex-direction: column;
.main-controls {
display contents
}
#disableAll-label {
margin-top .5em
margin-bottom .1em
padding-left calc(var(--inner-padding) + 4px) !important
}
#write-style {
display: flex;
flex-wrap: wrap;
width 100%
// margin-top calc(var(--inner-padding) / 4)
padding 8px 0
// padding-left calc(var(--inner-padding) + 4px)
// border-top 1px solid rgba(0,0,0,.1)
margin 0
// align-items center
#write-as {
position relative
// margin-top 4px
left unset !important
display flex
margin-right 4px
align-self center
> div {
// margin 0 !important
margin-left 4px !important
padding-inline 3px
}
// order 2
}
#write-style-for {
font-size: 16px;
font-weight: 700;
order -1
margin-right .5em
flex-grow 1
width calc(100% - 50px)
}
#write-for-frames {
margin-left 4px !important
margin-right 8px !important
// align-self flex-end
order 1
margin-top .4em
}
.match {
// width: 100%;
margin-left padding-left calc(var(--inner-padding) + 4px)
margin-top .4em
span a {
text-decoration: none;
font-size: 13px;
}
.breadcrumbs ~ span {
margin-left 10px !important
// display flex
// align-items center
&::before {
margin-top .4em
}
}
}
#write-for-frames {
position: relative;
margin: 6.5px;
margin-left: 0;
margin-right: 10px;
&::after {
border-radius: 100%;
margin: -4px;
}
}
}
}
// #popup-options, & > .actions {
// background: inherit;
// // background rgba(150,150,150,0.07)
// filter invert(.02)
// z-index 2
// }
&::before {
content ""
position absolute
background inherit
inset 0
filter invert(0.04)
}
#installed {
background inherit
border-radius 12px 12px 0 0
padding-top 8px !important
&:nth-child(2) {
border-radius 0 0 12px 12px !important
}
}
#popup-options {
padding var(--outer-padding) calc(var(--inner-padding) / 2 + 4px) !important
padding-top 0 !important
padding-bottom 10px !important
gap 4px
> * {
// flex-grow 0
}
#options-btn {
// padding-inline 8px !important
margin-left auto
flex-grow 0
svg {
fill currentColor
stroke transparent
opacity .5
}
}
}
#search-results {
margin-left: auto !important;
margin-right: auto !important;
width: 100%;
order: 3;
padding-top: 30px;
background-color: inherit;
box-sizing border-box
&::before {
content unset !important
}
.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;
margin-right 10px
}
.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: 10px;
left 10px
width max-content !important
background: inherit;
// filter invert(.05)
border var(--border)
border-radius 100px
margin-inline calc(0px - var(--inner-padding))
margin-top 4em
margin-bottom 0 !important
overflow hidden
button {
margin 0
padding 4px 8px !important
}
}
#search-results-list {
display: flex;
flex-wrap: wrap;
margin: 0 6px;
gap 24px
justify-content: center;
.search-result {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
border var(--border)
border none
width: 280px;
background none !important
padding 12px
padding-bottom 6px
margin: 0
border-radius: 8px;
// padding-bottom: 25px;
// margin-
overflow hidden
background none
display flex
flex-direction column
transition transform .02s
&:hover {
transform scale(1.01)
}
&:active {
transform scale(1)
transition transform .1s
}
.search-result-info {
display contents
}
img {
order -1
margin -12px
margin-bottom 0
width unset
// border-radius 8px
// box-shadow 0 4px 8px rgba(0,0,0,0.2)
}
.search-result-title {
text-decoration: none;
// padding 8px
padding-bottom 0
margin-bottom 0
margin-top 10px
span {
font-size 1.2em !important
}
img {
margin 0
order 2
margin-left auto
}
}
.not-matching-explainer {
border 0
z-index 0
border-radius 8px
margin 0
margin-top 12px
margin-bottom 0
// order 2
}
.search-result-meta {
padding 0
// padding-top 4px
box-sizing border-box
// bottom 10px
// left 10px
// width max-content
background none
position static
&::before {
content unset !important
}
[data-type=author] {
margin-right auto !important
}
> div:not(:first-child) {
margin-left 10px
dd {
font-weight 400
}
}
a {
font-weight 400
text-decoration none
}
}
.search-result-status {
position absolute
margin 4px
border-radius 4px
}
.search-result-description {
order 2
position static
}
}
.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 {
box-shadow 0 12px 48px rgba(0,0,0,0.1)
// box-shadow none
// border var(--border) !important
#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: var(--border) !important;
}
}
#message-box-buttons {
background: none;
border-top: var(--border);
display flex
align-items center
label {
margin 0 1em
margin-left auto
}
}
}
}
}