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 {
1755 margin-inline-start: -3px;
1757 background: transparent;
1760 #urlbar-search-splitter + #urlbar-container > #urlbar,
1761 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1762 margin-inline-start: 0;
1766 border-inline-end: 1px solid #9C9CFF;
1767 margin-inline-end: 3px;
1770 margin-inline-start: 0;
1774 /* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
1776 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
1777 border-bottom: 1px solid var(--panel-separator-color);
1778 background-color: #000000;
1780 padding-inline-start: 44px;
1781 padding-inline-end: 6px;
1782 background-image: url("chrome://browser/skin/info.svg");
1783 background-clip: padding-box;
1784 background-position: 20px center;
1785 background-repeat: no-repeat;
1786 background-size: 16px 16px;
1789 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
1790 background-position: right 20px center;
1793 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
1798 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
1799 margin-inline-start: 0;
1802 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
1803 -moz-appearance: none;
1808 margin-inline-start: 10px;
1811 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
1814 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
1817 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
1820 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
1823 /* === END urlbarSearchSuggestionsNotification.inc.css === */
1826 min-width: calc(54px + 11ch);
1831 #identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
1832 background-color: var(--identity-box-verified-background-color);
1835 #identity-box:-moz-focusring {
1836 outline: 1px dotted;
1837 outline-offset: -1px;
1840 #identity-box.verifiedDomain:-moz-focusring,
1841 #identity-box.verifiedIdentity:-moz-focusring {
1842 outline-color: #000000;
1845 /* Location bar dropmarker */
1847 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
1848 background-color: transparent;
1851 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
1852 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
1853 #urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1856 transition: opacity 0.15s ease;
1859 #urlbar-wrapper[switchingtabs] > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1863 #navigator-toolbox:not(:hover) #nav-bar:not([customizing="true"]) #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker {
1867 .urlbar-history-dropmarker:hover {
1870 .urlbar-history-dropmarker:hover:active,
1871 .urlbar-history-dropmarker[open="true"] {
1874 /* page proxy icon */
1875 /* === BEGIN identity-block.inc.css === */
1877 /* === BEGIN identity-block/icons.inc.css === */
1880 list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
1883 #identity-box:hover > #identity-icon:not(.no-hover),
1884 #identity-box[open=true] > #identity-icon {
1885 list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
1888 #identity-box.grantedPermissions > #identity-icon {
1889 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice);
1892 #identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover),
1893 #identity-box.grantedPermissions[open=true] > #identity-icon {
1894 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover);
1897 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
1898 list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
1901 #tracking-protection-icon {
1902 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled);
1905 #tracking-protection-icon[state="loaded-tracking-content"] {
1906 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled);
1910 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
1911 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon,
1912 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
1913 list-style-image: url(chrome://browser/skin/connection-secure.svg);
1914 visibility: visible;
1917 #urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
1918 list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon);
1919 visibility: visible;
1922 #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
1923 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
1924 list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
1925 visibility: visible;
1928 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
1929 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
1930 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon {
1931 list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon);
1932 visibility: visible;
1935 /* === END identity-block/icons.inc.css === */
1942 /* The padding-left and padding-right transitions handle the delayed hiding of
1943 the forward button when hovered. */
1944 transition: background-color 150ms ease, padding-left, padding-right;
1947 #identity-box:-moz-locale-dir(ltr) {
1948 border-top-right-radius: 0;
1949 border-bottom-right-radius: 0;
1952 #identity-box:-moz-locale-dir(rtl) {
1953 border-top-left-radius: 0;
1954 border-bottom-left-radius: 0;
1957 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1958 border-inline-end: 1px solid #008484;
1961 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels {
1965 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
1966 border-inline-end: 1px solid #9C9CFF;
1969 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon-labels {
1974 #identity-icon-labels:-moz-locale-dir(ltr) {
1978 #identity-icon-labels:-moz-locale-dir(rtl) {
1982 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
1983 /* border-radius: 0;
1984 padding-inline-start: 2px; */
1985 padding-inline-end: 2px;
1986 margin-inline-end: 1px;
1989 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #identity-box {
1990 padding-inline-start: 2px;
1993 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #identity-box {
1994 /* Forward button hiding is delayed when hovered, so we should use the same
1995 delay for the identity box. We handle both horizontal paddings (for LTR and
1996 RTL), the latter two delays here are for padding-left and padding-right. */
1997 transition-delay: 0s, 100s, 100s;
2000 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > #identity-box {
2001 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2002 padding-inline-start: 2.01px;
2005 /* MAIN IDENTITY ICON */
2012 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2016 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2017 -moz-image-region: inherit;
2018 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2023 #urlbar[actiontype="extension"] > #identity-box > #identity-icon {
2024 -moz-image-region: inherit;
2025 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
2035 margin-inline-start: -16px;
2040 #identity-box[sharing="camera"] > #sharing-icon {
2041 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
2044 #identity-box[sharing="microphone"] > #sharing-icon {
2045 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
2048 #identity-box[sharing="screen"] > #sharing-icon {
2049 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
2053 #identity-box[sharing] > #sharing-icon {
2055 animation-delay: -1.5s;
2058 #identity-box[sharing] > #identity-icon,
2060 animation: 3s linear pulse infinite;
2064 0%, 16.66%, 83.33%, 100% {
2072 /* TRACKING PROTECTION ICON */
2074 #tracking-protection-icon {
2077 margin-inline-start: 2px;
2078 margin-inline-end: 0;
2081 #tracking-protection-icon[animate] {
2082 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2085 #tracking-protection-icon:not([state]) {
2086 margin-inline-end: -18px;
2087 pointer-events: none;
2089 /* Only animate the shield in, when it disappears hide it immediately. */
2093 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2094 visibility: collapse;
2097 /* CONNECTION ICON */
2102 margin-inline-start: 2px;
2103 visibility: collapse;
2106 /* === END identity-block.inc.css === */
2108 #page-proxy-favicon {
2109 -moz-image-region: rect(0, 16px, 16px, 0);
2112 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2113 /* margin-inline-end: 1px;*/
2116 #identity-box:hover > #page-proxy-favicon {
2117 -moz-image-region: rect(0, 32px, 16px, 16px);
2120 #identity-box:hover:active > #page-proxy-favicon,
2121 #identity-box[open=true] > #page-proxy-favicon {
2122 -moz-image-region: rect(0, 48px, 16px, 32px);
2125 #identity-box:hover {
2126 background-color: #FFCF00;
2130 #identity-box:hover:active,
2131 #identity-box[open=true] {
2132 background-color: #FF9F00;
2136 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2137 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2138 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2139 background-color: #A09090;
2143 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover > #identity-icon-labels,
2144 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active > #identity-icon-labels,
2145 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] > #identity-icon-labels {
2149 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2150 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2151 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2152 background-color: #008484;
2156 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover > #identity-icon-labels,
2157 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active > #identity-icon-labels,
2158 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] > #identity-icon-labels {
2162 #identity-box:hover > image,
2163 #identity-box:hover:active > image,
2164 #identity-box[open=true] > image {
2165 filter: url(chrome://global/skin/filters.svg#active-icon-state);
2170 /* === BEGIN autocomplete.inc.css === */
2172 #PopupAutoComplete > richlistbox > richlistitem {
2177 padding: 0px 1px 0px 1px;
2180 #PopupAutoComplete > richlistbox > richlistitem > .ac-site-icon {
2181 margin-inline-start: 4px;
2182 margin-inline-end: 0;
2185 #PopupAutoComplete > richlistbox > richlistitem > .ac-title {
2187 margin-inline-start: 4px;
2190 #PopupAutoComplete > richlistbox {
2194 /* Login form autocompletion */
2195 #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon {
2197 list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
2200 #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon[selected] {
2201 list-style-image: url(chrome://browser/skin/notification-icons.svg#login-highlighted);
2204 /* Insecure field warning */
2205 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] {
2206 background-color: var(--arrowpanel-dimmed);
2207 border-bottom: 1px solid var(--panel-separator-color);
2208 padding-bottom: 4px;
2212 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] {
2213 background-color: var(--arrowpanel-dimmed-further);
2217 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title {
2222 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] > .ac-title {
2226 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-site-icon {
2227 list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
2230 /* === END autocomplete.inc.css === */
2232 #PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
2233 border-top: 1px solid #A09090;
2236 #treecolAutoCompleteImage {
2241 .autocomplete-richlistbox {
2245 .autocomplete-richlistitem {
2250 border: 1px solid transparent;
2253 .autocomplete-richlistitem[selected=true] {
2254 background-color: hsl(210, 80%, 52%);
2259 /* color: hsl(0, 0%, 0%);*/
2267 background-color: hsl(216, 0%, 88%);
2268 color: hsl(0, 0%, 0%);
2270 border: 1px solid transparent;
2282 /* color: hsl(0, 0%, 50%);*/
2293 .ac-title[selected=true],
2294 .ac-separator[selected],
2295 .ac-url[selected=true],
2296 .ac-action[selected=true] {
2300 .ac-tags-text[selected] > html|span.ac-tag {
2301 background-color: #A09090;
2305 html|span.ac-emphasize-text-title,
2306 html|span.ac-emphasize-text-tag,
2307 html|span.ac-emphasize-text-url {
2311 .ac-type-icon[type=bookmark] {
2312 list-style-image: url("chrome://browser/skin/urlbar-star.svg#star");
2315 .ac-type-icon[type=bookmark][selected][current] {
2316 /* list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted");*/
2319 .ac-result-type-bookmark,
2320 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
2321 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2322 -moz-image-region: rect(0px 16px 16px 0px);
2327 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
2328 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
2329 /* -moz-image-region: rect(0px 48px 16px 32px);*/
2332 .ac-type-icon[type=keyword],
2333 .ac-site-icon[type=searchengine],
2334 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) {
2335 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2338 .ac-type-icon[type=keyword][selected],
2339 .ac-site-icon[type=searchengine][selected],
2340 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected) {
2341 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2344 .ac-result-type-tag,
2345 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
2346 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2351 .ac-type-icon[type=switchtab],
2352 .ac-type-icon[type=remotetab] {
2353 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab");
2356 .ac-type-icon[type=switchtab][selected],
2357 .ac-type-icon[type=remotetab][selected] {
2358 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted");
2361 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2362 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2368 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2369 border-top: 1px solid #9C9CFF;
2372 /* combined go/reload/stop button in location bar */
2375 #urlbar-reload-button,
2376 #urlbar-stop-button {
2378 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2379 /* margin: 0 9px; */
2380 margin-inline-start: 0px;
2381 border-inline-start: 1px solid var(--urlbar-separator-color);
2382 border-image: linear-gradient(transparent 15%,
2383 var(--urlbar-separator-color) 15%,
2384 var(--urlbar-separator-color) 85%,
2386 border-image-slice: 1;
2389 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2390 border-top-left-radius: 0px;
2391 border-bottom-left-radius: 0px;
2394 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2395 border-top-right-radius: 0px;
2396 border-bottom-right-radius: 0px;
2399 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2400 #urlbar-reload-button:not(:hover) {
2401 border-inline-start-style: none;
2402 padding-inline-start: 3px;
2405 #urlbar-reload-button {
2406 -moz-image-region: rect(0px, 14px, 14px, 0px);
2409 #urlbar-reload-button[disabled=true] {
2410 -moz-image-region: rect(28px, 14px, 42px, 0px);
2413 #urlbar-reload-button:not([disabled=true]):hover {
2414 -moz-image-region: rect(14px, 14px, 28px, 0px);
2417 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2418 transform: scaleX(-1);
2422 -moz-image-region: rect(0, 42px, 14px, 28px);
2425 #urlbar-go-button:hover {
2426 -moz-image-region: rect(14px, 42px, 28px, 28px);
2429 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2430 transform: scaleX(-1);
2433 #urlbar-stop-button {
2434 -moz-image-region: rect(0px, 28px, 14px, 14px);
2437 #urlbar-stop-button:hover {
2438 -moz-image-region: rect(14px, 28px, 28px, 14px);
2441 @media (min-resolution: 1.1dppx) {
2443 #urlbar-reload-button,
2444 #urlbar-stop-button {
2445 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2448 #urlbar-go-button > .toolbarbutton-icon,
2449 #urlbar-reload-button > .toolbarbutton-icon,
2450 #urlbar-stop-button > .toolbarbutton-icon {
2455 -moz-image-region: rect(0, 84px, 28px, 56px);
2458 #urlbar-go-button:hover {
2459 -moz-image-region: rect(28px, 84px, 56px, 56px);
2462 #urlbar-go-button:hover:active {
2463 -moz-image-region: rect(56px, 84px, 84px, 56px);
2466 #urlbar-reload-button {
2467 -moz-image-region: rect(0, 28px, 28px, 0);
2470 #urlbar-reload-button:not([disabled]):hover {
2471 -moz-image-region: rect(28px, 28px, 56px, 0);
2474 #urlbar-reload-button:not([disabled]):hover:active {
2475 -moz-image-region: rect(56px, 28px, 84px, 0);
2478 #urlbar-stop-button {
2479 -moz-image-region: rect(0, 56px, 28px, 28px);
2482 #urlbar-stop-button:not([disabled]):hover {
2483 -moz-image-region: rect(28px, 56px, 56px, 28px);
2486 #urlbar-stop-button:hover:active {
2487 -moz-image-region: rect(56px, 56px, 84px, 28px);
2491 /* popup blocker button */
2493 #page-report-button {
2494 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2495 -moz-image-region: rect(0, 16px, 16px, 0);
2498 #page-report-button:hover ,
2499 #page-report-button:hover:active,
2500 #page-report-button[open="true"] {
2501 -moz-image-region: rect(0, 32px, 16px, 16px);
2504 /* Reader mode button */
2506 #reader-mode-button {
2507 list-style-image: url("chrome://browser/skin/readerMode.svg");
2508 -moz-image-region: rect(0, 16px, 16px, 0);
2511 #reader-mode-button:hover,
2512 #reader-mode-button[readeractive]:hover {
2513 -moz-image-region: rect(0, 32px, 16px, 16px);
2516 #reader-mode-button:hover:active,
2517 #reader-mode-button[readeractive] {
2518 -moz-image-region: rect(0, 48px, 16px, 32px);
2521 /* social share panel */
2523 /* === BEGIN social.inc.css === */
2525 #manage-share-providers {
2526 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
2527 -moz-image-region: rect(0, 468px, 18px, 450px);
2530 #manage-share-providers > .toolbarbutton-icon {
2535 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
2538 /* fixup corners for share panel */
2539 .social-panel > .social-panel-frame {
2540 border-radius: inherit;
2543 /* === END social.inc.css === */
2545 .social-panel-frame {
2546 border-radius: inherit;
2549 .social-share-frame {
2556 background-color: white;
2557 background-repeat: no-repeat;
2558 background-position: center center;
2560 #share-container[loading] {
2561 background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2563 #share-container > browser {
2564 transition: opacity 150ms ease-in-out;
2567 #share-container[loading] > browser {
2571 .social-share-toolbar {
2572 border-bottom: 1px solid #9C9CFF;
2576 #social-share-provider-buttons {
2581 .share-provider-button {
2586 .share-provider-button > .toolbarbutton-text {
2589 .share-provider-button > .toolbarbutton-icon {
2595 #social-share-panel {
2601 .social-share-frame {
2602 border-top-left-radius: 0;
2603 border-bottom-left-radius: inherit;
2604 border-top-right-radius: 0;
2605 border-bottom-right-radius: inherit;
2608 #social-share-panel > .social-share-toolbar {
2609 border-top-left-radius: inherit;
2610 border-top-right-radius: inherit;
2613 #social-share-provider-buttons {
2614 border-top-left-radius: inherit;
2615 border-top-right-radius: inherit;
2618 /* bookmarks menu-button */
2620 #bookmarks-menu-button.bookmark-item {
2621 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2622 -moz-image-region: rect(0px 16px 16px 0px);
2625 #bookmarks-menu-button.bookmark-item[starred] {
2626 -moz-image-region: rect(0px 32px 16px 16px);
2629 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2631 padding-bottom: 2px;
2634 #BMB_bookmarksPopup[side="top"],
2635 #BMB_bookmarksPopup[side="bottom"] {
2637 margin-right: -20px;
2640 #BMB_bookmarksPopup[side="left"],
2641 #BMB_bookmarksPopup[side="right"] {
2643 margin-bottom: -20px;
2646 /* bookmarking panel */
2648 #editBookmarkPanelStarIcon {
2649 list-style-image: url("chrome://browser/skin/places/starred48.png");
2654 #editBookmarkPanelStarIcon[unstarred] {
2655 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2658 #editBookmarkPanelTitle {
2662 #editBookmarkPanelHeader,
2663 #editBookmarkPanelContent {
2664 margin-bottom: .5em;
2667 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2668 #editBMPanel_folderTree {
2672 /* ::::: content area ::::: */
2675 background-color: #9C9CFF;
2680 background-color: #000000;
2684 margin-inline-start: 0;
2693 padding-inline-start: 0px;
2696 #sidebar-header > .close-icon {
2697 /* padding: 4px 2px;
2700 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2703 #sidebar-header > .close-icon:hover,
2704 #sidebar-header > .close-icon:hover:active {
2705 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2708 #sidebar-splitter:-moz-locale-dir(ltr),
2709 #sidebar:-moz-locale-dir(ltr) {
2710 border-radius: 0 5px 0 0;
2713 #sidebar-splitter:-moz-locale-dir(rtl),
2714 #sidebar:-moz-locale-dir(rtl) {
2715 border-radius: 5px 0 0 0;
2718 .browserContainer > findbar {
2720 background-color: -moz-dialog;
2721 color: -moz-DialogText;
2730 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2733 #TabsToolbar .toolbar-holder {
2734 background-color: #000000; /* correct effect of being an actual toolbar */
2737 #main-window[disablechrome] #TabsToolbar,
2738 #TabsToolbar[tabsontop="false"] {
2739 border-bottom: 1px solid #008484;
2742 /* === BEGIN tabs.inc.css === */
2745 /* --tab-toolbar-navbar-overlap: 1px; */
2746 /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2747 /* --tab-min-height: 31px; */
2750 /* --tab-stroke-background-size: auto 100%; */
2754 .tabs-newtab-button,
2755 #TabsToolbar > #new-tab-button {
2760 padding: 1px 4px 2px;
2763 .tabbrowser-tab:first-of-type {
2764 margin-inline-start: 2px;
2767 .tabs-newtab-button,
2768 #TabsToolbar > #new-tab-button,
2769 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2770 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2771 border-radius: 8px 8px 0px 0px;
2772 margin-inline-start: 0;
2775 .tabs-newtab-button:not(:hover),
2776 #TabsToolbar > #new-tab-button:not(:hover),
2777 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2778 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2779 background-color: #C09070;
2782 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2783 .tabbrowser-tab[visuallyselected=true] {
2784 /* position: relative;
2788 .tab-background-middle {
2794 .tab-content[pinned] {
2799 .tab-sharing-icon-overlay,
2805 .tab-sharing-icon-overlay,
2809 margin-inline-end: 3px;
2813 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2816 .tab-icon-image[sharing]:not([selected]),
2817 .tab-sharing-icon-overlay {
2818 animation: 3s linear pulse infinite;
2822 0%, 16.66%, 83.33%, 100% {
2830 .tab-icon-image[sharing]:not([selected]) {
2831 animation-delay: -1.5s;
2834 .tab-sharing-icon-overlay {
2835 /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */
2836 margin-inline-start: -22px;
2840 .tab-sharing-icon-overlay[sharing="camera"] {
2841 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
2844 .tab-sharing-icon-overlay[sharing="microphone"] {
2845 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
2848 .tab-sharing-icon-overlay[sharing="screen"] {
2849 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
2856 margin-inline-start: -15px;
2857 margin-inline-end: -1px;
2861 .tab-icon-overlay[crashed] {
2862 list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2865 .tab-icon-overlay[soundplaying],
2866 .tab-icon-overlay[muted]:not([crashed]),
2867 .tab-icon-overlay[blocked]:not([crashed]) {
2868 border-radius: 10px;
2871 .tab-icon-overlay[soundplaying]:hover,
2872 .tab-icon-overlay[muted]:hover,
2873 .tab-icon-overlay[blocked]:not([crashed]):hover {
2874 background-color: #FFCF00;
2877 .tab-icon-overlay[soundplaying] {
2878 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2881 .tab-icon-overlay[muted]:not([crashed]) {
2882 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2885 .tab-icon-overlay[blocked]:not([crashed]) {
2886 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-blocked");
2889 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not([selected]):not(:hover),
2890 .tab-icon-overlay[soundplaying][selected]:-moz-lwtheme-brighttext:not(:hover) {
2891 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2894 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not([selected]):not(:hover),
2895 .tab-icon-overlay[mouted][selected]:-moz-lwtheme-brighttext:not(:hover) {
2896 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2899 #TabsToolbar[brighttext] .tab-icon-overlay[blocked]:not([crashed]):not([selected]):not(:hover),
2900 .tab-icon-overlay[blocked][selected]:-moz-lwtheme-brighttext:not(:hover) {
2901 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-blocked");
2904 .tab-throbber[busy] {
2905 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2908 .tab-throbber[progress] {
2909 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2912 @media (min-resolution: 1.1dppx) {
2913 .tab-throbber[busy] {
2914 list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
2917 .tab-throbber[progress] {
2918 list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
2922 .tab-throbber[pinned],
2923 .tab-icon-image[pinned] {
2924 margin-inline-start: 2px;
2925 margin-inline-end: 2px;
2929 /* this needs to add up to the 16px of the icon image */
2931 margin-top: 2px !important;
2932 margin-bottom: 2px !important;
2936 margin-inline-start: 4px;
2942 .tab-icon-sound[soundplaying],
2943 .tab-icon-sound[muted],
2944 .tab-icon-sound[blocked] {
2945 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
2946 filter: url(chrome://global/skin/filters.svg#fill);
2950 .tab-icon-sound[muted] {
2951 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
2954 .tab-icon-sound[blocked] {
2955 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked);
2963 .tab-icon-sound[soundplaying-scheduledremoval]:not([muted]):not(:hover),
2964 .tab-icon-overlay[soundplaying-scheduledremoval]:not([muted]):not(:hover) {
2965 transition: opacity .3s linear var(--soundplaying-removal-delay);
2970 .tabs-newtab-button {
2971 /* overlap the tab curves */
2974 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
2978 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
2979 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
2982 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
2983 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
2986 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
2989 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
2992 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
2993 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
2996 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
2997 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
3000 .tab-background-start[selected=true]::after,
3001 .tab-background-start[selected=true]::before,
3002 .tab-background-start,
3003 .tab-background-end,
3004 .tab-background-end[selected=true]::after,
3005 .tab-background-end[selected=true]::before {
3008 .tabbrowser-tab:not([visuallyselected=true]),
3009 .tabbrowser-tab:-moz-lwtheme {
3012 /* tabbrowser-tab focus ring */
3013 .tabbrowser-tab:focus {
3014 outline: 1px dotted;
3019 .tabbrowser-tab[visuallyselected="true"] {
3022 /* End selected tab */
3024 /* Tab pointer-events */
3027 pointer-events: none;
3030 .tab-background-middle,
3031 .tabs-newtab-button,
3032 .tab-icon-overlay[soundplaying],
3033 .tab-icon-overlay[muted]:not([crashed]),
3034 .tab-icon-overlay[blocked]:not([crashed]),
3037 pointer-events: auto;
3043 .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
3044 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
3046 .tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
3047 background-color: #E7ADE7;
3050 .tab-label[attention]:not([selected="true"]) {
3054 .tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
3055 background-color: #3333FF;
3059 /* Tab separators */
3061 .tabbrowser-tab::after,
3062 .tabbrowser-tab::before {
3064 margin-inline-start: -1px;
3065 background-image: linear-gradient(transparent 5px,
3067 currentColor calc(100% - 4px),
3068 transparent calc(100% - 4px));
3072 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3073 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3077 /* Also show separators beside the selected tab when dragging it. */
3079 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3080 .tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3081 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
3086 /* New tab button */
3088 .tabs-newtab-button {
3090 /* width: calc(36px + var(--tab-curve-width)); */
3092 @media (min-resolution: 1.1dppx) {
3093 /* image preloading hack from like lowdpi styles */
3094 #tabbrowser-tabs::before {
3097 .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
3098 .tabs-newtab-button:hover {
3101 .tab-background-middle[selected=true] {
3104 .tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
3105 .tab-background-end[selected=true]:-moz-locale-dir(rtl)::after {
3108 .tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
3109 .tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
3113 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
3117 /* All tabs menupopup */
3119 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3120 background-color: #402800;
3123 .alltabs-endimage[soundplaying],
3124 .alltabs-endimage[muted],
3125 .alltabs-endimage[blocked] {
3126 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
3127 filter: url(chrome://global/skin/filters.svg#fill);
3131 .alltabs-endimage[muted] {
3132 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
3135 .alltabs-endimage[blocked] {
3136 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked);
3139 /* === END tabs.inc.css === */
3141 /* Tab DnD indicator */
3142 .tab-drop-indicator {
3143 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3144 margin-bottom: -11px;
3147 /* Tab close button */
3149 list-style-image: url("chrome://global/skin/icons/close-button.gif") !important;
3150 -moz-image-region: auto !important;
3153 .tab-close-button:hover,
3154 .tab-close-button:hover[selected="true"] {
3155 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
3156 -moz-image-region: auto !important;
3159 .tab-close-button:hover:active,
3160 .tab-close-button:hover:active[selected="true"] {
3161 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
3162 -moz-image-region: auto !important;
3165 .tab-close-button > .button-icon,
3166 .tab-close-button > .button-box > .button-icon,
3167 .tab-close-button > .toolbarbutton-icon {
3168 width: auto !important;
3172 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3174 .tabbrowser-arrowscrollbox > .scrollbutton-up,
3175 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3179 background-origin: border-box;
3182 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3183 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3184 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3185 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3188 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3189 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3192 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3193 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3194 /* transform: scaleX(-1);*/
3197 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3198 transition: 1s background-color ease-out;
3201 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
3202 background-color: #008484;
3205 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3206 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3207 /* border-width: 0 2px 0 0;
3208 border-style: solid;
3209 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3212 .tabs-newtab-button > .toolbarbutton-icon {
3214 margin-bottom: -1px;
3217 .tabs-newtab-button,
3218 #TabsToolbar > #new-tab-button,
3219 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3220 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3221 list-style-image: url("chrome://browser/skin/tabbrowser/newtab.svg");
3222 -moz-image-region: auto;
3225 .tabs-newtab-button,
3226 .tabs-newtab-button:hover,
3227 #TabsToolbar > #new-tab-button,
3228 #TabsToolbar > #new-tab-button:hover {
3231 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3232 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3233 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3234 .tabs-newtab-button:-moz-lwtheme-brighttext,
3235 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3236 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3239 #TabsToolbar > #new-tab-button {
3244 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3247 #alltabs-button:hover,
3248 #alltabs-button:hover:active,
3249 #alltabs-button[open="true"] {
3250 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3253 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3254 #alltabs-button:-moz-lwtheme-brighttext {
3257 #alltabs-button > .toolbarbutton-icon {
3261 #alltabs-button > .toolbarbutton-menu-dropmarker {
3265 /* All tabs menupopup */
3266 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3267 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
3268 -moz-image-region: auto;
3271 .alltabs-item[selected="true"] {
3275 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3276 list-style-image: url("chrome://global/skin/icons/loading.png");
3279 @media (min-resolution: 1.1dppx) {
3280 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3281 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3285 toolbarbutton.chevron {
3286 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3289 toolbarbutton.chevron:hover {
3290 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3293 toolbar[brighttext] toolbarbutton.chevron {
3294 list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3297 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3298 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3299 transform: scaleX(-1);
3302 toolbarbutton.chevron > .toolbarbutton-text,
3303 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3307 toolbarbutton.chevron > .toolbarbutton-icon {
3311 #sidebar-throbber[loading="true"] {
3312 list-style-image: url("chrome://global/skin/icons/loading.png");
3313 margin-inline-end: 4px;
3316 @media (min-resolution: 1.1dppx) {
3317 #sidebar-throbber[loading="true"] {
3318 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3323 /* Bookmarks toolbar */
3324 #PlacesToolbarDropIndicator {
3325 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3328 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3329 background-color: #008484 !important;
3330 color: #FFCF00 !important;
3333 /* rules for menupopup drop indicators */
3334 .menupopup-drop-indicator-bar {
3336 /* these two margins must together compensate the indicator's height */
3338 margin-bottom: -1px;
3341 .menupopup-drop-indicator {
3342 list-style-image: none;
3344 margin-inline-end: -4em;
3345 background-color: #008484;
3348 /* === BEGIN notification-icons.inc.css === */
3350 #notification-popup-box {
3351 border-radius: 3px 0 0 3px;
3354 margin-inline-end: -5px;
3355 padding-inline-end: 5px;
3358 .notification-anchor-icon,
3359 #blocked-permissions-container > .blocked-permission-icon {
3362 margin-inline-start: 2px;
3365 /* This class can be used alone or in combination with the class defining the
3366 type of icon displayed. This rule must be defined before the others in order
3367 for its list-style-image to be overridden. */
3368 .notification-anchor-icon {
3369 list-style-image: url("chrome://global/skin/icons/information-16.png");
3372 .notification-anchor-icon:-moz-focusring {
3373 outline: 1px dotted #008484;
3376 @media (min-resolution: 1.1dppx) {
3377 .notification-anchor-icon {
3378 list-style-image: url(chrome://global/skin/icons/information-32.png);
3382 #notification-popup > .panel-arrowcontainer > .panel-arrowcontent {
3383 /* In order to display the action buttons near the edge of the arrow panel we
3384 * have to reset its default padding and specify the padding in the individual
3385 * "popupnotification" elements instead. To keep the rounded borders of the
3386 * panel, we also have to ensure the contents are clipped to the border box
3387 * by hiding the overflow, and we have to override the "display" property so
3388 * that the height of the contents is computed correctly in that case. */
3394 .notification-anchor-icon:not(.plugin-blocked),
3395 #blocked-permissions-container > .blocked-permission-icon {
3396 filter: url(chrome://global/skin/filters.svg#fill);
3400 .notification-anchor-icon:not(.plugin-blocked):not(:hover) {
3403 /* INDIVIDUAL NOTIFICATIONS */
3405 .popup-notification-icon[popupid="web-notifications"],
3406 .desktop-notification-icon {
3407 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification);
3410 .desktop-notification-icon.blocked-permission-icon {
3411 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked);
3415 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows);
3418 .geo-icon.blocked-permission-icon {
3419 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-blocked);
3422 .popup-notification-icon[popupid="geolocation"] {
3423 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-detailed);
3426 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3428 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB);
3431 .indexedDB-icon.blocked-permission-icon {
3432 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked);
3436 list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
3439 .popup-notification-icon[popupid="password"] {
3440 list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed);
3444 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera);
3447 .camera-icon.in-use {
3448 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-sharing);
3451 .camera-icon.blocked-permission-icon {
3452 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked);
3456 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone);
3459 .microphone-icon.in-use {
3460 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-sharing);
3463 .microphone-icon.blocked-permission-icon {
3464 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked);
3467 .popup-notification-icon.microphone-icon {
3468 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed);
3472 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen);
3475 .screen-icon.in-use {
3476 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-sharing);
3479 .screen-icon.blocked-permission-icon {
3480 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked);
3483 #webRTC-preview:not([hidden]) {
3484 display: -moz-stack;
3486 border: 1px solid #A09090;
3492 html|*#webRTC-previewVideo {
3494 /* If we don't set the min-width, width is ignored. */
3499 #webRTC-previewWarning {
3500 background: #FF0000 url("chrome://browser/skin/warning-white.svg") no-repeat .75em .75em;
3503 padding-inline-start: calc(1.5em + 16px);
3504 border-top: 1px solid #A09090;
3507 #webRTC-previewWarning > .text-link {
3508 margin-inline-start: 0;
3511 /* This icon has a block sign in it, so we don't need a blocked version. */
3513 list-style-image: url("chrome://browser/skin/notification-icons.svg#popup");
3518 .popup-notification-icon[popupid="drmContentPlaying"],
3520 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3523 .drm-icon:hover:active {
3524 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3527 #eme-notification-icon[firstplay=true] {
3528 animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3531 @keyframes emeTeachingMoment {
3532 0% {transform: translateX(0); }
3533 25% {transform: translateX(3px) }
3534 75% {transform: translateX(-3px) }
3535 100% { transform: translateX(0); }
3538 /* INSTALL ADDONS */
3541 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
3544 .popup-notification-icon[popupid="xpinstall-disabled"],
3545 .popup-notification-icon[popupid="addon-install-blocked"],
3546 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
3547 list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3550 .popup-notification-icon[popupid="addon-progress"] {
3551 list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3554 .popup-notification-icon[popupid="addon-install-failed"] {
3555 list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3558 .popup-notification-icon[popupid="addon-install-confirmation"] {
3559 list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3562 #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3563 list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3566 .popup-notification-icon[popupid="addon-install-complete"] {
3567 list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3570 .popup-notification-icon[popupid="addon-install-restart"] {
3571 list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3574 .popup-notification-icon[popupid="click-to-play-plugins"] {
3575 list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png);
3580 .popup-notification-icon[popupid*="offline-app-requested"],
3581 .popup-notification-icon[popupid="offline-app-usage"] {
3582 list-style-image: url(chrome://global/skin/icons/question-64.png);
3588 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
3591 .plugin-icon.plugin-blocked {
3592 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
3595 #notification-popup-box[hidden] {
3596 /* Override display:none to make the pluginBlockedNotification animation work
3597 when showing the notification repeatedly. */
3599 visibility: collapse;
3602 #plugins-notification-icon.plugin-blocked[showing] {
3603 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3606 @keyframes pluginBlockedNotification {
3617 .popup-notification-icon[popupid="servicesInstall"] {
3618 list-style-image: url(chrome://browser/skin/social/services-64.png);
3622 list-style-image: url(chrome://browser/skin/social/services-16.png);
3628 list-style-image: url(chrome://browser/skin/translation-16.png);
3629 -moz-image-region: rect(0px, 16px, 16px, 0px);
3632 .translation-icon.in-use {
3633 -moz-image-region: rect(0px, 32px, 16px, 16px);
3636 /* === END notification-icons.inc.css === */
3638 .popup-notification-body[popupid="addon-progress"],
3639 .popup-notification-body[popupid="addon-install-confirmation"] {
3644 /* Translation infobar */
3646 /* === BEGIN infobar.inc.css === */
3648 notification[value="translation"] .messageImage {
3649 list-style-image: url("chrome://browser/skin/translation-16.png");
3650 -moz-image-region: rect(0, 32px, 16px, 16px);
3653 @media (min-resolution: 1.25dppx) {
3654 notification[value="translation"] .messageImage {
3655 list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3656 -moz-image-region: rect(0, 64px, 32px, 32px);
3660 notification[value="translation"][state="translating"] .messageImage {
3661 list-style-image: url("chrome://browser/skin/translating-16.png");
3662 -moz-image-region: auto;
3665 @media (min-resolution: 1.25dppx) {
3666 notification[value="translation"][state="translating"] .messageImage {
3667 list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3671 notification[value="translation"] hbox[anonid="details"] {
3675 notification[value="translation"] button,
3676 notification[value="translation"] menulist {
3680 notification[value="translation"] menulist > .menulist-dropmarker {
3683 .translation-menupopup arrowscrollbox {
3687 .translation-attribution {
3689 -moz-box-align: end;
3693 .translation-attribution > label {
3697 .translation-attribution > image {
3701 .translation-welcome-panel {
3705 .translation-welcome-logo {
3708 list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3709 -moz-image-region: rect(0, 64px, 32px, 32px);
3712 .translation-welcome-content {
3713 margin-inline-start: 16px;
3716 .translation-welcome-headline {
3721 .translation-welcome-body {
3726 /* === END infobar.inc.css === */
3728 notification[value="translation"] {
3732 .translation-menupopup {
3733 -moz-appearance: none;
3736 /* Bookmarks roots menu-items */
3737 #subscribeToPageMenuitem:not([disabled]),
3738 #subscribeToPageMenupopup {
3739 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3742 #bookmarksToolbarFolderMenu,
3743 #BMB_bookmarksToolbar,
3744 #panelMenu_bookmarksToolbar {
3745 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3746 -moz-image-region: auto;
3749 #BMB_unsortedBookmarks,
3750 #panelMenu_unsortedBookmarks {
3751 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3752 -moz-image-region: auto;
3757 .statuspanel-label {
3760 background: #404000;
3761 border: 1px none #9C9CFF;
3762 border-top-style: solid;
3767 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3768 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3769 border-right-style: solid;
3770 border-top-right-radius: .3em;
3774 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3775 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3776 border-left-style: solid;
3777 border-top-left-radius: .3em;
3781 /* HACK to abolish devily color on main content */
3784 background-color: transparent !important;
3787 /* === BEGIN fullscreen/warning.inc.css === */
3789 html|*.pointerlockfswarning {
3790 align-items: center;
3791 background: rgba(0, 0, 0, 0.9);
3792 border: 2px solid #A09090;
3793 box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
3796 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3799 html|*.pointerlockfswarning::before {
3801 width: 24px; height: 24px;
3804 html|*.pointerlockfswarning[data-identity="verifiedIdentity"]::before,
3805 html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before {
3806 content: url("chrome://browser/skin/fullscreen/secure.svg");
3809 html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before {
3810 content: url("chrome://browser/skin/fullscreen/insecure.svg");
3813 html|*.pointerlockfswarning-domain-text,
3814 html|*.pointerlockfswarning-generic-text {
3816 font-weight: lighter;
3821 html|*.pointerlockfswarning-domain {
3826 html|*.pointerlockfswarning-exit-button {
3828 font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3830 font-weight: lighter;
3832 box-sizing: content-box;
3834 border-radius: 300px;
3836 background-color: #C09070;
3840 /* === END fullscreen/warning.inc.css === */
3842 /* === BEGIN ctrlTab.inc.css === */
3847 -moz-appearance: none;
3848 background: rgba(0%,0%,0%,.7);
3851 padding: 20px 10px 10px;
3855 .ctrlTab-favicon[src] {
3856 background-color: #000000;
3862 .ctrlTab-preview-inner > .tabPreview-canvas {
3863 /* box-shadow: 1px 1px 2px hsl(0,0%,12%);*/
3866 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3870 .ctrlTab-preview-inner {
3872 border: 2px solid transparent;
3873 border-radius: .5em;
3876 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner {
3877 margin: -10px -10px 0;
3880 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3881 background-color: #000000;
3884 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3886 background-color: #000000;
3888 border-color: #9C9CFF;
3895 /* === END ctrlTab.inc.css === */
3897 /* === BEGIN commandline.inc.css === */
3899 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
3900 We are copy/pasting variables from light-theme and dark-theme,
3901 since they aren't loaded in this context (within browser.css). */
3902 :root #developer-toolbar {
3903 --gcli-background-color: #000000; /* --theme-toolbar-background */
3904 --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
3905 --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
3906 --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
3907 --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
3908 --selection-background: #008484; /* --theme-selection-background */
3909 --selection-color: #000000; /* --theme-selection-color */
3910 --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */
3911 --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */
3914 /* Developer toolbar */
3916 #developer-toolbar {
3917 border-top: 3px solid var(--gcli-background-color);
3918 border-bottom: none;
3921 #developer-toolbar .toolbar-holder {
3922 background-color: #8050B0;
3926 #developer-toolbar .toolbar-holder {
3927 background-color: #8050B0;
3931 #developer-toolbar .toolbar-startcap,
3932 #developer-toolbar .toolbar-endcap{
3933 background-color: #6000CF;
3936 #developer-toolbar {
3938 min-height: 32px; */
3941 #developer-toolbar > toolbarbutton {
3943 background-color: transparent;
3949 .developer-toolbar-button > image {
3950 /* margin: auto 10px; */
3953 #developer-toolbar-toolbox-button > label {
3957 .developer-toolbar-button > .toolbarbutton-icon {
3962 #developer-toolbar-toolbox-button {
3963 list-style-image: url("chrome://devtools/skin/images/toggle-tools.png");
3964 -moz-image-region: rect(0px, 16px, 16px, 0px);
3967 #developer-toolbar-toolbox-button > label {
3971 #developer-toolbar-toolbox-button:hover,
3972 #developer-toolbar-toolbox-button:hover:active,
3973 #developer-toolbar-toolbox-button[checked=true] {
3974 -moz-image-region: rect(0px, 32px, 16px, 16px);
3977 @media (min-resolution: 2dppx) {
3978 #developer-toolbar-toolbox-button {
3979 list-style-image: url("chrome://devtools/skin/images/toggle-tools@2x.png");
3980 -moz-image-region: rect(0px, 32px, 32px, 0px);
3983 #developer-toolbar-toolbox-button:hover,
3984 #developer-toolbar-toolbox-button:hover:active,
3985 #developer-toolbar-toolbox-button[checked=true] {
3986 -moz-image-region: rect(0px, 64px, 32px, 32px);
3992 html|*#gcli-tooltip-frame,
3993 html|*#gcli-output-frame {
3996 background-color: transparent;
4002 background-color: transparent;
4005 .gclitoolbar-input-node,
4006 .gclitoolbar-complete-node {
4008 -moz-box-align: center;
4012 background-color: transparent;
4015 .gclitoolbar-input-node {
4016 /* line-height: 32px;
4017 outline-style: none; */
4018 background-repeat: no-repeat;
4019 background-color: var(--gcli-input-background);
4022 .gclitoolbar-input-node[focused="true"] {
4023 background-color: var(--gcli-input-focused-background);
4026 .gclitoolbar-input-node::before {
4028 display: inline-block;
4029 -moz-box-ordinal-group: 0;
4033 background-image: var(--command-line-image);
4036 .gclitoolbar-input-node[focused="true"]::before {
4037 background-image: var(--command-line-image-focus);
4040 .gclitoolbar-input-node:not([focused="true"]) {
4041 border-color: transparent;
4044 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
4045 background-color: var(--selection-background);
4046 color: var(--selection-color);
4049 .gclitoolbar-complete-node {
4051 background-color: transparent;
4054 pointer-events: none;
4057 .gcli-in-incomplete,
4061 .gcli-in-closebrace,
4068 .gcli-in-incomplete {
4069 border-bottom: 2px dotted #8050B0;
4073 border-bottom: 2px dotted #FF0000;
4084 .gcli-in-closebrace {
4088 /* === END commandline.inc.css === */
4090 /* === BEGIN responsivedesign.inc.css === */
4092 /* Responsive Mode */
4094 .browserContainer[responsivemode] {
4095 background-color: #221500;
4096 padding: 0 20px 20px 20px;
4099 .browserStack[responsivemode] {
4100 box-shadow: 0 0 7px #9C9CFF;
4103 .devtools-responsiveui-toolbar {
4104 background: transparent;
4105 /* text color is textColor from dark theme, since no theme is applied to
4106 * the responsive toolbar.
4112 border-bottom-width: 0;
4115 .devtools-responsiveui-textinput {
4116 /* -moz-appearance: none;
4119 border: 1px solid #111;
4126 .devtools-responsiveui-textinput[attention] {
4127 /* border-color: #38ace6;
4128 background: rgba(56,172,230,0.4);*/
4131 .devtools-responsiveui-menulist,
4132 .devtools-responsiveui-toolbarbutton {
4133 -moz-box-align: center;
4135 /* min-height: 22px;*/
4136 /* margin: 0 3px; */
4139 .devtools-responsiveui-menulist .menulist-editable-box {
4140 background-color: transparent;
4143 .devtools-responsiveui-menulist html|*.menulist-editable-input {
4148 .devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4149 /* background: hsla(212,7%,57%,.35);*/
4152 .devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4157 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4158 -moz-box-orient: horizontal;
4161 .devtools-responsiveui-menulist:-moz-focusring,
4162 .devtools-responsiveui-toolbarbutton:-moz-focusring {
4163 /* outline: 1px dotted hsla(210,30%,85%,0.7);
4164 outline-offset: -4px;*/
4167 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4171 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4172 /* border-color: hsla(210,8%,5%,.6);
4173 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4174 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); */
4177 .devtools-responsiveui-menulist[open=true],
4178 .devtools-responsiveui-toolbarbutton[open=true],
4179 .devtools-responsiveui-toolbarbutton[checked=true] {
4180 /* border-color: hsla(210,8%,5%,.6) !important;
4181 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4182 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); */
4185 .devtools-responsiveui-toolbarbutton[checked=true] {
4186 /* color: hsl(208,100%,60%); */
4189 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
4190 /* background-color: transparent !important;*/
4193 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4194 /* background-color: hsla(210,8%,5%,.2) !important;*/
4197 .devtools-responsiveui-menulist > .menulist-label-box {
4201 .devtools-responsiveui-menulist > .menulist-dropmarker {
4202 /* display: -moz-box;
4203 background-color: transparent;
4204 list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4205 -moz-box-align: center;
4210 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
4213 border-inline-end: 1px solid hsla(210,8%,5%,.45);
4214 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
4217 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
4218 /* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
4221 .devtools-responsiveui-toolbarbutton[type=menu-button] {
4222 /* padding: 0 1px;*/
4223 -moz-box-align: stretch;
4226 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
4227 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
4228 /* list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4229 -moz-box-align: center;
4233 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
4234 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
4238 .devtools-responsiveui-close {
4239 list-style-image: url("chrome://devtools/skin/close.svg");
4242 .devtools-responsiveui-close:hover {
4243 filter: url(chrome://devtools/skin/images/filters.svg#checked-icon-state);
4246 .devtools-responsiveui-close > image {
4250 .devtools-responsiveui-rotate {
4251 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate.png");
4252 -moz-image-region: rect(0px,16px,16px,0px);
4255 .devtools-responsiveui-rotate:hover {
4256 -moz-image-region: rect(0px,32px,16px,16px);
4259 @media (min-resolution: 2dppx) {
4260 .devtools-responsiveui-rotate {
4261 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate@2x.png");
4264 .devtools-responsiveui-rotate:hover {
4265 -moz-image-region: rect(0px,64px,32px,32px);
4269 .devtools-responsiveui-touch {
4270 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch.png");
4271 -moz-image-region: rect(0px,16px,16px,0px);
4274 .devtools-responsiveui-touch:hover,
4275 .devtools-responsiveui-touch[checked],
4276 .devtools-responsiveui-touch[checked]:hover {
4277 -moz-image-region: rect(0px,32px,16px,16px);
4280 @media (min-resolution: 2dppx) {
4281 .devtools-responsiveui-touch {
4282 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch@2x.png");
4283 -moz-image-region: rect(0px,32px,32px,0px);
4286 .devtools-responsiveui-touch:hover,
4287 .devtools-responsiveui-touch[checked],
4288 .devtools-responsiveui-touch[checked]:hover {
4289 -moz-image-region: rect(0px,64px,32px,32px);
4293 .devtools-responsiveui-screenshot {
4294 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot.png");
4295 -moz-image-region: rect(0px,16px,16px,0px);
4298 .devtools-responsiveui-screenshot:hover {
4299 -moz-image-region: rect(0px,32px,16px,16px);
4302 @media (min-resolution: 2dppx) {
4303 .devtools-responsiveui-screenshot {
4304 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot@2x.png");
4307 .devtools-responsiveui-screenshot:hover {
4308 -moz-image-region: rect(0px,64px,32px,32px);
4312 .devtools-responsiveui-resizebarV {
4316 transform: translate(12px, -12px);
4317 background-size: cover;
4318 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer.png");
4321 .devtools-responsiveui-resizebarH {
4325 transform: translate(-12px, 12px);
4326 background-size: cover;
4327 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer.png");
4330 .devtools-responsiveui-resizehandle {
4334 transform: translate(12px, 12px);
4335 background-size: cover;
4336 background-image: url("chrome://devtools/skin/images/responsive-se-resizer.png");
4339 /* FxOS custom mode with additional buttons and phone look'n feel */
4341 /* Hide devtools manual resizer */
4342 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
4343 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
4344 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
4348 /* Gives responsive mode a phone look'n feel */
4349 .browserStack[responsivemode].fxos-mode {
4350 padding: 60px 15px 0;
4352 border-radius: 25px / 20px;
4353 border-bottom-left-radius: 0;
4354 border-bottom-right-radius: 0;
4355 border: 1px solid #FFFFFF;
4356 border-bottom-width: 0;
4358 background-color: #353535;
4360 box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
4362 background-image: linear-gradient(to right, #111 11%, #333 56%);
4366 .devtools-responsiveui-hardware-buttons {
4367 -moz-appearance: none;
4370 border: 1px solid #FFFFFF;
4371 border-bottom-left-radius: 25px;
4372 border-bottom-right-radius: 25px;
4373 border-top-width: 0;
4375 box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
4377 background-image: linear-gradient(to right, #111 11%, #333 56%);
4380 .devtools-responsiveui-home-button {
4381 -moz-user-focus: ignore;
4384 list-style-image: url("chrome://devtools/skin/images/responsiveui-home.png");
4387 .devtools-responsiveui-sleep-button {
4388 -moz-user-focus: ignore;
4389 -moz-appearance: none;
4390 /* compensate browserStack top padding */
4398 border: 1px solid #444;
4399 border-top-right-radius: 12px;
4400 border-top-left-radius: 12px;
4401 border-bottom-color: transparent;
4403 background-image: linear-gradient(to top, #111 11%, #333 56%);
4406 .devtools-responsiveui-sleep-button:hover:active {
4407 background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
4410 .devtools-responsiveui-volume-buttons {
4414 .devtools-responsiveui-volume-up-button,
4415 .devtools-responsiveui-volume-down-button {
4416 -moz-user-focus: ignore;
4417 -moz-appearance: none;
4418 border: 1px solid red;
4422 border: 1px solid #444;
4423 border-right-color: transparent;
4425 background-image: linear-gradient(to right, #111 11%, #333 56%);
4428 .devtools-responsiveui-volume-up-button:hover:active,
4429 .devtools-responsiveui-volume-down-button:hover:active {
4430 background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
4433 .devtools-responsiveui-volume-up-button {
4434 border-top-left-radius: 12px;
4437 .devtools-responsiveui-volume-down-button {
4438 border-bottom-left-radius: 12px;
4441 @media (min-resolution: 2dppx) {
4442 .devtools-responsiveui-resizebarV {
4443 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer@2x.png");
4446 .devtools-responsiveui-resizebarH {
4447 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer@2x.png");
4450 .devtools-responsiveui-resizehandle {
4451 background-image: url("chrome://devtools/skin/images/responsive-se-resizer@2x.png");
4455 /* === END responsivedesign.inc.css === */
4457 /* === including indicator.css is done at the start of the file === */
4461 #developer-toolbar-toolbox-button[error-count]:before {
4465 background-color: #FF0000;
4467 margin-inline-end: 5px;
4470 /* === BEGIN plugin-doorhanger.inc.css === */
4473 * Plugin Doorhanger Styles
4476 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4477 padding: 6px 1px 2px;
4480 .click-to-play-plugins-notification-center-box {
4483 .plugin-popupnotification-centeritem:nth-child(odd) {
4484 /* background-color: rgba(0,0,0,0.1);*/
4487 .center-item-label {
4489 text-overflow: ellipsis;
4492 .center-item-warning-icon {
4493 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.svg");
4494 background-repeat: no-repeat;
4497 margin-inline-start: 6px;
4500 .click-to-play-plugins-notification-button-container {
4503 .click-to-play-popup-button {
4507 .click-to-play-plugins-notification-description-box {
4511 padding-bottom: 3px;
4514 .click-to-play-plugins-outer-description {
4518 .click-to-play-plugins-notification-link,
4523 .messageImage[value="plugin-hidden"] {
4524 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
4527 /* Keep any changes to this style in sync with pluginProblem.css */
4528 notification.pluginVulnerable {
4531 notification.pluginVulnerable .messageImage {
4532 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
4535 /* === END plugin-doorhanger.inc.css === */
4537 /* === BEGIN customizeMode.inc.css === */
4539 /* Customization mode */
4542 --drag-drop-transition-duration: .3s;
4545 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
4549 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
4550 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4551 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4556 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4557 pointer-events: none;
4560 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4561 #PanelUI-contents > .panel-customization-placeholder {
4562 -moz-outline-radius: 2.5px;
4563 outline: 1px dashed transparent;
4566 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4567 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4568 -moz-box-ordinal-group: 0;
4573 outline-offset: -2px;
4574 pointer-events: none;
4580 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4581 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4582 offset from the bottom effectively the same as other targets (-2px). */
4583 #main-window[customize-entered] #TabsToolbar.customization-target::before {
4587 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4588 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4589 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4590 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
4594 /* Most target outlines are shown on hover and drag over but the panel menu uses
4595 placeholders instead. */
4596 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4597 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4598 /* nav-bar and panel outlines are always shown */
4599 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4600 outline-color: currentColor;
4603 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4604 transition: outline-color 250ms linear;
4607 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
4608 transition: outline-color 250ms linear;
4609 outline-color: var(--panel-separator-color);
4612 #PanelUI-contents > .panel-customization-placeholder {
4614 outline-offset: -5px;
4617 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
4619 /* padding-left: 10px;
4620 padding-right: 10px;*/
4623 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
4627 #customization-container {
4628 background-color: #000000;
4632 #customization-palette,
4633 #customization-empty {
4634 padding: 0 15px 15px;
4637 #customization-header {
4639 line-height: 1.75em;
4642 margin: 25px 25px 12px;
4643 padding-bottom: 12px;
4644 border-bottom: 1px solid #A09090;
4647 #customization-panel-container {
4648 padding: 10px 10px 0px;
4651 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4652 #customization-footer {
4653 /*background-color: rgb(236,236,236);*/
4656 #customization-footer {
4657 border-top: 1px solid #9C9CFF;
4661 .customizationmode-button {
4665 .customizationmode-button:hover {
4668 .customizationmode-button > .box-inherit {
4671 .customizationmode-button > .button-icon {
4674 .customizationmode-button:not([type=menu]) > .button-text {
4677 .customizationmode-button > .button-menu-dropmarker {
4682 .customizationmode-button[checked] {
4683 background-color: #008484;
4686 .customizationmode-button[checked]:hover:not([disabled]),
4687 .customizationmode-button:hover:not([disabled]) {
4688 background-color: #FFCF00;
4691 .customizationmode-button[checked]:hover:active:not([disabled]),
4692 .customizationmode-button:hover:active:not([disabled]),
4693 .customizationmode-button[open] {
4694 background-color: #FF9F00;
4697 .customizationmode-button[disabled="true"] {
4700 .customizationmode-button > .box-inherit > .box-inherit > .button-icon,
4701 .customizationmode-button > .button-box > .button-icon {
4705 #customization-titlebar-visibility-button {
4706 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
4707 -moz-image-region: rect(0, 16px, 16px, 0);
4710 #customization-titlebar-visibility-button:hover {
4711 -moz-image-region: rect(16px, 16px, 32px, 0);
4714 #customization-titlebar-visibility-button > .button-box {
4716 padding-bottom: 1px;
4719 #customization-titlebar-visibility-button:hover:active > .button-box {
4724 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
4725 #customization-titlebar-visibility-button > .button-box > .button-text {
4726 /* Sadly, button.css thinks its margins are perfect for everyone. */
4727 margin-inline-start: 5px !important;
4730 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
4734 background-image: url("chrome://browser/skin/theme-switcher-icon.png");
4735 background-size: contain;
4738 #customization-titlebar-visibility-button > .button-box > .button-icon {
4739 vertical-align: middle;
4742 #customization-titlebar-visibility-button[checked] {
4743 -moz-image-region: rect(0, 32px, 16px, 16px);
4744 background-color: #008484;
4747 #customization-titlebar-visibility-button[checked]:hover {
4748 -moz-image-region: rect(16px, 32px, 32px, 16px);
4749 background-color: #FFCF00;
4752 #customization-titlebar-visibility-button[checked]:hover:active {
4753 background-color: #FF9F00;
4756 @media (min-resolution: 1.1dppx) {
4757 #customization-titlebar-visibility-button {
4758 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
4759 -moz-image-region: rect(0, 48px, 48px, 0);
4762 #customization-titlebar-visibility-button:hover {
4763 -moz-image-region: rect(48px, 48px, 96px, 0);
4766 #customization-titlebar-visibility-button[checked] {
4767 -moz-image-region: rect(0, 96px, 48px, 48px);
4770 #customization-titlebar-visibility-button[checked]:hover {
4771 -moz-image-region: rect(48px, 96px, 96px, 48px);
4775 #main-window[customize-entered] #customization-panel-container {
4776 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4777 background-position: left top;
4778 background-repeat: repeat;
4779 background-size: auto;
4780 background-attachment: fixed;
4783 toolbarpaletteitem[place="toolbar"] {
4784 transition: border-width 250ms ease-in-out;
4787 toolbarpaletteitem[mousedown] {
4788 outline: 1px solid #008484;
4789 cursor: -moz-grabbing;
4793 .panel-customization-placeholder,
4794 toolbarpaletteitem[place="palette"],
4795 toolbarpaletteitem[place="panel"] {
4796 transition: transform var(--drag-drop-transition-duration) ease-in-out;
4799 #customization-palette {
4800 transition: opacity .3s ease-in-out;
4804 #customization-palette[showing="true"] {
4808 toolbarpaletteitem toolbarbutton[disabled] {
4809 /* color: inherit !important;*/
4812 toolbarpaletteitem[notransition].panel-customization-placeholder,
4813 toolbarpaletteitem[notransition][place="toolbar"],
4814 toolbarpaletteitem[notransition][place="palette"],
4815 toolbarpaletteitem[notransition][place="panel"] {
4819 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
4820 toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
4821 toolbarpaletteitem > toolbaritem.panel-wide-item,
4822 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
4823 transition: transform var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important;
4826 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
4827 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
4828 transform: scale(1.3);
4831 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
4832 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
4833 transform: scale(1.1);
4836 /* Override the toolkit styling for items being dragged over. */
4837 toolbarpaletteitem[place="toolbar"] {
4838 border-left-width: 0;
4839 border-right-width: 0;
4844 #customization-palette:not([hidden]) {
4845 margin-bottom: 25px;
4848 toolbarpaletteitem[place="palette"]:-moz-focusring,
4849 toolbarpaletteitem[place="panel"]:-moz-focusring,
4850 toolbarpaletteitem[place="toolbar"]:-moz-focusring {
4854 toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring,
4855 toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring,
4856 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4857 /* Delay adding the focusring back until after the transform transition completes. */
4858 transition: outline-width .01s linear var(--drag-drop-transition-duration);
4859 outline: 1px dotted;
4860 -moz-outline-radius: 2.5px;
4863 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4864 outline-offset: -5px;
4867 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4868 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
4869 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
4870 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
4874 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4875 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
4885 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
4886 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
4890 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
4891 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
4894 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
4895 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
4899 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
4900 -moz-box-pack: center;
4904 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
4905 margin-inline-end: 5px;
4908 #customization-palette > toolbarpaletteitem > label {
4914 #customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
4915 -moz-box-orient: vertical;
4916 /* Make the panel padding uniform across all platforms due to the
4917 styling of the section headers and footer. */
4921 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
4926 .customization-lwtheme-menu-theme {
4927 -moz-appearance: none;
4930 padding-inline-end: 5px;
4932 padding-inline-start: 0;
4935 .customization-lwtheme-menu-theme[defaulttheme] {
4936 list-style-image: url(chrome://browser/skin/Fxtheme-switcher-icon.png);
4939 .customization-lwtheme-menu-theme[active="true"] {
4940 background-color: #008484;
4943 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
4947 .customization-lwtheme-menu-theme > .toolbarbutton-text {
4951 #customization-lwtheme-menu-header,
4952 #customization-lwtheme-menu-recommended {
4957 #customization-lwtheme-menu-header,
4958 #customization-lwtheme-menu-recommended,
4959 #customization-lwtheme-menu-footer {
4960 background-color: #A09090;
4962 margin-right: -10px;
4966 #customization-lwtheme-menu-header {
4968 border-top-right-radius: 3px;
4969 border-top-left-radius: 3px;
4972 #customization-lwtheme-menu-recommended {
4975 #customization-lwtheme-menu-footer {
4976 margin-bottom: -10px;
4977 border-bottom-right-radius: 3px;
4978 border-bottom-left-radius: 3px;
4981 .customization-lwtheme-menu-footeritem {
4982 -moz-appearance: none;
4984 background-color: #C09070;
4986 border: 1px solid transparent;
4992 .customization-lwtheme-menu-footeritem:hover {
4993 background-color: #FFCF00;
4996 .customization-lwtheme-menu-footeritem:first-child {
4999 /* === END customizeMode.inc.css === */
5001 /* === BEGIN customizeTip.inc.css === */
5003 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
5010 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
5011 border: 1px solid #9C9CFF;
5015 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
5016 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
5019 .customization-tipPanel-infoBox {
5020 margin: 20px 25px 25px;
5022 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
5023 background-repeat: no-repeat;
5026 .customization-tipPanel-content {
5032 .customization-tipPanel-em {
5037 .customization-tipPanel-contentImage {
5039 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
5047 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
5048 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
5051 .customization-tipPanel-link {
5052 -moz-appearance: none;
5053 background: transparent;
5061 .customization-tipPanel-link > .button-box > .button-text {
5062 margin: 0 !important;
5065 .customization-tipPanel-closeBox > .close-icon {
5066 -moz-appearance: none;
5068 margin-inline-end: -25px;
5071 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
5072 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5073 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
5076 /* === END customizeTip.inc.css === */
5079 * This next rule is a hack to disable subpixel anti-aliasing on all
5080 * labels during the customize mode transition. Subpixel anti-aliasing
5081 * on Windows with Direct2D layers acceleration is particularly slow to
5082 * paint, so this hack is how we sidestep that performance bottleneck.
5084 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
5085 transform: perspective(0.01px);
5088 #main-window[customize-entered] > #tab-view-deck {
5089 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5090 background-attachment: fixed;
5093 #main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
5094 background-repeat: no-repeat;
5095 background-position: right top;
5096 background-attachment: fixed;
5097 /* The image will get set from CustomizeMode.jsm */
5098 background-image: none;
5099 background-color: transparent;
5102 #main-window[customization-lwtheme]:-moz-lwtheme {
5103 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5104 background-repeat: repeat;
5105 background-attachment: fixed;
5106 background-position: left top;
5109 #main-window[customize-entered] #browser-bottombox,
5110 #main-window[customize-entered] #customization-container {
5111 border-left: 1px solid #9C9CFF;
5112 border-right: 1px solid #9C9CFF;
5113 background-clip: padding-box;
5116 #main-window[customize-entered] #browser-bottombox {
5117 border-bottom: 1px solid #9C9CFF;
5120 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
5124 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5128 /* End customization mode */
5130 /* Private browsing indicators */
5133 * Currently, we have two places where we put private browsing indicators on
5134 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5135 * When tabsintitlebar is disabled, we draw the indicator at the end of the
5136 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5137 * want the bottom border of the image to line up with the bottom of the window
5138 * caption buttons. That's why there's so much special-casing going on in here.
5140 .private-browsing-indicator {
5142 pointer-events: none;
5145 #private-browsing-indicator-titlebar {
5150 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5154 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5158 #TabsToolbar > .private-browsing-indicator {
5159 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5160 margin-inline-start: 4px;
5164 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5165 * mode, since the tabstrip "mimics" the titlebar in that case with its own
5166 * min/max/close window buttons.
5168 #private-browsing-indicator-titlebar > .private-browsing-indicator,
5169 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5170 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5171 margin-inline-end: 4px;
5177 /* This one is for Linux */
5178 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5179 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5183 /* End private browsing indicators */
5185 /* === BEGIN UITour.inc.css === */
5189 #UITourHighlightContainer {
5190 -moz-appearance: none;
5192 background-color: transparent;
5193 /* This is a buffer to compensate for the movement in the "wobble" effect,
5194 and for the box-shadow of #UITourHighlight. */
5199 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5200 border-radius: 40px;
5201 border: 1px solid #9C9CFF;
5202 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5203 on Linux without an X compositor where opacity is either 0 or 1. */
5204 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5209 #UITourTooltipBody {
5210 -moz-box-align: start;
5213 #UITourTooltipTitleContainer {
5214 -moz-box-align: start;
5215 margin-bottom: 10px;
5218 #UITourTooltipIcon {
5221 margin-inline-end: 10px;
5224 #UITourTooltipTitle,
5225 #UITourTooltipDescription {
5229 #UITourTooltipTitle {
5235 #UITourTooltipDescription {
5236 margin-inline-start: 0;
5237 margin-inline-end: 0;
5239 line-height: 1.8rem;
5240 margin-bottom: 0; /* Override global.css */
5243 #UITourTooltipClose {
5245 -moz-appearance: none;
5247 background-color: transparent;
5249 margin-inline-start: 4px;
5253 #UITourTooltipClose > .toolbarbutton-text {
5257 #UITourTooltipButtons {
5259 background-color: rgba(0,0,0,.2);
5260 border-top: 1px solid rgba(0,0,0,.4);
5261 margin: 10px -16px -16px;
5265 #UITourTooltipButtons > label,
5266 #UITourTooltipButtons > button {
5270 #UITourTooltipButtons > label:first-child,
5271 #UITourTooltipButtons > button:first-child {
5272 margin-inline-start: 0;
5275 #UITourTooltipButtons > label:last-child,
5276 #UITourTooltipButtons > button:last-child {
5277 margin-inline-end: 0;
5280 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
5283 margin-inline-end: 5px;
5286 #UITourTooltipButtons > label,
5287 #UITourTooltipButtons > button .button-text {
5291 #UITourTooltipButtons > button:not(.button-link) {
5292 -moz-appearance: none;
5293 background-color: #C09070;
5294 border-radius: 3000px;
5298 transition-property: background-color, color;
5299 transition-duration: 150ms;
5302 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5303 background-color: #FFCF00;
5307 #UITourTooltipButtons > label,
5308 #UITourTooltipButtons > button.button-link {
5309 -moz-appearance: none;
5310 background: transparent;
5313 color: rgba(0,0,0,0.35);
5315 padding-right: 10px;
5318 #UITourTooltipButtons > button.button-link:hover {
5322 /* The primary button gets the same color as the customize button. */
5323 #UITourTooltipButtons > button.button-primary {
5324 background-color: #A06060; /* LCARS default button background color */
5327 padding-right: 30px;
5330 #UITourTooltipButtons > button.button-primary:not(:active):hover {
5331 background-color: #FFCF00;
5335 /* Notification overrides for Heartbeat UI */
5337 notification.heartbeat {
5338 background-color: #A09090;
5342 @keyframes pulse-onshow {
5345 transform: scale(1.0);
5349 transform: scale(1.1);
5352 transform: scale(1.0);
5355 transform: scale(1.1);
5358 transform: scale(1.0);
5362 @keyframes pulse-twice {
5364 transform: scale(1.1);
5367 transform: scale(0.8);
5370 transform: scale(1);
5374 .messageText.heartbeat {
5376 /* text-shadow: none; */
5377 margin-inline-start: 0px;
5380 .messageImage.heartbeat {
5383 margin-inline-start: 8px;
5384 margin-inline-end: 8px;
5387 .messageImage.heartbeat.pulse-onshow {
5388 animation-name: pulse-onshow;
5389 animation-duration: 1.5s;
5390 animation-iteration-count: 1;
5391 animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
5394 .messageImage.heartbeat.pulse-twice {
5395 animation-name: pulse-twice;
5396 animation-duration: 1s;
5397 animation-iteration-count: 2;
5398 animation-timing-function: linear;
5401 /* Learn More link styles */
5402 .heartbeat > .text-link {
5404 margin-inline-start: 0px;
5407 .heartbeat > .text-link:hover {
5409 text-decoration: none;
5412 .heartbeat > .text-link:hover:active {
5416 /* Heartbeat UI Rating Star Classes */
5417 .heartbeat > #star-rating-container {
5419 /* margin-bottom: 4px;*/
5422 .heartbeat > #star-rating-container > #star5 {
5423 -moz-box-ordinal-group: 5;
5426 .heartbeat > #star-rating-container > #star4 {
5427 -moz-box-ordinal-group: 4;
5430 .heartbeat > #star-rating-container > #star3 {
5431 -moz-box-ordinal-group: 3;
5434 .heartbeat > #star-rating-container > #star2 {
5435 -moz-box-ordinal-group: 2;
5438 .heartbeat > #star-rating-container > .star-x {
5439 background: url("chrome://browser/skin/heartbeat-star-off.svg");
5441 /* Overrides the margin-inline-end for all platforms defined in the .plain class */
5442 margin-inline-end: 4px !important;
5447 .heartbeat > #star-rating-container > .star-x:hover,
5448 .heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
5449 background: url("chrome://browser/skin/heartbeat-star-lit.svg");
5452 /* === END UITour.inc.css === */
5454 #UITourTooltipButtons {
5456 * Override the --arrowpanel-padding so the background extends
5457 * to the sides and bottom of the panel.
5460 margin-right: -10px;
5461 margin-bottom: -10px;
5464 /* === BEGIN contextmenu.inc.css === */
5466 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
5469 #context-navigation > .menuitem-iconic {
5471 -moz-box-pack: center;
5472 -moz-box-align: center;
5475 #context-navigation > .menuitem-iconic[disabled="true"] {
5476 background-color: transparent;
5479 #context-navigation > .menuitem-iconic > .menu-iconic-left {
5480 -moz-appearance: none;
5483 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
5487 filter: url(chrome://global/skin/filters.svg#fill);
5492 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back");
5496 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward");
5500 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload");
5504 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop");
5507 #context-bookmarkpage {
5508 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark");
5511 #context-bookmarkpage[starred=true] {
5512 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked");
5515 #context-back:-moz-locale-dir(rtl),
5516 #context-forward:-moz-locale-dir(rtl),
5517 #context-reload:-moz-locale-dir(rtl) {
5518 transform: scaleX(-1);
5521 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
5522 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
5528 #context-media-eme-learnmore {
5529 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5532 #context-media-eme-learnmore {
5533 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5536 /* === END contextmenu.inc.css === */
5538 #context-navigation {
5541 #context-sep-navigation {
5542 /* margin-top: -4px; */
5545 .browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {
5550 .webextension-popup-browser {
5551 border-radius: inherit;
5554 .contentSelectDropdown-ingroup > .menu-iconic-text {
5555 padding-inline-start: 20px;
5558 #ContentSelectDropdown > menupopup {
5559 background-color: #000000;
5560 -moz-border-top-colors: #A09090;
5561 -moz-border-right-colors: #A09090;
5562 -moz-border-bottom-colors: #A09090;
5563 -moz-border-left-colors: #A09090;
5566 #ContentSelectDropdown > menupopup > menucaption,
5567 #ContentSelectDropdown > menupopup > menuitem {
5570 /* font: -moz-list;*/
5573 #ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text,
5574 #ContentSelectDropdown > menupopup > menuitem > .menu-iconic-text {
5575 /* Padding should follow the 4/12 ratio, where 12px is the default font-size
5576 with 4px being the preferred padding size. */
5577 padding-top: .3333em;
5578 padding-bottom: .3333em;
5581 #ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text {
5585 #ContentSelectDropdown > menupopup > menuitem[_moz-menuactive="true"][disabled="true"] {
5587 background-color: unset;
5590 #ContentSelectDropdown > menupopup > menucaption {
5591 background-color: buttonface;
5594 #ContentSelectDropdown > menupopup > menucaption[disabled="true"] {
5598 #ContentSelectDropdown > .isOpenedViaTouch > menucaption > .menu-iconic-text,
5599 #ContentSelectDropdown > .isOpenedViaTouch > menuitem > .menu-iconic-text {
5600 /* Touch padding should follow the 11/12 ratio, where 12px is the default
5601 font-size with 11px being the preferred padding size. */
5602 padding-top: .9167em;
5603 padding-bottom: .9167em;