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-footer-fxa[syncstatus="active"] > #PanelUI-fxa-icon {
 645   list-style-image: url("chrome://browser/skin/syncFxProgress-horizontalbar.png");
 646 }
 647
 648 #PanelUI-footer-fxa[fxastatus="migrate-signup"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
 649 #PanelUI-footer-fxa[fxastatus="migrate-verify"] > #PanelUI-fxa-status > #PanelUI-fxa-label {
 650   list-style-image: url(chrome://browser/skin/warning.svg);
 651 }
 652
 653 #PanelUI-customize {
 654   list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
 655 }
 656
 657 #customization-panelHolder #PanelUI-customize {
 658   list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
 659 }
 660
 661 #PanelUI-help {
 662   list-style-image: url("chrome://browser/skin/menuPanel-help.png");
 663 }
 664
 665 #PanelUI-quit {
 666   -moz-border-end-style: none;
 667   list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
 668 }
 669
 670 #PanelUI-fxa-label,
 671 #PanelUI-fxa-icon,
 672 #PanelUI-customize,
 673 #PanelUI-help,
 674 #PanelUI-quit {
 675   -moz-image-region: rect(0, 16px, 16px, 0);
 676 }
 677
 678 #PanelUI-footer-fxa[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon,
 679 #PanelUI-footer-fxa[fxastatus="error"][fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon {
 680   display: none;
 681 }
 682
 683 #PanelUI-footer-fxa[fxastatus="error"]:not([fxaprofileimage="set"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
 684   display: none;
 685 }
 686
 687 #PanelUI-fxa-avatar[disabled],
 688 #PanelUI-fxa-icon[disabled] {
 689   display: none;
 690 }
 691
 692 #PanelUI-fxa-status[disabled] {
 693   pointer-events: none;
 694 }
 695
 696 #PanelUI-fxa-avatar {
 697   width: 32px;
 698   height: 32px;
 699   border-radius: 50%;
 700   background-repeat: no-repeat;
 701   background-position: 0 0;
 702   background-size: contain;
 703   align-self: center;
 704   margin: 0px 7px;
 705   padding: 0px;
 706   border: 0px none;
 707   -moz-margin-end: 0;
 708 }
 709
 710 #PanelUI-footer-fxa[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
 711   list-style-image: url(chrome://browser/skin/fxa/default-profile-image.svg);
 712 }
 713
 714 #PanelUI-customize:hover,
 715 #PanelUI-help:not([disabled]):hover,
 716 #PanelUI-quit:not([disabled]):hover,
 717 #PanelUI-customize:hover:active,
 718 #PanelUI-help:not([disabled]):hover:active,
 719 #PanelUI-quit:not([disabled]):hover:active {
 720   -moz-image-region: rect(0, 32px, 16px, 16px);
 721 }
 722
 723 #PanelUI-help[disabled],
 724 #PanelUI-quit[disabled] {
 725   -moz-image-region: rect(0, 48px, 16px, 32px);
 726 }
 727
 728 #PanelUI-fxa-icon:not([disabled]):hover,
 729 #PanelUI-help:not([disabled]):hover,
 730 #PanelUI-customize:hover,
 731 #PanelUI-quit:not([disabled]):hover {
 732 }
 733
 734 #PanelUI-fxa-icon:not([disabled]):hover:active,
 735 #PanelUI-help:not([disabled]):hover:active,
 736 #PanelUI-customize:hover:active,
 737 #PanelUI-quit:not([disabled]):hover:active {
 738 }
 739
 740 #PanelUI-fxa-status:not([disabled]):hover,
 741 #PanelUI-fxa-status:not([disabled]):hover:active,
 742 #PanelUI-fxa-icon:not([disabled]):hover,
 743 #PanelUI-fxa-icon:not([disabled]):hover:active {
 744 }
 745
 746 #PanelUI-footer-fxa[fxastatus="error"] {
 747   background-color: #FF0000;
 748   color: #000000;
 749 }
 750
 751 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover {
 752   background-color: #FFCF00;
 753 }
 754
 755 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover:active {
 756   background-color: #FF9F00;
 757 }
 758
 759 #PanelUI-update-status {
 760 /*  color: black; */
 761 }
 762
 763 #PanelUI-update-status[update-status="succeeded"] {
 764   background-color: #008484;
 765   color: #000000;
 766 }
 767
 768 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover {
 769   background-color: #FFCF00;
 770 }
 771
 772 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover:active {
 773   background-color: #FF9F00;
 774 }
 775
 776 #PanelUI-update-status[update-status="failed"] {
 777   background-color: #FF0000;
 778   color: #000000;
 779 }
 780
 781 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover {
 782   background-color: #FFCF00;
 783 }
 784
 785 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover:active {
 786   background-color: #FF9F00;
 787 }
 788
 789 #PanelUI-quit:not([disabled]):hover {
 790   background-color: #FF0000;
 791 }
 792
 793 #PanelUI-quit:not([disabled]):hover:active {
 794   background-color: #FF9F00;
 795 }
 796
 797 #customization-panelHolder #PanelUI-customize {
 798   color: #FFCF00;
 799   background-color: #008484;
 800   text-shadow: none;
 801   margin-top: -1px;
 802 }
 803
 804 #customization-panelHolder #PanelUI-customize + toolbarseparator {
 805   display: none;
 806 }
 807
 808 #customization-panelHolder #PanelUI-customize:hover,
 809 #customization-panelHolder #PanelUI-customize:hover:active {
 810   background-color: #FFCF00;
 811   color: #000000;
 812 }
 813
 814 #customization-palette .toolbarbutton-multiline-text,
 815 #customization-palette .toolbarbutton-text {
 816   display: none;
 817 }
 818
 819 panelview .toolbarbutton-1,
 820 .subviewbutton,
 821 .widget-overflow-list .toolbarbutton-1,
 822 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
 823 .share-provider-button,
 824 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
 825 /*  padding: 0 6px;
 826   background-color: hsla(210,4%,10%,0);
 827   border-radius: 2px;
 828   border-style: solid;
 829   border-color: hsla(210,4%,10%,0);*/
 830 }
 831
 832 panelview .toolbarbutton-1,
 833 .subviewbutton,
 834 .widget-overflow-list .toolbarbutton-1,
 835 .share-provider-button,
 836 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
 837   border-width: 0;
 838 }
 839
 840 .subviewbutton.panel-subview-footer {
 841 /*  border-radius: 0; */
 842   margin: 2px 0 0;
 843 }
 844
 845 .subviewbutton.panel-subview-footer > .menu-text {
 846   -moz-margin-start: 0px !important;
 847   -moz-padding-start: 6px;
 848   -moz-padding-end: 6px;
 849   -moz-box-flex: 0;
 850   text-align: center;
 851 }
 852
 853 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
 854   margin: 0;
 855 }
 856
 857 .subviewbutton.panel-subview-footer > .toolbarbutton-text {
 858   text-align: center;
 859   padding: 0;
 860 }
 861
 862 .subviewbutton.panel-subview-footer > .menu-accel-container {
 863   -moz-padding-start: 6px;
 864 }
 865
 866 .subviewbutton:not(.panel-subview-footer) {
 867   margin: 0;
 868 }
 869
 870 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
 871 /* Bookmark items need a more specific selector. */
 872 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
 873 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
 874 /*  font: menu;*/
 875 }
 876
 877 .PanelUI-subView .subviewbutton[shortcut]::after {
 878   content: attr(shortcut);
 879   float: right;
 880   color: #A09090;
 881 }
 882
 883 .PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
 884   -moz-margin-start: 10px;
 885 }
 886
 887 /* This is a <label> but it should fit in with the menu font- and colorwise. */
 888 #PanelUI-characterEncodingView-autodetect-label {
 889   font: menu;
 890   color: inherit;
 891 }
 892
 893 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
 894 /*  margin-left: 4px;
 895   margin-right: 4px;*/
 896 }
 897
 898 panelview .toolbarbutton-1,
 899 .widget-overflow-list .toolbarbutton-1 {
 900   margin-top: 6px;
 901 }
 902
 903 /*
 904 panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
 905 toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover,
 906 menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
 907 menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
 908 .share-provider-button:not(:-moz-any([disabled],[open],:active)):hover,
 909 .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
 910 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
 911     > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
 912   background-color: hsla(210,4%,10%,.08);
 913   border-color: hsla(210,4%,10%,.11);
 914 }
 915
 916 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[open],:active)):hover {
 917   border-color: hsla(210,4%,10%,.11);
 918 }
 919
 920 panelview .toolbarbutton-1:-moz-any(:not([disabled]):-moz-any([open],:hover:active),[checked=true]),
 921 toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],:hover:active),
 922 menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
 923 menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
 924 .share-provider-button:not([disabled]):-moz-any([open],:hover:active),
 925 .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active),
 926 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
 927     > toolbarbutton:not([disabled]):-moz-any([open],:hover:active) {
 928   background-color: hsla(210,4%,10%,.12);
 929   border-color: hsla(210,4%,10%,.14);
 930   box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
 931 }
 932
 933 .subviewbutton.panel-subview-footer {
 934   margin: 4px -4px -4px;
 935   background-color: hsla(210,4%,10%,.07);
 936   border-top: 1px solid hsla(210,4%,10%,.12);
 937   border-radius: 0;
 938   color: hsl(0,0%,25%)
 939 }
 940
 941 menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
 942 .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
 943   background-color: hsla(210,4%,10%,.1);
 944   border-top: 1px solid hsla(210,4%,10%,.12);
 945 }
 946
 947 menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active),
 948 .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active) {
 949   background-color: hsla(210,4%,10%,.15);
 950   border-top: 1px solid hsla(210,4%,10%,.12);
 951   box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
 952 }
 953
 954 #BMB_bookmarksPopup .subviewbutton {
 955   font: menu;
 956   font-weight: normal;
 957 }
 958
 959 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
 960   color: inherit;
 961 }
 962
 963 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
 964 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
 965   -moz-appearance: none;
 966   margin-top: 0;
 967   margin-bottom: 0;
 968 }
 969
 970 / Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
 971 #BMB_bookmarksPopup arrowscrollbox {
 972   padding-bottom: 0px;
 973 }
 974
 975 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
 976   / Hide bottom separator as the styled footer includes a top border serving the same purpose /
 977   display: none;
 978 }
 979
 980 / Popups with only one item don't have a footer /
 981 #BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
 982 / These popups never have a footer /
 983 #BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
 984 #BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
 985   / And so they need some bottom padding: /
 986   padding-bottom: 4px;
 987 }
 988
 989 / Disabled (empty) item is always alone and never has an icon, so fix its left padding /
 990 #BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
 991   padding-left: 6px;
 992 }
 993 */
 994
 995 .PanelUI-subView menuseparator,
 996 .PanelUI-subView toolbarseparator,
 997 .cui-widget-panelview menuseparator {
 998   -moz-appearance: none;
 999   min-height: 0;
1000   border-top: 1px solid #9C9CFF;
1001   margin: 2px 0;
1002   padding: 0;
1003 }
1004
1005 .PanelUI-subView menuseparator,
1006 .PanelUI-subView toolbarseparator {
1007 /*  -moz-margin-start: -5px;
1008   -moz-margin-end: -4px;*/
1009 }
1010
1011 .PanelUI-subView menuseparator.small-separator,
1012 .PanelUI-subView toolbarseparator.small-separator {
1013 /*  margin-left: 5px;
1014   margin-right: 5px;*/
1015 }
1016
1017 .cui-widget-panelview menuseparator.small-separator {
1018 /*  margin-left: 10px;
1019   margin-right: 10px;*/
1020 }
1021
1022 .subviewbutton > .menu-accel-container {
1023   -moz-box-pack: start;
1024   -moz-margin-start: 10px;
1025   -moz-margin-end: auto;
1026   color: #A09090;
1027 }
1028
1029 #PanelUI-historyItems > toolbarbutton {
1030   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
1031 }
1032
1033 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
1034 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
1035 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
1036   width: 16px;
1037   height: 16px;
1038 }
1039
1040 toolbarbutton[panel-multiview-anchor="true"],
1041 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
1042   color: #000000;
1043   background-color: #008484;
1044 }
1045
1046 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
1047   display: none;
1048 }
1049
1050 #PanelUI-help[panel-multiview-anchor="true"] {
1051   background-image: none;
1052 }
1053
1054 #PanelUI-help[panel-multiview-anchor="true"]::after {
1055   content: "";
1056   position: absolute;
1057   top: 0;
1058   height: 100%;
1059   width: var(--panel-ui-exit-subview-gutter-width);
1060   background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1061   background-repeat: no-repeat;
1062   background-color: #008484;
1063   background-position: left 10px center, 0;
1064 }
1065
1066 #PanelUI-help[panel-multiview-anchor="true"]:-moz-locale-dir(rtl)::after {
1067   background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png);
1068   background-position: right 10px center, 0;
1069 }
1070
1071 toolbarbutton[panel-multiview-anchor="true"] {
1072   background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1073   background-position: right calc((22.35em / 3 - 0.1px) / 2 - var(--panel-ui-exit-subview-gutter-width) + 2px) center;
1074   background-repeat: no-repeat;
1075 }
1076
1077 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
1078   background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
1079   background-position: left calc((22.35em / 3 - 0.1px) / 2 - var(--panel-ui-exit-subview-gutter-width) + 2px) center;
1080 }
1081
1082 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
1083 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
1084   display: none;
1085 }
1086
1087 #search-container[cui-areatype="menu-panel"],
1088 #wrapper-search-container[place="panel"] {
1089   width: 22.35em;
1090 }
1091
1092 #search-container[cui-areatype="menu-panel"] {
1093   margin-top: 6px;
1094   margin-bottom: 6px;
1095 }
1096
1097 toolbarpaletteitem[place="palette"] > #search-container {
1098   min-width: 7em;
1099   width: 7em;
1100 }
1101
1102 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1103   padding: 0;
1104   transition-property: background-color, border-color;
1105   transition-duration: 150ms;
1106 }
1107
1108 /* Make direct siblings overlap borders: */
1109 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1110 /*  border-top-color: transparent !important; */
1111 }
1112
1113 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
1114 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
1115 /*  margin-top: -1px; */
1116 }
1117
1118 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1119   border: 0;
1120   padding: .5em;
1121   margin: 0;
1122   -moz-box-flex: 1;
1123   min-width: calc(22.35em / 3 - 0.1px);
1124   max-width: calc(22.35em / 3 - 0.1px);
1125   /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
1126      1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
1127   height: calc(2.2em + 4px);
1128   max-height: none;
1129   -moz-box-orient: horizontal;
1130 }
1131
1132 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1133 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
1134   /* reduce the width with 2px for this button to compensate for two separators
1135      of 1px. */
1136   min-width: calc(22.35em / 3 - 0.1px - 2px);
1137   max-width: calc(22.35em / 3 - 0.1px - 2px);
1138 }
1139
1140 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
1141 /*  opacity: .25; */
1142 }
1143
1144 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
1145   min-width: 7ch;
1146 }
1147
1148 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
1149 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
1150 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
1151 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
1152   border-top-right-radius: 0;
1153   border-bottom-right-radius: 0;
1154 }
1155
1156 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
1157 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
1158 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
1159 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
1160   border-top-left-radius: 0;
1161   border-bottom-left-radius: 0;
1162 }
1163
1164 .toolbaritem-combined-buttons > separator {
1165   -moz-appearance: none;
1166   width: 3px;
1167   -moz-box-align: stretch;
1168 }
1169
1170 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
1171   margin: .5em 0;
1172   width: 1px;
1173   height: auto;
1174 /*  background: hsla(210,4%,10%,.15);*/
1175   transition-property: margin;
1176   transition-duration: 10ms;
1177   transition-timing-function: ease;
1178 }
1179
1180 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
1181   margin: 0;
1182 }
1183
1184 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
1185   padding: 0;
1186 }
1187
1188 .cui-widget-panelview,
1189 #widget-overflow-scroller {
1190   overflow-y: auto;
1191   overflow-x: hidden;
1192 }
1193
1194 #widget-overflow-scroller {
1195   max-height: 30em;
1196   margin-top: 10px;
1197   margin-bottom: 10px;
1198 }
1199
1200 #widget-overflow-list {
1201   width: 22.35em;
1202   padding-left: 10px;
1203   padding-right: 10px;
1204 }
1205
1206 toolbaritem[overflowedItem=true],
1207 toolbarbutton[overflowedItem=true] {
1208   width: 100%;
1209   max-width: 22.35em;
1210   min-height: 36px;
1211   background-repeat: no-repeat;
1212   background-position: 0 center;
1213 }
1214
1215 .widget-overflow-list .toolbarbutton-1,
1216 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1217   -moz-box-align: center;
1218   -moz-box-orient: horizontal;
1219 }
1220
1221 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
1222 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
1223   text-align: start;
1224   -moz-padding-start: .5em;
1225 }
1226
1227 #widget-overflow-list > .toolbaritem-combined-buttons {
1228   min-height: 28px;
1229 }
1230
1231 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1232   content: "";
1233   display: -moz-box;
1234   width: 1px;
1235   height: 18px;
1236   -moz-margin-end: -1px;
1237 }
1238
1239 .subviewbutton[checked="true"] {
1240   background-image: url("chrome://global/skin/menu/menu-check.gif");
1241   background-position: top 5px left 4px;
1242   background-repeat: no-repeat;
1243 }
1244
1245 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1246   background-position: top 5px right 4px;
1247 }
1248
1249 .subviewbutton[checked="true"]:hover {
1250   background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1251 }
1252
1253 .subbiewbutton > .menu-iconic-left {
1254   -moz-margin-end: 3px;
1255 }
1256
1257 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1258   visibility: hidden;
1259 }
1260
1261 .panel-mainview[panelid=customizationui-widget-panel],
1262 #customizationui-widget-multiview > .panel-viewcontainer,
1263 #customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack,
1264 #PanelUI-panicView > .panel-subview-body,
1265 #PanelUI-panicView {
1266   overflow: visible;
1267   color: #FF9F00;
1268 }
1269
1270 #PanelUI-panicView.cui-widget-panelview {
1271   min-width: 280px;
1272 }
1273
1274 #PanelUI-panic-timeframe {
1275   padding: 15px;
1276   border-bottom: 1px solid #A09090;
1277 }
1278
1279 #panic-button-success-icon,
1280 #PanelUI-panic-timeframe-icon,
1281 #PanelUI-panic-timeframe-icon-small {
1282   background-color: transparent;
1283   -moz-margin-end: 10px;
1284 }
1285
1286 #panic-button-success-icon,
1287 #PanelUI-panic-timeframe-icon {
1288   list-style-image: url(chrome://browser/skin/panic-panel/header.png);
1289   max-height: 48px;
1290   width: 48px;
1291 }
1292
1293 #PanelUI-panic-timeframe-icon-small {
1294   list-style-image: url(chrome://browser/skin/panic-panel/header-small.png);
1295   max-height: 32px;
1296   width: 32px;
1297 }
1298
1299 /* current attribute is only set when in use as a subview instead of a main view */
1300 #PanelUI-panicView[current] #PanelUI-panic-timeframe-icon {
1301   display: none;
1302 }
1303
1304 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-timeframe-icon-small {
1305   display: none;
1306 }
1307
1308 #panic-button-success-header,
1309 #PanelUI-panic-header {
1310   -moz-box-align: center;
1311   margin-bottom: 5px;
1312 }
1313
1314 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-header {
1315   margin-bottom: 0;
1316 }
1317
1318 #PanelUI-panic-timeframe-icon-small:-moz-locale-dir(rtl),
1319 #PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
1320   transform: scaleX(-1);
1321 }
1322
1323 /*
1324 .subviewradio {
1325 }
1326
1327 .subviewradio@buttonStateHover@ {
1328 }
1329
1330 .subviewradio[selected],
1331 .subviewradio[selected]:hover,
1332 .subviewradio@buttonStateActive@ {
1333 }
1334
1335 .subviewradio > .radio-check {
1336 }
1337
1338 .subviewradio > .radio-check[selected] {
1339 }
1340 */
1341
1342 #PanelUI-panic-explanations {
1343   padding: 10px 10px 0;
1344 }
1345
1346 #PanelUI-panic-actionlist-main-label {
1347   color: #A09090;
1348   font-size: 0.9em;
1349 }
1350
1351 .PanelUI-panic-actionlist {
1352   -moz-padding-start: 20px;
1353   padding-top: 2px;
1354   padding-bottom: 2px;
1355   background-size: 16px 16px;
1356   background-repeat: no-repeat;
1357   background-color: transparent;
1358   background-position: center left;
1359 }
1360
1361 .PanelUI-panic-actionlist:-moz-locale-dir(rtl) {
1362   background-position: center right;
1363 }
1364
1365 #PanelUI-panic-actionlist-cookies {
1366   background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0);
1367 }
1368
1369 #PanelUI-panic-actionlist-history {
1370   background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16);
1371 }
1372
1373 #PanelUI-panic-actionlist-windows {
1374   background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32);
1375 }
1376
1377 #PanelUI-panic-actionlist-newwindow {
1378   background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48);
1379 }
1380
1381 #PanelUI-panic-warning {
1382   color: #FF0000;
1383   text-align: center;
1384   width: 100%;
1385   margin-top: 20px;
1386 }
1387
1388 #PanelUI-panic-view-button {
1389   background-color: #FF0000;
1390   color: #000000;
1391 }
1392
1393 #PanelUI-panic-view-button:hover {
1394   background-color: #FFCF00;
1395 }
1396
1397 #PanelUI-panic-view-button:hover:active {
1398   background-color: #FF9F00;
1399 }
1400
1401 #PanelUI-panic-view-button > .toolbarbutton-text {
1402   text-align: center;
1403   text-shadow: none;
1404 }
1405
1406 #panic-button-success-closebutton {
1407 }
1408
1409 #panic-button-success-closebutton:hover {
1410 }
1411
1412 #panic-button-success-closebutton:hover:active {
1413 }
1414
1415 /* === END panelUIOverlay.inc.css === */
1416
1417 .panel-subviews {
1418   background-color: #000000;
1419 }
1420
1421 #PanelUI-contents #zoom-out-btn {
1422   padding-left: 12px;
1423   padding-right: 12px;
1424 }
1425
1426 #PanelUI-contents #zoom-in-btn {
1427   padding-left: 12px;
1428   padding-right: 12px;
1429 }
1430
1431 /* bookmark panel submenus */
1432
1433 #BMB_bookmarksPopup menupopup[placespopup=true] {
1434 /*  background: transparent;
1435   border: none;
1436   padding: 6px;*/
1437 }
1438
1439 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1440   /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1441 /*  background: var(--panel-arrowcontent-background);
1442   border: var(--panel-arrowcontent-border);
1443   border-radius: 3.5px;
1444   margin-top: -4px;*/
1445 }
1446
1447 #BMB_bookmarksPopup menupopup {
1448 /*  padding-top: 2px;*/
1449 }
1450
1451 /* Add some space at the top because there are no headers: */
1452 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox  {
1453 /*  padding-top: 4px;*/
1454 }
1455
1456 /* bookmark panel separator */
1457 #BMB_bookmarksPopup menuseparator {
1458   padding-top: 0;
1459   padding-bottom: 0;
1460 }
1461
1462 .subviewbutton > .menu-right,
1463 .subviewbutton > .menu-iconic-left {
1464 /*  padding-top: 1px;
1465   margin-top: 1px;
1466   margin-bottom: 2px;*/
1467 }
1468
1469 .subviewbutton:-moz-any([image], .bookmark-item) > .toolbarbutton-icon {
1470   /* This catches bookmarks, history items, and sync tabs items */
1471   width: 16px;
1472   height: 16px;
1473 }
1474
1475 /* Disabled empty item looks too small otherwise, because it has no icon. */
1476 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1477 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1478 menuitem[type="checkbox"].subviewbutton {
1479   /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1480    * 2px for its border, see above */
1481 /*  min-height: 22px;*/
1482 }
1483
1484 .subviewbutton > .toolbarbutton-text {
1485 /*  padding-top: 3px;
1486   padding-bottom: 3px;*/
1487 }
1488
1489 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1490   -moz-appearance: none;
1491   border: 0;
1492   -moz-margin-start: 3px;
1493 }
1494
1495 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1496   padding: 0 2px;
1497   -moz-padding-start: 0;
1498   height: 18px;
1499 }
1500
1501 menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
1502 /*  transform: scaleX(-1); */
1503 }
1504
1505 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1506   padding: 0 6px;
1507 }
1508
1509 .subviewbutton > .toolbarbutton-text {
1510   padding-inline-start: 18px; /* 16px for icons plus the 2px spacing from the rule below */
1511 }
1512
1513 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1514   padding-inline-start: 2px;
1515 }
1516
1517 /* subviewbutton entries for social sidebars have images that come from external
1518 /* sources, and are not guaranteed to be the size we want, so force the size on
1519 /* those icons. */
1520 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1521   width: 16px;
1522   height: 16px;
1523 }
1524
1525 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1526   visibility: hidden;
1527 }
1528
1529 menu.subviewbutton > .menu-right {
1530   list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow);
1531   /* Reset the rect we inherit from the button: */
1532   -moz-image-region: auto;
1533 }
1534 menu.subviewbutton:not([disabled="true"]):hover > .menu-right,
1535 menu.subviewbutton:not([disabled="true"])[_moz-menuactive="true"] > .menu-right {
1536   list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-hover");
1537 }
1538 menu[disabled="true"].subviewbutton > .menu-right {
1539   list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-disabled");
1540 }