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   display: flex;
 597   flex: 1 1 0%;
 598   width: calc(22.35em + 30px);
 599   padding-inline-start: 15px;
 600   border-inline-start-style: none;
 601 }
 602
 603 #PanelUI-footer-addons > toolbarbutton:hover {
 604   background-color: #FFCF00;
 605 }
 606
 607 #PanelUI-footer-addons > toolbarbutton:active {
 608   background-color: #FF9F00;
 609 }
 610
 611 #PanelUI-footer-addons > toolbarbutton > .toolbarbutton-icon {
 612   width: 14px;
 613   height: 14px;
 614 }
 615
 616 #PanelUI-footer-addons > toolbarbutton::after {
 617   background: #FF0000 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center;
 618 }
 619
 620 #PanelUI-fxa-status {
 621   display: flex;
 622   flex: 1 1 0%;
 623   width: 1px;
 624 }
 625
 626 #PanelUI-footer-inner,
 627 #PanelUI-footer-fxa:not([hidden]) {
 628   display: flex;
 629   border-top: 1px solid var(--panel-separator-color);
 630 }
 631
 632 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner,
 633 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-fxa {
 634   position: relative;
 635 }
 636
 637 #PanelUI-footer-inner > toolbarseparator,
 638 #PanelUI-footer-fxa > toolbarseparator {
 639   border: 0;
 640   border-left: 1px solid var(--panel-separator-color);
 641   margin: 0;
 642 }
 643
 644 #PanelUI-footer-inner:hover > toolbarseparator,
 645 #PanelUI-footer-fxa:hover > toolbarseparator {
 646 /*  margin: 0;*/
 647 }
 648
 649 #PanelUI-update-status,
 650 #PanelUI-help,
 651 #PanelUI-fxa-label,
 652 #PanelUI-fxa-icon,
 653 #PanelUI-footer-addons > toolbarbutton,
 654 #PanelUI-customize,
 655 #PanelUI-quit {
 656   margin: 0;
 657   padding: 11px 0;
 658   box-sizing: border-box;
 659   min-height: 40px;
 660   box-shadow: none;
 661   border: none;
 662   border-radius: 0;
 663   transition: background-color;
 664   -moz-box-orient: horizontal;
 665 }
 666
 667 #PanelUI-update-status {
 668   border-top: 1px solid var(--panel-separator-color);
 669 }
 670
 671 #PanelUI-update-status {
 672   border-bottom: 1px solid transparent;
 673   margin-bottom: -1px;
 674 }
 675
 676 #PanelUI-update-status > .toolbarbutton-text {
 677   width: 0; /* Fancy cropping solution for flexbox. */
 678 }
 679
 680 #PanelUI-help[panel-multiview-anchor="true"] {
 681   -moz-image-region: rect(0, 32px, 16px, 16px);
 682 }
 683
 684 #PanelUI-help,
 685 #PanelUI-quit {
 686   min-width: 44px;
 687 }
 688
 689 #PanelUI-update-status > .toolbarbutton-text,
 690 #PanelUI-fxa-label > .toolbarbutton-text,
 691 #PanelUI-footer-addons > toolbarbutton > .toolbarbutton-text,
 692 #PanelUI-customize > .toolbarbutton-text {
 693   margin: 0;
 694   padding: 0 6px;
 695   text-align: start;
 696 }
 697
 698 #PanelUI-help > .toolbarbutton-text,
 699 #PanelUI-quit > .toolbarbutton-text,
 700 #PanelUI-fxa-avatar > .toolbarbutton-text {
 701   display: none;
 702 }
 703
 704 #PanelUI-update-status > .toolbarbutton-icon,
 705 #PanelUI-fxa-label > .toolbarbutton-icon,
 706 #PanelUI-fxa-icon > .toolbarbutton-icon,
 707 #PanelUI-customize > .toolbarbutton-icon,
 708 #PanelUI-help > .toolbarbutton-icon,
 709 #PanelUI-quit > .toolbarbutton-icon {
 710   margin-inline-end: 0;
 711 }
 712
 713 #PanelUI-fxa-icon {
 714   padding-inline-start: 15px;
 715   padding-inline-end: 15px;
 716 }
 717
 718 #PanelUI-fxa-label,
 719 #PanelUI-footer-addons > toolbarbutton,
 720 #PanelUI-customize {
 721   flex: 1;
 722   padding-inline-start: 15px;
 723   border-inline-start-style: none;
 724 }
 725
 726 #PanelUI-footer-fxa[fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
 727 #PanelUI-footer-fxa[fxaprofileimage="enabled"]:not([fxastatus="error"]) > #PanelUI-fxa-status > #PanelUI-fxa-label {
 728   padding-inline-start: 0px;
 729 }
 730
 731 #PanelUI-update-status {
 732   width: calc(var(--panel-ui-menuPanelWidth) + 30px);
 733   padding-inline-start: 15px;
 734   border-inline-start-style: none;
 735 }
 736
 737 #PanelUI-update-status {
 738   list-style-image: url(chrome://branding/content/icon16.png);
 739 }
 740
 741 #PanelUI-fxa-label,
 742 #PanelUI-fxa-icon {
 743   list-style-image: url("chrome://browser/skin/syncFx-horizontalbar.png");
 744 }
 745
 746 #PanelUI-remotetabs {
 747   --panel-ui-sync-illustration-height: 157.5px;
 748 }
 749
 750 .PanelUI-remotetabs-instruction-title,
 751 .PanelUI-remotetabs-instruction-label,
 752 #PanelUI-remotetabs-mobile-promo {
 753   /* If you change the margin here, the min-height of the synced tabs panel
 754     (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
 755     need adjusting (see bug 1248506) */
 756   margin: 15px;
 757   text-align: center;
 758   text-shadow: none;
 759   max-width: 15em;
 760   color: #A09090;
 761 }
 762
 763 .PanelUI-remotetabs-instruction-title {
 764   font-size: 1.3em;
 765 }
 766
 767 /* The boxes with "instructions" get extra top and bottom padding for space
 768    around the illustration and buttons */
 769 .PanelUI-remotetabs-instruction-box {
 770   /* If you change the padding here, the min-height of the synced tabs panel
 771     (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
 772     need adjusting (see bug 1248506) */
 773   padding-bottom: 30px;
 774   padding-top: 15px;
 775 }
 776
 777 .PanelUI-remotetabs-prefs-button {
 778 /*
 779   -moz-appearance: none;
 780   background-color: #0096dd;
 781   / !important for the color as an OSX specific rule when a lightweight theme
 782      is used for buttons in the toolbox overrides. See bug 1238531 for details /
 783   color: white !important;
 784   border-radius: 2px;
 785   / If you change the margin or padding below, the min-height of the synced tabs
 786      panel (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync,
 787      etc) may need adjusting (see bug 1248506) /
 788   margin-top: 10px;
 789   margin-bottom: 10px;
 790   padding: 8px;
 791   text-shadow: none;
 792 */
 793   min-width: 200px;
 794 }
 795
 796 .PanelUI-remotetabs-prefs-button:hover,
 797 .PanelUI-remotetabs-prefs-button:hover:active {
 798 /*  background-color: #018acb; */
 799 }
 800
 801 .remotetabs-promo-link {
 802   margin: 0;
 803 }
 804
 805 .PanelUI-remotetabs-notabsforclient-label {
 806   color: #A09090;
 807   /* This margin is to line this label up with the labels in toolbarbuttons. */
 808   margin-left: 28px;
 809 }
 810
 811 .fxaSyncIllustration {
 812   height: var(--panel-ui-sync-illustration-height);
 813   list-style-image: url(chrome://browser/skin/fxa/sync-illustration.svg);
 814 }
 815
 816 .PanelUI-remotetabs-prefs-button > .toolbarbutton-text {
 817   /* !important to override ".cui-widget-panel toolbarbutton > .toolbarbutton-text" above. */
 818   text-align: center !important;
 819   text-shadow: none;
 820 }
 821
 822 #PanelUI-remotetabs[mainview] { /* panel anchored to toolbar button might be too skinny */
 823   min-width: 19em;
 824 }
 825
 826 /* Work around bug 1224412 - these boxes will cause scrollbars to appear when
 827    the panel is anchored to a toolbar button.
 828 */
 829 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync,
 830 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-reauthsync,
 831 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-nodevicespane,
 832 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-tabsdisabledpane {
 833   min-height: calc(var(--panel-ui-sync-illustration-height) +
 834                    20px + /* margin of .PanelUI-remotetabs-prefs-button */
 835                    16px + /* padding of .PanelUI-remotetabs-prefs-button */
 836                    30px + /* margin of .PanelUI-remotetabs-instruction-label */
 837                    30px + 15px + /* padding of .PanelUI-remotetabs-instruction-box */
 838                    11em);
 839 }
 840
 841 #PanelUI-remotetabs-tabslist > label[itemtype="client"] {
 842   color: #A09090;
 843 }
 844
 845 /* Collapse the non-active vboxes in the remotetabs deck to use only the
 846    height the active box needs */
 847 #PanelUI-remotetabs-deck:not([selectedIndex="1"]) > #PanelUI-remotetabs-tabsdisabledpane,
 848 #PanelUI-remotetabs-deck:not([selectedIndex="2"]) > #PanelUI-remotetabs-fetching,
 849 #PanelUI-remotetabs-deck:not([selectedIndex="3"]) > #PanelUI-remotetabs-nodevicespane {
 850   visibility: collapse;
 851 }
 852
 853 #PanelUI-remotetabs-main[devices-status="single"] > #PanelUI-remotetabs-buttons {
 854   display: none;
 855 }
 856
 857 #PanelUI-fxa-icon[syncstatus="active"]:not([disabled]) {
 858   list-style-image: url("chrome://browser/skin/syncFxProgress-horizontalbar.png");
 859 }
 860
 861 #PanelUI-customize {
 862   list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
 863 }
 864
 865 #customization-panelHolder #PanelUI-customize {
 866   list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
 867 }
 868
 869 #PanelUI-help {
 870   list-style-image: url("chrome://browser/skin/menuPanel-help.png");
 871 }
 872
 873 #PanelUI-quit {
 874   border-inline-end-style: none;
 875   list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
 876 }
 877
 878 #PanelUI-fxa-label,
 879 #PanelUI-fxa-icon,
 880 #PanelUI-footer-addons > toolbarbutton,
 881 #PanelUI-customize,
 882 #PanelUI-help,
 883 #PanelUI-quit {
 884   -moz-image-region: rect(0, 16px, 16px, 0);
 885 }
 886
 887 #PanelUI-footer-fxa[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon,
 888 #PanelUI-footer-fxa[fxastatus="error"][fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon {
 889   display: none;
 890 }
 891
 892 #PanelUI-footer-fxa[fxastatus="error"]:not([fxaprofileimage="set"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
 893   display: none;
 894 }
 895
 896 #PanelUI-fxa-status[disabled],
 897 #PanelUI-fxa-icon[disabled] {
 898   pointer-events: none;
 899 }
 900
 901 #PanelUI-fxa-avatar {
 902   width: 32px;
 903   height: 32px;
 904   border-radius: 50%;
 905   background-repeat: no-repeat;
 906   background-position: 0 0;
 907   background-size: contain;
 908   align-self: center;
 909   margin: 0px 7px;
 910   padding: 0px;
 911   border: 0px none;
 912   margin-inline-end: 0;
 913 }
 914
 915 #PanelUI-footer-fxa[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
 916   list-style-image: url(chrome://browser/skin/fxa/default-avatar.svg);
 917 }
 918
 919 #PanelUI-customize:hover,
 920 #PanelUI-help:not([disabled]):hover,
 921 #PanelUI-quit:not([disabled]):hover,
 922 #PanelUI-customize:hover:active,
 923 #PanelUI-help:not([disabled]):hover:active,
 924 #PanelUI-quit:not([disabled]):hover:active,
 925 #PanelUI-help[panel-multiview-anchor="true"] {
 926   -moz-image-region: rect(0, 32px, 16px, 16px);
 927 }
 928
 929 #PanelUI-help[disabled],
 930 #PanelUI-quit[disabled],
 931 #PanelUI-fxa-icon[disabled],
 932 #PanelUI-fxa-avatar[disabled],
 933 #PanelUI-fxa-label[disabled] > .toolbarbutton-icon,
 934 #PanelUI-fxa-status::after {
 935   -moz-image-region: rect(0, 48px, 16px, 32px);
 936 }
 937
 938 #PanelUI-fxa-status:not([disabled]):hover,
 939 #PanelUI-fxa-icon:not([disabled]):hover,
 940 #PanelUI-help:not([disabled]):hover,
 941 #PanelUI-customize:hover,
 942 #PanelUI-quit:not([disabled]):hover {
 943 }
 944
 945 #PanelUI-fxa-status:not([disabled]):hover:active,
 946 #PanelUI-fxa-icon:not([disabled]):hover:active,
 947 #PanelUI-help:not([disabled]):hover:active,
 948 #PanelUI-customize:hover:active,
 949 #PanelUI-quit:not([disabled]):hover:active {
 950 }
 951
 952 #PanelUI-fxa-status:not([disabled]):hover,
 953 #PanelUI-fxa-status:not([disabled]):hover:active,
 954 #PanelUI-fxa-icon:not([disabled]):hover,
 955 #PanelUI-fxa-icon:not([disabled]):hover:active {
 956 }
 957
 958 #PanelUI-footer-fxa[fxastatus="error"] {
 959   background-color: #FF0000;
 960   color: #000000;
 961 }
 962
 963 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover {
 964   background-color: #FFCF00;
 965 }
 966
 967 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover:active {
 968   background-color: #FF9F00;
 969 }
 970
 971 #PanelUI-update-status {
 972 /*  color: black; */
 973 }
 974
 975 #PanelUI-update-status[update-status="succeeded"] {
 976   background-color: #008484;
 977   color: #000000;
 978 }
 979
 980 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover {
 981   background-color: #FFCF00;
 982 }
 983
 984 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover:active {
 985   background-color: #FF9F00;
 986 }
 987
 988 #PanelUI-update-status[update-status="failed"] {
 989   background-color: #FF0000;
 990   color: #000000;
 991 }
 992
 993 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover {
 994   background-color: #FFCF00;
 995 }
 996
 997 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover:active {
 998   background-color: #FF9F00;
 999 }
