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