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