browser.css (17152B)
1 :root { 2 --appmenu-background: rgba(0,0,0,.85); 3 --appmenu-border-color: rgba(0,0,0,.15); 4 --appmenu-border-radius: 0px; 5 } 6 7 /* ::::: app menu button ::::: */ 8 9 #appmenu-button { 10 -moz-appearance: none; 11 background: var(--appmenu-background); 12 background-clip: padding-box; 13 border-radius: 0 0 var(--appmenu-border-radius) var(--appmenu-border-radius); 14 border: 1px solid var(--appmenu-border-color); 15 border-top: none; 16 font-weight: bold; 17 box-shadow: none; 18 padding: 0 1.5em .05em; 19 margin: 0 0 2px; 20 color: #bfbbb6; 21 } 22 23 @media (-moz-windows-classic) { 24 #appmenu-button { 25 margin-bottom: 1px; 26 } 27 } 28 29 #main-window[privatebrowsingmode=temporary] #appmenu-button { 30 --appmenu-background: rgba(2,2,2,.75); 31 color: #000; 32 } 33 34 #appmenu-button:hover:not(:active):not([open]) { 35 --appmenu-background: rgba(1,1,1,.75); 36 --appmenu-border-color: rgba(0,0,0,.20); 37 } 38 39 #main-window[privatebrowsingmode=temporary] #appmenu-button:hover:not(:active):not([open]) { 40 --appmenu-background: rgba(2,2,2,.85); 41 } 42 43 #appmenu-button:hover:active, 44 #appmenu-button[open] { 45 border-radius: 0; 46 --appmenu-background: rgba(0,0,0,.4); 47 --appmenu-border-color: rgba(0,0,0,.25); 48 } 49 50 #main-window[privatebrowsingmode=temporary] #appmenu-button:hover:active, 51 #main-window[privatebrowsingmode=temporary] #appmenu-button[open] { 52 --appmenu-background: rgba(2,2,2,.4); 53 } 54 55 #appmenu-button > .button-box { 56 border-style: none; 57 padding: 0; 58 } 59 60 #appmenu-button > .button-box > .button-menu-dropmarker { 61 list-style-image: url(chrome://browser/skin/toolbarbutton-dropdown-arrow.svg); 62 width: auto; 63 height: auto; 64 padding: 0; 65 margin: 0; 66 margin-inline-start: .5em; 67 } 68 69 #main-window[privatebrowsingmode=temporary] #appmenu-button > .button-box > .button-menu-dropmarker { 70 list-style-image: url(chrome://browser/skin/toolbarbutton-dropdown-arrow.svg#darktext); 71 } 72 73 /* ::::: titlebar ::::: */ 74 75 #main-window[sizemode="normal"] > #titlebar { 76 -moz-appearance: -moz-window-titlebar; 77 } 78 79 #main-window[sizemode="maximized"] > #titlebar { 80 -moz-appearance: -moz-window-titlebar-maximized; 81 } 82 83 @media all and (-moz-windows-classic) { 84 #main-window[sizemode="normal"] > #titlebar > #titlebar-content > #appmenu-button-container { 85 margin-top: 4px; 86 } 87 } 88 89 #titlebar-buttonbox { 90 -moz-appearance: -moz-window-button-box; 91 } 92 93 #main-window[sizemode="maximized"] #titlebar-buttonbox { 94 -moz-appearance: -moz-window-button-box-maximized; 95 } 96 97 .titlebar-placeholder[type="appmenu-button"] { 98 margin-left: 4px; 99 } 100 101 .titlebar-placeholder[type="caption-buttons"] { 102 margin-left: 22px; 103 } 104 105 #titlebar-min { 106 -moz-appearance: -moz-window-button-minimize; 107 } 108 109 #titlebar-max { 110 -moz-appearance: -moz-window-button-maximize; 111 } 112 113 #main-window[sizemode="maximized"] #titlebar-max { 114 -moz-appearance: -moz-window-button-restore; 115 } 116 117 #titlebar-close { 118 -moz-appearance: -moz-window-button-close; 119 } 120 121 @media not all and (-moz-windows-classic) { 122 #titlebar-min { 123 margin-inline-end: 2px; 124 } 125 } 126 127 /* ::::: bookmark buttons ::::: */ 128 129 toolbarbutton.bookmark-item { 130 margin: 0; 131 padding: 2px 3px; 132 } 133 134 toolbarbutton.bookmark-item:hover:active:not([disabled="true"]), 135 toolbarbutton.bookmark-item[open="true"] { 136 padding-top: 3px; 137 padding-bottom: 1px; 138 padding-inline-start: 4px; 139 padding-inline-end: 2px; 140 } 141 142 .bookmark-item:not(#bookmarks-menu-button) > .toolbarbutton-icon { 143 width: 16px; 144 height: 16px; 145 } 146 147 148 .bookmark-item > .toolbarbutton-text { 149 display: -moz-box !important; 150 } 151 152 .bookmark-item > .toolbarbutton-menu-dropmarker { 153 display: none; 154 } 155 156 @media (-moz-windows-glass) { 157 #main-window[sizemode="normal"] > #titlebar > #titlebar-content > #appmenu-button-container { 158 margin-top: 1px; 159 } 160 161 #appmenu-button { 162 border-width: 2px; 163 -moz-border-left-colors: rgba(255,255,255,.5) var(--appmenu-border-color); 164 -moz-border-bottom-colors: rgba(255,255,255,.5) var(--appmenu-border-color); 165 -moz-border-right-colors: rgba(255,255,255,.5) var(--appmenu-border-color); 166 margin-bottom: 1px; 167 box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 168 0 0 2px 1px rgba(255,255,255,.25) inset; 169 } 170 171 #appmenu-popup { 172 margin-top: -1px; 173 margin-inline-start: 1px; 174 } 175 } 176 177 @media all and (-moz-windows-default-theme) { 178 #navigator-toolbox > toolbar:not(:-moz-lwtheme), 179 #addon-bar:not(:-moz-lwtheme) { 180 background-color: #181411; 181 } 182 183 #sidebar-splitter { 184 border: 0; 185 border-inline-end: 1px solid rgb(64,64,64); 186 min-width: 0; 187 width: 3px; 188 background-color: transparent; 189 margin-inline-start: -3px; 190 position: relative; 191 } 192 } 193 194 @media all and (-moz-windows-compositor) { 195 #main-window { 196 background-color: transparent; 197 -moz-appearance: -moz-win-glass; 198 } 199 200 /* On win 10, if we don't set this on the entire browser container, including 201 * the sidebar, then the accent color bleeds through in the titlebar 202 * if the sidebar is open. */ 203 #browser { 204 -moz-appearance: -moz-win-exclude-glass; 205 } 206 207 /* ==== Windows 10 styling ==== */ 208 209 @media (-moz-os-version: windows-win10) { 210 /* Draw XUL caption buttons on Win10 */ 211 #appmenu-button { 212 margin-top: -1px !important; 213 margin-bottom: 5px !important; 214 } 215 216 #tabbrowser-tabs { 217 min-height: 28px; 218 } 219 220 #titlebar-buttonbox, 221 .titlebar-button { 222 -moz-appearance: none !important; 223 } 224 225 .titlebar-button { 226 border: none; 227 border-radius: 0px; 228 margin: 0 !important; 229 padding: 8px 17px; 230 transition: background-color linear 120ms; 231 } 232 233 .titlebar-button:hover { 234 background-color: hsla(0, 0%, 0%, .17); 235 } 236 237 .titlebar-button:hover:active { 238 background-color: hsla(0, 0%, 0%, .27); 239 transition: none; 240 } 241 242 .titlebar-button:not(:hover) > .toolbarbutton-icon:-moz-window-inactive { 243 opacity: 0.5; 244 } 245 246 #titlebar-close:hover { 247 background-color: hsla(0, 0%, 0%, 1); 248 } 249 250 #titlebar-close:hover:active { 251 background-color: hsla(0, 0%, 0%, 1); 252 transition: none; 253 } 254 255 #main-window[sizemode=maximized] .titlebar-button { 256 padding-top: 8px; 257 padding-bottom: 8px; 258 } 259 260 .titlebar-button > .toolbarbutton-icon { 261 width: 12px; 262 height: 12px; 263 } 264 265 #main-window[chromemargin^="0,"][sizemode=normal] #navigator-toolbox { 266 margin-top: -4px; 267 } 268 269 #titlebar-min { 270 list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-white); 271 } 272 273 #titlebar-max { 274 list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-white); 275 } 276 277 #main-window[sizemode="maximized"] #titlebar-max { 278 list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-white); 279 } 280 281 #titlebar-close { 282 list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-white); 283 } 284 #titlebar-close:hover { 285 list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-white); 286 } 287 288 /* light persona */ 289 .titlebar-button:-moz-lwtheme-darktext:hover { 290 background-color: hsla(0, 0%, 0%, .17); 291 } 292 293 .titlebar-button:-moz-lwtheme-darktext:hover:active { 294 background-color: hsla(0, 0%, 0%, .27); 295 transition: none; 296 } 297 298 #titlebar-min:-moz-lwtheme-darktext { 299 list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-darktext); 300 } 301 #titlebar-max:-moz-lwtheme-darktext { 302 list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-darktext); 303 } 304 #main-window[sizemode="maximized"]:-moz-lwtheme-darktext #titlebar-max:-moz-lwtheme-darktext { 305 list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-darktext); 306 } 307 #titlebar-close:-moz-lwtheme-darktext { 308 list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-darktext); 309 } 310 #titlebar-close:hover:-moz-lwtheme-darktext { 311 list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-darktext); 312 } 313 314 /* dark persona */ 315 .titlebar-button:-moz-lwtheme-brighttext:hover { 316 background-color: hsla(0, 0%, 0%, .27); 317 } 318 319 .titlebar-button:-moz-lwtheme-brighttext:hover:active { 320 background-color: hsla(0, 0%, 0%, .37); 321 transition: none; 322 } 323 324 #titlebar-min:-moz-lwtheme-brighttext { 325 list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-themes); 326 } 327 #titlebar-max:-moz-lwtheme-brighttext { 328 list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-themes); 329 } 330 #main-window[sizemode="maximized"]:-moz-lwtheme-brighttext #titlebar-max:-moz-lwtheme-brighttext { 331 list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-themes); 332 } 333 #titlebar-close:-moz-lwtheme-brighttext { 334 list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-themes); 335 } 336 #titlebar-close:hover:-moz-lwtheme-brighttext { 337 list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-themes); 338 } 339 340 /* the 12px image renders a 10px icon, and the 10px upscaled gets rounded to 12.5, which 341 * rounds up to 13px, which makes the icon one pixel too big on 1.25dppx. Fix: */ 342 @media (min-resolution: 1.20dppx) and (max-resolution: 1.45dppx) { 343 .titlebar-button > .toolbarbutton-icon { 344 width: 11.5px; 345 height: 11.5px; 346 } 347 } 348 349 /* 175% dpi should result in the same device pixel sizes as 150% dpi. */ 350 @media (min-resolution: 1.70dppx) and (max-resolution: 1.95dppx) { 351 .titlebar-button { 352 padding-left: 14.1px; 353 padding-right: 14.1px; 354 } 355 356 .titlebar-button > .toolbarbutton-icon { 357 width: 10.8px; 358 height: 10.8px; 359 } 360 } 361 362 /* 225% dpi should result in the same device pixel sizes as 200% dpi. */ 363 @media (min-resolution: 2.20dppx) and (max-resolution: 2.45dppx) { 364 .titlebar-button { 365 padding-left: 15.3333px; 366 padding-right: 15.3333px; 367 } 368 369 .titlebar-button > .toolbarbutton-icon { 370 width: 10.8px; 371 height: 10.8px; 372 } 373 } 374 375 /* 275% dpi should result in the same device pixel sizes as 250% dpi. */ 376 @media (min-resolution: 2.70dppx) and (max-resolution: 2.95dppx) { 377 .titlebar-button > .toolbarbutton-icon { 378 width: 10.8px; 379 height: 10.8px; 380 } 381 } 382 } 383 384 /* ==== Windows Vista/7/8 styling ==== */ 385 386 @media (-moz-os-version: windows-vista), 387 (-moz-os-version: windows-win7), 388 (-moz-os-version: windows-win8) { 389 /* Make sure the native margins are correct on Win Vista/7/8. 390 * We can't use -moz-win-glass there because the border sizing would 391 * not be correct. */ 392 #main-window { 393 -moz-appearance: -moz-win-borderless-glass; 394 } 395 396 /* These should be hidden w/ glass enabled. Windows draws its own buttons. */ 397 .titlebar-button { 398 display: none; 399 } 400 401 /* The borders on the glass frame are ours, and inside #browser, and on 402 * vista and win7 we want to make sure they are "glassy", so we can't use 403 * #browser as the exclude-glass container. We use #appcontent instead. */ 404 #browser { 405 -moz-appearance: none; 406 } 407 408 #appcontent { 409 -moz-appearance: -moz-win-exclude-glass; 410 } 411 412 #main-window[chromemargin^="0,"][sizemode=normal] #navigator-toolbox { 413 margin-top: -7px; 414 } 415 416 /* Artificially draw window borders that are covered by lwtheme, see bug 591930. */ 417 #main-window[sizemode="normal"] > #titlebar > #titlebar-content:-moz-lwtheme { 418 border-top: 2px solid; 419 -moz-border-top-colors: rgb(37, 44, 51) rgba(255,255,255,.6); 420 } 421 422 #main-window[sizemode="normal"] > #titlebar > #titlebar-content:-moz-lwtheme:-moz-window-inactive { 423 -moz-border-top-colors: rgb(102, 102, 102) rgba(255,255,255,.6); 424 } 425 426 #main-window[sizemode="normal"] > #titlebar > #titlebar-content > #appmenu-button-container:-moz-lwtheme { 427 margin-top: -1px; 428 } 429 430 #main-window[sizemode="normal"] #titlebar-buttonbox:-moz-lwtheme { 431 margin-top: -2px; 432 } 433 434 #appmenu-button { 435 margin-bottom: -1px; 436 } 437 } 438 439 /* ==== ==== */ 440 441 #main-window[sizemode=fullscreen]:not(:-moz-lwtheme) { 442 -moz-appearance: none; 443 background-color: #181411; 444 } 445 446 #main-menubar > menu:not(:-moz-lwtheme) { 447 color: inherit; 448 } 449 450 /* Show toolbar borders on vista through win8, but not on win10 and later: */ 451 @media (-moz-os-version: windows-vista), 452 (-moz-os-version: windows-win7), 453 (-moz-os-version: windows-win8) { 454 /* Vertical toolbar border */ 455 #main-window[sizemode=normal] #navigator-toolbox::after, 456 #main-window[sizemode=normal] #navigator-toolbox[tabsontop=true] > toolbar:not(#toolbar-menubar):not(#TabsToolbar), 457 #main-window[sizemode=normal] #navigator-toolbox[tabsontop=false] > toolbar:not(#toolbar-menubar):not(#nav-bar) { 458 border-left: 1px solid hsla(0,0%,12%,0.25); 459 border-right: 1px solid hsla(0,0%,12%,0.25); 460 background-clip: padding-box; 461 } 462 463 #main-window[sizemode=normal] #navigator-toolbox > toolbar:-moz-lwtheme { 464 border-color: transparent !important; 465 } 466 #main-window[sizemode=normal] #browser-border-start, 467 #main-window[sizemode=normal] #browser-border-end { 468 display: -moz-box; 469 background-color: hsla(0,0%,0%,0.25); 470 width: 1px; 471 } 472 #main-window[sizemode=normal] #browser-bottombox { 473 border: 1px solid hsla(0,0%,12%,0.25); 474 border-top-style: none; 475 } 476 } 477 478 /* Round top corners on Vista/7/8, but not Win10 because it's flush against the window edge */ 479 @media (-moz-os-version: windows-vista), 480 (-moz-os-version: windows-win7), 481 (-moz-os-version: windows-win8) { 482 #main-window[sizemode=normal][tabsontop=false] #PersonalToolbar:not(:-moz-lwtheme) { 483 border-top-left-radius: 3.5px; 484 border-top-right-radius: 3.5px; 485 } 486 487 #main-window[sizemode=normal][tabsontop=true] #nav-bar:not(:-moz-lwtheme), 488 #main-window[sizemode=normal][tabsontop=true] > #nav-bar[collapsed=true]:not([customizing]) + toolbar:not(:-moz-lwtheme), 489 #main-window[sizemode=normal][tabsontop=true] > #nav-bar[collapsed=true]:not([customizing]) + #customToolbars + #PersonalToolbar:not(:-moz-lwtheme) { 490 border-top-left-radius: 2px; 491 border-top-right-radius: 2px; 492 } 493 } 494 495 496 #main-window[sizemode=normal][tabsontop=true] #nav-bar:not(:-moz-lwtheme), 497 #main-window[sizemode=normal][tabsontop=true] > #nav-bar[collapsed=true]:not([customizing]) + toolbar:not(:-moz-lwtheme), 498 #main-window[sizemode=normal][tabsontop=true] > #nav-bar[collapsed=true]:not([customizing]) + #customToolbars + #PersonalToolbar:not(:-moz-lwtheme) { 499 border-top: 1px solid rgba(64,64,64,1); 500 background-clip: padding-box; 501 } 502 #main-window[sizemode=normal]:not([disablechrome]) #TabsToolbar[tabsontop=true]:not(:-moz-lwtheme) { 503 margin-bottom: -1px; 504 background-image: none !important; 505 } 506 #main-window[sizemode=normal]:not([disablechrome]) #tabbrowser-tabs[tabsontop=true] > .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox > .scrollbox-innerbox:not(:-moz-lwtheme) { 507 position: relative; 508 } 509 510 #main-window[sizemode=normal] #TabsToolbar[tabsontop=true] { 511 padding-left: 4px; 512 padding-right: 4px; 513 } 514 515 #main-window[sizemode=normal] #TabsToolbar[tabsontop=false] { 516 padding-left: 2px; 517 padding-right: 2px; 518 } 519 520 521 #toolbar-menubar:not([autohide="true"]), 522 #TabsToolbar[tabsontop="true"], 523 #navigator-toolbox[tabsontop="false"] > #nav-bar, 524 #nav-bar + #customToolbars + #PersonalToolbar[collapsed="true"] + #TabsToolbar[tabsontop="false"]:last-child, 525 #navigator-toolbox > toolbar:not(#toolbar-menubar):-moz-lwtheme { 526 -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar-drag"); 527 } 528 529 #appcontent:not(:-moz-lwtheme) { 530 background-color: -moz-dialog; 531 } 532 533 #browser-bottombox:not(:-moz-lwtheme) { 534 background-color: #181411; 535 background-clip: padding-box; 536 } 537 538 @media (-moz-os-version: windows-vista), 539 (-moz-os-version: windows-win7), 540 (-moz-os-version: windows-win8) { 541 #main-window[sizemode=normal] #browser-bottombox:not(:-moz-lwtheme), 542 #main-window[sizemode=normal] #addon-bar:not(:-moz-lwtheme) { 543 border-bottom-left-radius: 4px; 544 border-bottom-right-radius: 4px; 545 } 546 } 547 548 #addon-bar:not(:-moz-lwtheme) { 549 -moz-appearance: none; 550 border-bottom-style: none; 551 } 552 553 .tabbrowser-tab:not(:-moz-lwtheme) { 554 text-shadow: none; 555 } 556 557 #main-window[sizemode=normal] .statuspanel-inner { 558 559 padding-left: 1px; 560 padding-right: 1px; 561 } 562 563 #tab-view:-moz-lwtheme { 564 background-image: url("chrome://browser/skin/tabview/grain.png"), 565 -moz-linear-gradient(rgba(255,255,255,0), #CCD9EA 200px, #C7D5E7); 566 background-attachment: fixed; 567 } 568 } 569 570 @media not all and (-moz-windows-compositor) { 571 #toolbar-menubar:not([autohide=true]):not(:-moz-lwtheme):-moz-system-metric(windows-default-theme), 572 #TabsToolbar[tabsontop=true]:not(:-moz-lwtheme):-moz-system-metric(windows-default-theme), 573 #navigator-toolbox[tabsontop=false] > toolbar:not(#toolbar-menubar):not(:-moz-lwtheme):-moz-system-metric(windows-default-theme) { 574 -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar-drag"); 575 } 576 }