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