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