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