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