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://global/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://global/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):not(#new-tab-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):not(#new-tab-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 {
1754 /* The splitter width should equal the location and search bars' combined
1755 neighboring margin and border width. */
1760 background: transparent;
1764 border-inline-end: 1px solid #9C9CFF;
1765 margin-inline-end: 3px;
1768 margin-inline-start: 0;
1772 /* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
1774 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
1775 border-bottom: 1px solid var(--panel-separator-color);
1776 background-color: #000000;
1778 padding-inline-start: 44px;
1779 padding-inline-end: 6px;
1780 background-image: url("chrome://browser/skin/info.svg");
1781 background-clip: padding-box;
1782 background-position: 20px center;
1783 background-repeat: no-repeat;
1784 background-size: 16px 16px;
1787 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
1788 background-position: right 20px center;
1791 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
1796 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
1797 margin-inline-start: 0;
1800 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
1801 -moz-appearance: none;
1806 margin-inline-start: 10px;
1809 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
1812 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
1815 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
1818 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
1821 /* === END urlbarSearchSuggestionsNotification.inc.css === */
1824 min-width: calc(54px + 11ch);
1829 #identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
1830 background-color: var(--identity-box-verified-background-color);
1833 #identity-box:-moz-focusring {
1834 outline: 1px dotted;
1835 outline-offset: -1px;
1838 #identity-box.verifiedDomain:-moz-focusring,
1839 #identity-box.verifiedIdentity:-moz-focusring {
1840 outline-color: #000000;
1843 /* Location bar dropmarker */
1845 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
1846 background-color: transparent;
1849 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
1850 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
1851 #urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1854 transition: opacity 0.15s ease;
1857 #urlbar-wrapper[switchingtabs] > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1861 #navigator-toolbox:not(:hover) #nav-bar:not([customizing="true"]) #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker {
1865 .urlbar-history-dropmarker:hover {
1868 .urlbar-history-dropmarker:hover:active,
1869 .urlbar-history-dropmarker[open="true"] {
1872 /* page proxy icon */
1873 /* === BEGIN identity-block.inc.css === */
1875 /* === BEGIN identity-block/icons.inc.css === */
1878 list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
1881 #identity-box:hover > #identity-icon:not(.no-hover),
1882 #identity-box[open=true] > #identity-icon {
1883 list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
1886 #identity-box.grantedPermissions > #identity-icon {
1887 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice);
1890 #identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover),
1891 #identity-box.grantedPermissions[open=true] > #identity-icon {
1892 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover);
1895 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
1896 list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
1899 #tracking-protection-icon {
1900 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled);
1903 #tracking-protection-icon[state="loaded-tracking-content"] {
1904 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled);
1908 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
1909 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon,
1910 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
1911 list-style-image: url(chrome://browser/skin/connection-secure.svg);
1912 visibility: visible;
1915 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
1916 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
1917 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon,
1918 #urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
1919 list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon);
1920 visibility: visible;
1923 #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
1924 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
1925 list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
1926 visibility: visible;
1929 /* === END identity-block/icons.inc.css === */
1936 /* The padding-left and padding-right transitions handle the delayed hiding of
1937 the forward button when hovered. */
1938 transition: background-color 150ms ease, padding-left, padding-right;
1941 #identity-box:-moz-locale-dir(ltr) {
1942 border-top-right-radius: 0;
1943 border-bottom-right-radius: 0;
1946 #identity-box:-moz-locale-dir(rtl) {
1947 border-top-left-radius: 0;
1948 border-bottom-left-radius: 0;
1951 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1952 border-inline-end: 1px solid #008484;
1955 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels {
1959 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
1960 border-inline-end: 1px solid #9C9CFF;
1963 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon-labels {
1968 #identity-icon-labels:-moz-locale-dir(ltr) {
1972 #identity-icon-labels:-moz-locale-dir(rtl) {
1976 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
1977 /* border-radius: 0;
1978 padding-inline-start: 2px; */
1979 padding-inline-end: 2px;
1980 margin-inline-end: 1px;
1983 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #identity-box {
1984 padding-inline-start: 2px;
1987 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #identity-box {
1988 /* Forward button hiding is delayed when hovered, so we should use the same
1989 delay for the identity box. We handle both horizontal paddings (for LTR and
1990 RTL), the latter two delays here are for padding-left and padding-right. */
1991 transition-delay: 0s, 100s, 100s;
1994 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > #identity-box {
1995 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
1996 padding-inline-start: 2.01px;
1999 /* MAIN IDENTITY ICON */
2006 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2010 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2011 -moz-image-region: inherit;
2012 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2017 #urlbar[actiontype="extension"] > #identity-box > #identity-icon {
2018 -moz-image-region: inherit;
2019 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
2029 margin-inline-start: -16px;
2034 #identity-box[sharing="camera"] > #sharing-icon {
2035 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
2038 #identity-box[sharing="microphone"] > #sharing-icon {
2039 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
2042 #identity-box[sharing="screen"] > #sharing-icon {
2043 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
2047 #identity-box[sharing] > #sharing-icon {
2049 animation-delay: -1.5s;
2052 #identity-box[sharing] > #identity-icon,
2054 animation: 3s linear identity-box-sharing-icon-pulse infinite;
2057 @keyframes identity-box-sharing-icon-pulse {
2058 /* This should remain identical to tab-sharing-icon-pulse in tabs.inc.css */
2059 0%, 16.66%, 83.33%, 100% {
2067 /* TRACKING PROTECTION ICON */
2069 #tracking-protection-icon {
2072 margin-inline-start: 2px;
2073 margin-inline-end: 0;
2076 #tracking-protection-icon[animate] {
2077 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2080 #tracking-protection-icon:not([state]) {
2081 margin-inline-end: -18px;
2082 pointer-events: none;
2084 /* Only animate the shield in, when it disappears hide it immediately. */
2088 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2089 visibility: collapse;
2092 /* CONNECTION ICON */
2097 margin-inline-start: 2px;
2098 visibility: collapse;
2101 /* === END identity-block.inc.css === */
2103 #page-proxy-favicon {
2104 -moz-image-region: rect(0, 16px, 16px, 0);
2107 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2108 /* margin-inline-end: 1px;*/
2111 #identity-box:hover > #page-proxy-favicon {
2112 -moz-image-region: rect(0, 32px, 16px, 16px);
2115 #identity-box:hover:active > #page-proxy-favicon,
2116 #identity-box[open=true] > #page-proxy-favicon {
2117 -moz-image-region: rect(0, 48px, 16px, 32px);
2120 #identity-box:hover {
2121 background-color: #FFCF00;
2125 #identity-box:hover:active,
2126 #identity-box[open=true] {
2127 background-color: #FF9F00;
2131 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2132 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2133 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2134 background-color: #A09090;
2138 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover > #identity-icon-labels,
2139 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active > #identity-icon-labels,
2140 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] > #identity-icon-labels {
2144 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2145 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2146 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2147 background-color: #008484;
2151 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover > #identity-icon-labels,
2152 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active > #identity-icon-labels,
2153 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] > #identity-icon-labels {
2157 #identity-box:hover > image,
2158 #identity-box:hover:active > image,
2159 #identity-box[open=true] > image {
2160 filter: url(chrome://global/skin/filters.svg#active-icon-state);
2165 /* === BEGIN autocomplete.inc.css === */
2167 #PopupAutoComplete > richlistbox > richlistitem {
2172 padding: 0px 1px 0px 1px;
2175 #PopupAutoComplete > richlistbox > richlistitem > .ac-site-icon {
2176 margin-inline-start: 4px;
2177 margin-inline-end: 0;
2180 #PopupAutoComplete > richlistbox > richlistitem > .ac-title {
2182 margin-inline-start: 4px;
2185 #PopupAutoComplete > richlistbox {
2189 /* Login form autocompletion */
2190 #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon {
2192 list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
2195 #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon[selected] {
2196 list-style-image: url(chrome://browser/skin/notification-icons.svg#login-highlighted);
2199 /* Insecure field warning */
2200 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] {
2201 background-color: var(--arrowpanel-dimmed);
2202 border-bottom: 1px solid var(--panel-separator-color);
2203 padding-bottom: 4px;
2207 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] {
2208 background-color: var(--arrowpanel-dimmed-further);
2212 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title {
2217 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] > .ac-title {
2221 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-site-icon {
2222 list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
2225 /* === END autocomplete.inc.css === */
2227 #PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
2228 border-top: 1px solid #A09090;
2231 #treecolAutoCompleteImage {
2236 .autocomplete-richlistbox {
2240 .autocomplete-richlistitem {
2245 border: 1px solid transparent;
2248 .autocomplete-richlistitem[selected=true] {
2249 background-color: hsl(210, 80%, 52%);
2254 /* color: hsl(0, 0%, 0%);*/
2262 background-color: hsl(216, 0%, 88%);
2263 color: hsl(0, 0%, 0%);
2265 border: 1px solid transparent;
2277 /* color: hsl(0, 0%, 50%);*/
2288 .ac-title[selected=true],
2289 .ac-separator[selected],
2290 .ac-url[selected=true],
2291 .ac-action[selected=true] {
2295 .ac-tags-text[selected] > html|span.ac-tag {
2296 background-color: #A09090;
2300 html|span.ac-emphasize-text-title,
2301 html|span.ac-emphasize-text-tag,
2302 html|span.ac-emphasize-text-url {
2306 .ac-type-icon[type=bookmark] {
2307 list-style-image: url("chrome://browser/skin/urlbar-star.svg#star");
2310 .ac-type-icon[type=bookmark][selected][current] {
2311 /* list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted");*/
2314 .ac-result-type-bookmark {
2315 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2316 -moz-image-region: rect(0px 16px 16px 0px);
2321 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark {
2322 /* -moz-image-region: rect(0px 48px 16px 32px);*/
2325 .ac-type-icon[type=keyword],
2326 .ac-site-icon[type=searchengine] {
2327 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2330 .ac-type-icon[type=keyword][selected],
2331 .ac-site-icon[type=searchengine][selected] {
2332 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2335 .ac-result-type-tag {
2336 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2341 .ac-type-icon[type=switchtab],
2342 .ac-type-icon[type=remotetab] {
2343 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab");
2346 .ac-type-icon[type=switchtab][selected],
2347 .ac-type-icon[type=remotetab][selected] {
2348 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted");
2351 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2352 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2358 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2359 border-top: 1px solid #9C9CFF;
2362 /* combined go/reload/stop button in location bar */
2365 #urlbar-reload-button,
2366 #urlbar-stop-button {
2368 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2369 /* margin: 0 9px; */
2370 margin-inline-start: 0px;
2371 border-inline-start: 1px solid var(--urlbar-separator-color);
2372 border-image: linear-gradient(transparent 15%,
2373 var(--urlbar-separator-color) 15%,
2374 var(--urlbar-separator-color) 85%,
2376 border-image-slice: 1;
2379 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2380 border-top-left-radius: 0px;
2381 border-bottom-left-radius: 0px;
2384 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2385 border-top-right-radius: 0px;
2386 border-bottom-right-radius: 0px;
2389 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2390 #urlbar-reload-button:not(:hover) {
2391 border-inline-start-style: none;
2392 padding-inline-start: 3px;
2395 #urlbar-reload-button {
2396 -moz-image-region: rect(0px, 14px, 14px, 0px);
2399 #urlbar-reload-button[disabled=true] {
2400 -moz-image-region: rect(28px, 14px, 42px, 0px);
2403 #urlbar-reload-button:not([disabled=true]):hover {
2404 -moz-image-region: rect(14px, 14px, 28px, 0px);
2407 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2408 transform: scaleX(-1);
2412 -moz-image-region: rect(0, 42px, 14px, 28px);
2415 #urlbar-go-button:hover {
2416 -moz-image-region: rect(14px, 42px, 28px, 28px);
2419 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2420 transform: scaleX(-1);
2423 #urlbar-stop-button {
2424 -moz-image-region: rect(0px, 28px, 14px, 14px);
2427 #urlbar-stop-button:hover {
2428 -moz-image-region: rect(14px, 28px, 28px, 14px);
2431 @media (min-resolution: 1.1dppx) {
2433 #urlbar-reload-button,
2434 #urlbar-stop-button {
2435 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2438 #urlbar-go-button > .toolbarbutton-icon,
2439 #urlbar-reload-button > .toolbarbutton-icon,
2440 #urlbar-stop-button > .toolbarbutton-icon {
2445 -moz-image-region: rect(0, 84px, 28px, 56px);
2448 #urlbar-go-button:hover {
2449 -moz-image-region: rect(28px, 84px, 56px, 56px);
2452 #urlbar-go-button:hover:active {
2453 -moz-image-region: rect(56px, 84px, 84px, 56px);
2456 #urlbar-reload-button {
2457 -moz-image-region: rect(0, 28px, 28px, 0);
2460 #urlbar-reload-button:not([disabled]):hover {
2461 -moz-image-region: rect(28px, 28px, 56px, 0);
2464 #urlbar-reload-button:not([disabled]):hover:active {
2465 -moz-image-region: rect(56px, 28px, 84px, 0);
2468 #urlbar-stop-button {
2469 -moz-image-region: rect(0, 56px, 28px, 28px);
2472 #urlbar-stop-button:not([disabled]):hover {
2473 -moz-image-region: rect(28px, 56px, 56px, 28px);
2476 #urlbar-stop-button:hover:active {
2477 -moz-image-region: rect(56px, 56px, 84px, 28px);
2481 /* popup blocker button */
2483 #page-report-button {
2484 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2485 -moz-image-region: rect(0, 16px, 16px, 0);
2488 #page-report-button:hover ,
2489 #page-report-button:hover:active,
2490 #page-report-button[open="true"] {
2491 -moz-image-region: rect(0, 32px, 16px, 16px);
2494 /* Reader mode button */
2496 #reader-mode-button {
2497 list-style-image: url("chrome://browser/skin/readerMode.svg");
2498 -moz-image-region: rect(0, 16px, 16px, 0);
2501 #reader-mode-button:hover,
2502 #reader-mode-button[readeractive]:hover {
2503 -moz-image-region: rect(0, 32px, 16px, 16px);
2506 #reader-mode-button:hover:active,
2507 #reader-mode-button[readeractive] {
2508 -moz-image-region: rect(0, 48px, 16px, 32px);
2511 /* social share panel */
2513 /* === BEGIN social.inc.css === */
2515 #manage-share-providers {
2516 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
2517 -moz-image-region: rect(0, 468px, 18px, 450px);
2520 #manage-share-providers > .toolbarbutton-icon {
2525 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
2528 /* fixup corners for share panel */
2529 .social-panel > .social-panel-frame {
2530 border-radius: inherit;
2533 /* === END social.inc.css === */
2535 .social-panel-frame {
2536 border-radius: inherit;
2539 .social-share-frame {
2546 background-color: white;
2547 background-repeat: no-repeat;
2548 background-position: center center;
2550 #share-container[loading] {
2551 background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2553 #share-container > browser {
2554 transition: opacity 150ms ease-in-out;
2557 #share-container[loading] > browser {
2561 .social-share-toolbar {
2562 border-bottom: 1px solid #9C9CFF;
2566 #social-share-provider-buttons {
2571 .share-provider-button {
2576 .share-provider-button > .toolbarbutton-text {
2579 .share-provider-button > .toolbarbutton-icon {
2585 #social-share-panel {
2591 .social-share-frame {
2592 border-top-left-radius: 0;
2593 border-bottom-left-radius: inherit;
2594 border-top-right-radius: 0;
2595 border-bottom-right-radius: inherit;
2598 #social-share-panel > .social-share-toolbar {
2599 border-top-left-radius: inherit;
2600 border-top-right-radius: inherit;
2603 #social-share-provider-buttons {
2604 border-top-left-radius: inherit;
2605 border-top-right-radius: inherit;
2608 /* bookmarks menu-button */
2610 #bookmarks-menu-button.bookmark-item {
2611 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2612 -moz-image-region: rect(0px 16px 16px 0px);
2615 #bookmarks-menu-button.bookmark-item[starred] {
2616 -moz-image-region: rect(0px 32px 16px 16px);
2619 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2621 padding-bottom: 2px;
2624 #BMB_bookmarksPopup[side="top"],
2625 #BMB_bookmarksPopup[side="bottom"] {
2627 margin-right: -20px;
2630 #BMB_bookmarksPopup[side="left"],
2631 #BMB_bookmarksPopup[side="right"] {
2633 margin-bottom: -20px;
2636 /* bookmarking panel */
2638 #editBookmarkPanelStarIcon {
2639 list-style-image: url("chrome://browser/skin/places/starred48.png");
2644 #editBookmarkPanelStarIcon[unstarred] {
2645 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2648 #editBookmarkPanelTitle {
2652 #editBookmarkPanelHeader,
2653 #editBookmarkPanelContent {
2654 margin-bottom: .5em;
2657 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2658 #editBMPanel_folderTree {
2662 /* ::::: content area ::::: */
2665 background-color: #9C9CFF;
2670 background-color: #000000;
2674 margin-inline-start: 0;
2683 padding-inline-start: 0px;
2686 #sidebar-header > .close-icon {
2687 /* padding: 4px 2px;
2690 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2693 #sidebar-header > .close-icon:hover,
2694 #sidebar-header > .close-icon:hover:active {
2695 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2698 #sidebar-splitter:-moz-locale-dir(ltr),
2699 #sidebar:-moz-locale-dir(ltr) {
2700 border-radius: 0 5px 0 0;
2703 #sidebar-splitter:-moz-locale-dir(rtl),
2704 #sidebar:-moz-locale-dir(rtl) {
2705 border-radius: 5px 0 0 0;
2708 .browserContainer > findbar {
2710 background-color: -moz-dialog;
2711 color: -moz-DialogText;
2720 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2723 #TabsToolbar .toolbar-holder {
2724 background-color: #000000; /* correct effect of being an actual toolbar */
2727 #main-window[disablechrome] #TabsToolbar,
2728 #TabsToolbar[tabsontop="false"] {
2729 border-bottom: 1px solid #008484;
2732 /* === BEGIN tabs.inc.css === */
2735 /* --tab-toolbar-navbar-overlap: 1px; */
2736 /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2737 /* --tab-min-height: 31px; */
2740 /* --tab-stroke-background-size: auto 100%; */
2744 .tabs-newtab-button,
2745 #TabsToolbar > #new-tab-button {
2750 padding: 1px 4px 2px;
2753 .tabbrowser-tab:first-of-type {
2754 margin-inline-start: 2px;
2757 .tabs-newtab-button,
2758 #TabsToolbar > #new-tab-button,
2759 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2760 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2761 border-radius: 8px 8px 0px 0px;
2762 margin-inline-start: 0;
2765 .tabs-newtab-button:not(:hover),
2766 #TabsToolbar > #new-tab-button:not(:hover),
2767 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2768 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2769 background-color: #C09070;
2772 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2773 .tabbrowser-tab[visuallyselected=true] {
2774 /* position: relative;
2778 .tab-background-middle {
2784 .tab-content[pinned] {
2789 .tab-sharing-icon-overlay,
2795 .tab-sharing-icon-overlay,
2799 margin-inline-end: 3px;
2803 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2806 .tab-icon-image[sharing]:not([selected]),
2807 .tab-sharing-icon-overlay {
2808 animation: 3s linear tab-sharing-icon-pulse infinite;
2811 @keyframes tab-sharing-icon-pulse {
2812 /* This should remain identical to identity-box-sharing-icon-pulse in identity-block.inc.css */
2813 0%, 16.66%, 83.33%, 100% {
2821 .tab-icon-image[sharing]:not([selected]) {
2822 animation-delay: -1.5s;
2825 .tab-sharing-icon-overlay {
2826 /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */
2827 margin-inline-start: -22px;
2831 .tab-sharing-icon-overlay[sharing="camera"] {
2832 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
2835 .tab-sharing-icon-overlay[sharing="microphone"] {
2836 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
2839 .tab-sharing-icon-overlay[sharing="screen"] {
2840 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
2847 margin-inline-start: -15px;
2848 margin-inline-end: -1px;
2852 .tab-icon-overlay[crashed] {
2853 list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2856 .tab-icon-overlay[soundplaying],
2857 .tab-icon-overlay[muted]:not([crashed]),
2858 .tab-icon-overlay[blocked]:not([crashed]) {
2859 border-radius: 10px;
2862 .tab-icon-overlay[soundplaying]:hover,
2863 .tab-icon-overlay[muted]:hover,
2864 .tab-icon-overlay[blocked]:not([crashed]):hover {
2865 background-color: #FFCF00;
2868 .tab-icon-overlay[soundplaying] {
2869 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2872 .tab-icon-overlay[muted]:not([crashed]) {
2873 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2876 .tab-icon-overlay[blocked]:not([crashed]) {
2877 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-blocked");
2880 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not([selected]):not(:hover),
2881 .tab-icon-overlay[soundplaying][selected]:-moz-lwtheme-brighttext:not(:hover) {
2882 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2885 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not([selected]):not(:hover),
2886 .tab-icon-overlay[mouted][selected]:-moz-lwtheme-brighttext:not(:hover) {
2887 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2890 #TabsToolbar[brighttext] .tab-icon-overlay[blocked]:not([crashed]):not([selected]):not(:hover),
2891 .tab-icon-overlay[blocked][selected]:-moz-lwtheme-brighttext:not(:hover) {
2892 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-blocked");
2895 .tab-throbber[busy] {
2896 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2899 .tab-throbber[progress] {
2900 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2903 @media (min-resolution: 1.1dppx) {
2904 .tab-throbber[busy] {
2905 list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
2908 .tab-throbber[progress] {
2909 list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
2913 .tab-throbber[pinned],
2914 .tab-icon-image[pinned] {
2915 margin-inline-start: 2px;
2916 margin-inline-end: 2px;
2920 /* this needs to add up to the 16px of the icon image */
2922 margin-top: 2px !important;
2923 margin-bottom: 2px !important;
2927 margin-inline-start: 4px;
2933 .tab-icon-sound[soundplaying],
2934 .tab-icon-sound[muted],
2935 .tab-icon-sound[blocked] {
2936 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
2937 filter: url(chrome://global/skin/filters.svg#fill);
2941 .tab-icon-sound[muted] {
2942 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
2945 .tab-icon-sound[blocked] {
2946 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked);
2954 .tab-icon-sound[soundplaying-scheduledremoval]:not([muted]):not(:hover),
2955 .tab-icon-overlay[soundplaying-scheduledremoval]:not([muted]):not(:hover) {
2956 transition: opacity .3s linear var(--soundplaying-removal-delay);
2961 .tabs-newtab-button {
2962 /* overlap the tab curves */
2965 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
2969 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
2970 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
2973 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
2974 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
2977 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
2980 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
2983 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
2984 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
2987 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
2988 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
2991 .tab-background-start[selected=true]::after,
2992 .tab-background-start[selected=true]::before,
2993 .tab-background-start,
2994 .tab-background-end,
2995 .tab-background-end[selected=true]::after,
2996 .tab-background-end[selected=true]::before {
2999 .tabbrowser-tab:not([visuallyselected=true]),
3000 .tabbrowser-tab:-moz-lwtheme {
3003 /* tabbrowser-tab focus ring */
3004 .tabbrowser-tab:focus {
3005 outline: 1px dotted;
3010 .tabbrowser-tab[visuallyselected="true"] {
3013 /* End selected tab */
3015 /* Tab pointer-events */
3018 pointer-events: none;
3021 .tab-background-middle,
3022 .tabs-newtab-button,
3023 .tab-icon-overlay[soundplaying],
3024 .tab-icon-overlay[muted]:not([crashed]),
3025 .tab-icon-overlay[blocked]:not([crashed]),
3028 pointer-events: auto;
3034 .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
3035 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
3037 .tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
3038 background-color: #E7ADE7;
3041 .tab-label[attention]:not([selected="true"]) {
3045 .tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
3046 background-color: #3333FF;
3050 /* Tab separators */
3052 .tabbrowser-tab::after,
3053 .tabbrowser-tab::before {
3055 margin-inline-start: -1px;
3056 background-image: linear-gradient(transparent 5px,
3058 currentColor calc(100% - 4px),
3059 transparent calc(100% - 4px));
3063 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3064 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3068 /* Also show separators beside the selected tab when dragging it. */
3070 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3071 .tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3072 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
3077 /* New tab button */
3079 .tabs-newtab-button {
3081 /* width: calc(36px + var(--tab-curve-width)); */
3083 @media (min-resolution: 1.1dppx) {
3084 /* image preloading hack from like lowdpi styles */
3085 #tabbrowser-tabs::before {
3088 .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
3089 .tabs-newtab-button:hover {
3092 .tab-background-middle[selected=true] {
3095 .tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
3096 .tab-background-end[selected=true]:-moz-locale-dir(rtl)::after {
3099 .tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
3100 .tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
3104 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
3108 /* All tabs menupopup */
3110 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3111 background-color: #402800;
3114 .alltabs-endimage[soundplaying],
3115 .alltabs-endimage[muted],
3116 .alltabs-endimage[blocked] {
3117 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
3118 filter: url(chrome://global/skin/filters.svg#fill);
3122 .alltabs-endimage[muted] {
3123 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
3126 .alltabs-endimage[blocked] {
3127 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked);
3130 /* === END tabs.inc.css === */
3132 /* Tab DnD indicator */
3133 .tab-drop-indicator {
3134 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3135 margin-bottom: -11px;
3138 /* Tab close button */
3140 list-style-image: url("chrome://global/skin/icons/close-button.gif") !important;
3141 -moz-image-region: auto !important;
3144 .tab-close-button:hover,
3145 .tab-close-button:hover[selected="true"] {
3146 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
3147 -moz-image-region: auto !important;
3150 .tab-close-button:hover:active,
3151 .tab-close-button:hover:active[selected="true"] {
3152 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
3153 -moz-image-region: auto !important;
3156 .tab-close-button > .button-icon,
3157 .tab-close-button > .button-box > .button-icon,
3158 .tab-close-button > .toolbarbutton-icon {
3159 width: auto !important;
3163 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3165 .tabbrowser-arrowscrollbox > .scrollbutton-up,
3166 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3170 background-origin: border-box;
3173 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3174 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3175 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3176 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3179 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3180 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3183 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3184 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3185 /* transform: scaleX(-1);*/
3188 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3189 transition: 1s background-color ease-out;
3192 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
3193 background-color: #008484;
3196 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3197 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3198 /* border-width: 0 2px 0 0;
3199 border-style: solid;
3200 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3203 .tabs-newtab-button > .toolbarbutton-icon {
3205 margin-bottom: -1px;
3208 .tabs-newtab-button,
3209 #TabsToolbar > #new-tab-button,
3210 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3211 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3212 list-style-image: url("chrome://browser/skin/tabbrowser/newtab.svg");
3213 -moz-image-region: auto;
3216 .tabs-newtab-button,
3217 .tabs-newtab-button:hover,
3218 #TabsToolbar > #new-tab-button,
3219 #TabsToolbar > #new-tab-button:hover {
3222 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3223 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3224 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3225 .tabs-newtab-button:-moz-lwtheme-brighttext,
3226 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3227 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3230 #TabsToolbar > #new-tab-button {
3235 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3238 #alltabs-button:hover,
3239 #alltabs-button:hover:active,
3240 #alltabs-button[open="true"] {
3241 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3244 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3245 #alltabs-button:-moz-lwtheme-brighttext {
3248 #alltabs-button > .toolbarbutton-icon {
3252 #alltabs-button > .toolbarbutton-menu-dropmarker {
3256 /* All tabs menupopup */
3257 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3258 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
3259 -moz-image-region: auto;
3262 .alltabs-item[selected="true"] {
3266 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3267 list-style-image: url("chrome://global/skin/icons/loading.png");
3270 @media (min-resolution: 1.1dppx) {
3271 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3272 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3276 toolbarbutton.chevron {
3277 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3280 toolbarbutton.chevron:hover {
3281 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3284 toolbar[brighttext] toolbarbutton.chevron {
3285 list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3288 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3289 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3290 transform: scaleX(-1);
3293 toolbarbutton.chevron > .toolbarbutton-text,
3294 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3298 toolbarbutton.chevron > .toolbarbutton-icon {
3302 #sidebar-throbber[loading="true"] {
3303 list-style-image: url("chrome://global/skin/icons/loading.png");
3304 margin-inline-end: 4px;
3307 @media (min-resolution: 1.1dppx) {
3308 #sidebar-throbber[loading="true"] {
3309 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3314 /* Bookmarks toolbar */
3315 #PlacesToolbarDropIndicator {
3316 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3319 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3320 background-color: #008484 !important;
3321 color: #FFCF00 !important;
3324 /* rules for menupopup drop indicators */
3325 .menupopup-drop-indicator-bar {
3327 /* these two margins must together compensate the indicator's height */
3329 margin-bottom: -1px;
3332 .menupopup-drop-indicator {
3333 list-style-image: none;
3335 margin-inline-end: -4em;
3336 background-color: #008484;
3339 /* === BEGIN notification-icons.inc.css === */
3341 #notification-popup-box {
3342 border-radius: 3px 0 0 3px;
3345 margin-inline-end: -5px;
3346 padding-inline-end: 5px;
3349 .notification-anchor-icon,
3350 #blocked-permissions-container > .blocked-permission-icon {
3353 margin-inline-start: 2px;
3356 /* This class can be used alone or in combination with the class defining the
3357 type of icon displayed. This rule must be defined before the others in order
3358 for its list-style-image to be overridden. */
3359 .notification-anchor-icon {
3360 list-style-image: url(chrome://browser/skin/notification-icons.svg#default-info);
3363 .notification-anchor-icon:-moz-focusring {
3364 outline: 1px dotted #008484;
3367 @media (min-resolution: 1.1dppx) {
3368 .notification-anchor-icon {
3369 list-style-image: url(chrome://global/skin/icons/information-32.png);
3373 .notification-anchor-icon:not(.plugin-blocked),
3374 #blocked-permissions-container > .blocked-permission-icon {
3375 filter: url(chrome://global/skin/filters.svg#fill);
3379 /* INDIVIDUAL NOTIFICATIONS */
3381 .popup-notification-icon[popupid="web-notifications"],
3382 .desktop-notification-icon {
3383 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification);
3386 .desktop-notification-icon.blocked-permission-icon {
3387 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked);
3391 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows);
3394 .geo-icon.blocked-permission-icon {
3395 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-blocked);
3398 .popup-notification-icon[popupid="geolocation"] {
3399 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-detailed);
3402 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3404 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB);
3407 .indexedDB-icon.blocked-permission-icon {
3408 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked);
3412 list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
3415 .popup-notification-icon[popupid="password"] {
3416 list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed);
3420 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera);
3423 .camera-icon.in-use {
3424 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-sharing);
3427 .camera-icon.blocked-permission-icon {
3428 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked);
3432 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone);
3435 .microphone-icon.in-use {
3436 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-sharing);
3439 .microphone-icon.blocked-permission-icon {
3440 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked);
3443 .popup-notification-icon.microphone-icon {
3444 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed);
3448 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen);
3451 .screen-icon.in-use {
3452 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-sharing);
3455 .screen-icon.blocked-permission-icon {
3456 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked);
3459 #webRTC-preview:not([hidden]) {
3460 display: -moz-stack;
3462 border: 1px solid #A09090;
3468 html|*#webRTC-previewVideo {
3470 /* If we don't set the min-width, width is ignored. */
3475 #webRTC-previewWarning {
3476 background: #FF0000 url("chrome://browser/skin/warning-white.svg") no-repeat .75em .75em;
3479 padding-inline-start: calc(1.5em + 16px);
3480 border-top: 1px solid #A09090;
3483 #webRTC-previewWarning > .text-link {
3484 margin-inline-start: 0;
3487 /* This icon has a block sign in it, so we don't need a blocked version. */
3489 list-style-image: url("chrome://browser/skin/notification-icons.svg#popup");
3494 .popup-notification-icon[popupid="drmContentPlaying"],
3496 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3499 .drm-icon:hover:active {
3500 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3503 #eme-notification-icon[firstplay=true] {
3504 animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3507 @keyframes emeTeachingMoment {
3508 0% {transform: translateX(0); }
3509 25% {transform: translateX(3px) }
3510 75% {transform: translateX(-3px) }
3511 100% { transform: translateX(0); }
3514 /* INSTALL ADDONS */
3517 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
3520 .popup-notification-icon[popupid="xpinstall-disabled"],
3521 .popup-notification-icon[popupid="addon-install-blocked"],
3522 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
3523 list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3526 .popup-notification-icon[popupid="addon-progress"] {
3527 list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3530 .popup-notification-icon[popupid="addon-install-failed"] {
3531 list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3534 .popup-notification-icon[popupid="addon-install-confirmation"] {
3535 list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3538 #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3539 list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3542 .popup-notification-icon[popupid="addon-install-complete"] {
3543 list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3546 .popup-notification-icon[popupid="addon-install-restart"] {
3547 list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3550 .popup-notification-icon[popupid="click-to-play-plugins"] {
3551 list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png);
3556 .popup-notification-icon[popupid*="offline-app-requested"],
3557 .popup-notification-icon[popupid="offline-app-usage"] {
3558 list-style-image: url(chrome://global/skin/icons/question-64.png);
3564 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
3567 .plugin-icon.plugin-blocked {
3568 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
3571 #notification-popup-box[hidden] {
3572 /* Override display:none to make the pluginBlockedNotification animation work
3573 when showing the notification repeatedly. */
3575 visibility: collapse;
3578 #plugins-notification-icon.plugin-blocked[showing] {
3579 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3582 @keyframes pluginBlockedNotification {
3593 .popup-notification-icon[popupid="servicesInstall"] {
3594 list-style-image: url(chrome://browser/skin/social/services-64.png);
3598 list-style-image: url(chrome://browser/skin/social/services-16.png);
3604 list-style-image: url(chrome://browser/skin/translation-16.png);
3605 -moz-image-region: rect(0px, 16px, 16px, 0px);
3608 .translation-icon.in-use {
3609 -moz-image-region: rect(0px, 32px, 16px, 16px);
3612 /* === END notification-icons.inc.css === */
3614 .popup-notification-body[popupid="addon-progress"],
3615 .popup-notification-body[popupid="addon-install-confirmation"] {
3620 .addon-install-confirmation-name {
3624 .addon-webext-perm-header {
3628 .addon-webext-name {
3637 list-style-image: url("chrome://browser/skin/menuPanel.svg");
3638 -moz-image-region: rect(0px, 288px, 32px, 256px);
3641 .addon-toolbar-icon {
3644 list-style-image: url("chrome://browser/skin/Toolbar.png");
3645 -moz-image-region: rect(0, 486px, 18px, 468px);
3648 /* Notification icon box */
3650 .notification-anchor-icon:-moz-focusring {
3651 /* outline: 1px dotted -moz-DialogText;*/
3654 /* Translation infobar */
3656 /* === BEGIN infobar.inc.css === */
3658 notification[value="translation"] .messageImage {
3659 list-style-image: url("chrome://browser/skin/translation-16.png");
3660 -moz-image-region: rect(0, 32px, 16px, 16px);
3663 @media (min-resolution: 1.25dppx) {
3664 notification[value="translation"] .messageImage {
3665 list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3666 -moz-image-region: rect(0, 64px, 32px, 32px);
3670 notification[value="translation"][state="translating"] .messageImage {
3671 list-style-image: url("chrome://browser/skin/translating-16.png");
3672 -moz-image-region: auto;
3675 @media (min-resolution: 1.25dppx) {
3676 notification[value="translation"][state="translating"] .messageImage {
3677 list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3681 notification[value="translation"] hbox[anonid="details"] {
3685 notification[value="translation"] button,
3686 notification[value="translation"] menulist {
3690 notification[value="translation"] menulist > .menulist-dropmarker {
3693 .translation-menupopup arrowscrollbox {
3697 .translation-attribution {
3699 -moz-box-align: end;
3703 .translation-attribution > label {
3707 .translation-attribution > image {
3711 .translation-welcome-panel {
3715 .translation-welcome-logo {
3718 list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3719 -moz-image-region: rect(0, 64px, 32px, 32px);
3722 .translation-welcome-content {
3723 margin-inline-start: 16px;
3726 .translation-welcome-headline {
3731 .translation-welcome-body {
3736 /* === END infobar.inc.css === */
3738 notification[value="translation"] {
3742 .translation-menupopup {
3743 -moz-appearance: none;
3746 /* Bookmarks roots menu-items */
3747 #subscribeToPageMenuitem:not([disabled]),
3748 #subscribeToPageMenupopup {
3749 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3752 #bookmarksToolbarFolderMenu,
3753 #BMB_bookmarksToolbar,
3754 #panelMenu_bookmarksToolbar {
3755 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3756 -moz-image-region: auto;
3759 #BMB_unsortedBookmarks,
3760 #panelMenu_unsortedBookmarks {
3761 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3762 -moz-image-region: auto;
3767 .statuspanel-label {
3770 background: #404000;
3771 border: 1px none #9C9CFF;
3772 border-top-style: solid;
3777 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3778 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3779 border-right-style: solid;
3780 border-top-right-radius: .3em;
3784 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3785 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3786 border-left-style: solid;
3787 border-top-left-radius: .3em;
3791 /* HACK to abolish devily color on main content */
3794 background-color: transparent !important;
3797 /* === BEGIN fullscreen/warning.inc.css === */
3799 html|*.pointerlockfswarning {
3800 align-items: center;
3801 background: rgba(0, 0, 0, 0.9);
3802 border: 2px solid #A09090;
3803 box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
3806 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3809 html|*.pointerlockfswarning::before {
3811 width: 24px; height: 24px;
3814 html|*.pointerlockfswarning[data-identity="verifiedIdentity"]::before,
3815 html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before {
3816 content: url("chrome://browser/skin/fullscreen/secure.svg");
3819 html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before {
3820 content: url("chrome://browser/skin/fullscreen/insecure.svg");
3823 html|*.pointerlockfswarning-domain-text,
3824 html|*.pointerlockfswarning-generic-text {
3826 font-weight: lighter;
3831 html|*.pointerlockfswarning-domain {
3836 html|*.pointerlockfswarning-exit-button {
3838 font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3840 font-weight: lighter;
3842 box-sizing: content-box;
3844 border-radius: 300px;
3846 background-color: #C09070;
3850 /* === END fullscreen/warning.inc.css === */
3852 /* === BEGIN ctrlTab.inc.css === */
3857 -moz-appearance: none;
3858 background: rgba(0%,0%,0%,.7);
3861 padding: 20px 10px 10px;
3865 .ctrlTab-favicon[src] {
3866 background-color: #000000;
3872 .ctrlTab-preview-inner > .tabPreview-canvas {
3873 /* box-shadow: 1px 1px 2px hsl(0,0%,12%);*/
3876 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3880 .ctrlTab-preview-inner {
3882 border: 2px solid transparent;
3883 border-radius: .5em;
3886 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner {
3887 margin: -10px -10px 0;
3890 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3891 background-color: #000000;
3894 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3896 background-color: #000000;
3898 border-color: #9C9CFF;
3905 /* === END ctrlTab.inc.css === */
3907 /* === BEGIN commandline.inc.css === */
3909 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
3910 We are copy/pasting variables from light-theme and dark-theme,
3911 since they aren't loaded in this context (within browser.css). */
3912 :root #developer-toolbar {
3913 --gcli-background-color: #000000; /* --theme-toolbar-background */
3914 --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
3915 --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
3916 --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
3917 --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
3918 --selection-background: #008484; /* --theme-selection-background */
3919 --selection-color: #000000; /* --theme-selection-color */
3920 --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */
3921 --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */
3924 /* Developer toolbar */
3926 #developer-toolbar {
3927 border-top: 3px solid var(--gcli-background-color);
3928 border-bottom: none;
3931 #developer-toolbar .toolbar-holder {
3932 background-color: #8050B0;
3936 #developer-toolbar .toolbar-holder {
3937 background-color: #8050B0;
3941 #developer-toolbar .toolbar-startcap,
3942 #developer-toolbar .toolbar-endcap{
3943 background-color: #6000CF;
3946 #developer-toolbar {
3948 min-height: 32px; */
3951 #developer-toolbar > toolbarbutton {
3953 background-color: transparent;
3959 .developer-toolbar-button > image {
3960 /* margin: auto 10px; */
3963 #developer-toolbar-toolbox-button > label {
3967 .developer-toolbar-button > .toolbarbutton-icon {
3972 #developer-toolbar-toolbox-button {
3973 list-style-image: url("chrome://devtools/skin/images/toggle-tools.png");
3974 -moz-image-region: rect(0px, 16px, 16px, 0px);
3977 #developer-toolbar-toolbox-button > label {
3981 #developer-toolbar-toolbox-button:hover,
3982 #developer-toolbar-toolbox-button:hover:active,
3983 #developer-toolbar-toolbox-button[checked=true] {
3984 -moz-image-region: rect(0px, 32px, 16px, 16px);
3987 @media (min-resolution: 2dppx) {
3988 #developer-toolbar-toolbox-button {
3989 list-style-image: url("chrome://devtools/skin/images/toggle-tools@2x.png");
3990 -moz-image-region: rect(0px, 32px, 32px, 0px);
3993 #developer-toolbar-toolbox-button:hover,
3994 #developer-toolbar-toolbox-button:hover:active,
3995 #developer-toolbar-toolbox-button[checked=true] {
3996 -moz-image-region: rect(0px, 64px, 32px, 32px);
4002 html|*#gcli-tooltip-frame,
4003 html|*#gcli-output-frame {
4006 background-color: transparent;
4012 background-color: transparent;
4015 .gclitoolbar-input-node,
4016 .gclitoolbar-complete-node {
4018 -moz-box-align: center;
4022 background-color: transparent;
4025 .gclitoolbar-input-node {
4026 /* line-height: 32px;
4027 outline-style: none; */
4028 background-repeat: no-repeat;
4029 background-color: var(--gcli-input-background);
4032 .gclitoolbar-input-node[focused="true"] {
4033 background-color: var(--gcli-input-focused-background);
4036 .gclitoolbar-input-node::before {
4038 display: inline-block;
4039 -moz-box-ordinal-group: 0;
4043 background-image: var(--command-line-image);
4046 .gclitoolbar-input-node[focused="true"]::before {
4047 background-image: var(--command-line-image-focus);
4050 .gclitoolbar-input-node:not([focused="true"]) {
4051 border-color: transparent;
4054 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
4055 background-color: var(--selection-background);
4056 color: var(--selection-color);
4059 .gclitoolbar-complete-node {
4061 background-color: transparent;
4064 pointer-events: none;
4067 .gcli-in-incomplete,
4071 .gcli-in-closebrace,
4078 .gcli-in-incomplete {
4079 border-bottom: 2px dotted #8050B0;
4083 border-bottom: 2px dotted #FF0000;
4094 .gcli-in-closebrace {
4098 /* === END commandline.inc.css === */
4100 /* === BEGIN responsivedesign.inc.css === */
4102 /* Responsive Mode */
4104 .browserContainer[responsivemode] {
4105 background-color: #221500;
4106 padding: 0 20px 20px 20px;
4109 .browserStack[responsivemode] {
4110 box-shadow: 0 0 7px #9C9CFF;
4113 .devtools-responsiveui-toolbar {
4114 background: transparent;
4115 /* text color is textColor from dark theme, since no theme is applied to
4116 * the responsive toolbar.
4122 border-bottom-width: 0;
4125 .devtools-responsiveui-textinput {
4126 /* -moz-appearance: none;
4129 border: 1px solid #111;
4136 .devtools-responsiveui-textinput[attention] {
4137 /* border-color: #38ace6;
4138 background: rgba(56,172,230,0.4);*/
4141 .devtools-responsiveui-menulist,
4142 .devtools-responsiveui-toolbarbutton {
4143 -moz-box-align: center;
4145 /* min-height: 22px;*/
4146 /* margin: 0 3px; */
4149 .devtools-responsiveui-menulist .menulist-editable-box {
4150 background-color: transparent;
4153 .devtools-responsiveui-menulist html|*.menulist-editable-input {
4158 .devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4159 /* background: hsla(212,7%,57%,.35);*/
4162 .devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4167 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4168 -moz-box-orient: horizontal;
4171 .devtools-responsiveui-menulist:-moz-focusring,
4172 .devtools-responsiveui-toolbarbutton:-moz-focusring {
4173 /* outline: 1px dotted hsla(210,30%,85%,0.7);
4174 outline-offset: -4px;*/
4177 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4181 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4182 /* border-color: hsla(210,8%,5%,.6);
4183 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4184 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); */
4187 .devtools-responsiveui-menulist[open=true],
4188 .devtools-responsiveui-toolbarbutton[open=true],
4189 .devtools-responsiveui-toolbarbutton[checked=true] {
4190 /* border-color: hsla(210,8%,5%,.6) !important;
4191 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4192 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); */
4195 .devtools-responsiveui-toolbarbutton[checked=true] {
4196 /* color: hsl(208,100%,60%); */
4199 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
4200 /* background-color: transparent !important;*/
4203 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4204 /* background-color: hsla(210,8%,5%,.2) !important;*/
4207 .devtools-responsiveui-menulist > .menulist-label-box {
4211 .devtools-responsiveui-menulist > .menulist-dropmarker {
4212 /* display: -moz-box;
4213 background-color: transparent;
4214 list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4215 -moz-box-align: center;
4220 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
4223 border-inline-end: 1px solid hsla(210,8%,5%,.45);
4224 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
4227 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
4228 /* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
4231 .devtools-responsiveui-toolbarbutton[type=menu-button] {
4232 /* padding: 0 1px;*/
4233 -moz-box-align: stretch;
4236 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
4237 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
4238 /* list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4239 -moz-box-align: center;
4243 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
4244 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
4248 .devtools-responsiveui-close {
4249 list-style-image: url("chrome://devtools/skin/close.svg");
4252 .devtools-responsiveui-close:hover {
4253 filter: url(chrome://devtools/skin/images/filters.svg#checked-icon-state);
4256 .devtools-responsiveui-close > image {
4260 .devtools-responsiveui-rotate {
4261 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate.png");
4262 -moz-image-region: rect(0px,16px,16px,0px);
4265 .devtools-responsiveui-rotate:hover {
4266 -moz-image-region: rect(0px,32px,16px,16px);
4269 @media (min-resolution: 2dppx) {
4270 .devtools-responsiveui-rotate {
4271 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate@2x.png");
4274 .devtools-responsiveui-rotate:hover {
4275 -moz-image-region: rect(0px,64px,32px,32px);
4279 .devtools-responsiveui-touch {
4280 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch.png");
4281 -moz-image-region: rect(0px,16px,16px,0px);
4284 .devtools-responsiveui-touch:hover,
4285 .devtools-responsiveui-touch[checked],
4286 .devtools-responsiveui-touch[checked]:hover {
4287 -moz-image-region: rect(0px,32px,16px,16px);
4290 @media (min-resolution: 2dppx) {
4291 .devtools-responsiveui-touch {
4292 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch@2x.png");
4293 -moz-image-region: rect(0px,32px,32px,0px);
4296 .devtools-responsiveui-touch:hover,
4297 .devtools-responsiveui-touch[checked],
4298 .devtools-responsiveui-touch[checked]:hover {
4299 -moz-image-region: rect(0px,64px,32px,32px);
4303 .devtools-responsiveui-screenshot {
4304 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot.png");
4305 -moz-image-region: rect(0px,16px,16px,0px);
4308 .devtools-responsiveui-screenshot:hover {
4309 -moz-image-region: rect(0px,32px,16px,16px);
4312 @media (min-resolution: 2dppx) {
4313 .devtools-responsiveui-screenshot {
4314 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot@2x.png");
4317 .devtools-responsiveui-screenshot:hover {
4318 -moz-image-region: rect(0px,64px,32px,32px);
4322 .devtools-responsiveui-resizebarV {
4326 transform: translate(12px, -12px);
4327 background-size: cover;
4328 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer.png");
4331 .devtools-responsiveui-resizebarH {
4335 transform: translate(-12px, 12px);
4336 background-size: cover;
4337 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer.png");
4340 .devtools-responsiveui-resizehandle {
4344 transform: translate(12px, 12px);
4345 background-size: cover;
4346 background-image: url("chrome://devtools/skin/images/responsive-se-resizer.png");
4349 /* FxOS custom mode with additional buttons and phone look'n feel */
4351 /* Hide devtools manual resizer */
4352 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
4353 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
4354 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
4358 /* Gives responsive mode a phone look'n feel */
4359 .browserStack[responsivemode].fxos-mode {
4360 padding: 60px 15px 0;
4362 border-radius: 25px / 20px;
4363 border-bottom-left-radius: 0;
4364 border-bottom-right-radius: 0;
4365 border: 1px solid #FFFFFF;
4366 border-bottom-width: 0;
4368 background-color: #353535;
4370 box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
4372 background-image: linear-gradient(to right, #111 11%, #333 56%);
4376 .devtools-responsiveui-hardware-buttons {
4377 -moz-appearance: none;
4380 border: 1px solid #FFFFFF;
4381 border-bottom-left-radius: 25px;
4382 border-bottom-right-radius: 25px;
4383 border-top-width: 0;
4385 box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
4387 background-image: linear-gradient(to right, #111 11%, #333 56%);
4390 .devtools-responsiveui-home-button {
4391 -moz-user-focus: ignore;
4394 list-style-image: url("chrome://devtools/skin/images/responsiveui-home.png");
4397 .devtools-responsiveui-sleep-button {
4398 -moz-user-focus: ignore;
4399 -moz-appearance: none;
4400 /* compensate browserStack top padding */
4408 border: 1px solid #444;
4409 border-top-right-radius: 12px;
4410 border-top-left-radius: 12px;
4411 border-bottom-color: transparent;
4413 background-image: linear-gradient(to top, #111 11%, #333 56%);
4416 .devtools-responsiveui-sleep-button:hover:active {
4417 background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
4420 .devtools-responsiveui-volume-buttons {
4424 .devtools-responsiveui-volume-up-button,
4425 .devtools-responsiveui-volume-down-button {
4426 -moz-user-focus: ignore;
4427 -moz-appearance: none;
4428 border: 1px solid red;
4432 border: 1px solid #444;
4433 border-right-color: transparent;
4435 background-image: linear-gradient(to right, #111 11%, #333 56%);
4438 .devtools-responsiveui-volume-up-button:hover:active,
4439 .devtools-responsiveui-volume-down-button:hover:active {
4440 background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
4443 .devtools-responsiveui-volume-up-button {
4444 border-top-left-radius: 12px;
4447 .devtools-responsiveui-volume-down-button {
4448 border-bottom-left-radius: 12px;
4451 @media (min-resolution: 2dppx) {
4452 .devtools-responsiveui-resizebarV {
4453 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer@2x.png");
4456 .devtools-responsiveui-resizebarH {
4457 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer@2x.png");
4460 .devtools-responsiveui-resizehandle {
4461 background-image: url("chrome://devtools/skin/images/responsive-se-resizer@2x.png");
4465 /* === END responsivedesign.inc.css === */
4467 /* === including indicator.css is done at the start of the file === */
4471 #developer-toolbar-toolbox-button[error-count]:before {
4475 background-color: #FF0000;
4477 margin-inline-end: 5px;
4480 /* === BEGIN plugin-doorhanger.inc.css === */
4483 * Plugin Doorhanger Styles
4486 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4487 padding: 6px 1px 2px;
4490 .click-to-play-plugins-notification-center-box {
4493 .plugin-popupnotification-centeritem:nth-child(odd) {
4494 /* background-color: rgba(0,0,0,0.1);*/
4497 .center-item-label {
4499 text-overflow: ellipsis;
4502 .center-item-warning-icon {
4503 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.svg");
4504 background-repeat: no-repeat;
4507 margin-inline-start: 6px;
4510 .click-to-play-plugins-notification-button-container {
4513 .click-to-play-popup-button {
4517 .click-to-play-plugins-notification-description-box {
4521 padding-bottom: 3px;
4524 .click-to-play-plugins-outer-description {
4528 .click-to-play-plugins-notification-link,
4533 .messageImage[value="plugin-hidden"] {
4534 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
4537 /* Keep any changes to this style in sync with pluginProblem.css */
4538 notification.pluginVulnerable {
4541 notification.pluginVulnerable .messageImage {
4542 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
4545 /* === END plugin-doorhanger.inc.css === */
4547 /* === BEGIN customizeMode.inc.css === */
4549 /* Customization mode */
4552 --drag-drop-transition-duration: .3s;
4555 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
4559 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
4560 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4561 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4566 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4567 pointer-events: none;
4570 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4571 #PanelUI-contents > .panel-customization-placeholder {
4572 -moz-outline-radius: 2.5px;
4573 outline: 1px dashed transparent;
4576 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4577 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4578 -moz-box-ordinal-group: 0;
4583 outline-offset: -2px;
4584 pointer-events: none;
4590 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4591 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4592 offset from the bottom effectively the same as other targets (-2px). */
4593 #main-window[customize-entered] #TabsToolbar.customization-target::before {
4597 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4598 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4599 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4600 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
4604 /* Most target outlines are shown on hover and drag over but the panel menu uses
4605 placeholders instead. */
4606 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4607 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4608 /* nav-bar and panel outlines are always shown */
4609 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4610 outline-color: currentColor;
4613 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4614 transition: outline-color 250ms linear;
4617 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
4618 transition: outline-color 250ms linear;
4619 outline-color: var(--panel-separator-color);
4622 #PanelUI-contents > .panel-customization-placeholder {
4624 outline-offset: -5px;
4627 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
4629 /* padding-left: 10px;
4630 padding-right: 10px;*/
4633 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
4637 #customization-container {
4638 background-color: #000000;
4642 #customization-palette,
4643 #customization-empty {
4644 padding: 0 15px 15px;
4647 #customization-header {
4649 line-height: 1.75em;
4652 margin: 25px 25px 12px;
4653 padding-bottom: 12px;
4654 border-bottom: 1px solid #A09090;
4657 #customization-panel-container {
4658 padding: 10px 10px 0px;
4661 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4662 #customization-footer {
4663 /*background-color: rgb(236,236,236);*/
4666 #customization-footer {
4667 border-top: 1px solid #9C9CFF;
4671 .customizationmode-button {
4675 .customizationmode-button:hover {
4678 .customizationmode-button > .box-inherit {
4681 .customizationmode-button > .button-icon {
4684 .customizationmode-button:not([type=menu]) > .button-text {
4687 .customizationmode-button > .button-menu-dropmarker {
4692 .customizationmode-button[checked] {
4693 background-color: #008484;
4696 .customizationmode-button[checked]:hover:not([disabled]),
4697 .customizationmode-button:hover:not([disabled]) {
4698 background-color: #FFCF00;
4701 .customizationmode-button[checked]:hover:active:not([disabled]),
4702 .customizationmode-button:hover:active:not([disabled]),
4703 .customizationmode-button[open] {
4704 background-color: #FF9F00;
4707 .customizationmode-button[disabled="true"] {
4710 .customizationmode-button > .box-inherit > .box-inherit > .button-icon,
4711 .customizationmode-button > .button-box > .button-icon {
4715 #customization-titlebar-visibility-button {
4716 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
4717 -moz-image-region: rect(0, 16px, 16px, 0);
4720 #customization-titlebar-visibility-button:hover {
4721 -moz-image-region: rect(16px, 16px, 32px, 0);
4724 #customization-titlebar-visibility-button > .button-box {
4726 padding-bottom: 1px;
4729 #customization-titlebar-visibility-button:hover:active > .button-box {
4734 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
4735 #customization-titlebar-visibility-button > .button-box > .button-text {
4736 /* Sadly, button.css thinks its margins are perfect for everyone. */
4737 margin-inline-start: 5px !important;
4740 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
4744 background-image: url("chrome://browser/content/default-theme-icon.svg");
4745 background-size: contain;
4748 #customization-titlebar-visibility-button > .button-box > .button-icon {
4749 vertical-align: middle;
4752 #customization-titlebar-visibility-button[checked] {
4753 -moz-image-region: rect(0, 32px, 16px, 16px);
4754 background-color: #008484;
4757 #customization-titlebar-visibility-button[checked]:hover {
4758 -moz-image-region: rect(16px, 32px, 32px, 16px);
4759 background-color: #FFCF00;
4762 #customization-titlebar-visibility-button[checked]:hover:active {
4763 background-color: #FF9F00;
4766 @media (min-resolution: 1.1dppx) {
4767 #customization-titlebar-visibility-button {
4768 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
4769 -moz-image-region: rect(0, 48px, 48px, 0);
4772 #customization-titlebar-visibility-button:hover {
4773 -moz-image-region: rect(48px, 48px, 96px, 0);
4776 #customization-titlebar-visibility-button[checked] {
4777 -moz-image-region: rect(0, 96px, 48px, 48px);
4780 #customization-titlebar-visibility-button[checked]:hover {
4781 -moz-image-region: rect(48px, 96px, 96px, 48px);
4785 #main-window[customize-entered] #customization-panel-container {
4786 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4787 background-position: left top;
4788 background-repeat: repeat;
4789 background-size: auto;
4790 background-attachment: fixed;
4793 toolbarpaletteitem[place="toolbar"] {
4794 transition: border-width 250ms ease-in-out;
4797 toolbarpaletteitem[mousedown] {
4798 outline: 1px solid #008484;
4799 cursor: -moz-grabbing;
4803 .panel-customization-placeholder,
4804 toolbarpaletteitem[place="palette"],
4805 toolbarpaletteitem[place="panel"] {
4806 transition: transform var(--drag-drop-transition-duration) ease-in-out;
4809 #customization-palette {
4810 transition: opacity .3s ease-in-out;
4814 #customization-palette[showing="true"] {
4818 toolbarpaletteitem toolbarbutton[disabled] {
4819 /* color: inherit !important;*/
4822 toolbarpaletteitem[notransition].panel-customization-placeholder,
4823 toolbarpaletteitem[notransition][place="toolbar"],
4824 toolbarpaletteitem[notransition][place="palette"],
4825 toolbarpaletteitem[notransition][place="panel"] {
4829 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
4830 toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
4831 toolbarpaletteitem > toolbaritem.panel-wide-item,
4832 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
4833 transition: transform var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important;
4836 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
4837 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
4838 transform: scale(1.3);
4841 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
4842 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
4843 transform: scale(1.1);
4846 /* Override the toolkit styling for items being dragged over. */
4847 toolbarpaletteitem[place="toolbar"] {
4848 border-left-width: 0;
4849 border-right-width: 0;
4854 #customization-palette:not([hidden]) {
4855 margin-bottom: 25px;
4858 toolbarpaletteitem[place="palette"]:-moz-focusring,
4859 toolbarpaletteitem[place="panel"]:-moz-focusring,
4860 toolbarpaletteitem[place="toolbar"]:-moz-focusring {
4864 toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring,
4865 toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring,
4866 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4867 /* Delay adding the focusring back until after the transform transition completes. */
4868 transition: outline-width .01s linear var(--drag-drop-transition-duration);
4869 outline: 1px dotted;
4870 -moz-outline-radius: 2.5px;
4873 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4874 outline-offset: -5px;
4877 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4878 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
4879 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
4880 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
4884 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4885 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
4895 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
4896 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
4900 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
4901 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
4904 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
4905 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
4909 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
4910 -moz-box-pack: center;
4914 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
4915 margin-inline-end: 5px;
4918 #customization-palette > toolbarpaletteitem > label {
4924 #customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
4925 -moz-box-orient: vertical;
4926 /* Make the panel padding uniform across all platforms due to the
4927 styling of the section headers and footer. */
4931 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
4936 .customization-lwtheme-menu-theme {
4937 -moz-appearance: none;
4940 padding-inline-end: 5px;
4942 padding-inline-start: 0;
4945 .customization-lwtheme-menu-theme[defaulttheme] {
4946 list-style-image: url(chrome://browser/content/default-theme-icon.svg);
4949 .customization-lwtheme-menu-theme[active="true"] {
4950 background-color: #008484;
4953 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
4957 .customization-lwtheme-menu-theme > .toolbarbutton-text {
4961 #customization-lwtheme-menu-header,
4962 #customization-lwtheme-menu-recommended {
4967 #customization-lwtheme-menu-header,
4968 #customization-lwtheme-menu-recommended,
4969 #customization-lwtheme-menu-footer {
4970 background-color: #A09090;
4972 margin-right: -10px;
4976 #customization-lwtheme-menu-header {
4978 border-top-right-radius: 3px;
4979 border-top-left-radius: 3px;
4982 #customization-lwtheme-menu-recommended {
4985 #customization-lwtheme-menu-footer {
4986 margin-bottom: -10px;
4987 border-bottom-right-radius: 3px;
4988 border-bottom-left-radius: 3px;
4991 .customization-lwtheme-menu-footeritem {
4992 -moz-appearance: none;
4994 background-color: #C09070;
4996 border: 1px solid transparent;
5002 .customization-lwtheme-menu-footeritem:hover {
5003 background-color: #FFCF00;
5006 .customization-lwtheme-menu-footeritem:first-child {
5009 /* === END customizeMode.inc.css === */
5011 /* === BEGIN customizeTip.inc.css === */
5013 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
5020 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
5021 border: 1px solid #9C9CFF;
5025 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
5026 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
5029 .customization-tipPanel-infoBox {
5030 margin: 20px 25px 25px;
5032 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
5033 background-repeat: no-repeat;
5036 .customization-tipPanel-content {
5042 .customization-tipPanel-em {
5047 .customization-tipPanel-contentImage {
5049 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
5057 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
5058 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
5061 .customization-tipPanel-link {
5062 -moz-appearance: none;
5063 background: transparent;
5071 .customization-tipPanel-link > .button-box > .button-text {
5072 margin: 0 !important;
5075 .customization-tipPanel-closeBox > .close-icon {
5076 -moz-appearance: none;
5078 margin-inline-end: -25px;
5081 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
5082 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5083 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
5086 /* === END customizeTip.inc.css === */
5089 * This next rule is a hack to disable subpixel anti-aliasing on all
5090 * labels during the customize mode transition. Subpixel anti-aliasing
5091 * on Windows with Direct2D layers acceleration is particularly slow to
5092 * paint, so this hack is how we sidestep that performance bottleneck.
5094 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
5095 transform: perspective(0.01px);
5098 #main-window[customize-entered] > #tab-view-deck {
5099 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5100 background-attachment: fixed;
5103 #main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
5104 background-repeat: no-repeat;
5105 background-position: right top;
5106 background-attachment: fixed;
5107 /* The image will get set from CustomizeMode.jsm */
5108 background-image: none;
5109 background-color: transparent;
5112 #main-window[customization-lwtheme]:-moz-lwtheme {
5113 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5114 background-repeat: repeat;
5115 background-attachment: fixed;
5116 background-position: left top;
5119 #main-window[customize-entered] #browser-bottombox,
5120 #main-window[customize-entered] #customization-container {
5121 border-left: 1px solid #9C9CFF;
5122 border-right: 1px solid #9C9CFF;
5123 background-clip: padding-box;
5126 #main-window[customize-entered] #browser-bottombox {
5127 border-bottom: 1px solid #9C9CFF;
5130 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
5134 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5138 /* End customization mode */
5140 /* Private browsing indicators */
5143 * Currently, we have two places where we put private browsing indicators on
5144 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5145 * When tabsintitlebar is disabled, we draw the indicator at the end of the
5146 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5147 * want the bottom border of the image to line up with the bottom of the window
5148 * caption buttons. That's why there's so much special-casing going on in here.
5150 .private-browsing-indicator {
5152 pointer-events: none;
5155 #private-browsing-indicator-titlebar {
5160 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5164 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5168 #TabsToolbar > .private-browsing-indicator {
5169 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5170 margin-inline-start: 4px;
5174 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5175 * mode, since the tabstrip "mimics" the titlebar in that case with its own
5176 * min/max/close window buttons.
5178 #private-browsing-indicator-titlebar > .private-browsing-indicator,
5179 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5180 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5181 margin-inline-end: 4px;
5187 /* This one is for Linux */
5188 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5189 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5193 /* End private browsing indicators */
5195 /* === BEGIN UITour.inc.css === */
5199 #UITourHighlightContainer {
5200 -moz-appearance: none;
5202 background-color: transparent;
5203 /* This is a buffer to compensate for the movement in the "wobble" effect,
5204 and for the box-shadow of #UITourHighlight. */
5209 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5210 border-radius: 40px;
5211 border: 1px solid #9C9CFF;
5212 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5213 on Linux without an X compositor where opacity is either 0 or 1. */
5214 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5219 #UITourTooltipBody {
5220 -moz-box-align: start;
5223 #UITourTooltipTitleContainer {
5224 -moz-box-align: start;
5225 margin-bottom: 10px;
5228 #UITourTooltipIcon {
5231 margin-inline-end: 10px;
5234 #UITourTooltipTitle,
5235 #UITourTooltipDescription {
5239 #UITourTooltipTitle {
5245 #UITourTooltipDescription {
5246 margin-inline-start: 0;
5247 margin-inline-end: 0;
5249 line-height: 1.8rem;
5250 margin-bottom: 0; /* Override global.css */
5253 #UITourTooltipClose {
5255 -moz-appearance: none;
5257 background-color: transparent;
5259 margin-inline-start: 4px;
5263 #UITourTooltipClose > .toolbarbutton-text {
5267 #UITourTooltipButtons {
5269 background-color: rgba(0,0,0,.2);
5270 border-top: 1px solid rgba(0,0,0,.4);
5271 margin: 10px -16px -16px;
5275 #UITourTooltipButtons > label,
5276 #UITourTooltipButtons > button {
5280 #UITourTooltipButtons > label:first-child,
5281 #UITourTooltipButtons > button:first-child {
5282 margin-inline-start: 0;
5285 #UITourTooltipButtons > label:last-child,
5286 #UITourTooltipButtons > button:last-child {
5287 margin-inline-end: 0;
5290 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
5293 margin-inline-end: 5px;
5296 #UITourTooltipButtons > label,
5297 #UITourTooltipButtons > button .button-text {
5301 #UITourTooltipButtons > button:not(.button-link) {
5302 -moz-appearance: none;
5303 background-color: #C09070;
5304 border-radius: 3000px;
5308 transition-property: background-color, color;
5309 transition-duration: 150ms;
5312 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5313 background-color: #FFCF00;
5317 #UITourTooltipButtons > label,
5318 #UITourTooltipButtons > button.button-link {
5319 -moz-appearance: none;
5320 background: transparent;
5323 color: rgba(0,0,0,0.35);
5325 padding-right: 10px;
5328 #UITourTooltipButtons > button.button-link:hover {
5332 /* The primary button gets the same color as the customize button. */
5333 #UITourTooltipButtons > button.button-primary {
5334 background-color: #A06060; /* LCARS default button background color */
5337 padding-right: 30px;
5340 #UITourTooltipButtons > button.button-primary:not(:active):hover {
5341 background-color: #FFCF00;
5345 /* Notification overrides for Heartbeat UI */
5347 notification.heartbeat {
5348 background-color: #A09090;
5352 @keyframes pulse-onshow {
5355 transform: scale(1.0);
5359 transform: scale(1.1);
5362 transform: scale(1.0);
5365 transform: scale(1.1);
5368 transform: scale(1.0);
5372 @keyframes pulse-twice {
5374 transform: scale(1.1);
5377 transform: scale(0.8);
5380 transform: scale(1);
5384 .messageText.heartbeat {
5386 /* text-shadow: none; */
5387 margin-inline-start: 0px;
5390 .messageImage.heartbeat {
5393 margin-inline-start: 8px;
5394 margin-inline-end: 8px;
5397 .messageImage.heartbeat.pulse-onshow {
5398 animation-name: pulse-onshow;
5399 animation-duration: 1.5s;
5400 animation-iteration-count: 1;
5401 animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
5404 .messageImage.heartbeat.pulse-twice {
5405 animation-name: pulse-twice;
5406 animation-duration: 1s;
5407 animation-iteration-count: 2;
5408 animation-timing-function: linear;
5411 /* Learn More link styles */
5412 .heartbeat > .text-link {
5414 margin-inline-start: 0px;
5417 .heartbeat > .text-link:hover {
5419 text-decoration: none;
5422 .heartbeat > .text-link:hover:active {
5426 /* Heartbeat UI Rating Star Classes */
5427 .heartbeat > #star-rating-container {
5429 /* margin-bottom: 4px;*/
5432 .heartbeat > #star-rating-container > #star5 {
5433 -moz-box-ordinal-group: 5;
5436 .heartbeat > #star-rating-container > #star4 {
5437 -moz-box-ordinal-group: 4;
5440 .heartbeat > #star-rating-container > #star3 {
5441 -moz-box-ordinal-group: 3;
5444 .heartbeat > #star-rating-container > #star2 {
5445 -moz-box-ordinal-group: 2;
5448 .heartbeat > #star-rating-container > .star-x {
5449 background: url("chrome://browser/skin/heartbeat-star-off.svg");
5451 /* Overrides the margin-inline-end for all platforms defined in the .plain class */
5452 margin-inline-end: 4px !important;
5457 .heartbeat > #star-rating-container > .star-x:hover,
5458 .heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
5459 background: url("chrome://browser/skin/heartbeat-star-lit.svg");
5462 /* === END UITour.inc.css === */
5464 #UITourTooltipButtons {
5466 * Override the --arrowpanel-padding so the background extends
5467 * to the sides and bottom of the panel.
5470 margin-right: -10px;
5471 margin-bottom: -10px;
5474 /* === BEGIN contextmenu.inc.css === */
5476 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
5479 #context-navigation > .menuitem-iconic {
5481 -moz-box-pack: center;
5482 -moz-box-align: center;
5485 #context-navigation > .menuitem-iconic[disabled="true"] {
5486 background-color: transparent;
5489 #context-navigation > .menuitem-iconic > .menu-iconic-left {
5490 -moz-appearance: none;
5493 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
5497 filter: url(chrome://global/skin/filters.svg#fill);
5502 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back");
5506 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward");
5510 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload");
5514 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop");
5517 #context-bookmarkpage {
5518 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark");
5521 #context-bookmarkpage[starred=true] {
5522 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked");
5525 #context-back:-moz-locale-dir(rtl),
5526 #context-forward:-moz-locale-dir(rtl),
5527 #context-reload:-moz-locale-dir(rtl) {
5528 transform: scaleX(-1);
5531 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
5532 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
5538 #context-media-eme-learnmore {
5539 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5542 #context-media-eme-learnmore {
5543 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5546 /* === END contextmenu.inc.css === */
5548 #context-navigation {
5551 #context-sep-navigation {
5552 /* margin-top: -4px; */
5555 .browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {
5560 .webextension-popup-browser {
5561 border-radius: inherit;
5564 .contentSelectDropdown-ingroup > .menu-iconic-text {
5565 padding-inline-start: 20px;
5568 #ContentSelectDropdown > menupopup {
5569 background-color: #000000;
5570 -moz-border-top-colors: #A09090;
5571 -moz-border-right-colors: #A09090;
5572 -moz-border-bottom-colors: #A09090;
5573 -moz-border-left-colors: #A09090;
5576 #ContentSelectDropdown > menupopup > menucaption,
5577 #ContentSelectDropdown > menupopup > menuitem {
5580 /* font: -moz-list;*/
5583 #ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text,
5584 #ContentSelectDropdown > menupopup > menuitem > .menu-iconic-text {
5585 /* Padding should follow the 4/12 ratio, where 12px is the default font-size
5586 with 4px being the preferred padding size. */
5587 padding-top: .3333em;
5588 padding-bottom: .3333em;
5591 #ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text {
5595 #ContentSelectDropdown > menupopup > menuitem[_moz-menuactive="true"][disabled="true"] {
5597 background-color: unset;
5600 #ContentSelectDropdown > menupopup > menucaption {
5601 background-color: buttonface;
5604 #ContentSelectDropdown > menupopup > menucaption[disabled="true"] {
5608 #ContentSelectDropdown > .isOpenedViaTouch > menucaption > .menu-iconic-text,
5609 #ContentSelectDropdown > .isOpenedViaTouch > menuitem > .menu-iconic-text {
5610 /* Touch padding should follow the 11/12 ratio, where 12px is the default
5611 font-size with 11px being the preferred padding size. */
5612 padding-top: .9167em;
5613 padding-bottom: .9167em;