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