Stylus Editor - Floating Sidebar by freeplay

Imported from https://codeberg.org/Freeplay/UserStyles/raw/branch/main/stylus_floating-sidebar.user.css

Stylus Editor - Floating Sidebar screenshot

Details

Authorfreeplay

LicenseNo License

Created atApril 22, 2021 18:07

Updated atApril 28, 2021 23:48

Applies toStylus

Statistics

Total views45

Total installs30

Weekly installs2

Weekly updates9

Description

A floating sidebar for Stylus! Useful when working in a small window.

Notes

Userstyle doesn't have notes.

Source code

/* ==UserStyle==
@name           Stylus Editor - Floating Sidebar
@version        1.0.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
==/UserStyle== */

@-moz-document regexp("^(moz|chrome)-extension://.*$") { 
	#stylus-edit #header {
		position: fixed !important;
		right: 0 !important;
		top: 0 !important;
		margin: 15px;
		height: auto !important;
		box-sizing: border-box;
		border-radius: 8px;
		opacity: .8;
		transform: scale(.98);
		box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
		width: 30vw;
		min-width: 250px;
		max-width: 300px;
		transition: opacity .3s, transform .5s, max-height .3s, max-width .2s;
		overflow-y: scroll;
		flex-direction: column !important;
		backdrop-filter: blur(10px);
		background-color: rgba(250,250,250,0.5);
	}
	#stylus-edit #header > :not(#basic-info) {
		max-height: 0;
		overflow: hidden;
		transition: max-height .2s;
	}
	#stylus-edit #basic-info {
		margin-bottom: 0;
	}
	#stylus-edit #header:hover {
		opacity: 1;
		transform: scale(1);
		max-height: calc(100vh - 30px) !important;
	}
	#stylus-edit #header:hover > :not(#basic-info) {
		max-height: calc(100vh - 30px);
		overflow: visible;
		flex-wrap: nowrap;
	}
	#stylus-edit #actions > div {
		margin-top: 1rem;
	}
	#stylus-edit #details-wrapper {
		flex-direction: column !important;
	}
	#stylus-edit #heading {
		display: none;
	}
	#stylus-edit #sections {
		padding-left: 0 !important;
	}
	#stylus-edit .CodeMirror-scroll {
		max-height: 100vh !important;
	}
	/* Add right padding due to width of popup */
	#stylus-edit .CodeMirror pre.CodeMirror-line > span, 
	#stylus-edit .CodeMirror pre.CodeMirror-line-like > span {
		padding-right: 400px !important;
		box-sizing: content-box;		
	}
	
}