LCARStrek/browser/customizableui/panelUIOverlay.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 /* === BEGIN panelUIOverlay.inc.css === */
   6
   7 #PanelUI-popup #PanelUI-contents:empty {
   8   height: 128px;
   9 }
  10
  11 #PanelUI-popup #PanelUI-contents:empty::before {
  12   content: "";
  13   background-image: url("chrome://browser/skin/customizableui/whimsy-bw.png");
  14   display: block;
  15   width: 64px;
  16   height: 64px;
  17   position: absolute;
  18   transition: transform 1s ease-out;
  19   animation: whimsyMoveX 3.05s linear 0s infinite alternate,
  20              whimsyMoveY 3.4s linear 0s infinite alternate;
  21 }
  22
  23 #PanelUI-popup #PanelUI-contents:active:empty::before {
  24   animation: whimsyMoveX 3.05s linear 0s infinite alternate,
  25              whimsyMoveY 3.4s linear 0s infinite alternate,
  26              whimsyRotate 1s linear 0s infinite normal;
  27 }
  28
  29 #PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):empty::before {
  30   animation: whimsyMoveXRTL 3.05s linear 0s infinite alternate,
  31              whimsyMoveY 3.4s linear 0s infinite alternate;
  32 }
  33
  34 #PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):active:empty::before {
  35   animation: whimsyMoveXRTL 3.05s linear 0s infinite alternate,
  36              whimsyMoveY 3.4s linear 0s infinite alternate,
  37              whimsyRotate 1s linear 0s infinite normal;
  38 }
  39
  40 #PanelUI-popup #PanelUI-contents:empty:hover::before {
  41   background-image: url("chrome://browser/skin/customizableui/whimsy.png");
  42 }
  43
  44 @media (min-resolution: 2dppx) {
  45   #PanelUI-popup #PanelUI-contents:empty::before {
  46     background-image: url("chrome://browser/skin/customizableui/whimsy-bw@2x.png");
  47     background-size: 64px 64px;
  48   }
  49   #PanelUI-popup #PanelUI-contents:empty:hover::before {
  50     background-image: url("chrome://browser/skin/customizableui/whimsy@2x.png");
  51   }
  52 }
  53
  54 @keyframes whimsyMoveX {
  55   /* These values are adjusted for the padding on the panel. */
  56   from { margin-left: -9px; } to { margin-left: calc(100% - 55px); }
  57 }
  58
  59 @keyframes whimsyMoveXRTL {
  60   /* These values are adjusted for the padding on the panel. */
  61   from { margin-right: -9px; } to { margin-right: calc(100% - 55px); }
  62 }
  63
  64 @keyframes whimsyMoveY {
  65   /* These values are adjusted for the padding and height of the panel. */
  66   from { margin-top: -.5em; } to { margin-top: calc(64px - .5em); }
  67 }
  68
  69 @keyframes whimsyRotate {
  70   to { transform: perspective(5000px) rotateY(360deg); }
  71 }
  72
  73 #customization-panelHolder {
  74   border-radius: 4px;
  75 }
  76
  77 #PanelUI-button {
  78   -moz-margin-start: 3px;
  79 }
  80
  81 #PanelUI-button:-moz-locale-dir(rtl) {
  82 }
  83
  84 #PanelUI-menu-button[update-status="succeeded"] .toolbarbutton-badge::after {
  85   content: url(chrome://browser/skin/update-badge.svg);
  86   background-color: #008484;
  87   height: 10px;
  88 }
  89
  90 .panel-subviews {
  91   padding: 4px;
  92   -moz-margin-start: 38px;
  93 }
  94
  95 .panel-viewstack[viewtype="main"] > .panel-subviews {
  96   transform: translateX(22.35em);
  97 }
  98
  99 .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
 100   transform: translateX(-22.35em);
 101 }
 102
 103 panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
 104   display: none;
 105 }
 106
 107 .panel-viewstack:not([viewtype="main"]) > .panel-mainview > #PanelUI-mainView {
 108   -moz-box-flex: 1;
 109 }
 110
 111 .panel-subview-body {
 112   overflow-y: auto;
 113   overflow-x: hidden;
 114   -moz-box-flex: 1;
 115 }
 116
 117 #PanelUI-popup .panel-subview-body {
 118   margin: -4px;
 119   padding: 4px 4px;
 120 }
 121
 122 .panel-subview-header,
 123 .subviewbutton.panel-subview-footer {
 124   box-sizing: border-box;
 125 /*  min-height: 41px; */
 126   padding: 3px;
 127 }
 128
 129 .panel-subview-header {
 130   margin: 0 0 4px;
 131   background-color: #A09090;
 132   color: #000000;
 133   font-variant: small-caps;
 134   border-radius: 4px;
 135 }
 136
 137 .panel-subview-footer {
 138   border-top: 1px solid #A09090;
 139 }
 140
 141 .cui-widget-panelview .panel-subview-header {
 142   display: none;
 143 }
 144
 145 .cui-widget-panelview .subviewbutton.panel-subview-footer {
 146   margin: 4px 0 0;
 147   -moz-box-pack: center;
 148 }
 149
 150 #PanelUI-mainView {
 151   display: flex;
 152   flex-direction: column;
 153   border-radius: 4px;
 154 }
 155
 156 #app-extension-point-end > #PanelUI-menu-button {
 157   padding: 2px 5px;
 158 }
 159 #app-extension-point-end > #PanelUI-menu-button .toolbarbutton-text {
 160   display: none;
 161 }
 162 #app-extension-point-end > #PanelUI-menu-button .toolbarbutton-icon {
 163   margin: 0;
 164 }
 165
 166 #PanelUI-popup > arrowscrollbox > autorepeatbutton {
 167   display: none;
 168 }
 169 #PanelUI-popup > arrowscrollbox > scrollbox {
 170   overflow: visible;
 171 }
 172
 173 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent {
 174   overflow: hidden;
 175   padding: 0;
 176 }
 177
 178 #PanelUI-contents {
 179   padding: .5em 0;
 180 }
 181
 182 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
 183 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
 184 /*  line-height: 1.1;*/
 185   max-height: 2.2em;
 186 }
 187
 188 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
 189 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-multiline-text {
 190   -moz-hyphens: auto;
 191 }
 192
 193 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
 194 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-multiline-text {
 195   position: absolute;
 196   clip: rect(auto, auto, 2.3em, auto);
 197 }
 198
 199 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-text,
 200 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
 201   text-align: center;
 202   /* Need to override toolkit theming which sets margin: 0 !important; */
 203   margin: 2px 0 0 !important;
 204 }
 205
 206 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
 207   text-align: center;
 208   margin: -1px 0 0;
 209 }
 210
 211 #wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls,
 212 #wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls {
 213   -moz-margin-start: 0;
 214 }
 215
 216 #PanelUI-contents {
 217   max-width: 22.35em;
 218 }
 219
 220 #BMB_bookmarksPopup,
 221 .panel-mainview:not([panelid="PanelUI-popup"]) {
 222   max-width: 30em;
 223 }
 224
 225 panelview:not([mainview]) .toolbarbutton-text,
 226 .cui-widget-panel toolbarbutton > .toolbarbutton-text {
 227   text-align: start;
 228   display: -moz-box;
 229 }
 230
 231 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent {
 232   padding: 0;
 233 }
 234
 235 .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {
 236   padding-bottom: 0;
 237 }
 238
 239 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):first-child {
 240   border-radius: 4px 4px 0 0;
 241 }
 242
 243 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):last-child {
 244   border-radius: 0 0 4px 4px;
 245 }
 246
 247 #PanelUI-contents {
 248   display: block;
 249   flex: 1 0 auto;
 250   margin-left: auto;
 251   margin-right: auto;
 252   max-width: 22.35em;
 253 }
 254
 255 #PanelUI-contents-scroller {
 256   overflow-y: auto;
 257   overflow-x: hidden;
 258   width: 22.35em;
 259   flex: auto;
 260 }
 261
 262 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon {
 263   min-width: 0;
 264   min-height: 0;
 265   margin: 0;
 266 }
 267
 268 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
 269 .panelUI-grid .toolbarbutton-1,
 270 .panel-customization-placeholder-child {
 271   -moz-appearance: none;
 272   -moz-box-orient: vertical;
 273   width: calc(22.35em / 3 - 0.1px - 2px); /* LCARStrek: XXX: found out to be needed to fit the icons */
 274   height: calc(51px + 2.2em);
 275 }
 276
 277 /* In order to have button labels constrained appropriately, items inside the toolbarpaletteitem
 278  * should have a min-width set so they abide by the width set above (which they do outside of
 279  * customize mode because they're in a flexed container) */
 280 toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 {
 281   min-width: 0.01px;
 282 }
 283
 284 /* Help SDK buttons fit in. */
 285 toolbarpaletteitem[place="palette"] > toolbarbutton[sdk-button="true"] > .toolbarbutton-icon,
 286 toolbarbutton[sdk-button="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon {
 287   height: 32px;
 288   width: 32px;
 289 }
 290
 291 .customization-palette .toolbarbutton-1 {
 292   -moz-appearance: none;
 293   -moz-box-orient: vertical;
 294 }
 295
 296 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
 297   -moz-appearance: none;
 298   -moz-box-orient: vertical;
 299   width: calc(22.35em / 3 - 0.1px - 2px);
 300   height: calc(49px + 2.2em);
 301   border: 0;
 302 }
 303
 304 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text,
 305 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
 306   margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */
 307 }
 308
 309 .panel-customization-placeholder-child {
 310   margin: 6px 0 0;
 311 /*  padding: 2px 6px;*/
 312 }
 313
 314 .panelUI-grid .toolbarbutton-1[type="menu"] {
 315   background-image: url("chrome://global/skin/arrow/arrow-down-sharp.gif");
 316   background-position: right 3px top 16px;
 317   background-repeat: no-repeat;
 318 }
 319
 320 .panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) {
 321   background-position: left 3px top 16px;
 322 }
 323
 324 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
 325   display: none;
 326 }
 327
 328 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
 329   -moz-box-align: center;
 330   width: 16px;
 331   -moz-margin-start: -16px;
 332   height: 51px;
 333   margin-bottom: 2.2em;
 334   padding: 0;
 335 }
 336
 337 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active) > .toolbarbutton-menubutton-dropmarker {
 338   border-radius: 0 0 0 2px;
 339 }
 340
 341 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active)> .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
 342   border-radius: 0 0 2px 0;
 343 }
 344
 345 #main-window:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon {
 346 /*  opacity: .5; */
 347 }
 348
 349 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
 350   width: calc(22.35em / 3 - 0.1px);
 351   margin: 0 !important;
 352 }
 353
 354 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
 355   -moz-box-align: center;
 356   -moz-box-pack: center;
 357 }
 358
 359 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
 360   margin: 4px auto;
 361 }
 362
 363 #PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview >  #PanelUI-mainView {
 364 }
 365
 366 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item,
 367 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]),
 368 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-fxa-status,
 369 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-update-status,
 370 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator,
 371 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize,
 372 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) {
 373   opacity: .5;
 374 }
 375
 376 /*
 377  * XXXgijs: this is a workaround for a layout issue that was caused by these iframes,
 378  * which was affecting subview display. Because of this, we're hiding the iframe *only*
 379  * when displaying a subview. The discerning user might notice this, but it's not nearly
 380  * as bad as the brokenness.
 381  * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375
 382  * is addressed.
 383  */
 384 #PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe {
 385   visibility: hidden;
 386 }
 387
 388 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
 389   text-align: center;
 390 }
 391
 392 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
 393 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
 394 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container,
 395 .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
 396 .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
 397 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-container,
 398 .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
 399 .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
 400 .panel-customization-placeholder-child > .toolbarbutton-icon {
 401   min-width: 32px;
 402   min-height: 32px;
 403   /* Explanation for the below formula (A / B - C)
 404      A
 405        Each button is 22.35em / 3 - 0.1px wide
 406      B
 407        Each button has two margins.
 408      C (44px / 2 = 22px)
 409        The button icon is 32 pixels wide.
 410        The button has 12px of horizontal padding (6 on each side).
 411        The button has 0px of horizontal border (0 on each side).
 412        Total width of button's icon + button padding should therefore be 44px,
 413        which means each horizontal margin should be the half the button's width - (44/2) px.
 414   */
 415   margin: 4px calc((22.35em / 3 - 0.1px) / 2 - 22px);
 416 }
 417
 418 /* above we treat the container as the icon for the margins, that is so the
 419 /* badge itself is positioned correctly. Here we make sure that the icon itself
 420 /* has the minum size we want, but no padding/margin. */
 421 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon {
 422   min-width: 32px;
 423   min-height: 32px;
 424   margin: 0;
 425   padding: 0;
 426 }
 427
 428 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
 429   -moz-box-flex: 1;
 430 }
 431
 432 #personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {
 433   -moz-box-flex: 1;
 434 }
 435
 436 #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
 437   -moz-margin-end: 2px;
 438 }
 439
 440 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
 441 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
 442   border-left: none;
 443   border-right: none;
 444   border-radius: 0;
 445 }
 446
 447 #zoom-in-button > .toolbarbutton-text,
 448 #zoom-out-button > .toolbarbutton-text,
 449 #zoom-reset-button > .toolbarbutton-icon {
 450   display: none;
 451 }
 452
 453 #PanelUI-footer {
 454   display: flex;
 455   flex-shrink: 0;
 456   flex-direction: column;
 457 /*  background-color: hsla(210,4%,10%,.07);*/
 458   padding: 0;
 459   margin: 0;
 460 /*  min-height: 4em;*/
 461   border-bottom-right-radius: 4px;
 462   border-bottom-left-radius: 4px;
 463 }
 464
 465 #PanelUI-footer-inner {
 466   display: flex;
 467   border-top: 1px solid #9C9CFF;
 468 }
 469
 470 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner {
 471   position: relative;
 472 }
 473
 474 #PanelUI-footer-inner > toolbarseparator {
 475   border: 0;
 476   border-left: 1px solid #9C9CFF;
 477   margin: 0;
 478 }
 479
 480 #PanelUI-footer-inner:hover > toolbarseparator {
 481 /*  margin: 0;*/
 482 }
 483
 484 #PanelUI-update-status,
 485 #PanelUI-help,
 486 #PanelUI-fxa-status,
 487 #PanelUI-customize,
 488 #PanelUI-quit {
 489   margin: 0;
 490   padding: 11px 0;
 491   box-sizing: border-box;
 492   min-height: 40px;
 493   box-shadow: none;
 494   border: none;
 495   border-radius: 0;
 496   transition: background-color;
 497   -moz-box-orient: horizontal;
 498 }
 499
 500 #PanelUI-update-status,
 501 #PanelUI-fxa-status {
 502   border-top: 1px solid #9C9CFF;
 503   border-bottom: 1px solid transparent;
 504   margin-bottom: -1px;
 505 }
 506
 507 #PanelUI-update-status > .toolbarbutton-text,
 508 #PanelUI-fxa-status > .toolbarbutton-text {
 509   width: 0; /* Fancy cropping solution for flexbox. */
 510 }
 511
 512 #PanelUI-help[panel-multiview-anchor="true"] {
 513   -moz-image-region: rect(0, 32px, 16px, 16px);
 514 }
 515
 516 #PanelUI-help,
 517 #PanelUI-quit {
 518   min-width: 44px;
 519 }
 520
 521 #PanelUI-update-status > .toolbarbutton-text,
 522 #PanelUI-fxa-status > .toolbarbutton-text,
 523 #PanelUI-customize > .toolbarbutton-text {
 524   margin: 0;
 525   padding: 0 6px;
 526   text-align: start;
 527 }
 528
 529 #PanelUI-help > .toolbarbutton-text,
 530 #PanelUI-quit > .toolbarbutton-text {
 531   display: none;
 532 }
 533
 534 #PanelUI-update-status > .toolbarbutton-icon,
 535 #PanelUI-fxa-status > .toolbarbutton-icon,
 536 #PanelUI-customize > .toolbarbutton-icon,
 537 #PanelUI-help > .toolbarbutton-icon,
 538 #PanelUI-quit > .toolbarbutton-icon {
 539   -moz-margin-end: 0;
 540 }
 541
 542 #PanelUI-customize {
 543   flex: 1;
 544   -moz-padding-start: 15px;
 545   -moz-border-start-style: none;
 546 }
 547
 548 #PanelUI-update-status {
 549   width: calc(22.35em + 30px);
 550   -moz-padding-start: 15px;
 551   -moz-border-start-style: none;
 552 }
 553
 554 #PanelUI-update-status {
 555   list-style-image: url(chrome://branding/content/icon16.png);
 556 }
 557
 558 #PanelUI-fxa-status {
 559   -moz-padding-start: 15px;
 560   list-style-image: url("chrome://browser/skin/syncFx-horizontalbar.png");
 561 }
 562
 563 #PanelUI-fxa-status[syncstatus="active"] {
 564   list-style-image: url("chrome://browser/skin/syncFxProgress-horizontalbar.png");
 565 }
 566
 567 #PanelUI-fxa-status[fxastatus="migrate-signup"],
 568 #PanelUI-fxa-status[fxastatus="migrate-verify"] {
 569   list-style-image: url(chrome://global/skin/warning-16.png);
 570 }
 571
 572 #PanelUI-customize {
 573   list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
 574 }
 575
 576 #customization-panelHolder #PanelUI-customize {
 577   list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
 578 }
 579
 580 #PanelUI-help {
 581   list-style-image: url("chrome://browser/skin/menuPanel-help.png");
 582 }
 583
 584 #PanelUI-quit {
 585   -moz-border-end-style: none;
 586   list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
 587 }
 588
 589 #PanelUI-fxa-status,
 590 #PanelUI-customize,
 591 #PanelUI-help,
 592 #PanelUI-quit {
 593   -moz-image-region: rect(0, 16px, 16px, 0);
 594 }
 595
 596 #PanelUI-customize:hover,
 597 #PanelUI-help:not([disabled]):hover,
 598 #PanelUI-quit:not([disabled]):hover,
 599 #PanelUI-customize:hover:active,
 600 #PanelUI-help:not([disabled]):hover:active,
 601 #PanelUI-quit:not([disabled]):hover:active {
 602   -moz-image-region: rect(0, 32px, 16px, 16px);
 603 }
 604
 605 #PanelUI-help[disabled],
 606 #PanelUI-quit[disabled] {
 607   -moz-image-region: rect(0, 48px, 16px, 32px);
 608 }
 609
 610 #PanelUI-fxa-status:not([disabled]):hover,
 611 #PanelUI-help:not([disabled]):hover,
 612 #PanelUI-customize:hover,
 613 #PanelUI-quit:not([disabled]):hover {
 614 }
 615
 616 #PanelUI-fxa-status:not([disabled]):hover:active,
 617 #PanelUI-help:not([disabled]):hover:active,
 618 #PanelUI-customize:hover:active,
 619 #PanelUI-quit:not([disabled]):hover:active {
 620 }
 621
 622 #PanelUI-fxa-status:not([disabled]):hover,
 623 #PanelUI-fxa-status:not([disabled]):hover:active {
 624 }
 625
 626 #PanelUI-update-status {
 627 /*  color: black; */
 628 }
 629
 630 #PanelUI-update-status[update-status="succeeded"] {
 631   background-color: #008484;
 632   color: #000000;
 633 }
 634
 635 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover {
 636   background-color: #FFCF00;
 637 }
 638
 639 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover:active {
 640   background-color: #FF9F00;
 641 }
 642
 643 #PanelUI-update-status[update-status="failed"] {
 644   background-color: #FF0000;
 645   color: #000000;
 646 }
 647
 648 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover {
 649   background-color: #FFCF00;
 650 }
 651
 652 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover:active {
 653   background-color: #FF9F00;
 654 }
 655
 656 #PanelUI-quit:not([disabled]):hover {
 657   background-color: #FF0000;
 658 }
 659
 660 #PanelUI-quit:not([disabled]):hover:active {
 661   background-color: #FF9F00;
 662 }
 663
 664 #customization-panelHolder #PanelUI-customize {
 665   color: #FFCF00;
 666   background-color: #008484;
 667   text-shadow: none;
 668   margin-top: -1px;
 669 }
 670
 671 #customization-panelHolder #PanelUI-customize + toolbarseparator {
 672   display: none;
 673 }
 674
 675 #customization-panelHolder #PanelUI-customize:hover,
 676 #customization-panelHolder #PanelUI-customize:hover:active {
 677   background-color: #FFCF00;
 678   color: #000000;
 679 }
 680
 681 #customization-palette .toolbarbutton-multiline-text,
 682 #customization-palette .toolbarbutton-text {
 683   display: none;
 684 }
 685
 686 panelview .toolbarbutton-1,
 687 .subviewbutton,
 688 .widget-overflow-list .toolbarbutton-1,
 689 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
 690 .share-provider-button,
 691 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
 692 /*  padding: 0 6px;
 693   background-color: hsla(210,4%,10%,0);
 694   border-radius: 2px;
 695   border-style: solid;
 696   border-color: hsla(210,4%,10%,0);*/
 697 }
 698
 699 panelview .toolbarbutton-1,
 700 .subviewbutton,
 701 .widget-overflow-list .toolbarbutton-1,
 702 .share-provider-button,
 703 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
 704   border-width: 0;
 705 }
 706
 707 .subviewbutton.panel-subview-footer {
 708 /*  border-radius: 0; */
 709   margin: 2px 0 0;
 710 }
 711
 712 .subviewbutton.panel-subview-footer > .menu-text {
 713   -moz-margin-start: 0px !important;
 714   -moz-padding-start: 6px;
 715   -moz-padding-end: 6px;
 716   -moz-box-flex: 0;
 717   text-align: center;
 718 }
 719
 720 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
 721   margin: 0;
 722 }
 723
 724 .subviewbutton.panel-subview-footer > .toolbarbutton-text {
 725   text-align: center;
 726   padding: 0;
 727 }
 728
 729 .subviewbutton.panel-subview-footer > .menu-accel-container {
 730   -moz-padding-start: 6px;
 731 }
 732
 733 .subviewbutton:not(.panel-subview-footer) {
 734   margin: 0;
 735 }
 736
 737 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
 738 /* Bookmark items need a more specific selector. */
 739 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
 740 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
 741 /*  font: menu;*/
 742 }
 743
 744 .PanelUI-subView .subviewbutton[shortcut]::after {
 745   content: attr(shortcut);
 746   float: right;
 747   color: #A09090;
 748 }
 749
 750 .PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
 751   -moz-margin-start: 10px;
 752 }
 753
 754 /* This is a <label> but it should fit in with the menu font- and colorwise. */
 755 #PanelUI-characterEncodingView-autodetect-label {
 756   font: menu;
 757   color: inherit;
 758 }
 759
 760 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
 761 /*  margin-left: 4px;
 762   margin-right: 4px;*/
 763 }
 764
 765 panelview .toolbarbutton-1,
 766 .widget-overflow-list .toolbarbutton-1 {
 767   margin-top: 6px;
 768 }
 769
 770 /*
 771 panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
 772 toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover,
 773 menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
 774 menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
 775 .share-provider-button:not(:-moz-any([disabled],[open],:active)):hover,
 776 .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
 777 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
 778     > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
 779   background-color: hsla(210,4%,10%,.08);
 780   border-color: hsla(210,4%,10%,.11);
 781 }
 782
 783 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[open],:active)):hover {
 784   border-color: hsla(210,4%,10%,.11);
 785 }
 786
 787 panelview .toolbarbutton-1:-moz-any(:not([disabled]):-moz-any([open],:hover:active),[checked=true]),
 788 toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],:hover:active),
 789 menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
 790 menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
 791 .share-provider-button:not([disabled]):-moz-any([open],:hover:active),
 792 .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active),
 793 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
 794     > toolbarbutton:not([disabled]):-moz-any([open],:hover:active) {
 795   background-color: hsla(210,4%,10%,.12);
 796   border-color: hsla(210,4%,10%,.14);
 797   box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
 798 }
 799
 800 .subviewbutton.panel-subview-footer {
 801   margin: 4px -4px -4px;
 802   background-color: hsla(210,4%,10%,.07);
 803   border-top: 1px solid hsla(210,4%,10%,.12);
 804   border-radius: 0;
 805   color: hsl(0,0%,25%)
 806 }
 807
 808 menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
 809 .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
 810   background-color: hsla(210,4%,10%,.1);
 811   border-top: 1px solid hsla(210,4%,10%,.12);
 812 }
 813
 814 menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active),
 815 .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active) {
 816   background-color: hsla(210,4%,10%,.15);
 817   border-top: 1px solid hsla(210,4%,10%,.12);
 818   box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
 819 }
 820
 821 #BMB_bookmarksPopup .subviewbutton {
 822   font: menu;
 823   font-weight: normal;
 824 }
 825
 826 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
 827   color: inherit;
 828 }
 829
 830 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
 831 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
 832   -moz-appearance: none;
 833   margin-top: 0;
 834   margin-bottom: 0;
 835 }
 836
 837 / Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
 838 #BMB_bookmarksPopup arrowscrollbox {
 839   padding-bottom: 0px;
 840 }
 841
 842 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
 843   / Hide bottom separator as the styled footer includes a top border serving the same purpose /
 844   display: none;
 845 }
 846
 847 / Popups with only one item don't have a footer /
 848 #BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
 849 / These popups never have a footer /
 850 #BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
 851 #BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
 852   / And so they need some bottom padding: /
 853   padding-bottom: 4px;
 854 }
 855
 856 / Disabled (empty) item is always alone and never has an icon, so fix its left padding /
 857 #BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
 858   padding-left: 6px;
 859 }
 860 */
 861
 862 .PanelUI-subView menuseparator,
 863 .PanelUI-subView toolbarseparator,
 864 .cui-widget-panelview menuseparator {
 865   -moz-appearance: none;
 866   min-height: 0;
 867   border-top: 1px solid #9C9CFF;
 868   margin: 2px 0;
 869   padding: 0;
 870 }
 871
 872 .PanelUI-subView menuseparator,
 873 .PanelUI-subView toolbarseparator {
 874 /*  -moz-margin-start: -5px;
 875   -moz-margin-end: -4px;*/
 876 }
 877
 878 .PanelUI-subView menuseparator.small-separator,
 879 .PanelUI-subView toolbarseparator.small-separator {
 880 /*  margin-left: 5px;
 881   margin-right: 5px;*/
 882 }
 883
 884 .cui-widget-panelview menuseparator.small-separator {
 885 /*  margin-left: 10px;
 886   margin-right: 10px;*/
 887 }
 888
 889 .subviewbutton > .menu-accel-container {
 890   -moz-box-pack: start;
 891   -moz-margin-start: 10px;
 892   -moz-margin-end: auto;
 893   color: #A09090;
 894 }
 895
 896 #PanelUI-historyItems > toolbarbutton {
 897   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
 898 }
 899
 900 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
 901 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
 902 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
 903   width: 16px;
 904   height: 16px;
 905 }
 906
 907 toolbarbutton[panel-multiview-anchor="true"],
 908 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
 909   color: #000000;
 910   background-color: #008484;
 911 }
 912
 913 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
 914   display: none;
 915 }
 916
 917 #PanelUI-help[panel-multiview-anchor="true"] {
 918   background-image: none;
 919 }
 920
 921 #PanelUI-help[panel-multiview-anchor="true"]::after {
 922   content: "";
 923   position: absolute;
 924   top: 0;
 925   height: 100%;
 926   width: 38px;
 927   background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
 928   background-repeat: no-repeat;
 929   background-color: #008484;
 930   background-position: left 10px center, 0;
 931 }
 932
 933 #PanelUI-help[panel-multiview-anchor="true"]:-moz-locale-dir(rtl)::after {
 934   background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png);
 935   background-position: right 10px center, 0;
 936 }
 937
 938 toolbarbutton[panel-multiview-anchor="true"] {
 939   background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
 940   background-position: right calc((22.35em / 3 - 0.1px) / 2 - 38px + 2px) center;
 941   background-repeat: no-repeat;
 942 }
 943
 944 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
 945   background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
 946   background-position: left calc((22.35em / 3 - 0.1px) / 2 - 38px + 2px) center;
 947 }
 948
 949 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
 950 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
 951   display: none;
 952 }
 953
 954 #search-container[cui-areatype="menu-panel"],
 955 #wrapper-search-container[place="panel"] {
 956   width: 22.35em;
 957 }
 958
 959 #search-container[cui-areatype="menu-panel"] {
 960   margin-top: 6px;
 961   margin-bottom: 6px;
 962 }
 963
 964 toolbarpaletteitem[place="palette"] > #search-container {
 965   min-width: 7em;
 966   width: 7em;
 967 }
 968
 969 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
 970   padding: 0;
 971   transition-property: background-color, border-color;
 972   transition-duration: 150ms;
 973 }
 974
 975 /* Make direct siblings overlap borders: */
 976 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
 977 /*  border-top-color: transparent !important; */
 978 }
 979
 980 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
 981 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
 982 /*  margin-top: -1px; */
 983 }
 984
 985 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
 986   border: 0;
 987   padding: .5em;
 988   margin: 0;
 989   -moz-box-flex: 1;
 990   min-width: calc(22.35em / 3 - 0.1px);
 991   max-width: calc(22.35em / 3 - 0.1px);
 992   /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
 993      1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
 994   height: calc(2.2em + 4px);
 995   max-height: none;
 996   -moz-box-orient: horizontal;
 997 }
 998
 999 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1000 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
