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