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(21em);
  25 }
  26
  27 .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
  28   transform: translateX(-21em);
  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 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text,
 104 #bookmarks-menu-button > toolbarbutton > .toolbarbutton-text,
 105 :-moz-any(#PanelUI-contents,#widget-overflow-list) > toolbarpaletteitem > toolbaritem > toolbarbutton > .toolbarbutton-text,
 106 :-moz-any(#PanelUI-contents,#widget-overflow-list) > toolbaritem > toolbarbutton > .toolbarbutton-text,
 107 :-moz-any(#PanelUI-contents,#widget-overflow-list) > toolbarpaletteitem > toolbarbutton > .toolbarbutton-text,
 108 :-moz-any(#PanelUI-contents,#widget-overflow-list) > toolbarbutton > .toolbarbutton-text {
 109   font-size: 10px;
 110 }
 111
 112 #wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls,
 113 #wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls {
 114   -moz-margin-start: 0;
 115 }
 116
 117 #PanelUI-contents,
 118 .panel-mainview:not([panelid="PanelUI-popup"]) {
 119   max-width: 21em;
 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: 21em;
 143 }
 144
 145 #PanelUI-contents-scroller {
 146   overflow-y: auto;
 147   overflow-x: hidden;
 148   width: 21em;
 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(7em - 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(7em - 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: 7em;
 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 7em (menuPanelButtonWidth) 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(7em / 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: #d94141;
 466   outline-color: #c23a3a;*/
 467 }
 468
 469 #PanelUI-quit:not([disabled]):hover:active {
 470 /*  background-color: #ad3434;
 471   outline-color: #992e2e;*/
 472 }
 473
 474 #customization-panelHolder #PanelUI-customize {
 475   color: #FFCF00;
 476   background-color: #008484;
 477   text-shadow: none;
 478   margin-top: -1px;
 479 }
 480
 481 #customization-panelHolder #PanelUI-customize + toolbarseparator {
 482   display: none;
 483 }
 484
 485 #customization-panelHolder #PanelUI-customize:hover,
 486 #customization-panelHolder #PanelUI-customize:hover:active {
 487   background-color: #FFCF00;
 488   color: #000000;
 489 }
 490
 491 #customization-palette .toolbarbutton-multiline-text,
 492 #customization-palette .toolbarbutton-text {
 493   display: none;
 494 }
 495
 496 panelview .toolbarbutton-1,
 497 .subviewbutton,
 498 .widget-overflow-list .toolbarbutton-1,
 499 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
 500 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton {
 501 /*  padding: 2px 6px;
 502   background-color: hsla(210,4%,10%,0);
 503   border-radius: 2px;
 504   border-style: solid;
 505   border-color: hsla(210,4%,10%,0);*/
 506   transition-property: background-color, border-color;
 507   transition-duration: 150ms;
 508 }
 509
 510 panelview .toolbarbutton-1,
 511 .subviewbutton,
 512 .widget-overflow-list .toolbarbutton-1,
 513 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton {
 514   border-width: 0;
 515 }
 516
 517 .subviewbutton.panel-subview-footer {
 518   border-radius: 0;
 519   border: none;
 520 }
 521
 522 .subviewbutton.panel-subview-footer > .toolbarbutton-text,
 523 .subviewbutton.panel-subview-footer > .menu-text {
 524   -moz-padding-start: 0;
 525   -moz-padding-end: 12px;
 526   -moz-box-flex: 0;
 527 }
 528
 529 .subviewbutton:not(.panel-subview-footer) {
 530 /*  margin: 2px 0;*/
 531 }
 532
 533 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
 534 /* Bookmark items need a more specific selector. */
 535 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
 536 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
 537 /*  font-size: 1.1em;*/
 538 }
 539
 540 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
 541   margin-left: 4px;
 542   margin-right: 4px;
 543 }
 544
 545 panelview .toolbarbutton-1,
 546 .widget-overflow-list .toolbarbutton-1 {
 547   margin-top: 6px;
 548 }
 549
 550 /*
 551 panelview toolbarbutton-1:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover,
 552 toolbarbutton.subviewbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover,
 553 menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
 554 menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
 555 .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover,
 556 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)
 557     > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
 558   background-color: hsla(210,4%,10%,.08);
 559   border-color: hsla(210,4%,10%,.11);
 560 }
 561
 562 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem):not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
 563   border-color: hsla(210,4%,10%,.11);
 564 }
 565
 566 panelview .toolbarbutton-1:not([disabled]):-moz-any([open],[checked="true"],:hover:active),
 567 toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],[checked="true"],:hover:active),
 568 menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
 569 menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
 570 .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],[checked="true"],:hover:active),
 571 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)
 572     > toolbarbutton:not([disabled]):-moz-any([open],[checked="true"],:hover:active) {
 573   background-color: hsla(210,4%,10%,.12);
 574   border-color: hsla(210,4%,10%,.14);
 575   box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
 576 }
 577
 578 .subviewbutton.panel-subview-footer {
 579   margin: 4px -4px -4px;
 580   background-color: hsla(210,4%,10%,.07);
 581   border-top: 1px solid hsla(210,4%,10%,.12);
 582   border-radius: 0;
 583   color: hsl(0,0%,25%)
 584 }
 585
 586 .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
 587   background-color: hsla(210,4%,10%,.1);
 588   border-top: 1px solid hsla(210,4%,10%,.12);
 589 }
 590
 591 .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],[checked="true"],:hover:active) {
 592   background-color: hsla(210,4%,10%,.15);
 593   border-top: 1px solid hsla(210,4%,10%,.12);
 594   box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
 595 }
 596
 597 #BMB_bookmarksPopup .subviewbutton {
 598   font: inherit;
 599   font-weight: normal;
 600 }
 601
 602 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
 603   color: inherit;
 604 }
 605
 606 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
 607 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
 608   -moz-appearance: none;
 609   margin-top: 0;
 610   margin-bottom: 0;
 611 }
 612
 613 / Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
 614 #BMB_bookmarksPopup arrowscrollbox {
 615   padding-bottom: 0px;
 616 }
 617
 618 #BMB_bookmarksPopup menupopup {
 619   padding-top: 2px;
 620 }
 621
 622 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
 623   / Hide bottom separator as the styled footer includes a top border serving the same purpose /
 624   display: none;
 625 }
 626 */
 627
 628 .PanelUI-subView menuseparator,
 629 .PanelUI-subView toolbarseparator,
 630 .cui-widget-panelview menuseparator {
 631   -moz-appearance: none;
 632   min-height: 0;
 633   border-top: 1px solid #9C9CFF;
 634   margin: 2px 0;
 635   padding: 0;
 636 }
 637
 638 .PanelUI-subView menuseparator,
 639 .PanelUI-subView toolbarseparator {
 640 /*  -moz-margin-start: -5px;
 641   -moz-margin-end: -4px;*/
 642 }
 643
 644 .PanelUI-subView menuseparator.small-separator,
 645 .PanelUI-subView toolbarseparator.small-separator {
 646   margin-left: 5px;
 647   margin-right: 5px;
 648 }
 649
 650 .cui-widget-panelview menuseparator.small-separator {
 651   margin-left: 10px;
 652   margin-right: 10px;
 653 }
 654
 655 .subviewbutton > .menu-accel-container {
 656   -moz-box-pack: start;
 657   -moz-margin-start: 10px;
 658   -moz-margin-end: auto;
 659 /*  color: hsl(0,0%,50%);*/
 660 }
 661
 662 #PanelUI-historyItems > toolbarbutton {
 663   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
 664 }
 665
 666 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
 667 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
 668 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
 669   width: 16px;
 670   height: 16px;
 671 }
 672
 673 #PanelUI-footer > #PanelUI-footer-inner[panel-multiview-anchor=true],
 674 toolbarbutton[panel-multiview-anchor=true] {
 675   background-color: #008484;
 676 }
 677
 678 toolbarbutton[panel-multiview-anchor=true] {
 679   background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
 680   background-position: right 5px center;
 681   background-repeat: no-repeat;
 682 }
 683
 684 toolbarbutton[panel-multiview-anchor=true]:-moz-locale-dir(rtl) {
 685   background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
 686   background-position: left 5px center;
 687 }
 688
 689 #PanelUI-footer > #PanelUI-footer-inner[panel-multiview-anchor=true],
 690 toolbarbutton[panel-multiview-anchor=true],
 691 toolbarbutton[panel-multiview-anchor=true] > .toolbarbutton-menubutton-button {
 692   color: #000000;
 693 }
 694
 695 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
 696 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
 697   display: none;
 698 }
 699
 700 #search-container[cui-areatype="menu-panel"],
 701 #wrapper-search-container[place="panel"] {
 702   width: 21em;
 703 }
 704
 705 #search-container[cui-areatype="menu-panel"] {
 706   margin-top: 6px;
 707   margin-bottom: 6px;
 708 }
 709
 710 toolbarpaletteitem[place="palette"] > #search-container {
 711   min-width: 7em;
 712   width: 7em;
 713 }
 714
 715 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) {
 716   padding: 0;
 717   transition-property: background-color, border-color;
 718   transition-duration: 150ms;
 719 }
 720
 721 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton {
 722   border: 0;
 723   padding: .5em;
 724   margin: 0;
 725   -moz-box-flex: 1;
 726   min-width: 7em;
 727   max-width: 7em;
 728   /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
 729      1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
 730   height: calc(2.2em + 4px);
 731   max-height: none;
 732   -moz-box-orient: horizontal;
 733 }
 734
 735 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #copy-button,
 736 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-reset-button {
 737   /* reduce the width with 2px for this button to compensate for two separators
 738      of 1px. */
 739   min-width: calc(7em - 2px);
 740   max-width: calc(7em - 2px);
 741 }
 742
 743 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton[disabled] > .toolbarbutton-icon {
 744 /*  opacity: .25; */
 745 }
 746
 747 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
 748   min-width: 7ch;
 749 }
 750
 751 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #cut-button:-moz-locale-dir(ltr),
 752 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #paste-button:-moz-locale-dir(rtl),
 753 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-out-button:-moz-locale-dir(ltr),
 754 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-in-button:-moz-locale-dir(rtl) {
 755   border-top-right-radius: 0;
 756   border-bottom-right-radius: 0;
 757 }
 758
 759 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #cut-button:-moz-locale-dir(rtl),
 760 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #paste-button:-moz-locale-dir(ltr),
 761 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-out-button:-moz-locale-dir(rtl),
 762 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-in-button:-moz-locale-dir(ltr) {
 763   border-top-left-radius: 0;
 764   border-bottom-left-radius: 0;
 765 }
 766
 767 .toolbaritem-combined-buttons > separator {
 768   -moz-appearance: none;
 769   width: 3px;
 770   -moz-box-align: stretch;
 771 }
 772
 773 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > separator {
 774   margin: .5em 0;
 775   width: 1px;
 776   height: auto;
 777 /*  background: hsla(210,4%,10%,.15);*/
 778   transition-property: margin;
 779   transition-duration: 10ms;
 780   transition-timing-function: ease;
 781 }
 782
 783 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem):hover > separator {
 784   margin: 0;
 785 }
 786
 787 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
 788   padding: 0;
 789 }
 790
 791 .cui-widget-panelview,
 792 #widget-overflow-scroller {
 793   overflow-y: auto;
 794   overflow-x: hidden;
 795 }
 796
 797 #widget-overflow-scroller {
 798   max-height: 30em;
 799   margin-top: 10px;
 800   margin-bottom: 10px;
 801 }
 802
 803 #widget-overflow-list {
 804   width: 21em;
 805   padding-left: 10px;
 806   padding-right: 10px;
 807 }
 808
 809 #widget-overflow-list > .overflowedItem {
 810   width: 100%;
 811   max-width: 21em;
 812   min-height: 36px;
 813   background-repeat: no-repeat;
 814   background-position: 0 center;
 815 }
 816
 817 .widget-overflow-list .toolbarbutton-1,
 818 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
 819   -moz-box-align: center;
 820   -moz-box-orient: horizontal;
 821 }
 822
 823 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-text,
 824 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
 825   text-align: start;
 826   -moz-padding-start: .5em;
 827 }
 828
 829 #widget-overflow-list > .toolbaritem-combined-buttons {
 830   min-height: 28px;
 831 }
 832
 833 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
 834   content: "";
 835   display: -moz-box;
 836   width: 1px;
 837   height: 18px;
 838   -moz-margin-end: -1px;
 839 }
 840
 841 .subviewbutton[checked="true"] {
 842   background-image: url("chrome://global/skin/menu/menu-check.gif");
 843   background-position: top 5px left 4px;
 844   background-repeat: no-repeat;
 845 }
 846
 847 .subviewbutton[checked="true"]:hover {
 848   background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
 849 }
 850
 851 .PanelUI-subView .menu-iconic-left {
 852   -moz-appearance: none;
 853   -moz-margin-end: 3px;
 854 }
 855
 856 .PanelUI-subView menuitem[checked="true"] > .menu-iconic-left {
 857   visibility: hidden;
 858 }
 859
 860 /* === END panelUIOverlay.inc.css === */
 861
 862 #PanelUI-contents #zoom-out-btn {
 863   padding-left: 12px;
 864   padding-right: 12px;
 865 }
 866
 867 #PanelUI-contents #zoom-in-btn {
 868   padding-left: 12px;
 869   padding-right: 12px;
 870 }
 871
 872 /* bookmark panel submenus */
 873
 874 #BMB_bookmarksPopup menupopup {
 875   background: transparent;
 876   border: none;
 877   padding: 6px;
 878 }
 879
 880 #BMB_bookmarksPopup menupopup > hbox {
 881   /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
 882 /*  background: #FFF;
 883   border: 1px solid rgba(0,0,0,0.25);
 884   border-radius: 3.5px;
 885   margin-top: -4px;*/
 886 }
 887
 888 #BMB_bookmarksPopup .menu-text {
 889 /*  color: #000;*/
 890 }
 891
 892 /* bookmark panel separator */
 893 #BMB_bookmarksPopup menuseparator {
 894   padding-top: 0;
 895   padding-bottom: 0;
 896 }
 897
 898 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
 899   -moz-appearance: none;
 900   border: 0;
 901   -moz-margin-start: 3px;
 902 }
 903
 904 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
 905   padding: 0 2px;
 906   -moz-padding-start: 0;
 907   height: 18px;
 908 }
 909
 910 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
 911   padding: 0 6px;
 912 }
 913
 914 .subviewbutton > .toolbarbutton-text {
 915   -moz-padding-start: 16px;
 916 }
 917
 918 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
 919   -moz-padding-start: 0;
 920 }
 921
 922 .subviewbutton.bookmark-item > .toolbarbutton-icon {
 923   -moz-margin-start: 3px;
 924 }
 925
 926 /* subviewbutton entries for social sidebars have images that come from external
 927 /* sources, and are not guaranteed to be the size we want, so force the size on
 928 /* those icons. */
 929 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
 930   width: 16px;
 931   height: 16px;
 932 }
 933
 934 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
 935   visibility: hidden;
 936 }
 937 /*
 938 menu.subviewbutton > .menu-right {
 939   -moz-appearance: none;
 940   list-style-image: url("chrome://browser/skin/places/bookmarks-menu-arrow.png");
 941   -moz-image-region: rect(0, 16px, 16px, 0);
 942 }
 943
 944 menu[disabled="true"].subviewbutton > .menu-right {
 945   -moz-image-region: rect(0, 32px, 16px, 16px);
 946 }
 947 */