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