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: 4px 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: 0 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 }
 605
 606 panelview .toolbarbutton-1,
 607 .subviewbutton,
 608 .widget-overflow-list .toolbarbutton-1,
 609 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
 610   border-width: 0;
 611 }
 612
 613 .subviewbutton.panel-subview-footer {
 614 /*  border-radius: 0; */
 615   margin: 2px 0 0;
 616 }
 617
 618 .subviewbutton.panel-subview-footer > .menu-text {
 619   -moz-margin-start: 0px !important;
 620   -moz-padding-start: 6px;
 621   -moz-padding-end: 6px;
 622   -moz-box-flex: 0;
 623   text-align: center;
 624 }
 625
 626 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
 627   margin: 0;
 628 }
 629
 630 .subviewbutton.panel-subview-footer > .toolbarbutton-text {
 631   text-align: center;
 632   padding: 0;
 633 }
 634
 635 .subviewbutton.panel-subview-footer > .menu-accel-container {
 636   -moz-padding-start: 6px;
 637 }
 638
 639 .subviewbutton:not(.panel-subview-footer) {
 640   margin: 0;
 641 }
 642
 643 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
 644 /* Bookmark items need a more specific selector. */
 645 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
 646 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
 647 /*  font: menu;*/
 648 }
 649
 650 .PanelUI-subView .subviewbutton[shortcut]::after {
 651   content: attr(shortcut);
 652   float: right;
 653   color: #A09090;
 654 }
 655
 656 .PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
 657   -moz-margin-start: 10px;
 658 }
 659
 660 /* This is a <label> but it should fit in with the menu font- and colorwise. */
 661 #PanelUI-characterEncodingView-autodetect-label {
 662   font: menu;
 663   color: inherit;
 664 }
 665
 666 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
 667 /*  margin-left: 4px;
 668   margin-right: 4px;*/
 669 }
 670
 671 panelview .toolbarbutton-1,
 672 .widget-overflow-list .toolbarbutton-1 {
 673   margin-top: 6px;
 674 }
 675
 676 /*
 677 panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
 678 toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover,
 679 menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
 680 menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
 681 .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
 682 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
 683     > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
 684   background-color: hsla(210,4%,10%,.08);
 685   border-color: hsla(210,4%,10%,.11);
 686 }
 687
 688 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[open],:active)):hover {
 689   border-color: hsla(210,4%,10%,.11);
 690 }
 691
 692 panelview .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active),
 693 toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],:hover:active),
 694 menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
 695 menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
 696 .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active),
 697 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
 698     > toolbarbutton:not([disabled]):-moz-any([open],:hover:active) {
 699   background-color: hsla(210,4%,10%,.12);
 700   border-color: hsla(210,4%,10%,.14);
 701   box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
 702 }
 703
 704 .subviewbutton.panel-subview-footer {
 705   margin: 4px -4px -4px;
 706   background-color: hsla(210,4%,10%,.07);
 707   border-top: 1px solid hsla(210,4%,10%,.12);
 708   border-radius: 0;
 709   color: hsl(0,0%,25%)
 710 }
 711
 712 menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
 713 .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
 714   background-color: hsla(210,4%,10%,.1);
 715   border-top: 1px solid hsla(210,4%,10%,.12);
 716 }
 717
 718 menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active),
 719 .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active) {
 720   background-color: hsla(210,4%,10%,.15);
 721   border-top: 1px solid hsla(210,4%,10%,.12);
 722   box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
 723 }
 724
 725 #BMB_bookmarksPopup .subviewbutton {
 726   font: menu;
 727   font-weight: normal;
 728 }
 729
 730 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
 731   color: inherit;
 732 }
 733
 734 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
 735 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
 736   -moz-appearance: none;
 737   margin-top: 0;
 738   margin-bottom: 0;
 739 }
 740
 741 / Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
 742 #BMB_bookmarksPopup arrowscrollbox {
 743   padding-bottom: 0px;
 744 }
 745
 746 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
 747   / Hide bottom separator as the styled footer includes a top border serving the same purpose.
 748    * We can't just use display: none here, otherwise scrollbox.xml will flip out and sometimes
 749    * refuse to scroll for us (see bug 984156). Instead, we set it to visibility hidden, force
 750    * a minimum height, and then negative-margin that single pixel into oblivion. That seems
 751    * to be enough to make scrollbox happy.
 752    /
 753   -moz-appearance: none;
 754   visibility: hidden;
 755   min-height: 1px;
 756   margin: -1px 0 0;
 757   border: none;
 758 }
 759
 760 / Popups with only one item don't have a footer /
 761 menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
 762 / These popups never have a footer /
 763 #BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
 764 #BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
 765   / And so they need some bottom padding: /
 766   padding-bottom: 4px;
 767 }
 768
 769 / Disabled (empty) item is always alone and never has an icon, so fix its left padding /
 770 #BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
 771   padding-left: 6px;
 772 }
 773 */
 774
 775 .PanelUI-subView menuseparator,
 776 .PanelUI-subView toolbarseparator,
 777 .cui-widget-panelview menuseparator {
 778   -moz-appearance: none;
 779   min-height: 0;
 780   border-top: 1px solid #9C9CFF;
 781   margin: 2px 0;
 782   padding: 0;
 783 }
 784
 785 .PanelUI-subView menuseparator,
 786 .PanelUI-subView toolbarseparator {
 787 /*  -moz-margin-start: -5px;
 788   -moz-margin-end: -4px;*/
 789 }
 790
 791 .PanelUI-subView menuseparator.small-separator,
 792 .PanelUI-subView toolbarseparator.small-separator {
 793 /*  margin-left: 5px;
 794   margin-right: 5px;*/
 795 }
 796
 797 .cui-widget-panelview menuseparator.small-separator {
 798 /*  margin-left: 10px;
 799   margin-right: 10px;*/
 800 }
 801
 802 .subviewbutton > .menu-accel-container {
 803   -moz-box-pack: start;
 804   -moz-margin-start: 10px;
 805   -moz-margin-end: auto;
 806   color: #A09090;
 807 }
 808
 809 #PanelUI-historyItems > toolbarbutton {
 810   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
 811 }
 812
 813 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
 814 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
 815 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
 816   width: 16px;
 817   height: 16px;
 818 }
 819
 820 toolbarbutton[panel-multiview-anchor="true"],
 821 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
 822   color: #000000;
 823   background-color: #008484;
 824 }
 825
 826 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
 827   display: none;
 828 }
 829
 830 #PanelUI-help[panel-multiview-anchor="true"] {
 831   background-image: none;
 832 }
 833
 834 #PanelUI-help[panel-multiview-anchor="true"]::after {
 835   content: "";
 836   position: absolute;
 837   top: 0;
 838   height: 100%;
 839   width: 38px;
 840   background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
 841   background-repeat: no-repeat;
 842   background-color: #008484;
 843   background-position: left 10px center, 0; /* this doesn't need to be changed for RTL */
 844 }
 845
 846 toolbarbutton[panel-multiview-anchor="true"] {
 847   background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
 848   background-position: right 5px center;
 849   background-repeat: no-repeat;
 850 }
 851
 852 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
 853   background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
 854   background-position: left 5px center;
 855 }
 856
 857 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
 858 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
 859   display: none;
 860 }
 861
 862 #search-container[cui-areatype="menu-panel"],
 863 #wrapper-search-container[place="panel"] {
 864   width: 22.35em;
 865 }
 866
 867 #search-container[cui-areatype="menu-panel"] {
 868   margin-top: 6px;
 869   margin-bottom: 6px;
 870 }
 871
 872 toolbarpaletteitem[place="palette"] > #search-container {
 873   min-width: 7em;
 874   width: 7em;
 875 }
 876
 877 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
 878   padding: 0;
 879   transition-property: background-color, border-color;
 880   transition-duration: 150ms;
 881 }
 882
 883 /* Make direct siblings overlap borders: */
 884 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
 885 /*  border-top-color: transparent !important; */
 886 }
 887
 888 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
 889 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
 890 /*  margin-top: -1px; */
 891 }
 892
 893 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
 894   border: 0;
 895   padding: .5em;
 896   margin: 0;
 897   -moz-box-flex: 1;
 898   min-width: calc(22.35em / 3 - 0.1px);
 899   max-width: calc(22.35em / 3 - 0.1px);
 900   /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
 901      1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
 902   height: calc(2.2em + 4px);
 903   max-height: none;
 904   -moz-box-orient: horizontal;
 905 }
 906
 907 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
 908 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
 909   /* reduce the width with 2px for this button to compensate for two separators
 910      of 1px. */
 911   min-width: calc(22.35em / 3 - 0.1px - 2px);
 912   max-width: calc(22.35em / 3 - 0.1px - 2px);
 913 }
 914
 915 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
 916 /*  opacity: .25; */
 917 }
 918
 919 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
 920   min-width: 7ch;
 921 }
 922
 923 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
 924 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
 925 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
 926 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
 927   border-top-right-radius: 0;
 928   border-bottom-right-radius: 0;
 929 }
 930
 931 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
 932 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
 933 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
 934 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
 935   border-top-left-radius: 0;
 936   border-bottom-left-radius: 0;
 937 }
 938
 939 .toolbaritem-combined-buttons > separator {
 940   -moz-appearance: none;
 941   width: 3px;
 942   -moz-box-align: stretch;
 943 }
 944
 945 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
 946   margin: .5em 0;
 947   width: 1px;
 948   height: auto;
 949 /*  background: hsla(210,4%,10%,.15);*/
 950   transition-property: margin;
 951   transition-duration: 10ms;
 952   transition-timing-function: ease;
 953 }
 954
 955 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
 956   margin: 0;
 957 }
 958
 959 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
 960   padding: 0;
 961 }
 962
 963 .cui-widget-panelview,
 964 #widget-overflow-scroller {
 965   overflow-y: auto;
 966   overflow-x: hidden;
 967 }
 968
 969 #widget-overflow-scroller {
 970   max-height: 30em;
 971   margin-top: 10px;
 972   margin-bottom: 10px;
 973 }
 974
 975 #widget-overflow-list {
 976   width: 22.35em;
 977   padding-left: 10px;
 978   padding-right: 10px;
 979 }
 980
 981 toolbaritem[overflowedItem=true],
 982 toolbarbutton[overflowedItem=true] {
 983   width: 100%;
 984   max-width: 22.35em;
 985   min-height: 36px;
 986   background-repeat: no-repeat;
 987   background-position: 0 center;
 988 }
 989
 990 .widget-overflow-list .toolbarbutton-1,
 991 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
 992   -moz-box-align: center;
 993   -moz-box-orient: horizontal;
 994 }
 995
 996 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
 997 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
 998   text-align: start;
 999   -moz-padding-start: .5em;
