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 #PanelUI-panicView.cui-widget-panelview {
1068   min-width: 280px;
1069 }
1070
1071 #PanelUI-panic-timeframe {
1072   padding: 15px;
1073   border-bottom: 1px solid #A09090;
1074 }
1075
1076 #panic-button-success-icon,
1077 #PanelUI-panic-timeframe-icon,
1078 #PanelUI-panic-timeframe-icon-small {
1079   background-color: transparent;
1080   -moz-margin-end: 10px;
1081 }
1082
1083 #panic-button-success-icon,
1084 #PanelUI-panic-timeframe-icon {
1085   list-style-image: url(chrome://browser/skin/panic-panel/header.png);
1086   max-height: 48px;
1087   width: 48px;
1088 }
1089
1090 #PanelUI-panic-timeframe-icon-small {
1091   list-style-image: url(chrome://browser/skin/panic-panel/header-small.png);
1092   max-height: 32px;
1093   width: 32px;
1094 }
1095
1096 /* current attribute is only set when in use as a subview instead of a main view */
1097 #PanelUI-panicView[current] #PanelUI-panic-timeframe-icon {
1098   display: none;
1099 }
1100
1101 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-timeframe-icon-small {
1102   display: none;
1103 }
1104
1105 #panic-button-success-header,
1106 #PanelUI-panic-header {
1107   -moz-box-align: center;
1108   margin-bottom: 5px;
1109 }
1110
1111 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-header {
1112   margin-bottom: 0;
1113 }
1114
1115 #PanelUI-panic-timeframe-icon-small:-moz-locale-dir(rtl),
1116 #PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
1117   transform: scaleX(-1);
1118 }
1119
1120 /*
1121 .subviewradio {
1122 }
1123
1124 .subviewradio@buttonStateHover@ {
1125 }
1126
1127 .subviewradio[selected],
1128 .subviewradio[selected]:hover,
1129 .subviewradio@buttonStateActive@ {
1130 }
1131
1132 .subviewradio > .radio-check {
1133 }
1134
1135 .subviewradio > .radio-check[selected] {
1136 }
1137 */
1138
1139 #PanelUI-panic-explanations {
1140   padding: 10px 10px 0;
1141 }
1142
1143 #PanelUI-panic-actionlist-main-label {
1144   color: #A09090;
1145   font-size: 0.9em;
1146 }
1147
1148 .PanelUI-panic-actionlist {
1149   -moz-padding-start: 20px;
1150   padding-top: 2px;
1151   padding-bottom: 2px;
1152   background-size: 16px 16px;
1153   background-repeat: no-repeat;
1154   background-color: transparent;
1155   background-position: center left;
1156 }
1157
1158 .PanelUI-panic-actionlist:-moz-locale-dir(rtl) {
1159   background-position: center right;
1160 }
1161
1162 #PanelUI-panic-actionlist-cookies {
1163   background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0);
1164 }
1165
1166 #PanelUI-panic-actionlist-history {
1167   background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16);
1168 }
1169
1170 #PanelUI-panic-actionlist-windows {
1171   background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32);
1172 }
1173
1174 #PanelUI-panic-actionlist-newwindow {
1175   background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48);
1176 }
1177
1178 #PanelUI-panic-warning {
1179   color: #FF0000;
1180   text-align: center;
1181   width: 100%;
1182   margin-top: 20px;
1183 }
1184
1185 #PanelUI-panic-view-button {
1186   background-color: #FF0000;
1187   color: #000000;
1188 }
1189
1190 #PanelUI-panic-view-button:hover {
1191   background-color: #FFCF00;
1192 }
1193
1194 #PanelUI-panic-view-button:hover:active {
1195   background-color: #FF9F00;
1196 }
1197
1198 #PanelUI-panic-view-button > .toolbarbutton-text {
1199   text-align: center;
1200   text-shadow: none;
1201 }
1202
1203 #panic-button-success-closebutton {
1204 }
1205
1206 #panic-button-success-closebutton:hover {
1207 }
1208
1209 #panic-button-success-closebutton:hover:active {
1210 }
1211
1212 /* === END panelUIOverlay.inc.css === */
1213
1214 .panel-subviews {
1215   background-color: #000000;
1216 }
1217
1218 #PanelUI-contents #zoom-out-btn {
1219   padding-left: 12px;
1220   padding-right: 12px;
1221 }
1222
1223 #PanelUI-contents #zoom-in-btn {
1224   padding-left: 12px;
1225   padding-right: 12px;
1226 }
1227
1228 /* bookmark panel submenus */
1229
1230 #BMB_bookmarksPopup menupopup[placespopup=true] {
1231 /*  background: transparent;
1232   border: none;
1233   padding: 6px;*/
1234 }
1235
1236 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1237   /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1238 /*  background: #FFF;
1239   border: 1px solid rgba(0,0,0,0.25);
1240   border-radius: 3.5px;
1241   margin-top: -4px;*/
1242 }
1243
1244 #BMB_bookmarksPopup menupopup {
1245 /*  padding-top: 2px;*/
1246 }
1247
1248 /* Add some space at the top because there are no headers: */
1249 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox  {
1250 /*  padding-top: 4px;*/
1251 }
1252
1253 /* bookmark panel separator */
1254 #BMB_bookmarksPopup menuseparator {
1255   padding-top: 0;
1256   padding-bottom: 0;
1257 }
1258
1259 .subviewbutton > .menu-right,
1260 .subviewbutton > .menu-iconic-left {
1261 /*  padding-top: 1px;
1262   margin-top: 1px;
1263   margin-bottom: 2px;*/
1264 }
1265
1266 /* Disabled empty item looks too small otherwise, because it has no icon. */
1267 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1268 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1269 menuitem[type="checkbox"].subviewbutton {
1270   /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1271    * 2px for its border, see above */
1272 /*  min-height: 22px;*/
1273 }
1274
1275 .subviewbutton > .toolbarbutton-text {
1276 /*  padding-top: 3px;
1277   padding-bottom: 3px;*/
1278 }
1279
1280 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1281   -moz-appearance: none;
1282   border: 0;
1283   -moz-margin-start: 3px;
1284 }
1285
1286 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1287   padding: 0 2px;
1288   -moz-padding-start: 0;
1289   height: 18px;
1290 }
1291
1292 menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
1293 /*  transform: scaleX(-1); */
1294 }
1295
1296 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1297   padding: 0 6px;
1298 }
1299
1300 .subviewbutton > .toolbarbutton-text {
1301   -moz-padding-start: 16px;
1302 }
1303
1304 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1305   -moz-padding-start: 0;
1306 }
1307
1308 /* subviewbutton entries for social sidebars have images that come from external
1309 /* sources, and are not guaranteed to be the size we want, so force the size on
1310 /* those icons. */
1311 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1312   width: 16px;
1313   height: 16px;
1314 }
1315
1316 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1317   visibility: hidden;
1318 }
1319
1320 menu.subviewbutton > .menu-right {
1321   list-style-image: url("chrome://global/skin/menu/menu-arrow.gif");
1322 }
1323 menu.subviewbutton:hover > .menu-right,
1324 menu.subviewbutton[_moz-menuactive="true"] > .menu-right {
1325   list-style-image: url("chrome://global/skin/menu/menu-arrow-hover.gif");
1326 }
1327 menu[disabled="true"].subviewbutton > .menu-right {
1328   list-style-image: url("chrome://global/skin/menu/menu-arrow-disabled.gif");
1329 }