LCARStrek/browser/customizableui/panelUIOverlay.css

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