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