LCARStrek/browser/customizableui/panelUI.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 panelUI.inc.css === */
   6
   7 :root {
   8   --panel-ui-menuPanelWidth: 22.35em;
   9   --panel-ui-menuPanelWidth-neg: -22.35em;
  10   --panel-ui-standaloneSubviewWidth: 30em;
  11   /* XXXgijs This is the ugliest bit of code I think I've ever written for Mozilla.
  12    * Basically, the 0.1px is there to avoid CSS rounding errors causing buttons to wrap.
  13    * For gory details, refer to https://bugzilla.mozilla.org/show_bug.cgi?id=963365#c11
  14    * There's no calc() here (and therefore lots of calc() where this is used) because
  15    * we don't support nested calc(): https://bugzilla.mozilla.org/show_bug.cgi?id=968761 */
  16   --panel-ui-menuPanelButtonWidth: calc(var(--panel-ui-menuPanelWidth) / 3 - 0.1px);
  17   --panel-ui-menuPanelButtonWidth-min2: calc(var(--panel-ui-menuPanelWidth) / 3 - 0.1px - 2px);
  18   --panel-ui-menuPanelButtonIconMargin: calc((var(--panel-ui-menuPanelWidth) / 3 - 0.1px) / 2 - 22px);
  19   --panel-ui-menuPanelMultiviewBgPos: calc((var(--panel-ui-menuPanelWidth) / 3 - 0.1px) / 2 - var(--panel-ui-exit-subview-gutter-width) + 2px);
  20
  21
  22   --panel-ui-exit-subview-gutter-width: 38px;
  23 }
  24
  25 #PanelUI-popup #PanelUI-contents:empty {
  26   height: 128px;
  27 }
  28
  29 #PanelUI-popup #PanelUI-contents:empty::before {
  30   content: "";
  31   background-image: url(chrome://browser/skin/customizableui/whimsy.png);
  32   background-size: 64px 64px;
  33   display: block;
  34   width: 64px;
  35   height: 64px;
  36   position: absolute;
  37   transition: transform 1s ease-out;
  38   animation: whimsyMoveX 3.05s linear 0s infinite alternate,
  39              whimsyMoveY 3.4s linear 0s infinite alternate;
  40 }
  41
  42 #PanelUI-popup #PanelUI-contents:not(:hover):empty::before {
  43   filter: grayscale(100%);
  44 }
  45
  46 #PanelUI-popup #PanelUI-contents:active:empty::before {
  47   animation: whimsyMoveX 3.05s linear 0s infinite alternate,
  48              whimsyMoveY 3.4s linear 0s infinite alternate,
  49              whimsyRotate 1s linear 0s infinite normal;
  50 }
  51
  52 #PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):empty::before {
  53   animation: whimsyMoveXRTL 3.05s linear 0s infinite alternate,
  54              whimsyMoveY 3.4s linear 0s infinite alternate;
  55 }
  56
  57 #PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):active:empty::before {
  58   animation: whimsyMoveXRTL 3.05s linear 0s infinite alternate,
  59              whimsyMoveY 3.4s linear 0s infinite alternate,
  60              whimsyRotate 1s linear 0s infinite normal;
  61 }
  62
  63 @media (min-resolution: 2dppx) {
  64   #PanelUI-popup #PanelUI-contents:empty::before {
  65     background-image: url("chrome://browser/skin/customizableui/whimsy@2x.png");
  66   }
  67 }
  68
  69 @keyframes whimsyMoveX {
  70   /* These values are adjusted for the padding on the panel. */
  71   from { margin-left: -15px; } to { margin-left: calc(100% - 49px); }
  72 }
  73
  74 @keyframes whimsyMoveXRTL {
  75   /* These values are adjusted for the padding on the panel. */
  76   from { margin-right: -15px; } to { margin-right: calc(100% - 49px); }
  77 }
  78
  79 @keyframes whimsyMoveY {
  80   /* These values are adjusted for the padding and height of the panel. */
  81   from { margin-top: -.5em; } to { margin-top: calc(64px - .5em); }
  82 }
  83
  84 @keyframes whimsyRotate {
  85   to { transform: perspective(5000px) rotateY(360deg); }
  86 }
  87
  88 #customization-panelHolder {
  89   border-radius: 4px;
  90 }
  91
  92 #PanelUI-button {
  93   margin-inline-start: 3px;
  94 }
  95
  96 #nav-bar[brighttext] > #PanelUI-button {
  97 }
  98
  99 #PanelUI-menu-button[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
 100   display: -moz-box;
 101   height: 10px;
 102   width: 10px;
 103   background-size: contain;
 104   border: none;
 105 }
 106
 107 #PanelUI-menu-button[badge-status="download-success"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
 108   display: none;
 109 }
 110
 111 #PanelUI-menu-button[badge-status="update-succeeded"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
 112   background: #008484 url(chrome://browser/skin/update-badge.svg) no-repeat center;
 113   height: 13px;
 114 }
 115
 116 #PanelUI-menu-button[badge-status="update-failed"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
 117   background: #FF0000 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center;
 118   height: 13px;
 119 }
 120
 121 #PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
 122 #PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
 123   box-shadow: none;
 124 }
 125
 126 #PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
 127 #PanelUI-menu-button[badge-status="download-severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
 128   width: 7px;
 129   height: 7px;
 130   min-width: 0;
 131   border-radius: 50%;
 132   /* "!important" is necessary to override the rule in toolbarbutton.css */
 133   margin-top: -1px !important;
 134   margin-right: -2px !important;
 135 }
 136
 137 #PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
 138   background: #FFBF00;
 139 }
 140
 141 #PanelUI-menu-button[badge-status="download-severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
 142   background: #FF0000;
 143 }
 144
 145 #PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
 146   height: 13px;
 147   background: transparent url(chrome://browser/skin/warning.svg) no-repeat center;
 148 }
 149
 150 #PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive,
 151 #PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive {
 152 }
 153
 154 .panel-subviews {
 155   padding: 4px;
 156   background-clip: padding-box;
 157   border-left: 1px solid var(--panel-arrowcontent-border-color);
 158   margin-inline-start: var(--panel-ui-exit-subview-gutter-width);
 159 }
 160
 161 .panel-viewstack[viewtype="main"] > .panel-subviews {
 162   transform: translateX(var(--panel-ui-menuPanelWidth));
 163 }
 164
 165 .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
 166   transform: translateX(var(--panel-ui-menuPanelWidth-neg));
 167 }
 168
 169 panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
 170   display: none;
 171 }
 172
 173 .panel-viewstack:not([viewtype="main"]) > .panel-mainview > #PanelUI-mainView {
 174   -moz-box-flex: 1;
 175 }
 176
 177 .panel-subview-body {
 178   overflow-y: auto;
 179   overflow-x: hidden;
 180   -moz-box-flex: 1;
 181 }
 182
 183 #PanelUI-popup .panel-subview-body {
 184   margin: -4px;
 185   padding: 4px 4px;
 186 }
 187
 188 .panel-subview-header,
 189 .subviewbutton.panel-subview-footer {
 190   box-sizing: border-box;
 191 /*  min-height: 41px; */
 192   padding: 3px;
 193 }
 194
 195 .panel-subview-header {
 196   margin: 0 0 4px;
 197   background-color: #A09090;
 198   color: #000000;
 199   font-variant: small-caps;
 200   border-radius: 4px;
 201 }
 202
 203 .panel-subview-footer {
 204   border-top: 1px solid #A09090;
 205 }
 206
 207 .cui-widget-panelview .panel-subview-header {
 208   display: none;
 209 }
 210
 211 .cui-widget-panelview .subviewbutton.panel-subview-footer {
 212   margin: 4px 0 0;
 213   -moz-box-pack: center;
 214 }
 215
 216 #PanelUI-mainView {
 217   display: flex;
 218   flex-direction: column;
 219   border-radius: 4px;
 220 }
 221
 222 #PanelUI-popup > arrowscrollbox > autorepeatbutton {
 223   display: none;
 224 }
 225 #PanelUI-popup > arrowscrollbox > scrollbox {
 226   overflow: visible;
 227 }
 228
 229 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent {
 230   overflow: hidden;
 231   padding: 0;
 232 }
 233
 234 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent,
 235 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box {
 236   padding: 0;
 237 }
 238
 239 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
 240 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
 241 /*  line-height: 1.2;*/
 242   max-height: 2.4em;
 243 }
 244
 245 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
 246 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-multiline-text {
 247   -moz-hyphens: auto;
 248 }
 249
 250 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
 251 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-multiline-text {
 252   position: absolute;
 253   clip: rect(-0.1em, auto, 2.6em, auto);
 254 }
 255
 256 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-text,
 257 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
 258   text-align: center;
 259   /* Need to override toolkit theming which sets margin: 0 !important; */
 260   margin: 2px 0 0 !important;
 261 }
 262
 263 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
 264   text-align: center;
 265   margin: -1px 0 0;
 266 }
 267
 268 #wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls,
 269 #wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls {
 270   margin-inline-start: 0;
 271 }
 272
 273 #PanelUI-contents {
 274   max-width: var(--panel-ui-menuPanelWidth);
 275 }
 276
 277 #BMB_bookmarksPopup,
 278 .panel-mainview:not([panelid="PanelUI-popup"]) {
 279   max-width: var(--panel-ui-standaloneSubviewWidth);
 280 }
 281
 282 /* Give WebExtension stand-alone panels extra width for Chrome compatibility */
 283 .cui-widget-panel[viewId^=PanelUI-webext-] .panel-mainview {
 284   max-width: 800px;
 285 }
 286
 287 .cui-widget-panel[viewId^=PanelUI-webext-] > .panel-arrowcontainer > .panel-arrowcontent {
 288   padding: 0;
 289 }
 290
 291 panelview[id^=PanelUI-webext-] {
 292   overflow: hidden;
 293   border-radius: 3.5px;
 294 }
 295
 296 panelview:not([mainview]) .toolbarbutton-text,
 297 .cui-widget-panel toolbarbutton > .toolbarbutton-text {
 298   text-align: start;
 299   display: -moz-box;
 300 }
 301
 302 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent {
 303   padding: 0;
 304 }
 305
 306 .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {
 307   padding-bottom: 0;
 308 }
 309
 310 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):first-child {
 311   border-radius: 4px 4px 0 0;
 312 }
 313
 314 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):last-child {
 315   border-radius: 0 0 4px 4px;
 316 }
 317
 318 #PanelUI-contents {
 319   display: block;
 320   flex: 1 0 auto;
 321   margin-left: auto;
 322   margin-right: auto;
 323   max-width: var(--panel-ui-menuPanelWidth);
 324 }
 325
 326 #PanelUI-contents-scroller {
 327   overflow-y: auto;
 328   overflow-x: hidden;
 329   width: var(--panel-ui-menuPanelWidth);
 330   flex: auto;
 331 }
 332
 333 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon {
 334   min-width: 0;
 335   min-height: 0;
 336   margin: 0;
 337 }
 338
 339 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
 340 .panelUI-grid .toolbarbutton-1,
 341 .panel-customization-placeholder-child {
 342   -moz-appearance: none;
 343   -moz-box-orient: vertical;
 344   width: var(--panel-ui-menuPanelButtonWidth-min2); /* LCARStrek: XXX: found out to be needed to fit the icons */
 345   height: calc(51px + 2.2em);
 346 }
 347
 348 /* In order to have button labels constrained appropriately, items inside the toolbarpaletteitem
 349  * should have a min-width set so they abide by the width set above (which they do outside of
 350  * customize mode because they're in a flexed container) */
 351 toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 {
 352   min-width: 0.01px;
 353 }
 354
 355 /* Help SDK buttons fit in. */
 356 toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-icon,
 357 toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
 358 toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon,
 359 toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
 360   height: 32px;
 361   width: 32px;
 362 }
 363
 364 toolbarpaletteitem:-moz-any([place="palette"], [place="panel"]) > toolbaritem[sdkstylewidget="true"] > .toolbarbutton-1 > .toolbarbutton-icon {
 365   width: 32px;
 366   height: 32px;
 367 }
 368
 369 .customization-palette .toolbarbutton-1 {
 370   -moz-appearance: none;
 371   -moz-box-orient: vertical;
 372 }
 373
 374 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
 375   -moz-appearance: none;
 376   -moz-box-orient: vertical;
 377   width: var(--panel-ui-menuPanelButtonWidth-min2);
 378   height: calc(49px + 2.2em);
 379   border: 0;
 380 }
 381
 382 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text,
 383 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
 384   margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */
 385 }
 386
 387 .panel-customization-placeholder-child {
 388   margin: 6px 0 0;
 389 /*  padding: 2px 6px;*/
 390 }
 391
 392 .panelUI-grid .toolbarbutton-1[type="menu"] {
 393   background-image: url("chrome://global/skin/arrow/arrow-down-sharp.gif");
 394   background-position: right 3px top 16px;
 395   background-repeat: no-repeat;
 396 }
 397
 398 .panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) {
 399   background-position: left 3px top 16px;
 400 }
 401
 402 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
 403   display: none;
 404 }
 405
 406 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
 407   -moz-box-align: center;
 408   width: 16px;
 409   margin-inline-start: -16px;
 410   height: 51px;
 411   margin-bottom: 2.2em;
 412   padding: 0;
 413 }
 414
 415 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active) > .toolbarbutton-menubutton-dropmarker {
 416   border-radius: 0 0 0 2px;
 417 }
 418
 419 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active)> .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
 420   border-radius: 0 0 2px 0;
 421 }
 422
 423 #main-window:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon {
 424 /*  opacity: .5; */
 425 }
 426
 427 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
 428   width: var(--panel-ui-menuPanelButtonWidth);
 429   margin: 0 !important;
 430 }
 431
 432 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
 433   -moz-box-align: center;
 434   -moz-box-pack: center;
 435 }
 436
 437 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
 438   margin: 4px auto;
 439 }
 440
 441 #PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview >  #PanelUI-mainView {
 442 }
 443
 444 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item,
 445 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]),
 446 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-update-status,
 447 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
 448 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-label,
 449 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-icon,
 450 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator,
 451 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize,
 452 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) {
 453   opacity: .5;
 454 }
 455
 456 /*
 457  * XXXgijs: this is a workaround for a layout issue that was caused by these iframes,
 458  * which was affecting subview display. Because of this, we're hiding the iframe *only*
 459  * when displaying a subview. The discerning user might notice this, but it's not nearly
 460  * as bad as the brokenness.
 461  * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375
 462  * is addressed.
 463  */
 464 #PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe {
 465   visibility: hidden;
 466 }
 467
 468 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
 469   text-align: center;
 470 }
 471
 472 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
 473 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
 474 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack,
 475 .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
 476 .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
 477 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack,
 478 .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
 479 .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
 480 .panel-customization-placeholder-child > .toolbarbutton-icon {
 481   width: 32px;
 482   height: 32px;
 483   min-width: 32px;
 484   min-height: 32px;
 485   /* Explanation for the below formula (A / B - C)
 486      A
 487        Each button is @menuPanelButtonWidth@ wide
 488      B
 489        Each button has two margins.
 490      C (44px / 2 = 22px)
 491        The button icon is 32 pixels wide.
 492        The button has 12px of horizontal padding (6 on each side).
 493        The button has 0px of horizontal border (0 on each side).
 494        Total width of button's icon + button padding should therefore be 44px,
 495        which means each horizontal margin should be the half the button's width - (44/2) px.
 496   */
 497   margin: 4px var(--panel-ui-menuPanelButtonIconMargin);
 498 }
 499
 500 /* above we treat the container as the icon for the margins, that is so the
 501 /* badge itself is positioned correctly. Here we make sure that the icon itself
 502 /* has the minimum size we want, but no padding/margin. */
 503 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon,
 504 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon {
 505   width: 32px;
 506   height: 32px;
 507   min-width: 32px;
 508   min-height: 32px;
 509   margin: 0;
 510   padding: 0;
 511 }
 512
 513 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
 514   -moz-box-flex: 1;
 515 }
 516
 517 #personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {
 518   -moz-box-flex: 1;
 519 }
 520
 521 #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
 522   margin-inline-end: 2px;
 523 }
 524
 525 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
 526 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
 527   border-left: none;
 528   border-right: none;
 529   border-radius: 0;
 530 }
 531
 532 #zoom-in-button > .toolbarbutton-text,
 533 #zoom-out-button > .toolbarbutton-text,
 534 #zoom-reset-button > .toolbarbutton-icon {
 535   display: none;
 536 }
 537
 538 #PanelUI-footer {
 539   display: flex;
 540   flex-shrink: 0;
 541   flex-direction: column;
 542 /*  background-color: var(--arrowpanel-dimmed);*/
 543   padding: 0;
 544   margin: 0;
 545   border-bottom-right-radius: 4px;
 546   border-bottom-left-radius: 4px;
 547 }
 548
 549 #main-window[customizing] #PanelUI-footer-fxa > toolbarseparator {
 550   display: none;
 551 }
 552
 553 #PanelUI-footer-fxa:not([fxastatus="signedin"]) > toolbarseparator,
 554 #PanelUI-footer-fxa:not([fxastatus="signedin"]) > #PanelUI-fxa-icon,
 555 #PanelUI-footer-fxa:not([fxaprofileimage]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
 556   display: none;
 557 }
 558
 559 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status::after {
 560   content: url("chrome://browser/skin/warning.svg");
 561   width: 47px;
 562   padding-top: 1px;
 563   display: block;
 564   text-align: center;
 565   position: relative;
 566   top: 25%;
 567 }
 568
 569 #PanelUI-update-status[update-status]::after {
 570   content: "";
 571   width: 14px;
 572   height: 14px;
 573   margin-right: 16.5px;
 574   border-radius: 2px;
 575   background-size: contain;
 576   display: -moz-box;
 577 }
 578
 579 #PanelUI-update-status[update-status="succeeded"]::after {
 580   background-image: url(chrome://browser/skin/update-badge.svg);
 581   background-color: #008484;
 582 }
 583
 584 #PanelUI-update-status[update-status="failed"]::after {
 585   background-image: url(chrome://browser/skin/update-badge-failed.svg);
 586   background-color: #FF0000;
 587 }
 588
 589 #PanelUI-fxa-status {
 590   display: flex;
 591   flex: 1 1 0%;
 592   width: 1px;
 593 }
 594
 595 #PanelUI-footer-inner,
 596 #PanelUI-footer-fxa:not([hidden]) {
 597   display: flex;
 598   border-top: 1px solid var(--panel-separator-color);
 599 }
 600
 601 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner,
 602 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-fxa {
 603   position: relative;
 604 }
 605
 606 #PanelUI-footer-inner > toolbarseparator,
 607 #PanelUI-footer-fxa > toolbarseparator {
 608   border: 0;
 609   border-left: 1px solid var(--panel-separator-color);
 610   margin: 0;
 611 }
 612
 613 #PanelUI-footer-inner:hover > toolbarseparator,
 614 #PanelUI-footer-fxa:hover > toolbarseparator {
 615 /*  margin: 0;*/
 616 }
 617
 618 #PanelUI-update-status,
 619 #PanelUI-help,
 620 #PanelUI-fxa-label,
 621 #PanelUI-fxa-icon,
 622 #PanelUI-customize,
 623 #PanelUI-quit {
 624   margin: 0;
 625   padding: 11px 0;
 626   box-sizing: border-box;
 627   min-height: 40px;
 628   box-shadow: none;
 629   border: none;
 630   border-radius: 0;
 631   transition: background-color;
 632   -moz-box-orient: horizontal;
 633 }
 634
 635 #PanelUI-update-status {
 636   border-top: 1px solid var(--panel-separator-color);
 637 }
 638
 639 #PanelUI-update-status {
 640   border-bottom: 1px solid transparent;
 641   margin-bottom: -1px;
 642 }
 643
 644 #PanelUI-update-status > .toolbarbutton-text {
 645   width: 0; /* Fancy cropping solution for flexbox. */
 646 }
 647
 648 #PanelUI-help[panel-multiview-anchor="true"] {
 649   -moz-image-region: rect(0, 32px, 16px, 16px);
 650 }
 651
 652 #PanelUI-help,
 653 #PanelUI-quit {
 654   min-width: 44px;
 655 }
 656
 657 #PanelUI-update-status > .toolbarbutton-text,
 658 #PanelUI-fxa-label > .toolbarbutton-text,
 659 #PanelUI-customize > .toolbarbutton-text {
 660   margin: 0;
 661   padding: 0 6px;
 662   text-align: start;
 663 }
 664
 665 #PanelUI-help > .toolbarbutton-text,
 666 #PanelUI-quit > .toolbarbutton-text,
 667 #PanelUI-fxa-avatar > .toolbarbutton-text {
 668   display: none;
 669 }
 670
 671 #PanelUI-update-status > .toolbarbutton-icon,
 672 #PanelUI-fxa-label > .toolbarbutton-icon,
 673 #PanelUI-fxa-icon > .toolbarbutton-icon,
 674 #PanelUI-customize > .toolbarbutton-icon,
 675 #PanelUI-help > .toolbarbutton-icon,
 676 #PanelUI-quit > .toolbarbutton-icon {
 677   margin-inline-end: 0;
 678 }
 679
 680 #PanelUI-fxa-icon {
 681   padding-inline-start: 15px;
 682   padding-inline-end: 15px;
 683 }
 684
 685 #PanelUI-fxa-label,
 686 #PanelUI-customize {
 687   flex: 1;
 688   padding-inline-start: 15px;
 689   border-inline-start-style: none;
 690 }
 691
 692 #PanelUI-footer-fxa[fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
 693 #PanelUI-footer-fxa[fxaprofileimage="enabled"]:not([fxastatus="error"]) > #PanelUI-fxa-status > #PanelUI-fxa-label {
 694   padding-inline-start: 0px;
 695 }
 696
 697 #PanelUI-update-status {
 698   width: calc(var(--panel-ui-menuPanelWidth) + 30px);
 699   padding-inline-start: 15px;
 700   border-inline-start-style: none;
 701 }
 702
 703 #PanelUI-update-status {
 704   list-style-image: url(chrome://branding/content/icon16.png);
 705 }
 706
 707 #PanelUI-fxa-label,
 708 #PanelUI-fxa-icon {
 709   list-style-image: url("chrome://browser/skin/syncFx-horizontalbar.png");
 710 }
 711
 712 #PanelUI-remotetabs {
 713   --panel-ui-sync-illustration-height: 157.5px;
 714 }
 715
 716 .PanelUI-remotetabs-instruction-title,
 717 .PanelUI-remotetabs-instruction-label,
 718 #PanelUI-remotetabs-mobile-promo {
 719   /* If you change the margin here, the min-height of the synced tabs panel
 720     (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
 721     need adjusting (see bug 1248506) */
 722   margin: 15px;
 723   text-align: center;
 724   text-shadow: none;
 725   max-width: 15em;
 726   color: #A09090;
 727 }
 728
 729 .PanelUI-remotetabs-instruction-title {
 730   font-size: 1.3em;
 731 }
 732
 733 /* The boxes with "instructions" get extra top and bottom padding for space
 734    around the illustration and buttons */
 735 .PanelUI-remotetabs-instruction-box {
 736   /* If you change the padding here, the min-height of the synced tabs panel
 737     (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
 738     need adjusting (see bug 1248506) */
 739   padding-bottom: 30px;
 740   padding-top: 15px;
 741 }
 742
 743 .PanelUI-remotetabs-prefs-button {
 744 /*
 745   -moz-appearance: none;
 746   background-color: #0096dd;
 747   / !important for the color as an OSX specific rule when a lightweight theme
 748      is used for buttons in the toolbox overrides. See bug 1238531 for details /
 749   color: white !important;
 750   border-radius: 2px;
 751   / If you change the margin or padding below, the min-height of the synced tabs
 752      panel (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync,
 753      etc) may need adjusting (see bug 1248506) /
 754   margin-top: 10px;
 755   margin-bottom: 10px;
 756   padding: 8px;
 757   text-shadow: none;
 758 */
 759   min-width: 200px;
 760 }
 761
 762 .PanelUI-remotetabs-prefs-button:hover,
 763 .PanelUI-remotetabs-prefs-button:hover:active {
 764 /*  background-color: #018acb; */
 765 }
 766
 767 .remotetabs-promo-link {
 768   margin: 0;
 769 }
 770
 771 .PanelUI-remotetabs-notabsforclient-label {
 772   color: #A09090;
 773   /* This margin is to line this label up with the labels in toolbarbuttons. */
 774   margin-left: 28px;
 775 }
 776
 777 .fxaSyncIllustration {
 778   height: var(--panel-ui-sync-illustration-height);
 779   list-style-image: url(chrome://browser/skin/fxa/sync-illustration.svg);
 780 }
 781
 782 .PanelUI-remotetabs-prefs-button > .toolbarbutton-text {
 783   /* !important to override ".cui-widget-panel toolbarbutton > .toolbarbutton-text" above. */
 784   text-align: center !important;
 785   text-shadow: none;
 786 }
 787
 788 #PanelUI-remotetabs[mainview] { /* panel anchored to toolbar button might be too skinny */
 789   min-width: 19em;
 790 }
 791
 792 /* Work around bug 1224412 - these boxes will cause scrollbars to appear when
 793    the panel is anchored to a toolbar button.
 794 */
 795 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync,
 796 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-reauthsync,
 797 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-nodevicespane,
 798 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-tabsdisabledpane {
 799   min-height: calc(var(--panel-ui-sync-illustration-height) +
 800                    20px + /* margin of .PanelUI-remotetabs-prefs-button */
 801                    16px + /* padding of .PanelUI-remotetabs-prefs-button */
 802                    30px + /* margin of .PanelUI-remotetabs-instruction-label */
 803                    30px + 15px + /* padding of .PanelUI-remotetabs-instruction-box */
 804                    11em);
 805 }
 806
 807 #PanelUI-remotetabs-tabslist > label[itemtype="client"] {
 808   color: #A09090;
 809 }
 810
 811 /* Collapse the non-active vboxes in the remotetabs deck to use only the
 812    height the active box needs */
 813 #PanelUI-remotetabs-deck:not([selectedIndex="1"]) > #PanelUI-remotetabs-tabsdisabledpane,
 814 #PanelUI-remotetabs-deck:not([selectedIndex="2"]) > #PanelUI-remotetabs-fetching,
 815 #PanelUI-remotetabs-deck:not([selectedIndex="3"]) > #PanelUI-remotetabs-nodevicespane {
 816   visibility: collapse;
 817 }
 818
 819 #PanelUI-remotetabs-main[devices-status="single"] > #PanelUI-remotetabs-buttons {
 820   display: none;
 821 }
 822
 823 #PanelUI-fxa-icon[syncstatus="active"]:not([disabled]) {
 824   list-style-image: url("chrome://browser/skin/syncFxProgress-horizontalbar.png");
 825 }
 826
 827 #PanelUI-footer-fxa[fxastatus="migrate-signup"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
 828 #PanelUI-footer-fxa[fxastatus="migrate-verify"] > #PanelUI-fxa-status > #PanelUI-fxa-label {
 829   list-style-image: url(chrome://browser/skin/warning.svg);
 830   -moz-image-region: auto;
 831 }
 832
 833 #PanelUI-customize {
 834   list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
 835 }
 836
 837 #customization-panelHolder #PanelUI-customize {
 838   list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
 839 }
 840
 841 #PanelUI-help {
 842   list-style-image: url("chrome://browser/skin/menuPanel-help.png");
 843 }
 844
 845 #PanelUI-quit {
 846   border-inline-end-style: none;
 847   list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
 848 }
 849
 850 #PanelUI-fxa-label,
 851 #PanelUI-fxa-icon,
 852 #PanelUI-customize,
 853 #PanelUI-help,
 854 #PanelUI-quit {
 855   -moz-image-region: rect(0, 16px, 16px, 0);
 856 }
 857
 858 #PanelUI-footer-fxa[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon,
 859 #PanelUI-footer-fxa[fxastatus="error"][fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon {
 860   display: none;
 861 }
 862
 863 #PanelUI-footer-fxa[fxastatus="error"]:not([fxaprofileimage="set"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
 864   display: none;
 865 }
 866
 867 #PanelUI-fxa-status[disabled],
 868 #PanelUI-fxa-icon[disabled] {
 869   pointer-events: none;
 870 }
 871
 872 #PanelUI-fxa-avatar {
 873   width: 32px;
 874   height: 32px;
 875   border-radius: 50%;
 876   background-repeat: no-repeat;
 877   background-position: 0 0;
 878   background-size: contain;
 879   align-self: center;
 880   margin: 0px 7px;
 881   padding: 0px;
 882   border: 0px none;
 883   margin-inline-end: 0;
 884 }
 885
 886 #PanelUI-footer-fxa[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
 887   list-style-image: url(chrome://browser/skin/fxa/default-avatar.svg);
 888 }
 889
 890 #PanelUI-customize:hover,
 891 #PanelUI-help:not([disabled]):hover,
 892 #PanelUI-quit:not([disabled]):hover,
 893 #PanelUI-customize:hover:active,
 894 #PanelUI-help:not([disabled]):hover:active,
 895 #PanelUI-quit:not([disabled]):hover:active,
 896 #PanelUI-help[panel-multiview-anchor="true"] {
 897   -moz-image-region: rect(0, 32px, 16px, 16px);
 898 }
 899
 900 #PanelUI-help[disabled],
 901 #PanelUI-quit[disabled],
 902 #PanelUI-fxa-icon[disabled],
 903 #PanelUI-fxa-avatar[disabled],
 904 #PanelUI-fxa-label[disabled] > .toolbarbutton-icon,
 905 #PanelUI-fxa-status::after {
 906   -moz-image-region: rect(0, 48px, 16px, 32px);
 907 }
 908
 909 #PanelUI-fxa-status:not([disabled]):hover,
 910 #PanelUI-fxa-icon:not([disabled]):hover,
 911 #PanelUI-help:not([disabled]):hover,
 912 #PanelUI-customize:hover,
 913 #PanelUI-quit:not([disabled]):hover {
 914 }
 915
 916 #PanelUI-fxa-status:not([disabled]):hover:active,
 917 #PanelUI-fxa-icon:not([disabled]):hover:active,
 918 #PanelUI-help:not([disabled]):hover:active,
 919 #PanelUI-customize:hover:active,
 920 #PanelUI-quit:not([disabled]):hover:active {
 921 }
 922
 923 #PanelUI-fxa-status:not([disabled]):hover,
 924 #PanelUI-fxa-status:not([disabled]):hover:active,
 925 #PanelUI-fxa-icon:not([disabled]):hover,
 926 #PanelUI-fxa-icon:not([disabled]):hover:active {
 927 }
 928
 929 #PanelUI-footer-fxa[fxastatus="error"] {
 930   background-color: #FF0000;
 931   color: #000000;
 932 }
 933
 934 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover {
 935   background-color: #FFCF00;
 936 }
 937
 938 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover:active {
 939   background-color: #FF9F00;
 940 }
 941
 942 #PanelUI-update-status {
 943 /*  color: black; */
 944 }
 945
 946 #PanelUI-update-status[update-status="succeeded"] {
 947   background-color: #008484;
 948   color: #000000;
 949 }
 950
 951 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover {
 952   background-color: #FFCF00;
 953 }
 954
 955 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover:active {
 956   background-color: #FF9F00;
 957 }
 958
 959 #PanelUI-update-status[update-status="failed"] {
 960   background-color: #FF0000;
 961   color: #000000;
 962 }
 963
 964 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover {
 965   background-color: #FFCF00;
 966 }
 967
 968 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover:active {
 969   background-color: #FF9F00;
 970 }
 971
 972 #PanelUI-quit:not([disabled]):hover {
 973   background-color: #FF0000;
 974 }
 975
 976 #PanelUI-quit:not([disabled]):hover:active {
 977   background-color: #FF9F00;
 978 }
 979
 980 #customization-panelHolder #PanelUI-customize {
 981   color: #FFCF00;
 982   background-color: #008484;
 983   text-shadow: none;
 984   margin-top: -1px;
 985 }
 986
 987 #customization-panelHolder #PanelUI-customize + toolbarseparator {
 988   display: none;
 989 }
 990
 991 #customization-panelHolder #PanelUI-customize:hover,
 992 #customization-panelHolder #PanelUI-customize:hover:active {
 993   background-color: #FFCF00;
 994   color: #000000;
 995 }
 996
 997 #customization-palette .toolbarbutton-multiline-text,
 998 #customization-palette .toolbarbutton-text {
 999   display: none;
