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