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