shy-navbar.css (10061B)
1 /*== ShyFox Navbar ================================================================================================================================== 2 3 Navigation bar on top of the window 4 5 6 --- JUST IMPORTANT THINGS --------------------------------------------------------------------------------------------------------------------------- 7 8 */ 9 10 /* local variables */ 11 :root{ 12 --navbar-real-wdt: var(--navbar-wdt); 13 } 14 15 /* if navbar is not hidden, this window is not floating popup and not in fullscreen video */ 16 #main-window:not(:is([titlepreface*=""], [titlepreface*=""])):not([chromehidden]:not([chromehidden=""]), [popup-window]):not([inDOMFullscreen="true"]){ 17 /* set top margin to navbar height */ 18 --top-margin: calc(var(--toolbar-item-hgt)) !important; 19 } 20 21 /* padding tweak */ 22 .toolbaritem-combined-buttons:not([widget-type="button-and-view"], [widget-type="custom"]), .toolbaritem-menu-buttons { 23 margin-inline-end: var(--toolbar-start-end-padding) !important; 24 } 25 #nav-bar-overflow-button {margin-inline-end: calc(var(--toolbar-start-end-padding) / 2) !important;} 26 27 /* limit items height */ 28 #nav-bar-customization-target > * {max-height: var(--toolbar-item-hgt) !important;} 29 #nav-bar-customization-target {height: var(--toolbar-item-hgt) !important;} 30 31 #downloadsFooterButtons toolbarseparator { 32 margin-top: 6px !important; 33 padding-bottom: 2px !important; 34 } 35 36 /* 37 38 --- NAVBAR SHOWN ------------------------------------------------------------------------------------------------------------------------------------ 39 40 */ 41 42 #nav-bar{ 43 position: fixed !important; 44 z-index: 3 !important; 45 46 transition: var(--transition) !important; 47 48 background-color: transparent !important; 49 border-top: 0px solid transparent !important; 50 51 top: 0px; 52 left: var(--left-margin) !important; 53 right: auto !important; 54 55 & > * {opacity: var(--dyn-opct);} 56 } 57 58 /* centered navbar text */ 59 #urlbar:not(:is( 60 [breakout-extend], [focused], [open], 61 :focus-within 62 ) ) { 63 #urlbar-input {text-align: center !important} 64 } 65 66 /* tab loading progress in urlbar background */ 67 #main-window:not([customizing]):not([titlepreface*=""]):has(.tabbrowser-tab[selected][busy]) #urlbar:not(:is([focused], [open], [breakout-extend])) :is(#urlbar-background, .urlbar-background){ 68 background: linear-gradient( 69 to right, 70 color-mix(in srgb, var(--shy-color) 10%, transparent) 0 var(--shy-tab-load-pcent), 71 color-mix(in srgb, var(--bt-col) 10%, transparent) var(--shy-tab-load-pcent) 100% 72 ) !important; 73 } 74 75 /* space for window controls and magic width calculations (это пиздец) */ 76 #main-window:not([customizing])[titlepreface*=""]:not(:is([titlepreface*=""], [titlepreface*=""])){ 77 #nav-bar{ 78 margin-right: calc(var(--buttonbox-right-wdt) - var(--nav-rgt-btnbx-margin)); 79 width: calc( 80 100vw 81 - var(--left-margin) 82 - var(--right-margin) 83 - var(--buttonbox-right-wdt) 84 + var(--nav-rgt-btnbx-margin) 85 ) !important; 86 } 87 } 88 89 #main-window:not([customizing]):not([titlepreface*=""]):not(:is([titlepreface*=""], [titlepreface*=""])){ 90 #nav-bar{ 91 margin-right: calc(var(--buttonbox-right-wdt) - var(--nav-rgt-btnbx-button)); 92 width: calc( 93 100vw 94 - var(--left-margin) 95 - var(--right-margin) 96 - var(--buttonbox-right-wdt) 97 + var(--nav-rgt-btnbx-button) 98 ) !important; 99 } 100 } 101 102 #main-window:not([customizing])[titlepreface*=""]:not(:is([titlepreface*=""], [titlepreface*=""])){ 103 #nav-bar{ 104 margin-left: calc(var(--buttonbox-left-wdt) - var(--nav-lft-btnbx-margin)); 105 width: calc( 106 100vw 107 - var(--left-margin) 108 - var(--right-margin) 109 - var(--buttonbox-left-wdt) 110 + var(--nav-lft-btnbx-margin) 111 - var(--buttonbox-right-wdt) 112 + var(--nav-rgt-btnbx-button) 113 ) !important; 114 } 115 } 116 117 #main-window:not([customizing])[titlepreface*=""][titlepreface*=""]:not(:is([titlepreface*=""], [titlepreface*=""])){ 118 #nav-bar{ 119 width: calc( 120 100vw 121 - var(--left-margin) 122 - var(--right-margin) 123 - var(--buttonbox-left-wdt) 124 + var(--nav-lft-btnbx-margin) 125 - var(--buttonbox-right-wdt) 126 + var(--nav-rgt-btnbx-margin) 127 ) !important; 128 } 129 } 130 131 /* 132 133 --- NAVBAR HIDDEN ----------------------------------------------------------------------------------------------------------------------------------- 134 135 */ 136 137 138 /* activate style when navbar hidden or clean mode enabled (and not in customizing page) */ 139 #main-window:is([titlepreface*=""], [titlepreface*=""]):not([customizing]){ 140 141 #nav-bar{ 142 overflow: visible !important; 143 z-index: 4 !important; 144 145 border-radius: var(--big-rounding); 146 147 width: var(--navbar-real-wdt) !important; 148 max-width: calc( 149 100vw 150 - var(--left-margin) 151 - var(--right-margin) 152 ); 153 154 top: calc( 155 var(--margin) 156 + var(--panel-hide-ldg) 157 - var(--toolbar-item-hgt) 158 ); 159 160 left: calc( 161 ( 162 100vw 163 - var(--navbar-real-wdt) 164 + var(--left-margin) 165 - var(--right-margin) 166 ) / 2 167 ) !important; 168 169 /* make all panel content invisible (it will visible when hover) */ 170 #nav-bar-customization-target > *:not(#unified-extensions-button), 171 #nav-bar-overflow-button 172 { 173 transition: var(--transition) !important; 174 opacity: 0 !important; 175 } 176 177 /* hover target (invisible box between window edge and panel) */ 178 #nav-bar-customization-target::before{ 179 content: ""; 180 position: absolute; 181 z-index: -999; 182 background-color: var(--debug-col); 183 height: 500%; 184 width: 100%; 185 bottom: 0px; 186 } 187 188 /* indication bar (line on window edge) */ 189 &::before{ 190 content: ""; 191 position: absolute; 192 transition: var(--transition); 193 194 top: calc( 195 100% 196 - var(--panel-hide-ldg) 197 - var(--margin) 198 + var(--hide-bar-padding) 199 ); 200 201 height: calc(var(--margin) - var(--hide-bar-padding) * 2); 202 width: calc(100% - var(--hide-bar-wdt-pad)); 203 left: calc(var(--hide-bar-wdt-pad) / 2); 204 205 border-radius: var(--rounding); 206 background-color: var(--bt-col); 207 opacity: var(--hide-bar-opct); 208 } 209 } 210 211 /* tab loading progress bar */ 212 &:has(.tabbrowser-tab[selected][busy]) #nav-bar::before{ 213 background: linear-gradient( 214 to right, 215 var(--shy-color) 0 var(--shy-tab-load-pcent), 216 var(--bt-col) var(--shy-tab-load-pcent) 100% 217 ) !important; 218 } 219 220 /* tab loading progress on whole panel */ 221 &:has(.tabbrowser-tab[selected][busy]) #nav-bar::after{ 222 content: ""; 223 position: absolute; 224 pointer-events: none; 225 z-index: -999; 226 width: 100%; 227 height: 100%; 228 bottom: 0px; 229 border-radius: var(--big-rounding); 230 opacity: 0; 231 background: linear-gradient( 232 to right, 233 var(--shy-color) 0 var(--shy-tab-load-pcent), 234 transparent var(--shy-tab-load-pcent) 100% 235 ); 236 } 237 238 /* Keep the real input focusable for Ctrl+L, Alt+D and F6. Popovers paint 239 above their ancestors, so they also need their own hidden opacity. */ 240 #urlbar { 241 opacity: 0 !important; 242 pointer-events: none; 243 } 244 245 246 /* show navbar on hover or focus */ 247 &:has( 248 #nav-bar-customization-target:hover, 249 #nav-bar-customization-target :focus-visible, 250 #nav-bar-customization-target *:not(:is(#unified-extensions-button, #firefox-view-button))[open], 251 #nav-bar-customization-target #searchbar:focus-within, 252 #urlbar:focus-within, 253 #urlbar:is([focused], [open], [breakout-extend]), 254 #nav-bar-overflow-button[open], 255 #nav-bar-overflow-button:hover 256 ) { 257 #nav-bar{ 258 259 #urlbar { 260 opacity: 1 !important; 261 pointer-events: auto; 262 /* The popover retains its off-screen anchor when only the navbar's 263 position changes. Correct the vertical anchor. */ 264 &[popover] { 265 top: var(--shy-urlbar-top, calc(var(--top-margin) + var(--margin) + 266 (var(--toolbar-item-hgt) - var(--urlbar-height, 32px)) / 2)) !important; 267 margin-block: 0 !important; 268 } 269 } 270 271 272 top: calc(var(--top-margin) + var(--margin)); 273 274 background-color: var(--tb-col) !important; 275 276 /* corners, shadow */ 277 border: var(--outline) !important; 278 outline: var(--shadow) !important; 279 280 #nav-bar-customization-target > *:not([disabled="true"]), 281 #nav-bar-overflow-button {opacity: 1 !important;} 282 #nav-bar-customization-target > *[disabled="true"] {opacity: 0.5 !important;} 283 284 &::before {opacity: 0;} 285 &::after {opacity: 0.1;} /* opacity of tab load progress indicator */ 286 } 287 } 288 289 /* Keyboard focus must never wait for the hover animation. */ 290 &:has(#urlbar:is(:focus-within, [focused], [open])) { 291 #nav-bar, 292 #nav-bar-customization-target > * { 293 transition: none !important; 294 } 295 } 296 297 /* hide all */ 298 &[titlepreface*=""]{ 299 #nav-bar-customization-target > *:not(#urlbar-container, #unified-extensions-button) {display: none !important;} 300 } 301 302 /* adaptive navbar width */ 303 @media (max-width: 1000px) { 304 #nav-bar{ 305 --navbar-real-wdt: calc( 306 100vw 307 - var(--margin) * 2 308 - var(--right-margin) 309 - var(--buttonbox-left-wdt) 310 - var(--buttonbox-right-wdt) 311 ) !important; 312 313 max-width: none !important; 314 left: calc( 315 var(--margin) 316 + var(--buttonbox-left-wdt) 317 ) !important; 318 } 319 } 320 } 321 322 /* 323 324 --- CUSTOMIZING PAGE -------------------------------------------------------------------------------------------------------------------------------- 325 326 */ 327 328 #main-window[customizing]{ 329 #nav-bar{ 330 left: 140px !important; 331 right: 140px !important; 332 333 width: calc(100vw - 280px) !important; 334 335 top: var(--margin) !important; 336 border-radius: var(--big-rounding) !important; 337 338 background-color: var(--bg-col) !important; 339 } 340 341 #urlbar-background, .urlbar-background, #searchbar {background-color: var(--tb-col) !important;} 342 }