1000 }
1001
1002 #widget-overflow-list > .toolbaritem-combined-buttons {
1003   min-height: 28px;
1004 }
1005
1006 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1007   content: "";
1008   display: -moz-box;
1009   width: 1px;
1010   height: 18px;
1011   -moz-margin-end: -1px;
1012 }
1013
1014 .subviewbutton[checked="true"] {
1015   background-image: url("chrome://global/skin/menu/menu-check.gif");
1016   background-position: top 5px left 4px;
1017   background-repeat: no-repeat;
1018 }
1019
1020 .subviewbutton[checked="true"]:hover {
1021   background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1022 }
1023
1024 .subbiewbutton > .menu-iconic-left {
1025   -moz-margin-end: 3px;
1026 }
1027
1028 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1029   visibility: hidden;
1030 }
1031
1032 /* === END panelUIOverlay.inc.css === */
1033
1034 #PanelUI-contents #zoom-out-btn {
1035   padding-left: 12px;
1036   padding-right: 12px;
1037 }
1038
1039 #PanelUI-contents #zoom-in-btn {
1040   padding-left: 12px;
1041   padding-right: 12px;
1042 }
1043
1044 /* bookmark panel submenus */
1045
1046 #BMB_bookmarksPopup menupopup[placespopup=true] {
1047 /*  background: transparent;
1048   border: none;
1049   padding: 6px;*/
1050 }
1051
1052 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1053   /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1054 /*  background: #FFF;
1055   border: 1px solid rgba(0,0,0,0.25);
1056   border-radius: 3.5px;
1057   margin-top: -4px;*/
1058 }
1059
1060 #BMB_bookmarksPopup menupopup {
1061 /*  padding-top: 2px;*/
1062 }
1063
1064 /* Add some space at the top because there are no headers: */
1065 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox  {
1066 /*  padding-top: 4px;*/
1067 }
1068
1069 #BMB_bookmarksPopup .menu-text {
1070 /*  color: #000;*/
1071 }
1072
1073 /* bookmark panel separator */
1074 #BMB_bookmarksPopup menuseparator {
1075   padding-top: 0;
1076   padding-bottom: 0;
1077 }
1078
1079 .subviewbutton > .menu-right,
1080 .subviewbutton > .menu-iconic-left {
1081 /*  padding-top: 1px;
1082   margin-top: 1px;
1083   margin-bottom: 2px;*/
1084 }
1085
1086 /* Disabled empty item looks too small otherwise, because it has no icon. */
1087 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1088 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1089 menuitem[type="checkbox"].subviewbutton {
1090   /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1091    * 2px for its border, see above */
1092 /*  min-height: 22px;*/
1093 }
1094
1095 .subviewbutton > .toolbarbutton-text {
1096 /*  padding-top: 3px;
1097   padding-bottom: 3px;*/
1098 }
1099
1100 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1101   -moz-appearance: none;
1102   border: 0;
1103   -moz-margin-start: 3px;
1104 }
1105
1106 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1107   padding: 0 2px;
1108   -moz-padding-start: 0;
1109   height: 18px;
1110 }
1111
1112 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1113   padding: 0 6px;
1114 }
1115
1116 .subviewbutton > .toolbarbutton-text {
1117   -moz-padding-start: 16px;
1118 }
1119
1120 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1121   -moz-padding-start: 0;
1122 }
1123
1124 .subviewbutton.bookmark-item > .toolbarbutton-icon {
1125   -moz-margin-start: 3px;
1126 }
1127
1128 /* subviewbutton entries for social sidebars have images that come from external
1129 /* sources, and are not guaranteed to be the size we want, so force the size on
1130 /* those icons. */
1131 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1132   width: 16px;
1133   height: 16px;
1134 }
1135
1136 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1137   visibility: hidden;
1138 }
1139
1140 menu.subviewbutton > .menu-right {
1141   list-style-image: url("chrome://global/skin/menu/menu-arrow.gif");
1142 }
1143 menu.subviewbutton:hover > .menu-right,
1144 menu.subviewbutton[_moz-menuactive="true"] > .menu-right {
1145   list-style-image: url("chrome://global/skin/menu/menu-arrow-hover.gif");
1146 }
1147 menu[disabled="true"].subviewbutton > .menu-right {
1148   list-style-image: url("chrome://global/skin/menu/menu-arrow-disabled.gif");
1149 }