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