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