shy-toolbar.css (9313B)
1 /*== ShyFox Toolbar ================================================================================================================================= 2 3 Tab bar has been transformed into vertical toolbar on the right side of the window 4 5 6 --- JUST IMPORTANT THINGS --------------------------------------------------------------------------------------------------------------------------- 7 8 */ 9 10 /* if toolbar is not hidden, this window is not floating popup and not in fullscreen video */ 11 #main-window:not(:is([titlepreface*=""], [titlepreface*=""])):not([chromehidden]:not([chromehidden=""]), [popup-window]):not([inDOMFullscreen="true"]){ 12 /* set right margin to toolbar width */ 13 --right-margin: var(--toolbar-button-wdt); 14 } 15 16 /* hide some things */ 17 #tabbrowser-tabs, /* native tabs */ 18 #alltabs-button, /* all tabs button */ 19 #private-browsing-indicator-with-label, /* private mode indicator */ 20 .titlebar-spacer 21 22 {display: none} 23 24 /* 25 26 --- TOOLBAR SHOWN ----------------------------------------------------------------------------------------------------------------------------------- 27 28 */ 29 30 /* styles for tabs toolbar and buttons */ 31 #TabsToolbar, 32 #PanelUI-menu-button, 33 #unified-extensions-button 34 { 35 position: fixed; 36 z-index: 1 !important; 37 38 width: var(--toolbar-button-wdt); 39 right: 0px; 40 41 transition: var(--transition) !important; 42 } 43 44 /* styles for menu button */ 45 #PanelUI-menu-button{ 46 top: 2px; 47 48 padding-right: 3px !important; 49 min-height: var(--toolbar-item-hgt) !important; 50 min-width: var(--toolbar-button-wdt) !important; 51 52 /* fit button size to other buttons in toolbar */ 53 .toolbarbutton-badge-stack{ 54 padding: calc((var(--tab-min-height) - 16px) / 2) !important; 55 } 56 } 57 58 /* styles for extensions button */ 59 #unified-extensions-button{ 60 top: var(--toolbar-item-hgt); 61 opacity: 1 !important; 62 63 /* fit button size to other buttons in toolbar */ 64 & > .toolbarbutton-icon { 65 width: var(--toolbar-button-wdt) !important; 66 height: var(--toolbar-item-hgt) !important; 67 scale: 0.88; 68 padding: 10.5px !important; 69 border-radius: calc(var(--rounding) * 1.136363636) !important; 70 } 71 } 72 73 /* styles for tabs toolbar */ 74 #TabsToolbar{ 75 bottom: 2px; 76 top: 2px; 77 background-color: transparent !important; 78 padding-top: calc(var(--toolbar-item-hgt) * 2 + 3px) !important; 79 } 80 81 /* vertical tabs toolbar orientation */ 82 #TabsToolbar-customization-target{ 83 position: absolute; 84 85 opacity: var(--dyn-opct); 86 87 right: 0; 88 top: calc(var(--toolbar-item-hgt) * 2) !important; 89 bottom: 0; 90 91 display: flex !important; 92 flex-direction: column !important; 93 justify-content: center !important; 94 align-content: center !important; 95 width: var(--toolbar-button-wdt) !important; 96 97 & > * {padding: 3px !important;} 98 99 /* bookmarks inside toolbar */ 100 #PlacesToolbar {width: 40px !important;} 101 102 /* searchbar inside toolbar */ 103 --searchbar-hgt: 170px; 104 #search-container{ 105 margin-inline: 0px !important; 106 margin-block: 2px !important; 107 padding: 5px !important; 108 padding-block: 0px !important; 109 110 min-width: var(--toolbar-button-wdt) !important; 111 width: var(--toolbar-button-wdt) !important; 112 min-height: var(--toolbar-item-hgt) !important; 113 max-height: var(--searchbar-hgt) !important; 114 115 #searchbar {height: var(--searchbar-hgt) !important;} 116 117 .searchbar-search-button, .search-go-container {position: absolute} 118 .searchbar-search-button {margin-top: 5px !important;} 119 .search-go-container { 120 margin-top: calc(var(--searchbar-hgt) - 33px ) !important; 121 margin-left: 1.48px !important; 122 } 123 124 .searchbar-textbox{ 125 writing-mode: vertical-rl; 126 text-orientation: mixed; 127 padding-inline-start: 25px !important; 128 padding-inline-end: 35px !important; 129 cursor: vertical-text !important; 130 } 131 } 132 } 133 134 /* space for window controls */ 135 #main-window:not([titlepreface*=""]){ 136 #TabsToolbar, 137 #PanelUI-menu-button, 138 #unified-extensions-button 139 { 140 margin-top: var(--buttonbox-right-hgt) !important; 141 } 142 } 143 144 /* 145 146 --- TOOLBAR HIDDEN ---------------------------------------------------------------------------------------------------------------------------------- 147 148 */ 149 150 /* activate style when toolbar hidden or clean mode enabled (and not in customizing page) */ 151 #main-window:is([titlepreface*=""], [titlepreface*=""]):not([customizing]){ 152 153 /* styles for tabs toolbar and buttons */ 154 #TabsToolbar, 155 #PanelUI-menu-button, 156 #unified-extensions-button 157 { 158 top: calc( 159 var(--margin) 160 + var(--top-margin) 161 ); 162 163 right: calc( 164 var(--right-margin) 165 + var(--panel-hide-ldg) 166 - var(--toolbar-button-wdt) 167 ); 168 169 bottom: auto; 170 z-index: 3 !important; 171 } 172 173 /* styles for tabs toolbar */ 174 #TabsToolbar{ 175 top: calc( 176 var(--margin) 177 + var(--top-margin) 178 - 3px 179 ); 180 181 border-radius: var(--big-rounding); 182 183 /* hover target (invisible box between window edge and panel) */ 184 &::before{ 185 content: ""; 186 position: absolute; 187 z-index: -999; 188 background-color: var(--debug-col); 189 190 width: 500%; 191 height: 100%; 192 left: 0px; 193 top: 0px; 194 } 195 196 /* indication bar (line on window edge) */ 197 &::after{ 198 content: ""; 199 position: absolute; 200 transition: var(--transition); 201 202 right: calc( 203 100% 204 - var(--panel-hide-ldg) 205 - var(--margin) 206 + var(--hide-bar-padding) 207 ); 208 width: calc(var(--margin) - var(--hide-bar-padding) * 2); 209 height: calc(100% - var(--hide-bar-wdt-pad)); 210 top: calc(var(--hide-bar-wdt-pad) / 2); 211 212 border-radius: var(--rounding); 213 background-color: var(--bt-col); 214 opacity: var(--hide-bar-opct); 215 } 216 } 217 218 /* make all panel content invisible (it will visible when hover) */ 219 :is(#PanelUI-menu-button, #unified-extensions-button) > *, 220 #TabsToolbar-customization-target > *:not(#tabbrowser-tabs) { 221 transition: var(--transition) !important; 222 opacity: 0; 223 } 224 225 #TabsToolbar-customization-target{ 226 /* make the toolbar height dynamic */ 227 position: relative !important; 228 top: 0px !important; 229 padding-bottom: 3px !important; 230 231 /* styled spacer */ 232 toolbarspring{ 233 background-color: color-mix(in srgb, var(--bt-col) 15%, var(--debug-col-2)) !important; 234 border-radius: var(--rounding) !important; 235 max-height: 1px !important; 236 padding: 1px !important; 237 scale: 0.75; 238 } 239 240 /* limit toolbar items width */ 241 & > toolbarbutton {margin-left: 1px !important;} 242 & > *:not(#tabbrowser-tabs) {max-width: var(--toolbar-button-wdt) !important;} 243 } 244 245 /* styles for extensions button */ 246 #unified-extensions-button {margin-top: var(--toolbar-item-hgt) !important;} 247 248 /* show toolbar on hover or focus (if not in clean mode) */ 249 &:not([titlepreface*=""]):has( 250 #TabsToolbar:hover 251 .titlebar-buttonbox-container:not(:hover), 252 #TabsToolbar-customization-target *:not(#firefox-view-button, tab)[open], 253 #TabsToolbar-customization-target #searchbar:focus-within, 254 #TabsToolbar-customization-target :focus-visible, 255 #PanelUI-menu-button:focus-visible, 256 #unified-extensions-button:focus-visible, 257 #PanelUI-menu-button[open], 258 #PanelUI-menu-button:hover, 259 #unified-extensions-button[open], 260 #unified-extensions-button:hover 261 ) { 262 #TabsToolbar, 263 #PanelUI-menu-button, 264 #unified-extensions-button 265 { 266 right: calc(var(--right-margin) + var(--margin)); 267 268 & > *:not(.titlebar-buttonbox-container), #TabsToolbar-customization-target > * {opacity: 1 !important;} 269 } 270 #TabsToolbar{ 271 width: calc(var(--toolbar-button-wdt) + 4px) !important; 272 padding-right: 0px !important; 273 274 background-color: var(--tb-col) !important; 275 276 border: var(--outline) !important; 277 outline: var(--shadow) !important; 278 279 &::after{opacity: 0} 280 } 281 282 #PanelUI-menu-button, 283 #unified-extensions-button{ 284 margin-right: 2px !important; 285 } 286 } 287 288 /* downloads progress indicator bar */ 289 &:has(#downloads-button[progress="true"]){ 290 #TabsToolbar::after{ 291 background: linear-gradient( 292 to top, 293 var(--shy-color) 0 var(--shy-download-pcent), 294 var(--bt-col) var(--shy-download-pcent) 100% 295 ) !important; 296 } 297 } 298 } 299 300 /* 301 302 --- CUSTOMIZING PAGE -------------------------------------------------------------------------------------------------------------------------------- 303 304 */ 305 306 #main-window[customizing]{ 307 #TabsToolbar{ 308 min-width: 0px !important; 309 top: 50px !important; 310 bottom: 10px !important; 311 right: 10px !important; 312 313 border-radius: var(--big-rounding) !important; 314 315 background-color: var(--bg-col) !important; 316 } 317 318 #PanelUI-menu-button{ 319 top: 50px !important; 320 right: 10px !important; 321 } 322 323 #TabsToolbar-customization-target toolbarpaletteitem {width: 46px !important;} 324 #wrapper-search-container {max-height: var(--searchbar-hgt) !important;} 325 #wrapper-unified-extensions-button {opacity: 1 !important;} 326 327 #unified-extensions-button{ 328 top: 90px !important; 329 right: 10px !important; 330 .toolbarbutton-icon {opacity: 0.5 !important;} 331 } 332 }