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   list-style-image: url("chrome://browser/skin/syncFx-horizontalbar.png");
 554 }
 555
 556 #PanelUI-fxa-status[status="active"] {
 557   list-style-image: url("chrome://browser/skin/syncFxProgress-horizontalbar.png");
 558 }
 559
 560 #PanelUI-customize {
 561   list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
 562 }
 563
 564 #customization-panelHolder #PanelUI-customize {
 565   list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
 566 }
 567
 568 #PanelUI-help {
 569   list-style-image: url("chrome://browser/skin/menuPanel-help.png");
 570 }
 571
 572 #PanelUI-quit {
 573   -moz-border-end-style: none;
 574   list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
 575 }
 576
 577 #PanelUI-fxa-status,
 578 #PanelUI-customize,
 579 #PanelUI-help,
 580 #PanelUI-quit {
 581   -moz-image-region: rect(0, 16px, 16px, 0);
 582 }
 583
 584 #PanelUI-customize:hover,
 585 #PanelUI-help:not([disabled]):hover,
 586 #PanelUI-quit:not([disabled]):hover,
 587 #PanelUI-customize:hover:active,
 588 #PanelUI-help:not([disabled]):hover:active,
 589 #PanelUI-quit:not([disabled]):hover:active {
 590   -moz-image-region: rect(0, 32px, 16px, 16px);
 591 }
 592
 593 #PanelUI-help[disabled],
 594 #PanelUI-quit[disabled] {
 595   -moz-image-region: rect(0, 48px, 16px, 32px);
 596 }
 597
 598 #PanelUI-fxa-status:not([disabled]):hover,
 599 #PanelUI-help:not([disabled]):hover,
 600 #PanelUI-customize:hover,
 601 #PanelUI-quit:not([disabled]):hover {
 602 }
 603
 604 #PanelUI-fxa-status:not([disabled]):hover:active,
 605 #PanelUI-help:not([disabled]):hover:active,
 606 #PanelUI-customize:hover:active,
 607 #PanelUI-quit:not([disabled]):hover:active {
 608 }
 609
 610 #PanelUI-fxa-status:not([disabled]):hover,
 611 #PanelUI-fxa-status:not([disabled]):hover:active {
 612 }
 613
 614 #PanelUI-update-status[update-status="succeeded"] {
 615   background-color: #008484;
 616   color: #000000;
 617 }
 618
 619 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover {
 620   background-color: #FFCF00;
 621 }
 622
 623 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover:active {
 624   background-color: #FF9F00;
 625 }
 626
 627 #PanelUI-update-status[update-status="failed"] {
 628   background-color: #FF0000;
 629   color: #000000;
 630 }
 631
 632 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover {
 633   background-color: #FFCF00;
 634 }
 635
 636 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover:active {
 637   background-color: #FF9F00;
 638 }
 639
 640 #PanelUI-quit:not([disabled]):hover {
 641   background-color: #FF0000;
 642 }
 643
 644 #PanelUI-quit:not([disabled]):hover:active {
 645   background-color: #FF9F00;
 646 }
 647
 648 #customization-panelHolder #PanelUI-customize {
 649   color: #FFCF00;
 650   background-color: #008484;
 651   text-shadow: none;
 652   margin-top: -1px;
 653 }
 654
 655 #customization-panelHolder #PanelUI-customize + toolbarseparator {
 656   display: none;
 657 }
 658
 659 #customization-panelHolder #PanelUI-customize:hover,
 660 #customization-panelHolder #PanelUI-customize:hover:active {
 661   background-color: #FFCF00;
 662   color: #000000;
 663 }
 664
 665 #customization-palette .toolbarbutton-multiline-text,
 666 #customization-palette .toolbarbutton-text {
 667   display: none;
 668 }
 669
 670 panelview .toolbarbutton-1,
 671 .subviewbutton,
 672 .widget-overflow-list .toolbarbutton-1,
 673 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
 674 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
 675 /*  padding: 0 6px;
 676   background-color: hsla(210,4%,10%,0);
 677   border-radius: 2px;
 678   border-style: solid;
 679   border-color: hsla(210,4%,10%,0);*/
 680 }
 681
 682 panelview .toolbarbutton-1,
 683 .subviewbutton,
 684 .widget-overflow-list .toolbarbutton-1,
 685 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
 686   border-width: 0;
 687 }
 688
 689 .subviewbutton.panel-subview-footer {
 690 /*  border-radius: 0; */
 691   margin: 2px 0 0;
 692 }
 693
 694 .subviewbutton.panel-subview-footer > .menu-text {
 695   -moz-margin-start: 0px !important;
 696   -moz-padding-start: 6px;
 697   -moz-padding-end: 6px;
 698   -moz-box-flex: 0;
 699   text-align: center;
 700 }
 701
 702 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
 703   margin: 0;
 704 }
 705
 706 .subviewbutton.panel-subview-footer > .toolbarbutton-text {
 707   text-align: center;
 708   padding: 0;
 709 }
 710
 711 .subviewbutton.panel-subview-footer > .menu-accel-container {
 712   -moz-padding-start: 6px;
 713 }
 714
 715 .subviewbutton:not(.panel-subview-footer) {
 716   margin: 0;
 717 }
 718
 719 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
 720 /* Bookmark items need a more specific selector. */
 721 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
 722 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
 723 /*  font: menu;*/
 724 }
 725
 726 .PanelUI-subView .subviewbutton[shortcut]::after {
 727   content: attr(shortcut);
 728   float: right;
 729   color: #A09090;
 730 }
 731
 732 .PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
 733   -moz-margin-start: 10px;
 734 }
 735
 736 /* This is a <label> but it should fit in with the menu font- and colorwise. */
 737 #PanelUI-characterEncodingView-autodetect-label {
 738   font: menu;
 739   color: inherit;
 740 }
 741
 742 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
 743 /*  margin-left: 4px;
 744   margin-right: 4px;*/
 745 }
 746
 747 panelview .toolbarbutton-1,
 748 .widget-overflow-list .toolbarbutton-1 {
 749   margin-top: 6px;
 750 }
 751
 752 /*
 753 panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
 754 toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover,
 755 menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
 756 menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
 757 .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
 758 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
 759     > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
 760   background-color: hsla(210,4%,10%,.08);
 761   border-color: hsla(210,4%,10%,.11);
 762 }
 763
 764 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[open],:active)):hover {
 765   border-color: hsla(210,4%,10%,.11);
 766 }
 767
 768 panelview .toolbarbutton-1:-moz-any(:not([disabled]):-moz-any([open],:hover:active),[checked=true]),
 769 toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],:hover:active),
 770 menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
 771 menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
 772 .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active),
 773 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
 774     > toolbarbutton:not([disabled]):-moz-any([open],:hover:active) {
 775   background-color: hsla(210,4%,10%,.12);
 776   border-color: hsla(210,4%,10%,.14);
 777   box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
 778 }
 779
 780 .subviewbutton.panel-subview-footer {
 781   margin: 4px -4px -4px;
 782   background-color: hsla(210,4%,10%,.07);
 783   border-top: 1px solid hsla(210,4%,10%,.12);
 784   border-radius: 0;
 785   color: hsl(0,0%,25%)
 786 }
 787
 788 menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
 789 .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
 790   background-color: hsla(210,4%,10%,.1);
 791   border-top: 1px solid hsla(210,4%,10%,.12);
 792 }
 793
 794 menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active),
 795 .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active) {
 796   background-color: hsla(210,4%,10%,.15);
 797   border-top: 1px solid hsla(210,4%,10%,.12);
 798   box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
 799 }
 800
 801 #BMB_bookmarksPopup .subviewbutton {
 802   font: menu;
 803   font-weight: normal;
 804 }
 805
 806 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
 807   color: inherit;
 808 }
 809
 810 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
 811 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
 812   -moz-appearance: none;
 813   margin-top: 0;
 814   margin-bottom: 0;
 815 }
 816
 817 / Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
 818 #BMB_bookmarksPopup arrowscrollbox {
 819   padding-bottom: 0px;
 820 }
 821
 822 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
 823   / Hide bottom separator as the styled footer includes a top border serving the same purpose /
 824   display: none;
 825 }
 826
 827 / Popups with only one item don't have a footer /
 828 #BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
 829 / These popups never have a footer /
 830 #BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
 831 #BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
 832   / And so they need some bottom padding: /
 833   padding-bottom: 4px;
 834 }
 835
 836 / Disabled (empty) item is always alone and never has an icon, so fix its left padding /
 837 #BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
 838   padding-left: 6px;
 839 }
 840 */
 841
 842 .PanelUI-subView menuseparator,
 843 .PanelUI-subView toolbarseparator,
 844 .cui-widget-panelview menuseparator {
 845   -moz-appearance: none;
 846   min-height: 0;
 847   border-top: 1px solid #9C9CFF;
 848   margin: 2px 0;
 849   padding: 0;
 850 }
 851
 852 .PanelUI-subView menuseparator,
 853 .PanelUI-subView toolbarseparator {
 854 /*  -moz-margin-start: -5px;
 855   -moz-margin-end: -4px;*/
 856 }
 857
 858 .PanelUI-subView menuseparator.small-separator,
 859 .PanelUI-subView toolbarseparator.small-separator {
 860 /*  margin-left: 5px;
 861   margin-right: 5px;*/
 862 }
 863
 864 .cui-widget-panelview menuseparator.small-separator {
 865 /*  margin-left: 10px;
 866   margin-right: 10px;*/
 867 }
 868
 869 .subviewbutton > .menu-accel-container {
 870   -moz-box-pack: start;
 871   -moz-margin-start: 10px;
 872   -moz-margin-end: auto;
 873   color: #A09090;
 874 }
 875
 876 #PanelUI-historyItems > toolbarbutton {
 877   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
 878 }
 879
 880 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
 881 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
 882 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
 883   width: 16px;
 884   height: 16px;
 885 }
 886
 887 toolbarbutton[panel-multiview-anchor="true"],
 888 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
 889   color: #000000;
 890   background-color: #008484;
 891 }
 892
 893 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
 894   display: none;
 895 }
 896
 897 #PanelUI-help[panel-multiview-anchor="true"] {
 898   background-image: none;
 899 }
 900
 901 #PanelUI-help[panel-multiview-anchor="true"]::after {
 902   content: "";
 903   position: absolute;
 904   top: 0;
 905   height: 100%;
 906   width: 38px;
 907   background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
 908   background-repeat: no-repeat;
 909   background-color: #008484;
 910   background-position: left 10px center, 0;
 911 }
 912
 913 #PanelUI-help[panel-multiview-anchor="true"]:-moz-locale-dir(rtl)::after {
 914   background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png);
 915   background-position: right 10px center, 0;
 916 }
 917
 918 toolbarbutton[panel-multiview-anchor="true"] {
 919   background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
 920   background-position: right calc((22.35em / 3 - 0.1px) / 2 - 38px + 2px) center;
 921   background-repeat: no-repeat;
 922 }
 923
 924 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
 925   background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
 926   background-position: left calc((22.35em / 3 - 0.1px) / 2 - 38px + 2px) center;
 927 }
 928
 929 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
 930 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
 931   display: none;
 932 }
 933
 934 #search-container[cui-areatype="menu-panel"],
 935 #wrapper-search-container[place="panel"] {
 936   width: 22.35em;
 937 }
 938
 939 #search-container[cui-areatype="menu-panel"] {
 940   margin-top: 6px;
 941   margin-bottom: 6px;
 942 }
 943
 944 toolbarpaletteitem[place="palette"] > #search-container {
 945   min-width: 7em;
 946   width: 7em;
 947 }
 948
 949 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
 950   padding: 0;
 951   transition-property: background-color, border-color;
 952   transition-duration: 150ms;
 953 }
 954
 955 /* Make direct siblings overlap borders: */
 956 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
 957 /*  border-top-color: transparent !important; */
 958 }
 959
 960 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
 961 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
 962 /*  margin-top: -1px; */
 963 }
 964
 965 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
 966   border: 0;
 967   padding: .5em;
 968   margin: 0;
 969   -moz-box-flex: 1;
 970   min-width: calc(22.35em / 3 - 0.1px);
 971   max-width: calc(22.35em / 3 - 0.1px);
 972   /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
 973      1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
 974   height: calc(2.2em + 4px);
 975   max-height: none;
 976   -moz-box-orient: horizontal;
 977 }
 978
 979 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
 980 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
 981   /* reduce the width with 2px for this button to compensate for two separators
 982      of 1px. */
 983   min-width: calc(22.35em / 3 - 0.1px - 2px);
 984   max-width: calc(22.35em / 3 - 0.1px - 2px);
 985 }
 986
 987 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
 988 /*  opacity: .25; */
 989 }
 990
 991 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
 992   min-width: 7ch;
 993 }
 994
 995 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
 996 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
 997 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
 998 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
 999   border-top-right-radius: 0;