1000 }
1001
1002 panelview .toolbarbutton-1,
1003 .subviewbutton,
1004 .widget-overflow-list .toolbarbutton-1,
1005 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1006 .share-provider-button,
1007 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1008 /*  padding: 0 6px;
1009   background-color: transparent;
1010   border-radius: 2px;
1011   border-style: solid;
1012   border-color: transparent;*/
1013 }
1014
1015 panelview .toolbarbutton-1,
1016 .subviewbutton,
1017 .widget-overflow-list .toolbarbutton-1,
1018 .share-provider-button,
1019 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1020   border-width: 0;
1021 }
1022
1023 .subviewbutton.panel-subview-footer {
1024 /*  border-radius: 0; */
1025   margin: 2px 0 0;
1026 }
1027
1028 .subviewbutton.panel-subview-footer > .menu-text {
1029   margin-inline-start: 0px !important;
1030   padding-inline-start: 6px;
1031   padding-inline-end: 6px;
1032   -moz-box-flex: 0;
1033   text-align: center;
1034 }
1035
1036 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
1037   margin: 0;
1038 }
1039
1040 .subviewbutton.panel-subview-footer > .toolbarbutton-text {
1041   text-align: center;
1042   padding: 0;
1043 }
1044
1045 .subviewbutton.panel-subview-footer > .menu-accel-container {
1046   padding-inline-start: 6px;
1047 }
1048
1049 .subviewbutton:not(.panel-subview-footer) {
1050   margin: 0;
1051 }
1052
1053 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
1054 /* Bookmark items need a more specific selector. */
1055 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
1056 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
1057 /*  font: menu;*/
1058 }
1059
1060 .PanelUI-subView .subviewbutton[shortcut]::after {
1061   content: attr(shortcut);
1062   float: right;
1063   color: #A09090;
1064 }
1065
1066 .PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
1067   margin-inline-start: 10px;
1068 }
1069
1070 /* This is a <label> but it should fit in with the menu font- and colorwise. */
1071 #PanelUI-characterEncodingView-autodetect-label {
1072   font: menu;
1073   color: inherit;
1074 }
1075
1076 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
1077 /*  margin-left: 4px;
1078   margin-right: 4px;*/
1079 }
1080
1081 panelview .toolbarbutton-1,
1082 .widget-overflow-list > .toolbarbutton-1:not(:first-child),
1083 .widget-overflow-list > .toolbaritem-combined-buttons:not(:first-child) {
1084   margin-top: 6px;
1085 }
1086
1087 /*
1088 panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
1089 toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover,
1090 menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
1091 menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
1092 .share-provider-button:not(:-moz-any([disabled],[open],:active)):hover,
1093 .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
1094 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
1095     > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
1096   background-color: var(--arrowpanel-dimmed);
1097   border-color: var(--panel-separator-color);
1098 }
1099
1100 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[open],:active)):hover {
1101   border-color: var(--panel-separator-color);
1102 }
1103
1104 panelview .toolbarbutton-1:-moz-any(:not([disabled]):-moz-any([open],:hover:active),[checked=true]),
1105 toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],:hover:active),
1106 menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
1107 menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
1108 .share-provider-button:not([disabled]):-moz-any([open],:hover:active),
1109 .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active),
1110 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
1111     > toolbarbutton:not([disabled]):-moz-any([open],:hover:active) {
1112   background-color: var(--arrowpanel-dimmed-further);
1113   border-color: var(--panel-separator-color);
1114   box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
1115 }
1116
1117 .subviewbutton.panel-subview-footer {
1118   margin: 4px -4px -4px;
1119   background-color: var(--arrowpanel-dimmed);
1120   border-top: 1px solid var(--panel-separator-color);
1121   border-radius: 0;
1122 }
1123
1124 menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
1125 .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
1126   background-color: var(--arrowpanel-dimmed-further);
1127 }
1128
1129 menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active),
1130 .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active) {
1131   background-color: var(--arrowpanel-dimmed-even-further);
1132   box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
1133 }
1134
1135 #BMB_bookmarksPopup .subviewbutton {
1136   font: menu;
1137   font-weight: normal;
1138 }
1139
1140 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
1141   color: inherit;
1142 }
1143
1144 #BMB_bookmarksPopup .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
1145 #BMB_bookmarksPopup .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
1146   -moz-appearance: none;
1147   margin-top: 0;
1148   margin-bottom: 0;
1149 }
1150
1151 / Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
1152 #BMB_bookmarksPopup arrowscrollbox {
1153   padding-bottom: 0px;
1154 }
1155
1156 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
1157   / Hide bottom separator as the styled footer includes a top border serving the same purpose /
1158   display: none;
1159 }
1160
1161 / Popups with only one item don't have a footer /
1162 #BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
1163 / These popups never have a footer /
1164 #BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
1165 #BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1166   / And so they need some bottom padding: /
1167   padding-bottom: 4px;
1168 }
1169
1170 / Disabled (empty) item is always alone and never has an icon, so fix its left padding /
1171 #BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
1172   padding-left: 6px;
1173 }
1174 */
1175
1176 .PanelUI-subView menuseparator,
1177 .PanelUI-subView toolbarseparator,
1178 .cui-widget-panelview menuseparator {
1179   -moz-appearance: none;
1180   min-height: 0;
1181   border-top: 1px solid var(--panel-separator-color);
1182   margin: 2px 0;
1183   padding: 0;
1184 }
1185
1186 .PanelUI-subView menuseparator,
1187 .PanelUI-subView toolbarseparator {
1188 /*  margin-inline-start: -5px;
1189   margin-inline-end: -4px;*/
1190 }
1191
1192 .PanelUI-subView menuseparator.small-separator,
1193 .PanelUI-subView toolbarseparator.small-separator {
1194 /*  margin-left: 5px;
1195   margin-right: 5px;*/
1196 }
1197
1198 .cui-widget-panelview menuseparator.small-separator {
1199 /*  margin-left: 10px;
1200   margin-right: 10px;*/
1201 }
1202
1203 .subviewbutton > .menu-accel-container {
1204   -moz-box-pack: start;
1205   margin-inline-start: 10px;
1206   margin-inline-end: auto;
1207   color: #A09090;
1208 }
1209
1210 #PanelUI-remotetabs-tabslist > toolbarbutton,
1211 #PanelUI-historyItems > toolbarbutton {
1212   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
1213 }
1214
1215 @media (min-resolution: 1.1dppx) {
1216   #PanelUI-remotetabs-tabslist > toolbarbutton,
1217   #PanelUI-historyItems > toolbarbutton {
1218     list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
1219   }
1220 }
1221
1222 #PanelUI-remotetabs-tabslist > toolbarbutton > .toolbarbutton-icon,
1223 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
1224 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
1225 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
1226   width: 16px;
1227   height: 16px;
1228 }
1229
1230 toolbarbutton[panel-multiview-anchor="true"],
1231 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
1232   color: #000000;
1233   background-color: #008484;
1234 }
1235
1236 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
1237   display: none;
1238 }
1239
1240 #PanelUI-help[panel-multiview-anchor="true"] {
1241   background-image: none;
1242 }
1243
1244 #PanelUI-help[panel-multiview-anchor="true"]::after {
1245   content: "";
1246   position: absolute;
1247   top: 0;
1248   height: 100%;
1249   width: var(--panel-ui-exit-subview-gutter-width);
1250   background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1251   background-repeat: no-repeat;
1252   background-color: #008484;
1253   background-position: left 10px center, 0;
1254 }
1255
1256 #PanelUI-help[panel-multiview-anchor="true"]:-moz-locale-dir(rtl)::after {
1257   background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png);
1258   background-position: right 10px center, 0;
1259 }
1260
1261 toolbarbutton[panel-multiview-anchor="true"] {
1262   background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1263   background-position: right var(--panel-ui-menuPanelMultiviewBgPos) center;
1264   background-repeat: no-repeat;
1265 }
1266
1267 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
1268   background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
1269   background-position: left var(--panel-ui-menuPanelMultiviewBgPos) center;
1270 }
1271
1272 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
1273 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
1274   display: none;
1275 }
1276
1277 #search-container[cui-areatype="menu-panel"],
1278 #wrapper-search-container[place="panel"] {
1279   width: var(--panel-ui-menuPanelWidth);
1280 }
1281
1282 #search-container[cui-areatype="menu-panel"] {
1283   margin-top: 6px;
1284   margin-bottom: 6px;
1285 }
1286
1287 toolbarpaletteitem[place="palette"] > #search-container {
1288   min-width: 7em;
1289   width: 7em;
1290 }
1291
1292 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1293   background-color: transparent;
1294   padding: 0;
1295   transition-property: background-color, border-color;
1296   transition-duration: 150ms;
1297 }
1298
1299 /* Make direct siblings overlap borders: */
1300 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1301 /*  border-top-color: transparent !important; */
1302 }
1303
1304 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
1305 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
1306 /*  margin-top: -1px; */
1307 }
1308
1309 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1310   border: 0;
1311   padding: .5em;
1312   margin: 0;
1313   -moz-box-flex: 1;
1314   min-width: var(--panel-ui-menuPanelButtonWidth);
1315   max-width: var(--panel-ui-menuPanelButtonWidth);
1316   /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
1317      1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
1318   height: calc(2.2em + 4px);
1319   max-height: none;
1320   -moz-box-orient: horizontal;
1321 }
1322
1323 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1324 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
1325   /* reduce the width with 2px for this button to compensate for two separators
1326      of 1px. */
1327   min-width: var(--panel-ui-menuPanelButtonWidth-min2);
1328   max-width: var(--panel-ui-menuPanelButtonWidth-min2);
1329 }
1330
1331 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
1332 /*  opacity: .25; */
1333 }
1334
1335 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
1336   min-width: 7ch;
1337 }
1338
1339 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
1340 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
1341 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
1342 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
1343   border-top-right-radius: 0;
1344   border-bottom-right-radius: 0;
1345 }
1346
1347 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
1348 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
1349 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
1350 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
1351   border-top-left-radius: 0;
1352   border-bottom-left-radius: 0;
1353 }
1354
1355 .toolbaritem-combined-buttons > separator {
1356   -moz-appearance: none;
1357   width: 3px;
1358   -moz-box-align: stretch;
1359 }
1360
1361 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
1362   margin: .5em 0;
1363   width: 1px;
1364   height: auto;
1365 /*  background: var(--panel-separator-color);*/
1366   transition-property: margin;
1367   transition-duration: 10ms;
1368   transition-timing-function: ease;
1369 }
1370
1371 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
1372   margin: 0;
1373 }
1374
1375 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
1376   padding: 0;
1377 }
1378
1379 .cui-widget-panelview,
1380 #widget-overflow-scroller {
1381   overflow-y: auto;
1382   overflow-x: hidden;
1383 }
1384
1385 #widget-overflow-scroller {
1386   max-height: 30em;
1387   margin-top: 10px;
1388   margin-bottom: 10px;
1389 }
1390
1391 #widget-overflow-list {
1392   width: var(--panel-ui-menuPanelWidth);
1393   padding-left: 10px;
1394   padding-right: 10px;
1395 }
1396
1397 toolbaritem[overflowedItem=true],
1398 toolbarbutton[overflowedItem=true] {
1399   width: 100%;
1400   max-width: var(--panel-ui-menuPanelWidth);
1401   min-height: 36px;
1402   background-repeat: no-repeat;
1403   background-position: 0 center;
1404 }
1405
1406 .widget-overflow-list .toolbarbutton-1,
1407 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1408   -moz-box-align: center;
1409   -moz-box-orient: horizontal;
1410 }
1411
1412 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
1413 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
1414   text-align: start;
1415   padding-inline-start: .5em;
1416 }
1417
1418 #widget-overflow-list > .toolbaritem-combined-buttons {
1419   min-height: 28px;
1420 }
1421
1422 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1423   content: "";
1424   display: -moz-box;
1425   width: 1px;
1426   height: 18px;
1427   margin-inline-end: -1px;
1428 }
1429
1430 .subviewbutton[checked="true"] {
1431   background-image: url("chrome://global/skin/menu/menu-check.gif");
1432   background-position: top 5px left 4px;
1433   background-repeat: no-repeat;
1434 }
1435
1436 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1437   background-position: top 5px right 4px;
1438 }
1439
1440 .subviewbutton[checked="true"]:hover {
1441   background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1442 }
1443
1444 .subviewbutton > .menu-iconic-left {
1445   margin-inline-end: 3px;
1446 }
1447
1448 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1449   visibility: hidden;
1450 }
1451
1452 .panel-mainview[panelid=customizationui-widget-panel],
1453 #customizationui-widget-multiview > .panel-viewcontainer,
1454 #customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack,
1455 #PanelUI-panicView > .panel-subview-body,
1456 #PanelUI-panicView {
1457   overflow: visible;
1458   color: #FF9F00;
1459 }
1460
1461 #PanelUI-panicView.cui-widget-panelview {
1462   min-width: 280px;
1463 }
1464
1465 #PanelUI-panic-timeframe {
1466   padding: 15px;
1467   border-bottom: 1px solid var(--panel-separator-color);
1468 }
1469
1470 #panic-button-success-icon,
1471 #PanelUI-panic-timeframe-icon,
1472 #PanelUI-panic-timeframe-icon-small {
1473   background-color: transparent;
1474   margin-inline-end: 10px;
1475 }
1476
1477 #panic-button-success-icon,
1478 #PanelUI-panic-timeframe-icon {
1479   list-style-image: url(chrome://browser/skin/panic-panel/header.png);
1480   max-height: 48px;
1481   width: 48px;
1482 }
1483
1484 #PanelUI-panic-timeframe-icon-small {
1485   list-style-image: url(chrome://browser/skin/panic-panel/header-small.png);
1486   max-height: 32px;
1487   width: 32px;
1488 }
1489
1490 /* current attribute is only set when in use as a subview instead of a main view */
1491 #PanelUI-panicView[current] #PanelUI-panic-timeframe-icon {
1492   display: none;
1493 }
1494
1495 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-timeframe-icon-small {
1496   display: none;
1497 }
1498
1499 #panic-button-success-header,
1500 #PanelUI-panic-header {
1501   -moz-box-align: center;
1502   margin-bottom: 5px;
1503 }
1504
1505 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-header {
1506   margin-bottom: 0;
1507 }
1508
1509 #PanelUI-panic-timeframe-icon-small:-moz-locale-dir(rtl),
1510 #PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
1511   transform: scaleX(-1);
1512 }
1513
1514 /*
1515 .subviewradio {
1516 }
1517
1518 .subviewradio@buttonStateHover@ {
1519 }
1520
1521 .subviewradio[selected],
1522 .subviewradio[selected]:hover,
1523 .subviewradio@buttonStateActive@ {
1524 }
1525
1526 .subviewradio > .radio-check {
1527 }
1528
1529 .subviewradio > .radio-check[selected] {
1530 }
1531 */
1532
1533 #PanelUI-panic-explanations {
1534   padding: 10px 10px 0;
1535 }
1536
1537 #PanelUI-panic-actionlist-main-label {
1538   color: #A09090;
1539   font-size: 0.9em;
1540 }
1541
1542 .PanelUI-panic-actionlist {
1543   padding-inline-start: 20px;
1544   padding-top: 2px;
1545   padding-bottom: 2px;
1546   background-size: 16px 16px;
1547   background-repeat: no-repeat;
1548   background-color: transparent;
1549   background-position: center left;
1550 }
1551
1552 .PanelUI-panic-actionlist:-moz-locale-dir(rtl) {
1553   background-position: center right;
1554 }
1555
1556 #PanelUI-panic-actionlist-cookies {
1557   background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0);
1558 }
1559
1560 #PanelUI-panic-actionlist-history {
1561   background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16);
1562 }
1563
1564 #PanelUI-panic-actionlist-windows {
1565   background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32);
1566 }
1567
1568 #PanelUI-panic-actionlist-newwindow {
1569   background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48);
1570 }
1571
1572 #PanelUI-panic-warning {
1573   color: #FF0000;
1574   text-align: center;
1575   width: 100%;
1576   margin-top: 20px;
1577 }
1578
1579 #PanelUI-panic-view-button {
1580   background-color: #FF0000;
1581   color: #000000;
1582 }
1583
1584 #PanelUI-panic-view-button:hover {
1585   background-color: #FFCF00;
1586 }
1587
1588 #PanelUI-panic-view-button:hover:active {
1589   background-color: #FF9F00;
1590 }
1591
1592 #PanelUI-panic-view-button > .toolbarbutton-text {
1593   text-align: center;
1594   text-shadow: none;
1595 }
1596
1597 #panic-button-success-closebutton {
1598 }
1599
1600 #panic-button-success-closebutton:hover {
1601 }
1602
1603 #panic-button-success-closebutton:hover:active {
1604 }
1605
1606 /* === END panelUI.inc.css === */
1607
1608 .panel-subviews {
1609   background-color: #000000;
1610 }
1611
1612 #PanelUI-contents #zoom-out-btn {
1613   padding-left: 12px;
1614   padding-right: 12px;
1615 }
1616
1617 #PanelUI-contents #zoom-in-btn {
1618   padding-left: 12px;
1619   padding-right: 12px;
1620 }
1621
1622 /* bookmark panel submenus */
1623
1624 #BMB_bookmarksPopup menupopup[placespopup=true] {
1625 /*  background: transparent;
1626   border: none;
1627   padding: 6px;*/
1628 }
1629
1630 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1631   /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1632 /*  box-shadow: 0 0 4px rgba(0,0,0,0.2);
1633   background: var(--panel-arrowcontent-background);
1634   border: 1px solid var(--panel-arrowcontent-border-color);
1635   border-radius: 3.5px;
1636   margin-top: -4px;*/
1637 }
1638
1639 #BMB_bookmarksPopup menupopup {
1640 /*  padding-top: 2px;*/
1641 }
1642
1643 /* Add some space at the top because there are no headers: */
1644 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox  {
1645 /*  padding-top: 4px;*/
1646 }
1647
1648 /* bookmark panel separator */
1649 #BMB_bookmarksPopup menuseparator {
1650   padding-top: 0;
1651   padding-bottom: 0;
1652 }
1653
1654 .subviewbutton > .menu-right,
1655 .subviewbutton > .menu-iconic-left {
1656 /*  padding-top: 1px;
1657   margin-top: 1px;
1658   margin-bottom: 2px;*/
1659 }
1660
1661 .subviewbutton:-moz-any([image], .bookmark-item) > .toolbarbutton-icon {
1662   /* This catches bookmarks, history items, and sync tabs items */
1663   width: 16px;
1664   height: 16px;
1665 }
1666
1667 /* Disabled empty item looks too small otherwise, because it has no icon. */
1668 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1669 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1670 menuitem[type="checkbox"].subviewbutton {
1671   /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1672    * 2px for its border, see above */
1673 /*  min-height: 22px;*/
1674 }
1675
1676 .subviewbutton > .toolbarbutton-text {
1677 /*  padding-top: 3px;
1678   padding-bottom: 3px;*/
1679 }
1680
1681 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1682   -moz-appearance: none;
1683   border: 0;
1684   margin-inline-start: 3px;
1685 }
1686
1687 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1688   padding: 0 2px;
1689   padding-inline-start: 0;
1690   height: 18px;
1691 }
1692
1693 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1694   padding: 0 6px;
1695 }
1696
1697 .subviewbutton > .toolbarbutton-text {
1698   padding-inline-start: 18px; /* 16px for icons plus the 2px spacing from the rule below */
1699 }
1700
1701 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1702   padding-inline-start: 2px;
1703 }
1704
1705 /* subviewbutton entries for social sidebars have images that come from external
1706 /* sources, and are not guaranteed to be the size we want, so force the size on
1707 /* those icons. */
1708 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1709   width: 16px;
1710   height: 16px;
1711 }
1712
1713 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1714   visibility: hidden;
1715 }
1716
1717 menu.subviewbutton > .menu-right {
1718   list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow");
1719   /* Reset the rect we inherit from the button: */
1720   -moz-image-region: auto;
1721 }
1722
1723 menu.subviewbutton:not([disabled="true"]):hover > .menu-right,
1724 menu.subviewbutton:not([disabled="true"])[_moz-menuactive="true"] > .menu-right {
1725   list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-hover");
1726 }
1727
1728 menu[disabled="true"].subviewbutton > .menu-right {
1729   list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-disabled");
1730 }
1731
1732 menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
1733   transform: scaleX(-1);
1734 }