shy-sidebar.css (9090B)
1 /*== ShyFox Sidebar ================================================================================================================================= 2 3 Styles for sidebar 4 5 6 --- JUST IMPORTANT THINGS --------------------------------------------------------------------------------------------------------------------------- 7 8 */ 9 10 /* reserve space for bookmarks toolbar */ 11 :root{ 12 --little-gap: calc(var(--margin) / 1.5); 13 --bookmarks-hgt: var(--toolbar-item-hgt); 14 } 15 16 /* remove space reserved for bookmarks toolbar if it hidden */ 17 #main-window:has(#PersonalToolbar[collapsed="true"]) { 18 --little-gap: 0px; 19 --bookmarks-hgt: 0px; 20 } 21 22 /* if sidebar is not hidden or clean mode not enabled, this window is not floating popup and not in fullscreen video */ 23 #main-window:not(:is([titlepreface*=""], [titlepreface*=""])):not([chromehidden]:not([chromehidden=""]), [popup-window]):not([inDOMFullscreen="true"]){ 24 /* set left margin to sidebar width */ 25 --left-margin: var(--sdbr-wdt) !important; 26 } 27 28 /* hide sidebar splitter */ 29 #sidebar-splitter {display: none} 30 31 /* 32 33 --- SIDEBAR SHOWN ----------------------------------------------------------------------------------------------------------------------------------- 34 35 */ 36 37 /* styles for both sidebar and bookmarks toolbar */ 38 #sidebar-box, 39 #PersonalToolbar 40 { 41 position: fixed; 42 overflow: visible; 43 z-index: 2 !important; 44 45 min-width: 0px !important; 46 max-width: 100vw !important; 47 48 left: 0px; 49 50 transition: var(--transition) !important; 51 background-color: transparent !important; 52 53 padding-top: 0 !important; 54 55 & > * { 56 opacity: var(--dyn-opct); 57 transition: var(--transition) !important; 58 } 59 } 60 61 /* styles for sidebar */ 62 #sidebar-box{ 63 64 top: calc( 65 var(--margin) / 2 66 + var(--bookmarks-hgt) 67 ); 68 69 height: calc( 70 100vh 71 - var(--margin) * 2 72 + var(--margin) / 2 73 - var(--bookmarks-hgt) 74 )!important; 75 76 width: var(--sdbr-wdt) !important; 77 } 78 79 /* drag window by empty space in bookmarks toolbar */ 80 #PersonalToolbar > *, #PlacesToolbarItems .bookmark-item[style="visibility: hidden;"]{ 81 -moz-window-dragging: drag !important; 82 background-color: var(--debug-col-2) !important; 83 } 84 85 /* styles for bookmarks toolbar */ 86 #PersonalToolbar{ 87 visibility: visible !important; 88 height: var(--toolbar-item-hgt) !important; 89 top: 0px; 90 border-radius: var(--rounding); 91 margin-left: var(--buttonbox-left-wdt); 92 93 width: calc( 94 var(--sdbr-wdt) 95 - var(--buttonbox-left-wdt) 96 ) !important; 97 98 padding-top: 2px !important; 99 padding-bottom: 2px !important; 100 101 &[collapsed="true"] {display: none} 102 } 103 104 /* padding for screenshot control buttons */ 105 #main-window:not([titlepreface*=""]):has(#screenshotsPagePanel:not([hidden])){ 106 #sidebar-box{ 107 padding-bottom: calc( 108 var(--screenshot-tool-hgt) 109 - var(--margin) 110 + var(--bottom-margin) 111 ) !important; 112 } 113 } 114 115 /* 116 117 --- SIDEBAR HIDDEN ---------------------------------------------------------------------------------------------------------------------------------- 118 119 */ 120 121 /* activate style when sidebar hidden or clean mode enabled (and not in customizing page) */ 122 #main-window:is([titlepreface*=""], [titlepreface*=""]):not([customizing]){ 123 124 /* styles for both sidebar and bookmaarks toolbar */ 125 #sidebar-box, 126 #PersonalToolbar 127 { 128 z-index: 2 !important; 129 width: var(--sdbr-wdt) !important; 130 131 left: calc( 132 var(--left-margin) 133 + var(--panel-hide-ldg) 134 - var(--sdbr-wdt) 135 ) !important; 136 137 border-radius: var(--big-rounding) !important; 138 139 /* hover target (invisible box between window edge and panel) */ 140 &::before{ 141 content: ""; 142 position: absolute; 143 z-index: -999; 144 background-color: var(--debug-col); 145 146 width: 150%; 147 height: 100%; 148 right: 0px; 149 top: 0px; 150 } 151 152 /* make all panel content invisible (it will visible when hover) */ 153 & > * { 154 transition: var(--transition) !important; 155 opacity: 0; 156 } 157 } 158 159 /* styles for sidebar */ 160 #sidebar-box{ 161 height: calc( 162 100vh 163 - var(--bookmarks-hgt) 164 - var(--little-gap) 165 - var(--top-margin) 166 - var(--bottom-margin) 167 - var(--margin) * 2 168 ) !important; 169 170 top: calc( 171 var(--top-margin) 172 + var(--margin) 173 + var(--bookmarks-hgt) + var(--little-gap) 174 ); 175 176 /* indication bar (line on window edge) */ 177 &::after{ 178 content: ""; 179 position: absolute; 180 transition: var(--transition); 181 182 left: calc( 183 100% 184 - var(--panel-hide-ldg) 185 - var(--margin) 186 + var(--hide-bar-padding) 187 ); 188 189 width: calc(var(--margin) - var(--hide-bar-padding) * 2 ); 190 height: calc( 191 100% 192 - var(--hide-bar-wdt-pad) 193 + var(--bookmarks-hgt) 194 + var(--little-gap) 195 ); 196 197 bottom: calc(var(--hide-bar-wdt-pad) / 2); 198 border-radius: var(--rounding); 199 background-color: var(--bt-col); 200 opacity: var(--hide-bar-opct); 201 } 202 } 203 204 /* add rounded corners to sidebar content */ 205 #sidebar {border-radius: var(--big-rounding) !important;} 206 207 /* styles for bookmarks */ 208 #PersonalToolbar{ 209 top: calc(var(--top-margin) + var(--margin)); 210 margin-left: 0px !important; 211 overflow: visible !important; 212 213 padding-inline: 2px !important; 214 215 /* hover target between sidebar and bookmarks toolbar */ 216 &::after{ 217 content: ""; 218 z-index: 1; 219 position: absolute; 220 221 background-color: var(--debug-col); 222 opacity: 1 !important; 223 224 height: calc(var(--little-gap) + 4px); 225 bottom: calc(-2px - var(--little-gap)); 226 227 width: 150%; 228 229 right: 0px; 230 } 231 } 232 233 /* show sidebar on hover or focus (if not in clean mode) */ 234 &:not([titlepreface*=""]):has( 235 #sidebar-box:hover, 236 #sidebar-box:focus-within, 237 #PersonalToolbar:hover, 238 #PersonalToolbar *:not(#firefox-view-button)[open], 239 #sidebar-switcher-target[aria-expanded="true"] 240 ) { 241 #sidebar-box, 242 #PersonalToolbar 243 { 244 opacity: 1 !important; 245 left: calc(var(--left-margin) + var(--margin)) !important; 246 247 background-color: var(--bg-col) !important; 248 249 border: var(--outline) !important; 250 outline: var(--shadow) !important; 251 252 &::after{opacity: 0} 253 254 & > * {opacity: var(--dyn-opct);} 255 } 256 } 257 } 258 259 /* 260 261 --- CUSTOMIZING PAGE -------------------------------------------------------------------------------------------------------------------------------- 262 263 */ 264 265 #main-window[customizing]{ 266 #PersonalToolbar{ 267 top: 65px !important; 268 left: 20px !important; 269 margin-left: 0px !important; 270 271 border-radius: var(--big-rounding) !important; 272 273 background-color: var(--bg-col) !important; 274 } 275 276 /* remove text from bookmarks toolbar elements placeholder */ 277 #bookmarks-toolbar-placeholder .toolbarbutton-text {display: none !important;} 278 } 279 280 281 /* 282 283 --- NOT SIDEBERY ----------------------------------------------------------------------------------------------------------------------------------- 284 285 Styles when Sidebery is not opened 286 287 */ 288 289 /* hide sidebar header when Sidebery opened */ 290 #main-window:not([customizing]):has( 291 #sidebar-box:not([hidden])[sidebarcommand*="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] 292 ) { 293 #sidebar-header {display: none} 294 } 295 296 /* hide sidebar button on toolbar when sidebar opened */ 297 #main-window:not([customizing]):has( 298 #sidebar-box:not([hidden]) 299 ) { 300 #sidebar-button {display: none} 301 } 302 303 /* Keep normal tab management available when Sidebery is closed, unavailable, 304 or another sidebar (bookmarks/history) is selected. */ 305 @media not -moz-pref("sidebar.verticalTabs") { 306 #main-window:not([chromehidden]:not([chromehidden=""]), [popup-window]):not([customizing], [inDOMFullscreen="true"]):not(:has( 307 #sidebar-box:not([hidden])[sidebarcommand*="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] 308 )) { 309 --shy-native-tabs-height: 42px; 310 311 #tabbrowser-tabs { 312 display: flex !important; 313 position: fixed !important; 314 inset: auto !important; 315 top: var(--top-margin) !important; 316 left: var(--left-margin) !important; 317 width: max(100px, calc(100vw - var(--left-margin) - var(--right-margin))) !important; 318 height: var(--shy-native-tabs-height) !important; 319 min-height: 0 !important; 320 padding: 0 !important; 321 margin: 0 !important; 322 background: var(--tb-col) !important; 323 color: var(--bt-col) !important; 324 border-radius: var(--rounding) !important; 325 pointer-events: auto !important; 326 opacity: 1 !important; 327 } 328 } 329 } 330 331 /* A closed sidebar must not leave an empty 300px column. */ 332 #main-window:has(#sidebar-box[hidden]) { 333 --left-margin: var(--margin) !important; 334 #PersonalToolbar {display: none !important;} 335 } 336 337 /* Firefox's revamped sidebar has its own launcher alongside Sidebery. */ 338 @media not -moz-pref("sidebar.verticalTabs") { 339 #sidebar-container, #sidebar-main, sidebar-main, #sidebar-launcher-splitter { 340 display: none !important; 341 } 342 }