├── Firefox-Browser_UI_Custom-01.png ├── Firefox-Browser_UI_Custom-02.png ├── Firefox-Browser_UI_Custom-03.png ├── Firefox-Browser_UI_Custom-04.png ├── Firefox-Browser_UI_Custom-05.png ├── Firefox-Browser_UI_Custom-06.png ├── Firefox-Browser_UI_Custom-07.png ├── Firefox-Browser_UI_Custom-08.png ├── Firefox-Browser-UI-Custom-Nightly-W10-Dark.png ├── Firefox-Browser-UI-Custom-Developer-W10-Light.png ├── README.md └── userChrome.css /Firefox-Browser_UI_Custom-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gabeweb/Firefox-Browser-UI-Custom/HEAD/Firefox-Browser_UI_Custom-01.png -------------------------------------------------------------------------------- /Firefox-Browser_UI_Custom-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gabeweb/Firefox-Browser-UI-Custom/HEAD/Firefox-Browser_UI_Custom-02.png -------------------------------------------------------------------------------- /Firefox-Browser_UI_Custom-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gabeweb/Firefox-Browser-UI-Custom/HEAD/Firefox-Browser_UI_Custom-03.png -------------------------------------------------------------------------------- /Firefox-Browser_UI_Custom-04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gabeweb/Firefox-Browser-UI-Custom/HEAD/Firefox-Browser_UI_Custom-04.png -------------------------------------------------------------------------------- /Firefox-Browser_UI_Custom-05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gabeweb/Firefox-Browser-UI-Custom/HEAD/Firefox-Browser_UI_Custom-05.png -------------------------------------------------------------------------------- /Firefox-Browser_UI_Custom-06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gabeweb/Firefox-Browser-UI-Custom/HEAD/Firefox-Browser_UI_Custom-06.png -------------------------------------------------------------------------------- /Firefox-Browser_UI_Custom-07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gabeweb/Firefox-Browser-UI-Custom/HEAD/Firefox-Browser_UI_Custom-07.png -------------------------------------------------------------------------------- /Firefox-Browser_UI_Custom-08.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gabeweb/Firefox-Browser-UI-Custom/HEAD/Firefox-Browser_UI_Custom-08.png -------------------------------------------------------------------------------- /Firefox-Browser-UI-Custom-Nightly-W10-Dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gabeweb/Firefox-Browser-UI-Custom/HEAD/Firefox-Browser-UI-Custom-Nightly-W10-Dark.png -------------------------------------------------------------------------------- /Firefox-Browser-UI-Custom-Developer-W10-Light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gabeweb/Firefox-Browser-UI-Custom/HEAD/Firefox-Browser-UI-Custom-Developer-W10-Light.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Firefox-Browser-UI-Custom 2 | 3 | A custom userChrome.css and userContent.css now for Firefox 76+ (May 2020). For personal purpose only. 4 | 5 | ![Screenshot](Firefox-Browser_UI_Custom-01.png) 6 | (Firefox Browser UI Custom - Firefox Browser 78 Nigthly - Windows 10 Pro Dark Theme) 7 | 8 | 9 | ![Screenshot](Firefox-Browser_UI_Custom-02.png) 10 | (Firefox Browser UI Custom - Firefox Browser 78 Nigthly - Windows 10 Pro Dark Theme) 11 | 12 | ![Screenshot](Firefox-Browser_UI_Custom-03.png) 13 | (Firefox Browser UI Custom - Firefox Browser 78 Nigthly - Windows 10 Pro Dark Theme) 14 | 15 | ![Screenshot](Firefox-Browser_UI_Custom-04.png) 16 | (Firefox Browser UI Custom - Firefox Browser 78 Nigthly - Windows 10 Pro Light Theme) 17 | 18 | ![Screenshot](Firefox-Browser_UI_Custom-05.png) 19 | (Firefox Browser UI Custom - Firefox Browser 78 Nigthly - Windows 10 Pro Light Theme) 20 | 21 | ![Screenshot](Firefox-Browser_UI_Custom-06.png) 22 | (Firefox Browser UI Custom - Firefox Browser 78 Nigthly - Windows 10 Pro Light Theme) 23 | 24 | ![Screenshot](Firefox-Browser_UI_Custom-07.png) 25 | (Firefox Browser UI Custom - Private Browsing Window Firefox Browser 78 Nigthly - Windows 10 Pro Dark Theme) 26 | 27 | ![Screenshot](Firefox-Browser_UI_Custom-08.png) 28 | (Firefox Browser UI Custom - Private Browsing Window Firefox Browser 78 Nigthly - Windows 10 Pro Light Theme) 29 | 30 | # Features? 31 | 32 | Oh, yes, some little things: 33 | 34 | * Contextual menus with (almost) adaptable background color 35 | * Custom fill colors for some icons 36 | * Customized url-bar 37 | * Customized extensions widget panel 38 | * Customized bookmarks popup panel 39 | * Various small custom/fixes for UI 40 | * **New:** Private Browsing Window custom! 41 | 42 | 43 | # How-To? 44 | 45 | - Copy the [userChrome.css](https://github.com/gabeweb/Firefox-Browser-UI-Custom/blob/master/userChrome.css) file (now for Firefox Browser 76+ version) (right-click -> Save Link As...) to your Firefox profile chrome folder. Rename it as "userChrome.css". 46 | 47 | ![Screenshot](https://github.com/gabeweb/Firefox-Quantum-UI-Lite/blob/master/firefox-quantum-ui_lite_how-to_01.png) 48 | 49 | ![Screenshot](https://github.com/gabeweb/Firefox-Quantum-UI-Lite/blob/master/firefox-quantum-ui_lite_how-to_02.png) 50 | 51 | - Restart Firefox. 52 | 53 | 54 | This userChrome.css file use code snippets collected from other sources, so the credits (mostly) are for their authors: 55 | 56 | * https://github.com/axydavid/FirefoxUI 57 | * https://github.com/gabeweb/Firefox-Quantum-UI-Lite 58 | * https://github.com/muckSponge/MaterialFox 59 | * https://github.com/coekuss/quietfox 60 | * https://github.com/Timvde/UserChrome-Tweaks 61 | * https://www.reddit.com/r/FirefoxCSS/ 62 | 63 | 64 | # Bugs? 65 | 66 | Yes, the themes are forks of other projects, so there are many bugs in the code, for example the context menus do not properly reflect the shadows in all environments, nor does the background color of the side panel context menus change (Firefox Browser Nightly 78 "breaks" some things). 67 | 68 | I'm not a programmer, but at least I tried to make a new theme for al Firefox users 🤘🏻 69 | 70 | 71 | Suggestions and ideas are very, very welcome! 72 | -------------------------------------------------------------------------------- /userChrome.css: -------------------------------------------------------------------------------- 1 | /* Fullscreen video warning. IMPORTANT: if used directly in 2 | userChrome.css, it must be placed above the namespace line. */ 3 | @-moz-document url(chrome://browser/content/browser.xhtml) { 4 | #fullscreen-warning { 5 | display: none !important; 6 | } 7 | } 8 | 9 | /* 10 | 11 | Quietfox for Firefox 76 12 | 13 | https://github.com/coekuss/quietfox 14 | 15 | Thanks for using my file 16 | 17 | */ 18 | 19 | * { 20 | /* -------------------- 🎨 Customization 🎨 -------------------- */ 21 | ---corner-rounding: 5px; 22 | --button-corner-rounding: 4px; 23 | --menu-corner-rounding: 5px; 24 | --menu-item-height: 30px; 25 | --animation-speed: 0.15s; 26 | } 27 | 28 | 29 | @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 30 | 31 | 32 | /* This makes certain menus adapt to your toolbar text color. Can make menu text illegible in 33 | some transparent themes, remove if needed. */ 34 | panelview:not([extension]), 35 | .panel-arrowcontent { 36 | background-color: var(--toolbar-bgcolor) !important; 37 | color: var(--toolbar-color) !important; 38 | } 39 | /*-------------------------------------------------------------------*/ 40 | 41 | 42 | 43 | 44 | 45 | /* -------------------- Transitions for some things -------------------- */ 46 | toolbarbutton, 47 | .subviewbutton, 48 | stack, 49 | .toolbarbutton-icon, 50 | vbox 51 | { 52 | transition: background-color var(--animation-speed) !important; 53 | } 54 | 55 | 56 | /* -------------------- Style toolbar -------------------- */ 57 | .toolbarbutton-icon, .toolbarbutton-badge-stack { 58 | background-color: transparent !important; 59 | } 60 | 61 | toolbarbutton:not(#back-button)[open], .toolbarbutton-1:not(#back-button)[open] { 62 | background-color: var(--toolbarbutton-active-background); 63 | } 64 | 65 | #nav-bar .toolbarbutton-1 { 66 | margin-right: 2px !important; 67 | } 68 | 69 | .close-icon:not(.tab-close-button):hover { 70 | fill-opacity: 0.0 !important; 71 | } 72 | 73 | toolbarbutton:not(#back-button):not([disabled]):not([open]):hover, 74 | .toolbarbutton-1:not(#back-button):not([disabled]):not([open]):hover { 75 | background-color: var(--toolbarbutton-hover-background) !important; 76 | } 77 | 78 | .tab-close-button { 79 | transition: fill-opacity var(--animation-speed) !important; 80 | } 81 | 82 | .findbar-textbox:focus { 83 | border: 1px solid grey !important; 84 | } 85 | 86 | #BMB_bookmarksShowAll { 87 | display: none !important; 88 | } 89 | 90 | /* touch and normal density buttons */ 91 | 92 | :root:not([uidensity="compact"]) #back-button > .toolbarbutton-icon { 93 | background-color: transparent !important; 94 | border-color: var(--toolbarbutton-hover-background) !important; 95 | transition: background-color var(--animation-speed) !important; 96 | } 97 | 98 | :root:not([uidensity="compact"]) #back-button:not([disabled]):not([open]):hover > .toolbarbutton-icon { 99 | background-color: var(--toolbarbutton-hover-background) !important; 100 | box-shadow: none !important; 101 | } 102 | 103 | :root:not([uidensity="compact"]) #back-button:not([disabled]):not([open]):active > .toolbarbutton-icon { 104 | background-color: var(--toolbarbutton-active-background) !important; 105 | box-shadow: none !important; 106 | } 107 | 108 | :root:not([uidensity="compact"]) toolbarbutton:not(#back-button):not([disabled]):not([open]):active, 109 | .toolbarbutton-1:not(#back-button):not([disabled]):not([open]):active { 110 | background-color: var(--toolbarbutton-active-background) !important; 111 | } 112 | 113 | :root:not([uidensity="compact"]) #back-button[open] > .toolbarbutton-icon { 114 | background-color: var(--toolbarbutton-active-background) !important; 115 | } 116 | 117 | :root:not([uidensity="compact"]) #PersonalToolbar { /* bookmark bar */ 118 | height: 30px !important; 119 | } 120 | 121 | /* normal density buttons */ 122 | 123 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #nav-bar .toolbarbutton-1:not(#back-button) { 124 | margin-top: 4px !important; 125 | margin-bottom: 4px !important; 126 | margin-left: 0px !important; 127 | margin-right: 0px !important; 128 | padding-left: 3px !important; 129 | padding-right: 3px !important; 130 | } 131 | 132 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #nav-bar .toolbarbutton-1:not(#back-button) image { 133 | margin-bottom: 1px !important; 134 | } 135 | 136 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #back-button { 137 | margin-top: -1px !important; 138 | margin-bottom: -1px !important; 139 | } 140 | 141 | 142 | 143 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #identity-box, 144 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #tracking-protection-icon-container { 145 | padding-left: 8px !important; 146 | padding-right: 8px !important; 147 | } 148 | 149 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #identity-icon, 150 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #tracking-protection-icon-box { 151 | margin-left: 1px !important; 152 | margin-right: 1px !important; 153 | } 154 | 155 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #urlbar { 156 | height: 36px !important; 157 | margin-top: 0px !important; 158 | margin-bottom: 0px !important; 159 | padding-top: 0px !important; 160 | padding-bottom: 0px !important; 161 | } 162 | 163 | :root:not([uidensity="touch"]):not([uidensity="compact"]) .urlbar-icon:not(#pocket-button) { 164 | width: 34px !important; 165 | height: 36px !important; 166 | padding: 8px !important; 167 | } 168 | 169 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #pocket-button { 170 | width: 32px !important; 171 | height: 36px !important; 172 | padding: 8px 8px 6px 8px !important; 173 | } 174 | 175 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #contextual-feature-recommendation { 176 | width: 32px !important; 177 | height: 32px !important; 178 | padding: 2px !important; 179 | } 180 | 181 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #PanelUI-button { 182 | padding-right: 5px !important; 183 | padding-left: 5px !important; 184 | margin-left: 5px !important; 185 | } 186 | 187 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #library-animatable-box { 188 | margin-top: 4px !important; 189 | } 190 | 191 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #tabs-newtab-button { 192 | margin-left: -5px !important; 193 | padding-left: 2px !important; 194 | margin-bottom: 1px !important; 195 | padding-bottom: 1px !important; 196 | } 197 | 198 | /* compact density buttons */ 199 | 200 | :root[uidensity="compact"] #nav-bar .toolbarbutton-1 { 201 | margin-top: 4px !important; 202 | margin-bottom: 4px !important; 203 | padding: 0px 0px 0px 0px !important; 204 | } 205 | 206 | 207 | 208 | 209 | :root[uidensity="compact"] #nav-bar toolbaritem[animate] box { 210 | margin-top: 1px !important; 211 | } 212 | 213 | 214 | :root[uidensity="compact"] #back-button[open] { 215 | background-color: var(--toolbarbutton-active-background) !important; 216 | } 217 | 218 | :root[uidensity="compact"] #back-button:not([disabled]):not([open]):hover { 219 | background-color: var(--toolbarbutton-hover-background) !important; 220 | } 221 | :root[uidensity="compact"] #back-button:not([disabled]):not([open]):active { 222 | background-color: var(--toolbarbutton-active-background) !important; 223 | } 224 | 225 | :root[uidensity="compact"] #identity-box, 226 | :root[uidensity="compact"] #tracking-protection-icon-container { 227 | min-width: 2px !important; 228 | padding-left: 6px !important; 229 | padding-right: 6px !important; 230 | } 231 | 232 | :root[uidensity="compact"] #nav-bar{ 233 | padding-top: 1px !important; 234 | } 235 | 236 | 237 | :root[uidensity="compact"] #urlbar { 238 | height: 30px !important; 239 | margin-top: 0px !important; 240 | margin-bottom: 0px !important; 241 | padding-bottom: 0px !important; 242 | } 243 | 244 | 245 | 246 | :root[uidensity="compact"] .urlbar-icon:not(#pocket-button) { 247 | width: 28px !important; 248 | height: 30px !important; 249 | padding: 6px !important; 250 | } 251 | 252 | :root[uidensity="compact"] #pocket-button { 253 | width: 28px !important; 254 | height: 40px !important; 255 | padding: 7px 6px 5px 6px !important; 256 | } 257 | 258 | :root[uidensity="compact"] #contextual-feature-recommendation { 259 | width: 32px !important; 260 | height: 32px !important; 261 | padding: 2px !important; 262 | } 263 | 264 | :root[uidensity="compact"] #PersonalToolbar { 265 | height: 25px !important; 266 | } 267 | 268 | :root[uidensity="compact"] #library-animatable-box { 269 | margin-top: 5px !important; 270 | } 271 | 272 | :root[uidensity="compact"] #tabs-newtab-button { 273 | margin-left: -5px !important; 274 | margin-bottom: 1px !important; 275 | padding-bottom: 1px !important; 276 | } 277 | 278 | /* touch density buttons */ 279 | 280 | :root[uidensity="touch"] #nav-bar .toolbarbutton-1:not(#back-button) { 281 | margin-top: 5px !important; 282 | margin-bottom: 3px !important; 283 | padding-left: 0px !important; 284 | padding-right: 0px !important; 285 | } 286 | 287 | :root[uidensity="touch"] #stop-reload-button[animate] .toolbarbutton-animatable-image { 288 | margin-top: 2px !important; 289 | } 290 | 291 | :root[uidensity="touch"] #identity-box, 292 | :root[uidensity="touch"] #tracking-protection-icon-container { 293 | padding-left: 9px !important; 294 | padding-right: 9px !important; 295 | } 296 | 297 | 298 | :root[uidensity="touch"] #urlbar { 299 | height: 36px !important; 300 | margin-top: 0px !important; 301 | margin-bottom: 0px !important; 302 | } 303 | 304 | :root[uidensity="touch"] #nav-bar{ 305 | padding-top: 2px !important; 306 | } 307 | 308 | :root[uidensity="touch"] .urlbar-icon:not(#pocket-button) { 309 | width: 34px !important; 310 | height: 36px !important; 311 | padding: 9px !important; 312 | } 313 | 314 | :root[uidensity="touch"] #pocket-button { 315 | width: 34px !important; 316 | height: 36px !important; 317 | padding: 10px 7px 8px 7px !important; 318 | } 319 | 320 | :root[uidensity="touch"] #contextual-feature-recommendation { 321 | width: 32px !important; 322 | height: 33px !important; 323 | padding: 2px !important; 324 | } 325 | 326 | :root[uidensity="touch"] #PanelUI-button { 327 | padding-left: 5px !important; 328 | padding-right: 5px !important; 329 | } 330 | 331 | :root[uidensity="touch"] tab { 332 | height: 40px !important; 333 | } 334 | 335 | :root[uidensity="touch"] #library-animatable-box { 336 | margin-top: 7px !important; 337 | } 338 | 339 | :root[uidensity="touch"] #tabs-newtab-button { 340 | margin-left: -5px !important; 341 | margin-bottom: 2px !important; 342 | padding-right: 3px !important; 343 | padding-left: 3px !important; 344 | padding-bottom: 1px !important; 345 | } 346 | 347 | /* various */ 348 | .urlbar-input-box, 349 | #identity-box, 350 | #tracking-protection-icon-container, 351 | .urlbar-history-dropmarker, 352 | .urlbar-page-action, 353 | #reader-mode-button, 354 | [anonid=urlbar-go-button], 355 | .toolbarbutton-1 > stack, 356 | toolbarbutton:not(.titlebar-button):not([class^="findbar-find"]):not([class^="scrollbutton"]), 357 | .close-icon, 358 | #urlbar-go-button /* GABE FIXED */ 359 | { 360 | border-radius: var(--button-corner-rounding)!important; 361 | } 362 | 363 | 364 | .findbar-find-next { 365 | border-radius: 0px var(--button-corner-rounding) var(--button-corner-rounding) 0px !important; 366 | } 367 | 368 | .findbar-textbox { 369 | border-radius: var(--button-corner-rounding) 0px 0px var(--button-corner-rounding) !important; 370 | } 371 | 372 | .bookmark-item { 373 | padding-left: 7px !important; 374 | padding-right: 7px !important; 375 | padding-top: 3px !important; 376 | padding-bottom: 3px !important; 377 | margin-right: 0px !important; 378 | } 379 | 380 | /* style identity box */ 381 | #identity-box { 382 | margin-right: 0px !important; 383 | border-inline-end: none !important; /* GABE CUSTOM */ 384 | } 385 | 386 | /* style address bar */ 387 | #urlbar-background { 388 | background-color: transparent !important; 389 | border-color: transparent !important; /* COMMENT HERE TO ENABLE BORDER IR #urlbar */ 390 | border-radius: calc(1px + var(--button-corner-rounding)) !important; 391 | box-shadow: none !important; 392 | } 393 | 394 | #urlbar[breakout][breakout-extend] { 395 | top: 4px !important; 396 | left: 0px !important; 397 | padding: 0px 0px 0px 0px !important; 398 | height: 100% !important; 399 | width: 100% !important; 400 | } 401 | 402 | #urlbar[breakout][breakout-extend] > #urlbar-input-container { 403 | height: var(--urlbar-toolbar-height) !important; 404 | padding-block: 0px !important; 405 | padding-inline: 0px !important; 406 | padding-bottom: 6px !important; 407 | margin-bottom: -5px !important; 408 | margin-top: -1px !important; 409 | } 410 | 411 | /* urlbarView = the menu when you expand the address bar */ 412 | .urlbarView { 413 | width: 100% !important; 414 | margin-inline: 0px !important; 415 | box-shadow: 0px 5px 15px -7px black !important; 416 | border-radius: 0px 0px var(--menu-corner-rounding) var(--menu-corner-rounding) !important; 417 | border: none !important; 418 | padding-top: 0px !important; 419 | } 420 | 421 | .urlbarView-body-inner { 422 | border:none !important; 423 | } 424 | 425 | .search-one-offs { 426 | background-color: var(--toolbar-bgcolor) !important; 427 | } 428 | 429 | #tracking-protection-icon-container { 430 | border-inline-end: none !important; 431 | } 432 | 433 | #pageActionSeparator { 434 | display: none !important; 435 | } 436 | 437 | /* GABE FIXED */ 438 | /* PENDING */ contextual-feature-recommendation #cfr-button, /*#userContext-indicator,*/ #userContext-label { 439 | fill: transparent !important; 440 | background-color: transparent !important; 441 | color: transparent !important; 442 | transition: var(--animation-speed) !important; 443 | } 444 | 445 | #userContext-indicator, #userContext-label { 446 | margin: 0 6px 0 0 !important; 447 | } 448 | 449 | /* GABE FIXED */ 450 | #cfr-button:hover { 451 | background: none !important; 452 | } 453 | 454 | #urlbar:hover .urlbar-icon, 455 | #urlbar:active .urlbar-icon, 456 | #urlbar[focused] .urlbar-icon, 457 | #urlbar:hover .urlbar-icon:not([open]) image, 458 | #urlbar:active .urlbar-icon image, 459 | #urlbar[focused] .urlbar-icon image, 460 | #searchbar:hover, 461 | #searchbar:active, 462 | #searchbar[focused]/*, 463 | #urlbar:hover #userContext-label, 464 | #urlbar:active #userContext-label, 465 | #urlbar[focused] #userContext-label*/ 466 | { 467 | fill: var(--toolbar-color) !important; 468 | } 469 | 470 | #urlbar:hover #userContext-indicator, 471 | #urlbar:active #userContext-indicator, 472 | #urlbar[focused] #userContext-indicator, 473 | #urlbar:hover #userContext-label, 474 | #urlbar:active #userContext-label, 475 | #urlbar[focused] #userContext-label { 476 | color: var(--identity-tab-color) !important; 477 | fill: var(--identity-tab-color) !important; 478 | } 479 | 480 | .urlbar-page-action[open] { 481 | background-color: var(--toolbarbutton-active-background) !important; 482 | fill: var(--toolbar-color) !important; 483 | } 484 | 485 | .urlbar-page-action[open]:hover { 486 | background-color: var(--toolbarbutton-active-background) !important; 487 | fill: var(--toolbar-color) !important; 488 | } 489 | 490 | .urlbar-page-action[open] .urlbar-icon { 491 | fill: var(--toolbar-color) !important; 492 | } 493 | 494 | .urlbar-scheme { 495 | padding-bottom: 11px !important; 496 | } 497 | 498 | #urlbar-container { 499 | margin-left: -1px !important; 500 | margin-right: -1px !important; 501 | } 502 | 503 | .urlbar-input-box { 504 | padding: 5px 5px !important; 505 | } 506 | 507 | #urlbar { 508 | background-color: transparent !important; 509 | color: var(--lwt-toolbar-field-color, black) !important; 510 | border-radius: calc(1px + var(--button-corner-rounding)) !important; 511 | } 512 | 513 | #urlbar:not(.hidden-focus)[focused="true"] { 514 | background-color: var(--toolbarbutton-hover-background) !important; 515 | } 516 | 517 | /* GABE CUSTOM */ 518 | 519 | /* PRIVATE WINDOW */ 520 | #main-window[privatebrowsingmode="temporary"] #TabsToolbar { 521 | background: linear-gradient(to right, #712290, #2b1141) !important; 522 | color: #f7e3ff !important; 523 | } 524 | #main-window[privatebrowsingmode="temporary"] #tabs-newtab-button { 525 | fill: #fff !important; 526 | } 527 | 528 | #main-window[privatebrowsingmode="temporary"] tabs#tabbrowser-tabs { 529 | --tab-line-color: #B933E1 !important; 530 | } 531 | 532 | /* urlbar-go-button */ 533 | #urlbar:active #urlbar-go-button, 534 | #urlbar:hover #urlbar-go-button, 535 | #urlbar:not(.hidden-focus)[focused="true"] #urlbar-go-button { 536 | display: inherit !important; 537 | } 538 | 539 | #pocket-button { 540 | padding-bottom: 4px !important; 541 | } 542 | 543 | .urlbar-icon-wrapper > .urlbar-icon:hover { 544 | background-color: transparent !important; 545 | } 546 | 547 | .urlbar-icon-wrapper { 548 | background-color: transparent !important; 549 | transition: background-color var(--animation-speed) !important; 550 | } 551 | 552 | #urlbar:not([focused]) .urlbar-input-box:hover, 553 | #identity-box:hover, 554 | #tracking-protection-icon-container:hover, 555 | .urlbar-icon:hover, 556 | .urlbar-icon-wrapper:hover, 557 | [anonid=urlbar-go-button]:hover { 558 | background-color: var(--toolbarbutton-hover-background) !important; 559 | } 560 | 561 | /* GABE CUSTOM */ 562 | 563 | #identity-box[pageproxystate="valid"].chromeUI > #identity-icon { 564 | list-style-image: url(chrome://branding/content/icon32.png) !important; 565 | } 566 | 567 | #identity-box:active, 568 | #tracking-protection-icon-container:active, 569 | .urlbar-icon:active, 570 | .urlbar-icon-wrapper:active, 571 | [anonid=urlbar-go-button]:active, 572 | #searchbar:active { 573 | background-color: var(--toolbarbutton-active-background) !important; 574 | } 575 | 576 | #identity-box[pageproxystate="valid"].verifiedDomain > #identity-icon, #identity-box[pageproxystate="valid"].verifiedIdentity > #identity-icon, #identity-box[pageproxystate="valid"].mixedActiveBlocked > #identity-icon { 577 | -moz-context-properties: fill; 578 | fill: #12BC00 !important; 579 | } 580 | 581 | .urlbar-input-box, 582 | #identity-box, 583 | #tracking-protection-icon-container, 584 | [anonid=urlbar-go-button], 585 | #urlbar, 586 | #searchbar { 587 | transition: background-color var(--animation-speed) !important; 588 | } 589 | 590 | #tracking-protection-icon, 591 | #identity-box image { 592 | transition: fill-opacity var(--animation-speed) !important; 593 | } 594 | 595 | [lwthemetextcolor="dark"] .urlbarView-body-outer { 596 | background-color: #f5f6f7 !important; 597 | color: var(--toolbar-color) !important; 598 | } 599 | 600 | .urlbarView-body-inner { 601 | background-color: var(--toolbar-bgcolor) !important; 602 | } 603 | 604 | .downloadsPanelFooterButton:hover { 605 | outline: none !important; 606 | } 607 | 608 | 609 | /* -------------------- Style context menus -------------------- */ 610 | #context-navigation, 611 | #context-sep-navigation, 612 | /*#context-bookmarklink,*/ 613 | /*#context-viewinfo,*/ 614 | /*#context-viewpartialsource-selection,*/ 615 | /*#inspect-separator,*/ 616 | /*#context-savelink,*/ 617 | /*#context-sendimage,*/ 618 | #context-setDesktopBackground, 619 | /*#context_reloadTab,*/ 620 | /*#context_moveTabOptions,*/ 621 | /*#context_bookmarkTab,*/ 622 | .bookmarks-actions-menuseparator 623 | /*.openintabs-menuitem*/ { 624 | display: none !important; 625 | } 626 | 627 | menupopup, 628 | menupopup menuitem, 629 | menupopup menu, 630 | menupopup menuseparator, 631 | menuseparator { 632 | -moz-appearance: none !important; 633 | } 634 | 635 | /*GABE FIX FIREFOX 77*/ menuseparator:not(#BMB_bookmarksPopup) { 636 | border-top: 1px solid var(--panel-separator-color) !important; 637 | border-bottom: 1 solid var(--panel-separator-color) !important; 638 | margin-bottom: -6px !important; 639 | padding: 4px !important; 640 | background: 0 !important; 641 | } 642 | 643 | menupopup:not(#BMB_bookmarksPopup) { 644 | padding: 6px 9px 9px !important; 645 | margin: -6px -9px 0 !important; 646 | border: 0 !important; 647 | background: 0 !important; 648 | } 649 | 650 | menu[open] menupopup:not(#BMB_bookmarksPopup) { 651 | margin: -12px -9px 0 !important; 652 | } 653 | 654 | #BMB_bookmarksPopup menu[open] menupopup { 655 | transform: translateY(4px) !important; 656 | } 657 | 658 | menupopup menuseparator 659 | { 660 | margin-top: 5px !important; 661 | margin-bottom: 5px !important; 662 | padding: 0px !important; 663 | border-bottom: none !important; 664 | opacity: 0.2 !important; 665 | } 666 | .menupopup-arrowscrollbox { 667 | background: Menu !important; /* fall back if adaptable colors are removed */ 668 | } 669 | 670 | .menupopup-arrowscrollbox:not(.in-bookmarks-menu) { 671 | padding: 6px 0 !important; 672 | } 673 | 674 | 675 | .panel-arrowcontent { 676 | padding-top: 0px !important; 677 | border: none !important; 678 | } 679 | 680 | /* shadows and rounded corners for menus */ 681 | .menupopup-arrowscrollbox:not(.in-bookmarks-menu) { 682 | border-radius: var(--menu-corner-rounding) !important; 683 | box-shadow: 0px 2px 9px -3px black !important; 684 | } 685 | 686 | .panel-arrowcontainer .panel-arrowcontent, .menupopup-arrowscrollbox, hbox[flex="1"][part="innerbox"] { 687 | border-radius: var(--menu-corner-rounding) !important; 688 | } 689 | 690 | .in-bookmarks-menu { 691 | padding-bottom: 5px !important; 692 | padding-top: 5px !important; 693 | } 694 | 695 | menu, 696 | menuitem, 697 | menucaption { 698 | -moz-appearance: none !important; 699 | height: var(--menu-item-height) !important; 700 | } 701 | 702 | menu, 703 | menuitem, 704 | menucaption { 705 | padding-left: 5px !important; 706 | padding-right: 5px !important; 707 | } 708 | 709 | menu:not(.subviewbutton) > .menu-right { 710 | margin-top: 2px !important; 711 | margin-right: 0px !important; 712 | width: 0px !important; 713 | } 714 | 715 | menu:not(.subviewbutton) > .menu-right image { 716 | margin-right: -5px !important; 717 | margin-top: -2px !important; 718 | border: 6px solid var(--toolbar-color) !important; 719 | border-top-color: transparent !important; 720 | border-right-color: transparent !important; 721 | border-bottom-color: transparent !important; 722 | } 723 | 724 | panelview toolbarbutton:not(#fxa-manage-account-button) { 725 | height: var(--menu-item-height) !important; 726 | } 727 | 728 | #BMB_bookmarksPopup .menu-right { 729 | height: 23px !important; 730 | } 731 | 732 | #sidebar-switcher-bookmarks, #customization-uidensity-menuitem-compact { 733 | margin-top: 5px !important; 734 | } 735 | 736 | #customization-lwtheme-menu-header { 737 | margin-top: 0px !important; 738 | } 739 | 740 | /* windows-specific adjustments */ 741 | @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10) { 742 | .bookmark-item .scrollbutton-up { 743 | margin-top: -3px !important; 744 | } 745 | 746 | .bookmark-item .scrollbutton-up > .toolbarbutton-icon { 747 | margin-top: -2px !important; 748 | border: 6px solid MenuText !important; 749 | border-top-color: transparent !important; 750 | border-right-color: transparent !important; 751 | border-left-color: transparent !important; 752 | } 753 | 754 | .bookmark-item .scrollbutton-down { 755 | margin-bottom: -3px !important; 756 | } 757 | 758 | .bookmark-item .scrollbutton-down > .toolbarbutton-icon { 759 | margin-bottom: -2px !important; 760 | border: 6px solid MenuText !important; 761 | border-bottom-color: transparent !important; 762 | border-right-color: transparent !important; 763 | border-left-color: transparent !important; 764 | } 765 | 766 | menu, 767 | menuitem, 768 | menucaption { 769 | padding-left: 5px !important; 770 | padding-right: 5px !important; 771 | } 772 | 773 | menu:not(.subviewbutton) > .menu-right { 774 | margin-right: 0px !important; 775 | padding-left: 0px !important; 776 | } 777 | 778 | .in-bookmarks-menu { 779 | padding-bottom: 5px !important; 780 | padding-top: 1px !important; 781 | } 782 | 783 | #BMB_bookmarksPopup menu menupopup { 784 | transform: translateY(-1px) !important; 785 | } 786 | } 787 | 788 | /* linux and mac-specific adjustments */ 789 | @media not (-moz-os-version: windows-win10) { 790 | @media not (-moz-os-version: windows-win8) { 791 | @media not (-moz-os-version: windows-win7) { 792 | hbox[flex="1"][part="innerbox"] { 793 | box-shadow: 0px 2px 12px -6px black !important; 794 | } 795 | 796 | .menu-iconic-left { 797 | margin: 0px 6px !important; 798 | } 799 | 800 | #BMB_bookmarksPopup menu[open] menupopup { 801 | transform: translateY(1px) !important; 802 | } 803 | } 804 | } 805 | } 806 | 807 | 808 | /* make menus adapt to theme */ 809 | menu, 810 | menuitem, 811 | menucaption { 812 | color: var(--toolbar-color) !important; 813 | } 814 | 815 | .menupopup-arrowscrollbox { 816 | background-color: var(--toolbar-bgcolor, Menu) !important; 817 | } 818 | 819 | menu[_moz-menuactive="true"]:not([disabled="true"]), 820 | menuitem[_moz-menuactive="true"]:not([disabled="true"]), 821 | menucaption[_moz-menuactive="true"]:not([disabled="true"]) { 822 | background-color: var(--toolbarbutton-hover-background, rgba(127,127,127,0.5)) !important; 823 | } 824 | 825 | menu[disabled="true"], 826 | menuitem[disabled="true"], 827 | menucaption[disabled="true"] { 828 | color: var(--toolbarbutton-hover-background, rgba(127,127,127,0.5)) !important; 829 | } 830 | 831 | menu[disabled="true"][_moz-menuactive="true"], 832 | menuitem[disabled="true"][_moz-menuactive="true"], 833 | menucaption[disabled="true"][_moz-menuactive="true"] { 834 | background-color: transparent !important; 835 | } 836 | 837 | .panel-arrow { 838 | fill: var(--toolbar-bgcolor) !important; 839 | } 840 | 841 | [lwthemetextcolor="dark"] panelview:not([extension]), 842 | [lwthemetextcolor="dark"] .panel-arrowcontent { 843 | background-color: #f5f6f7 !important; 844 | } 845 | 846 | .panel-subview-body { 847 | background-color: var(--toolbar-bgcolor) !important; 848 | } 849 | 850 | #downloadsPanel-mainView { 851 | background-color: var(--toolbar-bgcolor) !important; 852 | } 853 | 854 | #identity-popup-mainView { 855 | background-color: var(--toolbar-bgcolor) !important; 856 | } 857 | 858 | #identity-popup-content-blocking-detected { 859 | color: var(--toolbar-active-background) !important; 860 | } 861 | 862 | #identity-popup-permission-empty-hint { 863 | color: var(--toolbar-active-background) !important; 864 | } 865 | 866 | .identity-popup-warning-yellow { 867 | color: black !important; 868 | } 869 | 870 | panel:not([viewId^="PanelUI-webext"]) .panel-arrow { 871 | fill: var(--toolbar-bgcolor) !important; 872 | } 873 | 874 | .bookmark-item [class^="scrollbutton"] { 875 | background-color: var(--toolbar-bgcolor) !important; 876 | } 877 | 878 | /*GABE MODS*/ 879 | 880 | /* Firefox Quantum UI Lite */ 881 | /* a fork by GABE|@gabeweb */ 882 | /* version: .28072018 */ 883 | 884 | /* Original project: FirefoxUI hybrid */ 885 | /* https://github.com/axydavid/FirefoxUI */ 886 | 887 | /* MENU */ 888 | /* [[NB]] */ 889 | 890 | #edit-controls, #zoom-controls { 891 | height: 15px; 892 | } 893 | 894 | #edit-controls .toolbarbutton-1 .toolbarbutton-icon, #zoom-controls .toolbarbutton-1 .toolbarbutton-icon { 895 | width: 18px !important; 896 | height: 18px !important; 897 | } 898 | 899 | #zoom-reset-button, #zoom-controls .toolbarbutton-1 .toolbarbutton-text { 900 | margin-top: -6px !important; 901 | } 902 | 903 | #edit-controls .toolbarbutton-1 .toolbarbutton-text { 904 | margin-top: -10px !important; 905 | } 906 | 907 | #edit-controls .toolbarbutton-1, #zoom-controls .toolbarbutton-1 { 908 | -moz-box-orient: horizontal !important; 909 | } 910 | 911 | panelview .toolbarbutton-1:-moz-any(:hover, :focus):not(:-moz-any([disabled], [open], :active)), toolbarbutton.subviewbutton:-moz-any(:hover, :focus):not(:-moz-any([disabled], [open], :active)), menu.subviewbutton[_moz-menuactive]:not(:-moz-any([disabled], :active)), menuitem.subviewbutton[_moz-menuactive]:not(:-moz-any([disabled], :active)), .widget-overflow-list .toolbarbutton-1:-moz-any(:hover, :focus):not(:-moz-any([disabled], [open], :active)), .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > toolbarbutton:-moz-any(:hover, :focus):not(:-moz-any([disabled], [open], :active)) { 912 | box-shadow: 0px 0px 1px 0px grey inset; 913 | } 914 | 915 | #customization-panelHolder > #widget-overflow-fixed-list { 916 | display: initial !important; 917 | } 918 | 919 | [anonid="type-icon-spacer"] { 920 | width: 0px !important; 921 | } 922 | 923 | #widget-overflow-fixed-list .subviewbutton-nav::after { 924 | content: unset !important; 925 | } 926 | 927 | .widget-overflow-list .toolbarbutton-1 { 928 | -moz-box-align: center !important; 929 | -moz-box-orient: vertical !important; 930 | height: 96px !important; 931 | margin-left: 16px !important; 932 | margin: 14px 10px !important; 933 | padding-top: 28px !important; 934 | padding-bottom: 28px !important; 935 | width: 96px !important; 936 | display: inline !important; 937 | } 938 | 939 | .widget-overflow-list .toolbarbutton-1:hover { 940 | border: 1px !important; 941 | } 942 | 943 | .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-text { 944 | padding-top: 6px; 945 | padding-inline-start: 0em !important; 946 | padding-inline-end: 1px !important; 947 | } 948 | 949 | .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-icon { 950 | width: 32px !important; 951 | opacity: 0.8 !important; 952 | } 953 | 954 | #widget-overflow-mainView .panel-subview-body { 955 | display: grid; 956 | } 957 | 958 | #widget-overflow-mainView .panel-subview-body { 959 | overflow: unset; 960 | } 961 | 962 | photonpanelmultiview .panel-subview-body { 963 | padding: 6px 8px !important; 964 | } 965 | 966 | .widget-overflow-list { 967 | display: inline !important; 968 | } 969 | 970 | #widget-overflow-mainView, .widget-overflow-list, #widget-overflow-fixed-list { 971 | min-width: unset !important; 972 | max-width: 350px !important; 973 | } 974 | 975 | .titlebar-button:hover { 976 | background-color: Highlight !important; 977 | } 978 | 979 | /* Fixing customization-panelWrapper*/ 980 | #customization-panelWrapper > .panel-arrowcontent { 981 | max-width: 380px !important; 982 | height: unset !important; 983 | -moz-box-align: center !important; 984 | -moz-box-orient: vertical !important; 985 | display: inline !important; 986 | } 987 | 988 | /*GABE FIX*/ 989 | #customization-panelWrapper toolbarpaletteitem { 990 | display: inline !important; 991 | -moz-box-align: center !important; 992 | -moz-box-orient: vertical !important; 993 | } 994 | 995 | #customization-panelWrapper toolbarpaletteitem .toolbarbutton-1 { 996 | height: 76.4px !important; 997 | margin: 4px 10px !important; 998 | padding-top: 14px !important; 999 | width: 94px !important; 1000 | } 1001 | 1002 | /* Revert tab throbber - for Nightly 57 as of 9/20/2017 */ 1003 | /*.tab-throbber[busy]::before { 1004 | background-image: url("chrome://global/skin/icons/loading.png") !important; 1005 | animation: unset !important; 1006 | }*/ 1007 | /*.tab-throbber[busy]:not([progress])::before*/ { 1008 | Grays the blue during "Connecting" state 1009 | filter: grayscale(100%); 1010 | } 1011 | /*@media (min-resolution: 2dppx) { 1012 | .tab-throbber[busy]::before { 1013 | background-image: url("chrome://global/skin/icons/loading@2x.png") !important; 1014 | } 1015 | }*/ 1016 | 1017 | /* Replacing bookmarks menu icon */ 1018 | 1019 | #bookmarks-menu-button { 1020 | /*list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg") !important;*/ 1021 | fill: #ffd567 !important; 1022 | } 1023 | 1024 | .bookmark-item[container] { 1025 | /*list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAABJ0AAASdAHeZh94AAAAB3RJTUUH4QgTBiMo7IFyHgAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4yMfEgaZUAAAMWSURBVGhD7ZNLTxRBFIU7xhW6MDiRnSTKOPMXdOcef4hbf4EL3bBjbQKEuIGNgcTEnQsJ85D3zPCSx2SYACIgvnWw63pqUmUqlaruLhhCLfokX27VrTqde6YgSJUqVapUqS5CraHgARsJBtlwMEYjwXgcuDvKRoNbwu6HwuHgOQZjGJBcYENB1Zswp0PBI9OQScEL+hEGLzFpGtCF9su8CHrEJy9H+EUr7YFeXiWauEH0OnMm2JueGpVyTzsFm7r7hN7duS3GjBf/06DpK0Q73URNDOURrNndYrvXH4tRo8XGu6p00kUU4lXOC7NUuVb7cWcCtpNhp1O9D8W4doVve2t0jCAtGE+BrDq2vs5fyzoO/S7fc3bwMoXsKzGuXazQV6cjBPkDk8pvbd9J+I8ikXv1TL3TQJDpvk0xrl1sOtugQwT5CZPkl4K+PwtR3+A/mKlK6jxItiHGtasd5ABBvsP0A/Aq1xL1TO279GyY7vLgcr3tEmQfQb7CpPJNq6a1aa/21bXtXhxbSYMUsnXaQ5ATmL4I+FpF76n35Frfy7VeXdls/7PXxbh2sXKuSrsIcgxTp/gcUU3oZ+p+A0EwoxjXrnaQJoIcwpSEo5i9rSeRZ7bv8KrywSVIA0EOYDoPnyw9U19i86h13SVIHUH2YToPHw29JHCf6tW/s+YSZBtBdmG6TPa0tdyvugTZRJAmTD6y4hJkA0EaMPnIskuQdQSpw+QjNZcgawiyBZOPVF2CrCDIBkw+UnEJsowg6zD5yJJLkCqCrMLkI4suQSoIsgyTiVrC3kWx4BJkEUGqMHEqovrCvEuQBQRZgikJi4ZeFK73deZcgswhyDxMnAVR1b1E38f1O8Fs0iClXIVmEGSWm8CcqOpeEnVH1k4zk6GwmKuIce0Ki/lJKiPIe5hUZgSmftRa+uIw3TX28CKl/IQY1y5c6qcSgpRgiqKsVduZfq735D6O/3fbQfrFuNEKC9cGWDHDqJTBB/yBzxQWbz4TYyYTUt8Pi/cGWTk/RuX8+GXCZ+CztDCTGC9VqlSpUqXqoILgH3yamKaF0cswAAAAAElFTkSuQmCC') !important; */ 1026 | fill: #ffd567 !important; 1027 | } 1028 | 1029 | .bookmark-item { 1030 | fill: #0b4caa !important; 1031 | } 1032 | 1033 | /* GABE CUSTOM */ 1034 | #back-button { 1035 | fill: #30e60b !important; 1036 | } 1037 | 1038 | #forward-button { 1039 | fill: #30e60b !important; 1040 | } 1041 | 1042 | #developer-button { 1043 | fill: #00b3f5 !important; 1044 | } 1045 | 1046 | #downloads-button { 1047 | fill: #80eaff !important; 1048 | } 1049 | 1050 | #stop-button { 1051 | fill: #F06 !important; 1052 | } 1053 | 1054 | #reload-button { 1055 | fill: #0060df !important; 1056 | } 1057 | 1058 | #home-button { 1059 | fill: #E6822F !important; 1060 | } 1061 | 1062 | #urlbar-go-button, #urlbar-input-container:hover #urlbar-go-button { 1063 | fill: #30e60b !important; 1064 | } 1065 | 1066 | #pageActionButton, #urlbar-input-container:hover #pageActionButton { 1067 | fill: rgb(255,192,0) !important; 1068 | } 1069 | 1070 | #nav-bar-overflow-button { 1071 | fill: #1da1f2 !important; 1072 | } 1073 | 1074 | panelview image { 1075 | fill: #00b0f0 !important; 1076 | } 1077 | 1078 | #characterencoding-button { 1079 | fill: #cc9eff !important; 1080 | } 1081 | 1082 | #sidebar-button { 1083 | fill: #2bc4a2 !important; 1084 | } 1085 | 1086 | #add-ons-button { 1087 | fill: limegreen !important; 1088 | } 1089 | 1090 | #email-link-button { 1091 | fill: #ffd567 !important; 1092 | } 1093 | 1094 | #fxa-toolbar-menu-button { 1095 | fill: #00b0f0 !important; 1096 | } 1097 | 1098 | #history-panelmenu { 1099 | fill: #0060df !important; 1100 | } 1101 | 1102 | #library-button { 1103 | fill: #582acb !important; 1104 | } 1105 | 1106 | #new-window-button { 1107 | fill: #00b3f5 !important; 1108 | } 1109 | 1110 | #open-file-button { 1111 | fill: #c588ff !important; 1112 | } 1113 | 1114 | #panic-button { 1115 | fill: red !important; 1116 | } 1117 | 1118 | #print-button { 1119 | fill: #00b3f5 !important; 1120 | } 1121 | 1122 | #privatebrowsing-button { 1123 | fill: #962bb9 !important; 1124 | } 1125 | 1126 | #profiler-button { 1127 | fill: #fe4aa3 !important; 1128 | } 1129 | 1130 | #save-page-button { 1131 | fill: #3fe1b0 !important; 1132 | } 1133 | 1134 | #sync-button { 1135 | fill: #ffd567 !important; 1136 | } 1137 | 1138 | /* Replacing hamburger menu icon with Firefox icon*/ 1139 | #PanelUI-menu-button { 1140 | list-style-image: url("chrome://branding/content/icon32.png") !important; 1141 | /*list-style-image: url("chrome://branding/content/identity-icons-brand.svg") !important;*/ 1142 | /*list-style-image: url("netscape.gif") !important;*/ 1143 | width: 38px !important; 1144 | height: 38px !important; 1145 | margin: 0px !important; 1146 | padding: 0px !important; 1147 | } 1148 | 1149 | #PanelUI-menu-button image { 1150 | width: 30px!important; 1151 | height: 30px !important; 1152 | margin: -4px !important; 1153 | padding: 0px !important; 1154 | border-radius: 25px !important; 1155 | } 1156 | 1157 | .cui-widget-panel, .cui-widget-panel::part(arrowcontent) { 1158 | --arrowpanel-padding: 0 !important; 1159 | background: transparent !important; 1160 | } 1161 | 1162 | /* GABE CUSTOM */#nav-bar-overflow-button[open] .toolbarbutton-icon { 1163 | transform: rotate(90deg) !important; 1164 | transition: transform .4s ease-in-out !important; 1165 | } 1166 | 1167 | #nav-bar-overflow-button .toolbarbutton-icon { 1168 | transition: transform .4s ease-in-out !important; 1169 | } 1170 | 1171 | .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-icon { 1172 | opacity: 0.8 !important; 1173 | } 1174 | 1175 | /* GABE FIX */ toolbarbutton#protections-popup-tp-switch { 1176 | border-radius: 25px !important; 1177 | } 1178 | 1179 | .protections-popup-tp-switch { 1180 | min-width: 46px !important; 1181 | } 1182 | 1183 | 1184 | /* -------------------- Style toolbar -------------------- */ 1185 | .toolbarbutton-icon, .toolbarbutton-badge-stack { 1186 | background-color: transparent !important; 1187 | } 1188 | 1189 | toolbarbutton:not(#back-button)[open], .toolbarbutton-1:not(#back-button)[open] { 1190 | background-color: var(--toolbarbutton-active-background); 1191 | } 1192 | 1193 | #nav-bar .toolbarbutton-1 { 1194 | margin-right: 2px !important; 1195 | } 1196 | 1197 | .close-icon:not(.tab-close-button):hover { 1198 | fill-opacity: 0.0 !important; 1199 | } 1200 | 1201 | toolbarbutton:not(#back-button):not([disabled]):not([open]):hover, 1202 | .toolbarbutton-1:not(#back-button):not([disabled]):not([open]):hover { 1203 | background-color: var(--toolbarbutton-hover-background) !important; 1204 | } 1205 | 1206 | /* GPL-3.9 Copyright (C) 2007 Timvde/UserChrome-Tweaks; Code pulled from https://github.com/Timvde/UserChrome-Tweaks */ 1207 | /* 1208 | * Only show close buttons on background tabs when hovering with the mouse 1209 | * 1210 | * Contributor(s): Timvde 1211 | */ 1212 | 1213 | .tabbrowser-tab:not([selected]):not([pinned]) .tab-close-button { 1214 | display: none !important; 1215 | } 1216 | 1217 | .tabbrowser-tab:not([selected]):not([pinned]):hover .tab-close-button { 1218 | display: -moz-box !important; 1219 | } 1220 | 1221 | .tab-close-button { 1222 | transition: fill-opacity var(--animation-speed) !important;fill: #F06 !important; 1223 | } 1224 | 1225 | notification.animated { 1226 | background: #FFEA80 !important; 1227 | border-color: #FFD567 !important; 1228 | color: #20123A !important; 1229 | padding: 4px 6px !important; 1230 | } 1231 | 1232 | button.notification-button { 1233 | -moz-appearance: none !important;; 1234 | background-color: #FFD567 !important; 1235 | color: #20123A !important; 1236 | border: 1px solid #FFD567 !important; 1237 | padding: 4px !important; 1238 | margin: 2px 4px 0px 2px !important; 1239 | font-weight: bold !important; 1240 | } 1241 | 1242 | .messageCloseButton > .toolbarbutton-icon { 1243 | margin: 0px 6px !important; 1244 | padding: 0px 0px !important; 1245 | } --------------------------------------------------------------------------------