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