Stylus Editor - Floating Sidebar by freeplay
Imported from https://codeberg.org/Freeplay/UserStyles/raw/branch/main/stylus_floating-sidebar.user.css

Details
Authorfreeplay
LicenseNo License
Created atApril 22, 2021 18:07
Updated atNovember 28, 2021 21:30
Applies toStylus
Statistics
Learn how we calculate statistics in the FAQ.
Total views1097
Total installs1364
Weekly installs60
Description
A floating sidebar for Stylus! Useful when working in a small window.
Notes
In chromium browsers, the popup may appear blurry. To fix this:
Open the style’s settings, change ‘Expand Animation Type’ to ‘Reduced’ or ‘None’
History
Daily snapshots of style statistics.
Source code
/* ==UserStyle==
@name Stylus Editor - Floating Sidebar
@version 1.1.1
@description A floating sidebar for Stylus! Useful when working in a small window.
@updateURL https://codeberg.org/Freeplay/UserStyles/raw/branch/main/twitter/stylus_floating-sidebar.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
@var checkbox hide "Appear as a tab" 0
@var select animation "Expand Animation Type" ["Default", "Reduced", "None"]
@var checkbox issues "Pin Issues (Expand to show)" 0
==/UserStyle== */
/* Update 1.1.0
- Added the option to make sidebar appear as a tab
*/
@-moz-document regexp("^(moz|chrome)-extension://.*$") {
#stylus-edit {
#header {
position: fixed !important;
right: 0px !important;
top: 0 !important;
margin: 15px;
padding: 1em !important;
height: auto !important;
box-sizing: border-box;
border-radius: 8px;
opacity: .8;
box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
width: 30vw;
min-width: 160px;
max-width: 300px;
overflow: visible;
flex-direction: column !important;
backdrop-filter: blur(10px);
background-color: rgba(250,250,250,.7); // Sadly, some color themes may not work well with this. Better rely on it overriding the background-color.
transition: opacity .3s, transform .5s, max-height .3s, min-width .2s, max-width .2s, padding .2s, right .2s, top .2s;
if hide {
width: 160px !important;
right: -140px !important;
top: 24px !important;
border-radius: 12px;
background-color: white;
max-height: 35px !important;
overflow: hidden;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100px;
background-color: inherit;
z-index: 100;
border-radius: 12px;
background-image: url("https://raw.githubusercontent.com/lucide-icons/lucide/master/icons/edit.svg");
background-size: 22px;
background-position: 8px;
background-repeat: no-repeat;
}
}
if animation == "Default" {
transform: scale(.98);
}
if animation == "None" {
&, & > * {
transition: none !important;
}
}
#heading {
display: none;
}
& > :not(#basic-info) {
max-height: 0;
overflow: hidden;
transition: max-height .2s;
}
#basic-info {
margin: -10px -6px !important;
margin-bottom: -12px !important;
transition: margin .2s;
& > div {
margin: 0 !important;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
}
}
#actions > div {
margin-top: 1rem;
}
#details-wrapper {
flex-direction: column !important;
& > details {
margin: 0 !important;
margin-top: 0 !important;
margin-bottom: .5rem !important;
max-width: 100%;
.options-column {
max-width: 100%;
// overflow: hidden;
padding: 0 !important;
.select-resizer {
width: calc(100% - 26px);
select {
width: 100%;
}
}
}
}
summary {
margin-left: -10px;
padding: 0;
& + * {
margin-left: 0;
}
}
if issues {
^[1..1]:not(:hover):not(:focus-within) #lint {
position: absolute !important;
top: calc(100% + 5px);
left: 0;
min-width: 100% !important;
border-radius: 8px;
background-color: rgba(255,255,255,0.6);
backdrop-filter: blur(10px);
min-height: unset !important;
transition: position 0s .5s;
z-index: -1;
pointer-events: none;
summary {
display: none;
}
.lint-scroll-container {
position: relative;
margin: 0 !important;
padding: 0 !important;
padding: 0px 10px !important;
padding-bottom: 4px !important;
}
}
}
}
& > section, & > div {
margin: 0 !important;
padding: 0 !important;
}
#lint {
width: 100%;
overflow: visible;
}
&:hover, &:focus-within {
opacity: 1;
transform: scale(1);
max-height: calc(100vh - 30px) !important;
// padding: 15px;
min-width: 220px;
if hide {
right: -16px !important;
}
top: 0 !important;
width: 30vw !important;
overflow: hidden scroll;
&::before {
content: unset;
}
#basic-info {
margin: 0 !important;
}
& > :not(#basic-info) {
max-height: calc(100vh - 30px);
overflow: visible;
flex-wrap: nowrap;
}
}
}
#sections {
padding-left: 0 !important;
.CodeMirror {
.CodeMirror-scroll {
max-height: 100vh !important;
/* Add right padding due to width of popup */
.CodeMirror-code {
if not hide {
min-width: calc(100% + 400px);
pre.CodeMirror-line, pre.CodeMirror-line-like {
max-width: calc(100% - 400px);
}
}
}
}
}
}
}
}
Reviews
gusted
reviewed and gave 5/5 ⭐ on
July 30, 2021 at 17:28
It`s a really unique style and a layout change, which I haven`t seen before. Keep up the good work!
~ Gusted
pluff
reviewed and gave 5/5 ⭐ on
July 24, 2021 at 05:50
really like this. Personally i reduced the transition time to .2 and removed the scale as i don't like wobbliness.
otherwise loving it.
decembre
reviewed and gave 5/5 ⭐ on
July 21, 2021 at 01:56
Very good idea!
We need a more simple view to edit our userstyles.