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