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