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   display: none;
 758 }
 759
 760 / Popups with only one item don't have a footer /
 761 #BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
 762 / These popups never have a footer /
 763 #BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
 764 #BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
 765   / And so they need some bottom padding: /
 766   padding-bottom: 4px;
 767 }
 768
 769 / Disabled (empty) item is always alone and never has an icon, so fix its left padding /
 770 #BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
 771   padding-left: 6px;
 772 }
 773 */
 774
 775 .PanelUI-subView menuseparator,
 776 .PanelUI-subView toolbarseparator,
 777 .cui-widget-panelview menuseparator {
 778   -moz-appearance: none;
 779   min-height: 0;
 780   border-top: 1px solid #9C9CFF;
 781   margin: 2px 0;
 782   padding: 0;
 783 }
 784
 785 .PanelUI-subView menuseparator,
 786 .PanelUI-subView toolbarseparator {
 787 /*  -moz-margin-start: -5px;
 788   -moz-margin-end: -4px;*/
 789 }
 790
 791 .PanelUI-subView menuseparator.small-separator,
 792 .PanelUI-subView toolbarseparator.small-separator {
 793 /*  margin-left: 5px;
 794   margin-right: 5px;*/
 795 }
 796
 797 .cui-widget-panelview menuseparator.small-separator {
 798 /*  margin-left: 10px;
 799   margin-right: 10px;*/
 800 }
 801
 802 .subviewbutton > .menu-accel-container {
 803   -moz-box-pack: start;
 804   -moz-margin-start: 10px;
 805   -moz-margin-end: auto;
 806   color: #A09090;
 807 }
 808
 809 #PanelUI-historyItems > toolbarbutton {
 810   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
 811 }
 812
 813 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
 814 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
 815 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
 816   width: 16px;
 817   height: 16px;
 818 }
 819
 820 toolbarbutton[panel-multiview-anchor="true"],
 821 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
 822   color: #000000;
 823   background-color: #008484;
 824 }
 825
 826 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
 827   display: none;
 828 }
 829
 830 #PanelUI-help[panel-multiview-anchor="true"] {
 831   background-image: none;
 832 }
 833
 834 #PanelUI-help[panel-multiview-anchor="true"]::after {
 835   content: "";
 836   position: absolute;
 837   top: 0;
 838   height: 100%;
 839   width: 38px;
 840   background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
 841   background-repeat: no-repeat;
 842   background-color: #008484;
 843   background-position: left 10px center, 0; /* this doesn't need to be changed for RTL */
 844 }
 845
 846 toolbarbutton[panel-multiview-anchor="true"] {
 847   background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
 848   background-position: right 5px center;
 849   background-repeat: no-repeat;
 850 }
 851
 852 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
 853   background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
 854   background-position: left 5px center;
 855 }
 856
 857 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
 858 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
 859   display: none;
 860 }
 861
 862 #search-container[cui-areatype="menu-panel"],
 863 #wrapper-search-container[place="panel"] {
 864   width: 22.35em;
 865 }
 866
 867 #search-container[cui-areatype="menu-panel"] {
 868   margin-top: 6px;
 869   margin-bottom: 6px;
 870 }
 871
 872 toolbarpaletteitem[place="palette"] > #search-container {
 873   min-width: 7em;
 874   width: 7em;
 875 }
 876
 877 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
 878   padding: 0;
 879   transition-property: background-color, border-color;
 880   transition-duration: 150ms;
 881 }
 882
 883 /* Make direct siblings overlap borders: */
 884 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
 885 /*  border-top-color: transparent !important; */
 886 }
 887
 888 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
 889 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
 890 /*  margin-top: -1px; */
 891 }
 892
 893 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
 894   border: 0;
 895   padding: .5em;
 896   margin: 0;
 897   -moz-box-flex: 1;
 898   min-width: calc(22.35em / 3 - 0.1px);
 899   max-width: calc(22.35em / 3 - 0.1px);
 900   /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
 901      1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
 902   height: calc(2.2em + 4px);
 903   max-height: none;
 904   -moz-box-orient: horizontal;
 905 }
 906
 907 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
 908 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
 909   /* reduce the width with 2px for this button to compensate for two separators
 910      of 1px. */
 911   min-width: calc(22.35em / 3 - 0.1px - 2px);
 912   max-width: calc(22.35em / 3 - 0.1px - 2px);
 913 }
 914
 915 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
 916 /*  opacity: .25; */
 917 }
 918
 919 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
 920   min-width: 7ch;
 921 }
 922
 923 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
 924 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
 925 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
 926 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
 927   border-top-right-radius: 0;
 928   border-bottom-right-radius: 0;
 929 }
 930
 931 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
 932 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
 933 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
 934 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
 935   border-top-left-radius: 0;
 936   border-bottom-left-radius: 0;
 937 }
 938
 939 .toolbaritem-combined-buttons > separator {
 940   -moz-appearance: none;
 941   width: 3px;
 942   -moz-box-align: stretch;
 943 }
 944
 945 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
 946   margin: .5em 0;
 947   width: 1px;
 948   height: auto;
 949 /*  background: hsla(210,4%,10%,.15);*/
 950   transition-property: margin;
 951   transition-duration: 10ms;
 952   transition-timing-function: ease;
 953 }
 954
 955 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
 956   margin: 0;
 957 }
 958
 959 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
 960   padding: 0;
 961 }
 962
 963 .cui-widget-panelview,
 964 #widget-overflow-scroller {
 965   overflow-y: auto;
 966   overflow-x: hidden;
 967 }
 968
 969 #widget-overflow-scroller {
 970   max-height: 30em;
 971   margin-top: 10px;
 972   margin-bottom: 10px;
 973 }
 974
 975 #widget-overflow-list {
 976   width: 22.35em;
 977   padding-left: 10px;
 978   padding-right: 10px;
 979 }
 980
 981 toolbaritem[overflowedItem=true],
 982 toolbarbutton[overflowedItem=true] {
 983   width: 100%;
 984   max-width: 22.35em;
 985   min-height: 36px;
 986   background-repeat: no-repeat;
 987   background-position: 0 center;
 988 }
 989
 990 .widget-overflow-list .toolbarbutton-1,
 991 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
 992   -moz-box-align: center;
 993   -moz-box-orient: horizontal;
 994 }
 995
 996 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
 997 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
 998   text-align: start;
 999   -moz-padding-start: .5em;
