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