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