Stylus Editor - Floating Sidebar by freeplay

/* ==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);
							}
						}
					}
				}
			}
		}
	}
}