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