LCARStrek/browser/customizableui/panelUIOverlay.css

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