1000   border-bottom-right-radius: 0;
1001 }
1002
1003 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
1004 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
1005 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
1006 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
1007   border-top-left-radius: 0;
1008   border-bottom-left-radius: 0;
1009 }
1010
1011 .toolbaritem-combined-buttons > separator {
1012   -moz-appearance: none;
1013   width: 3px;
1014   -moz-box-align: stretch;
1015 }
1016
1017 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
1018   margin: .5em 0;
1019   width: 1px;
1020   height: auto;
1021 /*  background: hsla(210,4%,10%,.15);*/
1022   transition-property: margin;
1023   transition-duration: 10ms;
1024   transition-timing-function: ease;
1025 }
1026
1027 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
1028   margin: 0;
1029 }
1030
1031 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
1032   padding: 0;
1033 }
1034
1035 .cui-widget-panelview,
1036 #widget-overflow-scroller {
1037   overflow-y: auto;
1038   overflow-x: hidden;
1039 }
1040
1041 #widget-overflow-scroller {
1042   max-height: 30em;
1043   margin-top: 10px;
1044   margin-bottom: 10px;
1045 }
1046
1047 #widget-overflow-list {
1048   width: 22.35em;
1049   padding-left: 10px;
1050   padding-right: 10px;
1051 }
1052
1053 toolbaritem[overflowedItem=true],
1054 toolbarbutton[overflowedItem=true] {
1055   width: 100%;
1056   max-width: 22.35em;
1057   min-height: 36px;
1058   background-repeat: no-repeat;
1059   background-position: 0 center;
1060 }
1061
1062 .widget-overflow-list .toolbarbutton-1,
1063 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1064   -moz-box-align: center;
1065   -moz-box-orient: horizontal;
1066 }
1067
1068 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
1069 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
1070   text-align: start;
1071   -moz-padding-start: .5em;
1072 }
1073
1074 #widget-overflow-list > .toolbaritem-combined-buttons {
1075   min-height: 28px;
1076 }
1077
1078 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1079   content: "";
1080   display: -moz-box;
1081   width: 1px;
1082   height: 18px;
1083   -moz-margin-end: -1px;
1084 }
1085
1086 .subviewbutton[checked="true"] {
1087   background-image: url("chrome://global/skin/menu/menu-check.gif");
1088   background-position: top 5px left 4px;
1089   background-repeat: no-repeat;
1090 }
1091
1092 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1093   background-position: top 5px right 4px;
1094 }
1095
1096 .subviewbutton[checked="true"]:hover {
1097   background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1098 }
1099
1100 .subbiewbutton > .menu-iconic-left {
1101   -moz-margin-end: 3px;
1102 }
1103
1104 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1105   visibility: hidden;
1106 }
1107
1108 .panel-mainview[panelid=customizationui-widget-panel],
1109 #customizationui-widget-multiview > .panel-viewcontainer,
1110 #customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack,
1111 #PanelUI-panicView > .panel-subview-body,
1112 #PanelUI-panicView {
1113   overflow: visible;
1114   color: #FF9F00;
1115 }
1116
1117 #PanelUI-panicView.cui-widget-panelview {
1118   min-width: 280px;
1119 }
1120
1121 #PanelUI-panic-timeframe {
1122   padding: 15px;
1123   border-bottom: 1px solid #A09090;
1124 }
1125
1126 #panic-button-success-icon,
1127 #PanelUI-panic-timeframe-icon,
1128 #PanelUI-panic-timeframe-icon-small {
1129   background-color: transparent;
1130   -moz-margin-end: 10px;
1131 }
1132
1133 #panic-button-success-icon,
1134 #PanelUI-panic-timeframe-icon {
1135   list-style-image: url(chrome://browser/skin/panic-panel/header.png);
1136   max-height: 48px;
1137   width: 48px;
1138 }
1139
1140 #PanelUI-panic-timeframe-icon-small {
1141   list-style-image: url(chrome://browser/skin/panic-panel/header-small.png);
1142   max-height: 32px;
1143   width: 32px;
1144 }
1145
1146 /* current attribute is only set when in use as a subview instead of a main view */
1147 #PanelUI-panicView[current] #PanelUI-panic-timeframe-icon {
1148   display: none;
1149 }
1150
1151 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-timeframe-icon-small {
1152   display: none;
1153 }
1154
1155 #panic-button-success-header,
1156 #PanelUI-panic-header {
1157   -moz-box-align: center;
1158   margin-bottom: 5px;
1159 }
1160
1161 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-header {
1162   margin-bottom: 0;
1163 }
1164
1165 #PanelUI-panic-timeframe-icon-small:-moz-locale-dir(rtl),
1166 #PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
1167   transform: scaleX(-1);
1168 }
1169
1170 /*
1171 .subviewradio {
1172 }
1173
1174 .subviewradio@buttonStateHover@ {
1175 }
1176
1177 .subviewradio[selected],
1178 .subviewradio[selected]:hover,
1179 .subviewradio@buttonStateActive@ {
1180 }
1181
1182 .subviewradio > .radio-check {
1183 }
1184
1185 .subviewradio > .radio-check[selected] {
1186 }
1187 */
1188
1189 #PanelUI-panic-explanations {
1190   padding: 10px 10px 0;
1191 }
1192
1193 #PanelUI-panic-actionlist-main-label {
1194   color: #A09090;
1195   font-size: 0.9em;
1196 }
1197
1198 .PanelUI-panic-actionlist {
1199   -moz-padding-start: 20px;
1200   padding-top: 2px;
1201   padding-bottom: 2px;
1202   background-size: 16px 16px;
1203   background-repeat: no-repeat;
1204   background-color: transparent;
1205   background-position: center left;
1206 }
1207
1208 .PanelUI-panic-actionlist:-moz-locale-dir(rtl) {
1209   background-position: center right;
1210 }
1211
1212 #PanelUI-panic-actionlist-cookies {
1213   background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0);
1214 }
1215
1216 #PanelUI-panic-actionlist-history {
1217   background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16);
1218 }
1219
1220 #PanelUI-panic-actionlist-windows {
1221   background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32);
1222 }
1223
1224 #PanelUI-panic-actionlist-newwindow {
1225   background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48);
1226 }
1227
1228 #PanelUI-panic-warning {
1229   color: #FF0000;
1230   text-align: center;
1231   width: 100%;
1232   margin-top: 20px;
1233 }
1234
1235 #PanelUI-panic-view-button {
1236   background-color: #FF0000;
1237   color: #000000;
1238 }
1239
1240 #PanelUI-panic-view-button:hover {
1241   background-color: #FFCF00;
1242 }
1243
1244 #PanelUI-panic-view-button:hover:active {
1245   background-color: #FF9F00;
1246 }
1247
1248 #PanelUI-panic-view-button > .toolbarbutton-text {
1249   text-align: center;
1250   text-shadow: none;
1251 }
1252
1253 #panic-button-success-closebutton {
1254 }
1255
1256 #panic-button-success-closebutton:hover {
1257 }
1258
1259 #panic-button-success-closebutton:hover:active {
1260 }
1261
1262 /* === END panelUIOverlay.inc.css === */
1263
1264 .panel-subviews {
1265   background-color: #000000;
1266 }
1267
1268 #PanelUI-contents #zoom-out-btn {
1269   padding-left: 12px;
1270   padding-right: 12px;
1271 }
1272
1273 #PanelUI-contents #zoom-in-btn {
1274   padding-left: 12px;
1275   padding-right: 12px;
1276 }
1277
1278 /* bookmark panel submenus */
1279
1280 #BMB_bookmarksPopup menupopup[placespopup=true] {
1281 /*  background: transparent;
1282   border: none;
1283   padding: 6px;*/
1284 }
1285
1286 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1287   /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1288 /*  background: var(--panel-arrowcontent-background);
1289   border: var(--panel-arrowcontent-border);
1290   border-radius: 3.5px;
1291   margin-top: -4px;*/
1292 }
1293
1294 #BMB_bookmarksPopup menupopup {
1295 /*  padding-top: 2px;*/
1296 }
1297
1298 /* Add some space at the top because there are no headers: */
1299 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox  {
1300 /*  padding-top: 4px;*/
1301 }
1302
1303 /* bookmark panel separator */
1304 #BMB_bookmarksPopup menuseparator {
1305   padding-top: 0;
1306   padding-bottom: 0;
1307 }
1308
1309 .subviewbutton > .menu-right,
1310 .subviewbutton > .menu-iconic-left {
1311 /*  padding-top: 1px;
1312   margin-top: 1px;
1313   margin-bottom: 2px;*/
1314 }
1315
1316 /* Disabled empty item looks too small otherwise, because it has no icon. */
1317 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1318 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1319 menuitem[type="checkbox"].subviewbutton {
1320   /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1321    * 2px for its border, see above */
1322 /*  min-height: 22px;*/
1323 }
1324
1325 .subviewbutton > .toolbarbutton-text {
1326 /*  padding-top: 3px;
1327   padding-bottom: 3px;*/
1328 }
1329
1330 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1331   -moz-appearance: none;
1332   border: 0;
1333   -moz-margin-start: 3px;
1334 }
1335
1336 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1337   padding: 0 2px;
1338   -moz-padding-start: 0;
1339   height: 18px;
1340 }
1341
1342 menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
1343 /*  transform: scaleX(-1); */
1344 }
1345
1346 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1347   padding: 0 6px;
1348 }
1349
1350 .subviewbutton > .toolbarbutton-text {
1351   -moz-padding-start: 16px;
1352 }
1353
1354 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1355   -moz-padding-start: 0;
1356 }
1357
1358 /* subviewbutton entries for social sidebars have images that come from external
1359 /* sources, and are not guaranteed to be the size we want, so force the size on
1360 /* those icons. */
1361 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1362   width: 16px;
1363   height: 16px;
1364 }
1365
1366 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1367   visibility: hidden;
1368 }
1369
1370 menu.subviewbutton > .menu-right {
1371   list-style-image: url("chrome://global/skin/menu/menu-arrow.gif");
1372 }
1373 menu.subviewbutton:hover > .menu-right,
1374 menu.subviewbutton[_moz-menuactive="true"] > .menu-right {
1375   list-style-image: url("chrome://global/skin/menu/menu-arrow-hover.gif");
1376 }
1377 menu[disabled="true"].subviewbutton > .menu-right {
1378   list-style-image: url("chrome://global/skin/menu/menu-arrow-disabled.gif");
1379 }