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   animation: moveX 3.05s linear 0s infinite alternate,
  19              moveY 3.4s linear 0s infinite alternate;
  20 }
  21
  22 #PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):empty::before {
  23   animation: moveXRTL 3.05s linear 0s infinite alternate,
  24              moveY 3.4s linear 0s infinite alternate;
  25 }
  26
  27 #PanelUI-popup #PanelUI-contents:empty:hover::before {
  28   background-image: url("chrome://browser/skin/customizableui/whimsy.png");
  29 }
  30
  31 @media (min-resolution: 2dppx) {
  32   #PanelUI-popup #PanelUI-contents:empty::before {
  33     background-image: url("chrome://browser/skin/customizableui/whimsy-bw@2x.png");
  34     background-size: 64px 64px;
  35   }
  36   #PanelUI-popup #PanelUI-contents:empty:hover::before {
  37     background-image: url("chrome://browser/skin/customizableui/whimsy@2x.png");
  38   }
  39 }
  40
  41 @keyframes moveX {
  42   /* These values are adjusted for the padding on the panel. */
  43   from { margin-left: -9px; } to { margin-left: calc(100% - 55px); }
  44 }
  45 @keyframes moveXRTL {
  46   /* These values are adjusted for the padding on the panel. */
  47   from { margin-right: -9px; } to { margin-right: calc(100% - 55px); }
  48 }
  49 @keyframes moveY {
  50   /* These values are adjusted for the padding and height of the panel. */
  51   from { margin-top: -.5em; } to { margin-top: calc(64px - .5em); }
  52 }
  53
  54 #customization-panelHolder {
  55   border-radius: 4px;
  56 }
  57
  58 #PanelUI-button {
  59   -moz-margin-start: 3px;
  60 }
  61
  62 #PanelUI-button:-moz-locale-dir(rtl) {
  63 }
  64
  65 .panel-subviews {
  66   padding: 4px;
  67   background-color: #000000;
  68   -moz-margin-start: 38px;
  69 }
  70
  71 .panel-viewstack[viewtype="main"] > .panel-subviews {
  72   transform: translateX(22.35em);
  73 }
  74
  75 .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
  76   transform: translateX(-22.35em);
  77 }
  78
  79 panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
  80   display: none;
  81 }
  82
  83 .panel-viewstack:not([viewtype="main"]) > .panel-mainview > #PanelUI-mainView {
  84   -moz-box-flex: 1;
  85 }
  86
  87 .panel-subview-body {
  88   overflow-y: auto;
  89   overflow-x: hidden;
  90   -moz-box-flex: 1;
  91 }
  92
  93 #PanelUI-popup .panel-subview-body {
  94   margin: -4px;
  95   padding: 4px 4px;
  96 }
  97
  98 .panel-subview-header,
  99 .subviewbutton.panel-subview-footer {
 100   padding: 3px;
 101 }
 102
 103 .panel-subview-header {
 104   margin: 0 0 4px;
 105   background-color: #A09090;
 106   color: #000000;
 107   border-radius: 4px;
 108 }
 109
 110 .panel-subview-footer {
 111   border-top: 1px solid #A09090;
 112 }
 113
 114 .cui-widget-panelview .panel-subview-header {
 115   display: none;
 116 }
 117
 118 .cui-widget-panelview .subviewbutton.panel-subview-footer {
 119   margin: 4px 0 0;
 120   -moz-box-pack: center;
 121 }
 122
 123 #PanelUI-mainView {
 124   display: flex;
 125   flex-direction: column;
 126   border-radius: 4px;
 127 }
 128
 129 #app-extension-point-end > #PanelUI-menu-button {
 130   padding: 2px 5px;
 131 }
 132 #app-extension-point-end > #PanelUI-menu-button .toolbarbutton-text {
 133   display: none;
 134 }
 135 #app-extension-point-end > #PanelUI-menu-button .toolbarbutton-icon {
 136   margin: 0;
 137 }
 138
 139 #PanelUI-popup > arrowscrollbox > autorepeatbutton {
 140   display: none;
 141 }
 142 #PanelUI-popup > arrowscrollbox > scrollbox {
 143   overflow: visible;
 144 }
 145
 146 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent {
 147   overflow: hidden;
 148   padding: 0;
 149 }
 150
 151 #PanelUI-contents {
 152   padding: .5em 0;
 153 }
 154
 155 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
 156 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
 157 /*  line-height: 1.1;*/
 158   max-height: 2.2em;
 159 }
 160
 161 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
 162 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-multiline-text {
 163   -moz-hyphens: auto;
 164 }
 165
 166 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
 167 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-multiline-text {
 168   position: absolute;
 169   clip: rect(auto, auto, 2.3em, auto);
 170 }
 171
 172 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-text,
 173 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
 174   text-align: center;
 175   /* Need to override toolkit theming which sets margin: 0 !important; */
 176   margin: 2px 0 0 !important;
 177 }
 178
 179 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
 180   text-align: center;
 181   margin: -1px 0 0;
 182 }
 183
 184 #wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls,
 185 #wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls {
 186   -moz-margin-start: 0;
 187 }
 188
 189 #PanelUI-contents {
 190   max-width: 22.35em;
 191 }
 192
 193 #BMB_bookmarksPopup,
 194 .panel-mainview:not([panelid="PanelUI-popup"]) {
 195   max-width: 30em;
 196 }
 197
 198 panelview:not([mainview]) .toolbarbutton-text,
 199 .cui-widget-panel toolbarbutton > .toolbarbutton-text {
 200   text-align: start;
 201   display: -moz-box;
 202 }
 203
 204 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent {
 205   padding: 0;
 206 }
 207
 208 .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {
 209   padding-bottom: 0;
 210 }
 211
 212 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):first-child {
 213   border-radius: 4px 4px 0 0;
 214 }
 215
 216 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):last-child {
 217   border-radius: 0 0 4px 4px;
 218 }
 219
 220 #PanelUI-contents {
 221   display: block;
 222   flex: 1 0 auto;
 223   margin-left: auto;
 224   margin-right: auto;
 225   max-width: 22.35em;
 226 }
 227
 228 #PanelUI-contents-scroller {
 229   overflow-y: auto;
 230   overflow-x: hidden;
 231   width: 22.35em;
 232   flex: auto;
 233 }
 234
 235 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon {
 236   min-width: 0;
 237   min-height: 0;
 238   margin: 0;
 239 }
 240
 241 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
 242 .panelUI-grid .toolbarbutton-1,
 243 .panel-customization-placeholder-child {
 244   -moz-appearance: none;
 245   -moz-box-orient: vertical;
 246   width: calc(22.35em / 3 - 0.1px - 2px); /* LCARStrek: XXX: found out to be needed to fit the icons */
 247   height: calc(51px + 2.2em);
 248 }
 249
 250 /* In order to have button labels constrained appropriately, items inside the toolbarpaletteitem
 251  * should have a min-width set so they abide by the width set above (which they do outside of
 252  * customize mode because they're in a flexed container) */
 253 toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 {
 254   min-width: 0.01px;
 255 }
 256
 257 /* Help SDK buttons fit in. */
 258 toolbarpaletteitem[place="palette"] > toolbarbutton[sdk-button="true"] > .toolbarbutton-icon,
 259 toolbarbutton[sdk-button="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon {
 260   height: 32px;
 261   width: 32px;
 262 }
 263
 264 .customization-palette .toolbarbutton-1 {
 265   -moz-appearance: none;
 266   -moz-box-orient: vertical;
 267 }
 268
 269 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
 270   -moz-appearance: none;
 271   -moz-box-orient: vertical;
 272   width: calc(22.35em / 3 - 0.1px - 2px);
 273   height: calc(49px + 2.2em);
 274   border: 0;
 275 }
 276
 277 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text,
 278 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
 279   margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */
 280 }
 281
 282 .panel-customization-placeholder-child {
 283   margin: 6px 0 0;
 284 /*  padding: 2px 6px;*/
 285 }
 286
 287 .panelUI-grid .toolbarbutton-1[type="menu"] {
 288   background-image: url("chrome://global/skin/arrow/arrow-down-sharp.gif");
 289   background-position: right 3px top 16px;
 290   background-repeat: no-repeat;
 291 }
 292
 293 .panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) {
 294   background-position: left 3px top 16px;
 295 }
 296
 297 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
 298   display: none;
 299 }
 300
 301 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
 302   -moz-box-align: center;
 303   width: 16px;
 304   -moz-margin-start: -16px;
 305   height: 51px;
 306   margin-bottom: 2.2em;
 307   padding: 0;
 308 }
 309
 310 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active) > .toolbarbutton-menubutton-dropmarker {
 311   border-radius: 0 0 0 2px;
 312 }
 313
 314 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active)> .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
 315   border-radius: 0 0 2px 0;
 316 }
 317
 318 #main-window:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon {
 319 /*  opacity: .5; */
 320 }
 321
 322 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
 323   width: calc(22.35em / 3 - 0.1px);
 324   margin: 0 !important;
 325 }
 326
 327 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
 328   -moz-box-align: center;
 329   -moz-box-pack: center;
 330 }
 331
 332 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
 333   margin: 4px auto;
 334 }
 335
 336 #PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview >  #PanelUI-mainView {
 337 }
 338
 339 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item,
 340 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]),
 341 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-fxa-status,
 342 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator,
 343 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize,
 344 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) {
 345   opacity: .5;
 346 }
 347
 348 /*
 349  * XXXgijs: this is a workaround for a layout issue that was caused by these iframes,
 350  * which was affecting subview display. Because of this, we're hiding the iframe *only*
 351  * when displaying a subview. The discerning user might notice this, but it's not nearly
 352  * as bad as the brokenness.
 353  * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375
 354  * is addressed.
 355  */
 356 #PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe {
 357   visibility: hidden;
 358 }
 359
 360 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
 361   text-align: center;
 362 }
 363
 364 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
 365 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
 366 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container,
 367 .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
 368 .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
 369 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-container,
 370 .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
 371 .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
 372 .panel-customization-placeholder-child > .toolbarbutton-icon {
 373   min-width: 32px;
 374   min-height: 32px;
 375   /* Explanation for the below formula (A / B - C)
 376      A
 377        Each button is 22.35em / 3 - 0.1px wide
 378      B
 379        Each button has two margins.
 380      C (44px / 2 = 22px)
 381        The button icon is 32 pixels wide.
 382        The button has 12px of horizontal padding (6 on each side).
 383        The button has 0px of horizontal border (0 on each side).
 384        Total width of button's icon + button padding should therefore be 44px,
 385        which means each horizontal margin should be the half the button's width - (44/2) px.
 386   */
 387   margin: 4px calc((22.35em / 3 - 0.1px) / 2 - 22px);
 388 }
 389
 390 /* above we treat the container as the icon for the margins, that is so the
 391 /* badge itself is positioned correctly. Here we make sure that the icon itself
 392 /* has the minum size we want, but no padding/margin. */
 393 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon {
 394   min-width: 32px;
 395   min-height: 32px;
 396   margin: 0;
 397   padding: 0;
 398 }
 399
 400 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
 401   -moz-box-flex: 1;
 402 }
 403
 404 #personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {
 405   -moz-box-flex: 1;
 406 }
 407
 408 #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
 409   -moz-margin-end: 2px;
 410 }
 411
 412 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
 413 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
 414   border-left: none;
 415   border-right: none;
 416   border-radius: 0;
 417 }
 418
 419 #zoom-in-button > .toolbarbutton-text,
 420 #zoom-out-button > .toolbarbutton-text,
 421 #zoom-reset-button > .toolbarbutton-icon {
 422   display: none;
 423 }
 424
 425 #PanelUI-footer {
 426   display: flex;
 427   flex-shrink: 0;
 428   flex-direction: column;
 429 /*  background-color: hsla(210,4%,10%,.07);*/
 430   padding: 0;
 431   margin: 0;
 432 /*  min-height: 4em;*/
 433   border-bottom-right-radius: 4px;
 434   border-bottom-left-radius: 4px;
 435 }
 436
 437 #PanelUI-footer-inner {
 438   display: flex;
 439   border-top: 1px solid #9C9CFF;
 440 }
 441
 442 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner {
 443   position: relative;
 444 }
 445
 446 #PanelUI-footer-inner > toolbarseparator {
 447   border: 0;
 448   border-left: 1px solid #9C9CFF;
 449   margin: 0;
 450 }
 451
 452 #PanelUI-footer-inner:hover > toolbarseparator {
 453 /*  margin: 0;*/
 454 }
 455
 456 #PanelUI-help,
 457 #PanelUI-fxa-status,
 458 #PanelUI-customize,
 459 #PanelUI-quit {
 460   margin: 0;
 461   padding: 10px 0;
 462   min-height: 2em;
 463   box-shadow: none;
 464   border: none;
 465   border-radius: 0;
 466   transition: background-color;
 467   -moz-box-orient: horizontal;
 468 }
 469
 470 #PanelUI-fxa-status {
 471   border-top: 1px solid #9C9CFF;
 472   border-bottom: 1px solid transparent;
 473   margin-bottom: -1px;
 474 }
 475
 476 #PanelUI-fxa-status > .toolbarbutton-text {
 477   width: 0; /* Fancy cropping solution for flexbox. */
 478 }
 479
 480 #PanelUI-help[panel-multiview-anchor="true"] {
 481   -moz-image-region: rect(0, 32px, 16px, 16px);
 482 }
 483
 484 #PanelUI-help,
 485 #PanelUI-quit {
 486   min-width: 44px;
 487 }
 488
 489 #PanelUI-fxa-status > .toolbarbutton-text,
 490 #PanelUI-customize > .toolbarbutton-text {
 491   margin: 0;
 492   padding: 0 6px;
 493   text-align: start;
 494 }
 495
 496 #PanelUI-help > .toolbarbutton-text,
 497 #PanelUI-quit > .toolbarbutton-text {
 498   display: none;
 499 }
 500
 501 #PanelUI-help > .toolbarbutton-icon,
 502 #PanelUI-quit > .toolbarbutton-icon {
 503   -moz-margin-end: 0;
 504 }
 505
 506 #PanelUI-customize {
 507   flex: 1;
 508   -moz-padding-start: 15px;
 509   -moz-border-start-style: none;
 510 }
 511
 512 #PanelUI-fxa-status {
 513   list-style-image: url("chrome://browser/skin/syncFx-horizontalbar.png");
 514 }
 515
 516 #PanelUI-fxa-status[status="active"] {
 517   list-style-image: url("chrome://browser/skin/syncFxProgress-horizontalbar.png");
 518 }
 519
 520 #PanelUI-customize {
 521   list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
 522 }
 523
 524 #customization-panelHolder #PanelUI-customize {
 525   list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
 526 }
 527
 528 #PanelUI-help {
 529   list-style-image: url("chrome://browser/skin/menuPanel-help.png");
 530 }
 531
 532 #PanelUI-quit {
 533   -moz-border-end-style: none;
 534   list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
 535 }
 536
 537 #PanelUI-fxa-status,
 538 #PanelUI-customize,
 539 #PanelUI-help,
 540 #PanelUI-quit {
 541   -moz-image-region: rect(0, 16px, 16px, 0);
 542 }
 543
 544 #PanelUI-customize:hover,
 545 #PanelUI-help:not([disabled]):hover,
 546 #PanelUI-quit:not([disabled]):hover,
 547 #PanelUI-customize:hover:active,
 548 #PanelUI-help:not([disabled]):hover:active,
 549 #PanelUI-quit:not([disabled]):hover:active {
 550   -moz-image-region: rect(0, 32px, 16px, 16px);
 551 }
 552
 553 #PanelUI-help[disabled],
 554 #PanelUI-quit[disabled] {
 555   -moz-image-region: rect(0, 48px, 16px, 32px);
 556 }
 557
 558 #PanelUI-fxa-status:not([disabled]):hover,
 559 #PanelUI-help:not([disabled]):hover,
 560 #PanelUI-customize:hover,
 561 #PanelUI-quit:not([disabled]):hover {
 562 }
 563
 564 #PanelUI-fxa-status:not([disabled]):hover:active,
 565 #PanelUI-help:not([disabled]):hover:active,
 566 #PanelUI-customize:hover:active,
 567 #PanelUI-quit:not([disabled]):hover:active {
 568 }
 569
 570 #PanelUI-fxa-status:not([disabled]):hover,
 571 #PanelUI-fxa-status:not([disabled]):hover:active {
 572 }
 573
 574 #PanelUI-quit:not([disabled]):hover {
 575   background-color: #FF0000;
 576 }
 577
 578 #PanelUI-quit:not([disabled]):hover:active {
 579   background-color: #FF9F00;
 580 }
 581
 582 #customization-panelHolder #PanelUI-customize {
 583   color: #FFCF00;
 584   background-color: #008484;
 585   text-shadow: none;
 586   margin-top: -1px;
 587 }
 588
 589 #customization-panelHolder #PanelUI-customize + toolbarseparator {
 590   display: none;
 591 }
 592
 593 #customization-panelHolder #PanelUI-customize:hover,
 594 #customization-panelHolder #PanelUI-customize:hover:active {
 595   background-color: #FFCF00;
 596   color: #000000;
 597 }
 598
 599 #customization-palette .toolbarbutton-multiline-text,
 600 #customization-palette .toolbarbutton-text {
 601   display: none;
 602 }
 603
 604 panelview .toolbarbutton-1,
 605 .subviewbutton,
 606 .widget-overflow-list .toolbarbutton-1,
 607 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
 608 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
 609 /*  padding: 0 6px;
 610   background-color: hsla(210,4%,10%,0);
 611   border-radius: 2px;
 612   border-style: solid;
 613   border-color: hsla(210,4%,10%,0);*/
 614 }
 615
 616 panelview .toolbarbutton-1,
 617 .subviewbutton,
 618 .widget-overflow-list .toolbarbutton-1,
 619 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
 620   border-width: 0;
 621 }
 622
 623 .subviewbutton.panel-subview-footer {
 624 /*  border-radius: 0; */
 625   margin: 2px 0 0;
 626 }
 627
 628 .subviewbutton.panel-subview-footer > .menu-text {
 629   -moz-margin-start: 0px !important;
 630   -moz-padding-start: 6px;
 631   -moz-padding-end: 6px;
 632   -moz-box-flex: 0;
 633   text-align: center;
 634 }
 635
 636 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
 637   margin: 0;
 638 }
 639
 640 .subviewbutton.panel-subview-footer > .toolbarbutton-text {
 641   text-align: center;
 642   padding: 0;
 643 }
 644
 645 .subviewbutton.panel-subview-footer > .menu-accel-container {
 646   -moz-padding-start: 6px;
 647 }
 648
 649 .subviewbutton:not(.panel-subview-footer) {
 650   margin: 0;
 651 }
 652
 653 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
 654 /* Bookmark items need a more specific selector. */
 655 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
 656 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
 657 /*  font: menu;*/
 658 }
 659
 660 .PanelUI-subView .subviewbutton[shortcut]::after {
 661   content: attr(shortcut);
 662   float: right;
 663   color: #A09090;
 664 }
 665
 666 .PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
 667   -moz-margin-start: 10px;
 668 }
 669
 670 /* This is a <label> but it should fit in with the menu font- and colorwise. */
 671 #PanelUI-characterEncodingView-autodetect-label {
 672   font: menu;
 673   color: inherit;
 674 }
 675
 676 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
 677 /*  margin-left: 4px;
 678   margin-right: 4px;*/
 679 }
 680
 681 panelview .toolbarbutton-1,
 682 .widget-overflow-list .toolbarbutton-1 {
 683   margin-top: 6px;
 684 }
 685
 686 /*
 687 panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
 688 toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover,
 689 menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
 690 menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
 691 .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
 692 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
 693     > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
 694   background-color: hsla(210,4%,10%,.08);
 695   border-color: hsla(210,4%,10%,.11);
 696 }
 697
 698 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[open],:active)):hover {
 699   border-color: hsla(210,4%,10%,.11);
 700 }
 701
 702 panelview .toolbarbutton-1:-moz-any(:not([disabled]):-moz-any([open],:hover:active),[checked=true]),
 703 toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],:hover:active),
 704 menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
 705 menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
 706 .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active),
 707 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
 708     > toolbarbutton:not([disabled]):-moz-any([open],:hover:active) {
 709   background-color: hsla(210,4%,10%,.12);
 710   border-color: hsla(210,4%,10%,.14);
 711   box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
 712 }
 713
 714 .subviewbutton.panel-subview-footer {
 715   margin: 4px -4px -4px;
 716   background-color: hsla(210,4%,10%,.07);
 717   border-top: 1px solid hsla(210,4%,10%,.12);
 718   border-radius: 0;
 719   color: hsl(0,0%,25%)
 720 }
 721
 722 menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
 723 .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
 724   background-color: hsla(210,4%,10%,.1);
 725   border-top: 1px solid hsla(210,4%,10%,.12);
 726 }
 727
 728 menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active),
 729 .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active) {
 730   background-color: hsla(210,4%,10%,.15);
 731   border-top: 1px solid hsla(210,4%,10%,.12);
 732   box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
 733 }
 734
 735 #BMB_bookmarksPopup .subviewbutton {
 736   font: menu;
 737   font-weight: normal;
 738 }
 739
 740 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
 741   color: inherit;
 742 }
 743
 744 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
 745 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
 746   -moz-appearance: none;
 747   margin-top: 0;
 748   margin-bottom: 0;
 749 }
 750
 751 / Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
 752 #BMB_bookmarksPopup arrowscrollbox {
 753   padding-bottom: 0px;
 754 }
 755
 756 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
 757   / Hide bottom separator as the styled footer includes a top border serving the same purpose /
 758   display: none;
 759 }
 760
 761 / Popups with only one item don't have a footer /
 762 #BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
 763 / These popups never have a footer /
 764 #BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
 765 #BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
 766   / And so they need some bottom padding: /
 767   padding-bottom: 4px;
 768 }
 769
 770 / Disabled (empty) item is always alone and never has an icon, so fix its left padding /
 771 #BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
 772   padding-left: 6px;
 773 }
 774 */
 775
 776 .PanelUI-subView menuseparator,
 777 .PanelUI-subView toolbarseparator,
 778 .cui-widget-panelview menuseparator {
 779   -moz-appearance: none;
 780   min-height: 0;
 781   border-top: 1px solid #9C9CFF;
 782   margin: 2px 0;
 783   padding: 0;
 784 }
 785
 786 .PanelUI-subView menuseparator,
 787 .PanelUI-subView toolbarseparator {
 788 /*  -moz-margin-start: -5px;
 789   -moz-margin-end: -4px;*/
 790 }
 791
 792 .PanelUI-subView menuseparator.small-separator,
 793 .PanelUI-subView toolbarseparator.small-separator {
 794 /*  margin-left: 5px;
 795   margin-right: 5px;*/
 796 }
 797
 798 .cui-widget-panelview menuseparator.small-separator {
 799 /*  margin-left: 10px;
 800   margin-right: 10px;*/
 801 }
 802
 803 .subviewbutton > .menu-accel-container {
 804   -moz-box-pack: start;
 805   -moz-margin-start: 10px;
 806   -moz-margin-end: auto;
 807   color: #A09090;
 808 }
 809
 810 #PanelUI-historyItems > toolbarbutton {
 811   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
 812 }
 813
 814 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
 815 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
 816 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
 817   width: 16px;
 818   height: 16px;
 819 }
 820
 821 toolbarbutton[panel-multiview-anchor="true"],
 822 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
 823   color: #000000;
 824   background-color: #008484;
 825 }
 826
 827 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
 828   display: none;
 829 }
 830
 831 #PanelUI-help[panel-multiview-anchor="true"] {
 832   background-image: none;
 833 }
 834
 835 #PanelUI-help[panel-multiview-anchor="true"]::after {
 836   content: "";
 837   position: absolute;
 838   top: 0;
 839   height: 100%;
 840   width: 38px;
 841   background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
 842   background-repeat: no-repeat;
 843   background-color: #008484;
 844   background-position: left 10px center, 0; /* this doesn't need to be changed for RTL */
 845 }
 846
 847 toolbarbutton[panel-multiview-anchor="true"] {
 848   background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
 849   background-position: right 5px center;
 850   background-repeat: no-repeat;
 851 }
 852
 853 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
 854   background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
 855   background-position: left 5px center;
 856 }
 857
 858 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
 859 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
 860   display: none;
 861 }
 862
 863 #search-container[cui-areatype="menu-panel"],
 864 #wrapper-search-container[place="panel"] {
 865   width: 22.35em;
 866 }
 867
 868 #search-container[cui-areatype="menu-panel"] {
 869   margin-top: 6px;
 870   margin-bottom: 6px;
 871 }
 872
 873 toolbarpaletteitem[place="palette"] > #search-container {
 874   min-width: 7em;
 875   width: 7em;
 876 }
 877
 878 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
 879   padding: 0;
 880   transition-property: background-color, border-color;
 881   transition-duration: 150ms;
 882 }
 883
 884 /* Make direct siblings overlap borders: */
 885 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
 886 /*  border-top-color: transparent !important; */
 887 }
 888
 889 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
 890 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
 891 /*  margin-top: -1px; */
 892 }
 893
 894 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
 895   border: 0;
 896   padding: .5em;
 897   margin: 0;
 898   -moz-box-flex: 1;
 899   min-width: calc(22.35em / 3 - 0.1px);
 900   max-width: calc(22.35em / 3 - 0.1px);
 901   /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
 902      1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
 903   height: calc(2.2em + 4px);
 904   max-height: none;
 905   -moz-box-orient: horizontal;
 906 }
 907
 908 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
 909 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
 910   /* reduce the width with 2px for this button to compensate for two separators
 911      of 1px. */
 912   min-width: calc(22.35em / 3 - 0.1px - 2px);
 913   max-width: calc(22.35em / 3 - 0.1px - 2px);
 914 }
 915
 916 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
 917 /*  opacity: .25; */
 918 }
 919
 920 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
 921   min-width: 7ch;
 922 }
 923
 924 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
 925 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
 926 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
 927 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
 928   border-top-right-radius: 0;
 929   border-bottom-right-radius: 0;
 930 }
 931
 932 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
 933 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
 934 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
 935 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
 936   border-top-left-radius: 0;
 937   border-bottom-left-radius: 0;
 938 }
 939
 940 .toolbaritem-combined-buttons > separator {
 941   -moz-appearance: none;
 942   width: 3px;
 943   -moz-box-align: stretch;
 944 }
 945
 946 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
 947   margin: .5em 0;
 948   width: 1px;
 949   height: auto;
 950 /*  background: hsla(210,4%,10%,.15);*/
 951   transition-property: margin;
 952   transition-duration: 10ms;
 953   transition-timing-function: ease;
 954 }
 955
 956 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
 957   margin: 0;
 958 }
 959
 960 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
 961   padding: 0;
 962 }
 963
 964 .cui-widget-panelview,
 965 #widget-overflow-scroller {
 966   overflow-y: auto;
 967   overflow-x: hidden;
 968 }
 969
 970 #widget-overflow-scroller {
 971   max-height: 30em;
 972   margin-top: 10px;
 973   margin-bottom: 10px;
 974 }
 975
 976 #widget-overflow-list {
 977   width: 22.35em;
 978   padding-left: 10px;
 979   padding-right: 10px;
 980 }
 981
 982 toolbaritem[overflowedItem=true],
 983 toolbarbutton[overflowedItem=true] {
 984   width: 100%;
 985   max-width: 22.35em;
 986   min-height: 36px;
 987   background-repeat: no-repeat;
 988   background-position: 0 center;
 989 }
 990
 991 .widget-overflow-list .toolbarbutton-1,
 992 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
 993   -moz-box-align: center;
 994   -moz-box-orient: horizontal;
 995 }
 996
 997 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
 998 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
 999   text-align: start;
