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