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