1001   /* reduce the width with 2px for this button to compensate for two separators
1002      of 1px. */
1003   min-width: calc(22.35em / 3 - 0.1px - 2px);
1004   max-width: calc(22.35em / 3 - 0.1px - 2px);
1005 }
1006
1007 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
1008 /*  opacity: .25; */
1009 }
1010
1011 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
1012   min-width: 7ch;
1013 }
1014
1015 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
1016 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
1017 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
1018 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
1019   border-top-right-radius: 0;
1020   border-bottom-right-radius: 0;
1021 }
1022
1023 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
1024 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
1025 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
1026 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
1027   border-top-left-radius: 0;
1028   border-bottom-left-radius: 0;
1029 }
1030
1031 .toolbaritem-combined-buttons > separator {
1032   -moz-appearance: none;
1033   width: 3px;
1034   -moz-box-align: stretch;
1035 }
1036
1037 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
1038   margin: .5em 0;
1039   width: 1px;
1040   height: auto;
1041 /*  background: hsla(210,4%,10%,.15);*/
1042   transition-property: margin;
1043   transition-duration: 10ms;
1044   transition-timing-function: ease;
1045 }
1046
1047 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
1048   margin: 0;
1049 }
1050
1051 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
1052   padding: 0;
1053 }
1054
1055 .cui-widget-panelview,
1056 #widget-overflow-scroller {
1057   overflow-y: auto;
1058   overflow-x: hidden;
1059 }
1060
1061 #widget-overflow-scroller {
1062   max-height: 30em;
1063   margin-top: 10px;
1064   margin-bottom: 10px;
1065 }
1066
1067 #widget-overflow-list {
1068   width: 22.35em;
1069   padding-left: 10px;
1070   padding-right: 10px;
1071 }
1072
1073 toolbaritem[overflowedItem=true],
1074 toolbarbutton[overflowedItem=true] {
1075   width: 100%;
1076   max-width: 22.35em;
1077   min-height: 36px;
1078   background-repeat: no-repeat;
1079   background-position: 0 center;
1080 }
1081
1082 .widget-overflow-list .toolbarbutton-1,
1083 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1084   -moz-box-align: center;
1085   -moz-box-orient: horizontal;
1086 }
1087
1088 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
1089 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
1090   text-align: start;
1091   -moz-padding-start: .5em;
1092 }
1093
1094 #widget-overflow-list > .toolbaritem-combined-buttons {
1095   min-height: 28px;
1096 }
1097
1098 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1099   content: "";
1100   display: -moz-box;
1101   width: 1px;
1102   height: 18px;
1103   -moz-margin-end: -1px;
1104 }
1105
1106 .subviewbutton[checked="true"] {
1107   background-image: url("chrome://global/skin/menu/menu-check.gif");
1108   background-position: top 5px left 4px;
1109   background-repeat: no-repeat;
1110 }
1111
1112 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1113   background-position: top 5px right 4px;
1114 }
1115
1116 .subviewbutton[checked="true"]:hover {
1117   background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1118 }
1119
1120 .subbiewbutton > .menu-iconic-left {
1121   -moz-margin-end: 3px;
1122 }
1123
1124 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1125   visibility: hidden;
1126 }
1127
1128 .panel-mainview[panelid=customizationui-widget-panel],
1129 #customizationui-widget-multiview > .panel-viewcontainer,
1130 #customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack,
1131 #PanelUI-panicView > .panel-subview-body,
1132 #PanelUI-panicView {
1133   overflow: visible;
1134   color: #FF9F00;
1135 }
1136
1137 #PanelUI-panicView.cui-widget-panelview {
1138   min-width: 280px;
1139 }
1140
1141 #PanelUI-panic-timeframe {
1142   padding: 15px;
1143   border-bottom: 1px solid #A09090;
1144 }
1145
1146 #panic-button-success-icon,
1147 #PanelUI-panic-timeframe-icon,
1148 #PanelUI-panic-timeframe-icon-small {
1149   background-color: transparent;
1150   -moz-margin-end: 10px;
1151 }
1152
1153 #panic-button-success-icon,
1154 #PanelUI-panic-timeframe-icon {
1155   list-style-image: url(chrome://browser/skin/panic-panel/header.png);
1156   max-height: 48px;
1157   width: 48px;
1158 }
1159
1160 #PanelUI-panic-timeframe-icon-small {
1161   list-style-image: url(chrome://browser/skin/panic-panel/header-small.png);
1162   max-height: 32px;
1163   width: 32px;
1164 }
1165
1166 /* current attribute is only set when in use as a subview instead of a main view */
1167 #PanelUI-panicView[current] #PanelUI-panic-timeframe-icon {
1168   display: none;
1169 }
1170
1171 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-timeframe-icon-small {
1172   display: none;
1173 }
1174
1175 #panic-button-success-header,
1176 #PanelUI-panic-header {
1177   -moz-box-align: center;
1178   margin-bottom: 5px;
1179 }
1180
1181 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-header {
1182   margin-bottom: 0;
1183 }
1184
1185 #PanelUI-panic-timeframe-icon-small:-moz-locale-dir(rtl),
1186 #PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
1187   transform: scaleX(-1);
1188 }
1189
1190 /*
1191 .subviewradio {
1192 }
1193
1194 .subviewradio@buttonStateHover@ {
1195 }
1196
1197 .subviewradio[selected],
1198 .subviewradio[selected]:hover,
1199 .subviewradio@buttonStateActive@ {
1200 }
1201
1202 .subviewradio > .radio-check {
1203 }
1204
1205 .subviewradio > .radio-check[selected] {
1206 }
1207 */
1208
1209 #PanelUI-panic-explanations {
1210   padding: 10px 10px 0;
1211 }
1212
1213 #PanelUI-panic-actionlist-main-label {
1214   color: #A09090;
1215   font-size: 0.9em;
1216 }
1217
1218 .PanelUI-panic-actionlist {
1219   -moz-padding-start: 20px;
1220   padding-top: 2px;
1221   padding-bottom: 2px;
1222   background-size: 16px 16px;
1223   background-repeat: no-repeat;
1224   background-color: transparent;
1225   background-position: center left;
1226 }
1227
1228 .PanelUI-panic-actionlist:-moz-locale-dir(rtl) {
1229   background-position: center right;
1230 }
1231
1232 #PanelUI-panic-actionlist-cookies {
1233   background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0);
1234 }
1235
1236 #PanelUI-panic-actionlist-history {
1237   background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16);
1238 }
1239
1240 #PanelUI-panic-actionlist-windows {
1241   background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32);
1242 }
1243
1244 #PanelUI-panic-actionlist-newwindow {
1245   background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48);
1246 }
1247
1248 #PanelUI-panic-warning {
1249   color: #FF0000;
1250   text-align: center;
1251   width: 100%;
1252   margin-top: 20px;
1253 }
1254
1255 #PanelUI-panic-view-button {
1256   background-color: #FF0000;
1257   color: #000000;
1258 }
1259
1260 #PanelUI-panic-view-button:hover {
1261   background-color: #FFCF00;
1262 }
1263
1264 #PanelUI-panic-view-button:hover:active {
1265   background-color: #FF9F00;
1266 }
1267
1268 #PanelUI-panic-view-button > .toolbarbutton-text {
1269   text-align: center;
1270   text-shadow: none;
1271 }
1272
1273 #panic-button-success-closebutton {
1274 }
1275
1276 #panic-button-success-closebutton:hover {
1277 }
1278
1279 #panic-button-success-closebutton:hover:active {
1280 }
1281
1282 /* === END panelUIOverlay.inc.css === */
1283
1284 .panel-subviews {
1285   background-color: #000000;
1286 }
1287
1288 #PanelUI-contents #zoom-out-btn {
1289   padding-left: 12px;
1290   padding-right: 12px;
1291 }
1292
1293 #PanelUI-contents #zoom-in-btn {
1294   padding-left: 12px;
1295   padding-right: 12px;
1296 }
1297
1298 /* bookmark panel submenus */
1299
1300 #BMB_bookmarksPopup menupopup[placespopup=true] {
1301 /*  background: transparent;
1302   border: none;
1303   padding: 6px;*/
1304 }
1305
1306 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1307   /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1308 /*  background: var(--panel-arrowcontent-background);
1309   border: var(--panel-arrowcontent-border);
1310   border-radius: 3.5px;
1311   margin-top: -4px;*/
1312 }
1313
1314 #BMB_bookmarksPopup menupopup {
1315 /*  padding-top: 2px;*/
1316 }
1317
1318 /* Add some space at the top because there are no headers: */
1319 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox  {
1320 /*  padding-top: 4px;*/
1321 }
1322
1323 /* bookmark panel separator */
1324 #BMB_bookmarksPopup menuseparator {
1325   padding-top: 0;
1326   padding-bottom: 0;
1327 }
1328
1329 .subviewbutton > .menu-right,
1330 .subviewbutton > .menu-iconic-left {
1331 /*  padding-top: 1px;
1332   margin-top: 1px;
1333   margin-bottom: 2px;*/
1334 }
1335
1336 /* Disabled empty item looks too small otherwise, because it has no icon. */
1337 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1338 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1339 menuitem[type="checkbox"].subviewbutton {
1340   /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1341    * 2px for its border, see above */
1342 /*  min-height: 22px;*/
1343 }
1344
1345 .subviewbutton > .toolbarbutton-text {
1346 /*  padding-top: 3px;
1347   padding-bottom: 3px;*/
1348 }
1349
1350 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1351   -moz-appearance: none;
1352   border: 0;
1353   -moz-margin-start: 3px;
1354 }
1355
1356 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1357   padding: 0 2px;
1358   -moz-padding-start: 0;
1359   height: 18px;
1360 }
1361
1362 menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
1363 /*  transform: scaleX(-1); */
1364 }
1365
1366 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1367   padding: 0 6px;
1368 }
1369
1370 .subviewbutton > .toolbarbutton-text {
1371   -moz-padding-start: 16px;
1372 }
1373
1374 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1375   -moz-padding-start: 0;
1376 }
1377
1378 /* subviewbutton entries for social sidebars have images that come from external
1379 /* sources, and are not guaranteed to be the size we want, so force the size on
1380 /* those icons. */
1381 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1382   width: 16px;
1383   height: 16px;
1384 }
1385
1386 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1387   visibility: hidden;
1388 }
1389
1390 menu.subviewbutton > .menu-right {
1391   list-style-image: url("chrome://global/skin/menu/menu-arrow.gif");
1392 }
1393 menu.subviewbutton:hover > .menu-right,
1394 menu.subviewbutton[_moz-menuactive="true"] > .menu-right {
1395   list-style-image: url("chrome://global/skin/menu/menu-arrow-hover.gif");
1396 }
1397 menu[disabled="true"].subviewbutton > .menu-right {
1398   list-style-image: url("chrome://global/skin/menu/menu-arrow-disabled.gif");
1399 }