├── LICENSE ├── README.md ├── chrome └── userChrome.css └── old ├── 69 └── chrome │ └── userChrome.css ├── 70 └── chrome │ └── userChrome.css ├── 71 └── userChrome.css └── 72-74 └── userChrome.css /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 coekuss 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ### No longer being maintained 2 | Quietfox was fun to build, but with the [new updates to Firefox's UI](https://www.mozilla.org/en-US/firefox/89.0/releasenotes/), much of its role of modernizing Firefox's interface is no longer needed. I would like to think I had some influence on some of Firefox's new design decisions, but either way I think they're doing good work. Thank you for enjoying Quietfox, best wishes to everyone. 3 | 4 | ![quietfox](https://coekuss.com/quietfox/logo.png) 5 | ![](https://coekuss.com/quietfox/quietfox70/clean2.png) 6 | 7 | ## The Goal 8 | This userChrome mod was created to make the Firefox UI cleaner and more modern without sacrificing any of its original features. You can still use themes, and you can still use Compact Mode and Touch Mode. You can pretty much forget that you have a mod installed, it works *quietly* in the background. Here are some of the notable features: 9 | 10 | 11 | ## Customizable values 12 | Simply open userChrome.css in a text editor and change the values at the top of the file. Restart Firefox to see changes. 13 | 14 | ### Toolbar Customizations 15 | 16 | ```CSS 17 | /* -------------------- 🎨 Customization 🎨 -------------------- */ 18 | --tab-corner-rounding: 7px; 19 | /* --menu-corner-rounding: 10px; */ 20 | /* --menu-item-height: 30px; */ 21 | --button-corner-rounding: 20px; 22 | --animation-speed: 0.4s; 23 | ``` 24 | ![](https://coekuss.com/quietfox/quietfox70/fluid2.gif) 25 | 26 |
27 | 28 | ```CSS 29 | /* -------------------- 🎨 Customization 🎨 -------------------- */ 30 | --tab-corner-rounding: 0px; 31 | /* --menu-corner-rounding: 10px; */ 32 | /* --menu-item-height: 30px; */ 33 | --button-corner-rounding: 0px; 34 | --animation-speed: 0.0s; 35 | ``` 36 | ![](https://coekuss.com/quietfox/quietfox70/snappy2.gif) 37 | 38 | ### Menu Customizations 39 | ```CSS 40 | /* -------------------- 🎨 Customization 🎨 -------------------- */ 41 | /* --tab-corner-rounding: 7px; */ 42 | --menu-corner-rounding: 10px; 43 | --menu-item-height: 30px; 44 | /* --button-corner-rounding: 20px; */ 45 | /* --animation-speed: 0.4s; */ 46 | ``` 47 | 48 |

49 | 50 |

51 | 52 |
53 | 54 | ```CSS 55 | /* -------------------- 🎨 Customization 🎨 -------------------- */ 56 | /* --tab-corner-rounding: 7px; */ 57 | --menu-corner-rounding: 0px; 58 | --menu-item-height: 25px; 59 | /* --button-corner-rounding: 20px; */ 60 | /* --animation-speed: 0.4s; */ 61 | ``` 62 |

63 | 64 |

65 | 66 | 67 | ## Theme-adapted menus 68 | ![](https://coekuss.com/quietfox/menus72.jpg) 69 | 70 | ## Address bar buttons appear when needed 71 | ![](https://coekuss.com/quietfox/urlbar_buttons.gif) 72 | 73 | 74 | 75 | ## How to install 76 | 1. [Download](https://github.com/coekuss/quietfox/releases/latest/download/quietfox.zip) and unzip 77 | 2. Go to `about:support` in Firefox and open your Profile Folder 78 | 3. Drop your unzipped "chrome" folder into the folder that appears 79 | 4. Go to `about:config` in your Firefox and set the value of `toolkit.legacyUserProfileCustomizations.stylesheets` to `true` (this enables the loading of userChrome mods) 80 | 5. Restart Firefox 81 | 82 | 83 | ✔ Tested on Firefox 87 on Windows 10 and Ubuntu 19.10 84 | 85 | --- 86 | 87 | ### Older version 88 | If you need Quietfox for an older version of Firefox, [see the releases page.](https://github.com/coekuss/quietfox/releases) 89 | 90 | ### Note about transparent themes 91 | Although deliberate effort has been put into making this mod work with most themes, some transparent themes make menu text hard to read. Transparent themes also make the bottom corners of rounded tabs look wonky, so the file includes instructions to remove tabs' bottom corner rounding if you encounter this issue. 92 | 93 | ## P. S. 94 | This mod is the product of many late nights of zen laser focus. If it enhances your web experience, consider donating a small sum to show your support ❤ 95 | 96 | Bitcoin: 1Lc5r26FTwWSLNH46fE5WH3mvFjNUcHGzi 97 | 98 | PayPal: [paypal.me/coekuss](https://paypal.me/coekuss) 99 | -------------------------------------------------------------------------------- /chrome/userChrome.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Quietfox for Firefox 76 4 | 5 | https://github.com/coekuss/quietfox 6 | 7 | Thanks for using my file 8 | 9 | */ 10 | 11 | * { 12 | /* -------------------- 🎨 Customization 🎨 -------------------- */ 13 | --tab-corner-rounding: 5px; 14 | --button-corner-rounding: 4px; 15 | --menu-corner-rounding: 5px; 16 | --menu-item-height: 30px; 17 | --animation-speed: 0.15s; 18 | } 19 | 20 | 21 | @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 22 | 23 | /* Bottom corner rounding for tabs, Remove this section if your tab bottom corners look bad */ 24 | tab[visuallyselected] .tab-background::before, 25 | tab[visuallyselected] .tab-background::after { 26 | content: "" !important; 27 | display: inline !important; 28 | position: absolute !important; 29 | width: var(--tab-corner-rounding) !important; 30 | height: var(--tab-corner-rounding) !important; 31 | bottom: -1px !important; 32 | pointer-events: none !important; 33 | background-color: transparent !important; 34 | transition: var(--animation-speed) !important; 35 | } 36 | 37 | tab[visuallyselected] .tab-background::before { 38 | border-bottom-right-radius: var(--tab-corner-rounding) !important; 39 | transform: translateX(calc(-1 * var(--tab-corner-rounding))) !important; 40 | box-shadow: 4px 4px 0px 4px var(--toolbar-bgcolor) !important; 41 | transition: var(--animation-speed) !important; 42 | } 43 | 44 | tab[visuallyselected] .tab-background::after { 45 | border-bottom-left-radius: var(--tab-corner-rounding) !important; 46 | right: 0px !important; 47 | transform: translateX(calc(var(--tab-corner-rounding) + 1px)) !important; 48 | box-shadow: -4px 4px 0px 4px var(--toolbar-bgcolor) !important; 49 | transition: var(--animation-speed) !important; 50 | } 51 | /* --------------------------------------------------------------------------------------- */ 52 | 53 | 54 | 55 | 56 | /* This makes certain menus adapt to your toolbar text color. Can make menu text illegible in 57 | some transparent themes, remove if needed. */ 58 | panelview:not([extension]), 59 | .panel-arrowcontent { 60 | background-color: var(--toolbar-bgcolor) !important; 61 | color: var(--toolbar-color) !important; 62 | } 63 | /*-------------------------------------------------------------------*/ 64 | 65 | 66 | 67 | 68 | 69 | /* -------------------- Transitions for some things -------------------- */ 70 | toolbarbutton, 71 | .subviewbutton, 72 | stack, 73 | .toolbarbutton-icon, 74 | vbox 75 | { 76 | transition: background-color var(--animation-speed) !important; 77 | 78 | } 79 | 80 | 81 | 82 | 83 | /* -------------------- Style tab bar -------------------- */ 84 | 85 | .titlebar-spacer[type="pre-tabs"] { 86 | border-inline-end: 0px !important; 87 | width: 0px !important; 88 | } 89 | 90 | scrollbox[part="scrollbox"][flex="1"][orient="horizontal"] { 91 | padding-left: 12px !important; 92 | } 93 | 94 | 95 | [sizemode="maximized"] [first-visible-tab] { 96 | margin-left: -12px !important; 97 | } 98 | 99 | [sizemode="maximized"] [first-visible-tab] stack { 100 | margin-left: 12px !important; 101 | } 102 | 103 | .tab-background, .tab-loading-burst { 104 | border-radius: var(--tab-corner-rounding) var(--tab-corner-rounding) 0px 0px !important; 105 | margin: -1px !important; 106 | 107 | } 108 | 109 | tab:not(:active) .tab-background { 110 | transition: background-color var(--animation-speed) !important; 111 | } 112 | 113 | 114 | :root[uidensity="compact"] { 115 | --tab-min-height: 31px !important; 116 | } 117 | 118 | tab:not([selected]):hover .tab-background { 119 | background-color: var(--toolbarbutton-hover-background) !important; 120 | } 121 | 122 | tab { 123 | min-width: 1px !important; 124 | clip-width: 1px !important; 125 | padding-bottom: 1px !important; 126 | } 127 | 128 | .tab-line { 129 | display: none !important; 130 | } 131 | 132 | tab:not([beforeselected-visible])::after { 133 | margin-top: 4px !important; 134 | margin-bottom: 4px !important; 135 | transition: border-color var(--animation-speed), margin-top var(--animation-speed) !important; 136 | 137 | } 138 | 139 | tab[beforehovered]::after, 140 | tab:hover::after { 141 | border-color: transparent !important; 142 | margin-top: 20px !important; 143 | } 144 | 145 | #navigator-toolbox { 146 | --tabs-border-color: transparent !important; 147 | } 148 | 149 | 150 | 151 | tab[visuallyselected] .tab-background { 152 | box-shadow: 0px 3px 12px -5px black !important; 153 | } 154 | 155 | [last-visible-tab] { 156 | margin-right: calc(var(--tab-corner-rounding) + 2px) !important; /* fix unexpected tab overflow */ 157 | } 158 | 159 | 160 | 161 | 162 | /* -------------------- Style toolbar -------------------- */ 163 | .toolbarbutton-icon, .toolbarbutton-badge-stack { 164 | background-color: transparent !important; 165 | } 166 | 167 | toolbarbutton:not(#back-button)[open], .toolbarbutton-1:not(#back-button)[open] { 168 | background-color: var(--toolbarbutton-active-background); 169 | } 170 | 171 | #nav-bar .toolbarbutton-1 { 172 | margin-right: 2px !important; 173 | } 174 | 175 | .close-icon:not(.tab-close-button):hover { 176 | fill-opacity: 0.0 !important; 177 | } 178 | 179 | toolbarbutton:not(#back-button):not([disabled]):not([open]):hover, 180 | .toolbarbutton-1:not(#back-button):not([disabled]):not([open]):hover { 181 | background-color: var(--toolbarbutton-hover-background) !important; 182 | } 183 | 184 | .tab-close-button { 185 | transition: fill-opacity var(--animation-speed) !important; 186 | } 187 | 188 | .findbar-textbox:focus { 189 | border: 1px solid grey !important; 190 | } 191 | 192 | #BMB_bookmarksShowAll { 193 | display: none !important; 194 | } 195 | 196 | 197 | 198 | /* touch and normal density buttons */ 199 | 200 | :root:not([uidensity="compact"]) #back-button > .toolbarbutton-icon { 201 | background-color: transparent !important; 202 | border-color: var(--toolbarbutton-hover-background) !important; 203 | transition: background-color var(--animation-speed) !important; 204 | } 205 | 206 | :root:not([uidensity="compact"]) #back-button:not([disabled]):not([open]):hover > .toolbarbutton-icon { 207 | background-color: var(--toolbarbutton-hover-background) !important; 208 | box-shadow: none !important; 209 | } 210 | 211 | :root:not([uidensity="compact"]) #back-button:not([disabled]):not([open]):active > .toolbarbutton-icon { 212 | background-color: var(--toolbarbutton-active-background) !important; 213 | box-shadow: none !important; 214 | } 215 | 216 | :root:not([uidensity="compact"]) toolbarbutton:not(#back-button):not([disabled]):not([open]):active, 217 | .toolbarbutton-1:not(#back-button):not([disabled]):not([open]):active { 218 | background-color: var(--toolbarbutton-active-background) !important; 219 | } 220 | 221 | 222 | 223 | :root:not([uidensity="compact"]) #back-button[open] > .toolbarbutton-icon { 224 | background-color: var(--toolbarbutton-active-background) !important; 225 | } 226 | 227 | :root:not([uidensity="compact"]) #PersonalToolbar { /* bookmark bar */ 228 | height: 30px !important; 229 | } 230 | 231 | 232 | /* normal density buttons */ 233 | 234 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #nav-bar .toolbarbutton-1:not(#back-button) { 235 | margin-top: 4px !important; 236 | margin-bottom: 4px !important; 237 | margin-left: 0px !important; 238 | margin-right: 0px !important; 239 | padding-left: 3px !important; 240 | padding-right: 3px !important; 241 | } 242 | 243 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #nav-bar .toolbarbutton-1:not(#back-button) image { 244 | margin-bottom: 1px !important; 245 | } 246 | 247 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #back-button { 248 | margin-top: -1px !important; 249 | margin-bottom: -1px !important; 250 | } 251 | 252 | 253 | 254 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #identity-box, 255 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #tracking-protection-icon-container { 256 | padding-left: 8px !important; 257 | padding-right: 8px !important; 258 | } 259 | 260 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #identity-icon, 261 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #tracking-protection-icon-box { 262 | margin-left: 1px !important; 263 | margin-right: 1px !important; 264 | } 265 | 266 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #urlbar { 267 | height: 36px !important; 268 | margin-top: 0px !important; 269 | margin-bottom: 0px !important; 270 | padding-top: 0px !important; 271 | padding-bottom: 0px !important; 272 | } 273 | 274 | 275 | :root:not([uidensity="touch"]):not([uidensity="compact"]) .urlbar-icon:not(#pocket-button) { 276 | width: 34px !important; 277 | height: 36px !important; 278 | padding: 8px !important; 279 | } 280 | 281 | 282 | 283 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #pocket-button { 284 | width: 32px !important; 285 | height: 36px !important; 286 | padding: 8px 8px 6px 8px !important; 287 | } 288 | 289 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #contextual-feature-recommendation { 290 | width: 32px !important; 291 | height: 32px !important; 292 | padding: 2px !important; 293 | } 294 | 295 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #PanelUI-button { 296 | padding-right: 5px !important; 297 | padding-left: 5px !important; 298 | margin-left: 5px !important; 299 | } 300 | 301 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #library-animatable-box { 302 | margin-top: 4px !important; 303 | } 304 | 305 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #tabs-newtab-button { 306 | margin-left: -5px !important; 307 | padding-left: 2px !important; 308 | margin-bottom: 1px !important; 309 | padding-bottom: 1px !important; 310 | } 311 | 312 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #PersonalToolbar { 313 | margin-top: -2px !important; 314 | } 315 | 316 | 317 | /* compact density buttons */ 318 | 319 | :root[uidensity="compact"] #nav-bar .toolbarbutton-1 { 320 | margin-top: 4px !important; 321 | margin-bottom: 4px !important; 322 | padding: 0px 0px 0px 0px !important; 323 | } 324 | 325 | 326 | 327 | 328 | :root[uidensity="compact"] #nav-bar toolbaritem[animate] box { 329 | margin-top: 1px !important; 330 | } 331 | 332 | :root[uidensity="compact"] #back-button { 333 | margin-left: 3px !important; 334 | } 335 | 336 | :root[uidensity="compact"] #back-button[open] { 337 | background-color: var(--toolbarbutton-active-background) !important; 338 | } 339 | 340 | 341 | :root[uidensity="compact"] #back-button:not([disabled]):not([open]):hover { 342 | background-color: var(--toolbarbutton-hover-background) !important; 343 | } 344 | :root[uidensity="compact"] #back-button:not([disabled]):not([open]):active { 345 | background-color: var(--toolbarbutton-active-background) !important; 346 | } 347 | 348 | :root[uidensity="compact"] #identity-box, 349 | :root[uidensity="compact"] #tracking-protection-icon-container { 350 | min-width: 2px !important; 351 | padding-left: 6px !important; 352 | padding-right: 6px !important; 353 | } 354 | 355 | 356 | :root[uidensity="compact"] #urlbar { 357 | height: 30px !important; 358 | margin-top: 0px !important; 359 | margin-bottom: 0px !important; 360 | padding-bottom: 0px !important; 361 | } 362 | 363 | 364 | 365 | :root[uidensity="compact"] .urlbar-icon:not(#pocket-button) { 366 | width: 28px !important; 367 | height: 30px !important; 368 | padding: 6px !important; 369 | } 370 | 371 | :root[uidensity="compact"] #pocket-button { 372 | width: 28px !important; 373 | height: 40px !important; 374 | padding: 7px 6px 5px 6px !important; 375 | } 376 | 377 | :root[uidensity="compact"] #contextual-feature-recommendation { 378 | width: 32px !important; 379 | height: 32px !important; 380 | padding: 2px !important; 381 | } 382 | 383 | :root[uidensity="compact"] #PersonalToolbar { 384 | height: 25px !important; 385 | margin-top: -3px !important; 386 | } 387 | 388 | :root[uidensity="compact"] #library-animatable-box { 389 | margin-top: 5px !important; 390 | } 391 | 392 | :root[uidensity="compact"] #tabs-newtab-button { 393 | margin-left: -5px !important; 394 | margin-bottom: 1px !important; 395 | padding-bottom: 1px !important; 396 | } 397 | 398 | 399 | /* touch density buttons */ 400 | 401 | :root[uidensity="touch"] #nav-bar .toolbarbutton-1:not(#back-button) { 402 | margin-top: 4px !important; 403 | margin-bottom: 4px !important; 404 | padding-left: 0px !important; 405 | padding-right: 0px !important; 406 | } 407 | 408 | 409 | :root[uidensity="touch"] #stop-reload-button[animate] .toolbarbutton-animatable-image { 410 | margin-top: 2px !important; 411 | } 412 | 413 | :root[uidensity="touch"] #identity-box, 414 | :root[uidensity="touch"] #tracking-protection-icon-container { 415 | padding-left: 9px !important; 416 | padding-right: 9px !important; 417 | } 418 | 419 | 420 | :root[uidensity="touch"] #urlbar { 421 | height: 36px !important; 422 | margin-top: 0px !important; 423 | margin-bottom: 0px !important; 424 | } 425 | 426 | :root[uidensity="touch"] #nav-bar{ 427 | padding-top: 0px !important; 428 | } 429 | 430 | :root[uidensity="touch"] .urlbar-icon:not(#pocket-button) { 431 | width: 34px !important; 432 | height: 36px !important; 433 | padding: 9px !important; 434 | } 435 | 436 | :root[uidensity="touch"] #pocket-button { 437 | width: 34px !important; 438 | height: 36px !important; 439 | padding: 10px 7px 8px 7px !important; 440 | } 441 | 442 | :root[uidensity="touch"] #contextual-feature-recommendation { 443 | width: 32px !important; 444 | height: 33px !important; 445 | padding: 2px !important; 446 | } 447 | 448 | :root[uidensity="touch"] #PanelUI-button { 449 | padding-left: 5px !important; 450 | padding-right: 5px !important; 451 | } 452 | 453 | :root[uidensity="touch"] tab { 454 | height: 40px !important; 455 | } 456 | 457 | :root[uidensity="touch"] #library-animatable-box { 458 | margin-top: 7px !important; 459 | } 460 | 461 | :root[uidensity="touch"] #tabs-newtab-button { 462 | margin-left: -5px !important; 463 | margin-bottom: 2px !important; 464 | padding-right: 3px !important; 465 | padding-left: 3px !important; 466 | padding-bottom: 1px !important; 467 | } 468 | 469 | :root[uidensity="touch"] #PersonalToolbar { 470 | height: 35px !important; 471 | margin-top: -3px !important; 472 | } 473 | 474 | /* various */ 475 | .urlbar-input-box, 476 | #identity-box, 477 | #tracking-protection-icon-container, 478 | .urlbar-history-dropmarker, 479 | .urlbar-page-action, 480 | #reader-mode-button, 481 | [anonid=urlbar-go-button], 482 | .toolbarbutton-1 > stack, 483 | toolbarbutton:not(.titlebar-button):not([class^="findbar-find"]):not([class^="scrollbutton"]), 484 | .close-icon 485 | { 486 | border-radius: var(--button-corner-rounding)!important; 487 | } 488 | 489 | 490 | .findbar-find-next { 491 | border-radius: 0px var(--button-corner-rounding) var(--button-corner-rounding) 0px !important; 492 | } 493 | 494 | .findbar-textbox { 495 | border-radius: var(--button-corner-rounding) 0px 0px var(--button-corner-rounding) !important; 496 | } 497 | 498 | .bookmark-item { 499 | padding-left: 7px !important; 500 | padding-right: 7px !important; 501 | margin-right: 0px !important; 502 | } 503 | 504 | 505 | 506 | #urlbar { 507 | border-radius: calc(1px + var(--button-corner-rounding)) !important; 508 | border: none !important; 509 | } 510 | 511 | /* style identity box */ 512 | #identity-box { 513 | margin-right: 0px !important; 514 | } 515 | 516 | 517 | 518 | /* style address bar */ 519 | #urlbar-background { 520 | background-color: transparent !important; 521 | border: none !important; 522 | box-shadow: none !important; 523 | } 524 | 525 | #urlbar[breakout-extend] { 526 | top: 4px !important; 527 | left: 0px !important; 528 | padding: 0px 0px 0px 0px !important; 529 | height: auto !important; 530 | width: 100% !important; 531 | } 532 | 533 | #urlbar[breakout][breakout-extend] > #urlbar-input-container { 534 | height: var(--urlbar-toolbar-height) !important; 535 | padding-block: 0px !important; 536 | padding-inline: 0px !important; 537 | padding-bottom: 6px !important; 538 | margin-bottom: -5px !important; 539 | margin-top: -1px !important; 540 | } 541 | 542 | /* urlbarView = the menu when you expand the address bar */ 543 | .urlbarView { 544 | width: 100% !important; 545 | margin-inline: 0px !important; 546 | box-shadow: 0px 5px 15px -7px black !important; 547 | border-radius: 0px 0px var(--menu-corner-rounding) var(--menu-corner-rounding) !important; 548 | border: none !important; 549 | padding-top: 0px !important; 550 | } 551 | 552 | .urlbarView-body-inner { 553 | border:none !important; 554 | } 555 | 556 | .search-one-offs { 557 | background-color: var(--toolbar-bgcolor) !important; 558 | } 559 | 560 | 561 | 562 | 563 | 564 | #tracking-protection-icon-container { 565 | border-inline-end: none !important; 566 | } 567 | 568 | #pageActionSeparator { 569 | display: none !important; 570 | } 571 | 572 | .urlbar-icon, #userContext-indicator, #userContext-label { 573 | fill: transparent !important; 574 | background-color: transparent !important; 575 | color: transparent !important; 576 | transition: var(--animation-speed) !important; 577 | } 578 | 579 | 580 | #urlbar:hover .urlbar-icon, 581 | #urlbar:active .urlbar-icon, 582 | #urlbar[focused] .urlbar-icon { 583 | fill: var(--toolbar-color) !important; 584 | } 585 | 586 | #urlbar:hover #userContext-indicator, 587 | #urlbar:active #userContext-indicator, 588 | #urlbar[focused] #userContext-indicator, 589 | #urlbar:hover #userContext-label, 590 | #urlbar:active #userContext-label, 591 | #urlbar[focused] #userContext-label { 592 | color: var(--identity-tab-color) !important; 593 | fill: var(--identity-tab-color) !important; 594 | } 595 | 596 | .urlbar-page-action[open] { 597 | background-color: var(--toolbarbutton-active-background) !important; 598 | fill: var(--toolbar-color) !important; 599 | } 600 | 601 | .urlbar-page-action[open]:hover { 602 | background-color: var(--toolbarbutton-active-background) !important; 603 | fill: var(--toolbar-color) !important; 604 | } 605 | 606 | .urlbar-page-action[open] .urlbar-icon { 607 | fill: var(--toolbar-color) !important; 608 | } 609 | 610 | .urlbar-scheme { 611 | padding-bottom: 11px !important; 612 | } 613 | 614 | 615 | #urlbar-container { 616 | margin-left: -1px !important; 617 | margin-right: -1px !important; 618 | } 619 | 620 | .urlbar-input-box { 621 | padding: 0px 5px !important; 622 | } 623 | 624 | #urlbar { 625 | background-color: transparent !important; 626 | color: var(--lwt-toolbar-field-color, black) !important; 627 | } 628 | 629 | 630 | #urlbar:not(.hidden-focus)[focused="true"] { 631 | background-color: var(--toolbarbutton-hover-background) !important; 632 | } 633 | 634 | #pocket-button { 635 | padding-bottom: 4px !important; 636 | } 637 | 638 | .urlbar-icon-wrapper > .urlbar-icon:hover { 639 | background-color: transparent !important; 640 | } 641 | 642 | .urlbar-icon-wrapper { 643 | background-color: transparent !important; 644 | transition: background-color var(--animation-speed) !important; 645 | } 646 | 647 | 648 | 649 | #urlbar:not([focused]) .urlbar-input-box:hover, 650 | #identity-box:hover, 651 | #tracking-protection-icon-container:hover, 652 | .urlbar-icon:hover, 653 | .urlbar-icon-wrapper:hover, 654 | [anonid=urlbar-go-button]:hover { 655 | background-color: var(--toolbarbutton-hover-background) !important; 656 | } 657 | 658 | 659 | #identity-box:active, 660 | #tracking-protection-icon-container:active, 661 | .urlbar-icon:active, 662 | .urlbar-icon-wrapper:active, 663 | [anonid=urlbar-go-button]:active { 664 | background-color: var(--toolbarbutton-active-background) !important; 665 | } 666 | 667 | .urlbar-input-box, 668 | #identity-box, 669 | #tracking-protection-icon-container, 670 | [anonid=urlbar-go-button], 671 | #urlbar { 672 | transition: background-color var(--animation-speed) !important; 673 | } 674 | 675 | #tracking-protection-icon, 676 | #identity-box image { 677 | transition: fill-opacity var(--animation-speed) !important; 678 | } 679 | 680 | [lwthemetextcolor="dark"] .urlbarView-body-outer { 681 | background-color: #f5f6f7 !important; 682 | color: var(--toolbar-color) !important; 683 | } 684 | 685 | .urlbarView-body-inner { 686 | background-color: var(--toolbar-bgcolor) !important; 687 | } 688 | 689 | .downloadsPanelFooterButton:hover { 690 | outline: none !important; 691 | } 692 | 693 | /* -------------------- Style context menus -------------------- */ 694 | #context-navigation, 695 | #context-sep-navigation, 696 | #context-bookmarklink, 697 | #context-viewinfo, 698 | #context-viewpartialsource-selection, 699 | #inspect-separator, 700 | #context-savelink, 701 | #context-sendimage, 702 | #context-setDesktopBackground, 703 | #context_reloadTab, 704 | #context_moveTabOptions, 705 | #context_bookmarkTab, 706 | .bookmarks-actions-menuseparator, 707 | .openintabs-menuitem { 708 | display: none !important; 709 | } 710 | 711 | menupopup, 712 | menupopup menuitem, 713 | menupopup menu, 714 | menupopup menuseparator { 715 | -moz-appearance: none !important; 716 | } 717 | 718 | menupopup:not(#BMB_bookmarksPopup) { 719 | padding: 6px 9px 9px !important; 720 | margin: -6px -9px 0 !important; 721 | border: 0 !important; 722 | background: 0 !important; 723 | } 724 | 725 | menu[open] menupopup:not(#BMB_bookmarksPopup) { 726 | margin: -12px -9px 0 !important; 727 | } 728 | 729 | #BMB_bookmarksPopup menu[open] menupopup { 730 | transform: translateY(4px) !important; 731 | } 732 | 733 | menupopup menuseparator 734 | { 735 | margin-top: 5px !important; 736 | margin-bottom: 5px !important; 737 | padding: 0px !important; 738 | border-bottom: none !important; 739 | opacity: 0.2 !important; 740 | } 741 | .menupopup-arrowscrollbox { 742 | background: Menu !important; /* fall back if adaptable colors are removed */ 743 | } 744 | 745 | .menupopup-arrowscrollbox:not(.in-bookmarks-menu) { 746 | padding: 6px 0 !important; 747 | } 748 | 749 | 750 | .panel-arrowcontent { 751 | padding-top: 0px !important; 752 | border: none !important; 753 | } 754 | 755 | /* shadows and rounded corners for menus */ 756 | .menupopup-arrowscrollbox:not(.in-bookmarks-menu) { 757 | border-radius: var(--menu-corner-rounding) !important; 758 | box-shadow: 0px 2px 9px -3px black !important; 759 | } 760 | 761 | .panel-arrowcontainer .panel-arrowcontent, .menupopup-arrowscrollbox, hbox[flex="1"][part="innerbox"] { 762 | border-radius: var(--menu-corner-rounding) !important; 763 | } 764 | 765 | 766 | 767 | 768 | .in-bookmarks-menu { 769 | padding-bottom: 5px !important; 770 | padding-top: 5px !important; 771 | } 772 | 773 | 774 | menu, 775 | menuitem, 776 | menucaption { 777 | -moz-appearance: none !important; 778 | height: var(--menu-item-height) !important; 779 | } 780 | 781 | menu, 782 | menuitem, 783 | menucaption { 784 | padding-left: 5px !important; 785 | padding-right: 5px !important; 786 | } 787 | 788 | menu:not(.subviewbutton) > .menu-right { 789 | margin-top: 2px !important; 790 | margin-right: 0px !important; 791 | width: 0px !important; 792 | } 793 | 794 | menu:not(.subviewbutton) > .menu-right image { 795 | margin-right: -5px !important; 796 | margin-top: -2px !important; 797 | border: 6px solid var(--toolbar-color) !important; 798 | border-top-color: transparent !important; 799 | border-right-color: transparent !important; 800 | border-bottom-color: transparent !important; 801 | } 802 | 803 | panelview toolbarbutton:not(#fxa-manage-account-button) { 804 | height: var(--menu-item-height) !important; 805 | } 806 | 807 | #BMB_bookmarksPopup .menu-right { 808 | height: 23px !important; 809 | } 810 | 811 | #sidebar-switcher-bookmarks, #customization-uidensity-menuitem-compact { 812 | margin-top: 5px !important; 813 | } 814 | 815 | #customization-lwtheme-menu-header { 816 | margin-top: 0px !important; 817 | } 818 | 819 | /* windows-specific adjustments */ 820 | @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10) { 821 | .bookmark-item .scrollbutton-up { 822 | margin-top: -3px !important; 823 | } 824 | 825 | .bookmark-item .scrollbutton-up > .toolbarbutton-icon { 826 | margin-top: -2px !important; 827 | border: 6px solid MenuText !important; 828 | border-top-color: transparent !important; 829 | border-right-color: transparent !important; 830 | border-left-color: transparent !important; 831 | } 832 | 833 | .bookmark-item .scrollbutton-down { 834 | margin-bottom: -3px !important; 835 | } 836 | 837 | .bookmark-item .scrollbutton-down > .toolbarbutton-icon { 838 | margin-bottom: -2px !important; 839 | border: 6px solid MenuText !important; 840 | border-bottom-color: transparent !important; 841 | border-right-color: transparent !important; 842 | border-left-color: transparent !important; 843 | } 844 | 845 | menu, 846 | menuitem, 847 | menucaption { 848 | padding-left: 5px !important; 849 | padding-right: 5px !important; 850 | } 851 | 852 | menu:not(.subviewbutton) > .menu-right { 853 | margin-right: 0px !important; 854 | padding-left: 0px !important; 855 | } 856 | 857 | .in-bookmarks-menu { 858 | padding-bottom: 5px !important; 859 | padding-top: 1px !important; 860 | } 861 | 862 | #BMB_bookmarksPopup menu menupopup { 863 | transform: translateY(-1px) !important; 864 | } 865 | } 866 | 867 | /* linux and mac-specific adjustments */ 868 | @media not (-moz-os-version: windows-win10) { 869 | @media not (-moz-os-version: windows-win8) { 870 | @media not (-moz-os-version: windows-win7) { 871 | hbox[flex="1"][part="innerbox"] { 872 | box-shadow: 0px 2px 12px -6px black !important; 873 | } 874 | 875 | .menu-iconic-left { 876 | margin: 0px 6px !important; 877 | } 878 | 879 | #BMB_bookmarksPopup menu[open] menupopup { 880 | transform: translateY(1px) !important; 881 | } 882 | } 883 | } 884 | } 885 | 886 | 887 | /* make menus adapt to theme */ 888 | menu, 889 | menuitem, 890 | menucaption { 891 | color: var(--toolbar-color) !important; 892 | } 893 | 894 | .menupopup-arrowscrollbox { 895 | background-color: var(--toolbar-bgcolor, Menu) !important; 896 | } 897 | 898 | menu[_moz-menuactive="true"]:not([disabled="true"]), 899 | menuitem[_moz-menuactive="true"]:not([disabled="true"]), 900 | menucaption[_moz-menuactive="true"]:not([disabled="true"]) { 901 | background-color: var(--toolbarbutton-hover-background, rgba(127,127,127,0.5)) !important; 902 | } 903 | 904 | menu[disabled="true"], 905 | menuitem[disabled="true"], 906 | menucaption[disabled="true"] { 907 | color: var(--toolbarbutton-hover-background, rgba(127,127,127,0.5)) !important; 908 | } 909 | 910 | menu[disabled="true"][_moz-menuactive="true"], 911 | menuitem[disabled="true"][_moz-menuactive="true"], 912 | menucaption[disabled="true"][_moz-menuactive="true"] { 913 | background-color: transparent !important; 914 | } 915 | 916 | .panel-arrow { 917 | fill: var(--toolbar-bgcolor) !important; 918 | } 919 | 920 | [lwthemetextcolor="dark"] panelview:not([extension]), 921 | [lwthemetextcolor="dark"] .panel-arrowcontent { 922 | background-color: #f5f6f7 !important; 923 | } 924 | 925 | .panel-subview-body { 926 | background-color: var(--toolbar-bgcolor) !important; 927 | } 928 | 929 | #downloadsPanel-mainView { 930 | background-color: var(--toolbar-bgcolor) !important; 931 | } 932 | 933 | #identity-popup-mainView { 934 | background-color: var(--toolbar-bgcolor) !important; 935 | } 936 | 937 | #identity-popup-content-blocking-detected { 938 | color: var(--toolbar-active-background) !important; 939 | } 940 | 941 | #identity-popup-permission-empty-hint { 942 | color: var(--toolbar-active-background) !important; 943 | } 944 | 945 | .identity-popup-warning-yellow { 946 | color: black !important; 947 | } 948 | 949 | panel:not([viewId^="PanelUI-webext"]) .panel-arrow { 950 | fill: var(--toolbar-bgcolor) !important; 951 | } 952 | 953 | .bookmark-item [class^="scrollbutton"] { 954 | background-color: var(--toolbar-bgcolor) !important; 955 | } 956 | -------------------------------------------------------------------------------- /old/69/chrome/userChrome.css: -------------------------------------------------------------------------------- 1 | /* https://github.com/coekuss/quietfox 2 | Thanks for using my file */ 3 | 4 | @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 5 | 6 | 7 | * { 8 | /* -------------------- 🎨 Customization 🎨 -------------------- */ 9 | --tab-corner-rounding: 5px; 10 | --animation-speed: 0.2s; 11 | --button-corner-rounding: 30px; 12 | } 13 | 14 | 15 | /* Bottom corner rounding for tabs, Remove this section if your tab bottom corners look bad */ 16 | tab[visuallyselected] .tab-background::before, 17 | tab[visuallyselected] .tab-background::after { 18 | content: "" !important; 19 | display: -moz-box !important; 20 | position: absolute !important; 21 | width: var(--tab-corner-rounding) !important; 22 | height: var(--tab-corner-rounding) !important; 23 | bottom: 0 !important; 24 | pointer-events: none !important; 25 | background-color: transparent !important; 26 | transition: var(--animation-speed) !important; 27 | } 28 | 29 | tab[visuallyselected] .tab-background::before { 30 | border-bottom-right-radius: var(--tab-corner-rounding) !important; 31 | left: 0px !important; 32 | transform: translateX(calc(-1 * var(--tab-corner-rounding) - 1px)) !important; 33 | box-shadow: 4px 4px 0 4px var(--toolbar-bgcolor) !important; 34 | transition: var(--animation-speed) !important; 35 | } 36 | 37 | tab[visuallyselected] .tab-background::after { 38 | border-bottom-left-radius: var(--tab-corner-rounding) !important; 39 | right: 0px !important; 40 | transform: translateX(var(--tab-corner-rounding)) !important; 41 | box-shadow: -4px 4px 0 4px var(--toolbar-bgcolor) !important; 42 | transition: var(--animation-speed) !important; 43 | } 44 | /* --------------------------------------------------------------------------------------- */ 45 | 46 | 47 | 48 | 49 | /* This makes certain menus adapt to your toolbar text color. Can make menu text illegible in some transparent themes, remove if needed. */ 50 | panelview:not([extension]), 51 | .panel-arrowcontent { 52 | background-color: var(--toolbar-bgcolor) !important; 53 | color: var(--toolbar-color) !important; 54 | } 55 | /*-------------------------------------------------------------------*/ 56 | 57 | 58 | 59 | 60 | 61 | /* -------------------- Transitions for some things -------------------- */ 62 | toolbarbutton, 63 | .subviewbutton, 64 | stack, 65 | .toolbarbutton-icon, 66 | vbox 67 | { 68 | transition: background-color var(--animation-speed) !important; 69 | 70 | } 71 | 72 | 73 | 74 | 75 | /* -------------------- Style tab bar -------------------- */ 76 | 77 | 78 | .tab-background, .tab-loading-burst { 79 | border-radius: var(--tab-corner-rounding) var(--tab-corner-rounding) 0px 0px !important; 80 | margin: -1px !important; 81 | 82 | } 83 | 84 | 85 | 86 | 87 | tab:not(:active) .tab-background { 88 | transition: background-color var(--animation-speed) !important; 89 | } 90 | 91 | 92 | :root[uidensity="compact"] { 93 | --tab-min-height: 31px !important; 94 | } 95 | 96 | tab:not([selected]):hover .tab-background { 97 | background-color: var(--toolbarbutton-hover-background) !important; 98 | } 99 | 100 | tab { 101 | min-width: 1px !important; 102 | clip-width: 1px !important; 103 | padding-bottom: 1px !important; 104 | } 105 | 106 | .tab-line { 107 | display: none !important; 108 | } 109 | 110 | tab:not([beforeselected-visible])::after { 111 | margin-top: 4px !important; 112 | margin-bottom: 4px !important; 113 | transition: border-color var(--animation-speed), margin-top var(--animation-speed) !important; 114 | 115 | } 116 | 117 | tab[beforehovered]::after, 118 | tab:hover::after { 119 | border-color: transparent !important; 120 | margin-top: 20px !important; 121 | } 122 | 123 | #navigator-toolbox { 124 | --tabs-border-color: transparent !important; 125 | } 126 | 127 | .titlebar-spacer[type="pre-tabs"] { 128 | border-inline-end: 0px !important; 129 | width: 0px !important; 130 | } 131 | 132 | 133 | 134 | tabs:not([overflow]) .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox { 135 | padding-left: 12px !important; 136 | } 137 | 138 | tabs[overflow] .tabbrowser-arrowscrollbox > .scrollbutton-up { 139 | margin-left: 12px !important; 140 | } 141 | 142 | .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox { 143 | padding-right: var(--tab-corner-rounding) !important; 144 | } 145 | 146 | .tabs-newtab-button { 147 | margin-left: 3px !important; 148 | margin-bottom: 3px !important; 149 | } 150 | 151 | tab[visuallyselected] { 152 | box-shadow: 0px 3px 12px -5px black !important; 153 | } 154 | 155 | 156 | 157 | 158 | /* -------------------- Style toolbar -------------------- */ 159 | .toolbarbutton-icon, .toolbarbutton-badge-stack { 160 | background-color: transparent !important; 161 | } 162 | 163 | toolbarbutton:not(#back-button)[open], .toolbarbutton-1:not(#back-button)[open] { 164 | background-color: var(--toolbarbutton-active-background); 165 | } 166 | 167 | #nav-bar .toolbarbutton-1 { 168 | margin-right: 2px !important; 169 | } 170 | 171 | .close-icon:not(.tab-close-button):hover { 172 | fill-opacity: 0.0 !important; 173 | } 174 | 175 | toolbarbutton:not(#back-button):not([disabled]):not([open]):hover, 176 | .toolbarbutton-1:not(#back-button):not([disabled]):not([open]):hover { 177 | background-color: var(--toolbarbutton-hover-background) !important; 178 | } 179 | 180 | .tab-close-button { 181 | transition: fill-opacity var(--animation-speed) !important; 182 | } 183 | 184 | .findbar-textbox:focus { 185 | border: 1px solid grey !important; 186 | } 187 | 188 | /* not compact buttons */ 189 | 190 | :root:not([uidensity="compact"]) #back-button > .toolbarbutton-icon { 191 | background-color: transparent !important; 192 | border-color: var(--toolbarbutton-hover-background) !important; 193 | transition: background-color var(--animation-speed) !important; 194 | } 195 | 196 | :root:not([uidensity="compact"]) #back-button:not([disabled]):not([open]):hover > .toolbarbutton-icon { 197 | background-color: var(--toolbarbutton-hover-background) !important; 198 | box-shadow: none !important; 199 | } 200 | 201 | :root:not([uidensity="compact"]) #back-button:not([disabled]):not([open]):active > .toolbarbutton-icon { 202 | background-color: var(--toolbarbutton-active-background) !important; 203 | box-shadow: none !important; 204 | } 205 | 206 | :root:not([uidensity="compact"]) toolbarbutton:not(#back-button):not([disabled]):not([open]):active, 207 | .toolbarbutton-1:not(#back-button):not([disabled]):not([open]):active { 208 | background-color: var(--toolbarbutton-active-background) !important; 209 | } 210 | 211 | 212 | 213 | :root:not([uidensity="compact"]) #back-button[open] > .toolbarbutton-icon { 214 | background-color: var(--toolbarbutton-active-background) !important; 215 | } 216 | 217 | 218 | 219 | 220 | 221 | /* normal density buttons */ 222 | 223 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #nav-bar .toolbarbutton-1:not(#back-button) { 224 | margin-top: 5px !important; 225 | margin-bottom: 5px !important; 226 | margin-left: 0px !important; 227 | margin-right: 0px !important; 228 | padding-left: 2px !important; 229 | padding-right: 2px !important; 230 | } 231 | 232 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #back-button { 233 | margin-top: -1px !important; 234 | margin-bottom: -1px !important; 235 | } 236 | 237 | :root:not([uidensity="touch"]):not([uidensity="compact"]) .tabs-newtab-button { 238 | padding-right: 1px !important; 239 | padding-left: 1px !important; 240 | } 241 | 242 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #identity-box { 243 | padding-left: 8px !important; 244 | padding-right: 8px !important; 245 | } 246 | 247 | 248 | 249 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #urlbar { 250 | height: 36px !important; 251 | padding-top: 1px !important; 252 | padding-bottom: 1px !important; 253 | } 254 | 255 | :root:not([uidensity="touch"]):not([uidensity="compact"]) .urlbar-icon:not(#pocket-button) { 256 | width: 32px !important; 257 | height: 36px !important; 258 | padding: 8px !important; 259 | } 260 | 261 | 262 | 263 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #pocket-button { 264 | width: 32px !important; 265 | height: 36px !important; 266 | padding: 8px 8px 6px 8px !important; 267 | } 268 | 269 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #contextual-feature-recommendation { 270 | width: 32px !important; 271 | height: 32px !important; 272 | padding: 2px !important; 273 | } 274 | 275 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #PanelUI-button { 276 | padding-right: 5px !important; 277 | padding-left: 5px !important; 278 | margin-left: 5px !important; 279 | } 280 | 281 | 282 | 283 | 284 | 285 | /* compact density buttons */ 286 | 287 | :root[uidensity="compact"] #nav-bar .toolbarbutton-1 { 288 | margin-top: 2px !important; 289 | margin-bottom: 1px !important; 290 | padding: 0px 0px 0px 0px !important; 291 | } 292 | 293 | :root[uidensity="compact"] #nav-bar toolbaritem[animate] box { 294 | margin-top: 1px !important; 295 | } 296 | 297 | :root[uidensity="compact"] .tabs-newtab-button { 298 | padding: 0px !important; 299 | } 300 | 301 | :root[uidensity="compact"] #back-button[open] { 302 | background-color: var(--toolbarbutton-active-background) !important; 303 | } 304 | 305 | 306 | :root[uidensity="compact"] #back-button:not([disabled]):not([open]):hover { 307 | background-color: var(--toolbarbutton-hover-background) !important; 308 | } 309 | :root[uidensity="compact"] #back-button:not([disabled]):not([open]):active { 310 | background-color: var(--toolbarbutton-active-background) !important; 311 | } 312 | 313 | :root[uidensity="compact"] #identity-box { 314 | min-width: 2px !important; 315 | padding-left: 6px !important; 316 | padding-right: 6px !important; 317 | } 318 | 319 | :root[uidensity="compact"] #nav-bar{ 320 | padding-top: 1px !important; 321 | } 322 | 323 | 324 | :root[uidensity="compact"] #urlbar { 325 | height: 30px !important; 326 | margin-top: 0px !important; 327 | margin-bottom: 0px !important; 328 | padding-bottom: 0px !important; 329 | } 330 | 331 | 332 | 333 | :root[uidensity="compact"] .urlbar-icon:not(#pocket-button) { 334 | width: 28px !important; 335 | height: 30px !important; 336 | padding: 6px !important; 337 | } 338 | 339 | :root[uidensity="compact"] #pocket-button { 340 | width: 28px !important; 341 | height: 40px !important; 342 | padding: 7px 6px 5px 6px !important; 343 | } 344 | 345 | :root[uidensity="compact"] #contextual-feature-recommendation { 346 | width: 32px !important; 347 | height: 32px !important; 348 | padding: 2px !important; 349 | } 350 | 351 | :root[uidensity="compact"] .bookmark-item { 352 | padding-top: 2px !important; 353 | padding-bottom: 2px !important; 354 | } 355 | 356 | 357 | 358 | 359 | 360 | 361 | /* touch density buttons */ 362 | 363 | :root[uidensity="touch"] #nav-bar .toolbarbutton-1:not(#back-button) { 364 | margin-top: 3px !important; 365 | margin-bottom: 3px !important; 366 | padding-left: 0px !important; 367 | padding-right: 0px !important; 368 | } 369 | 370 | 371 | 372 | 373 | 374 | 375 | :root[uidensity="touch"] #stop-reload-button[animate] .toolbarbutton-animatable-image { 376 | margin-top: 1px !important; 377 | } 378 | 379 | :root[uidensity="touch"] #identity-box { 380 | padding-left: 9px !important; 381 | padding-right: 9px !important; 382 | } 383 | 384 | :root[uidensity="touch"] #urlbar { 385 | height: 36px !important; 386 | margin-top: 0px !important; 387 | margin-bottom: 0px !important; 388 | } 389 | 390 | :root[uidensity="touch"] #nav-bar{ 391 | padding-top: 2px !important; 392 | } 393 | 394 | 395 | 396 | :root[uidensity="touch"] .urlbar-icon:not(#pocket-button) { 397 | width: 34px !important; 398 | height: 36px !important; 399 | padding: 9px !important; 400 | } 401 | 402 | :root[uidensity="touch"] #pocket-button { 403 | width: 34px !important; 404 | height: 36px !important; 405 | padding: 10px 7px 8px 7px !important; 406 | } 407 | 408 | :root[uidensity="touch"] #contextual-feature-recommendation { 409 | width: 32px !important; 410 | height: 33px !important; 411 | padding: 2px !important; 412 | } 413 | 414 | :root[uidensity="touch"] #PanelUI-button { 415 | padding-left: 5px !important; 416 | padding-right: 5px !important; 417 | } 418 | 419 | 420 | :root[uidensity="touch"] .bookmark-item { 421 | padding-top: 4px !important; 422 | padding-bottom: 4px !important; 423 | } 424 | 425 | :root[uidensity="touch"] tab { 426 | height: 40px !important; 427 | } 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | .urlbar-input-box, 436 | #identity-box, 437 | .urlbar-history-dropmarker, 438 | .urlbar-page-action, 439 | #reader-mode-button, 440 | [anonid=urlbar-go-button], 441 | .toolbarbutton-1 > stack, 442 | toolbarbutton:not(.titlebar-button):not([class^="findbar-find"]):not([class^="scrollbutton"]), 443 | .close-icon 444 | { 445 | border-radius: var(--button-corner-rounding)!important; 446 | } 447 | 448 | 449 | .findbar-find-next { 450 | border-radius: 0px var(--button-corner-rounding) var(--button-corner-rounding) 0px !important; 451 | } 452 | 453 | .findbar-textbox { 454 | border-radius: var(--button-corner-rounding) 0px 0px var(--button-corner-rounding) !important; 455 | } 456 | 457 | .bookmark-item { 458 | padding-left: 7px !important; 459 | padding-right: 7px !important; 460 | padding-top: 3px !important; 461 | padding-bottom: 3px !important; 462 | margin-right: 0px !important; 463 | } 464 | 465 | #urlbar { 466 | border-radius: calc(1px + var(--button-corner-rounding)) !important; 467 | } 468 | 469 | /* style identity box */ 470 | #identity-box { 471 | margin-right: 0px !important; 472 | } 473 | 474 | #identity-popup[connection^="secure"], #identity-popup[mixedcontent] { 475 | padding-left: 12px !important; 476 | } 477 | 478 | #urlbar:not([pageproxystate="invalid"]) #identity-box:not(.chromeUI):not([class="unknownIdentity"]):not([class="unknownIdentity no-hover"]) #identity-icon { 479 | width: 0px !important; 480 | margin-left: -4px !important; 481 | } 482 | 483 | 484 | 485 | /* style address bar */ 486 | #urlbar-container *:not(#identity-box) { 487 | border-color: transparent !important; 488 | box-shadow: none !important; 489 | } 490 | 491 | #pageActionSeparator { 492 | display: none !important; 493 | } 494 | 495 | .urlbar-icon, .urlbar-icon image, #userContext-indicator, #userContext-label { 496 | fill: transparent !important; 497 | background-color: transparent !important; 498 | color: transparent !important; 499 | transition: var(--animation-speed) !important; 500 | } 501 | 502 | 503 | #urlbar:hover .urlbar-icon, 504 | #urlbar:active .urlbar-icon, 505 | #urlbar[focused] .urlbar-icon, 506 | #urlbar:hover .urlbar-icon:not([open]) image, 507 | #urlbar:active .urlbar-icon image, 508 | #urlbar[focused] .urlbar-icon image { 509 | fill: var(--toolbar-color) !important; 510 | } 511 | 512 | #urlbar:hover #userContext-indicator, 513 | #urlbar:active #userContext-indicator, 514 | #urlbar[focused] #userContext-indicator, 515 | #urlbar:hover #userContext-label, 516 | #urlbar:active #userContext-label, 517 | #urlbar[focused] #userContext-label { 518 | color: var(--identity-tab-color) !important; 519 | fill: var(--identity-tab-color) !important; 520 | } 521 | 522 | .urlbar-page-action[open] { 523 | background-color: var(--toolbarbutton-active-background) !important; 524 | fill: var(--toolbar-color) !important; 525 | } 526 | 527 | .urlbar-page-action[open]:hover { 528 | background-color: var(--toolbarbutton-active-background) !important; 529 | fill: var(--toolbar-color) !important; 530 | } 531 | 532 | .urlbar-page-action[open] .urlbar-icon { 533 | fill: var(--toolbar-color) !important; 534 | } 535 | 536 | 537 | #library-button[animate] { 538 | margin-bottom: 0px !important; 539 | margin-top: 50px !important; 540 | } 541 | 542 | #library-button[animate] image { 543 | margin-bottom: -120px !important; 544 | margin-top: 100px !important; 545 | } 546 | 547 | 548 | 549 | 550 | .urlbar-scheme { 551 | padding-bottom: 11px !important; 552 | } 553 | 554 | 555 | #urlbar-container { 556 | margin-left: -5px !important; 557 | margin-right: -5px !important; 558 | } 559 | 560 | #urlbar-container #urlbar[pageproxystate="invalid"] { 561 | margin-left: 5px !important; 562 | } 563 | 564 | .urlbar-input-box { 565 | padding: 5px 5px !important; 566 | } 567 | 568 | #urlbar { 569 | background-color: transparent !important; 570 | color: var(--lwt-toolbar-field-color, black) !important; 571 | } 572 | 573 | 574 | #urlbar:not(.hidden-focus)[focused="true"] { 575 | background-color: var(--toolbarbutton-hover-background) !important; 576 | } 577 | 578 | #pocket-button { 579 | padding-bottom: 4px !important; 580 | } 581 | 582 | .urlbar-icon-wrapper > .urlbar-icon:hover { 583 | background-color: transparent !important; 584 | } 585 | 586 | .urlbar-icon-wrapper { 587 | background-color: transparent !important; 588 | transition: background-color var(--animation-speed) !important; 589 | } 590 | 591 | 592 | 593 | #urlbar:not([focused]) .urlbar-input-box:hover, 594 | #identity-box:hover, 595 | .urlbar-icon:hover, 596 | .urlbar-icon-wrapper:hover, 597 | [anonid=urlbar-go-button]:hover { 598 | background-color: var(--toolbarbutton-hover-background) !important; 599 | } 600 | 601 | 602 | #identity-box:active, 603 | .urlbar-icon:active, 604 | .urlbar-icon-wrapper:active, 605 | [anonid=urlbar-go-button]:active { 606 | background-color: var(--toolbarbutton-active-background) !important; 607 | } 608 | 609 | .urlbar-input-box, 610 | #identity-box, 611 | [anonid=urlbar-go-button], 612 | #urlbar { 613 | transition: background-color var(--animation-speed) !important; 614 | } 615 | 616 | [lwthemetextcolor="dark"] .urlbarView-body-outer { 617 | background-color: #f5f6f7 !important; 618 | color: var(--toolbar-color) !important; 619 | } 620 | 621 | .urlbarView-body-inner { 622 | background-color: var(--toolbar-bgcolor) !important; 623 | } 624 | 625 | .downloadsPanelFooterButton:hover { 626 | outline: none !important; 627 | } 628 | 629 | /* -------------------- Style context menus -------------------- */ 630 | #context-navigation, 631 | #context-sep-navigation, 632 | #context-bookmarklink, 633 | #context-viewinfo, 634 | #context-viewpartialsource-selection, 635 | #inspect-separator, 636 | #context-savelink, 637 | #context-sendimage, 638 | #context-setDesktopBackground, 639 | #context_reloadTab, 640 | #context_moveTabOptions, 641 | #context_bookmarkTab, 642 | .bookmarks-actions-menuseparator, 643 | .openintabs-menuitem { 644 | display: none !important; 645 | } 646 | 647 | menu, 648 | menuitem, 649 | menucaption { 650 | -moz-appearance: none !important; 651 | height: 25px !important; 652 | } 653 | 654 | menu[_moz-menuactive="true"]:not([disabled="true"]), 655 | menuitem[_moz-menuactive="true"]:not([disabled="true"]), 656 | menucaption[_moz-menuactive="true"]:not([disabled="true"]) { 657 | background-color: var(--toolbarbutton-hover-background, rgba(127,127,127,0.5)) !important; 658 | } 659 | 660 | menu[disabled="true"], 661 | menuitem[disabled="true"], 662 | menucaption[disabled="true"] { 663 | color: var(--toolbarbutton-hover-background, rgba(127,127,127,0.5)) !important; 664 | } 665 | 666 | menu[disabled="true"][_moz-menuactive="true"], 667 | menuitem[disabled="true"][_moz-menuactive="true"], 668 | menucaption[disabled="true"][_moz-menuactive="true"] { 669 | color: var(--toolbarbutton-hover-background, rgba(127,127,127,0.5)) !important; 670 | background-color: transparent !important; 671 | } 672 | 673 | menupopup .popup-internal-box { 674 | background-color: Menu !important; 675 | } 676 | 677 | 678 | 679 | 680 | 681 | 682 | 683 | menu, 684 | menuitem, 685 | menucaption { 686 | padding-left: 5px !important; 687 | padding-right: 5px !important; 688 | } 689 | 690 | menu:not(.subviewbutton) > .menu-right { 691 | margin-top: 2px !important; 692 | margin-right: 0px !important; 693 | width: 0px !important; 694 | } 695 | 696 | menu:not(.subviewbutton) > .menu-right image { 697 | margin-right: -5px !important; 698 | margin-top: -2px !important; 699 | border: 6px solid var(--toolbar-color) !important; 700 | border-top-color: transparent !important; 701 | border-right-color: transparent !important; 702 | border-bottom-color: transparent !important; 703 | } 704 | 705 | 706 | 707 | @media (-moz-os-version: windows-xp), (-moz-os-version: windows-vista), 708 | (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10) { 709 | 710 | menupopup .popup-internal-box { 711 | margin: -2px !important; 712 | padding-bottom: 3px !important; 713 | padding-top: 3px !important; 714 | } 715 | 716 | 717 | .bookmark-item .scrollbutton-up { 718 | margin-top: -3px !important; 719 | } 720 | 721 | .bookmark-item .scrollbutton-up > .toolbarbutton-icon { 722 | margin-top: -2px !important; 723 | border: 6px solid MenuText !important; 724 | border-top-color: transparent !important; 725 | border-right-color: transparent !important; 726 | border-left-color: transparent !important; 727 | } 728 | 729 | .bookmark-item .scrollbutton-down { 730 | margin-bottom: -3px !important; 731 | } 732 | 733 | .bookmark-item .scrollbutton-down > .toolbarbutton-icon { 734 | margin-bottom: -2px !important; 735 | border: 6px solid MenuText !important; 736 | border-bottom-color: transparent !important; 737 | border-right-color: transparent !important; 738 | border-left-color: transparent !important; 739 | } 740 | 741 | menupopup { 742 | margin-left: 1px !important; 743 | } 744 | 745 | menu, 746 | menuitem, 747 | menucaption { 748 | padding-left: 5px !important; 749 | padding-right: 5px !important; 750 | } 751 | 752 | menu:not(.subviewbutton) > .menu-right { 753 | margin-right: 0px !important; 754 | padding-left: 0px !important; 755 | } 756 | } 757 | 758 | 759 | 760 | 761 | 762 | /* context menu in developer toolbox (F12) */ 763 | .theme-dark .popup-internal-box { 764 | background-color: #323234 !important; 765 | color: white !important; 766 | } 767 | 768 | .theme-light .popup-internal-box { 769 | background-color: white !important; 770 | color: black !important; 771 | } 772 | 773 | 774 | .theme-dark menu[_moz-menuactive="true"], 775 | .theme-dark menuitem[_moz-menuactive="true"], 776 | .theme-dark menucaption[_moz-menuactive="true"], 777 | .theme-light menu[_moz-menuactive="true"], 778 | .theme-light menuitem[_moz-menuactive="true"], 779 | .theme-light menucaption[_moz-menuactive="true"]{ 780 | background-color: rgba(127,127,127,0.5) !important; 781 | } 782 | 783 | .theme-dark menu[_moz-menuactive="true"], 784 | .theme-dark menuitem[_moz-menuactive="true"], 785 | .theme-dark menucaption[_moz-menuactive="true"] { 786 | color: white !important; 787 | } 788 | 789 | .theme-dark menu[disabled="true"], 790 | .theme-dark menuitem[disabled="true"], 791 | .theme-dark menucaption[disabled="true"], 792 | .theme-light menu[disabled="true"], 793 | .theme-light menuitem[disabled="true"], 794 | .theme-light menucaption[disabled="true"] { 795 | color: rgba(127,127,127,0.5) !important; 796 | background-color: transparent !important; 797 | } 798 | 799 | .bookmark-item .scrollbutton-up > .toolbarbutton-icon { 800 | margin-top: -2px !important; 801 | border: 6px solid var(--toolbar-color) !important; 802 | border-top-color: transparent !important; 803 | border-right-color: transparent !important; 804 | border-left-color: transparent !important; 805 | } 806 | 807 | .bookmark-item .scrollbutton-down > .toolbarbutton-icon { 808 | margin-bottom: -2px !important; 809 | border: 6px solid var(--toolbar-color) !important; 810 | border-bottom-color: transparent !important; 811 | border-right-color: transparent !important; 812 | border-left-color: transparent !important; 813 | } 814 | 815 | 816 | 817 | /* make menus adapt to theme */ 818 | menu, 819 | menuitem, 820 | menucaption { 821 | color: var(--toolbar-color) !important; 822 | } 823 | 824 | [lwthemetextcolor="dark"] menupopup .popup-internal-box { 825 | background-color: #f5f6f7 !important; 826 | } 827 | 828 | [lwthemetextcolor="bright"] menupopup .popup-internal-box { 829 | background-color: #323234 !important; 830 | } 831 | 832 | menupopup .arrowscrollbox-scrollbox { 833 | margin-top: -3px !important; 834 | margin-bottom: -3px !important; 835 | padding-top: 4px !important; 836 | padding-bottom: 4px !important; 837 | background-color: var(--toolbar-bgcolor) !important; 838 | } 839 | 840 | 841 | 842 | [lwthemetextcolor="dark"] panelview:not([extension]), 843 | [lwthemetextcolor="dark"] .panel-arrowcontent { 844 | background-color: #f5f6f7 !important; 845 | } 846 | 847 | .panel-subview-body { 848 | background-color: var(--toolbar-bgcolor) !important; 849 | } 850 | 851 | #downloadsPanel-mainView { 852 | background-color: var(--toolbar-bgcolor) !important; 853 | } 854 | 855 | #identity-popup-mainView { 856 | background-color: var(--toolbar-bgcolor) !important; 857 | } 858 | 859 | #identity-popup-content-blocking-detected { 860 | color: var(--toolbar-active-background) !important; 861 | } 862 | 863 | #identity-popup-permission-empty-hint { 864 | color: var(--toolbar-active-background) !important; 865 | } 866 | 867 | .identity-popup-warning-yellow { 868 | color: var(--toolbar-active-background) !important; 869 | } 870 | 871 | panel:not([viewId^="PanelUI-webext"]) .panel-arrow { 872 | fill: var(--toolbar-bgcolor) !important; 873 | } 874 | 875 | .bookmark-item [class^="scrollbutton"] { 876 | background-color: var(--toolbar-bgcolor) !important; 877 | } 878 | 879 | 880 | -------------------------------------------------------------------------------- /old/70/chrome/userChrome.css: -------------------------------------------------------------------------------- 1 | /* https://github.com/coekuss/quietfox 2 | Thanks for using my file */ 3 | 4 | @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 5 | 6 | 7 | * { 8 | /* -------------------- 🎨 Customization 🎨 -------------------- */ 9 | --tab-corner-rounding: 4px; 10 | --animation-speed: 0.2s; 11 | --button-corner-rounding: 4px; 12 | } 13 | 14 | 15 | /* Bottom corner rounding for tabs, Remove this section if your tab bottom corners look bad */ 16 | tab[visuallyselected] .tab-background::before, 17 | tab[visuallyselected] .tab-background::after { 18 | content: "" !important; 19 | display: -moz-box !important; 20 | position: absolute !important; 21 | width: var(--tab-corner-rounding) !important; 22 | height: var(--tab-corner-rounding) !important; 23 | bottom: 0 !important; 24 | pointer-events: none !important; 25 | background-color: transparent !important; 26 | transition: var(--animation-speed) !important; 27 | } 28 | 29 | tab[visuallyselected] .tab-background::before { 30 | border-bottom-right-radius: var(--tab-corner-rounding) !important; 31 | left: 0px !important; 32 | transform: translateX(calc(-1 * var(--tab-corner-rounding) - 1px)) !important; 33 | box-shadow: 4px 4px 0 4px var(--toolbar-bgcolor) !important; 34 | transition: var(--animation-speed) !important; 35 | } 36 | 37 | tab[visuallyselected] .tab-background::after { 38 | border-bottom-left-radius: var(--tab-corner-rounding) !important; 39 | right: 0px !important; 40 | transform: translateX(var(--tab-corner-rounding)) !important; 41 | box-shadow: -4px 4px 0 4px var(--toolbar-bgcolor) !important; 42 | transition: var(--animation-speed) !important; 43 | } 44 | /* --------------------------------------------------------------------------------------- */ 45 | 46 | 47 | 48 | 49 | /* This makes certain menus adapt to your toolbar text color. Can make menu text illegible in some transparent themes, remove if needed. */ 50 | panelview:not([extension]), 51 | .panel-arrowcontent { 52 | background-color: var(--toolbar-bgcolor) !important; 53 | color: var(--toolbar-color) !important; 54 | } 55 | /*-------------------------------------------------------------------*/ 56 | 57 | 58 | 59 | 60 | 61 | /* -------------------- Transitions for some things -------------------- */ 62 | toolbarbutton, 63 | .subviewbutton, 64 | stack, 65 | .toolbarbutton-icon, 66 | vbox 67 | { 68 | transition: background-color var(--animation-speed) !important; 69 | 70 | } 71 | 72 | 73 | 74 | 75 | /* -------------------- Style tab bar -------------------- */ 76 | 77 | 78 | .tab-background, .tab-loading-burst { 79 | border-radius: var(--tab-corner-rounding) var(--tab-corner-rounding) 0px 0px !important; 80 | margin: -1px !important; 81 | 82 | } 83 | 84 | 85 | 86 | 87 | tab:not(:active) .tab-background { 88 | transition: background-color var(--animation-speed) !important; 89 | } 90 | 91 | 92 | :root[uidensity="compact"] { 93 | --tab-min-height: 31px !important; 94 | } 95 | 96 | tab:not([selected]):hover .tab-background { 97 | background-color: var(--toolbarbutton-hover-background) !important; 98 | } 99 | 100 | tab { 101 | min-width: 1px !important; 102 | clip-width: 1px !important; 103 | padding-bottom: 1px !important; 104 | } 105 | 106 | .tab-line { 107 | display: none !important; 108 | } 109 | 110 | tab:not([beforeselected-visible])::after { 111 | margin-top: 4px !important; 112 | margin-bottom: 4px !important; 113 | transition: border-color var(--animation-speed), margin-top var(--animation-speed) !important; 114 | 115 | } 116 | 117 | tab[beforehovered]::after, 118 | tab:hover::after { 119 | border-color: transparent !important; 120 | margin-top: 20px !important; 121 | } 122 | 123 | #navigator-toolbox { 124 | --tabs-border-color: transparent !important; 125 | } 126 | 127 | .titlebar-spacer[type="pre-tabs"] { 128 | border-inline-end: 0px !important; 129 | width: 0px !important; 130 | } 131 | 132 | 133 | 134 | tabs:not([overflow]) .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox { 135 | padding-left: 12px !important; 136 | } 137 | 138 | tabs[overflow] .tabbrowser-arrowscrollbox > .scrollbutton-up { 139 | margin-left: 12px !important; 140 | } 141 | 142 | .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox { 143 | padding-right: var(--tab-corner-rounding) !important; 144 | } 145 | 146 | 147 | 148 | tab[visuallyselected] { 149 | box-shadow: 0px 3px 12px -5px black !important; 150 | } 151 | 152 | 153 | 154 | 155 | /* -------------------- Style toolbar -------------------- */ 156 | .toolbarbutton-icon, .toolbarbutton-badge-stack { 157 | background-color: transparent !important; 158 | } 159 | 160 | toolbarbutton:not(#back-button)[open], .toolbarbutton-1:not(#back-button)[open] { 161 | background-color: var(--toolbarbutton-active-background); 162 | } 163 | 164 | #nav-bar .toolbarbutton-1 { 165 | margin-right: 2px !important; 166 | } 167 | 168 | .close-icon:not(.tab-close-button):hover { 169 | fill-opacity: 0.0 !important; 170 | } 171 | 172 | toolbarbutton:not(#back-button):not([disabled]):not([open]):hover, 173 | .toolbarbutton-1:not(#back-button):not([disabled]):not([open]):hover { 174 | background-color: var(--toolbarbutton-hover-background) !important; 175 | } 176 | 177 | .tab-close-button { 178 | transition: fill-opacity var(--animation-speed) !important; 179 | } 180 | 181 | .findbar-textbox:focus { 182 | border: 1px solid grey !important; 183 | } 184 | 185 | #BMB_bookmarksShowAll { 186 | display: none !important; 187 | } 188 | 189 | 190 | 191 | /* not compact buttons */ 192 | 193 | :root:not([uidensity="compact"]) #back-button > .toolbarbutton-icon { 194 | background-color: transparent !important; 195 | border-color: var(--toolbarbutton-hover-background) !important; 196 | transition: background-color var(--animation-speed) !important; 197 | } 198 | 199 | :root:not([uidensity="compact"]) #back-button:not([disabled]):not([open]):hover > .toolbarbutton-icon { 200 | background-color: var(--toolbarbutton-hover-background) !important; 201 | box-shadow: none !important; 202 | } 203 | 204 | :root:not([uidensity="compact"]) #back-button:not([disabled]):not([open]):active > .toolbarbutton-icon { 205 | background-color: var(--toolbarbutton-active-background) !important; 206 | box-shadow: none !important; 207 | } 208 | 209 | :root:not([uidensity="compact"]) toolbarbutton:not(#back-button):not([disabled]):not([open]):active, 210 | .toolbarbutton-1:not(#back-button):not([disabled]):not([open]):active { 211 | background-color: var(--toolbarbutton-active-background) !important; 212 | } 213 | 214 | 215 | 216 | :root:not([uidensity="compact"]) #back-button[open] > .toolbarbutton-icon { 217 | background-color: var(--toolbarbutton-active-background) !important; 218 | } 219 | 220 | 221 | 222 | 223 | 224 | /* normal density buttons */ 225 | 226 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #nav-bar .toolbarbutton-1:not(#back-button) { 227 | margin-top: 4px !important; 228 | margin-bottom: 4px !important; 229 | margin-left: 0px !important; 230 | margin-right: 0px !important; 231 | padding-left: 3px !important; 232 | padding-right: 3px !important; 233 | } 234 | 235 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #nav-bar .toolbarbutton-1:not(#back-button) image { 236 | margin-bottom: 1px !important; 237 | } 238 | 239 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #back-button { 240 | margin-top: -1px !important; 241 | margin-bottom: -1px !important; 242 | } 243 | 244 | 245 | 246 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #identity-box, 247 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #tracking-protection-icon-container { 248 | padding-left: 8px !important; 249 | padding-right: 8px !important; 250 | } 251 | 252 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #identity-icon, 253 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #tracking-protection-icon-box { 254 | margin-left: 1px !important; 255 | margin-right: 1px !important; 256 | } 257 | 258 | 259 | 260 | 261 | :root:not([uidensity="touch"]):not([uidensity="compact"]) .urlbar-icon { 262 | margin-top: 1px !important; 263 | margin-bottom: 1px !important; 264 | } 265 | 266 | 267 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #urlbar { 268 | height: 36px !important; 269 | margin-top: 0px !important; 270 | margin-bottom: 0px !important; 271 | padding-top: 0px !important; 272 | padding-bottom: 0px !important; 273 | } 274 | 275 | 276 | :root:not([uidensity="touch"]):not([uidensity="compact"]) .urlbar-icon:not(#pocket-button) { 277 | width: 32px !important; 278 | height: 36px !important; 279 | padding: 8px !important; 280 | } 281 | 282 | 283 | 284 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #pocket-button { 285 | width: 32px !important; 286 | height: 36px !important; 287 | padding: 8px 8px 6px 8px !important; 288 | } 289 | 290 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #contextual-feature-recommendation { 291 | width: 32px !important; 292 | height: 32px !important; 293 | padding: 2px !important; 294 | } 295 | 296 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #PanelUI-button { 297 | padding-right: 5px !important; 298 | padding-left: 5px !important; 299 | margin-left: 5px !important; 300 | } 301 | 302 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #tabs-newtab-button { 303 | margin-left: 1px !important; 304 | margin-bottom: 1px !important; 305 | padding-bottom: 1px !important; 306 | } 307 | 308 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #library-animatable-box { 309 | margin-top: 4px !important; 310 | } 311 | 312 | 313 | /* compact density buttons */ 314 | 315 | :root[uidensity="compact"] #nav-bar .toolbarbutton-1 { 316 | margin-top: 4px !important; 317 | margin-bottom: 4px !important; 318 | padding: 0px 0px 0px 0px !important; 319 | } 320 | 321 | 322 | 323 | 324 | :root[uidensity="compact"] #nav-bar toolbaritem[animate] box { 325 | margin-top: 1px !important; 326 | } 327 | 328 | 329 | :root[uidensity="compact"] #back-button[open] { 330 | background-color: var(--toolbarbutton-active-background) !important; 331 | } 332 | 333 | 334 | :root[uidensity="compact"] #back-button:not([disabled]):not([open]):hover { 335 | background-color: var(--toolbarbutton-hover-background) !important; 336 | } 337 | :root[uidensity="compact"] #back-button:not([disabled]):not([open]):active { 338 | background-color: var(--toolbarbutton-active-background) !important; 339 | } 340 | 341 | :root[uidensity="compact"] #identity-box, 342 | :root[uidensity="compact"] #tracking-protection-icon-container { 343 | min-width: 2px !important; 344 | padding-left: 6px !important; 345 | padding-right: 6px !important; 346 | } 347 | 348 | :root[uidensity="compact"] #nav-bar{ 349 | padding-top: 1px !important; 350 | } 351 | 352 | 353 | :root[uidensity="compact"] #urlbar { 354 | height: 30px !important; 355 | margin-top: 0px !important; 356 | margin-bottom: 0px !important; 357 | padding-bottom: 0px !important; 358 | } 359 | 360 | 361 | 362 | :root[uidensity="compact"] .urlbar-icon:not(#pocket-button) { 363 | width: 28px !important; 364 | height: 30px !important; 365 | padding: 6px !important; 366 | } 367 | 368 | :root[uidensity="compact"] #pocket-button { 369 | width: 28px !important; 370 | height: 40px !important; 371 | padding: 7px 6px 5px 6px !important; 372 | } 373 | 374 | :root[uidensity="compact"] #contextual-feature-recommendation { 375 | width: 32px !important; 376 | height: 32px !important; 377 | padding: 2px !important; 378 | } 379 | 380 | :root[uidensity="compact"] .bookmark-item { 381 | padding-top: 2px !important; 382 | padding-bottom: 2px !important; 383 | } 384 | 385 | 386 | :root[uidensity="compact"] #tabs-newtab-button { 387 | margin-left: 1px !important; 388 | margin-bottom: 1px !important; 389 | padding-bottom: 1px !important; 390 | } 391 | 392 | :root[uidensity="compact"] #library-animatable-box { 393 | margin-top: 5px !important; 394 | } 395 | 396 | 397 | /* touch density buttons */ 398 | 399 | :root[uidensity="touch"] #nav-bar .toolbarbutton-1:not(#back-button) { 400 | margin-top: 5px !important; 401 | margin-bottom: 3px !important; 402 | padding-left: 0px !important; 403 | padding-right: 0px !important; 404 | } 405 | 406 | 407 | :root[uidensity="touch"] #stop-reload-button[animate] .toolbarbutton-animatable-image { 408 | margin-top: 2px !important; 409 | } 410 | 411 | :root[uidensity="touch"] #identity-box, 412 | :root[uidensity="touch"] #tracking-protection-icon-container { 413 | padding-left: 9px !important; 414 | padding-right: 9px !important; 415 | } 416 | 417 | 418 | :root[uidensity="touch"] #urlbar { 419 | height: 36px !important; 420 | margin-top: 0px !important; 421 | margin-bottom: 0px !important; 422 | } 423 | 424 | :root[uidensity="touch"] #nav-bar{ 425 | padding-top: 2px !important; 426 | } 427 | 428 | 429 | 430 | :root[uidensity="touch"] .urlbar-icon:not(#pocket-button) { 431 | width: 34px !important; 432 | height: 36px !important; 433 | padding: 9px !important; 434 | } 435 | 436 | :root[uidensity="touch"] #pocket-button { 437 | width: 34px !important; 438 | height: 36px !important; 439 | padding: 10px 7px 8px 7px !important; 440 | } 441 | 442 | :root[uidensity="touch"] #contextual-feature-recommendation { 443 | width: 32px !important; 444 | height: 33px !important; 445 | padding: 2px !important; 446 | } 447 | 448 | :root[uidensity="touch"] #PanelUI-button { 449 | padding-left: 5px !important; 450 | padding-right: 5px !important; 451 | } 452 | 453 | 454 | :root[uidensity="touch"] .bookmark-item { 455 | padding-top: 4px !important; 456 | padding-bottom: 4px !important; 457 | } 458 | 459 | :root[uidensity="touch"] tab { 460 | height: 40px !important; 461 | } 462 | 463 | :root[uidensity="touch"] #tabs-newtab-button { 464 | margin-left: 3px !important; 465 | margin-bottom: 3px !important; 466 | padding-bottom: 1px !important; 467 | } 468 | 469 | :root[uidensity="touch"] #library-animatable-box { 470 | margin-top: 7px !important; 471 | } 472 | 473 | 474 | 475 | .urlbar-input-box, 476 | #identity-box, 477 | #tracking-protection-icon-container, 478 | .urlbar-history-dropmarker, 479 | .urlbar-page-action, 480 | #reader-mode-button, 481 | [anonid=urlbar-go-button], 482 | .toolbarbutton-1 > stack, 483 | toolbarbutton:not(.titlebar-button):not([class^="findbar-find"]):not([class^="scrollbutton"]), 484 | .close-icon 485 | { 486 | border-radius: var(--button-corner-rounding)!important; 487 | } 488 | 489 | 490 | .findbar-find-next { 491 | border-radius: 0px var(--button-corner-rounding) var(--button-corner-rounding) 0px !important; 492 | } 493 | 494 | .findbar-textbox { 495 | border-radius: var(--button-corner-rounding) 0px 0px var(--button-corner-rounding) !important; 496 | } 497 | 498 | .bookmark-item { 499 | padding-left: 7px !important; 500 | padding-right: 7px !important; 501 | padding-top: 3px !important; 502 | padding-bottom: 3px !important; 503 | margin-right: 0px !important; 504 | } 505 | 506 | #urlbar { 507 | border-radius: calc(1px + var(--button-corner-rounding)) !important; 508 | } 509 | 510 | /* style identity box */ 511 | #identity-box { 512 | margin-right: 0px !important; 513 | } 514 | 515 | 516 | 517 | 518 | 519 | 520 | /* style address bar */ 521 | #urlbar-container *:not(#identity-box):not(#tracking-protection-icon-container) { 522 | border-color: transparent !important; 523 | box-shadow: none !important; 524 | } 525 | 526 | #tracking-protection-icon-container { 527 | border-inline-end: none !important; 528 | } 529 | 530 | 531 | 532 | 533 | 534 | #pageActionSeparator { 535 | display: none !important; 536 | } 537 | 538 | .urlbar-icon, .urlbar-icon image, #userContext-indicator, #userContext-label { 539 | fill: transparent !important; 540 | background-color: transparent !important; 541 | color: transparent !important; 542 | transition: var(--animation-speed) !important; 543 | } 544 | 545 | 546 | #urlbar:hover .urlbar-icon, 547 | #urlbar:active .urlbar-icon, 548 | #urlbar[focused] .urlbar-icon, 549 | #urlbar:hover .urlbar-icon:not([open]) image, 550 | #urlbar:active .urlbar-icon image, 551 | #urlbar[focused] .urlbar-icon image { 552 | fill: var(--toolbar-color) !important; 553 | } 554 | 555 | #urlbar:hover #userContext-indicator, 556 | #urlbar:active #userContext-indicator, 557 | #urlbar[focused] #userContext-indicator, 558 | #urlbar:hover #userContext-label, 559 | #urlbar:active #userContext-label, 560 | #urlbar[focused] #userContext-label { 561 | color: var(--identity-tab-color) !important; 562 | fill: var(--identity-tab-color) !important; 563 | } 564 | 565 | .urlbar-page-action[open] { 566 | background-color: var(--toolbarbutton-active-background) !important; 567 | fill: var(--toolbar-color) !important; 568 | } 569 | 570 | .urlbar-page-action[open]:hover { 571 | background-color: var(--toolbarbutton-active-background) !important; 572 | fill: var(--toolbar-color) !important; 573 | } 574 | 575 | .urlbar-page-action[open] .urlbar-icon { 576 | fill: var(--toolbar-color) !important; 577 | } 578 | 579 | 580 | .urlbar-scheme { 581 | padding-bottom: 11px !important; 582 | } 583 | 584 | 585 | #urlbar-container { 586 | margin-left: -5px !important; 587 | margin-right: -5px !important; 588 | } 589 | 590 | .urlbar-input-box { 591 | padding: 5px 5px !important; 592 | } 593 | 594 | #urlbar { 595 | background-color: transparent !important; 596 | color: var(--lwt-toolbar-field-color, black) !important; 597 | } 598 | 599 | 600 | #urlbar:not(.hidden-focus)[focused="true"] { 601 | background-color: var(--toolbarbutton-hover-background) !important; 602 | } 603 | 604 | #pocket-button { 605 | padding-bottom: 4px !important; 606 | } 607 | 608 | .urlbar-icon-wrapper > .urlbar-icon:hover { 609 | background-color: transparent !important; 610 | } 611 | 612 | .urlbar-icon-wrapper { 613 | background-color: transparent !important; 614 | transition: background-color var(--animation-speed) !important; 615 | } 616 | 617 | 618 | 619 | #urlbar:not([focused]) .urlbar-input-box:hover, 620 | #identity-box:hover, 621 | #tracking-protection-icon-container:hover, 622 | .urlbar-icon:hover, 623 | .urlbar-icon-wrapper:hover, 624 | [anonid=urlbar-go-button]:hover { 625 | background-color: var(--toolbarbutton-hover-background) !important; 626 | } 627 | 628 | 629 | #identity-box:active, 630 | #tracking-protection-icon-container:active, 631 | .urlbar-icon:active, 632 | .urlbar-icon-wrapper:active, 633 | [anonid=urlbar-go-button]:active { 634 | background-color: var(--toolbarbutton-active-background) !important; 635 | } 636 | 637 | .urlbar-input-box, 638 | #identity-box, 639 | #tracking-protection-icon-container, 640 | [anonid=urlbar-go-button], 641 | #urlbar { 642 | transition: background-color var(--animation-speed) !important; 643 | } 644 | 645 | #tracking-protection-icon, 646 | #identity-box image { 647 | transition: fill-opacity var(--animation-speed) !important; 648 | } 649 | 650 | 651 | 652 | 653 | [lwthemetextcolor="dark"] .urlbarView-body-outer { 654 | background-color: #f5f6f7 !important; 655 | color: var(--toolbar-color) !important; 656 | } 657 | 658 | .urlbarView-body-inner { 659 | background-color: var(--toolbar-bgcolor) !important; 660 | } 661 | 662 | .downloadsPanelFooterButton:hover { 663 | outline: none !important; 664 | } 665 | 666 | /* -------------------- Style context menus -------------------- */ 667 | #context-navigation, 668 | #context-sep-navigation, 669 | #context-bookmarklink, 670 | #context-viewinfo, 671 | #context-viewpartialsource-selection, 672 | #inspect-separator, 673 | #context-savelink, 674 | #context-sendimage, 675 | #context-setDesktopBackground, 676 | #context_reloadTab, 677 | #context_moveTabOptions, 678 | #context_bookmarkTab, 679 | .bookmarks-actions-menuseparator, 680 | .openintabs-menuitem { 681 | display: none !important; 682 | } 683 | 684 | toolbarbutton menupopup { 685 | -moz-appearance: none !important; 686 | } 687 | 688 | menu, 689 | menuitem, 690 | menucaption { 691 | -moz-appearance: none !important; 692 | height: 25px !important; 693 | } 694 | 695 | menupopup .popup-internal-box { 696 | background-color: Menu !important; 697 | } 698 | 699 | 700 | menu, 701 | menuitem, 702 | menucaption { 703 | padding-left: 5px !important; 704 | padding-right: 5px !important; 705 | } 706 | 707 | menu:not(.subviewbutton) > .menu-right { 708 | margin-top: 2px !important; 709 | margin-right: 0px !important; 710 | width: 0px !important; 711 | } 712 | 713 | menu:not(.subviewbutton) > .menu-right image { 714 | margin-right: -5px !important; 715 | margin-top: -2px !important; 716 | border: 6px solid var(--toolbar-color) !important; 717 | border-top-color: transparent !important; 718 | border-right-color: transparent !important; 719 | border-bottom-color: transparent !important; 720 | } 721 | 722 | 723 | 724 | @media (-moz-os-version: windows-xp), (-moz-os-version: windows-vista), 725 | (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10) { 726 | 727 | menupopup .popup-internal-box { 728 | margin: -2px !important; 729 | padding-bottom: 3px !important; 730 | padding-top: 3px !important; 731 | } 732 | 733 | 734 | .bookmark-item .scrollbutton-up { 735 | margin-top: -3px !important; 736 | } 737 | 738 | .bookmark-item .scrollbutton-up > .toolbarbutton-icon { 739 | margin-top: -2px !important; 740 | border: 6px solid MenuText !important; 741 | border-top-color: transparent !important; 742 | border-right-color: transparent !important; 743 | border-left-color: transparent !important; 744 | } 745 | 746 | .bookmark-item .scrollbutton-down { 747 | margin-bottom: -3px !important; 748 | } 749 | 750 | .bookmark-item .scrollbutton-down > .toolbarbutton-icon { 751 | margin-bottom: -2px !important; 752 | border: 6px solid MenuText !important; 753 | border-bottom-color: transparent !important; 754 | border-right-color: transparent !important; 755 | border-left-color: transparent !important; 756 | } 757 | 758 | menupopup { 759 | margin-left: 1px !important; 760 | } 761 | 762 | menu, 763 | menuitem, 764 | menucaption { 765 | padding-left: 5px !important; 766 | padding-right: 5px !important; 767 | } 768 | 769 | menu:not(.subviewbutton) > .menu-right { 770 | margin-right: 0px !important; 771 | padding-left: 0px !important; 772 | } 773 | } 774 | 775 | 776 | 777 | 778 | 779 | /* context menu in developer toolbox (F12) */ 780 | .theme-dark .popup-internal-box { 781 | background-color: #323234 !important; 782 | color: white !important; 783 | } 784 | 785 | .theme-light .popup-internal-box { 786 | background-color: white !important; 787 | color: black !important; 788 | } 789 | 790 | 791 | .theme-dark menu[_moz-menuactive="true"], 792 | .theme-dark menuitem[_moz-menuactive="true"], 793 | .theme-dark menucaption[_moz-menuactive="true"], 794 | .theme-light menu[_moz-menuactive="true"], 795 | .theme-light menuitem[_moz-menuactive="true"], 796 | .theme-light menucaption[_moz-menuactive="true"]{ 797 | background-color: rgba(127,127,127,0.5) !important; 798 | } 799 | 800 | .theme-dark menu[_moz-menuactive="true"], 801 | .theme-dark menuitem[_moz-menuactive="true"], 802 | .theme-dark menucaption[_moz-menuactive="true"] { 803 | color: white !important; 804 | } 805 | 806 | .theme-dark menu[disabled="true"], 807 | .theme-dark menuitem[disabled="true"], 808 | .theme-dark menucaption[disabled="true"], 809 | .theme-light menu[disabled="true"], 810 | .theme-light menuitem[disabled="true"], 811 | .theme-light menucaption[disabled="true"] { 812 | color: rgba(127,127,127,0.5) !important; 813 | background-color: transparent !important; 814 | } 815 | 816 | .bookmark-item .scrollbutton-up > .toolbarbutton-icon { 817 | margin-top: -2px !important; 818 | border: 6px solid var(--toolbar-color) !important; 819 | border-top-color: transparent !important; 820 | border-right-color: transparent !important; 821 | border-left-color: transparent !important; 822 | } 823 | 824 | .bookmark-item .scrollbutton-down > .toolbarbutton-icon { 825 | margin-bottom: -2px !important; 826 | border: 6px solid var(--toolbar-color) !important; 827 | border-bottom-color: transparent !important; 828 | border-right-color: transparent !important; 829 | border-left-color: transparent !important; 830 | } 831 | 832 | 833 | 834 | /* make menus adapt to theme */ 835 | menu, 836 | menuitem, 837 | menucaption { 838 | color: var(--toolbar-color) !important; 839 | } 840 | 841 | [lwthemetextcolor="dark"] menupopup .popup-internal-box { 842 | background-color: #f5f6f7 !important; 843 | } 844 | 845 | [lwthemetextcolor="bright"] menupopup .popup-internal-box { 846 | background-color: #323234 !important; 847 | } 848 | 849 | menupopup .arrowscrollbox-scrollbox { 850 | margin-top: -3px !important; 851 | margin-bottom: -3px !important; 852 | padding-top: 4px !important; 853 | padding-bottom: 4px !important; 854 | background-color: var(--toolbar-bgcolor) !important; 855 | } 856 | 857 | menu[_moz-menuactive="true"]:not([disabled="true"]), 858 | menuitem[_moz-menuactive="true"]:not([disabled="true"]), 859 | menucaption[_moz-menuactive="true"]:not([disabled="true"]) { 860 | background-color: var(--toolbarbutton-hover-background, rgba(127,127,127,0.5)) !important; 861 | } 862 | 863 | menu[disabled="true"], 864 | menuitem[disabled="true"], 865 | menucaption[disabled="true"] { 866 | color: var(--toolbarbutton-hover-background, rgba(127,127,127,0.5)) !important; 867 | } 868 | 869 | menu[disabled="true"][_moz-menuactive="true"], 870 | menuitem[disabled="true"][_moz-menuactive="true"], 871 | menucaption[disabled="true"][_moz-menuactive="true"] { 872 | color: var(--toolbarbutton-hover-background, rgba(127,127,127,0.5)) !important; 873 | background-color: transparent !important; 874 | } 875 | 876 | 877 | toolbarbutton menuitem, 878 | toolbarbutton menu, 879 | toolbarbutton menucaption { 880 | background-color: var(--toolbar-bgcolor) !important; 881 | } 882 | 883 | toolbarbutton menu[_moz-menuactive="true"]:not([disabled="true"]), 884 | toolbarbutton menuitem[_moz-menuactive="true"]:not([disabled="true"]), 885 | toolbarbutton menucaption[_moz-menuactive="true"]:not([disabled="true"]) { 886 | background-color: rgba(127,127,127,0.5) !important; 887 | } 888 | 889 | 890 | 891 | [lwthemetextcolor="dark"] panelview:not([extension]), 892 | [lwthemetextcolor="dark"] .panel-arrowcontent { 893 | background-color: #f5f6f7 !important; 894 | } 895 | 896 | .panel-subview-body { 897 | background-color: var(--toolbar-bgcolor) !important; 898 | } 899 | 900 | #downloadsPanel-mainView { 901 | background-color: var(--toolbar-bgcolor) !important; 902 | } 903 | 904 | #identity-popup-mainView { 905 | background-color: var(--toolbar-bgcolor) !important; 906 | } 907 | 908 | #identity-popup-content-blocking-detected { 909 | color: var(--toolbar-active-background) !important; 910 | } 911 | 912 | #identity-popup-permission-empty-hint { 913 | color: var(--toolbar-active-background) !important; 914 | } 915 | 916 | .identity-popup-warning-yellow { 917 | color: black !important; 918 | } 919 | 920 | panel:not([viewId^="PanelUI-webext"]) .panel-arrow { 921 | fill: var(--toolbar-bgcolor) !important; 922 | } 923 | 924 | .bookmark-item [class^="scrollbutton"] { 925 | background-color: var(--toolbar-bgcolor) !important; 926 | } 927 | 928 | 929 | -------------------------------------------------------------------------------- /old/71/userChrome.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Quietfox for Firefox 71.0 4 | 5 | https://github.com/coekuss/quietfox 6 | 7 | Thanks for using my file 8 | 9 | */ 10 | 11 | @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 12 | 13 | 14 | * { 15 | /* -------------------- 🎨 Customization 🎨 -------------------- */ 16 | --tab-corner-rounding: 5px; 17 | --animation-speed: 0.25s; 18 | --button-corner-rounding: 4px; 19 | 20 | } 21 | 22 | 23 | 24 | 25 | /* Bottom corner rounding for tabs, Remove this section if your tab bottom corners look bad */ 26 | tab[visuallyselected] .tab-background::before, 27 | tab[visuallyselected] .tab-background::after { 28 | content: "" !important; 29 | display: inline !important; 30 | position: absolute !important; 31 | width: var(--tab-corner-rounding) !important; 32 | height: var(--tab-corner-rounding) !important; 33 | bottom: 0px !important; 34 | pointer-events: none !important; 35 | background-color: transparent !important; 36 | transition: var(--animation-speed) !important; 37 | } 38 | 39 | tab[visuallyselected] .tab-background::before { 40 | border-bottom-right-radius: var(--tab-corner-rounding) !important; 41 | transform: translateX(calc(-1 * var(--tab-corner-rounding))) !important; 42 | box-shadow: 4px 4px 0px 4px var(--toolbar-bgcolor) !important; 43 | transition: var(--animation-speed) !important; 44 | } 45 | 46 | tab[visuallyselected] .tab-background::after { 47 | border-bottom-left-radius: var(--tab-corner-rounding) !important; 48 | right: 0px !important; 49 | transform: translateX(var(--tab-corner-rounding)) !important; 50 | box-shadow: -4px 4px 0px 4px var(--toolbar-bgcolor) !important; 51 | transition: var(--animation-speed) !important; 52 | } 53 | /* --------------------------------------------------------------------------------------- */ 54 | 55 | 56 | 57 | 58 | /* This makes certain menus adapt to your toolbar text color. Can make menu text illegible in some transparent themes, remove if needed. */ 59 | panelview:not([extension]), 60 | .panel-arrowcontent { 61 | background-color: var(--toolbar-bgcolor) !important; 62 | color: var(--toolbar-color) !important; 63 | } 64 | /*-------------------------------------------------------------------*/ 65 | 66 | 67 | 68 | 69 | 70 | /* -------------------- Transitions for some things -------------------- */ 71 | toolbarbutton, 72 | .subviewbutton, 73 | stack, 74 | .toolbarbutton-icon, 75 | vbox 76 | { 77 | transition: background-color var(--animation-speed) !important; 78 | 79 | } 80 | 81 | 82 | 83 | 84 | /* -------------------- Style tab bar -------------------- */ 85 | 86 | .titlebar-spacer[type="pre-tabs"] { 87 | border-inline-end: 0px !important; 88 | width: 0px !important; 89 | } 90 | 91 | scrollbox[part="scrollbox"][flex="1"][orient="horizontal"] { 92 | padding-left: 12px !important; 93 | } 94 | 95 | 96 | .tab-background, .tab-loading-burst { 97 | border-radius: var(--tab-corner-rounding) var(--tab-corner-rounding) 0px 0px !important; 98 | margin: -1px !important; 99 | 100 | } 101 | 102 | tab:not(:active) .tab-background { 103 | transition: background-color var(--animation-speed) !important; 104 | } 105 | 106 | 107 | :root[uidensity="compact"] { 108 | --tab-min-height: 31px !important; 109 | } 110 | 111 | tab:not([selected]):hover .tab-background { 112 | background-color: var(--toolbarbutton-hover-background) !important; 113 | } 114 | 115 | tab { 116 | min-width: 1px !important; 117 | clip-width: 1px !important; 118 | padding-bottom: 1px !important; 119 | } 120 | 121 | .tab-line { 122 | display: none !important; 123 | } 124 | 125 | tab:not([beforeselected-visible])::after { 126 | margin-top: 4px !important; 127 | margin-bottom: 4px !important; 128 | transition: border-color var(--animation-speed), margin-top var(--animation-speed) !important; 129 | 130 | } 131 | 132 | tab[beforehovered]::after, 133 | tab:hover::after { 134 | border-color: transparent !important; 135 | margin-top: 20px !important; 136 | } 137 | 138 | #navigator-toolbox { 139 | --tabs-border-color: transparent !important; 140 | } 141 | 142 | 143 | 144 | tab[visuallyselected] { 145 | box-shadow: 0px 3px 12px -5px black !important; 146 | } 147 | 148 | 149 | 150 | 151 | /* -------------------- Style toolbar -------------------- */ 152 | .toolbarbutton-icon, .toolbarbutton-badge-stack { 153 | background-color: transparent !important; 154 | } 155 | 156 | toolbarbutton:not(#back-button)[open], .toolbarbutton-1:not(#back-button)[open] { 157 | background-color: var(--toolbarbutton-active-background); 158 | } 159 | 160 | #nav-bar .toolbarbutton-1 { 161 | margin-right: 2px !important; 162 | } 163 | 164 | .close-icon:not(.tab-close-button):hover { 165 | fill-opacity: 0.0 !important; 166 | } 167 | 168 | toolbarbutton:not(#back-button):not([disabled]):not([open]):hover, 169 | .toolbarbutton-1:not(#back-button):not([disabled]):not([open]):hover { 170 | background-color: var(--toolbarbutton-hover-background) !important; 171 | } 172 | 173 | .tab-close-button { 174 | transition: fill-opacity var(--animation-speed) !important; 175 | } 176 | 177 | .findbar-textbox:focus { 178 | border: 1px solid grey !important; 179 | } 180 | 181 | #BMB_bookmarksShowAll { 182 | display: none !important; 183 | } 184 | 185 | 186 | 187 | /* touch and normal density buttons */ 188 | 189 | :root:not([uidensity="compact"]) #back-button > .toolbarbutton-icon { 190 | background-color: transparent !important; 191 | border-color: var(--toolbarbutton-hover-background) !important; 192 | transition: background-color var(--animation-speed) !important; 193 | } 194 | 195 | :root:not([uidensity="compact"]) #back-button:not([disabled]):not([open]):hover > .toolbarbutton-icon { 196 | background-color: var(--toolbarbutton-hover-background) !important; 197 | box-shadow: none !important; 198 | } 199 | 200 | :root:not([uidensity="compact"]) #back-button:not([disabled]):not([open]):active > .toolbarbutton-icon { 201 | background-color: var(--toolbarbutton-active-background) !important; 202 | box-shadow: none !important; 203 | } 204 | 205 | :root:not([uidensity="compact"]) toolbarbutton:not(#back-button):not([disabled]):not([open]):active, 206 | .toolbarbutton-1:not(#back-button):not([disabled]):not([open]):active { 207 | background-color: var(--toolbarbutton-active-background) !important; 208 | } 209 | 210 | 211 | 212 | :root:not([uidensity="compact"]) #back-button[open] > .toolbarbutton-icon { 213 | background-color: var(--toolbarbutton-active-background) !important; 214 | } 215 | 216 | 217 | 218 | 219 | 220 | /* normal density buttons */ 221 | 222 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #nav-bar .toolbarbutton-1:not(#back-button) { 223 | margin-top: 4px !important; 224 | margin-bottom: 4px !important; 225 | margin-left: 0px !important; 226 | margin-right: 0px !important; 227 | padding-left: 3px !important; 228 | padding-right: 3px !important; 229 | } 230 | 231 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #nav-bar .toolbarbutton-1:not(#back-button) image { 232 | margin-bottom: 1px !important; 233 | } 234 | 235 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #back-button { 236 | margin-top: -1px !important; 237 | margin-bottom: -1px !important; 238 | } 239 | 240 | 241 | 242 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #identity-box, 243 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #tracking-protection-icon-container { 244 | padding-left: 8px !important; 245 | padding-right: 8px !important; 246 | } 247 | 248 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #identity-icon, 249 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #tracking-protection-icon-box { 250 | margin-left: 1px !important; 251 | margin-right: 1px !important; 252 | } 253 | 254 | 255 | 256 | 257 | :root:not([uidensity="touch"]):not([uidensity="compact"]) .urlbar-icon { 258 | margin-top: 1px !important; 259 | margin-bottom: 1px !important; 260 | } 261 | 262 | 263 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #urlbar { 264 | height: 36px !important; 265 | margin-top: 0px !important; 266 | margin-bottom: 0px !important; 267 | padding-top: 0px !important; 268 | padding-bottom: 0px !important; 269 | } 270 | 271 | 272 | :root:not([uidensity="touch"]):not([uidensity="compact"]) .urlbar-icon:not(#pocket-button) { 273 | width: 32px !important; 274 | height: 36px !important; 275 | padding: 8px !important; 276 | } 277 | 278 | 279 | 280 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #pocket-button { 281 | width: 32px !important; 282 | height: 36px !important; 283 | padding: 8px 8px 6px 8px !important; 284 | } 285 | 286 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #contextual-feature-recommendation { 287 | width: 32px !important; 288 | height: 32px !important; 289 | padding: 2px !important; 290 | } 291 | 292 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #PanelUI-button { 293 | padding-right: 5px !important; 294 | padding-left: 5px !important; 295 | margin-left: 5px !important; 296 | } 297 | 298 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #tabs-newtab-button { 299 | margin-left: 1px !important; 300 | margin-bottom: 1px !important; 301 | padding-bottom: 1px !important; 302 | } 303 | 304 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #library-animatable-box { 305 | margin-top: 4px !important; 306 | } 307 | 308 | 309 | 310 | 311 | /* compact density buttons */ 312 | 313 | :root[uidensity="compact"] #nav-bar .toolbarbutton-1 { 314 | margin-top: 4px !important; 315 | margin-bottom: 4px !important; 316 | padding: 0px 0px 0px 0px !important; 317 | } 318 | 319 | 320 | 321 | 322 | :root[uidensity="compact"] #nav-bar toolbaritem[animate] box { 323 | margin-top: 1px !important; 324 | } 325 | 326 | 327 | :root[uidensity="compact"] #back-button[open] { 328 | background-color: var(--toolbarbutton-active-background) !important; 329 | } 330 | 331 | 332 | :root[uidensity="compact"] #back-button:not([disabled]):not([open]):hover { 333 | background-color: var(--toolbarbutton-hover-background) !important; 334 | } 335 | :root[uidensity="compact"] #back-button:not([disabled]):not([open]):active { 336 | background-color: var(--toolbarbutton-active-background) !important; 337 | } 338 | 339 | :root[uidensity="compact"] #identity-box, 340 | :root[uidensity="compact"] #tracking-protection-icon-container { 341 | min-width: 2px !important; 342 | padding-left: 6px !important; 343 | padding-right: 6px !important; 344 | } 345 | 346 | :root[uidensity="compact"] #nav-bar{ 347 | padding-top: 1px !important; 348 | } 349 | 350 | 351 | :root[uidensity="compact"] #urlbar { 352 | height: 30px !important; 353 | margin-top: 0px !important; 354 | margin-bottom: 0px !important; 355 | padding-bottom: 0px !important; 356 | } 357 | 358 | 359 | 360 | :root[uidensity="compact"] .urlbar-icon:not(#pocket-button) { 361 | width: 28px !important; 362 | height: 30px !important; 363 | padding: 6px !important; 364 | } 365 | 366 | :root[uidensity="compact"] #pocket-button { 367 | width: 28px !important; 368 | height: 40px !important; 369 | padding: 7px 6px 5px 6px !important; 370 | } 371 | 372 | :root[uidensity="compact"] #contextual-feature-recommendation { 373 | width: 32px !important; 374 | height: 32px !important; 375 | padding: 2px !important; 376 | } 377 | 378 | :root[uidensity="compact"] .bookmark-item { 379 | padding-top: 2px !important; 380 | padding-bottom: 2px !important; 381 | } 382 | 383 | 384 | :root[uidensity="compact"] #tabs-newtab-button { 385 | margin-left: 1px !important; 386 | margin-bottom: 1px !important; 387 | padding-bottom: 1px !important; 388 | } 389 | 390 | :root[uidensity="compact"] #library-animatable-box { 391 | margin-top: 5px !important; 392 | } 393 | 394 | 395 | 396 | /* touch density buttons */ 397 | 398 | :root[uidensity="touch"] #nav-bar .toolbarbutton-1:not(#back-button) { 399 | margin-top: 5px !important; 400 | margin-bottom: 3px !important; 401 | padding-left: 0px !important; 402 | padding-right: 0px !important; 403 | } 404 | 405 | 406 | :root[uidensity="touch"] #stop-reload-button[animate] .toolbarbutton-animatable-image { 407 | margin-top: 2px !important; 408 | } 409 | 410 | :root[uidensity="touch"] #identity-box, 411 | :root[uidensity="touch"] #tracking-protection-icon-container { 412 | padding-left: 9px !important; 413 | padding-right: 9px !important; 414 | } 415 | 416 | 417 | :root[uidensity="touch"] #urlbar { 418 | height: 36px !important; 419 | margin-top: 0px !important; 420 | margin-bottom: 0px !important; 421 | } 422 | 423 | :root[uidensity="touch"] #nav-bar{ 424 | padding-top: 2px !important; 425 | } 426 | 427 | 428 | 429 | :root[uidensity="touch"] .urlbar-icon:not(#pocket-button) { 430 | width: 34px !important; 431 | height: 36px !important; 432 | padding: 9px !important; 433 | } 434 | 435 | :root[uidensity="touch"] #pocket-button { 436 | width: 34px !important; 437 | height: 36px !important; 438 | padding: 10px 7px 8px 7px !important; 439 | } 440 | 441 | :root[uidensity="touch"] #contextual-feature-recommendation { 442 | width: 32px !important; 443 | height: 33px !important; 444 | padding: 2px !important; 445 | } 446 | 447 | :root[uidensity="touch"] #PanelUI-button { 448 | padding-left: 5px !important; 449 | padding-right: 5px !important; 450 | } 451 | 452 | 453 | :root[uidensity="touch"] .bookmark-item { 454 | padding-top: 4px !important; 455 | padding-bottom: 4px !important; 456 | } 457 | 458 | :root[uidensity="touch"] tab { 459 | height: 40px !important; 460 | } 461 | 462 | :root[uidensity="touch"] #tabs-newtab-button { 463 | margin-left: 3px !important; 464 | margin-bottom: 3px !important; 465 | padding-bottom: 1px !important; 466 | } 467 | 468 | :root[uidensity="touch"] #library-animatable-box { 469 | margin-top: 7px !important; 470 | } 471 | 472 | 473 | /* various */ 474 | .urlbar-input-box, 475 | #identity-box, 476 | #tracking-protection-icon-container, 477 | .urlbar-history-dropmarker, 478 | .urlbar-page-action, 479 | #reader-mode-button, 480 | [anonid=urlbar-go-button], 481 | .toolbarbutton-1 > stack, 482 | toolbarbutton:not(.titlebar-button):not([class^="findbar-find"]):not([class^="scrollbutton"]), 483 | .close-icon 484 | { 485 | border-radius: var(--button-corner-rounding)!important; 486 | } 487 | 488 | 489 | .findbar-find-next { 490 | border-radius: 0px var(--button-corner-rounding) var(--button-corner-rounding) 0px !important; 491 | } 492 | 493 | .findbar-textbox { 494 | border-radius: var(--button-corner-rounding) 0px 0px var(--button-corner-rounding) !important; 495 | } 496 | 497 | .bookmark-item { 498 | padding-left: 7px !important; 499 | padding-right: 7px !important; 500 | padding-top: 3px !important; 501 | padding-bottom: 3px !important; 502 | margin-right: 0px !important; 503 | } 504 | 505 | #urlbar { 506 | border-radius: calc(1px + var(--button-corner-rounding)) !important; 507 | } 508 | 509 | /* style identity box */ 510 | #identity-box { 511 | margin-right: 0px !important; 512 | } 513 | 514 | 515 | 516 | /* style address bar */ 517 | #urlbar-container *:not(#identity-box):not(#tracking-protection-icon-container) { 518 | border-color: transparent !important; 519 | box-shadow: none !important; 520 | } 521 | 522 | #tracking-protection-icon-container { 523 | border-inline-end: none !important; 524 | } 525 | 526 | 527 | 528 | 529 | 530 | #pageActionSeparator { 531 | display: none !important; 532 | } 533 | 534 | .urlbar-icon, .urlbar-icon image, #userContext-indicator, #userContext-label { 535 | fill: transparent !important; 536 | background-color: transparent !important; 537 | color: transparent !important; 538 | transition: var(--animation-speed) !important; 539 | } 540 | 541 | 542 | #urlbar:hover .urlbar-icon, 543 | #urlbar:active .urlbar-icon, 544 | #urlbar[focused] .urlbar-icon, 545 | #urlbar:hover .urlbar-icon:not([open]) image, 546 | #urlbar:active .urlbar-icon image, 547 | #urlbar[focused] .urlbar-icon image { 548 | fill: var(--toolbar-color) !important; 549 | } 550 | 551 | #urlbar:hover #userContext-indicator, 552 | #urlbar:active #userContext-indicator, 553 | #urlbar[focused] #userContext-indicator, 554 | #urlbar:hover #userContext-label, 555 | #urlbar:active #userContext-label, 556 | #urlbar[focused] #userContext-label { 557 | color: var(--identity-tab-color) !important; 558 | fill: var(--identity-tab-color) !important; 559 | } 560 | 561 | .urlbar-page-action[open] { 562 | background-color: var(--toolbarbutton-active-background) !important; 563 | fill: var(--toolbar-color) !important; 564 | } 565 | 566 | .urlbar-page-action[open]:hover { 567 | background-color: var(--toolbarbutton-active-background) !important; 568 | fill: var(--toolbar-color) !important; 569 | } 570 | 571 | .urlbar-page-action[open] .urlbar-icon { 572 | fill: var(--toolbar-color) !important; 573 | } 574 | 575 | 576 | .urlbar-scheme { 577 | padding-bottom: 11px !important; 578 | } 579 | 580 | 581 | #urlbar-container { 582 | margin-left: -1px !important; 583 | margin-right: -1px !important; 584 | } 585 | 586 | .urlbar-input-box { 587 | padding: 5px 5px !important; 588 | } 589 | 590 | #urlbar { 591 | background-color: transparent !important; 592 | color: var(--lwt-toolbar-field-color, black) !important; 593 | } 594 | 595 | 596 | #urlbar:not(.hidden-focus)[focused="true"] { 597 | background-color: var(--toolbarbutton-hover-background) !important; 598 | } 599 | 600 | #pocket-button { 601 | padding-bottom: 4px !important; 602 | } 603 | 604 | .urlbar-icon-wrapper > .urlbar-icon:hover { 605 | background-color: transparent !important; 606 | } 607 | 608 | .urlbar-icon-wrapper { 609 | background-color: transparent !important; 610 | transition: background-color var(--animation-speed) !important; 611 | } 612 | 613 | 614 | 615 | #urlbar:not([focused]) .urlbar-input-box:hover, 616 | #identity-box:hover, 617 | #tracking-protection-icon-container:hover, 618 | .urlbar-icon:hover, 619 | .urlbar-icon-wrapper:hover, 620 | [anonid=urlbar-go-button]:hover { 621 | background-color: var(--toolbarbutton-hover-background) !important; 622 | } 623 | 624 | 625 | #identity-box:active, 626 | #tracking-protection-icon-container:active, 627 | .urlbar-icon:active, 628 | .urlbar-icon-wrapper:active, 629 | [anonid=urlbar-go-button]:active { 630 | background-color: var(--toolbarbutton-active-background) !important; 631 | } 632 | 633 | .urlbar-input-box, 634 | #identity-box, 635 | #tracking-protection-icon-container, 636 | [anonid=urlbar-go-button], 637 | #urlbar { 638 | transition: background-color var(--animation-speed) !important; 639 | } 640 | 641 | #tracking-protection-icon, 642 | #identity-box image { 643 | transition: fill-opacity var(--animation-speed) !important; 644 | } 645 | 646 | 647 | 648 | 649 | [lwthemetextcolor="dark"] .urlbarView-body-outer { 650 | background-color: #f5f6f7 !important; 651 | color: var(--toolbar-color) !important; 652 | } 653 | 654 | .urlbarView-body-inner { 655 | background-color: var(--toolbar-bgcolor) !important; 656 | } 657 | 658 | .downloadsPanelFooterButton:hover { 659 | outline: none !important; 660 | } 661 | 662 | /* -------------------- Style context menus -------------------- */ 663 | #context-navigation, 664 | #context-sep-navigation, 665 | #context-bookmarklink, 666 | #context-viewinfo, 667 | #context-viewpartialsource-selection, 668 | #inspect-separator, 669 | #context-savelink, 670 | #context-sendimage, 671 | #context-setDesktopBackground, 672 | #context_reloadTab, 673 | #context_moveTabOptions, 674 | #context_bookmarkTab, 675 | .bookmarks-actions-menuseparator, 676 | .openintabs-menuitem { 677 | display: none !important; 678 | } 679 | 680 | menupopup { 681 | -moz-appearance: none !important; 682 | } 683 | 684 | menu, 685 | menuitem, 686 | menucaption { 687 | -moz-appearance: none !important; 688 | height: 25px !important; 689 | } 690 | 691 | menu, 692 | menuitem, 693 | menucaption { 694 | padding-left: 5px !important; 695 | padding-right: 5px !important; 696 | } 697 | 698 | menu:not(.subviewbutton) > .menu-right { 699 | margin-top: 2px !important; 700 | margin-right: 0px !important; 701 | width: 0px !important; 702 | } 703 | 704 | menu:not(.subviewbutton) > .menu-right image { 705 | margin-right: -5px !important; 706 | margin-top: -2px !important; 707 | border: 6px solid var(--toolbar-color) !important; 708 | border-top-color: transparent !important; 709 | border-right-color: transparent !important; 710 | border-bottom-color: transparent !important; 711 | } 712 | 713 | 714 | 715 | 716 | @media (-moz-os-version: windows-xp), (-moz-os-version: windows-vista), 717 | (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10) { 718 | 719 | .bookmark-item .scrollbutton-up { 720 | margin-top: -3px !important; 721 | } 722 | 723 | .bookmark-item .scrollbutton-up > .toolbarbutton-icon { 724 | margin-top: -2px !important; 725 | border: 6px solid MenuText !important; 726 | border-top-color: transparent !important; 727 | border-right-color: transparent !important; 728 | border-left-color: transparent !important; 729 | } 730 | 731 | .bookmark-item .scrollbutton-down { 732 | margin-bottom: -3px !important; 733 | } 734 | 735 | .bookmark-item .scrollbutton-down > .toolbarbutton-icon { 736 | margin-bottom: -2px !important; 737 | border: 6px solid MenuText !important; 738 | border-bottom-color: transparent !important; 739 | border-right-color: transparent !important; 740 | border-left-color: transparent !important; 741 | } 742 | 743 | menu, 744 | menuitem, 745 | menucaption { 746 | padding-left: 5px !important; 747 | padding-right: 5px !important; 748 | } 749 | 750 | menu:not(.subviewbutton) > .menu-right { 751 | margin-right: 0px !important; 752 | padding-left: 0px !important; 753 | } 754 | } 755 | 756 | 757 | 758 | /* make menus adapt to theme */ 759 | menu, 760 | menuitem, 761 | menucaption { 762 | color: var(--toolbar-color) !important; 763 | } 764 | 765 | menupopup { 766 | padding-top: 4px !important; 767 | padding-bottom: 4px !important; 768 | background-color: var(--toolbar-bgcolor, Menu) !important; 769 | } 770 | 771 | menu[_moz-menuactive="true"]:not([disabled="true"]), 772 | menuitem[_moz-menuactive="true"]:not([disabled="true"]), 773 | menucaption[_moz-menuactive="true"]:not([disabled="true"]) { 774 | background-color: var(--toolbarbutton-hover-background, rgba(127,127,127,0.5)) !important; 775 | } 776 | 777 | menu[disabled="true"], 778 | menuitem[disabled="true"], 779 | menucaption[disabled="true"] { 780 | color: var(--toolbarbutton-hover-background, rgba(127,127,127,0.5)) !important; 781 | } 782 | 783 | menu[disabled="true"][_moz-menuactive="true"], 784 | menuitem[disabled="true"][_moz-menuactive="true"], 785 | menucaption[disabled="true"][_moz-menuactive="true"] { 786 | background-color: transparent !important; 787 | } 788 | 789 | .panel-arrow { 790 | fill: var(--toolbar-bgcolor) !important; 791 | } 792 | 793 | [lwthemetextcolor="dark"] panelview:not([extension]), 794 | [lwthemetextcolor="dark"] .panel-arrowcontent { 795 | background-color: #f5f6f7 !important; 796 | } 797 | 798 | .panel-subview-body { 799 | background-color: var(--toolbar-bgcolor) !important; 800 | } 801 | 802 | #downloadsPanel-mainView { 803 | background-color: var(--toolbar-bgcolor) !important; 804 | } 805 | 806 | #identity-popup-mainView { 807 | background-color: var(--toolbar-bgcolor) !important; 808 | } 809 | 810 | #identity-popup-content-blocking-detected { 811 | color: var(--toolbar-active-background) !important; 812 | } 813 | 814 | #identity-popup-permission-empty-hint { 815 | color: var(--toolbar-active-background) !important; 816 | } 817 | 818 | .identity-popup-warning-yellow { 819 | color: black !important; 820 | } 821 | 822 | panel:not([viewId^="PanelUI-webext"]) .panel-arrow { 823 | fill: var(--toolbar-bgcolor) !important; 824 | } 825 | 826 | .bookmark-item [class^="scrollbutton"] { 827 | background-color: var(--toolbar-bgcolor) !important; 828 | } 829 | -------------------------------------------------------------------------------- /old/72-74/userChrome.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Quietfox for Firefox 72 4 | 5 | https://github.com/coekuss/quietfox 6 | 7 | Thanks for using my file 8 | 9 | */ 10 | 11 | * { 12 | /* -------------------- 🎨 Customization 🎨 -------------------- */ 13 | --tab-corner-rounding: 5px; 14 | --button-corner-rounding: 4px; 15 | --menu-corner-rounding: 10px; 16 | --menu-item-height: 30px; 17 | --animation-speed: 0.15s; 18 | } 19 | 20 | 21 | @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 22 | 23 | /* Bottom corner rounding for tabs, Remove this section if your tab bottom corners look bad */ 24 | tab[visuallyselected] .tab-background::before, 25 | tab[visuallyselected] .tab-background::after { 26 | content: "" !important; 27 | display: inline !important; 28 | position: absolute !important; 29 | width: var(--tab-corner-rounding) !important; 30 | height: var(--tab-corner-rounding) !important; 31 | bottom: -1px !important; 32 | pointer-events: none !important; 33 | background-color: transparent !important; 34 | transition: var(--animation-speed) !important; 35 | } 36 | 37 | tab[visuallyselected] .tab-background::before { 38 | border-bottom-right-radius: var(--tab-corner-rounding) !important; 39 | transform: translateX(calc(-1 * var(--tab-corner-rounding))) !important; 40 | box-shadow: 4px 4px 0px 4px var(--toolbar-bgcolor) !important; 41 | transition: var(--animation-speed) !important; 42 | } 43 | 44 | tab[visuallyselected] .tab-background::after { 45 | border-bottom-left-radius: var(--tab-corner-rounding) !important; 46 | right: 0px !important; 47 | transform: translateX(calc(var(--tab-corner-rounding) + 1px)) !important; 48 | box-shadow: -4px 4px 0px 4px var(--toolbar-bgcolor) !important; 49 | transition: var(--animation-speed) !important; 50 | } 51 | /* --------------------------------------------------------------------------------------- */ 52 | 53 | 54 | 55 | 56 | /* This makes certain menus adapt to your toolbar text color. Can make menu text illegible in 57 | some transparent themes, remove if needed. */ 58 | panelview:not([extension]), 59 | .panel-arrowcontent { 60 | background-color: var(--toolbar-bgcolor) !important; 61 | color: var(--toolbar-color) !important; 62 | } 63 | /*-------------------------------------------------------------------*/ 64 | 65 | 66 | 67 | 68 | 69 | /* -------------------- Transitions for some things -------------------- */ 70 | toolbarbutton, 71 | .subviewbutton, 72 | stack, 73 | .toolbarbutton-icon, 74 | vbox 75 | { 76 | transition: background-color var(--animation-speed) !important; 77 | 78 | } 79 | 80 | 81 | 82 | 83 | /* -------------------- Style tab bar -------------------- */ 84 | 85 | .titlebar-spacer[type="pre-tabs"] { 86 | border-inline-end: 0px !important; 87 | width: 0px !important; 88 | } 89 | 90 | scrollbox[part="scrollbox"][flex="1"][orient="horizontal"] { 91 | padding-left: 12px !important; 92 | } 93 | 94 | 95 | .tab-background, .tab-loading-burst { 96 | border-radius: var(--tab-corner-rounding) var(--tab-corner-rounding) 0px 0px !important; 97 | margin: -1px !important; 98 | 99 | } 100 | 101 | tab:not(:active) .tab-background { 102 | transition: background-color var(--animation-speed) !important; 103 | } 104 | 105 | 106 | :root[uidensity="compact"] { 107 | --tab-min-height: 31px !important; 108 | } 109 | 110 | tab:not([selected]):hover .tab-background { 111 | background-color: var(--toolbarbutton-hover-background) !important; 112 | } 113 | 114 | tab { 115 | min-width: 1px !important; 116 | clip-width: 1px !important; 117 | padding-bottom: 1px !important; 118 | } 119 | 120 | .tab-line { 121 | display: none !important; 122 | } 123 | 124 | tab:not([beforeselected-visible])::after { 125 | margin-top: 4px !important; 126 | margin-bottom: 4px !important; 127 | transition: border-color var(--animation-speed), margin-top var(--animation-speed) !important; 128 | 129 | } 130 | 131 | tab[beforehovered]::after, 132 | tab:hover::after { 133 | border-color: transparent !important; 134 | margin-top: 20px !important; 135 | } 136 | 137 | #navigator-toolbox { 138 | --tabs-border-color: transparent !important; 139 | } 140 | 141 | 142 | 143 | tab[visuallyselected] { 144 | box-shadow: 0px 3px 12px -5px black !important; 145 | } 146 | 147 | [last-visible-tab] { 148 | margin-right: calc(var(--tab-corner-rounding) + 2px) !important; /* fix unexpected tab overflow */ 149 | } 150 | 151 | 152 | 153 | 154 | /* -------------------- Style toolbar -------------------- */ 155 | .toolbarbutton-icon, .toolbarbutton-badge-stack { 156 | background-color: transparent !important; 157 | } 158 | 159 | toolbarbutton:not(#back-button)[open], .toolbarbutton-1:not(#back-button)[open] { 160 | background-color: var(--toolbarbutton-active-background); 161 | } 162 | 163 | #nav-bar .toolbarbutton-1 { 164 | margin-right: 2px !important; 165 | } 166 | 167 | .close-icon:not(.tab-close-button):hover { 168 | fill-opacity: 0.0 !important; 169 | } 170 | 171 | toolbarbutton:not(#back-button):not([disabled]):not([open]):hover, 172 | .toolbarbutton-1:not(#back-button):not([disabled]):not([open]):hover { 173 | background-color: var(--toolbarbutton-hover-background) !important; 174 | } 175 | 176 | .tab-close-button { 177 | transition: fill-opacity var(--animation-speed) !important; 178 | } 179 | 180 | .findbar-textbox:focus { 181 | border: 1px solid grey !important; 182 | } 183 | 184 | #BMB_bookmarksShowAll { 185 | display: none !important; 186 | } 187 | 188 | 189 | 190 | /* touch and normal density buttons */ 191 | 192 | :root:not([uidensity="compact"]) #back-button > .toolbarbutton-icon { 193 | background-color: transparent !important; 194 | border-color: var(--toolbarbutton-hover-background) !important; 195 | transition: background-color var(--animation-speed) !important; 196 | } 197 | 198 | :root:not([uidensity="compact"]) #back-button:not([disabled]):not([open]):hover > .toolbarbutton-icon { 199 | background-color: var(--toolbarbutton-hover-background) !important; 200 | box-shadow: none !important; 201 | } 202 | 203 | :root:not([uidensity="compact"]) #back-button:not([disabled]):not([open]):active > .toolbarbutton-icon { 204 | background-color: var(--toolbarbutton-active-background) !important; 205 | box-shadow: none !important; 206 | } 207 | 208 | :root:not([uidensity="compact"]) toolbarbutton:not(#back-button):not([disabled]):not([open]):active, 209 | .toolbarbutton-1:not(#back-button):not([disabled]):not([open]):active { 210 | background-color: var(--toolbarbutton-active-background) !important; 211 | } 212 | 213 | 214 | 215 | :root:not([uidensity="compact"]) #back-button[open] > .toolbarbutton-icon { 216 | background-color: var(--toolbarbutton-active-background) !important; 217 | } 218 | 219 | :root:not([uidensity="compact"]) #PersonalToolbar { /* bookmark bar */ 220 | height: 30px !important; 221 | } 222 | 223 | 224 | /* normal density buttons */ 225 | 226 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #nav-bar .toolbarbutton-1:not(#back-button) { 227 | margin-top: 4px !important; 228 | margin-bottom: 4px !important; 229 | margin-left: 0px !important; 230 | margin-right: 0px !important; 231 | padding-left: 3px !important; 232 | padding-right: 3px !important; 233 | } 234 | 235 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #nav-bar .toolbarbutton-1:not(#back-button) image { 236 | margin-bottom: 1px !important; 237 | } 238 | 239 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #back-button { 240 | margin-top: -1px !important; 241 | margin-bottom: -1px !important; 242 | } 243 | 244 | 245 | 246 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #identity-box, 247 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #tracking-protection-icon-container { 248 | padding-left: 8px !important; 249 | padding-right: 8px !important; 250 | } 251 | 252 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #identity-icon, 253 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #tracking-protection-icon-box { 254 | margin-left: 1px !important; 255 | margin-right: 1px !important; 256 | } 257 | 258 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #urlbar { 259 | height: 36px !important; 260 | margin-top: 0px !important; 261 | margin-bottom: 0px !important; 262 | padding-top: 0px !important; 263 | padding-bottom: 0px !important; 264 | } 265 | 266 | 267 | :root:not([uidensity="touch"]):not([uidensity="compact"]) .urlbar-icon:not(#pocket-button) { 268 | width: 34px !important; 269 | height: 36px !important; 270 | padding: 8px !important; 271 | } 272 | 273 | 274 | 275 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #pocket-button { 276 | width: 32px !important; 277 | height: 36px !important; 278 | padding: 8px 8px 6px 8px !important; 279 | } 280 | 281 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #contextual-feature-recommendation { 282 | width: 32px !important; 283 | height: 32px !important; 284 | padding: 2px !important; 285 | } 286 | 287 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #PanelUI-button { 288 | padding-right: 5px !important; 289 | padding-left: 5px !important; 290 | margin-left: 5px !important; 291 | } 292 | 293 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #library-animatable-box { 294 | margin-top: 4px !important; 295 | } 296 | 297 | :root:not([uidensity="touch"]):not([uidensity="compact"]) #tabs-newtab-button { 298 | margin-left: -5px !important; 299 | padding-left: 2px !important; 300 | margin-bottom: 1px !important; 301 | padding-bottom: 1px !important; 302 | } 303 | 304 | 305 | /* compact density buttons */ 306 | 307 | :root[uidensity="compact"] #nav-bar .toolbarbutton-1 { 308 | margin-top: 4px !important; 309 | margin-bottom: 4px !important; 310 | padding: 0px 0px 0px 0px !important; 311 | } 312 | 313 | 314 | 315 | 316 | :root[uidensity="compact"] #nav-bar toolbaritem[animate] box { 317 | margin-top: 1px !important; 318 | } 319 | 320 | 321 | :root[uidensity="compact"] #back-button[open] { 322 | background-color: var(--toolbarbutton-active-background) !important; 323 | } 324 | 325 | 326 | :root[uidensity="compact"] #back-button:not([disabled]):not([open]):hover { 327 | background-color: var(--toolbarbutton-hover-background) !important; 328 | } 329 | :root[uidensity="compact"] #back-button:not([disabled]):not([open]):active { 330 | background-color: var(--toolbarbutton-active-background) !important; 331 | } 332 | 333 | :root[uidensity="compact"] #identity-box, 334 | :root[uidensity="compact"] #tracking-protection-icon-container { 335 | min-width: 2px !important; 336 | padding-left: 6px !important; 337 | padding-right: 6px !important; 338 | } 339 | 340 | :root[uidensity="compact"] #nav-bar{ 341 | padding-top: 1px !important; 342 | } 343 | 344 | 345 | :root[uidensity="compact"] #urlbar { 346 | height: 30px !important; 347 | margin-top: 0px !important; 348 | margin-bottom: 0px !important; 349 | padding-bottom: 0px !important; 350 | } 351 | 352 | 353 | 354 | :root[uidensity="compact"] .urlbar-icon:not(#pocket-button) { 355 | width: 28px !important; 356 | height: 30px !important; 357 | padding: 6px !important; 358 | } 359 | 360 | :root[uidensity="compact"] #pocket-button { 361 | width: 28px !important; 362 | height: 40px !important; 363 | padding: 7px 6px 5px 6px !important; 364 | } 365 | 366 | :root[uidensity="compact"] #contextual-feature-recommendation { 367 | width: 32px !important; 368 | height: 32px !important; 369 | padding: 2px !important; 370 | } 371 | 372 | :root[uidensity="compact"] #PersonalToolbar { 373 | height: 25px !important; 374 | } 375 | 376 | :root[uidensity="compact"] #library-animatable-box { 377 | margin-top: 5px !important; 378 | } 379 | 380 | :root[uidensity="compact"] #tabs-newtab-button { 381 | margin-left: -5px !important; 382 | margin-bottom: 1px !important; 383 | padding-bottom: 1px !important; 384 | } 385 | 386 | 387 | /* touch density buttons */ 388 | 389 | :root[uidensity="touch"] #nav-bar .toolbarbutton-1:not(#back-button) { 390 | margin-top: 5px !important; 391 | margin-bottom: 3px !important; 392 | padding-left: 0px !important; 393 | padding-right: 0px !important; 394 | } 395 | 396 | 397 | :root[uidensity="touch"] #stop-reload-button[animate] .toolbarbutton-animatable-image { 398 | margin-top: 2px !important; 399 | } 400 | 401 | :root[uidensity="touch"] #identity-box, 402 | :root[uidensity="touch"] #tracking-protection-icon-container { 403 | padding-left: 9px !important; 404 | padding-right: 9px !important; 405 | } 406 | 407 | 408 | :root[uidensity="touch"] #urlbar { 409 | height: 36px !important; 410 | margin-top: 0px !important; 411 | margin-bottom: 0px !important; 412 | } 413 | 414 | :root[uidensity="touch"] #nav-bar{ 415 | padding-top: 2px !important; 416 | } 417 | 418 | 419 | 420 | :root[uidensity="touch"] .urlbar-icon:not(#pocket-button) { 421 | width: 34px !important; 422 | height: 36px !important; 423 | padding: 9px !important; 424 | } 425 | 426 | :root[uidensity="touch"] #pocket-button { 427 | width: 34px !important; 428 | height: 36px !important; 429 | padding: 10px 7px 8px 7px !important; 430 | } 431 | 432 | :root[uidensity="touch"] #contextual-feature-recommendation { 433 | width: 32px !important; 434 | height: 33px !important; 435 | padding: 2px !important; 436 | } 437 | 438 | :root[uidensity="touch"] #PanelUI-button { 439 | padding-left: 5px !important; 440 | padding-right: 5px !important; 441 | } 442 | 443 | :root[uidensity="touch"] tab { 444 | height: 40px !important; 445 | } 446 | 447 | :root[uidensity="touch"] #library-animatable-box { 448 | margin-top: 7px !important; 449 | } 450 | 451 | :root[uidensity="touch"] #tabs-newtab-button { 452 | margin-left: -5px !important; 453 | margin-bottom: 2px !important; 454 | padding-right: 3px !important; 455 | padding-left: 3px !important; 456 | padding-bottom: 1px !important; 457 | } 458 | 459 | 460 | 461 | /* various */ 462 | .urlbar-input-box, 463 | #identity-box, 464 | #tracking-protection-icon-container, 465 | .urlbar-history-dropmarker, 466 | .urlbar-page-action, 467 | #reader-mode-button, 468 | [anonid=urlbar-go-button], 469 | .toolbarbutton-1 > stack, 470 | toolbarbutton:not(.titlebar-button):not([class^="findbar-find"]):not([class^="scrollbutton"]), 471 | .close-icon 472 | { 473 | border-radius: var(--button-corner-rounding)!important; 474 | } 475 | 476 | 477 | .findbar-find-next { 478 | border-radius: 0px var(--button-corner-rounding) var(--button-corner-rounding) 0px !important; 479 | } 480 | 481 | .findbar-textbox { 482 | border-radius: var(--button-corner-rounding) 0px 0px var(--button-corner-rounding) !important; 483 | } 484 | 485 | .bookmark-item { 486 | padding-left: 7px !important; 487 | padding-right: 7px !important; 488 | margin-right: 0px !important; 489 | } 490 | 491 | 492 | 493 | #urlbar { 494 | border-radius: calc(1px + var(--button-corner-rounding)) !important; 495 | } 496 | 497 | /* style identity box */ 498 | #identity-box { 499 | margin-right: 0px !important; 500 | } 501 | 502 | 503 | 504 | /* style address bar */ 505 | #urlbar { 506 | border-color: transparent !important; 507 | box-shadow: none !important; 508 | } 509 | 510 | #tracking-protection-icon-container { 511 | border-inline-end: none !important; 512 | } 513 | 514 | 515 | 516 | 517 | 518 | #pageActionSeparator { 519 | display: none !important; 520 | } 521 | 522 | .urlbar-icon, #userContext-indicator, #userContext-label { 523 | fill: transparent !important; 524 | background-color: transparent !important; 525 | color: transparent !important; 526 | transition: var(--animation-speed) !important; 527 | } 528 | 529 | 530 | #urlbar:hover .urlbar-icon, 531 | #urlbar:active .urlbar-icon, 532 | #urlbar[focused] .urlbar-icon { 533 | fill: var(--toolbar-color) !important; 534 | } 535 | 536 | #urlbar:hover #userContext-indicator, 537 | #urlbar:active #userContext-indicator, 538 | #urlbar[focused] #userContext-indicator, 539 | #urlbar:hover #userContext-label, 540 | #urlbar:active #userContext-label, 541 | #urlbar[focused] #userContext-label { 542 | color: var(--identity-tab-color) !important; 543 | fill: var(--identity-tab-color) !important; 544 | } 545 | 546 | .urlbar-page-action[open] { 547 | background-color: var(--toolbarbutton-active-background) !important; 548 | fill: var(--toolbar-color) !important; 549 | } 550 | 551 | .urlbar-page-action[open]:hover { 552 | background-color: var(--toolbarbutton-active-background) !important; 553 | fill: var(--toolbar-color) !important; 554 | } 555 | 556 | .urlbar-page-action[open] .urlbar-icon { 557 | fill: var(--toolbar-color) !important; 558 | } 559 | 560 | .urlbar-scheme { 561 | padding-bottom: 11px !important; 562 | } 563 | 564 | 565 | #urlbar-container { 566 | margin-left: -1px !important; 567 | margin-right: -1px !important; 568 | } 569 | 570 | .urlbar-input-box { 571 | padding: 5px 5px !important; 572 | } 573 | 574 | #urlbar { 575 | background-color: transparent !important; 576 | color: var(--lwt-toolbar-field-color, black) !important; 577 | } 578 | 579 | 580 | #urlbar:not(.hidden-focus)[focused="true"] { 581 | background-color: var(--toolbarbutton-hover-background) !important; 582 | } 583 | 584 | #pocket-button { 585 | padding-bottom: 4px !important; 586 | } 587 | 588 | .urlbar-icon-wrapper > .urlbar-icon:hover { 589 | background-color: transparent !important; 590 | } 591 | 592 | .urlbar-icon-wrapper { 593 | background-color: transparent !important; 594 | transition: background-color var(--animation-speed) !important; 595 | } 596 | 597 | 598 | 599 | #urlbar:not([focused]) .urlbar-input-box:hover, 600 | #identity-box:hover, 601 | #tracking-protection-icon-container:hover, 602 | .urlbar-icon:hover, 603 | .urlbar-icon-wrapper:hover, 604 | [anonid=urlbar-go-button]:hover { 605 | background-color: var(--toolbarbutton-hover-background) !important; 606 | } 607 | 608 | 609 | #identity-box:active, 610 | #tracking-protection-icon-container:active, 611 | .urlbar-icon:active, 612 | .urlbar-icon-wrapper:active, 613 | [anonid=urlbar-go-button]:active { 614 | background-color: var(--toolbarbutton-active-background) !important; 615 | } 616 | 617 | .urlbar-input-box, 618 | #identity-box, 619 | #tracking-protection-icon-container, 620 | [anonid=urlbar-go-button], 621 | #urlbar { 622 | transition: background-color var(--animation-speed) !important; 623 | } 624 | 625 | #tracking-protection-icon, 626 | #identity-box image { 627 | transition: fill-opacity var(--animation-speed) !important; 628 | } 629 | 630 | [lwthemetextcolor="dark"] .urlbarView-body-outer { 631 | background-color: #f5f6f7 !important; 632 | color: var(--toolbar-color) !important; 633 | } 634 | 635 | .urlbarView-body-inner { 636 | background-color: var(--toolbar-bgcolor) !important; 637 | } 638 | 639 | .downloadsPanelFooterButton:hover { 640 | outline: none !important; 641 | } 642 | 643 | /* -------------------- Style context menus -------------------- */ 644 | #context-navigation, 645 | #context-sep-navigation, 646 | #context-bookmarklink, 647 | #context-viewinfo, 648 | #context-viewpartialsource-selection, 649 | #inspect-separator, 650 | #context-savelink, 651 | #context-sendimage, 652 | #context-setDesktopBackground, 653 | #context_reloadTab, 654 | #context_moveTabOptions, 655 | #context_bookmarkTab, 656 | .bookmarks-actions-menuseparator, 657 | .openintabs-menuitem { 658 | display: none !important; 659 | } 660 | 661 | menupopup, 662 | menupopup menuitem, 663 | menupopup menu, 664 | menupopup menuseparator { 665 | -moz-appearance: none !important; 666 | } 667 | 668 | menupopup:not(#BMB_bookmarksPopup) { 669 | padding: 6px 9px 9px !important; 670 | margin: -6px -9px 0 !important; 671 | border: 0 !important; 672 | background: 0 !important; 673 | } 674 | 675 | menu[open] menupopup:not(#BMB_bookmarksPopup) { 676 | margin: -12px -9px 0 !important; 677 | } 678 | 679 | #BMB_bookmarksPopup menu[open] menupopup { 680 | transform: translateY(4px) !important; 681 | } 682 | 683 | menupopup menuseparator 684 | { 685 | margin-top: 5px !important; 686 | margin-bottom: 5px !important; 687 | padding: 0px !important; 688 | border-bottom: none !important; 689 | opacity: 0.2 !important; 690 | } 691 | .popup-internal-box { 692 | background: Menu !important; /* fall back if adaptable colors are removed */ 693 | } 694 | 695 | .popup-internal-box:not(.in-bookmarks-menu) { 696 | padding: 6px 0 !important; 697 | } 698 | 699 | 700 | .panel-arrowcontent { 701 | padding-top: 0px !important; 702 | border: none !important; 703 | } 704 | 705 | /* shadows and rounded corners for menus */ 706 | .popup-internal-box:not(.in-bookmarks-menu) { 707 | border-radius: var(--menu-corner-rounding) !important; 708 | box-shadow: 0px 2px 9px -3px black !important; 709 | } 710 | 711 | .panel-arrowcontainer .panel-arrowcontent, .popup-internal-box, hbox[flex="1"][part="innerbox"] { 712 | border-radius: var(--menu-corner-rounding) !important; 713 | } 714 | 715 | 716 | 717 | 718 | .in-bookmarks-menu { 719 | padding-bottom: 5px !important; 720 | padding-top: 5px !important; 721 | } 722 | 723 | 724 | menu, 725 | menuitem, 726 | menucaption { 727 | -moz-appearance: none !important; 728 | height: var(--menu-item-height) !important; 729 | } 730 | 731 | menu, 732 | menuitem, 733 | menucaption { 734 | padding-left: 5px !important; 735 | padding-right: 5px !important; 736 | } 737 | 738 | menu:not(.subviewbutton) > .menu-right { 739 | margin-top: 2px !important; 740 | margin-right: 0px !important; 741 | width: 0px !important; 742 | } 743 | 744 | menu:not(.subviewbutton) > .menu-right image { 745 | margin-right: -5px !important; 746 | margin-top: -2px !important; 747 | border: 6px solid var(--toolbar-color) !important; 748 | border-top-color: transparent !important; 749 | border-right-color: transparent !important; 750 | border-bottom-color: transparent !important; 751 | } 752 | 753 | panelview toolbarbutton:not(#fxa-manage-account-button) { 754 | height: var(--menu-item-height) !important; 755 | } 756 | 757 | #BMB_bookmarksPopup .menu-right { 758 | height: 23px !important; 759 | } 760 | 761 | #sidebar-switcher-bookmarks, #customization-uidensity-menuitem-compact { 762 | margin-top: 5px !important; 763 | } 764 | 765 | #customization-lwtheme-menu-header { 766 | margin-top: 0px !important; 767 | } 768 | 769 | /* windows-specific adjustments */ 770 | @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10) { 771 | .bookmark-item .scrollbutton-up { 772 | margin-top: -3px !important; 773 | } 774 | 775 | .bookmark-item .scrollbutton-up > .toolbarbutton-icon { 776 | margin-top: -2px !important; 777 | border: 6px solid MenuText !important; 778 | border-top-color: transparent !important; 779 | border-right-color: transparent !important; 780 | border-left-color: transparent !important; 781 | } 782 | 783 | .bookmark-item .scrollbutton-down { 784 | margin-bottom: -3px !important; 785 | } 786 | 787 | .bookmark-item .scrollbutton-down > .toolbarbutton-icon { 788 | margin-bottom: -2px !important; 789 | border: 6px solid MenuText !important; 790 | border-bottom-color: transparent !important; 791 | border-right-color: transparent !important; 792 | border-left-color: transparent !important; 793 | } 794 | 795 | menu, 796 | menuitem, 797 | menucaption { 798 | padding-left: 5px !important; 799 | padding-right: 5px !important; 800 | } 801 | 802 | menu:not(.subviewbutton) > .menu-right { 803 | margin-right: 0px !important; 804 | padding-left: 0px !important; 805 | } 806 | 807 | .in-bookmarks-menu { 808 | padding-bottom: 5px !important; 809 | padding-top: 1px !important; 810 | } 811 | 812 | #BMB_bookmarksPopup menu menupopup { 813 | transform: translateY(-1px) !important; 814 | } 815 | } 816 | 817 | /* linux and mac-specific adjustments */ 818 | @media not (-moz-os-version: windows-win10) { 819 | @media not (-moz-os-version: windows-win8) { 820 | @media not (-moz-os-version: windows-win7) { 821 | hbox[flex="1"][part="innerbox"] { 822 | box-shadow: 0px 2px 12px -6px black !important; 823 | } 824 | 825 | .menu-iconic-left { 826 | margin: 0px 6px !important; 827 | } 828 | 829 | #BMB_bookmarksPopup menu[open] menupopup { 830 | transform: translateY(1px) !important; 831 | } 832 | } 833 | } 834 | } 835 | 836 | 837 | /* make menus adapt to theme */ 838 | menu, 839 | menuitem, 840 | menucaption { 841 | color: var(--toolbar-color) !important; 842 | } 843 | 844 | .popup-internal-box { 845 | background-color: var(--toolbar-bgcolor, Menu) !important; 846 | } 847 | 848 | menu[_moz-menuactive="true"]:not([disabled="true"]), 849 | menuitem[_moz-menuactive="true"]:not([disabled="true"]), 850 | menucaption[_moz-menuactive="true"]:not([disabled="true"]) { 851 | background-color: var(--toolbarbutton-hover-background, rgba(127,127,127,0.5)) !important; 852 | } 853 | 854 | menu[disabled="true"], 855 | menuitem[disabled="true"], 856 | menucaption[disabled="true"] { 857 | color: var(--toolbarbutton-hover-background, rgba(127,127,127,0.5)) !important; 858 | } 859 | 860 | menu[disabled="true"][_moz-menuactive="true"], 861 | menuitem[disabled="true"][_moz-menuactive="true"], 862 | menucaption[disabled="true"][_moz-menuactive="true"] { 863 | background-color: transparent !important; 864 | } 865 | 866 | .panel-arrow { 867 | fill: var(--toolbar-bgcolor) !important; 868 | } 869 | 870 | [lwthemetextcolor="dark"] panelview:not([extension]), 871 | [lwthemetextcolor="dark"] .panel-arrowcontent { 872 | background-color: #f5f6f7 !important; 873 | } 874 | 875 | .panel-subview-body { 876 | background-color: var(--toolbar-bgcolor) !important; 877 | } 878 | 879 | #downloadsPanel-mainView { 880 | background-color: var(--toolbar-bgcolor) !important; 881 | } 882 | 883 | #identity-popup-mainView { 884 | background-color: var(--toolbar-bgcolor) !important; 885 | } 886 | 887 | #identity-popup-content-blocking-detected { 888 | color: var(--toolbar-active-background) !important; 889 | } 890 | 891 | #identity-popup-permission-empty-hint { 892 | color: var(--toolbar-active-background) !important; 893 | } 894 | 895 | .identity-popup-warning-yellow { 896 | color: black !important; 897 | } 898 | 899 | panel:not([viewId^="PanelUI-webext"]) .panel-arrow { 900 | fill: var(--toolbar-bgcolor) !important; 901 | } 902 | 903 | .bookmark-item [class^="scrollbutton"] { 904 | background-color: var(--toolbar-bgcolor) !important; 905 | } 906 | --------------------------------------------------------------------------------