1000   -moz-padding-start: .5em;
1001 }
1002
1003 #widget-overflow-list > .toolbaritem-combined-buttons {
1004   min-height: 28px;
1005 }
1006
1007 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1008   content: "";
1009   display: -moz-box;
1010   width: 1px;
1011   height: 18px;
1012   -moz-margin-end: -1px;
1013 }
1014
1015 .subviewbutton[checked="true"] {
1016   background-image: url("chrome://global/skin/menu/menu-check.gif");
1017   background-position: top 5px left 4px;
1018   background-repeat: no-repeat;
1019 }
1020
1021 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1022   background-position: top 5px right 4px;
1023 }
1024
1025 .subviewbutton[checked="true"]:hover {
1026   background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1027 }
1028
1029 .subbiewbutton > .menu-iconic-left {
1030   -moz-margin-end: 3px;
1031 }
1032
1033 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1034   visibility: hidden;
1035 }
1036
1037 /* === END panelUIOverlay.inc.css === */
1038
1039 #PanelUI-contents #zoom-out-btn {
1040   padding-left: 12px;
1041   padding-right: 12px;
1042 }
1043
1044 #PanelUI-contents #zoom-in-btn {
1045   padding-left: 12px;
1046   padding-right: 12px;
1047 }
1048
1049 /* bookmark panel submenus */
1050
1051 #BMB_bookmarksPopup menupopup[placespopup=true] {
1052 /*  background: transparent;
1053   border: none;
1054   padding: 6px;*/
1055 }
1056
1057 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1058   /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1059 /*  background: #FFF;
1060   border: 1px solid rgba(0,0,0,0.25);
1061   border-radius: 3.5px;
1062   margin-top: -4px;*/
1063 }
1064
1065 #BMB_bookmarksPopup menupopup {
1066 /*  padding-top: 2px;*/
1067 }
1068
1069 /* Add some space at the top because there are no headers: */
1070 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox  {
1071 /*  padding-top: 4px;*/
1072 }
1073
1074 #BMB_bookmarksPopup .menu-text {
1075 /*  color: #000;*/
1076 }
1077
1078 /* bookmark panel separator */
1079 #BMB_bookmarksPopup menuseparator {
1080   padding-top: 0;
1081   padding-bottom: 0;
1082 }
1083
1084 .subviewbutton > .menu-right,
1085 .subviewbutton > .menu-iconic-left {
1086 /*  padding-top: 1px;
1087   margin-top: 1px;
1088   margin-bottom: 2px;*/
1089 }
1090
1091 /* Disabled empty item looks too small otherwise, because it has no icon. */
1092 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1093 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1094 menuitem[type="checkbox"].subviewbutton {
1095   /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1096    * 2px for its border, see above */
1097 /*  min-height: 22px;*/
1098 }
1099
1100 .subviewbutton > .toolbarbutton-text {
1101 /*  padding-top: 3px;
1102   padding-bottom: 3px;*/
1103 }
1104
1105 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1106   -moz-appearance: none;
1107   border: 0;
1108   -moz-margin-start: 3px;
1109 }
1110
1111 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1112   padding: 0 2px;
1113   -moz-padding-start: 0;
1114   height: 18px;
1115 }
1116
1117 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1118   padding: 0 6px;
1119 }
1120
1121 .subviewbutton > .toolbarbutton-text {
1122   -moz-padding-start: 16px;
1123 }
1124
1125 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1126   -moz-padding-start: 0;
1127 }
1128
1129 .subviewbutton.bookmark-item > .toolbarbutton-icon {
1130   -moz-margin-start: 3px;
1131 }
1132
1133 /* subviewbutton entries for social sidebars have images that come from external
1134 /* sources, and are not guaranteed to be the size we want, so force the size on
1135 /* those icons. */
1136 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1137   width: 16px;
1138   height: 16px;
1139 }
1140
1141 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1142   visibility: hidden;
1143 }
1144
1145 menu.subviewbutton > .menu-right {
1146   list-style-image: url("chrome://global/skin/menu/menu-arrow.gif");
1147 }
1148 menu.subviewbutton:hover > .menu-right,
1149 menu.subviewbutton[_moz-menuactive="true"] > .menu-right {
1150   list-style-image: url("chrome://global/skin/menu/menu-arrow-hover.gif");
1151 }
1152 menu[disabled="true"].subviewbutton > .menu-right {
1153   list-style-image: url("chrome://global/skin/menu/menu-arrow-disabled.gif");
1154 }