1000 }
1001
1002 #widget-overflow-list > .toolbaritem-combined-buttons {
1003   min-height: 28px;
1004 }
1005
1006 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1007   content: "";
1008   display: -moz-box;
1009   width: 1px;
1010   height: 18px;
1011   -moz-margin-end: -1px;
1012 }
1013
1014 .subviewbutton[checked="true"] {
1015   background-image: url("chrome://global/skin/menu/menu-check.gif");
1016   background-position: top 5px left 4px;
1017   background-repeat: no-repeat;
1018 }
1019
1020 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1021   background-position: top 5px right 4px;
1022 }
1023
1024 .subviewbutton[checked="true"]:hover {
1025   background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1026 }
1027
1028 .subbiewbutton > .menu-iconic-left {
1029   -moz-margin-end: 3px;
1030 }
1031
1032 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1033   visibility: hidden;
1034 }
1035
1036 /* === END panelUIOverlay.inc.css === */
1037
1038 #PanelUI-contents #zoom-out-btn {
1039   padding-left: 12px;
1040   padding-right: 12px;
1041 }
1042
1043 #PanelUI-contents #zoom-in-btn {
1044   padding-left: 12px;
1045   padding-right: 12px;
1046 }
1047
1048 /* bookmark panel submenus */
1049
1050 #BMB_bookmarksPopup menupopup[placespopup=true] {
1051 /*  background: transparent;
1052   border: none;
1053   padding: 6px;*/
1054 }
1055
1056 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1057   /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1058 /*  background: #FFF;
1059   border: 1px solid rgba(0,0,0,0.25);
1060   border-radius: 3.5px;
1061   margin-top: -4px;*/
1062 }
1063
1064 #BMB_bookmarksPopup menupopup {
1065 /*  padding-top: 2px;*/
1066 }
1067
1068 /* Add some space at the top because there are no headers: */
1069 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox  {
1070 /*  padding-top: 4px;*/
1071 }
1072
1073 #BMB_bookmarksPopup .menu-text {
1074 /*  color: #000;*/
1075 }
1076
1077 /* bookmark panel separator */
1078 #BMB_bookmarksPopup menuseparator {
1079   padding-top: 0;
1080   padding-bottom: 0;
1081 }
1082
1083 .subviewbutton > .menu-right,
1084 .subviewbutton > .menu-iconic-left {
1085 /*  padding-top: 1px;
1086   margin-top: 1px;
1087   margin-bottom: 2px;*/
1088 }
1089
1090 /* Disabled empty item looks too small otherwise, because it has no icon. */
1091 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1092 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1093 menuitem[type="checkbox"].subviewbutton {
1094   /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1095    * 2px for its border, see above */
1096 /*  min-height: 22px;*/
1097 }
1098
1099 .subviewbutton > .toolbarbutton-text {
1100 /*  padding-top: 3px;
1101   padding-bottom: 3px;*/
1102 }
1103
1104 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1105   -moz-appearance: none;
1106   border: 0;
1107   -moz-margin-start: 3px;
1108 }
1109
1110 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1111   padding: 0 2px;
1112   -moz-padding-start: 0;
1113   height: 18px;
1114 }
1115
1116 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1117   padding: 0 6px;
1118 }
1119
1120 .subviewbutton > .toolbarbutton-text {
1121   -moz-padding-start: 16px;
1122 }
1123
1124 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1125   -moz-padding-start: 0;
1126 }
1127
1128 .subviewbutton.bookmark-item > .toolbarbutton-icon {
1129   -moz-margin-start: 3px;
1130 }
1131
1132 /* subviewbutton entries for social sidebars have images that come from external
1133 /* sources, and are not guaranteed to be the size we want, so force the size on
1134 /* those icons. */
1135 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1136   width: 16px;
1137   height: 16px;
1138 }
1139
1140 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1141   visibility: hidden;
1142 }
1143
1144 menu.subviewbutton > .menu-right {
1145   list-style-image: url("chrome://global/skin/menu/menu-arrow.gif");
1146 }
1147 menu.subviewbutton:hover > .menu-right,
1148 menu.subviewbutton[_moz-menuactive="true"] > .menu-right {
1149   list-style-image: url("chrome://global/skin/menu/menu-arrow-hover.gif");
1150 }
1151 menu[disabled="true"].subviewbutton > .menu-right {
1152   list-style-image: url("chrome://global/skin/menu/menu-arrow-disabled.gif");
1153 }