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; /* this doesn't need to be changed for RTL */
 866 }
 867
 868 toolbarbutton[panel-multiview-anchor="true"] {
 869   background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
 870   background-position: right calc((22.35em / 3 - 0.1px) / 2 - 38px + 2px) center;
 871   background-repeat: no-repeat;
 872 }
 873
 874 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
 875   background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
 876   background-position: left calc((22.35em / 3 - 0.1px) / 2 - 38px + 2px) center;
 877 }
 878
 879 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
 880 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
 881   display: none;
 882 }
 883
 884 #search-container[cui-areatype="menu-panel"],
 885 #wrapper-search-container[place="panel"] {
 886   width: 22.35em;
 887 }
 888
 889 #search-container[cui-areatype="menu-panel"] {
 890   margin-top: 6px;
 891   margin-bottom: 6px;
 892 }
 893
 894 toolbarpaletteitem[place="palette"] > #search-container {
 895   min-width: 7em;
 896   width: 7em;
 897 }
 898
 899 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
 900   padding: 0;
 901   transition-property: background-color, border-color;
 902   transition-duration: 150ms;
 903 }
 904
 905 /* Make direct siblings overlap borders: */
 906 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
 907 /*  border-top-color: transparent !important; */
 908 }
 909
 910 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
 911 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
 912 /*  margin-top: -1px; */
 913 }
 914
 915 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
 916   border: 0;
 917   padding: .5em;
 918   margin: 0;
 919   -moz-box-flex: 1;
 920   min-width: calc(22.35em / 3 - 0.1px);
 921   max-width: calc(22.35em / 3 - 0.1px);
 922   /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
 923      1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
 924   height: calc(2.2em + 4px);
 925   max-height: none;
 926   -moz-box-orient: horizontal;
 927 }
 928
 929 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
 930 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
 931   /* reduce the width with 2px for this button to compensate for two separators
 932      of 1px. */
 933   min-width: calc(22.35em / 3 - 0.1px - 2px);
 934   max-width: calc(22.35em / 3 - 0.1px - 2px);
 935 }
 936
 937 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
 938 /*  opacity: .25; */
 939 }
 940
 941 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
 942   min-width: 7ch;
 943 }
 944
 945 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
 946 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
 947 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
 948 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
 949   border-top-right-radius: 0;
 950   border-bottom-right-radius: 0;
 951 }
 952
 953 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
 954 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
 955 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
 956 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
 957   border-top-left-radius: 0;
 958   border-bottom-left-radius: 0;
 959 }
 960
 961 .toolbaritem-combined-buttons > separator {
 962   -moz-appearance: none;
 963   width: 3px;
 964   -moz-box-align: stretch;
 965 }
 966
 967 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
 968   margin: .5em 0;
 969   width: 1px;
 970   height: auto;
 971 /*  background: hsla(210,4%,10%,.15);*/
 972   transition-property: margin;
 973   transition-duration: 10ms;
 974   transition-timing-function: ease;
 975 }
 976
 977 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
 978   margin: 0;
 979 }
 980
 981 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
 982   padding: 0;
 983 }
 984
 985 .cui-widget-panelview,
 986 #widget-overflow-scroller {
 987   overflow-y: auto;
 988   overflow-x: hidden;
 989 }
 990
 991 #widget-overflow-scroller {
 992   max-height: 30em;
 993   margin-top: 10px;
 994   margin-bottom: 10px;
 995 }
 996
 997 #widget-overflow-list {
 998   width: 22.35em;
 999   padding-left: 10px;
