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.png");
1368 }
1369
1370 @media (min-resolution: 1.1dppx) {
1371   #PanelUI-remotetabs-tabslist > toolbarbutton[itemtype="tab"],
1372   #PanelUI-historyItems > toolbarbutton {
1373     list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
1374   }
1375 }
1376
1377 #PanelUI-remotetabs-tabslist > toolbarbutton[itemtype="tab"] > .toolbarbutton-icon,
1378 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
1379 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
1380 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
1381   width: 16px;
1382   height: 16px;
1383 }
1384
1385 toolbarbutton[panel-multiview-anchor="true"],
1386 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
1387   color: #000000;
1388   background-color: #008484;
1389 }
1390
1391 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
1392   display: none;
1393 }
1394
1395 #PanelUI-help[panel-multiview-anchor="true"] {
1396   background-image: none;
1397 }
1398
1399 #PanelUI-help[panel-multiview-anchor="true"]::after {
1400   content: "";
1401   position: absolute;
1402   top: 0;
1403   height: 100%;
1404   width: var(--panel-ui-exit-subview-gutter-width);
1405   background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1406   background-repeat: no-repeat;
1407   background-color: #008484;
1408   background-position: left 10px center, 0;
1409 }
1410
1411 #PanelUI-help[panel-multiview-anchor="true"]:-moz-locale-dir(rtl)::after {
1412   background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png);
1413   background-position: right 10px center, 0;
1414 }
1415
1416 toolbarbutton[panel-multiview-anchor="true"] {
1417   background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1418   background-position: right var(--panel-ui-menuPanelMultiviewBgPos) center;
1419   background-repeat: no-repeat;
1420 }
1421
1422 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
1423   background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
1424   background-position: left var(--panel-ui-menuPanelMultiviewBgPos) center;
1425 }
1426
1427 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
1428 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
1429   display: none;
1430 }
1431
1432 #search-container[cui-areatype="menu-panel"],
1433 #wrapper-search-container[place="panel"] {
1434   width: var(--panel-ui-menuPanelWidth);
1435 }
1436
1437 #search-container[cui-areatype="menu-panel"] {
1438   margin-top: 6px;
1439   margin-bottom: 6px;
1440 }
1441
1442 toolbarpaletteitem[place="palette"] > #search-container {
1443   min-width: 7em;
1444   width: 7em;
1445 }
1446
1447 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1448   background-color: transparent;
1449   padding: 0;
1450   transition-property: background-color, border-color;
1451   transition-duration: 150ms;
1452 }
1453
1454 /* Make direct siblings overlap borders: */
1455 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1456 /*  border-top-color: transparent !important; */
1457 }
1458
1459 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
1460 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
1461 /*  margin-top: -1px; */
1462 }
1463
1464 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1465   border: 0;
1466   padding: .5em;
1467   margin: 0;
1468   -moz-box-flex: 1;
1469   min-width: var(--panel-ui-menuPanelButtonWidth);
1470   max-width: var(--panel-ui-menuPanelButtonWidth);
1471   /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
1472      1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
1473   height: calc(2.2em + 4px);
1474   max-height: none;
1475   -moz-box-orient: horizontal;
1476 }
1477
1478 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1479 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
1480   /* reduce the width with 2px for this button to compensate for two separators
1481      of 1px. */
1482   min-width: var(--panel-ui-menuPanelButtonWidth-min2);
1483   max-width: var(--panel-ui-menuPanelButtonWidth-min2);
1484 }
1485
1486 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
1487 /*  opacity: .25; */
1488 }
1489
1490 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
1491   min-width: 7ch;
1492 }
1493
1494 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
1495 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
1496 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
1497 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
1498   border-top-right-radius: 0;
1499   border-bottom-right-radius: 0;
1500 }
1501
1502 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
1503 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
1504 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
1505 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
1506   border-top-left-radius: 0;
1507   border-bottom-left-radius: 0;
1508 }
1509
1510 .toolbaritem-combined-buttons > separator {
1511   -moz-appearance: none;
1512   width: 3px;
1513   -moz-box-align: stretch;
1514 }
1515
1516 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
1517   margin: .5em 0;
1518   width: 1px;
1519   height: auto;
1520 /*  background: var(--panel-separator-color);*/
1521   transition-property: margin;
1522   transition-duration: 10ms;
1523   transition-timing-function: ease;
1524 }
1525
1526 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
1527   margin: 0;
1528 }
1529
1530 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
1531   padding: 0;
1532 }
1533
1534 .cui-widget-panelview,
1535 #widget-overflow-scroller {
1536   overflow-y: auto;
1537   overflow-x: hidden;
1538 }
1539
1540 #widget-overflow-scroller {
1541   max-height: 30em;
1542   margin-top: 10px;
1543   margin-bottom: 10px;
1544 }
1545
1546 #widget-overflow-list {
1547   width: var(--panel-ui-menuPanelWidth);
1548   padding-left: 10px;
1549   padding-right: 10px;
1550 }
1551
1552 toolbaritem[overflowedItem=true],
1553 toolbarbutton[overflowedItem=true] {
1554   width: 100%;
1555   max-width: var(--panel-ui-menuPanelWidth);
1556   min-height: 36px;
1557   background-repeat: no-repeat;
1558   background-position: 0 center;
1559 }
1560
1561 .widget-overflow-list .toolbarbutton-1,
1562 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1563   -moz-box-align: center;
1564   -moz-box-orient: horizontal;
1565 }
1566
1567 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
1568 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
1569   text-align: start;
1570   padding-inline-start: .5em;
1571 }
1572
1573 #widget-overflow-list > .toolbaritem-combined-buttons {
1574   min-height: 28px;
1575 }
1576
1577 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1578   content: "";
1579   display: -moz-box;
1580   width: 1px;
1581   height: 18px;
1582   margin-inline-end: -1px;
1583 }
1584
1585 .subviewbutton[checked="true"] {
1586   background-image: url("chrome://global/skin/menu/menu-check.gif");
1587   background-position: top 5px left 4px;
1588   background-repeat: no-repeat;
1589 }
1590
1591 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1592   background-position: top 5px right 4px;
1593 }
1594
1595 .subviewbutton[checked="true"]:hover {
1596   background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1597 }
1598
1599 .subviewbutton > .menu-iconic-left {
1600   margin-inline-end: 3px;
1601 }
1602
1603 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1604   visibility: hidden;
1605 }
1606
1607 #PanelUI-containersItems > .subviewbutton > .toolbarbutton-icon {
1608   width: 16px;
1609   height: 16px;
1610 }
1611
1612 .panel-mainview[panelid=customizationui-widget-panel],
1613 #customizationui-widget-multiview > .panel-viewcontainer,
1614 #customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack,
1615 #PanelUI-panicView > .panel-subview-body,
1616 #PanelUI-panicView {
1617   overflow: visible;
1618   color: #FF9F00;
1619 }
1620
1621 #PanelUI-panicView.cui-widget-panelview {
1622   min-width: 280px;
1623 }
1624
1625 #PanelUI-panic-timeframe {
1626   padding: 15px;
1627   border-bottom: 1px solid var(--panel-separator-color);
1628 }
1629
1630 #panic-button-success-icon,
1631 #PanelUI-panic-timeframe-icon,
1632 #PanelUI-panic-timeframe-icon-small {
1633   background-color: transparent;
1634   margin-inline-end: 10px;
1635 }
1636
1637 #panic-button-success-icon,
1638 #PanelUI-panic-timeframe-icon {
1639   list-style-image: url(chrome://browser/skin/panic-panel/header.png);
1640   max-height: 48px;
1641   width: 48px;
1642 }
1643
1644 #PanelUI-panic-timeframe-icon-small {
1645   list-style-image: url(chrome://browser/skin/panic-panel/header-small.png);
1646   max-height: 32px;
1647   width: 32px;
1648 }
1649
1650 /* current attribute is only set when in use as a subview instead of a main view */
1651 #PanelUI-panicView[current] #PanelUI-panic-timeframe-icon {
1652   display: none;
1653 }
1654
1655 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-timeframe-icon-small {
1656   display: none;
1657 }
1658
1659 #panic-button-success-header,
1660 #PanelUI-panic-header {
1661   -moz-box-align: center;
1662   margin-bottom: 5px;
1663 }
1664
1665 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-header {
1666   margin-bottom: 0;
1667 }
1668
1669 #PanelUI-panic-timeframe-icon-small:-moz-locale-dir(rtl),
1670 #PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
1671   transform: scaleX(-1);
1672 }
1673
1674 /*
1675 .subviewradio {
1676 }
1677
1678 .subviewradio@buttonStateHover@ {
1679 }
1680
1681 .subviewradio[selected],
1682 .subviewradio[selected]:hover,
1683 .subviewradio@buttonStateActive@ {
1684 }
1685
1686 .subviewradio > .radio-check {
1687 }
1688
1689 .subviewradio > .radio-check[selected] {
1690 }
1691 */
1692
1693 #PanelUI-panic-explanations {
1694   padding: 10px 10px 0;
1695 }
1696
1697 #PanelUI-panic-actionlist-main-label {
1698   color: #A09090;
1699   font-size: 0.9em;
1700 }
1701
1702 .PanelUI-panic-actionlist {
1703   padding-inline-start: 20px;
1704   padding-top: 2px;
1705   padding-bottom: 2px;
1706   background-size: 16px 16px;
1707   background-repeat: no-repeat;
1708   background-color: transparent;
1709   background-position: center left;
1710 }
1711
1712 .PanelUI-panic-actionlist:-moz-locale-dir(rtl) {
1713   background-position: center right;
1714 }
1715
1716 #PanelUI-panic-actionlist-cookies {
1717   background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0);
1718 }
1719
1720 #PanelUI-panic-actionlist-history {
1721   background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16);
1722 }
1723
1724 #PanelUI-panic-actionlist-windows {
1725   background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32);
1726 }
1727
1728 #PanelUI-panic-actionlist-newwindow {
1729   background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48);
1730 }
1731
1732 #PanelUI-panic-warning {
1733   color: #FF0000;
1734   text-align: center;
1735   width: 100%;
1736   margin-top: 20px;
1737 }
1738
1739 #PanelUI-panic-view-button {
1740   background-color: #FF0000;
1741   color: #000000;
1742 }
1743
1744 #PanelUI-panic-view-button:hover {
1745   background-color: #FFCF00;
1746 }
1747
1748 #PanelUI-panic-view-button:hover:active {
1749   background-color: #FF9F00;
1750 }
1751
1752 #PanelUI-panic-view-button > .toolbarbutton-text {
1753   text-align: center;
1754   text-shadow: none;
1755 }
1756
1757 #panic-button-success-closebutton {
1758 }
1759
1760 #panic-button-success-closebutton:hover {
1761 }
1762
1763 #panic-button-success-closebutton:hover:active {
1764 }
1765
1766 /* === END panelUI.inc.css === */
1767
1768 .panel-subviews {
1769   background-color: var(--arrowpanel-background);
1770 }
1771
1772 #PanelUI-contents #zoom-out-btn {
1773   padding-left: 12px;
1774   padding-right: 12px;
1775 }
1776
1777 #PanelUI-contents #zoom-in-btn {
1778   padding-left: 12px;
1779   padding-right: 12px;
1780 }
1781
1782 /* bookmark panel submenus */
1783
1784 #BMB_bookmarksPopup menupopup[placespopup=true] {
1785 /*  background: transparent;
1786   border: none;
1787   padding: 6px;*/
1788 }
1789
1790 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1791   /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1792 /*  box-shadow: 0 0 4px rgba(0,0,0,0.2);
1793   background: var(--arrowpanel-background);
1794   color: var(--arrowpanel-color);
1795   border: 1px solid var(--arrowpanel-border-color);
1796   border-radius: 3.5px;
1797   margin-top: -4px;*/
1798 }
1799
1800 #BMB_bookmarksPopup menupopup {
1801 /*  padding-top: 2px;*/
1802 }
1803
1804 /* Add some space at the top because there are no headers: */
1805 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox  {
1806 /*  padding-top: 4px;*/
1807 }
1808
1809 /* bookmark panel separator */
1810 #BMB_bookmarksPopup menuseparator {
1811   padding-top: 0;
1812   padding-bottom: 0;
1813 }
1814
1815 .subviewbutton > .menu-right,
1816 .subviewbutton > .menu-iconic-left {
1817 /*  padding-top: 1px;
1818   margin-top: 1px;
1819   margin-bottom: 2px;*/
1820 }
1821
1822 .subviewbutton:-moz-any([image], .bookmark-item) > .toolbarbutton-icon {
1823   /* This catches bookmarks, history items, and sync tabs items */
1824   width: 16px;
1825   height: 16px;
1826 }
1827
1828 /* Disabled empty item looks too small otherwise, because it has no icon. */
1829 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1830 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1831 menuitem[type="checkbox"].subviewbutton {
1832   /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1833    * 2px for its border, see above */
1834 /*  min-height: 22px;*/
1835 }
1836
1837 .subviewbutton > .toolbarbutton-text {
1838 /*  padding-top: 3px;
1839   padding-bottom: 3px;*/
1840 }
1841
1842 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1843   -moz-appearance: none;
1844   border: 0;
1845   margin-inline-start: 3px;
1846 }
1847
1848 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1849   padding: 0 2px;
1850   padding-inline-start: 0;
1851   height: 18px;
1852 }
1853
1854 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1855   padding: 0 6px;
1856 }
1857
1858 .subviewbutton > .toolbarbutton-text {
1859   padding-inline-start: 18px; /* 16px for icons plus the 2px spacing from the rule below */
1860 }
1861
1862 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1863   padding-inline-start: 2px;
1864 }
1865
1866 /* subviewbutton entries for social sidebars have images that come from external
1867 /* sources, and are not guaranteed to be the size we want, so force the size on
1868 /* those icons. */
1869 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1870   width: 16px;
1871   height: 16px;
1872 }
1873
1874 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1875   visibility: hidden;
1876 }
1877
1878 menu.subviewbutton > .menu-right {
1879   list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow");
1880   /* Reset the rect we inherit from the button: */
1881   -moz-image-region: auto;
1882 }
1883
1884 menu.subviewbutton:not([disabled="true"]):hover > .menu-right,
1885 menu.subviewbutton:not([disabled="true"])[_moz-menuactive="true"] > .menu-right {
1886   list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-hover");
1887 }
1888
1889 menu[disabled="true"].subviewbutton > .menu-right {
1890   list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-disabled");
1891 }
1892
1893 menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
1894   transform: scaleX(-1);
1895 }