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