LCARStrek/browser/customizableui/panelUIOverlay.css

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