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