LCARStrek/browser/customizableui/panelUIOverlay.css

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