Stylus Editor - Floating Sidebar by freeplay

/* ==UserStyle==
@name           Stylus Editor - Floating Sidebar
@version        1.0.4
@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 select animation  "Expand Animation Type" ["Default", "Reduced", "None"]

==/UserStyle== */

/* Update 1.0.4
- Fixes + smaller sidebar on smaller screams
*/
@-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: hidden scroll;
			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;
			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;
                    }
                }
			}
			& > 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;
				#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 */
					pre.CodeMirror-line, pre.CodeMirror-line-like {
						& > span {
							padding-right: 400px !important;
							box-sizing: content-box;	
						}
					}
					
				}
			}
		}
	}
}