browser.css (70495B)
1 @import url("chrome://os/skin/browser.css"); 2 @import url("chrome://browser/skin/devtools.css"); 3 @import url("chrome://browser/skin/padlock/padlock.css"); 4 @import url("chrome://global/skin/"); 5 6 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 7 @namespace html url("http://www.w3.org/1999/xhtml"); 8 9 :root { 10 --tab-background: #181411; 11 --tab-border-color: #9a9a9a; 12 --tab-border-radius: 0px; 13 --tab-box-shadow: none; 14 --tab-hover-background: rgba(24,20,17,.85); 15 --tab-hover-border: var(--tab-border-color); 16 --tab-pinned-background: linear-gradient(rgba(255,255,255,1) -8px, rgba(23,23,23,1), rgba(23,23,23,1)); 17 --tab-selected-background: rgba(24,20,17,1); 18 --tab-selected-border: var(--tab-border-color); 19 20 --toolbar-border: #9a9a9a; 21 --toolbar-highlight-top: #2b2722; 22 --toolbar-highlight-bottom: var(--toolbar-highlight-top); 23 24 --toolbarbutton-background-color: hsla(210,32%,93%,0); 25 --toolbarbutton-border-color: hsla(210,54%,20%,0) hsla(210,54%,20%,0) hsla(210,54%,20%,0); 26 --toolbarbutton-box-shadow: 0 1px hsla(0,0%,100%,0) inset, 0 1px hsla(210,54%,20%,0), 0 0 2px hsla(210,54%,20%,0); 27 --toolbarbutton-active-background-color: rgb(75,75,75); 28 --toolbarbutton-active-border-color: var(--toolbarbutton-border-color); 29 --toolbarbutton-active-box-shadow: var(--toolbarbutton-box-shadow); 30 31 --toolbarbutton-image: url("chrome://browser/skin/Toolbar.svg#toolbar"); 32 --toolbarbutton-inverted-image: url("chrome://browser/skin/Toolbar.svg#darktext"); 33 34 --urlbar-dropmarker-background: transparent; 35 --urlbar-dropmarker-box-shadow: -3px 0 0 -2px #D0D0D0; 36 37 --window-text-color: currentColor; 38 } 39 40 :root:-moz-lwtheme-brighttext { 41 --tab-background: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)); 42 --tab-box-shadow: none; 43 --tab-hover-background: linear-gradient(rgba(0,0,0,.8), rgba(0,0,0,.8)); 44 --tab-selected-background: linear-gradient(rgba(0,0,0,.9), rgba(0,0,0,.9)); 45 --toolbar-highlight-top: rgba(5,5,5,0.9); 46 --toolbar-highlight-bottom: rgba(5,5,5,0.6); 47 } 48 49 :root:-moz-lwtheme-darktext { 50 --tab-background: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)); 51 --tab-hover-background: linear-gradient(rgba(0,0,0,.8), rgba(0,0,0,.8)); 52 --tab-selected-background: linear-gradient(rgba(0,0,0,.9), rgba(0,0,0,.9)); 53 --toolbar-highlight-top: rgba(250,250,250,0.9); 54 --toolbar-highlight-bottom: rgba(250,250,250,0.5); 55 } 56 57 #main-window:not(:-moz-lwtheme):after { 58 color: #bfbbb6 !important; 59 text-shadow: none !important; 60 } 61 62 #main-window { 63 background-color: #181411; 64 } 65 66 #menubar-items { 67 -moz-box-orient: vertical; 68 } 69 70 #main-menubar { 71 -moz-box-flex: 1; 72 } 73 74 #navigator-toolbox { 75 -moz-appearance: none; 76 background-color: #181411; /*transparent;*/ 77 border-top: none; 78 color: #bfbbb6; 79 } 80 81 #navigator-toolbox::after { 82 content: ""; 83 display: -moz-box; 84 -moz-box-ordinal-group: 101; 85 height: 1px; 86 background-color: #181411; 87 } 88 89 #navigator-toolbox[tabsontop=false]::after, 90 #main-window[disablechrome] #navigator-toolbox::after { 91 visibility: collapse; 92 } 93 94 #navigator-toolbox > toolbar:not(:-moz-lwtheme) { 95 -moz-appearance: none; 96 border-style: none; 97 background-color: #181411; 98 } 99 100 #toolbar-menubar:not(:-moz-lwtheme), 101 #TabsToolbar[tabsontop=true]:not(:-moz-lwtheme), 102 #navigator-toolbox[tabsontop=false] > #nav-bar:not(:-moz-lwtheme), 103 #nav-bar + #customToolbars + #PersonalToolbar[collapsed=true] + #TabsToolbar[tabsontop=false]:last-child:not(:-moz-lwtheme) { 104 background-color: #181411 !important; /*transparent !important;*/ 105 background-image: none !important; 106 color: #bfbbb6; 107 border-left-style: none !important; 108 border-right-style: none !important; 109 } 110 111 @media not all and (-moz-windows-compositor) { 112 #main-window[sizemode="normal"] > #titlebar { 113 -moz-appearance: none !important; 114 } 115 116 #main-window[tabsintitlebar] #titlebar { 117 visibility: hidden; 118 } 119 #main-window[tabsintitlebar] #titlebar-content { 120 -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox"); 121 visibility: visible; 122 } 123 } 124 125 #navigator-toolbox[tabsontop="true"] > #nav-bar, 126 #navigator-toolbox[tabsontop="true"]:not([customizing]) > #nav-bar[collapsed="true"] + toolbar, 127 #navigator-toolbox[tabsontop="true"]:not([customizing]) > #nav-bar[collapsed="true"] + #customToolbars + #PersonalToolbar { 128 /* background-image: linear-gradient(var(--toolbar-highlight-top), var(--toolbar-highlight-bottom)); */ 129 background-image: none; 130 } 131 132 #main-window[tabsontop=true] #PersonalToolbar:-moz-lwtheme-darktext, 133 #addon-bar:-moz-lwtheme-darktext { 134 background-image: -moz-linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)); 135 } 136 137 #main-window[tabsontop=true] #PersonalToolbar:-moz-lwtheme-brighttext, 138 #addon-bar:-moz-lwtheme-brighttext { 139 background-image: -moz-linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)); 140 } 141 142 #navigator-toolbox[tabsontop=false] > #PersonalToolbar { 143 margin-top: 3px; 144 } 145 #navigator-toolbox[tabsontop=false] > #PersonalToolbar:not(:-moz-lwtheme) { 146 margin-top: 2px; 147 border-top: 1px solid rgb(50,50,50); 148 } 149 150 #personal-bookmarks { 151 min-height: 24px; 152 } 153 154 #print-preview-toolbar:not(:-moz-lwtheme) { 155 -moz-appearance: none; 156 background-color: #181411; 157 } 158 159 /* ::::: app menu button ::::: */ 160 161 .splitmenu-menuitem { 162 margin-inline-end: 1px; 163 padding-inline-end: 0.5em; 164 } 165 166 .splitmenu-menu { 167 -moz-box-pack: end; 168 } 169 170 .appmenu-edit-button { 171 -moz-appearance: none; 172 border: 1px solid transparent; 173 padding: 2px; 174 background: transparent; 175 border-radius: 3px; 176 } 177 178 .appmenu-edit-button[disabled="true"] { 179 opacity: .3; 180 } 181 182 #appmenuPrimaryPane { 183 border-inline-end: 1px solid ThreeDShadow; 184 } 185 186 #appmenu-popup { 187 -moz-appearance: none; 188 background: #181411; 189 border: 1px solid rgb(64,64,64); 190 } 191 #appmenuPrimaryPane { 192 background-color: #181411; 193 padding: 2px; 194 border-inline-end: none; 195 } 196 #appmenuSecondaryPane { 197 background-color: #181411; 198 padding-inline-start: 3px; 199 padding-inline-end: 2px; 200 padding-top: 2px; 201 padding-bottom: 2px; 202 font-family: "Segoe UI Semibold", "Segoe UI", sans-serif; 203 } 204 205 .appmenu-menuseparator { 206 -moz-appearance: none; 207 margin-top: 3px; 208 margin-bottom: 3px; 209 margin-inline-start: 30px; 210 padding: 0; 211 border-top: 1px solid #e1e1e1; 212 border-bottom: none; 213 } 214 215 .appmenu-edit-button:not([disabled]):hover { 216 background: #181411; 217 } 218 219 #appmenuSecondaryPane-spacer { 220 min-height: 1em; 221 } 222 223 #appmenu-editmenu { 224 -moz-box-pack: end; 225 } 226 227 #appmenu-cut, 228 #appmenu-editmenu-cut { 229 list-style-image: url("chrome://browser/skin/toolbar/cut.svg"); 230 } 231 232 #appmenu-copy, 233 #appmenu-editmenu-copy { 234 list-style-image: url("chrome://browser/skin/toolbar/copy.svg"); 235 } 236 237 #appmenu-paste, 238 #appmenu-editmenu-paste { 239 list-style-image: url("chrome://browser/skin/toolbar/paste.svg"); 240 } 241 242 #appmenu_print, 243 #appmenu_print_popup { 244 list-style-image: url("chrome://browser/skin/toolbar/print.svg"); 245 } 246 247 #appmenu-quit { 248 list-style-image: url("chrome://browser/skin/toolbar/quit.svg"); 249 } 250 251 #appmenu-edit-label { 252 -moz-appearance: none; 253 background: transparent; 254 font-style: italic; 255 } 256 257 #appmenu_bookmarks { 258 list-style-image: url("chrome://browser/skin/toolbar/bookmarked.svg"); 259 } 260 261 #appmenu_privateBrowsing, 262 #appmenu_newPrivateWindow { 263 list-style-image: url("chrome://browser/skin/toolbar/private.svg"); 264 } 265 266 #appmenu_addons { 267 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric-16.svg"); 268 } 269 270 #appmenu_showAllBookmarks, 271 #bookmarksShowAll, 272 #BMB_bookmarksShowAll { 273 list-style-image: url("chrome://browser/skin/places/places.svg"); 274 -moz-image-region: rect(2px, 118px, 18px, 102px); 275 } 276 277 #appmenu_bookmarkThisPage, 278 #menu_bookmarkThisPage, 279 #BMB_bookmarkThisPage { 280 list-style-image: url("chrome://browser/skin/toolbar/bookmark.svg"); 281 } 282 283 /* ::::: bookmark buttons ::::: */ 284 285 #wrapper-personal-bookmarks[place="palette"] > .toolbarpaletteitem-box { 286 width: 16px; 287 height: 16px; 288 background: -moz-image-rect(url("chrome://browser/skin/places/places.svg"), 289 2, 138, 18, 122) no-repeat center; 290 } 291 292 .bookmarks-toolbar-customize { 293 max-width: 15em !important; 294 list-style-image: url("chrome://browser/skin/places/places.svg") !important; 295 -moz-image-region: rect(2px, 138px, 18px, 122px); 296 } 297 298 /* ::::: bookmark menus ::::: */ 299 300 menu.bookmark-item, 301 menuitem.bookmark-item { 302 min-width: 0; 303 max-width: 32em; 304 } 305 306 .bookmark-item > .menu-iconic-left { 307 margin-top: 0; 308 margin-bottom: 0; 309 } 310 311 .bookmark-item > .menu-iconic-left > .menu-iconic-icon { 312 padding-inline-start: 0px; 313 } 314 315 /* ::::: bookmark items ::::: */ 316 317 .bookmark-item { 318 list-style-image: url(chrome://browser/skin/places/places.svg); 319 -moz-image-region: rect(2px, 396px, 18px, 380px); 320 } 321 322 .bookmark-item[container] { 323 -moz-image-region: rect(2px, 198px, 18px, 182px); 324 } 325 326 .bookmark-item[container][open] { 327 -moz-image-region: rect(2px, 198px, 18px, 182px); 328 } 329 330 .bookmark-item[container][livemark] { 331 -moz-image-region: rect(2px, 238px, 18px, 222px); 332 } 333 334 .bookmark-item[container][livemark] .bookmark-item { 335 -moz-image-region: rect(2px, 258px, 18px, 242px); 336 } 337 338 .bookmark-item[container][livemark] .bookmark-item[visited] { 339 -moz-image-region: rect(2px, 278px, 18px, 262px); 340 } 341 342 .bookmark-item[container][query] { 343 -moz-image-region: rect(2px, 218px, 18px, 202px); 344 } 345 346 .bookmark-item[query][tagContainer] { 347 -moz-image-region: rect(2px, 98px, 18px, 82px); 348 } 349 350 .bookmark-item[query][dayContainer] { 351 -moz-image-region: rect(2px, 58px, 18px, 42px); 352 } 353 354 .bookmark-item[query][hostContainer] { 355 -moz-image-region: rect(2px, 198px, 18px, 182px); 356 } 357 358 .bookmark-item[query][hostContainer][open] { 359 -moz-image-region: rect(2px, 198px, 18px, 182px); 360 } 361 362 .bookmark-item[cutting] > .toolbarbutton-icon, 363 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon { 364 opacity: 0.5; 365 } 366 367 .bookmark-item[cutting] > .toolbarbutton-text, 368 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text { 369 opacity: 0.7; 370 } 371 372 toolbarbutton.bookmark-item { 373 -moz-appearance: none; 374 border-radius: 3px; 375 border-color: transparent; 376 } 377 378 toolbarbutton.bookmark-item:hover { 379 background-color: #181411; 380 color: white; 381 text-shadow: none; 382 } 383 384 toolbarbutton.bookmark-item:hover:active { 385 background-color: #181411; 386 color: white; 387 text-shadow: none; 388 } 389 390 /* ::::: primary toolbar buttons ::::: */ 391 392 .toolbarbutton-1 { 393 list-style-image: var(--toolbarbutton-image); 394 } 395 396 toolbar:not([brighttext]) .toolbarbutton-1 { 397 list-style-image: var(--toolbarbutton-inverted-image); 398 } 399 400 .toolbarbutton-1[disabled=true] > .toolbarbutton-icon, 401 .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker, 402 .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker, 403 .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon, 404 .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled] > .toolbarbutton-icon { 405 opacity: .4; 406 } 407 408 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker, 409 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { 410 list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow.svg"); 411 } 412 413 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker > image, 414 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > image { 415 width: auto; 416 } 417 418 toolbar:not([brighttext]) .toolbarbutton-1 > .toolbarbutton-menu-dropmarker, 419 toolbar:not([brighttext]) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { 420 list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow.svg#darktext"); 421 } 422 423 .toolbarbutton-1 > .toolbarbutton-icon, 424 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon { 425 margin-inline-end: 0; 426 } 427 428 toolbar[mode=full] .toolbarbutton-1:not([type=menu-button]) { 429 -moz-box-orient: vertical; 430 } 431 432 toolbar[mode=full] .toolbarbutton-1, 433 toolbar[mode=full] .toolbarbutton-1 > .toolbarbutton-menubutton-button { 434 min-width: 57px; 435 } 436 437 #nav-bar { 438 counter-reset: smallicons; 439 } 440 441 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1, 442 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button { 443 -moz-appearance: none; 444 border: none; 445 padding: 0; 446 background: none; 447 } 448 449 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1:not([type=menu-button]), 450 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button, 451 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { 452 padding: 0px; 453 -moz-box-pack: center; 454 } 455 456 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#social-provider-button) { 457 padding-left: 5px; 458 padding-right: 5px; 459 } 460 461 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > menupopup { 462 margin-top: -3px; 463 } 464 465 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button { 466 padding-inline-end: 0; 467 } 468 469 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { 470 padding-inline-start: 0; 471 -moz-box-align: center; 472 } 473 474 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-icon, 475 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-container, 476 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack, 477 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon, 478 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { 479 padding: 2px 6px; 480 background: var(--toolbarbutton-background-color) padding-box; 481 border-radius: 2px; 482 border: 1px solid; 483 border-color: var(--toolbarbutton-border-color); 484 box-shadow: var(--toolbarbutton-box-shadow); 485 transition-property: background-color, border-color, box-shadow; 486 transition-duration: 150ms; 487 } 488 489 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #reload-button, #stop-button, #home-button, #print-button, #downloads-button, #downloads-indicator, #history-button, #history-menu-button, #bookmarks-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #cut-button, #copy-button, #paste-button, #fullscreen-button, #zoom-out-button, #zoom-in-button, #sync-button, #feed-button, #alltabs-button, #tabview-button, #webrtc-status-button)) > .toolbarbutton-icon, 490 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #reload-button, #stop-button, #home-button, #print-button, #downloads-button, #downloads-indicator, #history-button, #history-menu-button, #bookmarks-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #cut-button, #copy-button, #paste-button, #fullscreen-button, #zoom-out-button, #zoom-in-button, #sync-button, #feed-button, #alltabs-button, #tabview-button, #webrtc-status-button)) > .toolbarbutton-badge-container, 491 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #reload-button, #stop-button, #home-button, #print-button, #downloads-button, #downloads-indicator, #history-button, #history-menu-button, #bookmarks-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #cut-button, #copy-button, #paste-button, #fullscreen-button, #zoom-out-button, #zoom-in-button, #sync-button, #feed-button, #alltabs-button, #tabview-button, #webrtc-status-button)) > .toolbarbutton-badge-stack, 492 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #reload-button, #stop-button, #home-button, #print-button, #downloads-button, #downloads-indicator, #history-button, #history-menu-button, #bookmarks-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #cut-button, #copy-button, #paste-button, #fullscreen-button, #zoom-out-button, #zoom-in-button, #sync-button, #feed-button, #alltabs-button, #tabview-button, #webrtc-status-button)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon { 493 padding: 3px 7px; 494 } 495 496 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#social-provider-button) > .toolbarbutton-icon, 497 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text { 498 padding-inline-end: 17px; 499 } 500 501 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker { 502 margin-inline-start: -15px; 503 } 504 505 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon { 506 border-inline-end: none; 507 } 508 509 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { 510 padding: 8px 5px 7px; 511 } 512 513 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar #social-toolbar-item { 514 margin-left: 2px; 515 margin-right: 2px; 516 } 517 518 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar #social-toolbar-item > .toolbarbutton-1 { 519 padding-left: 0; 520 padding-right: 0; 521 } 522 523 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before, 524 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar #social-toolbar-item > .toolbarbutton-1:not(:hover):not(:active):not([open]) + .toolbarbutton-1:not(:hover):not(:active):not([open])::before { 525 content: ""; 526 display: -moz-box; 527 width: 1px; 528 height: 18px; 529 margin-inline-end: -1px; 530 background-image: linear-gradient(hsla(210,54%,20%,.2) 0, hsla(210,54%,20%,.2) 18px); 531 background-clip: padding-box; 532 background-position: center; 533 background-repeat: no-repeat; 534 background-size: 1px 18px; 535 box-shadow: 0 0 0 1px hsla(0,0%,100%,.2); 536 } 537 538 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon:-moz-locale-dir(ltr), 539 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-locale-dir(rtl) { 540 border-top-right-radius: 0; 541 border-bottom-right-radius: 0; 542 } 543 544 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon:-moz-locale-dir(rtl), 545 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-locale-dir(ltr) { 546 border-top-left-radius: 0; 547 border-bottom-left-radius: 0; 548 } 549 550 551 552 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled]):hover:active > .toolbarbutton-icon, 553 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon, 554 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1:not([disabled]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon, 555 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1:not([disabled]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-container, 556 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1:not([disabled]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack { 557 background-color: var(--toolbarbutton-active-background-color); 558 border-color: var(--toolbarbutton-active-border-color); 559 box-shadow: var(--toolbarbutton-active-box-shadow); 560 text-shadow: none; 561 transition: none; 562 } 563 564 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1:-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon { 565 border-inline-start-color: hsla(210,54%,20%,.35); 566 } 567 568 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1[checked]:not(:active):hover > .toolbarbutton-icon { 569 background-color: rgba(0%,0%,0%,.4); 570 transition: background-color .4s; 571 } 572 573 :-moz-any(#TabsToolbar, #addon-bar) .toolbarbutton-1, 574 :-moz-any(#TabsToolbar, #addon-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button, 575 .tabbrowser-arrowscrollbox > .scrollbutton-up, 576 .tabbrowser-arrowscrollbox > .scrollbutton-down { 577 -moz-appearance: none; 578 border-style: none; 579 padding: 0 3px; 580 } 581 582 #TabsToolbar .toolbarbutton-1:not([disabled]):hover, 583 #TabsToolbar .toolbarbutton-1[open], 584 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled]):hover, 585 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):hover, 586 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):hover { 587 background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.5)), 588 linear-gradient(transparent, rgba(0,0,0,.25) 30%), 589 linear-gradient(transparent, rgba(0,0,0,.25) 30%); 590 background-position: 1px -1px, 0 -1px, 100% -1px; 591 background-size: calc(100% - 2px) 100%, 1px 100%, 1px 100%; 592 background-repeat: no-repeat; 593 } 594 595 #addon-bar .toolbarbutton-1:not([disabled]):hover, 596 #addon-bar .toolbarbutton-1[open], 597 #addon-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled]):hover { 598 background-image: linear-gradient(to top, transparent, rgba(0,0,0,.15)), 599 linear-gradient(to top, transparent, rgba(0,0,0,.15) 30%), 600 linear-gradient(to top, transparent, rgba(0,0,0,.15) 30%); 601 background-position: left, left, right; 602 background-size: auto, 1px 100%, 1px 100%; 603 background-repeat: no-repeat; 604 } 605 606 #back-button { 607 -moz-image-region: rect(0, 18px, 18px, 0); 608 } 609 610 #forward-button { 611 -moz-image-region: rect(0, 36px, 18px, 18px); 612 } 613 614 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon, 615 #forward-button:-moz-locale-dir(rtl), 616 #forward-button:-moz-locale-dir(rtl) > .toolbarbutton-text { 617 transform: scaleX(-1); 618 } 619 620 window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icons] > :-moz-any(#nav-bar[currentset*="unified-back-forward-button,urlbar-container"],#nav-bar:not([currentset])) > #unified-back-forward-button > #forward-button > .toolbarbutton-icon { 621 margin-inline-start: -4px !important; 622 margin-inline-end: -2px !important; 623 624 padding-left: 2px; 625 padding-right: 2px; 626 } 627 628 window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icons] > :-moz-any(#nav-bar[currentset*="unified-back-forward-button,urlbar-container"],#nav-bar:not([currentset])) > #unified-back-forward-button:not([switchingtabs]) > #forward-button { 629 transition: opacity 150ms ease-out; 630 } 631 632 window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icons] > :-moz-any(#nav-bar[currentset*="unified-back-forward-button,urlbar-container"],#nav-bar:not([currentset])) > #unified-back-forward-button > #back-button { 633 -moz-image-region: rect(0, 19px, 18px, 1px); 634 } 635 636 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr), 637 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) { 638 list-style-image: url("chrome://browser/skin/toolbar/back.svg") !important; 639 } 640 641 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr), 642 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) { 643 list-style-image: url("chrome://browser/skin/toolbar/forward.svg") !important; 644 } 645 646 #stop-button { 647 -moz-image-region: rect(0, 72px, 18px, 54px); 648 } 649 650 #reload-button { 651 -moz-image-region: rect(0, 54px, 18px, 36px); 652 } 653 654 #home-button.bookmark-item { 655 list-style-image: var(--toolbarbutton-image); 656 } 657 toolbar:not([brighttext]) #home-button.bookmark-item { 658 list-style-image: var(--toolbarbutton-inverted-image); 659 } 660 #home-button { 661 -moz-image-region: rect(0, 90px, 18px, 72px); 662 } 663 664 #downloads-button { 665 -moz-image-region: rect(0, 108px, 18px, 90px); 666 } 667 668 #history-button, 669 #history-menu-button { 670 -moz-image-region: rect(0, 126px, 18px, 108px); 671 } 672 673 #bookmarks-button, 674 #bookmarks-menu-button { 675 -moz-image-region: rect(0, 144px, 18px, 126px); 676 } 677 678 #bookmarks-menu-button.bookmark-item { 679 list-style-image: var(--toolbarbutton-image); 680 } 681 682 toolbar:not([brighttext]) #bookmarks-menu-button.bookmark-item { 683 list-style-image: var(--toolbarbutton-inverted-image); 684 } 685 686 #print-button { 687 -moz-image-region: rect(0, 198px, 18px, 180px); 688 } 689 690 #new-tab-button { 691 -moz-image-region: rect(0, 162px, 18px, 144px); 692 } 693 694 #new-window-button { 695 -moz-image-region: rect(0, 180px, 18px, 162px); 696 } 697 698 #cut-button { 699 -moz-image-region: rect(0, 216px, 18px, 198px); 700 } 701 702 #copy-button { 703 -moz-image-region: rect(0, 234px, 18px, 216px); 704 } 705 706 #paste-button { 707 -moz-image-region: rect(0, 252px, 18px, 234px); 708 } 709 710 #fullscreen-button { 711 -moz-image-region: rect(0, 270px, 18px, 252px); 712 } 713 714 #zoom-out-button { 715 -moz-image-region: rect(0, 288px, 18px, 270px); 716 } 717 718 #zoom-in-button { 719 -moz-image-region: rect(0, 306px, 18px, 288px); 720 } 721 722 #sync-button { 723 -moz-image-region: rect(0, 324px, 18px, 306px); 724 } 725 #sync-button[status="active"] { 726 list-style-image: url("chrome://browser/skin/sync-throbber.png"); 727 -moz-image-region: rect(0, 18px, 18px, 0); 728 } 729 730 #feed-button { 731 -moz-image-region: rect(0, 342px, 18px, 324px); 732 } 733 734 #webrtc-status-button { 735 -moz-image-region: rect(0, 360px, 18px, 342px); 736 } 737 738 #tabview-button, 739 #menu_tabview { 740 list-style-image: url(chrome://browser/skin/tabview/tabview.png); 741 } 742 743 toolbar:not([brighttext]) #tabview-button { 744 list-style-image: url(chrome://browser/skin/tabview/tabview-inverted.png); 745 } 746 747 @media (-moz-os-version: windows-vista), 748 (-moz-os-version: windows-win7) { 749 :-moz-any(#TabsToolbar, #nav-bar[tabsontop=false], #toolbar-menubar) > #tabview-button:-moz-system-metric(windows-compositor):not(:-moz-lwtheme), 750 :-moz-any(#TabsToolbar, #nav-bar[tabsontop=false], #toolbar-menubar) > toolbarpaletteitem > #tabview-button:-moz-system-metric(windows-compositor):not(:-moz-lwtheme) { 751 list-style-image: url(chrome://browser/skin/tabview/tabview-inverted.png); 752 } 753 } 754 755 #tabview-button { 756 -moz-image-region: rect(0, 90px, 18px, 72px); 757 } 758 759 #tabview-button[groups="0"] { 760 -moz-image-region: rect(0, 18px, 18px, 0); 761 } 762 763 #tabview-button[groups="1"] { 764 -moz-image-region: rect(0, 36px, 18px, 18px); 765 } 766 767 #tabview-button[groups="2"] { 768 -moz-image-region: rect(0, 54px, 18px, 36px); 769 } 770 771 #tabview-button[groups="3"] { 772 -moz-image-region: rect(0, 72px, 18px, 54px); 773 } 774 775 #menu_tabview { 776 -moz-image-region: rect(1px, 89px, 17px, 73px); 777 } 778 779 #menu_tabview[groups="0"] { 780 -moz-image-region: rect(1px, 17px, 17px, 1px); 781 } 782 783 #menu_tabview[groups="1"] { 784 -moz-image-region: rect(1px, 35px, 17px, 19px); 785 } 786 787 #menu_tabview[groups="2"] { 788 -moz-image-region: rect(1px, 53px, 17px, 37px); 789 } 790 791 #menu_tabview[groups="3"] { 792 -moz-image-region: rect(1px, 71px, 17px, 55px); 793 } 794 795 /* ::::: fullscreen window controls ::::: */ 796 797 #TabsToolbar > #window-controls { 798 margin-inline-start: 4px; 799 } 800 801 #minimize-button, 802 #restore-button, 803 #close-button { 804 list-style-image: url("chrome://global/skin/icons/windowControls.png"); 805 padding: 0; 806 } 807 808 #minimize-button { 809 -moz-image-region: rect(0, 16px, 16px, 0); 810 } 811 #minimize-button:hover { 812 -moz-image-region: rect(16px, 16px, 32px, 0); 813 } 814 #minimize-button:hover:active { 815 -moz-image-region: rect(32px, 16px, 48px, 0); 816 } 817 #restore-button { 818 -moz-image-region: rect(0, 32px, 16px, 16px); 819 } 820 #restore-button:hover { 821 -moz-image-region: rect(16px, 32px, 32px, 16px); 822 } 823 #restore-button:hover:active { 824 -moz-image-region: rect(32px, 32px, 48px, 16px); 825 } 826 #close-button { 827 -moz-image-region: rect(0, 48px, 16px, 32px); 828 -moz-appearance: none; 829 border-style: none; 830 margin: 2px; 831 } 832 #close-button:hover { 833 -moz-image-region: rect(16px, 48px, 32px, 32px); 834 } 835 #close-button:hover:active { 836 -moz-image-region: rect(32px, 48px, 48px, 32px); 837 } 838 839 /* ::::: Location Bar ::::: */ 840 841 #urlbar, 842 .searchbar-textbox { 843 -moz-appearance: none; 844 margin: 0px; 845 padding: 0px; 846 background-clip: padding-box; 847 border: none; 848 border-color: rgba(32,32,32,1); 849 border-radius: 0px; 850 background-color: #181411; 851 color: #bfbbb6; 852 } 853 854 #urlbar { 855 width: 7em; 856 padding-inline-end: 2px; 857 } 858 859 #urlbar:-moz-lwtheme, 860 .searchbar-textbox:-moz-lwtheme { 861 background-color: rgba(0,0,0,.8); 862 border-color: rgba(64,64,64,.27) rgba(64,64,64,.2) rgba(64,64,64,.18); 863 color: #bfbbb6; 864 } 865 866 html|*.urlbar-input:-moz-lwtheme:-moz-placeholder, 867 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input:-moz-placeholder { 868 color: #bfbbb6; 869 } 870 871 #urlbar:-moz-lwtheme[focused="true"], 872 .searchbar-textbox:-moz-lwtheme[focused="true"] { 873 background-color: #181411; 874 } 875 876 #urlbar-container { 877 -moz-box-orient: horizontal; 878 -moz-box-align: stretch; 879 background-color: #181411; 880 } 881 882 .urlbar-textbox-container { 883 -moz-box-align: stretch; 884 } 885 886 .urlbar-input-box { 887 margin-inline-start: 0; 888 min-width: 4em; 889 } 890 891 #urlbar-icons { 892 -moz-box-align: center; 893 } 894 895 .urlbar-icon { 896 padding: 0 3px; 897 } 898 899 .searchbar-engine-button, 900 .search-go-container { 901 padding: 2px 2px; 902 } 903 904 #urlbar-search-splitter { 905 min-width: 6px; 906 margin-inline-start: -3px; 907 border: none; 908 background: transparent; 909 } 910 911 #urlbar-search-splitter + #urlbar-container > #urlbar , 912 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox { 913 margin-inline-start: 0; 914 } 915 916 #urlbar-display-box { 917 border-inline-end: 1px solid #AAA; 918 margin-inline-end: 3px; 919 } 920 921 #urlbar-display { 922 margin-top: 0; 923 margin-bottom: 0; 924 margin-inline-start: 0; 925 color: GrayText; 926 } 927 928 /* identity box */ 929 930 #identity-box { 931 padding: 4px 2px; 932 margin: -2px 0; 933 font-size: .9em; 934 } 935 936 #identity-box:-moz-locale-dir(ltr) { 937 border-top-left-radius: 1.5px; 938 border-bottom-left-radius: 1.5px; 939 } 940 941 #identity-box:-moz-locale-dir(rtl) { 942 border-top-right-radius: 1.5px; 943 border-bottom-right-radius: 1.5px; 944 } 945 946 #notification-popup-box:not([hidden]) + #identity-box { 947 padding-inline-start: 10px; 948 border-radius: 0; 949 } 950 951 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI, 952 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity, 953 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain { 954 margin-inline-end: 4px; 955 } 956 957 #identity-box:-moz-focusring { 958 outline: 1px dotted #000; 959 outline-offset: -3px; 960 } 961 962 #identity-icon-labels { 963 padding-inline-start: 2px; 964 padding-inline-end: 5px; 965 } 966 967 /* Location bar dropmarker */ 968 969 .urlbar-history-dropmarker { 970 -moz-appearance: none; 971 padding: 0 3px; 972 background-color: transparent; 973 border: none; 974 width: auto; 975 list-style-image: url("chrome://browser/skin/urlbar-history-dropmarker.svg#closed"); 976 } 977 978 .urlbar-history-dropmarker:not(:hover):not(:active):not([open="true"]) { 979 opacity: 0.15; 980 } 981 982 .urlbar-history-dropmarker:active, 983 .urlbar-history-dropmarker[open="true"] { 984 list-style-image: url("chrome://browser/skin/urlbar-history-dropmarker.svg#open"); 985 } 986 987 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI, 988 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity, 989 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain { 990 background-position: right; 991 background-size: 1px; 992 background-repeat: no-repeat; 993 } 994 995 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:-moz-locale-dir(rtl), 996 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:-moz-locale-dir(rtl), 997 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain:-moz-locale-dir(rtl) { 998 background-position: left; 999 } 1000 1001 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity, 1002 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI { 1003 color: hsl(92,100%,30%); 1004 } 1005 1006 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI { 1007 color: rgb(229,115,0); 1008 } 1009 1010 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain { 1011 color: hsl(207,100%,63%); 1012 } 1013 1014 /* page proxy icon */ 1015 1016 #page-proxy-favicon { 1017 width: 16px; 1018 height: 16px; 1019 list-style-image: url(chrome://browser/skin/identity-not-secure.svg); 1020 margin-top: 1px; 1021 margin-bottom: 1px; 1022 margin-inline-start: 3px; 1023 margin-inline-end: 2px; 1024 -moz-image-region: rect(0, 16px, 16px, 0); 1025 } 1026 1027 #page-proxy-favicon[pageproxystate="invalid"] { 1028 opacity: 0.3; 1029 } 1030 1031 #identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon { 1032 list-style-image: url("chrome://branding/content/icon64.png"); 1033 } 1034 1035 #identity-popup-brandName { 1036 font-weight: bold; 1037 font-size: 1.25em; 1038 margin-top: .5em; 1039 margin-bottom: .5em; 1040 } 1041 1042 #identity-popup-content-box { 1043 max-width: 50ch; 1044 } 1045 1046 window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icons] > :-moz-any(#nav-bar[currentset*="unified-back-forward-button,urlbar-container"],#nav-bar:not([currentset])) > #unified-back-forward-button + #urlbar-container > #urlbar > #identity-box > #page-proxy-favicon { 1047 margin-inline-end: 1px; 1048 } 1049 1050 /* autocomplete */ 1051 1052 #treecolAutoCompleteImage { 1053 max-width: 36px; 1054 } 1055 1056 .ac-result-type-bookmark, 1057 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage), 1058 .private-autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) { 1059 list-style-image: url("chrome://browser/skin/places/bookmark.svg"); 1060 width: 16px; 1061 height: 16px; 1062 } 1063 1064 .ac-result-type-keyword, 1065 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage), 1066 .private-autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) { 1067 list-style-image: url(chrome://global/skin/icons/Search-glass.svg); 1068 width: 16px; 1069 height: 16px; 1070 } 1071 1072 .ac-result-type-tag, 1073 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage), 1074 .private-autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) { 1075 list-style-image: url("chrome://browser/skin/places/places.svg#tag"); 1076 width: 16px; 1077 height: 16px; 1078 } 1079 1080 .ac-comment { 1081 font-size: 1.15em; 1082 } 1083 1084 .ac-extra > .ac-comment { 1085 font-size: inherit; 1086 } 1087 1088 .ac-url-text, 1089 .ac-action-text { 1090 color: #bfbbb6; 1091 } 1092 1093 1094 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon { 1095 list-style-image: url("chrome://browser/skin/actionicon-tab.png"); 1096 } 1097 1098 .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment), 1099 .private-autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) { 1100 color: GrayText; 1101 } 1102 1103 .ac-comment[selected="true"], 1104 .ac-url-text[selected="true"], 1105 .ac-action-text[selected="true"] { 1106 color: inherit !important; 1107 } 1108 1109 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment), 1110 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment), 1111 .private-autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment), 1112 .private-autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment) { 1113 color: GrayText; 1114 font-size: smaller; 1115 } 1116 1117 .autocomplete-treebody::-moz-tree-cell(suggesthint), 1118 .private-autocomplete-treebody::-moz-tree-cell(suggesthint) { 1119 border-top: 1px solid GrayText; 1120 } 1121 1122 /* ::::: go button ::::: */ 1123 1124 #go-button, 1125 #urlbar > toolbarbutton { 1126 -moz-appearance: none; 1127 padding: 0 2px; 1128 background-origin: border-box; 1129 border: none; 1130 } 1131 1132 #go-button { 1133 padding: 0 3px; 1134 } 1135 1136 #urlbar-reload-button { 1137 list-style-image: url("chrome://browser/skin/reload-stop-go.svg#reload"); 1138 } 1139 1140 #urlbar-reload-button:not([disabled]):hover:active { 1141 list-style-image: url("chrome://browser/skin/reload-stop-go.svg#reload-active"); 1142 } 1143 1144 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { 1145 transform: scaleX(-1); 1146 } 1147 1148 #go-button, 1149 #urlbar-go-button { 1150 list-style-image: url("chrome://browser/skin/reload-stop-go.svg#go"); 1151 } 1152 1153 #go-button:hover:active, 1154 #urlbar-go-button:hover:active { 1155 list-style-image: url("chrome://browser/skin/reload-stop-go.svg#go-active"); 1156 } 1157 1158 #go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon, 1159 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { 1160 transform: scaleX(-1); 1161 } 1162 1163 #urlbar-stop-button { 1164 list-style-image: url("chrome://browser/skin/reload-stop-go.svg#stop"); 1165 } 1166 1167 1168 #urlbar-stop-button:hover:active { 1169 list-style-image: url("chrome://browser/skin/reload-stop-go.svg#stop-active"); 1170 } 1171 1172 #urlbar-reload-button:not(:hover):not(:active), 1173 #urlbar-stop-button:not(:hover):not(:active), 1174 #urlbar-go-button:not(:hover):not(:active), 1175 #go-button:not(:hover):not(:active) { 1176 opacity: .6; 1177 } 1178 1179 /* popup blocker button */ 1180 1181 #page-report-button { 1182 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png"); 1183 -moz-image-region: rect(0, 16px, 16px, 0); 1184 } 1185 1186 #page-report-button:hover { 1187 -moz-image-region: rect(0, 32px, 16px, 16px); 1188 } 1189 1190 #page-report-button:hover:active, 1191 #page-report-button[open="true"] { 1192 -moz-image-region: rect(0, 48px, 16px, 32px); 1193 } 1194 1195 /* star button */ 1196 1197 #star-button { 1198 list-style-image: url("chrome://browser/skin/toolbar/bookmark.svg"); 1199 } 1200 1201 #star-button:hover { 1202 background-image: radial-gradient(ircle closest-side, hsla(45,100%,73%,.3), hsla(45,100%,73%,0)); 1203 list-style-image: url("chrome://browser/skin/places/bookmark.svg"); 1204 } 1205 1206 #star-button:hover:active { 1207 background-image: radial-gradient(circle closest-side, hsla(45,100%,73%,.1), hsla(45,100%,73%,0)); 1208 list-style-image: url("chrome://browser/skin/places/bookmark.svg#active"); 1209 } 1210 1211 #star-button[starred="true"] { 1212 list-style-image: url("chrome://browser/skin/places/bookmark.svg"); 1213 } 1214 1215 /* bookmarking panel */ 1216 #editBookmarkPanelStarIcon { 1217 list-style-image: url("chrome://browser/skin/places/bookmarked48.svg"); 1218 width: 48px; 1219 height: 48px; 1220 } 1221 1222 #editBookmarkPanelStarIcon[unstarred] { 1223 list-style-image: url("chrome://browser/skin/places/bookmark48.svg"); 1224 } 1225 1226 #editBookmarkPanelTitle { 1227 font-size: 130%; 1228 } 1229 1230 #editBookmarkPanelHeader, 1231 #editBookmarkPanelContent { 1232 margin-bottom: .5em; 1233 } 1234 1235 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */ 1236 #editBMPanel_folderTree { 1237 min-width: 27em; 1238 } 1239 1240 .panel-promo-box { 1241 color: GrayText; 1242 } 1243 1244 .panel-promo-message { 1245 font-style: italic; 1246 } 1247 1248 .panel-promo-icon { 1249 list-style-image: url("chrome://browser/skin/sync-32.png"); 1250 } 1251 1252 .panel-promo-closebutton { 1253 -moz-appearance: none; 1254 -moz-image-region: rect(0, 64px, 16px, 48px); 1255 border: none; 1256 padding: 0px; 1257 } 1258 1259 /* ::::: content area ::::: */ 1260 1261 #sidebar { 1262 background-color: Window; 1263 } 1264 1265 #sidebar-title { 1266 padding-inline-start: 0px; 1267 } 1268 1269 #sidebar-search-container { 1270 background-color: #181411; 1271 } 1272 1273 #sidebar-header { 1274 -moz-appearance: none; 1275 border-top: none; 1276 border-bottom: none; 1277 background-color: #181411; 1278 color: #bfbbb6; 1279 } 1280 1281 .browserContainer > findbar { 1282 background-color: #181411; 1283 color: #bfbbb6; 1284 text-shadow: none; 1285 } 1286 1287 /* ::::: throbber ::::: */ 1288 1289 #navigator-throbber { 1290 width: 16px; 1291 min-height: 16px; 1292 margin: 0 3px; 1293 } 1294 1295 #navigator-throbber[busy="true"] { 1296 list-style-image: url("chrome://global/skin/icons/loading_16.png"); 1297 } 1298 1299 #navigator-throbber, 1300 #wrapper-navigator-throbber > #navigator-throbber { 1301 list-style-image: url("chrome://global/skin/icons/notloading_16.png"); 1302 } 1303 1304 /* Tabstrip */ 1305 #TabsToolbar { 1306 min-height: 0; 1307 padding: 0; 1308 } 1309 1310 #TabsToolbar:not(:-moz-lwtheme), 1311 #TabsToolbar[tabsontop=false] { 1312 background-image: linear-gradient(to top, var(--toolbar-border) 1px, rgba(0,0,0,.05) 1px, transparent 50%); 1313 } 1314 1315 @media (-moz-os-version: windows-win10) { 1316 #TabsToolbar:not(:-moz-lwtheme), 1317 #TabsToolbar[tabsontop=false] { 1318 background-image: linear-gradient(to top, var(--toolbar-border) 1px, rgba(0,0,0,0) 1px, transparent); 1319 } 1320 } 1321 1322 .tabbrowser-tab, 1323 .tabs-newtab-button { 1324 -moz-appearance: none; 1325 background: var(--tab-background); 1326 background-origin: border-box; 1327 background-repeat: no-repeat; 1328 /* top margin of 0 is important for Fitts' Law in ToT/FS */ 1329 margin: 0; 1330 padding: 3px 3px 3px 1px; 1331 border: none; 1332 border-bottom: gray 1px solid; 1333 border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0; 1334 box-shadow: var(--tab-box-shadow); 1335 margin-inline-start: -1px; 1336 color: #bfbbb6; 1337 } 1338 1339 .tabs-newtab-button { 1340 padding: 3px 1px 3px 1px; 1341 } 1342 1343 /* Make sure extra margin is added when tabs are not in the title bar so it doesn't 1344 "glue" right up against the AppMenu button/caption */ 1345 #main-window[sizemode="normal"][tabsontop=true] .tabbrowser-tab, 1346 #main-window[sizemode="normal"][tabsontop=true] .tabs-newtab-button { 1347 margin-top: 5px; 1348 } 1349 1350 .tabbrowser-tab:-moz-lwtheme, 1351 .tabs-newtab-button:-moz-lwtheme { 1352 color: inherit; 1353 text-shadow: inherit; 1354 background-origin: padding-box !important; 1355 background-size: 120% 110% !important; 1356 background-position: -3px -2px !important; 1357 background-repeat: repeat-x !important; 1358 } 1359 1360 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox { 1361 padding-inline-start: 1px; 1362 } 1363 1364 .tabbrowser-tab:hover, 1365 .tabs-newtab-button:hover { 1366 background-image: var(--tab-hover-background); 1367 } 1368 1369 .tabbrowser-tab[selected="true"] { 1370 background-image: var(--tab-selected-background); 1371 border: gray 1px solid !important; 1372 border-bottom: none !important; 1373 margin-inline-end: 1px; 1374 } 1375 1376 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) { 1377 background-image: var(--tab-pinned-background); 1378 } 1379 1380 .tabbrowser-tab:not([selected=true]):not(:hover):not(:-moz-lwtheme) > * > * > .tab-text { 1381 opacity: .4; 1382 } 1383 1384 .tab-throbber, 1385 .tab-icon-image { 1386 width: 16px; 1387 height: 16px; 1388 list-style-image: url(chrome://browser/skin/places/places.svg); 1389 -moz-image-region: rect(2px, 396px, 18px, 380px); 1390 margin-inline-start: 2px; 1391 margin-inline-end: 3px; 1392 } 1393 1394 .tab-throbber { 1395 list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png"); 1396 -moz-image-region: auto; 1397 } 1398 1399 .tab-throbber[progress] { 1400 list-style-image: url("chrome://browser/skin/tabbrowser/loading.png"); 1401 -moz-image-region: auto; 1402 } 1403 1404 #tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] { 1405 min-height: 16px; 1406 } 1407 1408 .tab-throbber[pinned], 1409 .tab-icon-image[pinned] { 1410 margin-inline-start: 0px; 1411 margin-inline-end: 0px; 1412 } 1413 1414 .tabbrowser-tab[label="about:config"] > * > * > .tab-icon-image { 1415 list-style-image: url("chrome://browser/skin/toolbar/options.svg") !important; 1416 -moz-image-region: auto; 1417 } 1418 1419 .tabbrowser-tab:focus > .tab-stack { 1420 outline: 1px dotted; 1421 } 1422 1423 /* Tab DnD indicator */ 1424 .tab-drop-indicator { 1425 list-style-image: url(chrome://browser/skin/tabbrowser/tabDragIndicator.png); 1426 margin-bottom: -11px; 1427 } 1428 1429 /* Tab close button */ 1430 .tab-close-button { 1431 -moz-appearance: none; 1432 border: none; 1433 padding: 0px; 1434 opacity: 1; 1435 } 1436 1437 .tab-close-button:hover { 1438 opacity: 1; 1439 } 1440 1441 .tab-close-button[selected] { 1442 -moz-appearance: none; 1443 border: none; 1444 padding: 0px; 1445 opacity: 1; 1446 } 1447 1448 .tabbrowser-tab:not([pinned]):not(:hover) .tab-close-button { 1449 visibility: collapse !important; 1450 } 1451 1452 .tabbrowser-tab:not([pinned]):hover .tab-close-button { 1453 visibility: visible !important; display: block !important; 1454 } 1455 1456 .tab-close-button:-moz-lwtheme-darktext { 1457 filter: invert(100%); 1458 } 1459 1460 .tab-close-button:-moz-system-metric(touch-enabled) { 1461 -moz-transform: scale(1.2); 1462 } 1463 1464 .tab-close-button:not([selected]):not(:hover):not(:active) { 1465 opacity: 1; 1466 } 1467 1468 .tab-close-button:focus { 1469 outline: none !important; 1470 } 1471 1472 /* Tab sound indicator */ 1473 .tab-icon-sound { 1474 -moz-margin-start: 4px; 1475 width: 16px; 1476 height: 16px; 1477 padding: 0; 1478 } 1479 1480 .allTabs-endimage[soundplaying], 1481 .allTabs-endimage[muted], 1482 .allTabs-endimage[blocked], 1483 .tab-icon-sound[soundplaying], 1484 .tab-icon-sound[muted], 1485 .tab-icon-sound[blocked] { 1486 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio"); 1487 filter: url(chrome://browser/skin/filters.svg#fill); 1488 fill: currentColor; 1489 } 1490 1491 .allTabs-endimage[muted], 1492 .tab-icon-sound[muted] { 1493 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted"); 1494 } 1495 1496 .allTabs-endimage[blocked], 1497 .tab-icon-sound[blocked] { 1498 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked"); 1499 } 1500 1501 .tab-icon-sound:-moz-lwtheme-darktext[soundplaying], 1502 .tab-icon-sound:-moz-lwtheme-darktext[muted], 1503 .tab-icon-sound:-moz-lwtheme-darktext[blocked] { 1504 filter: url(chrome://browser/skin/filters.svg#fill) drop-shadow(1px 1px 1px white); 1505 } 1506 1507 .tab-icon-sound:-moz-lwtheme-brighttext[soundplaying], 1508 .tab-icon-sound:-moz-lwtheme-brighttext[muted], 1509 .tab-icon-sound:-moz-lwtheme-brighttext[blocked] { 1510 filter: url(chrome://browser/skin/filters.svg#fill) drop-shadow(1px 1px 1px black); 1511 } 1512 1513 .tab-icon-sound[soundplaying]:not(:hover), 1514 .tab-icon-sound[muted]:not(:hover), 1515 .tab-icon-sound[blocked]:not(:hover) { 1516 opacity: .8; 1517 } 1518 1519 .tab-icon-sound[soundplaying-scheduledremoval]:not([muted]):not(:hover), 1520 .tab-icon-overlay[soundplaying-scheduledremoval]:not([muted]):not(:hover) { 1521 transition: opacity .3s linear var(--soundplaying-removal-delay); 1522 opacity: 0; 1523 } 1524 1525 /* Tab icon overlay */ 1526 .tab-icon-overlay { 1527 width: 16px; 1528 height: 16px; 1529 margin-top: -8px; 1530 margin-inline-start: -15px; 1531 margin-inline-end: -1px; 1532 position: relative; 1533 } 1534 1535 .tab-icon-overlay[soundplaying], 1536 .tab-icon-overlay[muted]:not([crashed]), 1537 .tab-icon-overlay[blocked]:not([crashed]) { 1538 border-radius: 10px; 1539 } 1540 1541 .tab-icon-overlay[soundplaying]:hover, 1542 .tab-icon-overlay[muted]:not([crashed]):hover, 1543 .tab-icon-overlay[blocked]:not([crashed]):hover { 1544 background-color: black; 1545 } 1546 1547 .tab-icon-overlay[soundplaying] { 1548 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white"); 1549 } 1550 1551 .tab-icon-overlay[muted] { 1552 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted"); 1553 } 1554 1555 .tab-icon-overlay[blocked] { 1556 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-blocked"); 1557 } 1558 1559 .tab-icon-overlay[soundplaying]:-moz-lwtheme-darktext:not(:hover) { 1560 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio"); 1561 } 1562 1563 .tab-icon-overlay[muted]:-moz-lwtheme-darktext:not(:hover) { 1564 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted"); 1565 } 1566 1567 .tab-icon-overlay[blocked]:-moz-lwtheme-darktext:not(:hover) { 1568 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-blocked"); 1569 } 1570 1571 /* Tab Overflow */ 1572 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]), 1573 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) { 1574 background-image: url(chrome://browser/skin/tabbrowser/tab-overflow-indicator.png); 1575 background-size: 100% 100%; 1576 width: 14px; 1577 margin-bottom: 0; 1578 pointer-events: none; 1579 position: relative; 1580 z-index: 3; /* the selected tab's z-index + 1 */ 1581 } 1582 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl), 1583 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) { 1584 transform: scaleX(-1); 1585 } 1586 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) { 1587 margin-inline-start: -2px; 1588 margin-inline-end: -12px; 1589 } 1590 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) { 1591 margin-inline-start: -12px; 1592 margin-inline-end: -2px; 1593 } 1594 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed], 1595 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] { 1596 opacity: 0; 1597 } 1598 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator, 1599 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator { 1600 transition: opacity 150ms ease; 1601 } 1602 1603 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */ 1604 1605 @media all and (-moz-touch-enabled) { 1606 .tabbrowser-arrowscrollbox > .scrollbutton-up, 1607 .tabbrowser-arrowscrollbox > .scrollbutton-down, 1608 #TabsToolbar .toolbarbutton-1 { 1609 min-width: 8.1mozmm; 1610 } 1611 1612 .tabs-newtab-button { 1613 min-width: 10mozmm; 1614 } 1615 1616 .tab-content { 1617 min-height: -moz-calc(6.8mozmm - 7px); 1618 } 1619 } 1620 1621 .tabbrowser-arrowscrollbox > .scrollbutton-up, 1622 .tabbrowser-arrowscrollbox > .scrollbutton-down { 1623 list-style-image: url("chrome://browser/skin/tabbrowser/tab-arrow.svg#left"); 1624 margin: 0; 1625 padding-right: 2px; 1626 border-right: 2px solid transparent; 1627 background-origin: border-box; 1628 } 1629 1630 toolbar:not([brighttext]) .tabbrowser-arrowscrollbox > .scrollbutton-up, 1631 toolbar:not([brighttext]) .tabbrowser-arrowscrollbox > .scrollbutton-down { 1632 list-style-image: url(chrome://browser/skin/tabbrowser/tab-arrow.svg#left-inverted); 1633 } 1634 1635 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled], 1636 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] { 1637 opacity: .4; 1638 } 1639 1640 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl), 1641 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) { 1642 -moz-transform: scaleX(-1); 1643 } 1644 1645 .tabbrowser-arrowscrollbox > .scrollbutton-down { 1646 -moz-transition: 1s background-color ease-out; 1647 } 1648 1649 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] { 1650 background-color: Highlight; 1651 -moz-transition: none; 1652 } 1653 1654 .tabs-newtab-button > .toolbarbutton-icon { 1655 margin-top: -1px; 1656 margin-bottom: -1px; 1657 } 1658 1659 .tabs-newtab-button, 1660 #TabsToolbar > #new-tab-button, 1661 #TabsToolbar > toolbarpaletteitem > #new-tab-button { 1662 list-style-image: url(chrome://browser/skin/toolbar/zoom-in.svg#dim); 1663 -moz-image-region: rect(1px, 17px, 17px, 1px); 1664 } 1665 1666 #TabsToolbar:not([brighttext]) .tabs-newtab-button, 1667 #TabsToolbar:not([brighttext]) > #new-tab-button, 1668 #TabsToolbar:not([brighttext]) > toolbarpaletteitem > #new-tab-button { 1669 list-style-image: url(chrome://browser/skin/toolbar/zoom-in.svg#darktext); 1670 } 1671 1672 .tabs-newtab-button { 1673 width: 27px; 1674 } 1675 1676 #TabsToolbar > #new-tab-button { 1677 width: 26px; 1678 } 1679 1680 #alltabs-button:not([type="menu"]) { 1681 list-style-image: url("chrome://browser/skin/tabbrowser/alltabs.svg#alltabs"); 1682 } 1683 1684 toolbar:not([brighttext]) #alltabs-button:not([type="menu"]) { 1685 list-style-image: url("chrome://browser/skin/tabbrowser/alltabs.svg#darktext"); 1686 } 1687 1688 #alltabs-button:not([type="menu"]):hover:active { 1689 list-style-image: url("chrome://browser/skin/tabbrowser/alltabs.svg#active"); 1690 } 1691 1692 #main-window[sizemode="normal"][tabsontop=true] #alltabs-button { 1693 margin-top: 5px; 1694 } 1695 1696 #alltabs-button[type="menu"] { 1697 list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow.svg"); 1698 -moz-image-region: auto; 1699 } 1700 1701 toolbar:not([brighttext]) #alltabs-button[type="menu"] { 1702 list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow.svg#darktext"); 1703 } 1704 1705 #alltabs-button[type="menu"] > .toolbarbutton-icon { 1706 margin: 0 2px; 1707 } 1708 1709 #alltabs-button[type="menu"] > .toolbarbutton-menu-dropmarker { 1710 display: none; 1711 } 1712 1713 1714 .alltabs-item > .menu-iconic-left > .menu-iconic-icon { 1715 list-style-image: url(chrome://browser/skin/places/places.svg); 1716 -moz-image-region: rect(2px, 396px, 18px, 380px); 1717 } 1718 1719 .alltabs-item[selected="true"] { 1720 font-weight: bold; 1721 } 1722 1723 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon { 1724 list-style-image: url("chrome://global/skin/icons/loading_16.png"); 1725 } 1726 1727 .alltabs-item[tabIsVisible] { 1728 box-shadow: inset 0 0 0 2em hsla(0,0%,50%,.15); 1729 } 1730 1731 1732 .tabs-closebutton { 1733 -moz-appearance: none; 1734 padding: 4px 2px; 1735 margin: 0px; 1736 border: none; 1737 } 1738 1739 .tabs-closebutton:-moz-lwtheme-brighttext { 1740 filter: invert(100%); 1741 } 1742 1743 .tabs-closebutton > .toolbarbutton-icon { 1744 margin-inline-end: 0px !important; 1745 padding-inline-end: 2px !important; 1746 padding-inline-start: 2px !important; 1747 } 1748 1749 toolbarbutton.chevron { 1750 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important; 1751 } 1752 1753 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon { 1754 -moz-transform: scaleX(-1); 1755 } 1756 1757 toolbarbutton.chevron > .toolbarbutton-text, 1758 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker { 1759 display: none; 1760 } 1761 1762 toolbarbutton.chevron > .toolbarbutton-icon { 1763 margin: 0; 1764 } 1765 1766 toolbar[mode="text"] toolbarbutton.chevron > .toolbarbutton-icon { 1767 display: -moz-box; 1768 } 1769 1770 #sidebar-throbber[loading="true"] { 1771 list-style-image: url("chrome://global/skin/icons/loading_16.png"); 1772 margin-inline-end: 4px; 1773 } 1774 1775 1776 #PlacesToolbarDropIndicator { 1777 list-style-image: url(chrome://browser/skin/places/toolbarDropMarker.png); 1778 } 1779 1780 toolbarbutton.bookmark-item[dragover="true"][open="true"] { 1781 -moz-appearance: none; 1782 background: Highlight !important; 1783 color: HighlightText !important; 1784 } 1785 1786 1787 .menupopup-drop-indicator-bar { 1788 position: relative; 1789 1790 margin-top: -1px; 1791 margin-bottom: -1px; 1792 } 1793 1794 .menupopup-drop-indicator { 1795 list-style-image: none; 1796 height: 2px; 1797 margin-inline-end: -4em; 1798 background-color: Highlight; 1799 } 1800 1801 /* ::::: Identity Indicator Styling ::::: */ 1802 1803 /* Popup Icons */ 1804 #identity-popup-icon { 1805 height: 32px; 1806 width: 32px; 1807 padding: 0; 1808 margin: 6px 6px 0 10px; 1809 list-style-image: url("chrome://browser/skin/identity-not-secure.svg"); 1810 } 1811 1812 #identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon { 1813 list-style-image: url("chrome://browser/skin/identity-domain-secure.svg"); 1814 } 1815 1816 #identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon { 1817 list-style-image: url("chrome://browser/skin/identity-secure.svg"); 1818 } 1819 1820 /* Popup Body Text */ 1821 .identity-popup-description { 1822 white-space: pre-wrap; 1823 padding-inline-start: 15px; 1824 margin: 2px 0 4px; 1825 } 1826 1827 .identity-popup-label { 1828 white-space: pre-wrap; 1829 padding-inline-start: 15px; 1830 margin: 0; 1831 } 1832 1833 #identity-popup-content-host, 1834 #identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner { 1835 font-size: 1.2em; 1836 } 1837 1838 #identity-popup-content-host { 1839 margin-top: 3px; 1840 margin-bottom: 5px; 1841 font-weight: bold; 1842 max-width: 300px; 1843 } 1844 1845 #identity-popup-content-owner { 1846 margin-top: 4px; 1847 margin-bottom: 0 !important; 1848 font-weight: bold; 1849 max-width: 300px; 1850 } 1851 1852 .verifiedDomain > #identity-popup-content-owner { 1853 font-weight: normal; 1854 } 1855 1856 #identity-popup-content-verifier { 1857 margin: 4px 0 2px; 1858 } 1859 1860 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption , 1861 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption { 1862 margin-top: 10px; 1863 margin-inline-start: -24px; 1864 } 1865 1866 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon , 1867 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon { 1868 padding: 12px; 1869 } 1870 1871 #identity-popup-help-icon { 1872 -moz-appearance: none; 1873 border: none; 1874 margin: 7px 0 0 -3px; 1875 background: none; 1876 min-width: 0; 1877 list-style-image: url("chrome://global/skin/icons/question-16.svg"); 1878 cursor: pointer; 1879 } 1880 1881 #identity-popup-help-icon > .button-box > .button-text { 1882 display: none; 1883 } 1884 1885 #identity-popup-help-icon > .button-box > .button-icon { 1886 height: 16px; 1887 width: 16px; 1888 } 1889 1890 #identity-popup-more-info-button { 1891 margin-top: 6px; 1892 margin-bottom: 0; 1893 margin-inline-end: 0; 1894 } 1895 1896 .popup-notification-icon { 1897 width: 64px; 1898 height: 64px; 1899 margin-inline-end: 10px; 1900 } 1901 1902 .popup-notification-icon[popupid="geolocation"] { 1903 list-style-image: url(chrome://browser/skin/Geolocation-16.svg); 1904 } 1905 1906 .popup-notification-icon[popupid="xpinstall-disabled"], 1907 .popup-notification-icon[popupid="addon-progress"], 1908 .popup-notification-icon[popupid="addon-install-cancelled"], 1909 .popup-notification-icon[popupid="addon-install-blocked"], 1910 .popup-notification-icon[popupid="addon-install-origin-blocked"], 1911 .popup-notification-icon[popupid="addon-install-failed"], 1912 .popup-notification-icon[popupid="addon-install-complete"] { 1913 list-style-image: url(chrome://mozapps/skin/extensions/addons.svg#extensionGeneric); 1914 width: 32px; 1915 height: 32px; 1916 } 1917 1918 .popup-notification-icon[popupid="addon-theme-change"] { 1919 list-style-image: url(chrome://mozapps/skin/extensions/addons.svg#themeGeneric); 1920 width: 32px; 1921 height: 32px; 1922 } 1923 1924 .popup-notification-icon[popupid="click-to-play-plugins"] { 1925 list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png); 1926 } 1927 1928 .popup-notification-icon[popupid="plugins-not-found"] { 1929 list-style-image: url(chrome://browser/skin/pluginInstall-64.png); 1930 } 1931 1932 .popup-notification-icon[popupid="web-notifications"] { 1933 list-style-image: url(chrome://global/skin/alerts/notification.svg); 1934 } 1935 1936 .addon-progress-description { 1937 width: 350px; 1938 max-width: 350px; 1939 } 1940 1941 .popup-progress-label, 1942 .popup-progress-meter { 1943 margin-inline-start: 0; 1944 margin-inline-end: 0; 1945 } 1946 1947 .popup-progress-cancel { 1948 -moz-appearance: none; 1949 background: transparent; 1950 border: none; 1951 padding: 0; 1952 margin: 0; 1953 min-height: 0; 1954 min-width: 0; 1955 list-style-image: url(chrome://mozapps/skin/downloads/downloadButtons.png); 1956 -moz-image-region: rect(0px, 32px, 16px, 16px); 1957 } 1958 1959 .popup-progress-cancel:hover { 1960 -moz-image-region: rect(16px, 32px, 32px, 16px); 1961 } 1962 1963 .popup-progress-cancel:active { 1964 -moz-image-region: rect(32px, 32px, 48px, 16px); 1965 } 1966 1967 .popup-notification-icon[popupid="indexedDB-permissions-prompt"], 1968 .popup-notification-icon[popupid="indexedDB-quota-prompt"], 1969 .popup-notification-icon[popupid*="offline-app-requested"], 1970 .popup-notification-icon[popupid="offline-app-usage"] { 1971 list-style-image: url("chrome://global/skin/icons/question-16.svg"); 1972 } 1973 1974 .popup-notification-icon[popupid="password-save"], 1975 .popup-notification-icon[popupid="password-change"], 1976 .popup-notification-icon[popupid="password"] { 1977 list-style-image: url(chrome://mozapps/skin/passwordmgr/key.svg#large); 1978 } 1979 1980 .popup-notification-icon[popupid="webapps-install"] { 1981 list-style-image: url(chrome://global/skin/icons/webapps-64.png); 1982 } 1983 1984 .popup-notification-icon[popupid="mixed-content-blocked"] { 1985 list-style-image: url(chrome://browser/skin/mixed-content-blocked.svg); 1986 } 1987 1988 .popup-notification-icon[popupid="webRTC-sharingDevices"], 1989 .popup-notification-icon[popupid="webRTC-shareDevices"] { 1990 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64.png); 1991 } 1992 1993 .popup-notification-icon[popupid="pointerLock"] { 1994 list-style-image: url(chrome://browser/skin/pointer-lock.svg); 1995 } 1996 1997 1998 #notification-popup-box { 1999 position: relative; 2000 2001 background-clip: padding-box; 2002 padding-left: 3px; 2003 padding-right: 2px; 2004 border-radius: 2.5px 0 0 2.5px; 2005 border-width: 0 8px 0 0; 2006 border-style: solid; 2007 -moz-border-image: url("chrome://browser/skin/urlbar-arrow.svg") 0 8 0 0 / 0 8px 0 0; 2008 margin-inline-end: -8px; 2009 margin-top: -2px; 2010 margin-bottom: -2px; 2011 } 2012 2013 #notification-popup-box:-moz-locale-dir(rtl), 2014 .notification-anchor-icon:-moz-locale-dir(rtl) { 2015 transform: scaleX(-1); 2016 } 2017 2018 .notification-anchor-icon { 2019 width: 16px; 2020 height: 16px; 2021 margin: 0 2px; 2022 } 2023 2024 .notification-anchor-icon:-moz-focusring { 2025 outline: 1px dotted -moz-DialogText; 2026 outline-offset: -3px; 2027 } 2028 2029 .default-notification-icon, 2030 #default-notification-icon { 2031 list-style-image: url(chrome://global/skin/icons/information-16.svg); 2032 } 2033 2034 .identity-notification-icon, 2035 #identity-notification-icon { 2036 list-style-image: url(chrome://mozapps/skin/profile/profileicon.png); 2037 } 2038 2039 .geo-notification-icon, 2040 #geo-notification-icon { 2041 list-style-image: url(chrome://browser/skin/Geolocation-16.svg); 2042 } 2043 2044 #addons-notification-icon { 2045 list-style-image: url(chrome://mozapps/skin/extensions/addons.svg#extensionGeneric); 2046 filter: grayscale(100%); 2047 } 2048 2049 .indexedDB-notification-icon, 2050 #indexedDB-notification-icon { 2051 list-style-image: url(chrome://global/skin/icons/question-16.svg); 2052 } 2053 2054 #password-notification-icon { 2055 list-style-image: url(chrome://mozapps/skin/passwordmgr/key.svg); 2056 } 2057 2058 #webapps-notification-icon { 2059 list-style-image: url(chrome://global/skin/icons/webapps-16.png); 2060 } 2061 2062 #plugins-notification-icon { 2063 list-style-image: url(chrome://browser/skin/notification-pluginNormal.png); 2064 } 2065 2066 #alert-plugins-notification-icon { 2067 list-style-image: url(chrome://browser/skin/notification-pluginAlert.png); 2068 } 2069 2070 #blocked-plugins-notification-icon { 2071 list-style-image: url(chrome://browser/skin/notification-pluginBlocked.png); 2072 } 2073 2074 #plugins-notification-icon, 2075 #alert-plugins-notification-icon, 2076 #blocked-plugins-notification-icon { 2077 -moz-image-region: rect(0, 16px, 16px, 0); 2078 } 2079 2080 #plugins-notification-icon:hover, 2081 #alert-plugins-notification-icon:hover, 2082 #blocked-plugins-notification-icon:hover { 2083 -moz-image-region: rect(0, 32px, 16px, 16px); 2084 } 2085 2086 #plugins-notification-icon:active, 2087 #alert-plugins-notification-icon:active, 2088 #blocked-plugins-notification-icon:active { 2089 -moz-image-region: rect(0, 48px, 16px, 32px); 2090 } 2091 2092 #plugin-install-notification-icon { 2093 list-style-image: url(chrome://browser/skin/pluginInstall-16.png); 2094 } 2095 2096 #notification-popup-box[hidden] { 2097 display: -moz-box; 2098 visibility: collapse; 2099 } 2100 2101 #blocked-plugins-notification-icon[showing] { 2102 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both; 2103 } 2104 2105 @keyframes pluginBlockedNotification { 2106 from { 2107 opacity: 0; 2108 } 2109 to { 2110 opacity: 1; 2111 } 2112 } 2113 2114 .mixed-content-blocked-notification-icon, 2115 #mixed-content-blocked-notification-icon { 2116 list-style-image: url(chrome://browser/skin/mixed-content-blocked.svg); 2117 } 2118 2119 .webRTC-shareDevices-notification-icon, 2120 #webRTC-shareDevices-notification-icon { 2121 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16.png); 2122 } 2123 2124 .webRTC-sharingDevices-notification-icon, 2125 #webRTC-sharingDevices-notification-icon { 2126 list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16.png); 2127 } 2128 2129 .web-notifications-notification-icon, 2130 #web-notifications-notification-icon { 2131 list-style-image: url(chrome://browser/skin/notification-16.svg); 2132 } 2133 2134 #pointerLock-notification-icon { 2135 list-style-image: url(chrome://browser/skin/pointer-lock.svg); 2136 } 2137 #pointerLock-cancel { 2138 margin: 0px; 2139 } 2140 2141 #identity-popup-container { 2142 min-width: 280px; 2143 } 2144 2145 2146 #appmenu_subscribeToPage:not([disabled]), 2147 #appmenu_subscribeToPageMenu, 2148 #subscribeToPageMenuitem:not([disabled]), 2149 #subscribeToPageMenupopup, 2150 #BMB_subscribeToPageMenuitem:not([disabled]), 2151 #BMB_subscribeToPageMenupopup { 2152 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.svg"); 2153 } 2154 2155 #bookmarksToolbarFolderMenu, 2156 #appmenu_bookmarksToolbar, 2157 #BMB_bookmarksToolbar { 2158 list-style-image: url("chrome://browser/skin/places/places.svg"); 2159 -moz-image-region: rect(2px, 138px, 18px, 122px); 2160 } 2161 2162 #appmenu_unsortedBookmarks, 2163 #BMB_unsortedBookmarks { 2164 list-style-image: url("chrome://browser/skin/places/places.svg"); 2165 -moz-image-region: rect(2px, 178px, 18px, 162px); 2166 } 2167 2168 /* ::::: Keyboard UI Panel ::::: */ 2169 2170 .KUI-panel { 2171 -moz-appearance: none; 2172 background: rgba(0%,0%,0%,.9) url(chrome://browser/skin/KUI-background.png) repeat-x; 2173 color: white; 2174 border-style: none; 2175 border-radius: 20px; 2176 } 2177 2178 .KUI-panel[level="top"] { 2179 background-color: rgba(0%,0%,0%,.65); 2180 } 2181 2182 .KUI-panel-closebutton { 2183 list-style-image: url(chrome://browser/skin/KUI-close.png); 2184 -moz-appearance: none; 2185 border: none; 2186 padding: 0; 2187 width: 24px; 2188 height: 24px; 2189 } 2190 2191 .KUI-panel-closebutton:not(:hover) { 2192 opacity: .6; 2193 } 2194 2195 .KUI-panel-closebutton > .toolbarbutton-icon { 2196 margin: 0; 2197 } 2198 2199 /* ::::: Ctrl-Tab and All Tabs Panels ::::: */ 2200 2201 2202 2203 #ctrlTab-panel { 2204 padding: 20px 10px 10px; 2205 font-weight: bold; 2206 background: #181411; 2207 color: #bfbbb6; 2208 } 2209 2210 .ctrlTab-favicon[src] { 2211 background-color: #181411; 2212 width: 20px; 2213 height: 20px; 2214 padding: 2px; 2215 } 2216 2217 .ctrlTab-preview-inner > .tabPreview-canvas { 2218 box-shadow: 1px 1px 2px rgb(12%,12%,12%); 2219 } 2220 2221 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas { 2222 margin-bottom: 2px; 2223 } 2224 2225 .ctrlTab-preview-inner { 2226 padding-bottom: 10px; 2227 } 2228 2229 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner { 2230 padding: 10px; 2231 background-color: rgba(255,255,255,.2); 2232 border-radius: .5em; 2233 } 2234 2235 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner { 2236 color: white; 2237 background-color: rgba(0,0,0,.6); 2238 text-shadow: none; 2239 padding: 8px; 2240 border: 2px solid white; 2241 border-radius: .5em; 2242 } 2243 2244 .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner { 2245 margin: -10px -10px 0; 2246 } 2247 2248 #ctrlTab-showAll { 2249 margin-top: .5em; 2250 } 2251 2252 #allTabs-panel { 2253 padding-bottom: 10px; 2254 -moz-appearance: none; 2255 border: none; 2256 background: #181411; 2257 color: #bfbbb6; 2258 } 2259 2260 #allTabs-meta { 2261 margin: 10px; 2262 } 2263 2264 #allTabs-filter { 2265 margin-inline-start: 24px; 2266 margin-inline-end: 0; 2267 } 2268 2269 #allTabs-tab-close-button > .toolbarbutton-icon { 2270 margin: 0; 2271 } 2272 2273 .allTabs-favicon[src] { 2274 background-color: #181411; 2275 width: 22px; 2276 height: 22px; 2277 padding-top: 1px; 2278 padding-bottom: 5px; 2279 padding-inline-start: 1px; 2280 padding-inline-end: 5px; 2281 margin-top: -2px; 2282 margin-inline-start: -2px; 2283 border-bottom-right-radius: 4px; 2284 } 2285 2286 .allTabs-favicon[src]:-moz-locale-dir(rtl) { 2287 border-bottom-right-radius: 0; 2288 border-bottom-left-radius: 4px; 2289 } 2290 2291 .allTabs-preview { 2292 text-shadow: none; 2293 } 2294 2295 .allTabs-preview-inner > .tabPreview-canvas { 2296 background-color: rgb(0%,0%,0%); 2297 box-shadow: 0 0 1.5px ThreeDShadow; 2298 } 2299 2300 .allTabs-preview:not(:hover):not([closebuttonhover]) > html|canvas { 2301 opacity: .8; 2302 } 2303 2304 .allTabs-preview:focus > * > .allTabs-preview-inner { 2305 outline: 1px dotted -moz-dialogText; 2306 } 2307 2308 #allTabs-tab-close-button { 2309 background: #181411; 2310 border-bottom-left-radius: 4px; 2311 padding: 2px 1px; 2312 } 2313 2314 #addon-bar, 2315 #FindToolbar { 2316 min-height: 20px; 2317 border: solid rgb(75,75,75) !important; 2318 border-width: 1px 0 0 0 !important; 2319 } 2320 2321 #addon-bar:not(:-moz-lwtheme), 2322 #FindToolbar:not(:-moz-lwtheme) { 2323 -moz-appearance: none; 2324 color: #bfbbb6; 2325 } 2326 2327 #status-bar { 2328 -moz-appearance: none; 2329 background-color: transparent; 2330 border: none; 2331 min-height: 0; 2332 } 2333 2334 #status-bar > statusbarpanel { 2335 border-width: 0; 2336 -moz-appearance: none; 2337 } 2338 2339 #addonbar-closebutton { 2340 border: none; 2341 padding: 0 5px; 2342 -moz-appearance: none; 2343 } 2344 2345 #addonbar-closebutton:-moz-lwtheme-brighttext { 2346 filter: invert(100%); 2347 } 2348 2349 toolbar[mode="text"] #addonbar-closebutton { 2350 padding: 0 0 0 5px; 2351 margin-left: 0px; 2352 margin-right: -5px; 2353 } 2354 2355 toolbar[mode="text"] #addonbar-closebutton > .toolbarbutton-icon { 2356 display: -moz-box; 2357 } 2358 2359 .statuspanel-label { 2360 margin: 0; 2361 padding: 2px 4px; 2362 background: linear-gradient(white, #ddd); 2363 border: 1px none #ccc; 2364 border-top-style: solid; 2365 color: #333; 2366 text-shadow: none; 2367 } 2368 2369 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]), 2370 .statuspanel-label:-moz-locale-dir(rtl)[mirror] { 2371 border-right-style: solid; 2372 margin-right: 1em; 2373 } 2374 2375 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]), 2376 .statuspanel-label:-moz-locale-dir(ltr)[mirror] { 2377 border-left-style: solid; 2378 margin-left: 1em; 2379 } 2380 2381 #full-screen-warning-message { 2382 background-color: hsl(0,0%,15%); 2383 color: white; 2384 border-radius: 8px; 2385 margin-top: 30px; 2386 padding: 30px 50px; 2387 box-shadow: 0 0 2px white; 2388 } 2389 2390 #full-screen-warning-container[obscure-browser] { 2391 background-color: rgba(0,0,0,0.3); 2392 } 2393 2394 .full-screen-description { 2395 font-size: 150%; 2396 } 2397 2398 #full-screen-domain-text { 2399 font-size: 300%; 2400 } 2401 2402 .full-screen-approval-button, 2403 #full-screen-remember-decision { 2404 font-size: 120%; 2405 } 2406 2407 /* Click-to-play plugins */ 2408 2409 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent { 2410 padding: 0px; 2411 } 2412 2413 .click-to-play-plugins-notification-content { 2414 width: 28em; 2415 } 2416 2417 .click-to-play-plugins-notification-center-box { 2418 border: 1px solid ThreeDShadow; 2419 margin: 10px; 2420 } 2421 2422 .plugin-popupnotification-centeritem:nth-child(odd) { 2423 background-color: rgba(0,0,0,0.1); 2424 } 2425 2426 .center-item-label { 2427 margin-inline-start: 6px; 2428 margin-bottom: 0; 2429 text-overflow: ellipsis; 2430 } 2431 2432 .center-item-warning-icon { 2433 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png"); 2434 background-repeat: no-repeat; 2435 width: 16px; 2436 height: 15px; 2437 margin-inline-start: 6px; 2438 } 2439 2440 .click-to-play-plugins-notification-button-container { 2441 background: linear-gradient(rgba(0,0,0,0.04) 60%, transparent); 2442 padding: 10px; 2443 margin-top: 5px; 2444 } 2445 2446 .click-to-play-popup-button { 2447 width: 50%; 2448 } 2449 2450 .click-to-play-plugins-notification-description-box { 2451 padding: 10px; 2452 } 2453 2454 .click-to-play-plugins-outer-description { 2455 margin-top: 8px; 2456 } 2457 2458 .click-to-play-plugins-notification-link, 2459 .center-item-link { 2460 margin: 0; 2461 } 2462 2463 /* Badge toolbar item */ 2464 2465 .toolbarbutton-badge-container, 2466 .toolbarbutton-badge-stack { 2467 margin: 0; 2468 padding: 0; 2469 position: relative; 2470 } 2471 2472 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-container, 2473 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack { 2474 padding: 2px 5px; 2475 } 2476 2477 .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbar-icon, 2478 .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbar-icon { 2479 position: absolute; 2480 top: 2px; 2481 right: 2px; 2482 } 2483 2484 .toolbarbutton-badge-container > .toolbarbutton-icon[label]:not([label=""]), 2485 .toolbarbutton-badge-stack > .toolbarbutton-icon[label]:not([label=""]) { 2486 margin-inline-end: 0; 2487 } 2488 2489 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar *|* > .toolbarbutton-badge[badge]:not([badge=""])::after { 2490 top: 1px; 2491 right: 1px; 2492 } 2493 2494 .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after { 2495 left: 0; 2496 right: auto; 2497 } 2498 2499 #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar *|* > .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after { 2500 left: 1px; 2501 right: auto; 2502 } 2503 2504 #main-window[privatebrowsingmode=temporary] #toolbar-menubar { 2505 background-image: url("chrome://browser/skin/toolbar/private.svg"); 2506 background-size: auto 24px; 2507 background-position: top right; 2508 background-repeat: no-repeat; 2509 } 2510 2511 #main-window[privatebrowsingmode=temporary] #toolbar-menubar[brighttext] { 2512 background-image: url("chrome://browser/skin/toolbar/private.svg#darktext"); 2513 } 2514 2515 #main-window[privatebrowsingmode=temporary] #toolbar-menubar:-moz-locale-dir(rtl) { 2516 background-position: top left; 2517 } 2518 2519 #main-window[privatebrowsingmode=temporary] #appmenu-button > .button-box > .box-inherit > .button-icon { 2520 background-image: url("chrome://browser/skin/toolbar/private.svg#darktext"); 2521 background-repeat: no-repeat; 2522 width: 20px; 2523 height: 16px; 2524 margin: 0 6px 3px -6px; 2525 } 2526 2527 /* Pale Moon feed icon */ 2528 #ub-feed-button, 2529 #ub-feed-button > .button-box, 2530 #ub-feed-button:hover:active > .button-box { 2531 padding: 0px; 2532 margin: 0px; 2533 border: 0px; 2534 background-color: transparent !important; 2535 } 2536 2537 #ub-feed-button { 2538 -moz-appearance: none; 2539 min-width: 0px; 2540 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.svg"); 2541 } 2542 2543 /* "Tree Style Tab" fixes */ 2544 #TabsToolbar[treestyletab-mode=vertical]:not([treestyletab-style]) .tabs-newtab-button, 2545 #TabsToolbar[treestyletab-mode=vertical]:not([treestyletab-style]) #alltabs-button { 2546 background: var(--tab-background) !important; 2547 border-top: 1px solid var(--tab-border-color) !important; 2548 border-bottom: 1px solid var(--tab-border-color) !important; 2549 } 2550 2551 #TabsToolbar[treestyletab-mode=vertical]:not([treestyletab-style]) .tabs-newtab-button:hover, 2552 #TabsToolbar[treestyletab-mode=vertical]:not([treestyletab-style]) #alltabs-button:hover { 2553 background: var(--tab-hover-background) !important; 2554 border-top: 1px solid var(--tab-hover-border) !important; 2555 border-bottom: 1px solid var(--tab-hover-border) !important; 2556 } 2557 2558 #TabsToolbar[treestyletab-mode=vertical]:not([treestyletab-style]) #tabs-padlock-tbitem { 2559 border-top: 1px solid transparent !important; 2560 } 2561 2562 #main-window[treestyletab-mode=vertical]:not([treestyletab-style]) .treestyletab-tabbar-placeholder { 2563 background: #181411 !important; 2564 }