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