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/. */
5 @import url("chrome://global/skin/");
6 @import url("downloads/indicator.css");
8 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
9 @namespace html url("http://www.w3.org/1999/xhtml");
10 @namespace svg url("http://www.w3.org/2000/svg");
13 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar");
16 toolbar[customizable="true"] {
17 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-browsercustom");
20 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme), (-moz-mac-yosemite-theme) {
21 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
22 toolbar[customizable="true"]:not([nowindowdrag="true"]) {
23 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-drag-browsercustom");
27 toolbar[type="menubar"][autohide="true"] {
28 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide");
31 #toolbar-menubar[autohide="true"] {
32 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide-browsercustom");
36 -moz-binding: url("chrome://global/skin/globalBindings.xml#menubar");
40 /*--backbutton-urlbar-overlap: 5px;*/
42 /* icon width + border + horizontal padding (includes the overlap from backbutton-urlbar-overlap) */
43 --forwardbutton-width: 27px;
44 /* icon width + border + horizontal padding (without the overlap from backbutton-urlbar-overlap) /
45 --forwardbutton-width: 25px;*/
47 --identity-box-verified-background-color: #000000;
49 --panel-separator-color: #A09090;
50 --arrowpanel-hover: #FFCF00;
51 --arrowpanel-active: #FF9F00;
52 --arrowpanel-dimmed: #402000;
53 --arrowpanel-dimmed-further: #794900;
54 --arrowpanel-dimmed-even-further: 603000;
56 --urlbar-separator-color: #9C9CFF;
60 -moz-box-orient: vertical; /* for flex hack */
64 -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
67 /* ::::: primary toolbar ::::: */
69 .toolbar-primary > .toolbar-box > .toolbar-holder {
70 background-color: #A09090;
73 .toolbar-primary > .toolbar-box > .toolbar-startcap,
74 .toolbar-primary > .toolbar-box > .toolbar-endcap {
75 background-color: #9C9CFF;
78 /* Hides the titlebar-placeholder underneath the window caption buttons when we
79 are not autohiding the menubar. */
80 #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-placeholder[type="caption-buttons"] {
84 /* We want a 4px gap between the TabsToolbar and the toolbar-menubar when the
85 toolbar-menu is displayed, and a 16px gap when it is not. 1px is taken care
86 of by the (light) outer shadow of the tab, the remaining 3/15 are these margins. */
87 #toolbar-menubar:not([autohide=true]) ~ #TabsToolbar:not([inFullscreen]),
88 #toolbar-menubar[autohide=true]:not([inactive]) ~ #TabsToolbar:not([inFullscreen]) {
92 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen])[chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
93 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
94 /* margin-top: var(--space-above-tabbar);*/
97 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
98 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
99 #main-window[tabsintitlebar]:not([inFullscreen="true"]) #TabsToolbar {
104 #main-window[tabsintitlebar] #toolbar-menubar .toolbar-endcap {
105 /* the titlebar buttons are shown right over the endcap but we have no power over the buttonbox position just for this case, so hide the endcap */
109 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar[customizing-dragovertarget].customization-target::before,
110 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar[customizing-dragovertarget].customization-target::before,
111 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar.customization-target:hover::before,
112 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar.customization-target:hover::before {
113 outline-color: #A09090;
119 #navigator-toolbox::after {
122 -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
123 /*border-bottom: 1px solid ThreeDShadow;*/
126 #navigator-toolbox > toolbar {
129 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme) {
132 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar) {
133 overflow: -moz-hidden-unscrollable;
135 transition: min-height 170ms ease-out, max-height 170ms ease-out;
138 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar)[collapsed=true] {
141 transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
144 @media (-moz-mac-graphite-theme: 0) and (-moz-mac-lion-theme: 0) {
145 /* This is a hackish workaround to exclude most of Mac OS until bug 1060941 gets fixed. */
146 /* Indent also due to non-applicable aero rule in original Windows theme. */
147 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme),
148 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
150 background-color: #6000CF;
154 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive,
155 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
156 background-color: #8050B0;
160 #main-window[tabsintitlebar] #main-menubar > menu:not(:-moz-lwtheme) {
164 #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
168 #main-window[tabsintitlebar] #titlebar-content:-moz-lwtheme {
169 -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
174 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
175 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
176 #titlebar-buttonbox > .titlebar-button {
182 /* Position the toolbar above the bottom of background tabs */
187 #personal-bookmarks {
188 /* min-height: 24px; */
191 #PersonalToolbar > #home-button {
192 -moz-box-orient: horizontal;
195 #PersonalToolbar > #home-button > .toolbarbutton-text {
199 #print-preview-toolbar:not(:-moz-lwtheme) {
200 /* -moz-appearance: toolbox; */
203 #browser-bottombox:not(:-moz-lwtheme) {
206 /* ::::: titlebar ::::: */
210 background-color: #6000CF;
213 #titlebar:-moz-window-inactive {
214 background-color: #8050B0;
218 #main-window[sizemode="normal"] > #titlebar {
223 #main-window[sizemode="maximized"] > #titlebar {
227 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
228 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
229 #main-window[sizemode="normal"] > #titlebar,
230 #main-window[sizemode="maximized"] > #titlebar {
232 /* There is a margin-bottom set to -23 by code. */
236 /* The button box must appear on top of the navigator-toolbox in order for
237 * click and hover mouse events to work properly for the button in the restored
238 * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
239 * can swallow those events. It will also place the buttons above the fog on
240 * themes with Aero Glass.
243 #main-window[sizemode="maximized"] #titlebar-buttonbox {
244 -moz-appearance: none;
247 margin-inline-end: 3px;
251 .titlebar-placeholder[type="appmenu-button"] {
255 .titlebar-placeholder[type="caption-buttons"] {
259 /* titlebar command buttons */
261 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize");
264 #titlebar-min:hover {
265 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize-hover");
269 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize");
272 #titlebar-max:hover {
273 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize-hover");
276 #main-window[sizemode="maximized"] #titlebar-max {
277 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore");
280 #main-window[sizemode="maximized"] #titlebar-max:hover {
281 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore-hover");
285 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close");
288 #titlebar-close:hover {
289 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-hover");
292 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
293 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
294 #titlebar-fullscreen-button {
295 -moz-appearance: none;
296 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon.png");
297 -moz-image-region: rect(0px, 16px, 16px, 0px);
300 #titlebar-fullscreen-button:hover {
301 -moz-image-region: rect(0px, 32px, 16px, 16px);
304 @media (min-resolution: 2dppx) {
305 #titlebar-fullscreen-button {
306 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon@2x.png");
307 -moz-image-region: rect(0px, 32px, 32px, 0px);
310 #titlebar-fullscreen-button:hover {
311 -moz-image-region: rect(0px, 64px, 32px, 32px);
317 /* ::::: bookmark buttons ::::: */
319 toolbarbutton.bookmark-item:not(.subviewbutton),
320 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
323 -moz-appearance: none;
324 border: 1px solid transparent;*/
327 toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([disabled="true"]):not([open]) {
328 /* border-color: var(--toolbarbutton-hover-bordercolor);
329 background: var(--toolbarbutton-hover-background);*/
332 toolbarbutton.bookmark-item:not(.subviewbutton):hover:active:not([disabled="true"]),toolbarbutton.bookmark-item[open="true"] {
333 /* border-color: var(--toolbarbutton-active-bordercolor);
334 box-shadow: var(--toolbarbutton-active-boxshadow);
335 background: var(--toolbarbutton-active-background);*/
338 .bookmark-item > .toolbarbutton-icon,
339 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
342 margin-inline-start: 1px;
343 margin-inline-end: 2px;
348 /* Force the display of the label for bookmarks */
349 .bookmark-item > .toolbarbutton-text,
350 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
351 display: -moz-box !important;
354 .bookmark-item > .toolbarbutton-menu-dropmarker {
358 #bookmarks-toolbar-placeholder {
359 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") !important;
360 -moz-box-orient: horizontal;
363 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
364 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
365 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
368 /* ----- BOOKMARK STAR ANIMATION ----- */
370 @keyframes animation-bookmarkAdded {
371 from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
372 60% { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
374 to { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
377 @keyframes animation-bookmarkPulse {
378 from { transform: scale(1); }
379 50% { transform: scale(1.3); }
380 to { transform: scale(1); }
383 #bookmarked-notification-container {
392 #bookmarked-notification {
393 background-size: 16px;
394 background-position: center;
395 background-repeat: no-repeat;
401 #bookmarked-notification-dropmarker-anchor {
406 #bookmarked-notification-dropmarker-icon {
412 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
413 background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
414 animation: animation-bookmarkAdded 800ms;
415 animation-timing-function: ease, ease, ease;
418 #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
419 list-style-image: none !important;
422 #bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
424 animation: animation-bookmarkPulse 300ms;
425 animation-delay: 600ms;
426 animation-timing-function: ease-out;
429 /* ::::: bookmark menus ::::: */
432 menuitem.bookmark-item {
437 .bookmark-item:not(.subviewbutton) > .menu-iconic-left {
442 .bookmark-item > .menu-iconic-left > .menu-iconic-icon {
443 padding-inline-start: 0px;
446 /* ::::: bookmark items ::::: */
449 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
450 -moz-image-region: auto;
453 .bookmark-item[container] {
454 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
455 -moz-image-region: auto;
458 .bookmark-item[container][open] {
459 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
460 -moz-image-region: auto;
463 .bookmark-item[container][livemark] {
464 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-folder.png");
465 -moz-image-region: auto;
468 .bookmark-item[container][livemark] .bookmark-item {
469 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-item.png");
470 -moz-image-region: rect(0px, 16px, 16px, 0px);
473 .bookmark-item[container][livemark] .bookmark-item[visited] {
474 -moz-image-region: rect(0px, 32px, 16px, 16px);
477 .bookmark-item[container][query] {
478 list-style-image: url("chrome://communicator/skin/bookmarks/query.png");
479 -moz-image-region: auto;
482 .bookmark-item[query][tagContainer] {
483 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
484 -moz-image-region: auto;
487 .bookmark-item[query][dayContainer] {
488 list-style-image: url("chrome://communicator/skin/history/calendar.png");
489 -moz-image-region: auto;
492 .bookmark-item[query][hostContainer] {
493 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
494 -moz-image-region: auto;
497 .bookmark-item[query][hostContainer][open] {
498 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
499 -moz-image-region: auto;
502 .bookmark-item[cutting] > .toolbarbutton-icon,
503 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
507 .bookmark-item[cutting] > .toolbarbutton-text,
508 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
512 /* ::::: primary toolbar buttons ::::: */
514 /* === BEGIN toolbarbuttons.inc.css === */
516 /* Whole section of this included file: */
517 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
518 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
519 #social-share-button, #open-file-button, #find-button, #developer-button,
520 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
521 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
522 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
523 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu),
524 #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
525 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
529 -moz-image-region: rect(0, 36px, 18px, 18px);
532 #back-button:hover:not([disabled="true"]) {
533 -moz-image-region: rect(18px, 36px, 36px, 18px);
536 #back-button[disabled="true"] {
537 -moz-image-region: rect(36px, 36px, 54px, 18px);
541 -moz-image-region: rect(0, 72px, 18px, 54px);
544 #forward-button:hover:not([disabled="true"]) {
545 -moz-image-region: rect(18px, 72px, 36px, 54px);
548 #forward-button[disabled="true"] {
549 -moz-image-region: rect(36px, 72px, 54px, 54px);
552 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
553 #forward-button:-moz-locale-dir(rtl) {
554 transform: scaleX(-1);
557 #home-button[cui-areatype="toolbar"] {
558 -moz-image-region: rect(0, 126px, 18px, 108px);
561 #home-button[cui-areatype="toolbar"]:hover {
562 -moz-image-region: rect(18px, 126px, 36px, 108px);
565 #bookmarks-menu-button[cui-areatype="toolbar"] {
566 -moz-image-region: rect(0, 144px, 18px, 126px);
569 #bookmarks-menu-button[cui-areatype="toolbar"]:hover,
570 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
571 -moz-image-region: rect(18px, 144px, 36px, 126px);
574 /* When "new tab" page shows up, the menubutton-button (star button) is disabled */
575 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
576 -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
577 background-color: transparent !important;
580 #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
581 -moz-image-region: rect(0, 162px, 18px, 144px);
584 #bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
585 #bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"],
586 #bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button[open="true"] {
587 /* When starred and clicked (for edit/delete dialog),
588 * then only the menubutton-button itself is open, but not the whole menubutton. */
589 -moz-image-region: rect(18px, 162px, 36px, 144px);
592 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
593 -moz-image-region: rect(0, 630px, 18px, 612px);
596 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
598 -moz-box-align: center;
601 #bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
602 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
603 -moz-image-region: rect(18px, 630px, 36px, 612px);
606 #bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
607 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
610 padding-inline-start: 2px;
611 padding-inline-end: 0px;
614 #history-panelmenu[cui-areatype="toolbar"] {
615 -moz-image-region: rect(0, 180px, 18px, 162px);
618 #history-panelmenu[cui-areatype="toolbar"]:hover,
619 #history-panelmenu[cui-areatype="toolbar"][open="true"] {
620 -moz-image-region: rect(18px, 180px, 36px, 162px);
623 #downloads-button[cui-areatype="toolbar"] {
624 -moz-image-region: rect(0, 198px, 18px, 180px);
627 #downloads-button[cui-areatype="toolbar"]:hover,
628 #downloads-button[cui-areatype="toolbar"][open="true"] {
629 -moz-image-region: rect(18px, 198px, 36px, 180px);
632 #add-ons-button[cui-areatype="toolbar"] {
633 -moz-image-region: rect(0, 216px, 18px, 198px);
636 #add-ons-button[cui-areatype="toolbar"]:hover {
637 -moz-image-region: rect(18px, 216px, 36px, 198px);
640 #open-file-button[cui-areatype="toolbar"] {
641 -moz-image-region: rect(0, 234px, 18px, 216px);
644 #open-file-button[cui-areatype="toolbar"]:hover {
645 -moz-image-region: rect(18px, 234px, 36px, 216px);
648 #save-page-button[cui-areatype="toolbar"] {
649 -moz-image-region: rect(0, 252px, 18px, 234px);
652 #save-page-button[cui-areatype="toolbar"]:hover {
653 -moz-image-region: rect(18px, 252px, 36px, 234px);
656 #sync-button[cui-areatype="toolbar"] {
657 -moz-image-region: rect(0, 792px, 18px, 774px);
660 #sync-button[cui-areatype="toolbar"]:hover {
661 -moz-image-region: rect(18px, 792px, 36px, 774px);
664 #containers-panelmenu[cui-areatype="toolbar"] {
665 -moz-image-region: rect(0, 810px, 18px, 792px);
668 #containers-panelmenu[cui-areatype="toolbar"]:hover {
669 -moz-image-region: rect(18px, 810px, 36px, 792px);
672 #feed-button[cui-areatype="toolbar"] {
673 -moz-image-region: rect(0, 288px, 18px, 270px);
676 #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true],
677 #feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
678 -moz-image-region: rect(18px, 288px, 36px, 270px);
681 #feed-button[cui-areatype="toolbar"][disabled="true"] {
682 -moz-image-region: rect(36px, 288px, 54px, 270px);
685 #social-share-button[cui-areatype="toolbar"] {
686 -moz-image-region: rect(0px, 306px, 18px, 288px);
689 #social-share-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
690 #social-share-button[cui-areatype="toolbar"][open="true"] {
691 -moz-image-region: rect(18px, 306px, 36px, 288px);
694 #social-share-button[cui-areatype="toolbar"][disabled="true"] {
695 -moz-image-region: rect(36px, 306px, 54px, 288px);
698 #characterencoding-button[cui-areatype="toolbar"] {
699 -moz-image-region: rect(0, 324px, 18px, 306px);
702 #characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
703 #characterencoding-button[cui-areatype="toolbar"][open="true"] {
704 -moz-image-region: rect(18px, 324px, 36px, 306px);
707 #characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
708 -moz-image-region: rect(36px, 324px, 54px, 306px);
711 #new-window-button[cui-areatype="toolbar"] {
712 -moz-image-region: rect(0, 342px, 18px, 324px);
715 #new-window-button[cui-areatype="toolbar"]:hover {
716 -moz-image-region: rect(18px, 342px, 36px, 324px);
719 #e10s-button[cui-areatype="toolbar"] {
720 -moz-image-region: rect(0, 342px, 18px, 324px);
723 #e10s-button[cui-areatype="toolbar"]:hover {
724 -moz-image-region: rect(18px, 342px, 36px, 324px);
727 #e10s-button > .toolbarbutton-icon {
728 transform: scaleY(-1);
731 #new-tab-button[cui-areatype="toolbar"] {
732 -moz-image-region: rect(0, 360px, 18px, 342px);
735 #new-tab-button[cui-areatype="toolbar"]:hover {
736 -moz-image-region: rect(18px, 360px, 36px, 342px);
739 #privatebrowsing-button[cui-areatype="toolbar"] {
740 -moz-image-region: rect(0, 378px, 18px, 360px);
743 #privatebrowsing-button[cui-areatype="toolbar"]:hover {
744 -moz-image-region: rect(18px, 378px, 36px, 360px);
747 #find-button[cui-areatype="toolbar"] {
748 -moz-image-region: rect(0, 396px, 18px, 378px);
751 #find-button[cui-areatype="toolbar"]:hover {
752 -moz-image-region: rect(18px, 396px, 36px, 378px);
755 #print-button[cui-areatype="toolbar"] {
756 -moz-image-region: rect(0, 414px, 18px, 396px);
759 #print-button[cui-areatype="toolbar"]:hover {
760 -moz-image-region: rect(18px, 414px, 36px, 396px);
763 #fullscreen-button[cui-areatype="toolbar"] {
764 -moz-image-region: rect(0, 432px, 18px, 414px);
767 #fullscreen-button[cui-areatype="toolbar"]:hover {
768 -moz-image-region: rect(18px, 432px, 36px, 414px);
771 #developer-button[cui-areatype="toolbar"] {
772 -moz-image-region: rect(0, 450px, 18px, 432px);
775 #developer-button[cui-areatype="toolbar"]:hover,
776 #developer-button[cui-areatype="toolbar"][open="true"] {
777 -moz-image-region: rect(18px, 450px, 36px, 432px);
780 #preferences-button[cui-areatype="toolbar"] {
781 -moz-image-region: rect(0, 468px, 18px, 450px);
784 #preferences-button[cui-areatype="toolbar"]:hover {
785 -moz-image-region: rect(18px, 468px, 36px, 450px);
788 #PanelUI-menu-button {
789 -moz-image-region: rect(0, 486px, 18px, 468px);
792 #PanelUI-menu-button:hover,
793 #PanelUI-menu-button[open="true"] {
794 -moz-image-region: rect(18px, 486px, 36px, 468px);
797 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button {
798 -moz-image-region: rect(0, 504px, 18px, 486px);
801 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button:hover:not([disabled="true"]) {
802 -moz-image-region: rect(18px, 504px, 36px, 486px);
805 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button[disabled="true"] {
806 -moz-image-region: rect(36px, 504px, 54px, 486px);
809 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button {
810 -moz-image-region: rect(0, 522px, 18px, 504px);
813 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button:hover:not([disabled="true"]) {
814 -moz-image-region: rect(18px, 522px, 36px, 504px);
817 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button[disabled="true"] {
818 -moz-image-region: rect(36px, 522px, 54px, 504px);
821 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button {
822 -moz-image-region: rect(0, 540px, 18px, 522px);
825 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button:hover:not([disabled="true"]) {
826 -moz-image-region: rect(18px, 540px, 36px, 522px);
829 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button[disabled="true"] {
830 -moz-image-region: rect(36px, 540px, 54px, 522px);
833 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button {
834 -moz-image-region: rect(0, 558px, 18px, 540px);
837 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button:hover:not([disabled="true"]) {
838 -moz-image-region: rect(18px, 558px, 36px, 540px);
841 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button[disabled="true"] {
842 -moz-image-region: rect(36px, 558px, 54px, 540px);
845 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button {
846 -moz-image-region: rect(0, 576px, 18px, 558px);
849 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button:hover:not([disabled="true"]) {
850 -moz-image-region: rect(18px, 576px, 36px, 558px);
853 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button[disabled="true"] {
854 -moz-image-region: rect(36px, 576px, 54px, 558px);
857 #nav-bar-overflow-button {
858 -moz-image-region: rect(0, 612px, 18px, 594px);
861 #nav-bar-overflow-button:hover,
862 #nav-bar-overflow-button[open="true"] {
863 -moz-image-region: rect(18px, 612px, 36px, 594px);
866 #nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
867 transform: scaleX(-1);
871 -moz-image-region: rect(0, 648px, 18px, 630px);
874 #tabview-button:hover {
875 -moz-image-region: rect(18px, 648px, 36px, 630px);
878 #email-link-button[cui-areatype="toolbar"] {
879 -moz-image-region: rect(0, 666px, 18px, 648px);
882 #email-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
883 -moz-image-region: rect(18px, 666px, 36px, 648px);
886 #email-button[cui-areatype="toolbar"][disabled="true"] {
887 -moz-image-region: rect(36px, 666px, 54px, 648px);
890 #sidebar-button[cui-areatype="toolbar"] {
891 -moz-image-region: rect(0, 684px, 18px, 666px);
894 #sidebar-button[cui-areatype="toolbar"]:hover {
895 -moz-image-region: rect(18px, 684px, 36px, 666px);
898 #panic-button[cui-areatype="toolbar"] {
899 -moz-image-region: rect(0, 702px, 18px, 684px);
902 #panic-button[cui-areatype="toolbar"]:hover,
903 #panic-button[cui-areatype="toolbar"][open] {
904 -moz-image-region: rect(18px, 702px, 36px, 684px);
907 #panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
908 transform: scaleX(-1);
911 #webide-button[cui-areatype="toolbar"] {
912 -moz-image-region: rect(0, 738px, 18px, 720px);
915 #webide-button[cui-areatype="toolbar"]:hover {
916 -moz-image-region: rect(18px, 738px, 36px, 720px);
919 /* === END toolbarbuttons.inc.css === */
921 /* === BEGIN menupanel.inc.css === */
923 /* Menu panel and palette styles */
925 toolbaritem[sdkstylewidget="true"] > toolbarbutton,
926 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
927 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
928 #social-share-button, #open-file-button, #find-button, #developer-button,
929 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
930 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
931 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
932 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"],
933 toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
934 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
935 #social-share-button, #open-file-button, #find-button, #developer-button,
936 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
937 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
938 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
939 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) {
940 list-style-image: url(chrome://browser/skin/menuPanel.svg);
943 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
944 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
945 #social-share-button, #open-file-button, #find-button, #developer-button,
946 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
947 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
948 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
949 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"] > .toolbarbutton-icon,
950 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
951 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
952 #social-share-button, #open-file-button, #find-button, #developer-button,
953 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
954 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
955 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
956 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-icon,
957 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
958 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
959 #social-share-button, #open-file-button, #find-button, #developer-button,
960 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
961 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
962 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
963 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
964 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
965 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
966 #social-share-button, #open-file-button, #find-button, #developer-button,
967 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
968 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
969 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
970 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
971 filter: url(chrome://browser/skin/filters.svg#fill);
975 #home-button[cui-areatype="menu-panel"],
976 toolbarpaletteitem[place="palette"] > #home-button {
977 -moz-image-region: rect(0px, 128px, 32px, 96px);
980 #bookmarks-menu-button[cui-areatype="menu-panel"],
981 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
982 -moz-image-region: rect(0px, 192px, 32px, 160px);
985 #history-panelmenu[cui-areatype="menu-panel"],
986 toolbarpaletteitem[place="palette"] > #history-panelmenu {
987 -moz-image-region: rect(0px, 224px, 32px, 192px);
990 #downloads-button[cui-areatype="menu-panel"],
991 toolbarpaletteitem[place="palette"] > #downloads-button {
992 -moz-image-region: rect(0px, 256px, 32px, 224px);
995 #add-ons-button[cui-areatype="menu-panel"],
996 toolbarpaletteitem[place="palette"] > #add-ons-button {
997 -moz-image-region: rect(0px, 288px, 32px, 256px);
1000 #open-file-button[cui-areatype="menu-panel"],
1001 toolbarpaletteitem[place="palette"] > #open-file-button {
1002 -moz-image-region: rect(0px, 320px, 32px, 288px);
1005 #save-page-button[cui-areatype="menu-panel"],
1006 toolbarpaletteitem[place="palette"] > #save-page-button {
1007 -moz-image-region: rect(0px, 352px, 32px, 320px);
1010 #sync-button[cui-areatype="menu-panel"],
1011 toolbarpaletteitem[place="palette"] > #sync-button {
1012 -moz-image-region: rect(0px, 1024px, 32px, 992px);
1015 #containers-panelmenu[cui-areatype="menu-panel"],
1016 toolbarpaletteitem[place="palette"] > #containers-panelmenu {
1017 -moz-image-region: rect(0px, 1056px, 32px, 1024px);
1020 #feed-button[cui-areatype="menu-panel"],
1021 toolbarpaletteitem[place="palette"] > #feed-button {
1022 -moz-image-region: rect(0px, 416px, 32px, 384px);
1025 #social-share-button[cui-areatype="menu-panel"],
1026 toolbarpaletteitem[place="palette"] > #social-share-button {
1027 -moz-image-region: rect(0px, 448px, 32px, 416px);
1030 #characterencoding-button[cui-areatype="menu-panel"],
1031 toolbarpaletteitem[place="palette"] > #characterencoding-button {
1032 -moz-image-region: rect(0px, 480px, 32px, 448px);
1035 #new-window-button[cui-areatype="menu-panel"],
1036 toolbarpaletteitem[place="palette"] > #new-window-button {
1037 -moz-image-region: rect(0px, 512px, 32px, 480px);
1040 #e10s-button[cui-areatype="menu-panel"],
1041 toolbarpaletteitem[place="palette"] > #e10s-button {
1042 -moz-image-region: rect(0px, 512px, 32px, 480px);
1045 #new-tab-button[cui-areatype="menu-panel"],
1046 toolbarpaletteitem[place="palette"] > #new-tab-button {
1047 -moz-image-region: rect(0px, 544px, 32px, 512px);
1050 #privatebrowsing-button[cui-areatype="menu-panel"],
1051 toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
1052 -moz-image-region: rect(0px, 576px, 32px, 544px);
1055 #tabview-button[cui-areatype="menu-panel"],
1056 toolbarpaletteitem[place="palette"] > #tabview-button {
1057 -moz-image-region: rect(0px, 608px, 32px, 576px);
1060 #find-button[cui-areatype="menu-panel"],
1061 toolbarpaletteitem[place="palette"] > #find-button {
1062 -moz-image-region: rect(0px, 640px, 32px, 608px);
1065 #print-button[cui-areatype="menu-panel"],
1066 toolbarpaletteitem[place="palette"] > #print-button {
1067 -moz-image-region: rect(0px, 672px, 32px, 640px);
1070 #fullscreen-button[cui-areatype="menu-panel"],
1071 toolbarpaletteitem[place="palette"] > #fullscreen-button {
1072 -moz-image-region: rect(0px, 704px, 32px, 672px);
1075 #developer-button[cui-areatype="menu-panel"],
1076 toolbarpaletteitem[place="palette"] > #developer-button {
1077 -moz-image-region: rect(0px, 736px, 32px, 704px);
1080 #preferences-button[cui-areatype="menu-panel"],
1081 toolbarpaletteitem[place="palette"] > #preferences-button {
1082 -moz-image-region: rect(0px, 768px, 32px, 736px);
1085 #email-link-button[cui-areatype="menu-panel"],
1086 toolbarpaletteitem[place="palette"] > #email-link-button {
1087 -moz-image-region: rect(0, 800px, 32px, 768px);
1090 #email-link-button[cui-areatype="menu-panel"][disabled="true"],
1091 toolbarpaletteitem[place="palette"] > #email-link-button[disabled="true"] {
1092 -moz-image-region: rect(64px, 800px, 96px, 768px);
1095 #sidebar-button[cui-areatype="menu-panel"],
1096 toolbarpaletteitem[place="palette"] > #sidebar-button {
1097 -moz-image-region: rect(0, 864px, 32px, 832px);
1100 #panic-button[cui-areatype="menu-panel"],
1101 toolbarpaletteitem[place="palette"] > #panic-button {
1102 -moz-image-region: rect(0, 896px, 32px, 864px);
1105 #webide-button[cui-areatype="menu-panel"],
1106 toolbarpaletteitem[place="palette"] > #webide-button {
1107 -moz-image-region: rect(0px, 960px, 32px, 928px);
1110 toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1111 -moz-image-region: rect(0, 832px, 32px, 800px);
1114 /* Wide panel control icons */
1116 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1117 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1118 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1119 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1120 list-style-image: url(chrome://browser/skin/menuPanel-small.svg);
1123 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon,
1124 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon,
1125 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
1126 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
1127 filter: url(chrome://browser/skin/filters.svg#fill);
1131 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
1132 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1133 -moz-image-region: rect(0px, 32px, 16px, 16px);
1136 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1137 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1138 -moz-image-region: rect(0px, 48px, 16px, 32px);
1141 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
1142 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1143 -moz-image-region: rect(0px, 64px, 16px, 48px);
1146 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
1147 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1148 -moz-image-region: rect(0px, 80px, 16px, 64px);
1151 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
1152 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1153 -moz-image-region: rect(0px, 96px, 16px, 80px);
1156 #add-share-provider {
1157 list-style-image: url(chrome://browser/skin/menuPanel-small.svg);
1158 -moz-image-region: rect(0px, 96px, 16px, 80px);
1161 /* === END menupanel.inc.css === */
1163 .toolbarbutton-1:not([type="menu-button"]) {
1164 -moz-box-orient: vertical;
1168 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1174 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1175 .toolbarbutton-1[disabled="true"]:hover:active,
1176 .toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1180 .toolbarbutton-1:hover:active,
1181 .toolbarbutton-1[open="true"],
1182 .toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1184 padding-bottom: 0px;
1185 padding-inline-start: 3px;
1186 padding-inline-end: 1px;
1189 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1190 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1191 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1192 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1193 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
1196 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1197 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1200 toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1201 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
1204 .toolbarbutton-1 > .toolbarbutton-icon,
1205 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1209 #nav-bar .toolbarbutton-1,
1210 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1213 #nav-bar .toolbarbutton-1:not([type=menu-button]),
1214 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1215 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1218 #nav-bar #PanelUI-menu-button {
1219 /* padding-inline-start: 7px;
1220 padding-inline-end: 5px;*/
1223 #nav-bar .toolbarbutton-1[type=panel],
1224 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
1225 /* padding-left: 5px;
1226 padding-right: 5px;*/
1229 #nav-bar .toolbarbutton-1 > menupopup {
1230 /* margin-top: -3px;*/
1233 #nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
1237 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1238 /* padding-inline-end: 0;*/
1241 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1242 /* padding-inline-start: 0;
1243 -moz-box-align: center;*/
1246 .findbar-button > .toolbarbutton-text,
1247 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1248 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
1249 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
1250 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1251 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1252 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1253 /* padding: 2px 6px;
1255 border-color: transparent;
1256 transition-property: background-color, border-color;
1257 transition-duration: 150ms;*/
1260 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-icon,
1261 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-badge-stack,
1262 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1263 padding: calc(var(--toolbarbutton-vertical-inner-padding) + 1px) 7px;
1267 /* Help SDK icons fit: */
1268 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
1269 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
1273 #nav-bar toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1274 /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1278 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1279 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
1280 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon,
1281 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
1282 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1283 /* padding-inline-end: 17px;*/
1286 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1287 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon {
1288 /* horizontal padding + border + icon width */
1289 /* max-width: 43px;*/
1292 #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1295 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1298 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1301 #nav-bar .toolbaritem-combined-buttons {
1302 /* margin-left: 2px;
1303 margin-right: 2px;*/
1306 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1311 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1312 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1:-moz-any(:not(:hover):not([open]),[disabled=true]) + .toolbarbutton-1:-moz-any(:not(:hover):not([open]),[disabled=true])::before {
1318 margin-inline-end: -1px;
1322 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1325 .findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
1326 #nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1327 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1328 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1329 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1330 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
1331 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
1332 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
1333 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
1336 .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
1337 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
1338 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1339 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1340 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
1341 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
1344 #TabsToolbar .toolbarbutton-1,
1345 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1346 .tabbrowser-arrowscrollbox > .scrollbutton-up,
1347 .tabbrowser-arrowscrollbox > .scrollbutton-down {
1350 #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1351 #TabsToolbar .toolbarbutton-1[open],
1352 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1353 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1354 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
1357 /* unified back/forward button */
1360 -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
1363 #forward-button > menupopup {
1364 margin-top: 1px !important;
1367 #forward-button > .toolbarbutton-icon {
1368 background-clip: padding-box !important;
1369 /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
1370 /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
1374 margin-inline-start: -4px !important;
1379 border-radius: 0 10000px 10000px 0;
1380 /* max-width: calc(var(--forwardbutton-width) + var(--backbutton-urlbar-overlap)) !important; */
1383 #forward-button:-moz-locale-dir(rtl) {
1384 border-radius: 10000px 0 0 10000px;
1387 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
1388 transition: margin-left 150ms ease-out;
1391 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] {
1392 margin-left: calc(0px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
1395 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] {
1396 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1397 transition-delay: 100s;
1400 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] {
1401 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1402 margin-left: calc(-0.01px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
1406 /* padding-top: 3px !important;
1407 padding-bottom: 3px !important;
1408 padding-inline-start: 5px !important;
1409 padding-inline-end: 0 !important;*/
1412 border-radius: 10000px;
1416 margin-bottom: -2px;
1419 #back-button:-moz-locale-dir(rtl) {
1422 #back-button > menupopup {
1423 margin-top: -1px !important;
1426 #back-button > .toolbarbutton-icon {
1427 border-radius: 10000px !important;
1428 background-clip: padding-box !important;
1429 /* background-color: hsla(210,25%,98%,.08) !important;
1430 padding: 6px !important;
1431 border-style: none !important;
1432 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1433 0 0 0 1px hsla(210,4%,10%,.25);*/
1434 transition-property: background-color, box-shadow !important;
1435 transition-duration: 250ms !important;
1438 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1439 /* background-color: hsla(210,4%,10%,.08) !important;*/
1442 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1443 #back-button[open="true"] > .toolbarbutton-icon {
1444 /* background-color: hsla(210,4%,10%,.12) !important;
1445 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1446 0 0 0 1px hsla(210,4%,10%,.25),
1447 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
1450 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1451 transform: scaleX(-1);
1454 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1455 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1456 list-style-image: url("chrome://browser/skin/menu-back.png") !important;
1459 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1460 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1461 list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
1464 #home-button.bookmark-item {
1465 list-style-image: url("chrome://browser/skin/Toolbar.png");
1468 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1469 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1470 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1471 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1472 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1473 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1474 #home-button.bookmark-item:-moz-lwtheme-brighttext {
1477 list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
1480 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1481 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1482 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
1486 #downloads-button > .toolbarbutton-icon {
1490 /* tabview menu item */
1493 list-style-image: url("chrome://browser/skin/tabview/tabviewFx.png");
1494 -moz-image-region: rect(1px, 89px, 17px, 73px);
1497 #menu_tabview[groups="0"] {
1498 -moz-image-region: rect(1px, 17px, 17px, 1px);
1501 #menu_tabview[groups="1"] {
1502 -moz-image-region: rect(1px, 35px, 17px, 19px);
1505 #menu_tabview[groups="2"] {
1506 -moz-image-region: rect(1px, 53px, 17px, 37px);
1509 #menu_tabview[groups="3"] {
1510 -moz-image-region: rect(1px, 71px, 17px, 55px);
1513 /* undo close tab menu item */
1514 #alltabs_undoCloseTab {
1515 list-style-image: url(chrome://browser/skin/undoCloseTab.png);
1518 @media (min-resolution: 1.1dppx) {
1519 #alltabs_undoCloseTab {
1520 list-style-image: url(chrome://browser/skin/undoCloseTab@2x.png);
1522 #alltabs_undoCloseTab > .toolbarbutton-icon {
1527 /* zoom control text (reset) button special case: */
1529 #nav-bar #zoom-reset-button > .toolbarbutton-text {
1530 /* To make this line up with the icons, it needs the same height (18px) +
1531 * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
1532 * increase in text sizes would break things...
1537 /* ::::: fullscreen window controls ::::: */
1542 -moz-appearance: none;
1544 /* margin: 0 !important;
1545 padding: 6px 12px;*/
1549 list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize);
1552 #minimize-button:hover {
1553 list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-hover);
1557 list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore);
1560 #restore-button:hover {
1561 list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-hover);
1564 #minimize-button:hover,
1565 #restore-button:hover {
1566 /* background-color: hsla(0, 0%, 0%, .12);*/
1569 #minimize-button:hover:active,
1570 #restore-button:hover:active {
1571 /* background-color: hsla(0, 0%, 0%, .22);*/
1575 list-style-image: url(chrome://browser/skin/caption-buttons.svg#close);
1578 #close-button:hover {
1579 /* background-color: hsl(355, 86%, 49%);*/
1580 list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-hover);
1583 #close-button:hover:active {
1584 /* background-color: hsl(355, 82%, 69%);*/
1587 /* ::::: Location Bar ::::: */
1590 .searchbar-textbox {
1593 margin-inline-start: 3px;
1597 /* make color as light as possible to deal with dark non-domain parts */
1601 #urlbar:-moz-lwtheme,
1602 .searchbar-textbox:-moz-lwtheme {
1603 /* background-color: rgba(255,255,255,.8);
1604 @navbarTextboxCustomBorder@
1608 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1609 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1610 /* background-color: rgba(255,255,255,.9);*/
1613 #urlbar:-moz-lwtheme[focused]:not([readonly]),
1614 .searchbar-textbox:-moz-lwtheme[focused] {
1615 /* background-color: white;*/
1618 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
1619 /* border-inline-start: none;
1623 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1624 /* border-top-left-radius: 0;
1625 border-bottom-left-radius: 0; */
1628 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1629 /* border-top-right-radius: 0;
1630 border-bottom-right-radius: 0; */
1633 window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
1634 /* clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
1635 /* margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); */
1638 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
1639 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1640 /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
1641 transform: scaleX(-1);
1644 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) {
1645 -moz-box-direction: reverse;
1648 html|*.urlbar-input:-moz-lwtheme::placeholder,
1649 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::placeholder {
1654 -moz-box-orient: horizontal;
1655 -moz-box-align: stretch;
1658 .urlbar-textbox-container {
1659 -moz-box-align: stretch;
1663 margin-inline-start: 0;
1667 #urlbar-display-box {
1668 padding-inline-start: 4px;
1669 /* border-inline-start: 1px solid var(--urlbar-separator-color);
1670 border-inline-end: 1px solid var(--urlbar-separator-color);
1671 border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%);
1672 border-image-slice: 1; */
1676 -moz-box-align: center;
1681 /* 16x16 icon with border-box sizing */
1686 /* ::::: URL Bar Zoom Reset Button ::::: */
1688 @keyframes urlbar-zoom-reset-pulse {
1690 transform: scale(0);
1693 transform: scale(1.5);
1696 transform: scale(1.0);
1700 #urlbar-zoom-button {
1701 /* -moz-appearance: none;*/
1706 /* background-color: hsla(0,0%,0%,.05);
1708 border: 1px solid ThreeDLightShadow;*/
1711 #urlbar-zoom-button[animate="true"] {
1712 animation-name: urlbar-zoom-reset-pulse;
1713 animation-duration: 250ms;
1716 #urlbar-zoom-button:hover {
1717 /* background-color: hsla(0,0%,0%,.1);*/
1720 #urlbar-zoom-button:hover:active {
1721 /* background-color: hsla(0,0%,0%,.15);*/
1724 #urlbar-zoom-button > .toolbarbutton-text {
1728 #urlbar-zoom-button > .toolbarbutton-icon {
1732 .search-go-container {
1736 .search-go-container > .search-go-button {
1740 #urlbar-search-footer {
1741 border-top: 1px solid var(--panel-separator-color);
1744 #urlbar-search-settings {
1747 #urlbar-search-settings:hover {
1750 #urlbar-search-settings:hover:active {
1753 #urlbar-search-splitter {
1755 margin-inline-start: -3px;
1757 background: transparent;
1760 #urlbar-search-splitter + #urlbar-container > #urlbar,
1761 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1762 margin-inline-start: 0;
1766 border-inline-end: 1px solid #9C9CFF;
1767 margin-inline-end: 3px;
1770 margin-inline-start: 0;
1774 /* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
1776 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
1777 border-bottom: 1px solid var(--panel-separator-color);
1778 background-color: #000000;
1780 padding-inline-start: 44px;
1781 padding-inline-end: 6px;
1782 background-image: url("chrome://browser/skin/info.svg");
1783 background-clip: padding-box;
1784 background-position: 20px center;
1785 background-repeat: no-repeat;
1786 background-size: 16px 16px;
1789 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
1790 background-position: right 20px center;
1793 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
1798 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
1799 margin-inline-start: 0;
1802 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
1803 -moz-appearance: none;
1808 margin-inline-start: 10px;
1811 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
1814 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
1817 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
1820 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
1823 /* === END urlbarSearchSuggestionsNotification.inc.css === */
1826 min-width: calc(54px + 11ch);
1831 #identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
1832 background-color: var(--identity-box-verified-background-color);
1835 #identity-box:-moz-focusring {
1836 outline: 1px dotted;
1837 outline-offset: -1px;
1840 #identity-box.verifiedDomain:-moz-focusring,
1841 #identity-box.verifiedIdentity:-moz-focusring {
1842 outline-color: #000000;
1845 /* Location bar dropmarker */
1847 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
1848 background-color: transparent;
1851 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
1852 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
1853 #urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1856 transition: opacity 0.15s ease;
1859 #urlbar-wrapper[switchingtabs] > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1863 #navigator-toolbox:not(:hover) #nav-bar:not([customizing="true"]) #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker {
1867 .urlbar-history-dropmarker:hover {
1870 .urlbar-history-dropmarker:hover:active,
1871 .urlbar-history-dropmarker[open="true"] {
1874 /* page proxy icon */
1875 /* === BEGIN identity-block.inc.css === */
1877 /* === BEGIN identity-block/icons.inc.css === */
1880 list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
1883 #identity-box:hover > #identity-icon:not(.no-hover),
1884 #identity-box[open=true] > #identity-icon {
1885 list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
1888 #identity-box.grantedPermissions > #identity-icon {
1889 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice);
1892 #identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover),
1893 #identity-box.grantedPermissions[open=true] > #identity-icon {
1894 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover);
1897 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
1898 list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
1901 #tracking-protection-icon {
1902 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled);
1905 #tracking-protection-icon[state="loaded-tracking-content"] {
1906 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled);
1910 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
1911 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon,
1912 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
1913 list-style-image: url(chrome://browser/skin/connection-secure.svg);
1914 visibility: visible;
1917 #urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
1918 list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon);
1919 visibility: visible;
1922 #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
1923 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
1924 list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
1925 visibility: visible;
1928 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
1929 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
1930 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon {
1931 list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon);
1932 visibility: visible;
1935 /* === END identity-block/icons.inc.css === */
1942 /* The padding-left and padding-right transitions handle the delayed hiding of
1943 the forward button when hovered. */
1944 transition: background-color 150ms ease, padding-left, padding-right;
1947 #identity-box:-moz-locale-dir(ltr) {
1948 border-top-right-radius: 0;
1949 border-bottom-right-radius: 0;
1952 #identity-box:-moz-locale-dir(rtl) {
1953 border-top-left-radius: 0;
1954 border-bottom-left-radius: 0;
1957 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1958 border-inline-end: 1px solid #008484;
1961 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels {
1965 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
1966 border-inline-end: 1px solid #9C9CFF;
1969 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon-labels {
1974 #identity-icon-labels:-moz-locale-dir(ltr) {
1978 #identity-icon-labels:-moz-locale-dir(rtl) {
1982 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
1983 /* border-radius: 0;
1984 padding-inline-start: 2px; */
1985 padding-inline-end: 2px;
1986 margin-inline-end: 1px;
1989 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #identity-box {
1990 padding-inline-start: 2px;
1993 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #identity-box {
1994 /* Forward button hiding is delayed when hovered, so we should use the same
1995 delay for the identity box. We handle both horizontal paddings (for LTR and
1996 RTL), the latter two delays here are for padding-left and padding-right. */
1997 transition-delay: 0s, 100s, 100s;
2000 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > #identity-box {
2001 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2002 padding-inline-start: 2.01px;
2005 /* MAIN IDENTITY ICON */
2012 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2016 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2017 -moz-image-region: inherit;
2018 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2028 margin-inline-start: -16px;
2033 #identity-box[sharing="camera"] > #sharing-icon {
2034 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
2037 #identity-box[sharing="microphone"] > #sharing-icon {
2038 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
2041 #identity-box[sharing="screen"] > #sharing-icon {
2042 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
2046 #identity-box[sharing] > #sharing-icon {
2048 animation-delay: -1.5s;
2051 #identity-box[sharing] > #identity-icon,
2053 animation: 3s linear pulse infinite;
2057 0%, 16.66%, 83.33%, 100% {
2065 /* TRACKING PROTECTION ICON */
2067 #tracking-protection-icon {
2070 margin-inline-start: 2px;
2071 margin-inline-end: 0;
2074 #tracking-protection-icon[animate] {
2075 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2078 #tracking-protection-icon:not([state]) {
2079 margin-inline-end: -18px;
2080 pointer-events: none;
2082 /* Only animate the shield in, when it disappears hide it immediately. */
2086 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2087 visibility: collapse;
2090 /* CONNECTION ICON */
2095 margin-inline-start: 2px;
2096 visibility: collapse;
2099 /* === END identity-block.inc.css === */
2101 #page-proxy-favicon {
2102 -moz-image-region: rect(0, 16px, 16px, 0);
2105 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2106 /* margin-inline-end: 1px;*/
2109 #identity-box:hover > #page-proxy-favicon {
2110 -moz-image-region: rect(0, 32px, 16px, 16px);
2113 #identity-box:hover:active > #page-proxy-favicon,
2114 #identity-box[open=true] > #page-proxy-favicon {
2115 -moz-image-region: rect(0, 48px, 16px, 32px);
2118 #identity-box:hover {
2119 background-color: #FFCF00;
2123 #identity-box:hover:active,
2124 #identity-box[open=true] {
2125 background-color: #FF9F00;
2129 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2130 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2131 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2132 background-color: #A09090;
2136 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover > #identity-icon-labels,
2137 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active > #identity-icon-labels,
2138 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] > #identity-icon-labels {
2142 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2143 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2144 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2145 background-color: #008484;
2149 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover > #identity-icon-labels,
2150 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active > #identity-icon-labels,
2151 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] > #identity-icon-labels {
2155 #identity-box:hover > image,
2156 #identity-box:hover:active > image,
2157 #identity-box[open=true] > image {
2158 filter: url(chrome://global/skin/filters.svg#active-icon-state);
2163 /* === BEGIN autocomplete.inc.css === */
2165 #PopupAutoComplete > richlistbox > richlistitem {
2170 padding: 0px 1px 0px 1px;
2173 #PopupAutoComplete > richlistbox > richlistitem > .ac-title {
2175 margin-inline-start: 6px;
2178 #PopupAutoComplete > richlistbox {
2182 /* === END autocomplete.inc.css === */
2184 #PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
2185 border-top: 1px solid #A09090;
2188 #treecolAutoCompleteImage {
2193 .autocomplete-richlistbox {
2197 .autocomplete-richlistitem {
2202 border: 1px solid transparent;
2205 .autocomplete-richlistitem[selected=true] {
2206 background-color: hsl(210, 80%, 52%);
2211 /* color: hsl(0, 0%, 0%);*/
2219 background-color: hsl(216, 0%, 88%);
2220 color: hsl(0, 0%, 0%);
2222 border: 1px solid transparent;
2234 /* color: hsl(0, 0%, 50%);*/
2245 .ac-title[selected=true],
2246 .ac-separator[selected],
2247 .ac-url[selected=true],
2248 .ac-action[selected=true] {
2252 .ac-tags-text[selected] > html|span.ac-tag {
2253 background-color: #A09090;
2257 html|span.ac-emphasize-text-title,
2258 html|span.ac-emphasize-text-tag,
2259 html|span.ac-emphasize-text-url {
2263 .ac-type-icon[type=bookmark] {
2264 list-style-image: url("chrome://browser/skin/urlbar-star.svg#star");
2267 .ac-type-icon[type=bookmark][selected][current] {
2268 /* list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted");*/
2271 .ac-result-type-bookmark,
2272 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
2273 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2274 -moz-image-region: rect(0px 16px 16px 0px);
2279 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
2280 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
2281 /* -moz-image-region: rect(0px 48px 16px 32px);*/
2284 .ac-type-icon[type=keyword],
2285 .ac-site-icon[type=searchengine],
2286 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) {
2287 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2290 .ac-type-icon[type=keyword][selected],
2291 .ac-site-icon[type=searchengine][selected],
2292 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected) {
2293 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2296 .ac-result-type-tag,
2297 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
2298 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2303 .ac-type-icon[type=switchtab],
2304 .ac-type-icon[type=remotetab] {
2305 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab");
2308 .ac-type-icon[type=switchtab][selected],
2309 .ac-type-icon[type=remotetab][selected] {
2310 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted");
2313 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2314 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2320 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2321 border-top: 1px solid #9C9CFF;
2324 /* combined go/reload/stop button in location bar */
2327 #urlbar-reload-button,
2328 #urlbar-stop-button {
2330 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2331 /* margin: 0 9px; */
2332 margin-inline-start: 0px;
2333 border-inline-start: 1px solid var(--urlbar-separator-color);
2334 border-image: linear-gradient(transparent 15%,
2335 var(--urlbar-separator-color) 15%,
2336 var(--urlbar-separator-color) 85%,
2338 border-image-slice: 1;
2341 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2342 border-top-left-radius: 0px;
2343 border-bottom-left-radius: 0px;
2346 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2347 border-top-right-radius: 0px;
2348 border-bottom-right-radius: 0px;
2351 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2352 #urlbar-reload-button:not(:hover) {
2353 border-inline-start-style: none;
2354 padding-inline-start: 3px;
2357 #urlbar-reload-button {
2358 -moz-image-region: rect(0px, 14px, 14px, 0px);
2361 #urlbar-reload-button[disabled=true] {
2362 -moz-image-region: rect(28px, 14px, 42px, 0px);
2365 #urlbar-reload-button:not([disabled=true]):hover {
2366 -moz-image-region: rect(14px, 14px, 28px, 0px);
2369 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2370 transform: scaleX(-1);
2374 -moz-image-region: rect(0, 42px, 14px, 28px);
2377 #urlbar-go-button:hover {
2378 -moz-image-region: rect(14px, 42px, 28px, 28px);
2381 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2382 transform: scaleX(-1);
2385 #urlbar-stop-button {
2386 -moz-image-region: rect(0px, 28px, 14px, 14px);
2389 #urlbar-stop-button:hover {
2390 -moz-image-region: rect(14px, 28px, 28px, 14px);
2393 @media (min-resolution: 1.1dppx) {
2395 #urlbar-reload-button,
2396 #urlbar-stop-button {
2397 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2400 #urlbar-go-button > .toolbarbutton-icon,
2401 #urlbar-reload-button > .toolbarbutton-icon,
2402 #urlbar-stop-button > .toolbarbutton-icon {
2407 -moz-image-region: rect(0, 84px, 28px, 56px);
2410 #urlbar-go-button:hover {
2411 -moz-image-region: rect(28px, 84px, 56px, 56px);
2414 #urlbar-go-button:hover:active {
2415 -moz-image-region: rect(56px, 84px, 84px, 56px);
2418 #urlbar-reload-button {
2419 -moz-image-region: rect(0, 28px, 28px, 0);
2422 #urlbar-reload-button:not([disabled]):hover {
2423 -moz-image-region: rect(28px, 28px, 56px, 0);
2426 #urlbar-reload-button:not([disabled]):hover:active {
2427 -moz-image-region: rect(56px, 28px, 84px, 0);
2430 #urlbar-stop-button {
2431 -moz-image-region: rect(0, 56px, 28px, 28px);
2434 #urlbar-stop-button:not([disabled]):hover {
2435 -moz-image-region: rect(28px, 56px, 56px, 28px);
2438 #urlbar-stop-button:hover:active {
2439 -moz-image-region: rect(56px, 56px, 84px, 28px);
2443 /* popup blocker button */
2445 #page-report-button {
2446 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2447 -moz-image-region: rect(0, 16px, 16px, 0);
2450 #page-report-button:hover ,
2451 #page-report-button:hover:active,
2452 #page-report-button[open="true"] {
2453 -moz-image-region: rect(0, 32px, 16px, 16px);
2456 /* Reader mode button */
2458 #reader-mode-button {
2459 list-style-image: url("chrome://browser/skin/readerMode.svg");
2460 -moz-image-region: rect(0, 16px, 16px, 0);
2463 #reader-mode-button:hover,
2464 #reader-mode-button[readeractive]:hover {
2465 -moz-image-region: rect(0, 32px, 16px, 16px);
2468 #reader-mode-button:hover:active,
2469 #reader-mode-button[readeractive] {
2470 -moz-image-region: rect(0, 48px, 16px, 32px);
2473 /* social share panel */
2475 /* === BEGIN social.inc.css === */
2477 #manage-share-providers {
2478 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
2479 -moz-image-region: rect(0, 468px, 18px, 450px);
2482 #manage-share-providers > .toolbarbutton-icon {
2487 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
2490 /* fixup corners for share panel */
2491 .social-panel > .social-panel-frame {
2492 border-radius: inherit;
2495 /* === END social.inc.css === */
2497 .social-panel-frame {
2498 border-radius: inherit;
2501 .social-share-frame {
2508 background-color: white;
2509 background-repeat: no-repeat;
2510 background-position: center center;
2512 #share-container[loading] {
2513 background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2515 #share-container > browser {
2516 transition: opacity 150ms ease-in-out;
2519 #share-container[loading] > browser {
2523 .social-share-toolbar {
2524 border-bottom: 1px solid #9C9CFF;
2528 #social-share-provider-buttons {
2533 .share-provider-button {
2538 .share-provider-button > .toolbarbutton-text {
2541 .share-provider-button > .toolbarbutton-icon {
2547 #social-share-panel {
2553 .social-share-frame {
2554 border-top-left-radius: 0;
2555 border-bottom-left-radius: inherit;
2556 border-top-right-radius: 0;
2557 border-bottom-right-radius: inherit;
2560 #social-share-panel > .social-share-toolbar {
2561 border-top-left-radius: inherit;
2562 border-top-right-radius: inherit;
2565 #social-share-provider-buttons {
2566 border-top-left-radius: inherit;
2567 border-top-right-radius: inherit;
2570 /* bookmarks menu-button */
2572 #bookmarks-menu-button.bookmark-item {
2573 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2574 -moz-image-region: rect(0px 16px 16px 0px);
2577 #bookmarks-menu-button.bookmark-item[starred] {
2578 -moz-image-region: rect(0px 32px 16px 16px);
2581 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2583 padding-bottom: 2px;
2586 #BMB_bookmarksPopup[side="top"],
2587 #BMB_bookmarksPopup[side="bottom"] {
2589 margin-right: -20px;
2592 #BMB_bookmarksPopup[side="left"],
2593 #BMB_bookmarksPopup[side="right"] {
2595 margin-bottom: -20px;
2598 /* bookmarking panel */
2600 #editBookmarkPanelStarIcon {
2601 list-style-image: url("chrome://browser/skin/places/starred48.png");
2606 #editBookmarkPanelStarIcon[unstarred] {
2607 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2610 #editBookmarkPanelTitle {
2614 #editBookmarkPanelHeader,
2615 #editBookmarkPanelContent {
2616 margin-bottom: .5em;
2619 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2620 #editBMPanel_folderTree {
2624 /* ::::: content area ::::: */
2627 background-color: #9C9CFF;
2632 background-color: #000000;
2636 margin-inline-start: 0;
2645 padding-inline-start: 0px;
2648 #sidebar-header > .close-icon {
2649 /* padding: 4px 2px;
2652 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2655 #sidebar-header > .close-icon:hover,
2656 #sidebar-header > .close-icon:hover:active {
2657 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2660 #sidebar-splitter:-moz-locale-dir(ltr),
2661 #sidebar:-moz-locale-dir(ltr) {
2662 border-radius: 0 5px 0 0;
2665 #sidebar-splitter:-moz-locale-dir(rtl),
2666 #sidebar:-moz-locale-dir(rtl) {
2667 border-radius: 5px 0 0 0;
2670 .browserContainer > findbar {
2672 background-color: -moz-dialog;
2673 color: -moz-DialogText;
2682 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2685 #TabsToolbar .toolbar-holder {
2686 background-color: #000000; /* correct effect of being an actual toolbar */
2689 #main-window[disablechrome] #TabsToolbar,
2690 #TabsToolbar[tabsontop="false"] {
2691 border-bottom: 1px solid #008484;
2694 /* === BEGIN tabs.inc.css === */
2697 /* --tab-toolbar-navbar-overlap: 1px; */
2698 /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2699 /* --tab-min-height: 31px; */
2702 /* --tab-stroke-background-size: auto 100%; */
2706 .tabs-newtab-button,
2707 #TabsToolbar > #new-tab-button {
2712 padding: 1px 4px 2px;
2715 .tabbrowser-tab:first-of-type {
2716 margin-inline-start: 2px;
2719 .tabs-newtab-button,
2720 #TabsToolbar > #new-tab-button,
2721 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2722 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2723 border-radius: 8px 8px 0px 0px;
2724 margin-inline-start: 0;
2727 .tabs-newtab-button:not(:hover),
2728 #TabsToolbar > #new-tab-button:not(:hover),
2729 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2730 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2731 background-color: #C09070;
2734 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2735 .tabbrowser-tab[visuallyselected=true] {
2736 /* position: relative;
2740 .tab-background-middle {
2746 .tab-content[pinned] {
2751 .tab-sharing-icon-overlay,
2757 .tab-sharing-icon-overlay,
2761 margin-inline-end: 3px;
2765 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2768 .tab-icon-image[sharing]:not([selected]),
2769 .tab-sharing-icon-overlay {
2770 animation: 3s linear pulse infinite;
2774 0%, 16.66%, 83.33%, 100% {
2782 .tab-icon-image[sharing]:not([selected]) {
2783 animation-delay: -1.5s;
2786 .tab-sharing-icon-overlay {
2787 /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */
2788 margin-inline-start: -22px;
2792 .tab-sharing-icon-overlay[sharing="camera"] {
2793 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
2796 .tab-sharing-icon-overlay[sharing="microphone"] {
2797 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
2800 .tab-sharing-icon-overlay[sharing="screen"] {
2801 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
2808 margin-inline-start: -15px;
2809 margin-inline-end: -1px;
2813 .tab-icon-overlay[crashed] {
2814 list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2817 .tab-icon-overlay[soundplaying],
2818 .tab-icon-overlay[muted]:not([crashed]),
2819 .tab-icon-overlay[blocked]:not([crashed]) {
2820 border-radius: 10px;
2823 .tab-icon-overlay[soundplaying]:hover,
2824 .tab-icon-overlay[muted]:hover,
2825 .tab-icon-overlay[blocked]:not([crashed]):hover {
2826 background-color: #FFCF00;
2829 .tab-icon-overlay[soundplaying] {
2830 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2833 .tab-icon-overlay[muted]:not([crashed]) {
2834 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2837 .tab-icon-overlay[blocked]:not([crashed]) {
2838 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-blocked");
2841 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not([selected]):not(:hover),
2842 .tab-icon-overlay[soundplaying][selected]:-moz-lwtheme-brighttext:not(:hover) {
2843 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2846 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not([selected]):not(:hover),
2847 .tab-icon-overlay[mouted][selected]:-moz-lwtheme-brighttext:not(:hover) {
2848 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2851 #TabsToolbar[brighttext] .tab-icon-overlay[blocked]:not([crashed]):not([selected]):not(:hover),
2852 .tab-icon-overlay[blocked][selected]:-moz-lwtheme-brighttext:not(:hover) {
2853 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-blocked");
2856 .tab-throbber[busy] {
2857 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2860 .tab-throbber[progress] {
2861 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2864 @media (min-resolution: 1.1dppx) {
2865 .tab-throbber[busy] {
2866 list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
2869 .tab-throbber[progress] {
2870 list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
2874 .tab-throbber[pinned],
2875 .tab-icon-image[pinned] {
2876 margin-inline-start: 2px;
2877 margin-inline-end: 2px;
2881 /* this needs to add up to the 16px of the icon image */
2883 margin-top: 2px !important;
2884 margin-bottom: 2px !important;
2888 margin-inline-start: 4px;
2894 .tab-icon-sound[soundplaying],
2895 .tab-icon-sound[muted],
2896 .tab-icon-sound[blocked] {
2897 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
2898 filter: url(chrome://browser/skin/filters.svg#fill);
2902 .tab-icon-sound[muted] {
2903 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
2906 .tab-icon-sound[blocked] {
2907 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked);
2915 .tab-icon-sound[soundplaying-scheduledremoval]:not(:hover),
2916 .tab-icon-overlay[soundplaying-scheduledremoval]:not(:hover) {
2917 transition: opacity .3s linear var(--soundplaying-removal-delay);
2922 .tabs-newtab-button {
2923 /* overlap the tab curves */
2926 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
2930 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
2931 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
2934 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
2935 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
2938 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
2941 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
2944 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
2945 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
2948 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
2949 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
2952 .tab-background-start[selected=true]::after,
2953 .tab-background-start[selected=true]::before,
2954 .tab-background-start,
2955 .tab-background-end,
2956 .tab-background-end[selected=true]::after,
2957 .tab-background-end[selected=true]::before {
2960 .tabbrowser-tab:not([visuallyselected=true]),
2961 .tabbrowser-tab:-moz-lwtheme {
2964 /* tabbrowser-tab focus ring */
2965 .tabbrowser-tab:focus {
2966 outline: 1px dotted;
2971 .tabbrowser-tab[visuallyselected="true"] {
2974 /* End selected tab */
2976 /* Tab pointer-events */
2979 pointer-events: none;
2982 .tab-background-middle,
2983 .tabs-newtab-button,
2984 .tab-icon-overlay[soundplaying],
2985 .tab-icon-overlay[muted]:not([crashed]),
2986 .tab-icon-overlay[blocked]:not([crashed]),
2989 pointer-events: auto;
2995 .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
2996 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
2998 .tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
2999 background-color: #E7ADE7;
3002 .tab-label[attention]:not([selected="true"]) {
3006 .tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
3007 background-color: #3333FF;
3011 /* Tab separators */
3013 .tabbrowser-tab::after,
3014 .tabbrowser-tab::before {
3016 margin-inline-start: -1px;
3017 background-image: linear-gradient(transparent 5px,
3019 currentColor calc(100% - 4px),
3020 transparent calc(100% - 4px));
3024 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3025 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3029 /* Also show separators beside the selected tab when dragging it. */
3031 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3032 .tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3033 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
3038 /* New tab button */
3040 .tabs-newtab-button {
3042 /* width: calc(36px + var(--tab-curve-width)); */
3044 @media (min-resolution: 1.1dppx) {
3045 /* image preloading hack from like lowdpi styles */
3046 #tabbrowser-tabs::before {
3049 .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
3050 .tabs-newtab-button:hover {
3053 .tab-background-middle[selected=true] {
3056 .tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
3057 .tab-background-end[selected=true]:-moz-locale-dir(rtl)::after {
3060 .tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
3061 .tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
3065 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
3069 /* All tabs menupopup */
3071 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3072 background-color: #402800;
3075 .alltabs-endimage[soundplaying],
3076 .alltabs-endimage[muted],
3077 .alltabs-endimage[blocked] {
3078 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
3079 filter: url(chrome://browser/skin/filters.svg#fill);
3083 .alltabs-endimage[muted] {
3084 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
3087 .alltabs-endimage[blocked] {
3088 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked);
3091 /* === END tabs.inc.css === */
3093 /* Tab DnD indicator */
3094 .tab-drop-indicator {
3095 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3096 margin-bottom: -11px;
3099 /* Tab close button */
3101 list-style-image: url("chrome://global/skin/icons/close-button.gif") !important;
3102 -moz-image-region: auto !important;
3105 .tab-close-button:hover,
3106 .tab-close-button:hover[selected="true"] {
3107 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
3108 -moz-image-region: auto !important;
3111 .tab-close-button:hover:active,
3112 .tab-close-button:hover:active[selected="true"] {
3113 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
3114 -moz-image-region: auto !important;
3117 .tab-close-button > .button-icon,
3118 .tab-close-button > .button-box > .button-icon,
3119 .tab-close-button > .toolbarbutton-icon {
3120 width: auto !important;
3124 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3126 .tabbrowser-arrowscrollbox > .scrollbutton-up,
3127 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3131 background-origin: border-box;
3134 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3135 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3136 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3137 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3140 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3141 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3144 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3145 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3146 /* transform: scaleX(-1);*/
3149 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3150 transition: 1s background-color ease-out;
3153 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
3154 background-color: #008484;
3157 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3158 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3159 /* border-width: 0 2px 0 0;
3160 border-style: solid;
3161 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3164 .tabs-newtab-button > .toolbarbutton-icon {
3166 margin-bottom: -1px;
3169 .tabs-newtab-button,
3170 #TabsToolbar > #new-tab-button,
3171 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3172 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3173 list-style-image: url("chrome://browser/skin/tabbrowser/newtab.svg");
3174 -moz-image-region: auto;
3177 .tabs-newtab-button,
3178 .tabs-newtab-button:hover,
3179 #TabsToolbar > #new-tab-button,
3180 #TabsToolbar > #new-tab-button:hover {
3183 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3184 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3185 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3186 .tabs-newtab-button:-moz-lwtheme-brighttext,
3187 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3188 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3191 #TabsToolbar > #new-tab-button {
3196 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3199 #alltabs-button:hover,
3200 #alltabs-button:hover:active,
3201 #alltabs-button[open="true"] {
3202 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3205 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3206 #alltabs-button:-moz-lwtheme-brighttext {
3209 #alltabs-button > .toolbarbutton-icon {
3213 #alltabs-button > .toolbarbutton-menu-dropmarker {
3217 /* All tabs menupopup */
3218 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3219 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
3220 -moz-image-region: auto;
3223 .alltabs-item[selected="true"] {
3227 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3228 list-style-image: url("chrome://global/skin/icons/loading.png");
3231 @media (min-resolution: 1.1dppx) {
3232 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3233 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3237 toolbarbutton.chevron {
3238 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3241 toolbarbutton.chevron:hover {
3242 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3245 toolbar[brighttext] toolbarbutton.chevron {
3246 list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3249 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3250 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3251 transform: scaleX(-1);
3254 toolbarbutton.chevron > .toolbarbutton-text,
3255 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3259 toolbarbutton.chevron > .toolbarbutton-icon {
3263 #sidebar-throbber[loading="true"] {
3264 list-style-image: url("chrome://global/skin/icons/loading.png");
3265 margin-inline-end: 4px;
3268 @media (min-resolution: 1.1dppx) {
3269 #sidebar-throbber[loading="true"] {
3270 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3275 /* Bookmarks toolbar */
3276 #PlacesToolbarDropIndicator {
3277 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3280 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3281 background-color: #008484 !important;
3282 color: #FFCF00 !important;
3285 /* rules for menupopup drop indicators */
3286 .menupopup-drop-indicator-bar {
3288 /* these two margins must together compensate the indicator's height */
3290 margin-bottom: -1px;
3293 .menupopup-drop-indicator {
3294 list-style-image: none;
3296 margin-inline-end: -4em;
3297 background-color: #008484;
3300 /* === BEGIN notification-icons.inc.css === */
3302 #notification-popup-box {
3303 border-radius: 3px 0 0 3px;
3306 margin-inline-end: -5px;
3307 padding-inline-end: 5px;
3310 .notification-anchor-icon,
3311 #blocked-permissions-container > .blocked-permission-icon {
3314 margin-inline-start: 2px;
3317 /* This class can be used alone or in combination with the class defining the
3318 type of icon displayed. This rule must be defined before the others in order
3319 for its list-style-image to be overridden. */
3320 .notification-anchor-icon {
3321 list-style-image: url("chrome://global/skin/icons/information-16.png");
3324 .notification-anchor-icon:-moz-focusring {
3325 outline: 1px dotted #008484;
3328 @media (min-resolution: 1.1dppx) {
3329 .notification-anchor-icon {
3330 list-style-image: url(chrome://global/skin/icons/information-32.png);
3334 .popup-notification-icon {
3337 margin-inline-end: 10px;
3340 .notification-anchor-icon:not(.plugin-blocked),
3341 #blocked-permissions-container > .blocked-permission-icon {
3342 filter: url(chrome://global/skin/filters.svg#fill);
3346 .notification-anchor-icon:not(.plugin-blocked):not(:hover) {
3349 /* INDIVIDUAL NOTIFICATIONS */
3351 .popup-notification-icon[popupid="web-notifications"],
3352 .desktop-notification-icon {
3353 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification);
3356 .desktop-notification-icon.blocked-permission-icon {
3357 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked);
3361 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows);
3364 .geo-icon.blocked-permission-icon {
3365 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-blocked);
3368 .popup-notification-icon[popupid="geolocation"] {
3369 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-detailed);
3372 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3374 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB);
3377 .indexedDB-icon.blocked-permission-icon {
3378 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked);
3382 list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
3385 .popup-notification-icon[popupid="password"] {
3386 list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed);
3390 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera);
3393 .camera-icon.in-use {
3394 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-sharing);
3397 .camera-icon.blocked-permission-icon {
3398 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked);
3402 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone);
3405 .microphone-icon.in-use {
3406 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-sharing);
3409 .microphone-icon.blocked-permission-icon {
3410 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked);
3413 .popup-notification-icon.microphone-icon {
3414 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed);
3418 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen);
3421 .screen-icon.in-use {
3422 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-sharing);
3425 .screen-icon.blocked-permission-icon {
3426 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked);
3429 #webRTC-preview:not([hidden]) {
3430 display: -moz-stack;
3432 border: 1px solid #A09090;
3438 html|*#webRTC-previewVideo {
3440 /* If we don't set the min-width, width is ignored. */
3445 #webRTC-previewWarning {
3446 background: #FF0000 url("chrome://browser/skin/warning-white.svg") no-repeat .75em .75em;
3449 padding-inline-start: calc(1.5em + 16px);
3450 border-top: 1px solid #A09090;
3453 #webRTC-previewWarning > .text-link {
3454 margin-inline-start: 0;
3457 /* This icon has a block sign in it, so we don't need a blocked version. */
3459 list-style-image: url("chrome://browser/skin/notification-icons.svg#popup");
3464 .popup-notification-icon[popupid="drmContentPlaying"],
3466 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3469 .drm-icon:hover:active {
3470 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3473 #eme-notification-icon[firstplay=true] {
3474 animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3477 @keyframes emeTeachingMoment {
3478 0% {transform: translateX(0); }
3479 25% {transform: translateX(3px) }
3480 75% {transform: translateX(-3px) }
3481 100% { transform: translateX(0); }
3484 /* INSTALL ADDONS */
3487 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default);
3490 .popup-notification-icon[popupid="xpinstall-disabled"],
3491 .popup-notification-icon[popupid="addon-install-blocked"],
3492 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
3493 list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3496 .popup-notification-icon[popupid="addon-progress"] {
3497 list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3500 .popup-notification-icon[popupid="addon-install-failed"] {
3501 list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3504 .popup-notification-icon[popupid="addon-install-confirmation"] {
3505 list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3508 #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3509 list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3512 .popup-notification-icon[popupid="addon-install-complete"] {
3513 list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3516 .popup-notification-icon[popupid="addon-install-restart"] {
3517 list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3520 .popup-notification-icon[popupid="click-to-play-plugins"] {
3521 list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png);
3526 .popup-notification-icon[popupid*="offline-app-requested"],
3527 .popup-notification-icon[popupid="offline-app-usage"] {
3528 list-style-image: url(chrome://global/skin/icons/question-64.png);
3534 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
3537 .plugin-icon.plugin-blocked {
3538 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
3541 #notification-popup-box[hidden] {
3542 /* Override display:none to make the pluginBlockedNotification animation work
3543 when showing the notification repeatedly. */
3545 visibility: collapse;
3548 #plugins-notification-icon.plugin-blocked[showing] {
3549 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3552 @keyframes pluginBlockedNotification {
3563 .popup-notification-icon[popupid="servicesInstall"] {
3564 list-style-image: url(chrome://browser/skin/social/services-64.png);
3568 list-style-image: url(chrome://browser/skin/social/services-16.png);
3574 list-style-image: url(chrome://browser/skin/translation-16.png);
3575 -moz-image-region: rect(0px, 16px, 16px, 0px);
3578 .translation-icon.in-use {
3579 -moz-image-region: rect(0px, 32px, 16px, 16px);
3582 /* === END notification-icons.inc.css === */
3584 .popup-notification-body[popupid="addon-progress"],
3585 .popup-notification-body[popupid="addon-install-confirmation"] {
3590 /* Translation infobar */
3592 /* === BEGIN infobar.inc.css === */
3594 notification[value="translation"] .messageImage {
3595 list-style-image: url("chrome://browser/skin/translation-16.png");
3596 -moz-image-region: rect(0, 32px, 16px, 16px);
3599 @media (min-resolution: 1.25dppx) {
3600 notification[value="translation"] .messageImage {
3601 list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3602 -moz-image-region: rect(0, 64px, 32px, 32px);
3606 notification[value="translation"][state="translating"] .messageImage {
3607 list-style-image: url("chrome://browser/skin/translating-16.png");
3608 -moz-image-region: auto;
3611 @media (min-resolution: 1.25dppx) {
3612 notification[value="translation"][state="translating"] .messageImage {
3613 list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3617 notification[value="translation"] hbox[anonid="details"] {
3621 notification[value="translation"] button,
3622 notification[value="translation"] menulist {
3626 notification[value="translation"] menulist > .menulist-dropmarker {
3629 .translation-menupopup arrowscrollbox {
3633 .translation-attribution {
3635 -moz-box-align: end;
3639 .translation-attribution > label {
3643 .translation-attribution > image {
3647 .translation-welcome-panel {
3651 .translation-welcome-logo {
3654 list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3655 -moz-image-region: rect(0, 64px, 32px, 32px);
3658 .translation-welcome-content {
3659 margin-inline-start: 16px;
3662 .translation-welcome-headline {
3667 .translation-welcome-body {
3672 /* === END infobar.inc.css === */
3674 notification[value="translation"] {
3678 .translation-menupopup {
3679 -moz-appearance: none;
3682 /* Bookmarks roots menu-items */
3683 #subscribeToPageMenuitem:not([disabled]),
3684 #subscribeToPageMenupopup {
3685 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3688 #bookmarksToolbarFolderMenu,
3689 #BMB_bookmarksToolbar,
3690 #panelMenu_bookmarksToolbar {
3691 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3692 -moz-image-region: auto;
3695 #BMB_unsortedBookmarks,
3696 #panelMenu_unsortedBookmarks {
3697 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3698 -moz-image-region: auto;
3703 .statuspanel-label {
3706 background: #404000;
3707 border: 1px none #9C9CFF;
3708 border-top-style: solid;
3713 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3714 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3715 border-right-style: solid;
3716 border-top-right-radius: .3em;
3720 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3721 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3722 border-left-style: solid;
3723 border-top-left-radius: .3em;
3727 /* HACK to abolish devily color on main content */
3730 background-color: transparent !important;
3733 /* === BEGIN fullscreen/warning.inc.css === */
3735 html|*.pointerlockfswarning {
3736 align-items: center;
3737 background: rgba(0, 0, 0, 0.9);
3738 border: 2px solid #A09090;
3739 box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
3742 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3745 html|*.pointerlockfswarning::before {
3747 width: 24px; height: 24px;
3750 html|*.pointerlockfswarning[data-identity="verifiedIdentity"]::before,
3751 html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before {
3752 content: url("chrome://browser/skin/fullscreen/secure.svg");
3755 html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before {
3756 content: url("chrome://browser/skin/fullscreen/insecure.svg");
3759 html|*.pointerlockfswarning-domain-text,
3760 html|*.pointerlockfswarning-generic-text {
3762 font-weight: lighter;
3767 html|*.pointerlockfswarning-domain {
3772 html|*.pointerlockfswarning-exit-button {
3774 font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3776 font-weight: lighter;
3778 box-sizing: content-box;
3780 border-radius: 300px;
3782 background-color: #C09070;
3786 /* === END fullscreen/warning.inc.css === */
3788 /* === BEGIN ctrlTab.inc.css === */
3793 -moz-appearance: none;
3794 background: rgba(0%,0%,0%,.7);
3797 padding: 20px 10px 10px;
3801 .ctrlTab-favicon[src] {
3802 background-color: #000000;
3808 .ctrlTab-preview-inner > .tabPreview-canvas {
3809 /* box-shadow: 1px 1px 2px hsl(0,0%,12%);*/
3812 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3816 .ctrlTab-preview-inner {
3818 border: 2px solid transparent;
3819 border-radius: .5em;
3822 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner {
3823 margin: -10px -10px 0;
3826 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3827 background-color: #000000;
3830 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3832 background-color: #000000;
3834 border-color: #9C9CFF;
3841 /* === END ctrlTab.inc.css === */
3843 /* === BEGIN commandline.inc.css === */
3845 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
3846 We are copy/pasting variables from light-theme and dark-theme,
3847 since they aren't loaded in this context (within browser.css). */
3848 :root #developer-toolbar {
3849 --gcli-background-color: #000000; /* --theme-toolbar-background */
3850 --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
3851 --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
3852 --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
3853 --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
3854 --selection-background: #008484; /* --theme-selection-background */
3855 --selection-color: #000000; /* --theme-selection-color */
3856 --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */
3857 --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */
3860 /* Developer toolbar */
3862 #developer-toolbar {
3863 border-top: 3px solid var(--gcli-background-color);
3864 border-bottom: none;
3867 #developer-toolbar .toolbar-holder {
3868 background-color: #8050B0;
3872 #developer-toolbar .toolbar-holder {
3873 background-color: #8050B0;
3877 #developer-toolbar .toolbar-startcap,
3878 #developer-toolbar .toolbar-endcap{
3879 background-color: #6000CF;
3882 #developer-toolbar {
3884 min-height: 32px; */
3887 #developer-toolbar > toolbarbutton {
3889 background-color: transparent;
3895 .developer-toolbar-button > image {
3896 /* margin: auto 10px; */
3899 #developer-toolbar-toolbox-button > label {
3903 .developer-toolbar-button > .toolbarbutton-icon {
3908 #developer-toolbar-toolbox-button {
3909 list-style-image: url("chrome://devtools/skin/images/toggle-tools.png");
3910 -moz-image-region: rect(0px, 16px, 16px, 0px);
3913 #developer-toolbar-toolbox-button > label {
3917 #developer-toolbar-toolbox-button:hover,
3918 #developer-toolbar-toolbox-button:hover:active,
3919 #developer-toolbar-toolbox-button[checked=true] {
3920 -moz-image-region: rect(0px, 32px, 16px, 16px);
3923 @media (min-resolution: 2dppx) {
3924 #developer-toolbar-toolbox-button {
3925 list-style-image: url("chrome://devtools/skin/images/toggle-tools@2x.png");
3926 -moz-image-region: rect(0px, 32px, 32px, 0px);
3929 #developer-toolbar-toolbox-button:hover,
3930 #developer-toolbar-toolbox-button:hover:active,
3931 #developer-toolbar-toolbox-button[checked=true] {
3932 -moz-image-region: rect(0px, 64px, 32px, 32px);
3938 html|*#gcli-tooltip-frame,
3939 html|*#gcli-output-frame {
3942 background-color: transparent;
3948 background-color: transparent;
3951 .gclitoolbar-input-node,
3952 .gclitoolbar-complete-node {
3954 -moz-box-align: center;
3958 background-color: transparent;
3961 .gclitoolbar-input-node {
3962 /* line-height: 32px;
3963 outline-style: none; */
3964 background-repeat: no-repeat;
3965 background-color: var(--gcli-input-background);
3968 .gclitoolbar-input-node[focused="true"] {
3969 background-color: var(--gcli-input-focused-background);
3972 .gclitoolbar-input-node::before {
3974 display: inline-block;
3975 -moz-box-ordinal-group: 0;
3979 background-image: var(--command-line-image);
3982 .gclitoolbar-input-node[focused="true"]::before {
3983 background-image: var(--command-line-image-focus);
3986 .gclitoolbar-input-node:not([focused="true"]) {
3987 border-color: transparent;
3990 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
3991 background-color: var(--selection-background);
3992 color: var(--selection-color);
3995 .gclitoolbar-complete-node {
3997 background-color: transparent;
4000 pointer-events: none;
4003 .gcli-in-incomplete,
4007 .gcli-in-closebrace,
4014 .gcli-in-incomplete {
4015 border-bottom: 2px dotted #8050B0;
4019 border-bottom: 2px dotted #FF0000;
4030 .gcli-in-closebrace {
4034 /* === END commandline.inc.css === */
4036 /* === BEGIN responsivedesign.inc.css === */
4038 /* Responsive Mode */
4040 .browserContainer[responsivemode] {
4041 background-color: #221500;
4042 padding: 0 20px 20px 20px;
4045 .browserStack[responsivemode] {
4046 box-shadow: 0 0 7px #9C9CFF;
4049 .devtools-responsiveui-toolbar {
4050 background: transparent;
4051 /* text color is textColor from dark theme, since no theme is applied to
4052 * the responsive toolbar.
4058 border-bottom-width: 0;
4061 .devtools-responsiveui-textinput {
4062 /* -moz-appearance: none;
4065 border: 1px solid #111;
4072 .devtools-responsiveui-textinput[attention] {
4073 /* border-color: #38ace6;
4074 background: rgba(56,172,230,0.4);*/
4077 .devtools-responsiveui-menulist,
4078 .devtools-responsiveui-toolbarbutton {
4079 -moz-box-align: center;
4081 /* min-height: 22px;*/
4082 /* margin: 0 3px; */
4085 .devtools-responsiveui-menulist .menulist-editable-box {
4086 background-color: transparent;
4089 .devtools-responsiveui-menulist html|*.menulist-editable-input {
4094 .devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4095 /* background: hsla(212,7%,57%,.35);*/
4098 .devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4103 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4104 -moz-box-orient: horizontal;
4107 .devtools-responsiveui-menulist:-moz-focusring,
4108 .devtools-responsiveui-toolbarbutton:-moz-focusring {
4109 /* outline: 1px dotted hsla(210,30%,85%,0.7);
4110 outline-offset: -4px;*/
4113 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4117 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4118 /* border-color: hsla(210,8%,5%,.6);
4119 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4120 box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15); */
4123 .devtools-responsiveui-menulist[open=true],
4124 .devtools-responsiveui-toolbarbutton[open=true],
4125 .devtools-responsiveui-toolbarbutton[checked=true] {
4126 /* border-color: hsla(210,8%,5%,.6) !important;
4127 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4128 box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15); */
4131 .devtools-responsiveui-toolbarbutton[checked=true] {
4132 /* color: hsl(208,100%,60%); */
4135 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
4136 /* background-color: transparent !important;*/
4139 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4140 /* background-color: hsla(210,8%,5%,.2) !important;*/
4143 .devtools-responsiveui-menulist > .menulist-label-box {
4147 .devtools-responsiveui-menulist > .menulist-dropmarker {
4148 /* display: -moz-box;
4149 background-color: transparent;
4150 list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4151 -moz-box-align: center;
4156 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
4159 border-inline-end: 1px solid hsla(210,8%,5%,.45);
4160 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
4163 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
4164 /* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
4167 .devtools-responsiveui-toolbarbutton[type=menu-button] {
4168 /* padding: 0 1px;*/
4169 -moz-box-align: stretch;
4172 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
4173 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
4174 /* list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4175 -moz-box-align: center;
4179 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
4180 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
4184 .devtools-responsiveui-close {
4185 list-style-image: url("chrome://devtools/skin/close.svg");
4188 .devtools-responsiveui-close:hover {
4189 filter: url(chrome://devtools/skin/images/filters.svg#checked-icon-state);
4192 .devtools-responsiveui-close > image {
4196 .devtools-responsiveui-rotate {
4197 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate.png");
4198 -moz-image-region: rect(0px,16px,16px,0px);
4201 .devtools-responsiveui-rotate:hover {
4202 -moz-image-region: rect(0px,32px,16px,16px);
4205 @media (min-resolution: 2dppx) {
4206 .devtools-responsiveui-rotate {
4207 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate@2x.png");
4210 .devtools-responsiveui-rotate:hover {
4211 -moz-image-region: rect(0px,64px,32px,32px);
4215 .devtools-responsiveui-touch {
4216 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch.png");
4217 -moz-image-region: rect(0px,16px,16px,0px);
4220 .devtools-responsiveui-touch:hover,
4221 .devtools-responsiveui-touch[checked],
4222 .devtools-responsiveui-touch[checked]:hover {
4223 -moz-image-region: rect(0px,32px,16px,16px);
4226 @media (min-resolution: 2dppx) {
4227 .devtools-responsiveui-touch {
4228 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch@2x.png");
4229 -moz-image-region: rect(0px,32px,32px,0px);
4232 .devtools-responsiveui-touch:hover,
4233 .devtools-responsiveui-touch[checked],
4234 .devtools-responsiveui-touch[checked]:hover {
4235 -moz-image-region: rect(0px,64px,32px,32px);
4239 .devtools-responsiveui-screenshot {
4240 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot.png");
4241 -moz-image-region: rect(0px,16px,16px,0px);
4244 .devtools-responsiveui-screenshot:hover {
4245 -moz-image-region: rect(0px,32px,16px,16px);
4248 @media (min-resolution: 2dppx) {
4249 .devtools-responsiveui-screenshot {
4250 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot@2x.png");
4253 .devtools-responsiveui-screenshot:hover {
4254 -moz-image-region: rect(0px,64px,32px,32px);
4258 .devtools-responsiveui-resizebarV {
4262 transform: translate(12px, -12px);
4263 background-size: cover;
4264 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer.png");
4267 .devtools-responsiveui-resizebarH {
4271 transform: translate(-12px, 12px);
4272 background-size: cover;
4273 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer.png");
4276 .devtools-responsiveui-resizehandle {
4280 transform: translate(12px, 12px);
4281 background-size: cover;
4282 background-image: url("chrome://devtools/skin/images/responsive-se-resizer.png");
4285 /* FxOS custom mode with additional buttons and phone look'n feel */
4287 /* Hide devtools manual resizer */
4288 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
4289 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
4290 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
4294 /* Gives responsive mode a phone look'n feel */
4295 .browserStack[responsivemode].fxos-mode {
4296 padding: 60px 15px 0;
4298 border-radius: 25px / 20px;
4299 border-bottom-left-radius: 0;
4300 border-bottom-right-radius: 0;
4301 border: 1px solid #FFFFFF;
4302 border-bottom-width: 0;
4304 background-color: #353535;
4306 box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
4308 background-image: linear-gradient(to right, #111 11%, #333 56%);
4312 .devtools-responsiveui-hardware-buttons {
4313 -moz-appearance: none;
4316 border: 1px solid #FFFFFF;
4317 border-bottom-left-radius: 25px;
4318 border-bottom-right-radius: 25px;
4319 border-top-width: 0;
4321 box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
4323 background-image: linear-gradient(to right, #111 11%, #333 56%);
4326 .devtools-responsiveui-home-button {
4327 -moz-user-focus: ignore;
4330 list-style-image: url("chrome://devtools/skin/images/responsiveui-home.png");
4333 .devtools-responsiveui-sleep-button {
4334 -moz-user-focus: ignore;
4335 -moz-appearance: none;
4336 /* compensate browserStack top padding */
4344 border: 1px solid #444;
4345 border-top-right-radius: 12px;
4346 border-top-left-radius: 12px;
4347 border-bottom-color: transparent;
4349 background-image: linear-gradient(to top, #111 11%, #333 56%);
4352 .devtools-responsiveui-sleep-button:hover:active {
4353 background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
4356 .devtools-responsiveui-volume-buttons {
4360 .devtools-responsiveui-volume-up-button,
4361 .devtools-responsiveui-volume-down-button {
4362 -moz-user-focus: ignore;
4363 -moz-appearance: none;
4364 border: 1px solid red;
4368 border: 1px solid #444;
4369 border-right-color: transparent;
4371 background-image: linear-gradient(to right, #111 11%, #333 56%);
4374 .devtools-responsiveui-volume-up-button:hover:active,
4375 .devtools-responsiveui-volume-down-button:hover:active {
4376 background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
4379 .devtools-responsiveui-volume-up-button {
4380 border-top-left-radius: 12px;
4383 .devtools-responsiveui-volume-down-button {
4384 border-bottom-left-radius: 12px;
4387 @media (min-resolution: 2dppx) {
4388 .devtools-responsiveui-resizebarV {
4389 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer@2x.png");
4392 .devtools-responsiveui-resizebarH {
4393 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer@2x.png");
4396 .devtools-responsiveui-resizehandle {
4397 background-image: url("chrome://devtools/skin/images/responsive-se-resizer@2x.png");
4401 /* === END responsivedesign.inc.css === */
4403 /* === including indicator.css is done at the start of the file === */
4407 #developer-toolbar-toolbox-button[error-count]:before {
4411 background-color: #FF0000;
4413 margin-inline-end: 5px;
4416 /* === BEGIN plugin-doorhanger.inc.css === */
4419 * Plugin Doorhanger Styles
4422 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4423 padding: 6px 1px 2px;
4426 .click-to-play-plugins-notification-center-box {
4429 .plugin-popupnotification-centeritem:nth-child(odd) {
4430 /* background-color: rgba(0,0,0,0.1);*/
4433 .center-item-label {
4435 text-overflow: ellipsis;
4438 .center-item-warning-icon {
4439 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.svg");
4440 background-repeat: no-repeat;
4443 margin-inline-start: 6px;
4446 .click-to-play-plugins-notification-button-container {
4449 .click-to-play-popup-button {
4453 .click-to-play-plugins-notification-description-box {
4457 padding-bottom: 3px;
4460 .click-to-play-plugins-outer-description {
4464 .click-to-play-plugins-notification-link,
4469 .messageImage[value="plugin-hidden"] {
4470 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
4473 /* Keep any changes to this style in sync with pluginProblem.css */
4474 notification.pluginVulnerable {
4477 notification.pluginVulnerable .messageImage {
4478 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
4481 /* === END plugin-doorhanger.inc.css === */
4483 /* === BEGIN customizeMode.inc.css === */
4485 /* Customization mode */
4488 --drag-drop-transition-duration: .3s;
4491 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
4495 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
4496 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4497 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4502 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4503 pointer-events: none;
4506 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4507 #PanelUI-contents > .panel-customization-placeholder {
4508 -moz-outline-radius: 2.5px;
4509 outline: 1px dashed transparent;
4512 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4513 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4514 -moz-box-ordinal-group: 0;
4519 outline-offset: -2px;
4520 pointer-events: none;
4526 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4527 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4528 offset from the bottom effectively the same as other targets (-2px). */
4529 #main-window[customize-entered] #TabsToolbar.customization-target::before {
4533 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4534 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4535 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4536 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
4540 /* Most target outlines are shown on hover and drag over but the panel menu uses
4541 placeholders instead. */
4542 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4543 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4544 /* nav-bar and panel outlines are always shown */
4545 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4546 outline-color: currentColor;
4549 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4550 transition: outline-color 250ms linear;
4553 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
4554 transition: outline-color 250ms linear;
4555 outline-color: var(--panel-separator-color);
4558 #PanelUI-contents > .panel-customization-placeholder {
4560 outline-offset: -5px;
4563 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
4565 /* padding-left: 10px;
4566 padding-right: 10px;*/
4569 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
4573 #customization-container {
4574 background-color: #000000;
4578 #customization-palette,
4579 #customization-empty {
4580 padding: 0 15px 15px;
4583 #customization-header {
4585 line-height: 1.75em;
4588 margin: 25px 25px 12px;
4589 padding-bottom: 12px;
4590 border-bottom: 1px solid #A09090;
4593 #customization-panel-container {
4594 padding: 10px 10px 0px;
4597 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4598 #customization-footer {
4599 /*background-color: rgb(236,236,236);*/
4602 #customization-footer {
4603 border-top: 1px solid #9C9CFF;
4607 .customizationmode-button {
4611 .customizationmode-button:hover {
4614 .customizationmode-button > .box-inherit {
4617 .customizationmode-button > .button-icon {
4620 .customizationmode-button:not([type=menu]) > .button-text {
4623 .customizationmode-button > .button-menu-dropmarker {
4628 .customizationmode-button[checked] {
4629 background-color: #008484;
4632 .customizationmode-button[checked]:hover:not([disabled]),
4633 .customizationmode-button:hover:not([disabled]) {
4634 background-color: #FFCF00;
4637 .customizationmode-button[checked]:hover:active:not([disabled]),
4638 .customizationmode-button:hover:active:not([disabled]),
4639 .customizationmode-button[open] {
4640 background-color: #FF9F00;
4643 .customizationmode-button[disabled="true"] {
4646 .customizationmode-button > .box-inherit > .box-inherit > .button-icon,
4647 .customizationmode-button > .button-box > .button-icon {
4651 #customization-titlebar-visibility-button {
4652 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
4653 -moz-image-region: rect(0, 16px, 16px, 0);
4656 #customization-titlebar-visibility-button:hover {
4657 -moz-image-region: rect(16px, 16px, 32px, 0);
4660 #customization-titlebar-visibility-button > .button-box {
4662 padding-bottom: 1px;
4665 #customization-titlebar-visibility-button:hover:active > .button-box {
4670 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
4671 #customization-titlebar-visibility-button > .button-box > .button-text {
4672 /* Sadly, button.css thinks its margins are perfect for everyone. */
4673 margin-inline-start: 5px !important;
4676 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
4680 background-image: url("chrome://browser/skin/theme-switcher-icon.png");
4681 background-size: contain;
4684 #customization-titlebar-visibility-button > .button-box > .button-icon {
4685 vertical-align: middle;
4688 #customization-titlebar-visibility-button[checked] {
4689 -moz-image-region: rect(0, 32px, 16px, 16px);
4690 background-color: #008484;
4693 #customization-titlebar-visibility-button[checked]:hover {
4694 -moz-image-region: rect(16px, 32px, 32px, 16px);
4695 background-color: #FFCF00;
4698 #customization-titlebar-visibility-button[checked]:hover:active {
4699 background-color: #FF9F00;
4702 @media (min-resolution: 1.1dppx) {
4703 #customization-titlebar-visibility-button {
4704 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
4705 -moz-image-region: rect(0, 48px, 48px, 0);
4708 #customization-titlebar-visibility-button:hover {
4709 -moz-image-region: rect(48px, 48px, 96px, 0);
4712 #customization-titlebar-visibility-button[checked] {
4713 -moz-image-region: rect(0, 96px, 48px, 48px);
4716 #customization-titlebar-visibility-button[checked]:hover {
4717 -moz-image-region: rect(48px, 96px, 96px, 48px);
4721 #main-window[customize-entered] #customization-panel-container {
4722 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4723 background-position: left top;
4724 background-repeat: repeat;
4725 background-size: auto;
4726 background-attachment: fixed;
4729 toolbarpaletteitem[place="toolbar"] {
4730 transition: border-width 250ms ease-in-out;
4733 toolbarpaletteitem[mousedown] {
4734 outline: 1px solid #008484;
4735 cursor: -moz-grabbing;
4739 .panel-customization-placeholder,
4740 toolbarpaletteitem[place="palette"],
4741 toolbarpaletteitem[place="panel"] {
4742 transition: transform var(--drag-drop-transition-duration) ease-in-out;
4745 #customization-palette {
4746 transition: opacity .3s ease-in-out;
4750 #customization-palette[showing="true"] {
4754 toolbarpaletteitem toolbarbutton[disabled] {
4755 /* color: inherit !important;*/
4758 toolbarpaletteitem[notransition].panel-customization-placeholder,
4759 toolbarpaletteitem[notransition][place="toolbar"],
4760 toolbarpaletteitem[notransition][place="palette"],
4761 toolbarpaletteitem[notransition][place="panel"] {
4765 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
4766 toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
4767 toolbarpaletteitem > toolbaritem.panel-wide-item,
4768 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
4769 transition: transform var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important;
4772 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
4773 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
4774 transform: scale(1.3);
4777 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
4778 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
4779 transform: scale(1.1);
4782 /* Override the toolkit styling for items being dragged over. */
4783 toolbarpaletteitem[place="toolbar"] {
4784 border-left-width: 0;
4785 border-right-width: 0;
4790 #customization-palette:not([hidden]) {
4791 margin-bottom: 25px;
4794 toolbarpaletteitem[place="palette"]:-moz-focusring,
4795 toolbarpaletteitem[place="panel"]:-moz-focusring,
4796 toolbarpaletteitem[place="toolbar"]:-moz-focusring {
4800 toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring,
4801 toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring,
4802 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4803 /* Delay adding the focusring back until after the transform transition completes. */
4804 transition: outline-width .01s linear var(--drag-drop-transition-duration);
4805 outline: 1px dotted;
4806 -moz-outline-radius: 2.5px;
4809 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4810 outline-offset: -5px;
4813 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4814 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
4815 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
4816 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
4820 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4821 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
4831 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
4832 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
4836 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
4837 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
4840 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
4841 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
4845 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
4846 -moz-box-pack: center;
4850 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
4851 margin-inline-end: 5px;
4854 #customization-palette > toolbarpaletteitem > label {
4860 #customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
4861 -moz-box-orient: vertical;
4862 /* Make the panel padding uniform across all platforms due to the
4863 styling of the section headers and footer. */
4867 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
4872 .customization-lwtheme-menu-theme {
4873 -moz-appearance: none;
4876 padding-inline-end: 5px;
4878 padding-inline-start: 0;
4881 .customization-lwtheme-menu-theme[defaulttheme] {
4882 list-style-image: url(chrome://browser/skin/Fxtheme-switcher-icon.png);
4885 .customization-lwtheme-menu-theme[active="true"] {
4886 background-color: #008484;
4889 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
4893 .customization-lwtheme-menu-theme > .toolbarbutton-text {
4897 #customization-lwtheme-menu-header,
4898 #customization-lwtheme-menu-recommended {
4903 #customization-lwtheme-menu-header,
4904 #customization-lwtheme-menu-recommended,
4905 #customization-lwtheme-menu-footer {
4906 background-color: #A09090;
4908 margin-right: -10px;
4912 #customization-lwtheme-menu-header {
4914 border-top-right-radius: 3px;
4915 border-top-left-radius: 3px;
4918 #customization-lwtheme-menu-recommended {
4921 #customization-lwtheme-menu-footer {
4922 margin-bottom: -10px;
4923 border-bottom-right-radius: 3px;
4924 border-bottom-left-radius: 3px;
4927 .customization-lwtheme-menu-footeritem {
4928 -moz-appearance: none;
4930 background-color: #C09070;
4932 border: 1px solid transparent;
4938 .customization-lwtheme-menu-footeritem:hover {
4939 background-color: #FFCF00;
4942 .customization-lwtheme-menu-footeritem:first-child {
4945 /* === END customizeMode.inc.css === */
4947 /* === BEGIN customizeTip.inc.css === */
4949 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
4956 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
4957 border: 1px solid #9C9CFF;
4961 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
4962 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
4965 .customization-tipPanel-infoBox {
4966 margin: 20px 25px 25px;
4968 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
4969 background-repeat: no-repeat;
4972 .customization-tipPanel-content {
4978 .customization-tipPanel-em {
4983 .customization-tipPanel-contentImage {
4985 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
4993 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
4994 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
4997 .customization-tipPanel-link {
4998 -moz-appearance: none;
4999 background: transparent;
5007 .customization-tipPanel-link > .button-box > .button-text {
5008 margin: 0 !important;
5011 .customization-tipPanel-closeBox > .close-icon {
5012 -moz-appearance: none;
5014 margin-inline-end: -25px;
5017 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
5018 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5019 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
5022 /* === END customizeTip.inc.css === */
5025 * This next rule is a hack to disable subpixel anti-aliasing on all
5026 * labels during the customize mode transition. Subpixel anti-aliasing
5027 * on Windows with Direct2D layers acceleration is particularly slow to
5028 * paint, so this hack is how we sidestep that performance bottleneck.
5030 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
5031 transform: perspective(0.01px);
5034 #main-window[customize-entered] > #tab-view-deck {
5035 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5036 background-attachment: fixed;
5039 #main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
5040 background-repeat: no-repeat;
5041 background-position: right top;
5042 background-attachment: fixed;
5043 /* The image will get set from CustomizeMode.jsm */
5044 background-image: none;
5045 background-color: transparent;
5048 #main-window[customization-lwtheme]:-moz-lwtheme {
5049 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5050 background-repeat: repeat;
5051 background-attachment: fixed;
5052 background-position: left top;
5055 #main-window[customize-entered] #browser-bottombox,
5056 #main-window[customize-entered] #customization-container {
5057 border-left: 1px solid #9C9CFF;
5058 border-right: 1px solid #9C9CFF;
5059 background-clip: padding-box;
5062 #main-window[customize-entered] #browser-bottombox {
5063 border-bottom: 1px solid #9C9CFF;
5066 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
5070 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5074 /* End customization mode */
5076 /* Private browsing indicators */
5079 * Currently, we have two places where we put private browsing indicators on
5080 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5081 * When tabsintitlebar is disabled, we draw the indicator at the end of the
5082 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5083 * want the bottom border of the image to line up with the bottom of the window
5084 * caption buttons. That's why there's so much special-casing going on in here.
5086 .private-browsing-indicator {
5088 pointer-events: none;
5091 #private-browsing-indicator-titlebar {
5096 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5100 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5104 #TabsToolbar > .private-browsing-indicator {
5105 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5106 margin-inline-start: 4px;
5110 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5111 * mode, since the tabstrip "mimics" the titlebar in that case with its own
5112 * min/max/close window buttons.
5114 #private-browsing-indicator-titlebar > .private-browsing-indicator,
5115 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5116 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5117 margin-inline-end: 4px;
5123 /* This one is for Linux */
5124 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5125 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5129 /* End private browsing indicators */
5131 /* === BEGIN UITour.inc.css === */
5135 #UITourHighlightContainer {
5136 -moz-appearance: none;
5138 background-color: transparent;
5139 /* This is a buffer to compensate for the movement in the "wobble" effect,
5140 and for the box-shadow of #UITourHighlight. */
5145 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5146 border-radius: 40px;
5147 border: 1px solid #9C9CFF;
5148 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5149 on Linux without an X compositor where opacity is either 0 or 1. */
5150 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5155 #UITourTooltipBody {
5156 -moz-box-align: start;
5159 #UITourTooltipTitleContainer {
5160 -moz-box-align: start;
5161 margin-bottom: 10px;
5164 #UITourTooltipIcon {
5167 margin-inline-end: 10px;
5170 #UITourTooltipTitle,
5171 #UITourTooltipDescription {
5175 #UITourTooltipTitle {
5181 #UITourTooltipDescription {
5182 margin-inline-start: 0;
5183 margin-inline-end: 0;
5185 line-height: 1.8rem;
5186 margin-bottom: 0; /* Override global.css */
5189 #UITourTooltipClose {
5191 -moz-appearance: none;
5193 background-color: transparent;
5195 margin-inline-start: 4px;
5199 #UITourTooltipClose > .toolbarbutton-text {
5203 #UITourTooltipButtons {
5205 background-color: rgba(0,0,0,.2);
5206 border-top: 1px solid rgba(0,0,0,.4);
5207 margin: 10px -16px -16px;
5211 #UITourTooltipButtons > label,
5212 #UITourTooltipButtons > button {
5216 #UITourTooltipButtons > label:first-child,
5217 #UITourTooltipButtons > button:first-child {
5218 margin-inline-start: 0;
5221 #UITourTooltipButtons > label:last-child,
5222 #UITourTooltipButtons > button:last-child {
5223 margin-inline-end: 0;
5226 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
5229 margin-inline-end: 5px;
5232 #UITourTooltipButtons > label,
5233 #UITourTooltipButtons > button .button-text {
5237 #UITourTooltipButtons > button:not(.button-link) {
5238 -moz-appearance: none;
5239 background-color: #C09070;
5240 border-radius: 3000px;
5244 transition-property: background-color, color;
5245 transition-duration: 150ms;
5248 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5249 background-color: #FFCF00;
5253 #UITourTooltipButtons > label,
5254 #UITourTooltipButtons > button.button-link {
5255 -moz-appearance: none;
5256 background: transparent;
5259 color: rgba(0,0,0,0.35);
5261 padding-right: 10px;
5264 #UITourTooltipButtons > button.button-link:hover {
5268 /* The primary button gets the same color as the customize button. */
5269 #UITourTooltipButtons > button.button-primary {
5270 background-color: #A06060; /* LCARS default button background color */
5273 padding-right: 30px;
5276 #UITourTooltipButtons > button.button-primary:not(:active):hover {
5277 background-color: #FFCF00;
5281 /* Notification overrides for Heartbeat UI */
5283 notification.heartbeat {
5284 background-color: #A09090;
5288 @keyframes pulse-onshow {
5291 transform: scale(1.0);
5295 transform: scale(1.1);
5298 transform: scale(1.0);
5301 transform: scale(1.1);
5304 transform: scale(1.0);
5308 @keyframes pulse-twice {
5310 transform: scale(1.1);
5313 transform: scale(0.8);
5316 transform: scale(1);
5320 .messageText.heartbeat {
5322 /* text-shadow: none; */
5323 margin-inline-start: 0px;
5326 .messageImage.heartbeat {
5329 margin-inline-start: 8px;
5330 margin-inline-end: 8px;
5333 .messageImage.heartbeat.pulse-onshow {
5334 animation-name: pulse-onshow;
5335 animation-duration: 1.5s;
5336 animation-iteration-count: 1;
5337 animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
5340 .messageImage.heartbeat.pulse-twice {
5341 animation-name: pulse-twice;
5342 animation-duration: 1s;
5343 animation-iteration-count: 2;
5344 animation-timing-function: linear;
5347 /* Learn More link styles */
5348 .heartbeat > .text-link {
5350 margin-inline-start: 0px;
5353 .heartbeat > .text-link:hover {
5355 text-decoration: none;
5358 .heartbeat > .text-link:hover:active {
5362 /* Heartbeat UI Rating Star Classes */
5363 .heartbeat > #star-rating-container {
5365 /* margin-bottom: 4px;*/
5368 .heartbeat > #star-rating-container > #star5 {
5369 -moz-box-ordinal-group: 5;
5372 .heartbeat > #star-rating-container > #star4 {
5373 -moz-box-ordinal-group: 4;
5376 .heartbeat > #star-rating-container > #star3 {
5377 -moz-box-ordinal-group: 3;
5380 .heartbeat > #star-rating-container > #star2 {
5381 -moz-box-ordinal-group: 2;
5384 .heartbeat > #star-rating-container > .star-x {
5385 background: url("chrome://browser/skin/heartbeat-star-off.svg");
5387 /* Overrides the margin-inline-end for all platforms defined in the .plain class */
5388 margin-inline-end: 4px !important;
5393 .heartbeat > #star-rating-container > .star-x:hover,
5394 .heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
5395 background: url("chrome://browser/skin/heartbeat-star-lit.svg");
5398 /* === END UITour.inc.css === */
5400 #UITourTooltipButtons {
5402 * Override the --arrowpanel-padding so the background extends
5403 * to the sides and bottom of the panel.
5406 margin-right: -10px;
5407 margin-bottom: -10px;
5410 /* === BEGIN contextmenu.inc.css === */
5412 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
5415 #context-navigation > .menuitem-iconic {
5417 -moz-box-pack: center;
5418 -moz-box-align: center;
5421 #context-navigation > .menuitem-iconic[disabled="true"] {
5422 background-color: transparent;
5425 #context-navigation > .menuitem-iconic > .menu-iconic-left {
5426 -moz-appearance: none;
5429 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
5433 filter: url(chrome://browser/skin/filters.svg#fill);
5438 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back");
5442 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward");
5446 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload");
5450 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop");
5453 #context-bookmarkpage {
5454 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark");
5457 #context-bookmarkpage[starred=true] {
5458 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked");
5461 #context-back:-moz-locale-dir(rtl),
5462 #context-forward:-moz-locale-dir(rtl),
5463 #context-reload:-moz-locale-dir(rtl) {
5464 transform: scaleX(-1);
5467 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
5468 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
5474 #context-media-eme-learnmore {
5475 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5478 #context-media-eme-learnmore {
5479 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5482 /* === END contextmenu.inc.css === */
5484 #context-navigation {
5487 #context-sep-navigation {
5488 /* margin-top: -4px; */
5491 .browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {
5496 .webextension-popup-browser {
5497 border-radius: inherit;
5500 .contentSelectDropdown-ingroup > .menu-iconic-text {
5501 padding-inline-start: 20px;
5504 #ContentSelectDropdown > menupopup {
5505 background-color: #000000;
5506 -moz-border-top-colors: #A09090;
5507 -moz-border-right-colors: #A09090;
5508 -moz-border-bottom-colors: #A09090;
5509 -moz-border-left-colors: #A09090;
5512 #ContentSelectDropdown > menupopup > menucaption,
5513 #ContentSelectDropdown > menupopup > menuitem {
5517 #ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text,
5518 #ContentSelectDropdown > menupopup > menuitem > .menu-iconic-text {
5519 font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
5522 * Remove the extra vertical padding set by menu.css since
5523 * the menuitem itself will include enough padding.
5526 padding-bottom: 0px;
5529 #ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text {
5533 #ContentSelectDropdown > menupopup > menuitem[_moz-menuactive="true"][disabled="true"] {
5535 background-color: unset;
5538 #ContentSelectDropdown > menupopup > menucaption {
5539 background-color: buttonface;
5542 #ContentSelectDropdown > menupopup > menucaption[disabled="true"] {
5546 #ContentSelectDropdown > .isOpenedViaTouch > menucaption,
5547 #ContentSelectDropdown > .isOpenedViaTouch > menuitem {
5549 padding-bottom: 11px;