1000   padding-right: 10px;
1001 }
1002
1003 toolbaritem[overflowedItem=true],
1004 toolbarbutton[overflowedItem=true] {
1005   width: 100%;
1006   max-width: 22.35em;
1007   min-height: 36px;
1008   background-repeat: no-repeat;
1009   background-position: 0 center;
1010 }
1011
1012 .widget-overflow-list .toolbarbutton-1,
1013 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1014   -moz-box-align: center;
1015   -moz-box-orient: horizontal;
1016 }
1017
1018 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
1019 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
1020   text-align: start;
1021   -moz-padding-start: .5em;
1022 }
1023
1024 #widget-overflow-list > .toolbaritem-combined-buttons {
1025   min-height: 28px;
1026 }
1027
1028 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1029   content: "";
1030   display: -moz-box;
1031   width: 1px;
1032   height: 18px;
1033   -moz-margin-end: -1px;
1034 }
1035
1036 .subviewbutton[checked="true"] {
1037   background-image: url("chrome://global/skin/menu/menu-check.gif");
1038   background-position: top 5px left 4px;
1039   background-repeat: no-repeat;
1040 }
1041
1042 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1043   background-position: top 5px right 4px;
1044 }
1045
1046 .subviewbutton[checked="true"]:hover {
1047   background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1048 }
1049
1050 .subbiewbutton > .menu-iconic-left {
1051   -moz-margin-end: 3px;
1052 }
1053
1054 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1055   visibility: hidden;
1056 }
1057
1058 .panel-mainview[panelid=customizationui-widget-panel],
1059 #customizationui-widget-multiview > .panel-viewcontainer,
1060 #customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack,
1061 #PanelUI-panicView > .panel-subview-body,
1062 #PanelUI-panicView {
1063   overflow: visible;
1064   color: #FF9F00;
1065 }
1066
1067 #customizationui-widget-multiview[mainViewId="PanelUI-panicView"] > .panel-viewcontainer,
1068 #customizationui-widget-multiview[mainViewId="PanelUI-panicView"] > .panel-viewcontainer > .panel-viewstack,
1069 #customizationui-widget-multiview[mainViewId="PanelUI-panicView"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview,
1070 /* NB: currentsubview attribute is temporary as a safe workaround for a layout problem with this
1071  * panel. Do not rely on it, it *will* go away again. */
1072 #PanelUI-multiView[currentsubview="PanelUI-panicView"] > .panel-viewcontainer > .panel-viewstack > .panel-subviews,
1073 #PanelUI-panicView > .panel-subview-body,
1074 #PanelUI-panicView {
1075   overflow: visible;
1076 }
1077
1078 #PanelUI-panicView.cui-widget-panelview {
1079   min-width: 280px;
1080 }
1081
1082 #PanelUI-panic-timeframe {
1083   padding: 15px;
1084   border-bottom: 1px solid #A09090;
1085 }
1086
1087 #panic-button-success-icon,
1088 #PanelUI-panic-timeframe-icon,
1089 #PanelUI-panic-timeframe-icon-small {
1090   background-color: transparent;
1091   -moz-margin-end: 10px;
1092 }
1093
1094 #panic-button-success-icon,
1095 #PanelUI-panic-timeframe-icon {
1096   list-style-image: url(chrome://browser/skin/panic-panel/header.png);
1097   max-height: 48px;
1098   width: 48px;
1099 }
1100
1101 #PanelUI-panic-timeframe-icon-small {
1102   list-style-image: url(chrome://browser/skin/panic-panel/header-small.png);
1103   max-height: 32px;
1104   width: 32px;
1105 }
1106
1107 /* current attribute is only set when in use as a subview instead of a main view */
1108 #PanelUI-panicView[current] #PanelUI-panic-timeframe-icon {
1109   display: none;
1110 }
1111
1112 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-timeframe-icon-small {
1113   display: none;
1114 }
1115
1116 #panic-button-success-header,
1117 #PanelUI-panic-header {
1118   -moz-box-align: center;
1119   margin-bottom: 5px;
1120 }
1121
1122 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-header {
1123   margin-bottom: 0;
1124 }
1125
1126 #PanelUI-panic-timeframe-icon-small:-moz-locale-dir(rtl),
1127 #PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
1128   transform: scaleX(-1);
1129 }
1130
1131 /*
1132 .subviewradio {
1133 }
1134
1135 .subviewradio@buttonStateHover@ {
1136 }
1137
1138 .subviewradio[selected],
1139 .subviewradio[selected]:hover,
1140 .subviewradio@buttonStateActive@ {
1141 }
1142
1143 .subviewradio > .radio-check {
1144 }
1145
1146 .subviewradio > .radio-check[selected] {
1147 }
1148 */
1149
1150 #PanelUI-panic-explanations {
1151   padding: 10px 10px 0;
1152 }
1153
1154 #PanelUI-panic-actionlist-main-label {
1155   color: #A09090;
1156   font-size: 0.9em;
1157 }
1158
1159 .PanelUI-panic-actionlist {
1160   -moz-padding-start: 20px;
1161   padding-top: 2px;
1162   padding-bottom: 2px;
1163   background-size: 16px 16px;
1164   background-repeat: no-repeat;
1165   background-color: transparent;
1166   background-position: center left;
1167 }
1168
1169 .PanelUI-panic-actionlist:-moz-locale-dir(rtl) {
1170   background-position: center right;
1171 }
1172
1173 #PanelUI-panic-actionlist-cookies {
1174   background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0);
1175 }
1176
1177 #PanelUI-panic-actionlist-history {
1178   background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16);
1179 }
1180
1181 #PanelUI-panic-actionlist-windows {
1182   background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32);
1183 }
1184
1185 #PanelUI-panic-actionlist-newwindow {
1186   background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48);
1187 }
1188
1189 #PanelUI-panic-warning {
1190   color: #FF0000;
1191   text-align: center;
1192   width: 100%;
1193   margin-top: 20px;
1194 }
1195
1196 #PanelUI-panic-view-button {
1197   background-color: #FF0000;
1198   color: #000000;
1199 }
1200
1201 #PanelUI-panic-view-button:hover {
1202   background-color: #FFCF00;
1203 }
1204
1205 #PanelUI-panic-view-button:hover:active {
1206   background-color: #FF9F00;
1207 }
1208
1209 #PanelUI-panic-view-button > .toolbarbutton-text {
1210   text-align: center;
1211   text-shadow: none;
1212 }
1213
1214 #panic-button-success-closebutton {
1215 }
1216
1217 #panic-button-success-closebutton:hover {
1218 }
1219
1220 #panic-button-success-closebutton:hover:active {
1221 }
1222
1223 /* === END panelUIOverlay.inc.css === */
1224
1225 .panel-subviews {
1226   background-color: #000000;
1227 }
1228
1229 #PanelUI-contents #zoom-out-btn {
1230   padding-left: 12px;
1231   padding-right: 12px;
1232 }
1233
1234 #PanelUI-contents #zoom-in-btn {
1235   padding-left: 12px;
1236   padding-right: 12px;
1237 }
1238
1239 /* bookmark panel submenus */
1240
1241 #BMB_bookmarksPopup menupopup[placespopup=true] {
1242 /*  background: transparent;
1243   border: none;
1244   padding: 6px;*/
1245 }
1246
1247 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1248   /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1249 /*  background: #FFF;
1250   border: 1px solid rgba(0,0,0,0.25);
1251   border-radius: 3.5px;
1252   margin-top: -4px;*/
1253 }
1254
1255 #BMB_bookmarksPopup menupopup {
1256 /*  padding-top: 2px;*/
1257 }
1258
1259 /* Add some space at the top because there are no headers: */
1260 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox  {
1261 /*  padding-top: 4px;*/
1262 }
1263
1264 /* bookmark panel separator */
1265 #BMB_bookmarksPopup menuseparator {
1266   padding-top: 0;
1267   padding-bottom: 0;
1268 }
1269
1270 .subviewbutton > .menu-right,
1271 .subviewbutton > .menu-iconic-left {
1272 /*  padding-top: 1px;
1273   margin-top: 1px;
1274   margin-bottom: 2px;*/
1275 }
1276
1277 /* Disabled empty item looks too small otherwise, because it has no icon. */
1278 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1279 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1280 menuitem[type="checkbox"].subviewbutton {
1281   /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1282    * 2px for its border, see above */
1283 /*  min-height: 22px;*/
1284 }
1285
1286 .subviewbutton > .toolbarbutton-text {
1287 /*  padding-top: 3px;
1288   padding-bottom: 3px;*/
1289 }
1290
1291 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1292   -moz-appearance: none;
1293   border: 0;
1294   -moz-margin-start: 3px;
1295 }
1296
1297 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1298   padding: 0 2px;
1299   -moz-padding-start: 0;
1300   height: 18px;
1301 }
1302
1303 menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
1304 /*  transform: scaleX(-1); */
1305 }
1306
1307 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1308   padding: 0 6px;
1309 }
1310
1311 .subviewbutton > .toolbarbutton-text {
1312   -moz-padding-start: 16px;
1313 }
1314
1315 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1316   -moz-padding-start: 0;
1317 }
1318
1319 /* subviewbutton entries for social sidebars have images that come from external
1320 /* sources, and are not guaranteed to be the size we want, so force the size on
1321 /* those icons. */
1322 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1323   width: 16px;
1324   height: 16px;
1325 }
1326
1327 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1328   visibility: hidden;
1329 }
1330
1331 menu.subviewbutton > .menu-right {
1332   list-style-image: url("chrome://global/skin/menu/menu-arrow.gif");
1333 }
1334 menu.subviewbutton:hover > .menu-right,
1335 menu.subviewbutton[_moz-menuactive="true"] > .menu-right {
1336   list-style-image: url("chrome://global/skin/menu/menu-arrow-hover.gif");
1337 }
1338 menu[disabled="true"].subviewbutton > .menu-right {
1339   list-style-image: url("chrome://global/skin/menu/menu-arrow-disabled.gif");
1340 }