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