1000
1001 #PanelUI-quit:not([disabled]):hover {
1002   background-color: #FF0000;
1003 }
1004
1005 #PanelUI-quit:not([disabled]):hover:active {
1006   background-color: #FF9F00;
1007 }
1008
1009 #customization-panelHolder #PanelUI-customize {
1010   color: #FFCF00;
1011   background-color: #008484;
1012   text-shadow: none;
1013   margin-top: -1px;
1014 }
1015
1016 #customization-panelHolder #PanelUI-customize + toolbarseparator {
1017   display: none;
1018 }
1019
1020 #customization-panelHolder #PanelUI-customize:hover,
1021 #customization-panelHolder #PanelUI-customize:hover:active {
1022   background-color: #FFCF00;
1023   color: #000000;
1024 }
1025
1026 #customization-palette .toolbarbutton-multiline-text,
1027 #customization-palette .toolbarbutton-text {
1028   display: none;
1029 }
1030
1031 panelview .toolbarbutton-1,
1032 .subviewbutton,
1033 .widget-overflow-list .toolbarbutton-1,
1034 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1035 .share-provider-button,
1036 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1037 /*  padding: 0 6px;
1038   background-color: transparent;
1039   border-radius: 2px;
1040   border-style: solid;
1041   border-color: transparent;*/
1042 }
1043
1044 panelview .toolbarbutton-1,
1045 .subviewbutton,
1046 .widget-overflow-list .toolbarbutton-1,
1047 .share-provider-button,
1048 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1049   border-width: 0;
1050 }
1051
1052 .subviewbutton.panel-subview-footer {
1053 /*  border-radius: 0; */
1054   margin: 2px 0 0;
1055 }
1056
1057 .subviewbutton.panel-subview-footer > .menu-text {
1058   margin-inline-start: 0px !important;
1059   padding-inline-start: 6px;
1060   padding-inline-end: 6px;
1061   -moz-box-flex: 0;
1062   text-align: center;
1063 }
1064
1065 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
1066   margin: 0;
1067 }
1068
1069 .subviewbutton.panel-subview-footer > .toolbarbutton-text {
1070   text-align: center;
1071   padding: 0;
1072 }
1073
1074 .subviewbutton.panel-subview-footer > .menu-accel-container {
1075   padding-inline-start: 6px;
1076 }
1077
1078 .subviewbutton:not(.panel-subview-footer) {
1079   margin: 0;
1080 }
1081
1082 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
1083 /* Bookmark items need a more specific selector. */
1084 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
1085 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
1086 /*  font: menu;*/
1087 }
1088
1089 .PanelUI-subView .subviewbutton[shortcut]::after {
1090   content: attr(shortcut);
1091   float: right;
1092   color: #A09090;
1093 }
1094
1095 .PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
1096   margin-inline-start: 10px;
1097 }
1098
1099 /* This is a <label> but it should fit in with the menu font- and colorwise. */
1100 #PanelUI-characterEncodingView-autodetect-label {
1101   font: menu;
1102   color: inherit;
1103 }
1104
1105 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
1106 /*  margin-left: 4px;
1107   margin-right: 4px;*/
1108 }
1109
1110 panelview .toolbarbutton-1,
1111 .widget-overflow-list > .toolbarbutton-1:not(:first-child),
1112 .widget-overflow-list > .toolbaritem-combined-buttons:not(:first-child) {
1113   margin-top: 6px;
1114 }
1115
1116 /*
1117 panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
1118 toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover,
1119 menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
1120 menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
1121 .share-provider-button:not(:-moz-any([disabled],[open],:active)):hover,
1122 .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
1123 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
1124     > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
1125   background-color: var(--arrowpanel-dimmed);
1126   border-color: var(--panel-separator-color);
1127 }
1128
1129 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[open],:active)):hover {
1130   border-color: var(--panel-separator-color);
1131 }
1132
1133 panelview .toolbarbutton-1:-moz-any(:not([disabled]):-moz-any([open],:hover:active),[checked=true]),
1134 toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],:hover:active),
1135 menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
1136 menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
1137 .share-provider-button:not([disabled]):-moz-any([open],:hover:active),
1138 .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active),
1139 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
1140     > toolbarbutton:not([disabled]):-moz-any([open],:hover:active) {
1141   background-color: var(--arrowpanel-dimmed-further);
1142   border-color: var(--panel-separator-color);
1143   box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
1144 }
1145
1146 .subviewbutton.panel-subview-footer {
1147   margin: 4px -4px -4px;
1148   background-color: var(--arrowpanel-dimmed);
1149   border-top: 1px solid var(--panel-separator-color);
1150   border-radius: 0;
1151 }
1152
1153 menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
1154 .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
1155   background-color: var(--arrowpanel-dimmed-further);
1156 }
1157
1158 menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active),
1159 .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active) {
1160   background-color: var(--arrowpanel-dimmed-even-further);
1161   box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
1162 }
1163
1164 #BMB_bookmarksPopup .subviewbutton {
1165   font: menu;
1166   font-weight: normal;
1167 }
1168
1169 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
1170   color: inherit;
1171 }
1172
1173 #BMB_bookmarksPopup .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
1174 #BMB_bookmarksPopup .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
1175   -moz-appearance: none;
1176   margin-top: 0;
1177   margin-bottom: 0;
1178 }
1179
1180 / Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
1181 #BMB_bookmarksPopup arrowscrollbox {
1182   padding-bottom: 0px;
1183 }
1184
1185 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
1186   / Hide bottom separator as the styled footer includes a top border serving the same purpose /
1187   display: none;
1188 }
1189
1190 / Popups with only one item don't have a footer /
1191 #BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
1192 / These popups never have a footer /
1193 #BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
1194 #BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
1195 #BMB_mobileBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1196   / And so they need some bottom padding: /
1197   padding-bottom: 4px;
1198 }
1199
1200 / Disabled (empty) item is always alone and never has an icon, so fix its left padding /
1201 #BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
1202   padding-left: 6px;
1203 }
1204 */
1205
1206 .PanelUI-subView menuseparator,
1207 .PanelUI-subView toolbarseparator,
1208 .cui-widget-panelview menuseparator {
1209   -moz-appearance: none;
1210   min-height: 0;
1211   border-top: 1px solid var(--panel-separator-color);
1212   margin: 2px 0;
1213   padding: 0;
1214 }
1215
1216 .PanelUI-subView menuseparator,
1217 .PanelUI-subView toolbarseparator {
1218 /*  margin-inline-start: -5px;
1219   margin-inline-end: -4px;*/
1220 }
1221
1222 .PanelUI-subView menuseparator.small-separator,
1223 .PanelUI-subView toolbarseparator.small-separator {
1224 /*  margin-left: 5px;
1225   margin-right: 5px;*/
1226 }
1227
1228 .cui-widget-panelview menuseparator.small-separator {
1229 /*  margin-left: 10px;
1230   margin-right: 10px;*/
1231 }
1232
1233 .subviewbutton > .menu-accel-container {
1234   -moz-box-pack: start;
1235   margin-inline-start: 10px;
1236   margin-inline-end: auto;
1237   color: #A09090;
1238 }
1239
1240 #PanelUI-remotetabs-tabslist > toolbarbutton,
1241 #PanelUI-historyItems > toolbarbutton {
1242   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
1243 }
1244
1245 @media (min-resolution: 1.1dppx) {
1246   #PanelUI-remotetabs-tabslist > toolbarbutton,
1247   #PanelUI-historyItems > toolbarbutton {
1248     list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
1249   }
1250 }
1251
1252 #PanelUI-remotetabs-tabslist > toolbarbutton > .toolbarbutton-icon,
1253 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
1254 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
1255 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
1256   width: 16px;
1257   height: 16px;
1258 }
1259
1260 toolbarbutton[panel-multiview-anchor="true"],
1261 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
1262   color: #000000;
1263   background-color: #008484;
1264 }
1265
1266 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
1267   display: none;
1268 }
1269
1270 #PanelUI-help[panel-multiview-anchor="true"] {
1271   background-image: none;
1272 }
1273
1274 #PanelUI-help[panel-multiview-anchor="true"]::after {
1275   content: "";
1276   position: absolute;
1277   top: 0;
1278   height: 100%;
1279   width: var(--panel-ui-exit-subview-gutter-width);
1280   background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1281   background-repeat: no-repeat;
1282   background-color: #008484;
1283   background-position: left 10px center, 0;
1284 }
1285
1286 #PanelUI-help[panel-multiview-anchor="true"]:-moz-locale-dir(rtl)::after {
1287   background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png);
1288   background-position: right 10px center, 0;
1289 }
1290
1291 toolbarbutton[panel-multiview-anchor="true"] {
1292   background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1293   background-position: right var(--panel-ui-menuPanelMultiviewBgPos) center;
1294   background-repeat: no-repeat;
1295 }
1296
1297 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
1298   background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
1299   background-position: left var(--panel-ui-menuPanelMultiviewBgPos) center;
1300 }
1301
1302 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
1303 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
1304   display: none;
1305 }
1306
1307 #search-container[cui-areatype="menu-panel"],
1308 #wrapper-search-container[place="panel"] {
1309   width: var(--panel-ui-menuPanelWidth);
1310 }
1311
1312 #search-container[cui-areatype="menu-panel"] {
1313   margin-top: 6px;
1314   margin-bottom: 6px;
1315 }
1316
1317 toolbarpaletteitem[place="palette"] > #search-container {
1318   min-width: 7em;
1319   width: 7em;
1320 }
1321
1322 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1323   background-color: transparent;
1324   padding: 0;
1325   transition-property: background-color, border-color;
1326   transition-duration: 150ms;
1327 }
1328
1329 /* Make direct siblings overlap borders: */
1330 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1331 /*  border-top-color: transparent !important; */
1332 }
1333
1334 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
1335 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
1336 /*  margin-top: -1px; */
1337 }
1338
1339 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1340   border: 0;
1341   padding: .5em;
1342   margin: 0;
1343   -moz-box-flex: 1;
1344   min-width: var(--panel-ui-menuPanelButtonWidth);
1345   max-width: var(--panel-ui-menuPanelButtonWidth);
1346   /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
1347      1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
1348   height: calc(2.2em + 4px);
1349   max-height: none;
1350   -moz-box-orient: horizontal;
1351 }
1352
1353 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1354 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
1355   /* reduce the width with 2px for this button to compensate for two separators
1356      of 1px. */
1357   min-width: var(--panel-ui-menuPanelButtonWidth-min2);
1358   max-width: var(--panel-ui-menuPanelButtonWidth-min2);
1359 }
1360
1361 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
1362 /*  opacity: .25; */
1363 }
1364
1365 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
1366   min-width: 7ch;
1367 }
1368
1369 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
1370 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
1371 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
1372 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
1373   border-top-right-radius: 0;
1374   border-bottom-right-radius: 0;
1375 }
1376
1377 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
1378 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
1379 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
1380 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
1381   border-top-left-radius: 0;
1382   border-bottom-left-radius: 0;
1383 }
1384
1385 .toolbaritem-combined-buttons > separator {
1386   -moz-appearance: none;
1387   width: 3px;
1388   -moz-box-align: stretch;
1389 }
1390
1391 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
1392   margin: .5em 0;
1393   width: 1px;
1394   height: auto;
1395 /*  background: var(--panel-separator-color);*/
1396   transition-property: margin;
1397   transition-duration: 10ms;
1398   transition-timing-function: ease;
1399 }
1400
1401 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
1402   margin: 0;
1403 }
1404
1405 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
1406   padding: 0;
1407 }
1408
1409 .cui-widget-panelview,
1410 #widget-overflow-scroller {
1411   overflow-y: auto;
1412   overflow-x: hidden;
1413 }
1414
1415 #widget-overflow-scroller {
1416   max-height: 30em;
1417   margin-top: 10px;
1418   margin-bottom: 10px;
1419 }
1420
1421 #widget-overflow-list {
1422   width: var(--panel-ui-menuPanelWidth);
1423   padding-left: 10px;
1424   padding-right: 10px;
1425 }
1426
1427 toolbaritem[overflowedItem=true],
1428 toolbarbutton[overflowedItem=true] {
1429   width: 100%;
1430   max-width: var(--panel-ui-menuPanelWidth);
1431   min-height: 36px;
1432   background-repeat: no-repeat;
1433   background-position: 0 center;
1434 }
1435
1436 .widget-overflow-list .toolbarbutton-1,
1437 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1438   -moz-box-align: center;
1439   -moz-box-orient: horizontal;
1440 }
1441
1442 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
1443 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
1444   text-align: start;
1445   padding-inline-start: .5em;
1446 }
1447
1448 #widget-overflow-list > .toolbaritem-combined-buttons {
1449   min-height: 28px;
1450 }
1451
1452 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1453   content: "";
1454   display: -moz-box;
1455   width: 1px;
1456   height: 18px;
1457   margin-inline-end: -1px;
1458 }
1459
1460 .subviewbutton[checked="true"] {
1461   background-image: url("chrome://global/skin/menu/menu-check.gif");
1462   background-position: top 5px left 4px;
1463   background-repeat: no-repeat;
1464 }
1465
1466 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1467   background-position: top 5px right 4px;
1468 }
1469
1470 .subviewbutton[checked="true"]:hover {
1471   background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1472 }
1473
1474 .subviewbutton > .menu-iconic-left {
1475   margin-inline-end: 3px;
1476 }
1477
1478 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1479   visibility: hidden;
1480 }
1481
1482 #PanelUI-containersItems > .subviewbutton > .toolbarbutton-icon {
1483   width: 16px;
1484   height: 16px;
1485 }
1486
1487 .panel-mainview[panelid=customizationui-widget-panel],
1488 #customizationui-widget-multiview > .panel-viewcontainer,
1489 #customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack,
1490 #PanelUI-panicView > .panel-subview-body,
1491 #PanelUI-panicView {
1492   overflow: visible;
1493   color: #FF9F00;
1494 }
1495
1496 #PanelUI-panicView.cui-widget-panelview {
1497   min-width: 280px;
1498 }
1499
1500 #PanelUI-panic-timeframe {
1501   padding: 15px;
1502   border-bottom: 1px solid var(--panel-separator-color);
1503 }
1504
1505 #panic-button-success-icon,
1506 #PanelUI-panic-timeframe-icon,
1507 #PanelUI-panic-timeframe-icon-small {
1508   background-color: transparent;
1509   margin-inline-end: 10px;
1510 }
1511
1512 #panic-button-success-icon,
1513 #PanelUI-panic-timeframe-icon {
1514   list-style-image: url(chrome://browser/skin/panic-panel/header.png);
1515   max-height: 48px;
1516   width: 48px;
1517 }
1518
1519 #PanelUI-panic-timeframe-icon-small {
1520   list-style-image: url(chrome://browser/skin/panic-panel/header-small.png);
1521   max-height: 32px;
1522   width: 32px;
1523 }
1524
1525 /* current attribute is only set when in use as a subview instead of a main view */
1526 #PanelUI-panicView[current] #PanelUI-panic-timeframe-icon {
1527   display: none;
1528 }
1529
1530 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-timeframe-icon-small {
1531   display: none;
1532 }
1533
1534 #panic-button-success-header,
1535 #PanelUI-panic-header {
1536   -moz-box-align: center;
1537   margin-bottom: 5px;
1538 }
1539
1540 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-header {
1541   margin-bottom: 0;
1542 }
1543
1544 #PanelUI-panic-timeframe-icon-small:-moz-locale-dir(rtl),
1545 #PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
1546   transform: scaleX(-1);
1547 }
1548
1549 /*
1550 .subviewradio {
1551 }
1552
1553 .subviewradio@buttonStateHover@ {
1554 }
1555
1556 .subviewradio[selected],
1557 .subviewradio[selected]:hover,
1558 .subviewradio@buttonStateActive@ {
1559 }
1560
1561 .subviewradio > .radio-check {
1562 }
1563
1564 .subviewradio > .radio-check[selected] {
1565 }
1566 */
1567
1568 #PanelUI-panic-explanations {
1569   padding: 10px 10px 0;
1570 }
1571
1572 #PanelUI-panic-actionlist-main-label {
1573   color: #A09090;
1574   font-size: 0.9em;
1575 }
1576
1577 .PanelUI-panic-actionlist {
1578   padding-inline-start: 20px;
1579   padding-top: 2px;
1580   padding-bottom: 2px;
1581   background-size: 16px 16px;
1582   background-repeat: no-repeat;
1583   background-color: transparent;
1584   background-position: center left;
1585 }
1586
1587 .PanelUI-panic-actionlist:-moz-locale-dir(rtl) {
1588   background-position: center right;
1589 }
1590
1591 #PanelUI-panic-actionlist-cookies {
1592   background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0);
1593 }
1594
1595 #PanelUI-panic-actionlist-history {
1596   background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16);
1597 }
1598
1599 #PanelUI-panic-actionlist-windows {
1600   background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32);
1601 }
1602
1603 #PanelUI-panic-actionlist-newwindow {
1604   background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48);
1605 }
1606
1607 #PanelUI-panic-warning {
1608   color: #FF0000;
1609   text-align: center;
1610   width: 100%;
1611   margin-top: 20px;
1612 }
1613
1614 #PanelUI-panic-view-button {
1615   background-color: #FF0000;
1616   color: #000000;
1617 }
1618
1619 #PanelUI-panic-view-button:hover {
1620   background-color: #FFCF00;
1621 }
1622
1623 #PanelUI-panic-view-button:hover:active {
1624   background-color: #FF9F00;
1625 }
1626
1627 #PanelUI-panic-view-button > .toolbarbutton-text {
1628   text-align: center;
1629   text-shadow: none;
1630 }
1631
1632 #panic-button-success-closebutton {
1633 }
1634
1635 #panic-button-success-closebutton:hover {
1636 }
1637
1638 #panic-button-success-closebutton:hover:active {
1639 }
1640
1641 /* === END panelUI.inc.css === */
1642
1643 .panel-subviews {
1644   background-color: var(--arrowpanel-background);
1645 }
1646
1647 #PanelUI-contents #zoom-out-btn {
1648   padding-left: 12px;
1649   padding-right: 12px;
1650 }
1651
1652 #PanelUI-contents #zoom-in-btn {
1653   padding-left: 12px;
1654   padding-right: 12px;
1655 }
1656
1657 /* bookmark panel submenus */
1658
1659 #BMB_bookmarksPopup menupopup[placespopup=true] {
1660 /*  background: transparent;
1661   border: none;
1662   padding: 6px;*/
1663 }
1664
1665 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1666   /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1667 /*  box-shadow: 0 0 4px rgba(0,0,0,0.2);
1668   background: var(--arrowpanel-background);
1669   color: var(--arrowpanel-color);
1670   border: 1px solid var(--arrowpanel-border-color);
1671   border-radius: 3.5px;
1672   margin-top: -4px;*/
1673 }
1674
1675 #BMB_bookmarksPopup menupopup {
1676 /*  padding-top: 2px;*/
1677 }
1678
1679 /* Add some space at the top because there are no headers: */
1680 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox  {
1681 /*  padding-top: 4px;*/
1682 }
1683
1684 /* bookmark panel separator */
1685 #BMB_bookmarksPopup menuseparator {
1686   padding-top: 0;
1687   padding-bottom: 0;
1688 }
1689
1690 .subviewbutton > .menu-right,
1691 .subviewbutton > .menu-iconic-left {
1692 /*  padding-top: 1px;
1693   margin-top: 1px;
1694   margin-bottom: 2px;*/
1695 }
1696
1697 .subviewbutton:-moz-any([image], .bookmark-item) > .toolbarbutton-icon {
1698   /* This catches bookmarks, history items, and sync tabs items */
1699   width: 16px;
1700   height: 16px;
1701 }
1702
1703 /* Disabled empty item looks too small otherwise, because it has no icon. */
1704 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1705 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1706 menuitem[type="checkbox"].subviewbutton {
1707   /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1708    * 2px for its border, see above */
1709 /*  min-height: 22px;*/
1710 }
1711
1712 .subviewbutton > .toolbarbutton-text {
1713 /*  padding-top: 3px;
1714   padding-bottom: 3px;*/
1715 }
1716
1717 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1718   -moz-appearance: none;
1719   border: 0;
1720   margin-inline-start: 3px;
1721 }
1722
1723 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1724   padding: 0 2px;
1725   padding-inline-start: 0;
1726   height: 18px;
1727 }
1728
1729 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1730   padding: 0 6px;
1731 }
1732
1733 .subviewbutton > .toolbarbutton-text {
1734   padding-inline-start: 18px; /* 16px for icons plus the 2px spacing from the rule below */
1735 }
1736
1737 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1738   padding-inline-start: 2px;
1739 }
1740
1741 /* subviewbutton entries for social sidebars have images that come from external
1742 /* sources, and are not guaranteed to be the size we want, so force the size on
1743 /* those icons. */
1744 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1745   width: 16px;
1746   height: 16px;
1747 }
1748
1749 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1750   visibility: hidden;
1751 }
1752
1753 menu.subviewbutton > .menu-right {
1754   list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow");
1755   /* Reset the rect we inherit from the button: */
1756   -moz-image-region: auto;
1757 }
1758
1759 menu.subviewbutton:not([disabled="true"]):hover > .menu-right,
1760 menu.subviewbutton:not([disabled="true"])[_moz-menuactive="true"] > .menu-right {
1761   list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-hover");
1762 }
1763
1764 menu[disabled="true"].subviewbutton > .menu-right {
1765   list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-disabled");
1766 }
1767
1768 menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
1769   transform: scaleX(-1);
1770 }