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