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: hsla(0,0%,80%,.45);
54 --arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8); */
56 --urlbar-separator-color: #9C9CFF;
60 -moz-box-orient: vertical; /* for flex hack */
64 -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
67 /* ::::: primary toolbar ::::: */
69 .toolbar-primary > .toolbar-box > .toolbar-holder {
70 background-color: #A09090;
73 .toolbar-primary > .toolbar-box > .toolbar-startcap,
74 .toolbar-primary > .toolbar-box > .toolbar-endcap {
75 background-color: #9C9CFF;
78 /* Hides the titlebar-placeholder underneath the window caption buttons when we
79 are not autohiding the menubar. */
80 #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-placeholder[type="caption-buttons"] {
84 /* We want a 4px gap between the TabsToolbar and the toolbar-menubar when the
85 toolbar-menu is displayed, and a 16px gap when it is not. 1px is taken care
86 of by the (light) outer shadow of the tab, the remaining 3/15 are these margins. */
87 #toolbar-menubar:not([autohide=true]) ~ #TabsToolbar:not([inFullscreen]),
88 #toolbar-menubar[autohide=true]:not([inactive]) ~ #TabsToolbar:not([inFullscreen]) {
92 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen])[chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
93 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
94 /* margin-top: var(--space-above-tabbar);*/
97 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
98 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
99 #main-window[tabsintitlebar]:not([inFullscreen="true"]) #TabsToolbar {
104 #main-window[tabsintitlebar] #toolbar-menubar .toolbar-endcap {
105 /* the titlebar buttons are shown right over the endcap but we have no power over the buttonbox position just for this case, so hide the endcap */
109 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar[customizing-dragovertarget].customization-target::before,
110 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar[customizing-dragovertarget].customization-target::before,
111 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar.customization-target:hover::before,
112 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar.customization-target:hover::before {
113 outline-color: #A09090;
119 #navigator-toolbox::after {
122 -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
123 /*border-bottom: 1px solid ThreeDShadow;*/
126 #navigator-toolbox > toolbar {
129 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme) {
132 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar) {
133 overflow: -moz-hidden-unscrollable;
135 transition: min-height 170ms ease-out, max-height 170ms ease-out;
138 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar)[collapsed=true] {
141 transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
144 @media (-moz-mac-graphite-theme: 0) and (-moz-mac-lion-theme: 0) {
145 /* This is a hackish workaround to exclude most of Mac OS until bug 1060941 gets fixed. */
146 /* Indent also due to non-applicable aero rule in original Windows theme. */
147 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme),
148 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
150 background-color: #6000CF;
154 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive,
155 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
156 background-color: #8050B0;
160 #main-window[tabsintitlebar] #main-menubar > menu:not(:-moz-lwtheme) {
164 #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
168 #main-window[tabsintitlebar] #titlebar-content:-moz-lwtheme {
169 -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
174 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
175 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
176 #titlebar-buttonbox > .titlebar-button {
182 /* Position the toolbar above the bottom of background tabs */
187 #personal-bookmarks {
188 /* min-height: 24px; */
191 #PersonalToolbar > #home-button {
192 -moz-box-orient: horizontal;
195 #PersonalToolbar > #home-button > .toolbarbutton-text {
199 #print-preview-toolbar:not(:-moz-lwtheme) {
200 /* -moz-appearance: toolbox; */
203 #browser-bottombox:not(:-moz-lwtheme) {
206 /* ::::: titlebar ::::: */
210 background-color: #6000CF;
213 #titlebar:-moz-window-inactive {
214 background-color: #8050B0;
218 #main-window[sizemode="normal"] > #titlebar {
223 #main-window[sizemode="maximized"] > #titlebar {
227 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
228 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
229 #main-window[sizemode="normal"] > #titlebar,
230 #main-window[sizemode="maximized"] > #titlebar {
232 /* There is a margin-bottom set to -23 by code. */
236 /* The button box must appear on top of the navigator-toolbox in order for
237 * click and hover mouse events to work properly for the button in the restored
238 * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
239 * can swallow those events. It will also place the buttons above the fog on
240 * themes with Aero Glass.
243 #main-window[sizemode="maximized"] #titlebar-buttonbox {
244 -moz-appearance: none;
247 margin-inline-end: 3px;
251 .titlebar-placeholder[type="appmenu-button"] {
255 .titlebar-placeholder[type="caption-buttons"] {
259 /* titlebar command buttons */
261 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize");
264 #titlebar-min:hover {
265 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize-hover");
269 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize");
272 #titlebar-max:hover {
273 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize-hover");
276 #main-window[sizemode="maximized"] #titlebar-max {
277 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore");
280 #main-window[sizemode="maximized"] #titlebar-max:hover {
281 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore-hover");
285 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close");
288 #titlebar-close:hover {
289 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-hover");
292 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
293 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
294 #titlebar-fullscreen-button {
295 -moz-appearance: none;
296 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon.png");
297 -moz-image-region: rect(0px, 16px, 16px, 0px);
300 #titlebar-fullscreen-button:hover {
301 -moz-image-region: rect(0px, 32px, 16px, 16px);
304 @media (min-resolution: 2dppx) {
305 #titlebar-fullscreen-button {
306 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon@2x.png");
307 -moz-image-region: rect(0px, 32px, 32px, 0px);
310 #titlebar-fullscreen-button:hover {
311 -moz-image-region: rect(0px, 64px, 32px, 32px);
317 /* ::::: bookmark buttons ::::: */
319 toolbarbutton.bookmark-item:not(.subviewbutton),
320 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
323 -moz-appearance: none;
324 border: 1px solid transparent;*/
327 toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([disabled="true"]):not([open]) {
328 /* border-color: var(--toolbarbutton-hover-bordercolor);
329 background: var(--toolbarbutton-hover-background);*/
332 toolbarbutton.bookmark-item:not(.subviewbutton):hover:active:not([disabled="true"]),toolbarbutton.bookmark-item[open="true"] {
333 /* border-color: var(--toolbarbutton-active-bordercolor);
334 box-shadow: var(--toolbarbutton-active-boxshadow);
335 background: var(--toolbarbutton-active-background);*/
338 .bookmark-item > .toolbarbutton-icon,
339 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
342 margin-inline-start: 1px;
343 margin-inline-end: 2px;
348 /* Force the display of the label for bookmarks */
349 .bookmark-item > .toolbarbutton-text,
350 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
351 display: -moz-box !important;
354 .bookmark-item > .toolbarbutton-menu-dropmarker {
358 #bookmarks-toolbar-placeholder {
359 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") !important;
360 -moz-box-orient: horizontal;
363 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
364 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
365 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
368 /* ----- BOOKMARK STAR ANIMATION ----- */
370 @keyframes animation-bookmarkAdded {
371 from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
372 60% { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
374 to { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
377 @keyframes animation-bookmarkPulse {
378 from { transform: scale(1); }
379 50% { transform: scale(1.3); }
380 to { transform: scale(1); }
383 #bookmarked-notification-container {
392 #bookmarked-notification {
393 background-size: 16px;
394 background-position: center;
395 background-repeat: no-repeat;
401 #bookmarked-notification-dropmarker-anchor {
406 #bookmarked-notification-dropmarker-icon {
412 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
413 background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
414 animation: animation-bookmarkAdded 800ms;
415 animation-timing-function: ease, ease, ease;
418 #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
419 list-style-image: none !important;
422 #bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
424 animation: animation-bookmarkPulse 300ms;
425 animation-delay: 600ms;
426 animation-timing-function: ease-out;
429 /* ::::: bookmark menus ::::: */
432 menuitem.bookmark-item {
437 .bookmark-item:not(.subviewbutton) > .menu-iconic-left {
442 .bookmark-item > .menu-iconic-left > .menu-iconic-icon {
443 padding-inline-start: 0px;
446 /* ::::: bookmark items ::::: */
449 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
450 -moz-image-region: auto;
453 .bookmark-item[container] {
454 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
455 -moz-image-region: auto;
458 .bookmark-item[container][open] {
459 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
460 -moz-image-region: auto;
463 .bookmark-item[container][livemark] {
464 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-folder.png");
465 -moz-image-region: auto;
468 .bookmark-item[container][livemark] .bookmark-item {
469 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-item.png");
470 -moz-image-region: rect(0px, 16px, 16px, 0px);
473 .bookmark-item[container][livemark] .bookmark-item[visited] {
474 -moz-image-region: rect(0px, 32px, 16px, 16px);
477 .bookmark-item[container][query] {
478 list-style-image: url("chrome://communicator/skin/bookmarks/query.png");
479 -moz-image-region: auto;
482 .bookmark-item[query][tagContainer] {
483 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
484 -moz-image-region: auto;
487 .bookmark-item[query][dayContainer] {
488 list-style-image: url("chrome://communicator/skin/history/calendar.png");
489 -moz-image-region: auto;
492 .bookmark-item[query][hostContainer] {
493 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
494 -moz-image-region: auto;
497 .bookmark-item[query][hostContainer][open] {
498 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
499 -moz-image-region: auto;
502 .bookmark-item[cutting] > .toolbarbutton-icon,
503 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
507 .bookmark-item[cutting] > .toolbarbutton-text,
508 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
512 /* ::::: primary toolbar buttons ::::: */
514 /* === BEGIN toolbarbuttons.inc.css === */
516 /* Whole section of this included file: */
517 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
518 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
519 #social-share-button, #open-file-button, #find-button, #developer-button,
520 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
521 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
522 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
523 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu),
524 #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
525 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
529 -moz-image-region: rect(0, 36px, 18px, 18px);
532 #back-button:hover:not([disabled="true"]) {
533 -moz-image-region: rect(18px, 36px, 36px, 18px);
536 #back-button[disabled="true"] {
537 -moz-image-region: rect(36px, 36px, 54px, 18px);
541 -moz-image-region: rect(0, 72px, 18px, 54px);
544 #forward-button:hover:not([disabled="true"]) {
545 -moz-image-region: rect(18px, 72px, 36px, 54px);
548 #forward-button[disabled="true"] {
549 -moz-image-region: rect(36px, 72px, 54px, 54px);
552 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
553 #forward-button:-moz-locale-dir(rtl) {
554 transform: scaleX(-1);
557 #home-button[cui-areatype="toolbar"] {
558 -moz-image-region: rect(0, 126px, 18px, 108px);
561 #home-button[cui-areatype="toolbar"]:hover {
562 -moz-image-region: rect(18px, 126px, 36px, 108px);
565 #bookmarks-menu-button[cui-areatype="toolbar"] {
566 -moz-image-region: rect(0, 144px, 18px, 126px);
569 #bookmarks-menu-button[cui-areatype="toolbar"]:hover,
570 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
571 -moz-image-region: rect(18px, 144px, 36px, 126px);
574 /* When "new tab" page shows up, the menubutton-button (star button) is disabled */
575 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
576 -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
577 background-color: transparent !important;
580 #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
581 -moz-image-region: rect(0, 162px, 18px, 144px);
584 #bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
585 #bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"],
586 #bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button[open="true"] {
587 /* When starred and clicked (for edit/delete dialog),
588 * then only the menubutton-button itself is open, but not the whole menubutton. */
589 -moz-image-region: rect(18px, 162px, 36px, 144px);
592 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
593 -moz-image-region: rect(0, 630px, 18px, 612px);
596 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
598 -moz-box-align: center;
601 #bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
602 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
603 -moz-image-region: rect(18px, 630px, 36px, 612px);
606 #bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
607 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
610 padding-inline-start: 2px;
611 padding-inline-end: 0px;
614 #history-panelmenu[cui-areatype="toolbar"] {
615 -moz-image-region: rect(0, 180px, 18px, 162px);
618 #history-panelmenu[cui-areatype="toolbar"]:hover,
619 #history-panelmenu[cui-areatype="toolbar"][open="true"] {
620 -moz-image-region: rect(18px, 180px, 36px, 162px);
623 #downloads-button[cui-areatype="toolbar"] {
624 -moz-image-region: rect(0, 198px, 18px, 180px);
627 #downloads-button[cui-areatype="toolbar"]:hover,
628 #downloads-button[cui-areatype="toolbar"][open="true"] {
629 -moz-image-region: rect(18px, 198px, 36px, 180px);
632 #add-ons-button[cui-areatype="toolbar"] {
633 -moz-image-region: rect(0, 216px, 18px, 198px);
636 #add-ons-button[cui-areatype="toolbar"]:hover {
637 -moz-image-region: rect(18px, 216px, 36px, 198px);
640 #open-file-button[cui-areatype="toolbar"] {
641 -moz-image-region: rect(0, 234px, 18px, 216px);
644 #open-file-button[cui-areatype="toolbar"]:hover {
645 -moz-image-region: rect(18px, 234px, 36px, 216px);
648 #save-page-button[cui-areatype="toolbar"] {
649 -moz-image-region: rect(0, 252px, 18px, 234px);
652 #save-page-button[cui-areatype="toolbar"]:hover {
653 -moz-image-region: rect(18px, 252px, 36px, 234px);
656 #sync-button[cui-areatype="toolbar"] {
657 -moz-image-region: rect(0, 792px, 18px, 774px);
660 #sync-button[cui-areatype="toolbar"]:hover {
661 -moz-image-region: rect(18px, 792px, 36px, 774px);
664 #containers-panelmenu[cui-areatype="toolbar"] {
665 -moz-image-region: rect(0, 810px, 18px, 792px);
668 #containers-panelmenu[cui-areatype="toolbar"]:hover {
669 -moz-image-region: rect(18px, 810px, 36px, 792px);
672 #feed-button[cui-areatype="toolbar"] {
673 -moz-image-region: rect(0, 288px, 18px, 270px);
676 #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true],
677 #feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
678 -moz-image-region: rect(18px, 288px, 36px, 270px);
681 #feed-button[cui-areatype="toolbar"][disabled="true"] {
682 -moz-image-region: rect(36px, 288px, 54px, 270px);
685 #social-share-button[cui-areatype="toolbar"] {
686 -moz-image-region: rect(0px, 306px, 18px, 288px);
689 #social-share-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
690 #social-share-button[cui-areatype="toolbar"][open="true"] {
691 -moz-image-region: rect(18px, 306px, 36px, 288px);
694 #social-share-button[cui-areatype="toolbar"][disabled="true"] {
695 -moz-image-region: rect(36px, 306px, 54px, 288px);
698 #characterencoding-button[cui-areatype="toolbar"] {
699 -moz-image-region: rect(0, 324px, 18px, 306px);
702 #characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
703 #characterencoding-button[cui-areatype="toolbar"][open="true"] {
704 -moz-image-region: rect(18px, 324px, 36px, 306px);
707 #characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
708 -moz-image-region: rect(36px, 324px, 54px, 306px);
711 #new-window-button[cui-areatype="toolbar"] {
712 -moz-image-region: rect(0, 342px, 18px, 324px);
715 #new-window-button[cui-areatype="toolbar"]:hover {
716 -moz-image-region: rect(18px, 342px, 36px, 324px);
719 #e10s-button[cui-areatype="toolbar"] {
720 -moz-image-region: rect(0, 342px, 18px, 324px);
723 #e10s-button[cui-areatype="toolbar"]:hover {
724 -moz-image-region: rect(18px, 342px, 36px, 324px);
727 #e10s-button > .toolbarbutton-icon {
728 transform: scaleY(-1);
731 #new-tab-button[cui-areatype="toolbar"] {
732 -moz-image-region: rect(0, 360px, 18px, 342px);
735 #new-tab-button[cui-areatype="toolbar"]:hover {
736 -moz-image-region: rect(18px, 360px, 36px, 342px);
739 #privatebrowsing-button[cui-areatype="toolbar"] {
740 -moz-image-region: rect(0, 378px, 18px, 360px);
743 #privatebrowsing-button[cui-areatype="toolbar"]:hover {
744 -moz-image-region: rect(18px, 378px, 36px, 360px);
747 #find-button[cui-areatype="toolbar"] {
748 -moz-image-region: rect(0, 396px, 18px, 378px);
751 #find-button[cui-areatype="toolbar"]:hover {
752 -moz-image-region: rect(18px, 396px, 36px, 378px);
755 #print-button[cui-areatype="toolbar"] {
756 -moz-image-region: rect(0, 414px, 18px, 396px);
759 #print-button[cui-areatype="toolbar"]:hover {
760 -moz-image-region: rect(18px, 414px, 36px, 396px);
763 #fullscreen-button[cui-areatype="toolbar"] {
764 -moz-image-region: rect(0, 432px, 18px, 414px);
767 #fullscreen-button[cui-areatype="toolbar"]:hover {
768 -moz-image-region: rect(18px, 432px, 36px, 414px);
771 #developer-button[cui-areatype="toolbar"] {
772 -moz-image-region: rect(0, 450px, 18px, 432px);
775 #developer-button[cui-areatype="toolbar"]:hover,
776 #developer-button[cui-areatype="toolbar"][open="true"] {
777 -moz-image-region: rect(18px, 450px, 36px, 432px);
780 #preferences-button[cui-areatype="toolbar"] {
781 -moz-image-region: rect(0, 468px, 18px, 450px);
784 #preferences-button[cui-areatype="toolbar"]:hover {
785 -moz-image-region: rect(18px, 468px, 36px, 450px);
788 #PanelUI-menu-button {
789 -moz-image-region: rect(0, 486px, 18px, 468px);
792 #PanelUI-menu-button:hover,
793 #PanelUI-menu-button[open="true"] {
794 -moz-image-region: rect(18px, 486px, 36px, 468px);
797 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button {
798 -moz-image-region: rect(0, 504px, 18px, 486px);
801 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button:hover:not([disabled="true"]) {
802 -moz-image-region: rect(18px, 504px, 36px, 486px);
805 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button[disabled="true"] {
806 -moz-image-region: rect(36px, 504px, 54px, 486px);
809 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button {
810 -moz-image-region: rect(0, 522px, 18px, 504px);
813 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button:hover:not([disabled="true"]) {
814 -moz-image-region: rect(18px, 522px, 36px, 504px);
817 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button[disabled="true"] {
818 -moz-image-region: rect(36px, 522px, 54px, 504px);
821 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button {
822 -moz-image-region: rect(0, 540px, 18px, 522px);
825 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button:hover:not([disabled="true"]) {
826 -moz-image-region: rect(18px, 540px, 36px, 522px);
829 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button[disabled="true"] {
830 -moz-image-region: rect(36px, 540px, 54px, 522px);
833 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button {
834 -moz-image-region: rect(0, 558px, 18px, 540px);
837 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button:hover:not([disabled="true"]) {
838 -moz-image-region: rect(18px, 558px, 36px, 540px);
841 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button[disabled="true"] {
842 -moz-image-region: rect(36px, 558px, 54px, 540px);
845 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button {
846 -moz-image-region: rect(0, 576px, 18px, 558px);
849 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button:hover:not([disabled="true"]) {
850 -moz-image-region: rect(18px, 576px, 36px, 558px);
853 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button[disabled="true"] {
854 -moz-image-region: rect(36px, 576px, 54px, 558px);
857 #nav-bar-overflow-button {
858 -moz-image-region: rect(0, 612px, 18px, 594px);
861 #nav-bar-overflow-button:hover,
862 #nav-bar-overflow-button[open="true"] {
863 -moz-image-region: rect(18px, 612px, 36px, 594px);
866 #nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
867 transform: scaleX(-1);
871 -moz-image-region: rect(0, 648px, 18px, 630px);
874 #tabview-button:hover {
875 -moz-image-region: rect(18px, 648px, 36px, 630px);
878 #email-link-button[cui-areatype="toolbar"] {
879 -moz-image-region: rect(0, 666px, 18px, 648px);
882 #email-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
883 -moz-image-region: rect(18px, 666px, 36px, 648px);
886 #email-button[cui-areatype="toolbar"][disabled="true"] {
887 -moz-image-region: rect(36px, 666px, 54px, 648px);
890 #sidebar-button[cui-areatype="toolbar"] {
891 -moz-image-region: rect(0, 684px, 18px, 666px);
894 #sidebar-button[cui-areatype="toolbar"]:hover {
895 -moz-image-region: rect(18px, 684px, 36px, 666px);
898 #panic-button[cui-areatype="toolbar"] {
899 -moz-image-region: rect(0, 702px, 18px, 684px);
902 #panic-button[cui-areatype="toolbar"]:hover,
903 #panic-button[cui-areatype="toolbar"][open] {
904 -moz-image-region: rect(18px, 702px, 36px, 684px);
907 #panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
908 transform: scaleX(-1);
911 #webide-button[cui-areatype="toolbar"] {
912 -moz-image-region: rect(0, 738px, 18px, 720px);
915 #webide-button[cui-areatype="toolbar"]:hover {
916 -moz-image-region: rect(18px, 738px, 36px, 720px);
919 /* === END toolbarbuttons.inc.css === */
921 /* === BEGIN menupanel.inc.css === */
923 /* Menu panel and palette styles */
925 toolbaritem[sdkstylewidget="true"] > toolbarbutton,
926 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
927 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
928 #social-share-button, #open-file-button, #find-button, #developer-button,
929 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
930 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
931 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
932 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"],
933 toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
934 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
935 #social-share-button, #open-file-button, #find-button, #developer-button,
936 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
937 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
938 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
939 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) {
940 list-style-image: url(chrome://browser/skin/menuPanel.svg);
943 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
944 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
945 #social-share-button, #open-file-button, #find-button, #developer-button,
946 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
947 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
948 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
949 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"] > .toolbarbutton-icon,
950 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
951 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
952 #social-share-button, #open-file-button, #find-button, #developer-button,
953 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
954 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
955 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
956 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-icon,
957 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
958 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
959 #social-share-button, #open-file-button, #find-button, #developer-button,
960 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
961 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
962 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
963 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
964 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
965 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
966 #social-share-button, #open-file-button, #find-button, #developer-button,
967 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
968 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
969 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
970 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
971 filter: url(chrome://browser/skin/filters.svg#fill);
975 #home-button[cui-areatype="menu-panel"],
976 toolbarpaletteitem[place="palette"] > #home-button {
977 -moz-image-region: rect(0px, 128px, 32px, 96px);
980 #bookmarks-menu-button[cui-areatype="menu-panel"],
981 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
982 -moz-image-region: rect(0px, 192px, 32px, 160px);
985 #history-panelmenu[cui-areatype="menu-panel"],
986 toolbarpaletteitem[place="palette"] > #history-panelmenu {
987 -moz-image-region: rect(0px, 224px, 32px, 192px);
990 #downloads-button[cui-areatype="menu-panel"],
991 toolbarpaletteitem[place="palette"] > #downloads-button {
992 -moz-image-region: rect(0px, 256px, 32px, 224px);
995 #add-ons-button[cui-areatype="menu-panel"],
996 toolbarpaletteitem[place="palette"] > #add-ons-button {
997 -moz-image-region: rect(0px, 288px, 32px, 256px);
1000 #open-file-button[cui-areatype="menu-panel"],
1001 toolbarpaletteitem[place="palette"] > #open-file-button {
1002 -moz-image-region: rect(0px, 320px, 32px, 288px);
1005 #save-page-button[cui-areatype="menu-panel"],
1006 toolbarpaletteitem[place="palette"] > #save-page-button {
1007 -moz-image-region: rect(0px, 352px, 32px, 320px);
1010 #sync-button[cui-areatype="menu-panel"],
1011 toolbarpaletteitem[place="palette"] > #sync-button {
1012 -moz-image-region: rect(0px, 1024px, 32px, 992px);
1015 #containers-panelmenu[cui-areatype="menu-panel"],
1016 toolbarpaletteitem[place="palette"] > #containers-panelmenu {
1017 -moz-image-region: rect(0px, 1056px, 32px, 1024px);
1020 #feed-button[cui-areatype="menu-panel"],
1021 toolbarpaletteitem[place="palette"] > #feed-button {
1022 -moz-image-region: rect(0px, 416px, 32px, 384px);
1025 #social-share-button[cui-areatype="menu-panel"],
1026 toolbarpaletteitem[place="palette"] > #social-share-button {
1027 -moz-image-region: rect(0px, 448px, 32px, 416px);
1030 #characterencoding-button[cui-areatype="menu-panel"],
1031 toolbarpaletteitem[place="palette"] > #characterencoding-button {
1032 -moz-image-region: rect(0px, 480px, 32px, 448px);
1035 #new-window-button[cui-areatype="menu-panel"],
1036 toolbarpaletteitem[place="palette"] > #new-window-button {
1037 -moz-image-region: rect(0px, 512px, 32px, 480px);
1040 #e10s-button[cui-areatype="menu-panel"],
1041 toolbarpaletteitem[place="palette"] > #e10s-button {
1042 -moz-image-region: rect(0px, 512px, 32px, 480px);
1045 #new-tab-button[cui-areatype="menu-panel"],
1046 toolbarpaletteitem[place="palette"] > #new-tab-button {
1047 -moz-image-region: rect(0px, 544px, 32px, 512px);
1050 #privatebrowsing-button[cui-areatype="menu-panel"],
1051 toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
1052 -moz-image-region: rect(0px, 576px, 32px, 544px);
1055 #tabview-button[cui-areatype="menu-panel"],
1056 toolbarpaletteitem[place="palette"] > #tabview-button {
1057 -moz-image-region: rect(0px, 608px, 32px, 576px);
1060 #find-button[cui-areatype="menu-panel"],
1061 toolbarpaletteitem[place="palette"] > #find-button {
1062 -moz-image-region: rect(0px, 640px, 32px, 608px);
1065 #print-button[cui-areatype="menu-panel"],
1066 toolbarpaletteitem[place="palette"] > #print-button {
1067 -moz-image-region: rect(0px, 672px, 32px, 640px);
1070 #fullscreen-button[cui-areatype="menu-panel"],
1071 toolbarpaletteitem[place="palette"] > #fullscreen-button {
1072 -moz-image-region: rect(0px, 704px, 32px, 672px);
1075 #developer-button[cui-areatype="menu-panel"],
1076 toolbarpaletteitem[place="palette"] > #developer-button {
1077 -moz-image-region: rect(0px, 736px, 32px, 704px);
1080 #preferences-button[cui-areatype="menu-panel"],
1081 toolbarpaletteitem[place="palette"] > #preferences-button {
1082 -moz-image-region: rect(0px, 768px, 32px, 736px);
1085 #email-link-button[cui-areatype="menu-panel"],
1086 toolbarpaletteitem[place="palette"] > #email-link-button {
1087 -moz-image-region: rect(0, 800px, 32px, 768px);
1090 #email-link-button[cui-areatype="menu-panel"][disabled="true"],
1091 toolbarpaletteitem[place="palette"] > #email-link-button[disabled="true"] {
1092 -moz-image-region: rect(64px, 800px, 96px, 768px);
1095 #sidebar-button[cui-areatype="menu-panel"],
1096 toolbarpaletteitem[place="palette"] > #sidebar-button {
1097 -moz-image-region: rect(0, 864px, 32px, 832px);
1100 #panic-button[cui-areatype="menu-panel"],
1101 toolbarpaletteitem[place="palette"] > #panic-button {
1102 -moz-image-region: rect(0, 896px, 32px, 864px);
1105 #webide-button[cui-areatype="menu-panel"],
1106 toolbarpaletteitem[place="palette"] > #webide-button {
1107 -moz-image-region: rect(0px, 960px, 32px, 928px);
1110 toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1111 -moz-image-region: rect(0, 832px, 32px, 800px);
1114 /* Wide panel control icons */
1116 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1117 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1118 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1119 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1120 list-style-image: url(chrome://browser/skin/menuPanel-small.svg);
1123 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon,
1124 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon,
1125 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
1126 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
1127 filter: url(chrome://browser/skin/filters.svg#fill);
1131 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
1132 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1133 -moz-image-region: rect(0px, 32px, 16px, 16px);
1136 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1137 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1138 -moz-image-region: rect(0px, 48px, 16px, 32px);
1141 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
1142 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1143 -moz-image-region: rect(0px, 64px, 16px, 48px);
1146 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
1147 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1148 -moz-image-region: rect(0px, 80px, 16px, 64px);
1151 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
1152 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1153 -moz-image-region: rect(0px, 96px, 16px, 80px);
1156 #add-share-provider {
1157 list-style-image: url(chrome://browser/skin/menuPanel-small.svg);
1158 -moz-image-region: rect(0px, 96px, 16px, 80px);
1161 /* === END menupanel.inc.css === */
1163 .toolbarbutton-1:not([type="menu-button"]) {
1164 -moz-box-orient: vertical;
1168 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1174 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1175 .toolbarbutton-1[disabled="true"]:hover:active,
1176 .toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1180 .toolbarbutton-1:hover:active,
1181 .toolbarbutton-1[open="true"],
1182 .toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1184 padding-bottom: 0px;
1185 padding-inline-start: 3px;
1186 padding-inline-end: 1px;
1189 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1190 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1191 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1192 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1193 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
1196 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1197 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1200 toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1201 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
1204 .toolbarbutton-1 > .toolbarbutton-icon,
1205 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1209 #nav-bar .toolbarbutton-1,
1210 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1213 #nav-bar .toolbarbutton-1:not([type=menu-button]),
1214 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1215 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1218 #nav-bar #PanelUI-menu-button {
1219 /* padding-inline-start: 7px;
1220 padding-inline-end: 5px;*/
1223 #nav-bar .toolbarbutton-1[type=panel],
1224 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
1225 /* padding-left: 5px;
1226 padding-right: 5px;*/
1229 #nav-bar .toolbarbutton-1 > menupopup {
1230 /* margin-top: -3px;*/
1233 #nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
1237 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1238 /* padding-inline-end: 0;*/
1241 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1242 /* padding-inline-start: 0;
1243 -moz-box-align: center;*/
1246 .findbar-button > .toolbarbutton-text,
1247 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1248 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
1249 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
1250 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1251 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1252 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1253 /* padding: 2px 6px;
1255 border-color: transparent;
1256 transition-property: background-color, border-color;
1257 transition-duration: 150ms;*/
1260 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-icon,
1261 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-badge-stack,
1262 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1263 padding: calc(var(--toolbarbutton-vertical-inner-padding) + 1px) 7px;
1267 /* Help SDK icons fit: */
1268 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
1269 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
1273 #nav-bar toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1274 /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1278 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1279 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
1280 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon,
1281 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
1282 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1283 /* padding-inline-end: 17px;*/
1286 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1287 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon {
1288 /* horizontal padding + border + icon width */
1289 /* max-width: 43px;*/
1292 #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1295 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1298 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1301 #nav-bar .toolbaritem-combined-buttons {
1302 /* margin-left: 2px;
1303 margin-right: 2px;*/
1306 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1311 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1312 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1:-moz-any(:not(:hover):not([open]),[disabled=true]) + .toolbarbutton-1:-moz-any(:not(:hover):not([open]),[disabled=true])::before {
1318 margin-inline-end: -1px;
1322 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1325 .findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
1326 #nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1327 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1328 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1329 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1330 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
1331 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
1332 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
1333 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
1336 .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
1337 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
1338 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1339 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1340 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
1341 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
1344 #TabsToolbar .toolbarbutton-1,
1345 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1346 .tabbrowser-arrowscrollbox > .scrollbutton-up,
1347 .tabbrowser-arrowscrollbox > .scrollbutton-down {
1350 #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1351 #TabsToolbar .toolbarbutton-1[open],
1352 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1353 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1354 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
1357 /* unified back/forward button */
1360 -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
1363 #forward-button > menupopup {
1364 margin-top: 1px !important;
1367 #forward-button > .toolbarbutton-icon {
1368 background-clip: padding-box !important;
1369 /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
1370 /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
1374 margin-inline-start: -4px !important;
1379 border-radius: 0 10000px 10000px 0;
1380 /* max-width: calc(var(--forwardbutton-width) + var(--backbutton-urlbar-overlap)) !important; */
1383 #forward-button:-moz-locale-dir(rtl) {
1384 border-radius: 10000px 0 0 10000px;
1387 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
1388 transition: margin-left 150ms ease-out;
1391 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] {
1392 margin-left: calc(0px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
1395 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] {
1396 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1397 transition-delay: 100s;
1400 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] {
1401 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1402 margin-left: calc(-0.01px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
1406 /* padding-top: 3px !important;
1407 padding-bottom: 3px !important;
1408 padding-inline-start: 5px !important;
1409 padding-inline-end: 0 !important;*/
1412 border-radius: 10000px;
1416 margin-bottom: -2px;
1419 #back-button:-moz-locale-dir(rtl) {
1422 #back-button > menupopup {
1423 margin-top: -1px !important;
1426 #back-button > .toolbarbutton-icon {
1427 border-radius: 10000px !important;
1428 background-clip: padding-box !important;
1429 /* background-color: hsla(210,25%,98%,.08) !important;
1430 padding: 6px !important;
1431 border-style: none !important;
1432 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1433 0 0 0 1px hsla(210,4%,10%,.25);*/
1434 transition-property: background-color, box-shadow !important;
1435 transition-duration: 250ms !important;
1438 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1439 /* background-color: hsla(210,4%,10%,.08) !important;*/
1442 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1443 #back-button[open="true"] > .toolbarbutton-icon {
1444 /* background-color: hsla(210,4%,10%,.12) !important;
1445 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1446 0 0 0 1px hsla(210,4%,10%,.25),
1447 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
1450 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1451 transform: scaleX(-1);
1454 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1455 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1456 list-style-image: url("chrome://browser/skin/menu-back.png") !important;
1459 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1460 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1461 list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
1464 #home-button.bookmark-item {
1465 list-style-image: url("chrome://browser/skin/Toolbar.png");
1468 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1469 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1470 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1471 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1472 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1473 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1474 #home-button.bookmark-item:-moz-lwtheme-brighttext {
1477 list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
1480 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1481 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1482 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
1486 #downloads-button > .toolbarbutton-icon {
1490 /* tabview menu item */
1493 list-style-image: url("chrome://browser/skin/tabview/tabviewFx.png");
1494 -moz-image-region: rect(1px, 89px, 17px, 73px);
1497 #menu_tabview[groups="0"] {
1498 -moz-image-region: rect(1px, 17px, 17px, 1px);
1501 #menu_tabview[groups="1"] {
1502 -moz-image-region: rect(1px, 35px, 17px, 19px);
1505 #menu_tabview[groups="2"] {
1506 -moz-image-region: rect(1px, 53px, 17px, 37px);
1509 #menu_tabview[groups="3"] {
1510 -moz-image-region: rect(1px, 71px, 17px, 55px);
1513 /* undo close tab menu item */
1514 #alltabs_undoCloseTab {
1515 list-style-image: url(chrome://browser/skin/undoCloseTab.png);
1518 @media (min-resolution: 1.1dppx) {
1519 #alltabs_undoCloseTab {
1520 list-style-image: url(chrome://browser/skin/undoCloseTab@2x.png);
1522 #alltabs_undoCloseTab > .toolbarbutton-icon {
1527 /* zoom control text (reset) button special case: */
1529 #nav-bar #zoom-reset-button > .toolbarbutton-text {
1530 /* To make this line up with the icons, it needs the same height (18px) +
1531 * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
1532 * increase in text sizes would break things...
1537 /* ::::: fullscreen window controls ::::: */
1542 -moz-appearance: none;
1544 /* margin: 0 !important;
1545 padding: 6px 12px;*/
1549 list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize);
1552 #minimize-button:hover {
1553 list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-hover);
1557 list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore);
1560 #restore-button:hover {
1561 list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-hover);
1564 #minimize-button:hover,
1565 #restore-button:hover {
1566 /* background-color: hsla(0, 0%, 0%, .12);*/
1569 #minimize-button:hover:active,
1570 #restore-button:hover:active {
1571 /* background-color: hsla(0, 0%, 0%, .22);*/
1575 list-style-image: url(chrome://browser/skin/caption-buttons.svg#close);
1578 #close-button:hover {
1579 /* background-color: hsl(355, 86%, 49%);*/
1580 list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-hover);
1583 #close-button:hover:active {
1584 /* background-color: hsl(355, 82%, 69%);*/
1587 /* ::::: Location Bar ::::: */
1590 .searchbar-textbox {
1593 margin-inline-start: 3px;
1597 /* make color as light as possible to deal with dark non-domain parts */
1601 #urlbar:-moz-lwtheme,
1602 .searchbar-textbox:-moz-lwtheme {
1603 /* background-color: rgba(255,255,255,.8);
1604 @navbarTextboxCustomBorder@
1608 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1609 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1610 /* background-color: rgba(255,255,255,.9);*/
1613 #urlbar:-moz-lwtheme[focused]:not([readonly]),
1614 .searchbar-textbox:-moz-lwtheme[focused] {
1615 /* background-color: white;*/
1618 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
1619 /* border-inline-start: none;
1623 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1624 /* border-top-left-radius: 0;
1625 border-bottom-left-radius: 0; */
1628 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1629 /* border-top-right-radius: 0;
1630 border-bottom-right-radius: 0; */
1633 window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
1634 /* clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
1635 /* margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); */
1638 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
1639 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1640 /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
1641 transform: scaleX(-1);
1644 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) {
1645 -moz-box-direction: reverse;
1648 html|*.urlbar-input:-moz-lwtheme::placeholder,
1649 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::placeholder {
1654 -moz-box-orient: horizontal;
1655 -moz-box-align: stretch;
1658 .urlbar-textbox-container {
1659 -moz-box-align: stretch;
1663 margin-inline-start: 0;
1667 #urlbar-display-box {
1668 padding-inline-start: 4px;
1669 /* border-inline-start: 1px solid var(--urlbar-separator-color);
1670 border-inline-end: 1px solid var(--urlbar-separator-color);
1671 border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%);
1672 border-image-slice: 1; */
1676 -moz-box-align: center;
1681 /* 16x16 icon with border-box sizing */
1686 /* ::::: URL Bar Zoom Reset Button ::::: */
1688 @keyframes urlbar-zoom-reset-pulse {
1690 transform: scale(0);
1693 transform: scale(1.5);
1696 transform: scale(1.0);
1700 #urlbar-zoom-button {
1701 /* -moz-appearance: none;*/
1706 /* background-color: hsla(0,0%,0%,.05);
1708 border: 1px solid ThreeDLightShadow;*/
1711 #urlbar-zoom-button[animate="true"] {
1712 animation-name: urlbar-zoom-reset-pulse;
1713 animation-duration: 250ms;
1716 #urlbar-zoom-button:hover {
1717 /* background-color: hsla(0,0%,0%,.1);*/
1720 #urlbar-zoom-button:hover:active {
1721 /* background-color: hsla(0,0%,0%,.15);*/
1724 #urlbar-zoom-button > .toolbarbutton-text {
1728 #urlbar-zoom-button > .toolbarbutton-icon {
1732 .search-go-container {
1736 .search-go-container > .search-go-button {
1740 #urlbar-search-footer {
1741 border-top: 1px solid var(--panel-separator-color);
1744 #urlbar-search-settings {
1747 #urlbar-search-settings:hover {
1750 #urlbar-search-settings:hover:active {
1753 #urlbar-search-splitter {
1755 margin-inline-start: -3px;
1757 background: transparent;
1760 #urlbar-search-splitter + #urlbar-container > #urlbar,
1761 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1762 margin-inline-start: 0;
1766 border-inline-end: 1px solid #9C9CFF;
1767 margin-inline-end: 3px;
1770 margin-inline-start: 0;
1774 /* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
1776 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
1777 border-bottom: 1px solid var(--panel-separator-color);
1778 background-color: #000000;
1780 padding-inline-start: 44px;
1781 padding-inline-end: 6px;
1782 background-image: url("chrome://browser/skin/info.svg");
1783 background-clip: padding-box;
1784 background-position: 20px center;
1785 background-repeat: no-repeat;
1786 background-size: 16px 16px;
1789 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
1790 background-position: right 20px center;
1793 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
1798 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
1799 margin-inline-start: 0;
1802 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
1803 -moz-appearance: none;
1808 margin-inline-start: 10px;
1811 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
1814 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
1817 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
1820 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
1823 /* === END urlbarSearchSuggestionsNotification.inc.css === */
1826 min-width: calc(54px + 11ch);
1831 #identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
1832 background-color: var(--identity-box-verified-background-color);
1835 #identity-box:-moz-focusring {
1836 outline: 1px dotted;
1837 outline-offset: -1px;
1840 #identity-box.verifiedDomain:-moz-focusring,
1841 #identity-box.verifiedIdentity:-moz-focusring {
1842 outline-color: #000000;
1845 /* Location bar dropmarker */
1847 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
1848 background-color: transparent;
1851 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
1852 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
1853 #urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1856 transition: opacity 0.15s ease;
1859 #urlbar-wrapper[switchingtabs] > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1863 #navigator-toolbox:not(:hover) #nav-bar:not([customizing="true"]) #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker {
1867 .urlbar-history-dropmarker:hover {
1870 .urlbar-history-dropmarker:hover:active,
1871 .urlbar-history-dropmarker[open="true"] {
1874 /* page proxy icon */
1875 /* === BEGIN identity-block.inc.css === */
1877 /* === BEGIN identity-block/icons.inc.css === */
1880 list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
1883 #identity-box:hover > #identity-icon:not(.no-hover),
1884 #identity-box[open=true] > #identity-icon {
1885 list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
1888 #identity-box.grantedPermissions > #identity-icon {
1889 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice);
1892 #identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover),
1893 #identity-box.grantedPermissions[open=true] > #identity-icon {
1894 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover);
1897 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
1898 list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
1901 #tracking-protection-icon {
1902 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled);
1905 #tracking-protection-icon[state="loaded-tracking-content"] {
1906 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled);
1910 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
1911 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon,
1912 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
1913 list-style-image: url(chrome://browser/skin/connection-secure.svg);
1914 visibility: visible;
1917 #urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
1918 list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon);
1919 visibility: visible;
1922 #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
1923 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
1924 list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
1925 visibility: visible;
1928 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
1929 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
1930 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon {
1931 list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon);
1932 visibility: visible;
1935 /* === END identity-block/icons.inc.css === */
1942 /* The padding-left and padding-right transitions handle the delayed hiding of
1943 the forward button when hovered. */
1944 transition: background-color 150ms ease, padding-left, padding-right;
1947 #identity-box:-moz-locale-dir(ltr) {
1948 border-top-right-radius: 0;
1949 border-bottom-right-radius: 0;
1952 #identity-box:-moz-locale-dir(rtl) {
1953 border-top-left-radius: 0;
1954 border-bottom-left-radius: 0;
1957 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1958 border-inline-end: 1px solid #008484;
1961 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels {
1965 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
1966 border-inline-end: 1px solid #9C9CFF;
1969 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon-labels {
1974 #identity-icon-labels:-moz-locale-dir(ltr) {
1978 #identity-icon-labels:-moz-locale-dir(rtl) {
1982 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
1983 /* border-radius: 0;
1984 padding-inline-start: 2px; */
1985 padding-inline-end: 2px;
1986 margin-inline-end: 1px;
1989 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #identity-box {
1990 padding-inline-start: 2px;
1993 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #identity-box {
1994 /* Forward button hiding is delayed when hovered, so we should use the same
1995 delay for the identity box. We handle both horizontal paddings (for LTR and
1996 RTL), the latter two delays here are for padding-left and padding-right. */
1997 transition-delay: 0s, 100s, 100s;
2000 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > #identity-box {
2001 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2002 padding-inline-start: 2.01px;
2005 /* MAIN IDENTITY ICON */
2012 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2016 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2017 -moz-image-region: inherit;
2018 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2028 margin-inline-start: -16px;
2033 #identity-box[sharing="camera"] > #sharing-icon {
2034 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera");
2037 #identity-box[sharing="microphone"] > #sharing-icon {
2038 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone");
2041 #identity-box[sharing="screen"] > #sharing-icon {
2042 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen");
2046 #identity-box[sharing] > #sharing-icon {
2048 filter: url("chrome://browser/skin/filters.svg#fill");
2050 animation-delay: -1.5s;
2053 #identity-box[sharing] > #identity-icon,
2055 animation: 3s linear pulse infinite;
2059 0%, 16.66%, 83.33%, 100% {
2067 /* TRACKING PROTECTION ICON */
2069 #tracking-protection-icon {
2072 margin-inline-start: 2px;
2073 margin-inline-end: 0;
2076 #tracking-protection-icon[animate] {
2077 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2080 #tracking-protection-icon:not([state]) {
2081 margin-inline-end: -18px;
2082 pointer-events: none;
2084 /* Only animate the shield in, when it disappears hide it immediately. */
2088 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2089 visibility: collapse;
2092 /* CONNECTION ICON */
2097 margin-inline-start: 2px;
2098 visibility: collapse;
2101 /* === END identity-block.inc.css === */
2103 #page-proxy-favicon {
2104 -moz-image-region: rect(0, 16px, 16px, 0);
2107 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2108 /* margin-inline-end: 1px;*/
2111 #identity-box:hover > #page-proxy-favicon {
2112 -moz-image-region: rect(0, 32px, 16px, 16px);
2115 #identity-box:hover:active > #page-proxy-favicon,
2116 #identity-box[open=true] > #page-proxy-favicon {
2117 -moz-image-region: rect(0, 48px, 16px, 32px);
2120 #identity-box:hover {
2121 background-color: #FFCF00;
2125 #identity-box:hover:active,
2126 #identity-box[open=true] {
2127 background-color: #FF9F00;
2131 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2132 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2133 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2134 background-color: #A09090;
2138 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover > #identity-icon-labels,
2139 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active > #identity-icon-labels,
2140 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] > #identity-icon-labels {
2144 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2145 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2146 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2147 background-color: #008484;
2151 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover > #identity-icon-labels,
2152 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active > #identity-icon-labels,
2153 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] > #identity-icon-labels {
2157 #identity-box:hover > image,
2158 #identity-box:hover:active > image,
2159 #identity-box[open=true] > image {
2160 filter: url(chrome://global/skin/filters.svg#active-icon-state);
2165 #treecolAutoCompleteImage {
2170 .autocomplete-richlistbox {
2174 .autocomplete-richlistitem {
2179 border: 1px solid transparent;
2182 .autocomplete-richlistitem[selected=true] {
2183 background-color: hsl(210, 80%, 52%);
2188 /* color: hsl(0, 0%, 0%);*/
2196 background-color: hsl(216, 0%, 88%);
2197 color: hsl(0, 0%, 0%);
2199 border: 1px solid transparent;
2211 /* color: hsl(0, 0%, 50%);*/
2222 .ac-title[selected=true],
2223 .ac-separator[selected],
2224 .ac-url[selected=true],
2225 .ac-action[selected=true] {
2229 .ac-tags-text[selected] > html|span.ac-tag {
2230 background-color: #A09090;
2234 html|span.ac-emphasize-text-title,
2235 html|span.ac-emphasize-text-tag,
2236 html|span.ac-emphasize-text-url {
2240 .ac-type-icon[type=bookmark] {
2241 list-style-image: url("chrome://browser/skin/urlbar-star.svg#star");
2244 .ac-type-icon[type=bookmark][selected][current] {
2245 /* list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted");*/
2248 .ac-result-type-bookmark,
2249 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
2250 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2251 -moz-image-region: rect(0px 16px 16px 0px);
2256 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
2257 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
2258 /* -moz-image-region: rect(0px 48px 16px 32px);*/
2261 .ac-type-icon[type=keyword],
2262 .ac-site-icon[type=searchengine],
2263 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) {
2264 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2267 .ac-type-icon[type=keyword][selected],
2268 .ac-site-icon[type=searchengine][selected],
2269 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected) {
2270 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2273 .ac-result-type-tag,
2274 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
2275 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2280 .ac-type-icon[type=switchtab],
2281 .ac-type-icon[type=remotetab] {
2282 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab");
2285 .ac-type-icon[type=switchtab][selected],
2286 .ac-type-icon[type=remotetab][selected] {
2287 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted");
2290 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2291 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2297 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2298 border-top: 1px solid #9C9CFF;
2301 /* combined go/reload/stop button in location bar */
2304 #urlbar-reload-button,
2305 #urlbar-stop-button {
2307 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2308 /* margin: 0 9px; */
2309 margin-inline-start: 0px;
2310 border-inline-start: 1px solid var(--urlbar-separator-color);
2311 border-image: linear-gradient(transparent 15%,
2312 var(--urlbar-separator-color) 15%,
2313 var(--urlbar-separator-color) 85%,
2315 border-image-slice: 1;
2318 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2319 border-top-left-radius: 0px;
2320 border-bottom-left-radius: 0px;
2323 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2324 border-top-right-radius: 0px;
2325 border-bottom-right-radius: 0px;
2328 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2329 #urlbar-reload-button:not(:hover) {
2330 border-inline-start-style: none;
2331 padding-inline-start: 3px;
2334 #urlbar-reload-button {
2335 -moz-image-region: rect(0px, 14px, 14px, 0px);
2338 #urlbar-reload-button[disabled=true] {
2339 -moz-image-region: rect(28px, 14px, 42px, 0px);
2342 #urlbar-reload-button:not([disabled=true]):hover {
2343 -moz-image-region: rect(14px, 14px, 28px, 0px);
2346 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2347 transform: scaleX(-1);
2351 -moz-image-region: rect(0, 42px, 14px, 28px);
2354 #urlbar-go-button:hover {
2355 -moz-image-region: rect(14px, 42px, 28px, 28px);
2358 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2359 transform: scaleX(-1);
2362 #urlbar-stop-button {
2363 -moz-image-region: rect(0px, 28px, 14px, 14px);
2366 #urlbar-stop-button:hover {
2367 -moz-image-region: rect(14px, 28px, 28px, 14px);
2370 @media (min-resolution: 1.1dppx) {
2372 #urlbar-reload-button,
2373 #urlbar-stop-button {
2374 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2377 #urlbar-go-button > .toolbarbutton-icon,
2378 #urlbar-reload-button > .toolbarbutton-icon,
2379 #urlbar-stop-button > .toolbarbutton-icon {
2384 -moz-image-region: rect(0, 84px, 28px, 56px);
2387 #urlbar-go-button:hover {
2388 -moz-image-region: rect(28px, 84px, 56px, 56px);
2391 #urlbar-go-button:hover:active {
2392 -moz-image-region: rect(56px, 84px, 84px, 56px);
2395 #urlbar-reload-button {
2396 -moz-image-region: rect(0, 28px, 28px, 0);
2399 #urlbar-reload-button:not([disabled]):hover {
2400 -moz-image-region: rect(28px, 28px, 56px, 0);
2403 #urlbar-reload-button:not([disabled]):hover:active {
2404 -moz-image-region: rect(56px, 28px, 84px, 0);
2407 #urlbar-stop-button {
2408 -moz-image-region: rect(0, 56px, 28px, 28px);
2411 #urlbar-stop-button:not([disabled]):hover {
2412 -moz-image-region: rect(28px, 56px, 56px, 28px);
2415 #urlbar-stop-button:hover:active {
2416 -moz-image-region: rect(56px, 56px, 84px, 28px);
2420 /* popup blocker button */
2422 #page-report-button {
2423 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2424 -moz-image-region: rect(0, 16px, 16px, 0);
2427 #page-report-button:hover ,
2428 #page-report-button:hover:active,
2429 #page-report-button[open="true"] {
2430 -moz-image-region: rect(0, 32px, 16px, 16px);
2433 /* Reader mode button */
2435 #reader-mode-button {
2436 list-style-image: url("chrome://browser/skin/readerMode.svg");
2437 -moz-image-region: rect(0, 16px, 16px, 0);
2440 #reader-mode-button:hover,
2441 #reader-mode-button[readeractive]:hover {
2442 -moz-image-region: rect(0, 32px, 16px, 16px);
2445 #reader-mode-button:hover:active,
2446 #reader-mode-button[readeractive] {
2447 -moz-image-region: rect(0, 48px, 16px, 32px);
2450 /* social share panel */
2452 /* === BEGIN social.inc.css === */
2454 #manage-share-providers {
2455 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
2456 -moz-image-region: rect(0, 468px, 18px, 450px);
2459 #manage-share-providers > .toolbarbutton-icon {
2464 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
2467 /* fixup corners for share panel */
2468 .social-panel > .social-panel-frame {
2469 border-radius: inherit;
2472 /* === END social.inc.css === */
2474 .social-panel-frame {
2475 border-radius: inherit;
2478 .social-share-frame {
2485 background-color: white;
2486 background-repeat: no-repeat;
2487 background-position: center center;
2489 #share-container[loading] {
2490 background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2492 #share-container > browser {
2493 transition: opacity 150ms ease-in-out;
2496 #share-container[loading] > browser {
2500 .social-share-toolbar {
2501 border-bottom: 1px solid #9C9CFF;
2505 #social-share-provider-buttons {
2510 .share-provider-button {
2515 .share-provider-button > .toolbarbutton-text {
2518 .share-provider-button > .toolbarbutton-icon {
2524 #social-share-panel {
2530 .social-share-frame {
2531 border-top-left-radius: 0;
2532 border-bottom-left-radius: inherit;
2533 border-top-right-radius: 0;
2534 border-bottom-right-radius: inherit;
2537 #social-share-panel > .social-share-toolbar {
2538 border-top-left-radius: inherit;
2539 border-top-right-radius: inherit;
2542 #social-share-provider-buttons {
2543 border-top-left-radius: inherit;
2544 border-top-right-radius: inherit;
2547 /* bookmarks menu-button */
2549 #bookmarks-menu-button.bookmark-item {
2550 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2551 -moz-image-region: rect(0px 16px 16px 0px);
2554 #bookmarks-menu-button.bookmark-item[starred] {
2555 -moz-image-region: rect(0px 32px 16px 16px);
2558 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2560 padding-bottom: 2px;
2563 #BMB_bookmarksPopup[side="top"],
2564 #BMB_bookmarksPopup[side="bottom"] {
2566 margin-right: -20px;
2569 #BMB_bookmarksPopup[side="left"],
2570 #BMB_bookmarksPopup[side="right"] {
2572 margin-bottom: -20px;
2575 /* bookmarking panel */
2577 #editBookmarkPanelStarIcon {
2578 list-style-image: url("chrome://browser/skin/places/starred48.png");
2583 #editBookmarkPanelStarIcon[unstarred] {
2584 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2587 #editBookmarkPanelTitle {
2591 #editBookmarkPanelHeader,
2592 #editBookmarkPanelContent {
2593 margin-bottom: .5em;
2596 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2597 #editBMPanel_folderTree {
2601 /* ::::: content area ::::: */
2604 background-color: #9C9CFF;
2609 background-color: #000000;
2613 margin-inline-start: 0;
2622 padding-inline-start: 0px;
2625 #sidebar-header > .close-icon {
2626 /* padding: 4px 2px;
2629 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2632 #sidebar-header > .close-icon:hover,
2633 #sidebar-header > .close-icon:hover:active {
2634 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2637 #sidebar-splitter:-moz-locale-dir(ltr),
2638 #sidebar:-moz-locale-dir(ltr) {
2639 border-radius: 0 5px 0 0;
2642 #sidebar-splitter:-moz-locale-dir(rtl),
2643 #sidebar:-moz-locale-dir(rtl) {
2644 border-radius: 5px 0 0 0;
2647 .browserContainer > findbar {
2649 background-color: -moz-dialog;
2650 color: -moz-DialogText;
2659 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2662 #TabsToolbar .toolbar-holder {
2663 background-color: #000000; /* correct effect of being an actual toolbar */
2666 #main-window[disablechrome] #TabsToolbar,
2667 #TabsToolbar[tabsontop="false"] {
2668 border-bottom: 1px solid #008484;
2671 /* === BEGIN tabs.inc.css === */
2674 /* --tab-toolbar-navbar-overlap: 1px; */
2675 /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2676 /* --tab-min-height: 31px; */
2679 /* --tab-stroke-background-size: auto 100%; */
2683 .tabs-newtab-button,
2684 #TabsToolbar > #new-tab-button {
2689 padding: 1px 4px 2px;
2692 .tabbrowser-tab:first-of-type {
2693 margin-inline-start: 2px;
2696 .tabs-newtab-button,
2697 #TabsToolbar > #new-tab-button,
2698 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2699 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2700 border-radius: 8px 8px 0px 0px;
2701 margin-inline-start: 0;
2704 .tabs-newtab-button:not(:hover),
2705 #TabsToolbar > #new-tab-button:not(:hover),
2706 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2707 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2708 background-color: #C09070;
2711 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2712 .tabbrowser-tab[visuallyselected=true] {
2713 /* position: relative;
2717 .tab-background-middle {
2723 .tab-content[pinned] {
2728 .tab-sharing-icon-overlay,
2734 .tab-sharing-icon-overlay,
2738 margin-inline-end: 3px;
2742 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2745 .tab-icon-image[sharing]:not([selected]),
2746 .tab-sharing-icon-overlay {
2747 animation: 3s linear pulse infinite;
2751 0%, 16.66%, 83.33%, 100% {
2759 .tab-icon-image[sharing]:not([selected]) {
2760 animation-delay: -1.5s;
2763 .tab-sharing-icon-overlay {
2764 /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */
2765 margin-inline-start: -22px;
2769 .tab-sharing-icon-overlay[sharing="camera"] {
2770 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
2773 .tab-sharing-icon-overlay[sharing="microphone"] {
2774 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
2777 .tab-sharing-icon-overlay[sharing="screen"] {
2778 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
2785 margin-inline-start: -15px;
2786 margin-inline-end: -1px;
2790 .tab-icon-overlay[crashed] {
2791 list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2794 .tab-icon-overlay[soundplaying],
2795 .tab-icon-overlay[muted]:not([crashed]) {
2796 border-radius: 10px;
2799 .tab-icon-overlay[soundplaying]:hover,
2800 .tab-icon-overlay[muted]:hover {
2801 background-color: #FFCF00;
2804 .tab-icon-overlay[soundplaying] {
2805 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2808 .tab-icon-overlay[muted]:not([crashed]) {
2809 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2812 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) {
2813 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2817 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) {
2818 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2821 .tab-throbber[busy] {
2822 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2825 .tab-throbber[progress] {
2826 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2829 @media (min-resolution: 1.1dppx) {
2830 .tab-throbber[busy] {
2831 list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
2834 .tab-throbber[progress] {
2835 list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
2839 .tab-throbber[pinned],
2840 .tab-icon-image[pinned] {
2841 margin-inline-start: 2px;
2842 margin-inline-end: 2px;
2846 /* this needs to add up to the 16px of the icon image */
2848 margin-top: 2px !important;
2849 margin-bottom: 2px !important;
2853 margin-inline-start: 4px;
2859 .tab-icon-sound[soundplaying],
2860 .tab-icon-sound[muted] {
2861 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
2862 filter: url(chrome://browser/skin/filters.svg#fill);
2866 .tab-icon-sound[muted] {
2867 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
2876 .tabs-newtab-button {
2877 /* overlap the tab curves */
2880 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
2884 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
2885 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
2888 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
2889 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
2892 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
2895 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
2898 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
2899 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
2902 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
2903 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
2906 .tab-background-start[selected=true]::after,
2907 .tab-background-start[selected=true]::before,
2908 .tab-background-start,
2909 .tab-background-end,
2910 .tab-background-end[selected=true]::after,
2911 .tab-background-end[selected=true]::before {
2914 .tabbrowser-tab:not([visuallyselected=true]),
2915 .tabbrowser-tab:-moz-lwtheme {
2918 /* tabbrowser-tab focus ring */
2919 .tabbrowser-tab:focus {
2920 outline: 1px dotted;
2925 .tabbrowser-tab[visuallyselected="true"] {
2928 /* End selected tab */
2930 /* Tab pointer-events */
2933 pointer-events: none;
2936 .tab-background-middle,
2937 .tabs-newtab-button,
2938 .tab-icon-overlay[soundplaying],
2939 .tab-icon-overlay[muted]:not([crashed]),
2942 pointer-events: auto;
2948 .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
2949 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
2951 .tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
2952 background-color: #E7ADE7;
2955 .tab-label[attention]:not([selected="true"]) {
2959 .tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
2960 background-color: #3333FF;
2964 /* Tab separators */
2966 .tabbrowser-tab::after,
2967 .tabbrowser-tab::before {
2969 margin-inline-start: -1px;
2970 background-image: linear-gradient(transparent 5px,
2972 currentColor calc(100% - 4px),
2973 transparent calc(100% - 4px));
2977 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
2978 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
2982 /* Also show separators beside the selected tab when dragging it. */
2984 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
2985 .tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
2986 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
2991 /* New tab button */
2993 .tabs-newtab-button {
2995 /* width: calc(36px + var(--tab-curve-width)); */
2997 @media (min-resolution: 1.1dppx) {
2998 /* image preloading hack from like lowdpi styles */
2999 #tabbrowser-tabs::before {
3002 .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
3003 .tabs-newtab-button:hover {
3006 .tab-background-middle[selected=true] {
3009 .tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
3010 .tab-background-end[selected=true]:-moz-locale-dir(rtl)::after {
3013 .tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
3014 .tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
3018 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
3022 /* All tabs menupopup */
3024 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3025 background-color: #402800;
3028 .alltabs-endimage[soundplaying],
3029 .alltabs-endimage[muted] {
3030 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
3031 filter: url(chrome://browser/skin/filters.svg#fill);
3035 .alltabs-endimage[muted] {
3036 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
3039 /* === END tabs.inc.css === */
3041 /* Tab DnD indicator */
3042 .tab-drop-indicator {
3043 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3044 margin-bottom: -11px;
3047 /* Tab close button */
3049 list-style-image: url("chrome://global/skin/icons/close-button.gif") !important;
3050 -moz-image-region: auto !important;
3053 .tab-close-button:hover,
3054 .tab-close-button:hover[selected="true"] {
3055 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
3056 -moz-image-region: auto !important;
3059 .tab-close-button:hover:active,
3060 .tab-close-button:hover:active[selected="true"] {
3061 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
3062 -moz-image-region: auto !important;
3065 .tab-close-button > .button-icon,
3066 .tab-close-button > .button-box > .button-icon,
3067 .tab-close-button > .toolbarbutton-icon {
3068 width: auto !important;
3072 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3074 .tabbrowser-arrowscrollbox > .scrollbutton-up,
3075 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3079 background-origin: border-box;
3082 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3083 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3084 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3085 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3088 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3089 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3092 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3093 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3094 /* transform: scaleX(-1);*/
3097 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3098 transition: 1s background-color ease-out;
3101 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
3102 background-color: #008484;
3105 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3106 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3107 /* border-width: 0 2px 0 0;
3108 border-style: solid;
3109 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3112 .tabs-newtab-button > .toolbarbutton-icon {
3114 margin-bottom: -1px;
3117 .tabs-newtab-button,
3118 #TabsToolbar > #new-tab-button,
3119 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3120 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3121 list-style-image: url("chrome://browser/skin/tabbrowser/newtab.svg");
3122 -moz-image-region: auto;
3125 .tabs-newtab-button,
3126 .tabs-newtab-button:hover,
3127 #TabsToolbar > #new-tab-button,
3128 #TabsToolbar > #new-tab-button:hover {
3131 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3132 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3133 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3134 .tabs-newtab-button:-moz-lwtheme-brighttext,
3135 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3136 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3139 #TabsToolbar > #new-tab-button {
3144 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3147 #alltabs-button:hover,
3148 #alltabs-button:hover:active,
3149 #alltabs-button[open="true"] {
3150 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3153 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3154 #alltabs-button:-moz-lwtheme-brighttext {
3157 #alltabs-button > .toolbarbutton-icon {
3161 #alltabs-button > .toolbarbutton-menu-dropmarker {
3165 /* All tabs menupopup */
3166 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3167 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
3168 -moz-image-region: auto;
3171 .alltabs-item[selected="true"] {
3175 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3176 list-style-image: url("chrome://global/skin/icons/loading.png");
3179 @media (min-resolution: 1.1dppx) {
3180 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3181 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3185 toolbarbutton.chevron {
3186 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3189 toolbarbutton.chevron:hover {
3190 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3193 toolbar[brighttext] toolbarbutton.chevron {
3194 list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3197 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3198 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3199 transform: scaleX(-1);
3202 toolbarbutton.chevron > .toolbarbutton-text,
3203 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3207 toolbarbutton.chevron > .toolbarbutton-icon {
3211 #sidebar-throbber[loading="true"] {
3212 list-style-image: url("chrome://global/skin/icons/loading.png");
3213 margin-inline-end: 4px;
3216 @media (min-resolution: 1.1dppx) {
3217 #sidebar-throbber[loading="true"] {
3218 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3223 /* Bookmarks toolbar */
3224 #PlacesToolbarDropIndicator {
3225 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3228 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3229 background-color: #008484 !important;
3230 color: #FFCF00 !important;
3233 /* rules for menupopup drop indicators */
3234 .menupopup-drop-indicator-bar {
3236 /* these two margins must together compensate the indicator's height */
3238 margin-bottom: -1px;
3241 .menupopup-drop-indicator {
3242 list-style-image: none;
3244 margin-inline-end: -4em;
3245 background-color: #008484;
3248 /* === BEGIN notification-icons.inc.css === */
3250 #notification-popup-box {
3251 border-radius: 3px 0 0 3px;
3254 margin-inline-end: -5px;
3255 padding-inline-end: 5px;
3258 .notification-anchor-icon,
3259 #blocked-permissions-container > .blocked-permission-icon {
3262 margin-inline-start: 2px;
3265 /* This class can be used alone or in combination with the class defining the
3266 type of icon displayed. This rule must be defined before the others in order
3267 for its list-style-image to be overridden. */
3268 .notification-anchor-icon {
3269 list-style-image: url("chrome://global/skin/icons/information-16.png");
3272 .notification-anchor-icon:-moz-focusring {
3273 outline: 1px dotted #008484;
3276 @media (min-resolution: 1.1dppx) {
3277 .notification-anchor-icon {
3278 list-style-image: url(chrome://global/skin/icons/information-32.png);
3282 .popup-notification-icon {
3285 margin-inline-end: 10px;
3288 .notification-anchor-icon:not(.plugin-blocked),
3289 #blocked-permissions-container > .blocked-permission-icon {
3290 filter: url(chrome://global/skin/filters.svg#fill);
3294 .notification-anchor-icon:not(.plugin-blocked):not(:hover) {
3297 /* INDIVIDUAL NOTIFICATIONS */
3299 .popup-notification-icon[popupid="web-notifications"],
3300 .desktop-notification-icon {
3301 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification);
3304 .desktop-notification-icon.blocked-permission-icon {
3305 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked);
3309 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows);
3312 .geo-icon.blocked-permission-icon {
3313 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-blocked);
3316 .popup-notification-icon[popupid="geolocation"] {
3317 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-detailed);
3320 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3322 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB);
3325 .indexedDB-icon.blocked-permission-icon {
3326 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked);
3330 list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
3333 .popup-notification-icon[popupid="password"] {
3334 list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed);
3338 .popup-notification-icon[popupid="webRTC-shareDevices"] {
3339 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera);
3342 .camera-icon.in-use {
3343 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-sharing);
3346 .camera-icon.blocked-permission-icon {
3347 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked);
3351 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone);
3354 .microphone-icon.in-use {
3355 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-sharing);
3358 .microphone-icon.blocked-permission-icon {
3359 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked);
3362 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3363 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed);
3366 .popup-notification-icon[popupid="webRTC-shareScreen"],
3368 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen);
3371 .screen-icon.in-use {
3372 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-sharing);
3375 .screen-icon.blocked-permission-icon {
3376 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked);
3379 /* This icon has a block sign in it, so we don't need a blocked version. */
3381 list-style-image: url("chrome://browser/skin/notification-icons.svg#popup");
3386 .popup-notification-icon[popupid="drmContentPlaying"],
3388 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3391 .drm-icon:hover:active {
3392 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3395 #eme-notification-icon[firstplay=true] {
3396 animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3399 @keyframes emeTeachingMoment {
3400 0% {transform: translateX(0); }
3401 25% {transform: translateX(3px) }
3402 75% {transform: translateX(-3px) }
3403 100% { transform: translateX(0); }
3406 /* INSTALL ADDONS */
3409 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default);
3412 .popup-notification-icon[popupid="xpinstall-disabled"],
3413 .popup-notification-icon[popupid="addon-install-blocked"],
3414 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
3415 list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3418 .popup-notification-icon[popupid="addon-progress"] {
3419 list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3422 .popup-notification-icon[popupid="addon-install-failed"] {
3423 list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3426 .popup-notification-icon[popupid="addon-install-confirmation"] {
3427 list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3430 #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3431 list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3434 .popup-notification-icon[popupid="addon-install-complete"] {
3435 list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3438 .popup-notification-icon[popupid="addon-install-restart"] {
3439 list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3442 .popup-notification-icon[popupid="click-to-play-plugins"] {
3443 list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png);
3448 .popup-notification-icon[popupid*="offline-app-requested"],
3449 .popup-notification-icon[popupid="offline-app-usage"] {
3450 list-style-image: url(chrome://global/skin/icons/question-64.png);
3456 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
3459 .plugin-icon.plugin-blocked {
3460 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
3463 #notification-popup-box[hidden] {
3464 /* Override display:none to make the pluginBlockedNotification animation work
3465 when showing the notification repeatedly. */
3467 visibility: collapse;
3470 #plugins-notification-icon.plugin-blocked[showing] {
3471 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3474 @keyframes pluginBlockedNotification {
3485 .popup-notification-icon[popupid="servicesInstall"] {
3486 list-style-image: url(chrome://browser/skin/social/services-64.png);
3490 list-style-image: url(chrome://browser/skin/social/services-16.png);
3496 list-style-image: url(chrome://browser/skin/translation-16.png);
3497 -moz-image-region: rect(0px, 16px, 16px, 0px);
3500 .translation-icon.in-use {
3501 -moz-image-region: rect(0px, 32px, 16px, 16px);
3504 /* === END notification-icons.inc.css === */
3506 .popup-notification-body[popupid="addon-progress"],
3507 .popup-notification-body[popupid="addon-install-confirmation"] {
3512 /* Translation infobar */
3514 /* === BEGIN infobar.inc.css === */
3516 notification[value="translation"] .messageImage {
3517 list-style-image: url("chrome://browser/skin/translation-16.png");
3518 -moz-image-region: rect(0, 32px, 16px, 16px);
3521 @media (min-resolution: 1.25dppx) {
3522 notification[value="translation"] .messageImage {
3523 list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3524 -moz-image-region: rect(0, 64px, 32px, 32px);
3528 notification[value="translation"][state="translating"] .messageImage {
3529 list-style-image: url("chrome://browser/skin/translating-16.png");
3530 -moz-image-region: auto;
3533 @media (min-resolution: 1.25dppx) {
3534 notification[value="translation"][state="translating"] .messageImage {
3535 list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3539 notification[value="translation"] hbox[anonid="details"] {
3543 notification[value="translation"] button,
3544 notification[value="translation"] menulist {
3548 notification[value="translation"] menulist > .menulist-dropmarker {
3551 .translation-menupopup arrowscrollbox {
3555 .translation-attribution {
3557 -moz-box-align: end;
3561 .translation-attribution > label {
3565 .translation-attribution > image {
3569 .translation-welcome-panel {
3573 .translation-welcome-logo {
3576 list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3577 -moz-image-region: rect(0, 64px, 32px, 32px);
3580 .translation-welcome-content {
3581 margin-inline-start: 16px;
3584 .translation-welcome-headline {
3589 .translation-welcome-body {
3594 /* === END infobar.inc.css === */
3596 notification[value="translation"] {
3600 .translation-menupopup {
3601 -moz-appearance: none;
3604 /* Bookmarks roots menu-items */
3605 #subscribeToPageMenuitem:not([disabled]),
3606 #subscribeToPageMenupopup {
3607 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3610 #bookmarksToolbarFolderMenu,
3611 #BMB_bookmarksToolbar,
3612 #panelMenu_bookmarksToolbar {
3613 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3614 -moz-image-region: auto;
3617 #BMB_unsortedBookmarks,
3618 #panelMenu_unsortedBookmarks {
3619 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3620 -moz-image-region: auto;
3625 .statuspanel-label {
3628 background: #404000;
3629 border: 1px none #9C9CFF;
3630 border-top-style: solid;
3635 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3636 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3637 border-right-style: solid;
3638 border-top-right-radius: .3em;
3642 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3643 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3644 border-left-style: solid;
3645 border-top-left-radius: .3em;
3649 /* HACK to abolish devily color on main content */
3652 background-color: transparent !important;
3655 /* === BEGIN fullscreen/warning.inc.css === */
3657 html|*.pointerlockfswarning {
3658 align-items: center;
3659 background: rgba(0, 0, 0, 0.9);
3660 border: 2px solid #A09090;
3661 box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
3664 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3667 html|*.pointerlockfswarning::before {
3669 width: 24px; height: 24px;
3672 html|*.pointerlockfswarning[data-identity="verifiedIdentity"]::before,
3673 html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before {
3674 content: url("chrome://browser/skin/fullscreen/secure.svg");
3677 html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before {
3678 content: url("chrome://browser/skin/fullscreen/insecure.svg");
3681 html|*.pointerlockfswarning-domain-text,
3682 html|*.pointerlockfswarning-generic-text {
3684 font-weight: lighter;
3689 html|*.pointerlockfswarning-domain {
3694 html|*.pointerlockfswarning-exit-button {
3696 font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3698 font-weight: lighter;
3700 box-sizing: content-box;
3702 border-radius: 300px;
3704 background-color: #C09070;
3708 /* === END fullscreen/warning.inc.css === */
3710 /* === BEGIN ctrlTab.inc.css === */
3715 -moz-appearance: none;
3716 background: rgba(0%,0%,0%,.7);
3719 padding: 20px 10px 10px;
3723 .ctrlTab-favicon[src] {
3724 background-color: #000000;
3730 .ctrlTab-preview-inner > .tabPreview-canvas {
3731 /* box-shadow: 1px 1px 2px hsl(0,0%,12%);*/
3734 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3738 .ctrlTab-preview-inner {
3740 border: 2px solid transparent;
3741 border-radius: .5em;
3744 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner {
3745 margin: -10px -10px 0;
3748 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3749 background-color: #000000;
3752 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3754 background-color: #000000;
3756 border-color: #9C9CFF;
3763 /* === END ctrlTab.inc.css === */
3765 /* === BEGIN commandline.inc.css === */
3767 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
3768 We are copy/pasting variables from light-theme and dark-theme,
3769 since they aren't loaded in this context (within browser.css). */
3770 :root #developer-toolbar {
3771 --gcli-background-color: #000000; /* --theme-toolbar-background */
3772 --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
3773 --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
3774 --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
3775 --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
3776 --selection-background: #008484; /* --theme-selection-background */
3777 --selection-color: #000000; /* --theme-selection-color */
3778 --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */
3779 --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */
3782 /* Developer toolbar */
3784 #developer-toolbar {
3785 border-top: 3px solid var(--gcli-background-color);
3786 border-bottom: none;
3789 #developer-toolbar .toolbar-holder {
3790 background-color: #8050B0;
3794 #developer-toolbar .toolbar-holder {
3795 background-color: #8050B0;
3799 #developer-toolbar .toolbar-startcap,
3800 #developer-toolbar .toolbar-endcap{
3801 background-color: #6000CF;
3804 #developer-toolbar {
3806 min-height: 32px; */
3809 #developer-toolbar > toolbarbutton {
3811 background-color: transparent;
3817 .developer-toolbar-button > image {
3818 /* margin: auto 10px; */
3821 #developer-toolbar-toolbox-button > label {
3825 .developer-toolbar-button > .toolbarbutton-icon {
3830 #developer-toolbar-toolbox-button {
3831 list-style-image: url("chrome://devtools/skin/images/toggle-tools.png");
3832 -moz-image-region: rect(0px, 16px, 16px, 0px);
3835 #developer-toolbar-toolbox-button > label {
3839 #developer-toolbar-toolbox-button:hover,
3840 #developer-toolbar-toolbox-button:hover:active,
3841 #developer-toolbar-toolbox-button[checked=true] {
3842 -moz-image-region: rect(0px, 32px, 16px, 16px);
3845 @media (min-resolution: 2dppx) {
3846 #developer-toolbar-toolbox-button {
3847 list-style-image: url("chrome://devtools/skin/images/toggle-tools@2x.png");
3848 -moz-image-region: rect(0px, 32px, 32px, 0px);
3851 #developer-toolbar-toolbox-button:hover,
3852 #developer-toolbar-toolbox-button:hover:active,
3853 #developer-toolbar-toolbox-button[checked=true] {
3854 -moz-image-region: rect(0px, 64px, 32px, 32px);
3860 html|*#gcli-tooltip-frame,
3861 html|*#gcli-output-frame {
3864 background-color: transparent;
3870 background-color: transparent;
3873 .gclitoolbar-input-node,
3874 .gclitoolbar-complete-node {
3876 -moz-box-align: center;
3880 background-color: transparent;
3883 .gclitoolbar-input-node {
3884 /* line-height: 32px;
3885 outline-style: none; */
3886 background-repeat: no-repeat;
3887 background-color: var(--gcli-input-background);
3890 .gclitoolbar-input-node[focused="true"] {
3891 background-color: var(--gcli-input-focused-background);
3894 .gclitoolbar-input-node::before {
3896 display: inline-block;
3897 -moz-box-ordinal-group: 0;
3901 background-image: var(--command-line-image);
3904 .gclitoolbar-input-node[focused="true"]::before {
3905 background-image: var(--command-line-image-focus);
3908 .gclitoolbar-input-node:not([focused="true"]) {
3909 border-color: transparent;
3912 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
3913 background-color: var(--selection-background);
3914 color: var(--selection-color);
3917 .gclitoolbar-complete-node {
3919 background-color: transparent;
3922 pointer-events: none;
3925 .gcli-in-incomplete,
3929 .gcli-in-closebrace,
3936 .gcli-in-incomplete {
3937 border-bottom: 2px dotted #8050B0;
3941 border-bottom: 2px dotted #FF0000;
3952 .gcli-in-closebrace {
3956 /* === END commandline.inc.css === */
3958 /* === BEGIN responsivedesign.inc.css === */
3960 /* Responsive Mode */
3962 .browserContainer[responsivemode] {
3963 background-color: #221500;
3964 padding: 0 20px 20px 20px;
3967 .browserStack[responsivemode] {
3968 box-shadow: 0 0 7px #9C9CFF;
3971 .devtools-responsiveui-toolbar {
3972 background: transparent;
3973 /* text color is textColor from dark theme, since no theme is applied to
3974 * the responsive toolbar.
3980 border-bottom-width: 0;
3983 .devtools-responsiveui-textinput {
3984 /* -moz-appearance: none;
3987 border: 1px solid #111;
3994 .devtools-responsiveui-textinput[attention] {
3995 /* border-color: #38ace6;
3996 background: rgba(56,172,230,0.4);*/
3999 .devtools-responsiveui-menulist,
4000 .devtools-responsiveui-toolbarbutton {
4001 -moz-box-align: center;
4003 /* min-height: 22px;*/
4004 /* margin: 0 3px; */
4007 .devtools-responsiveui-menulist .menulist-editable-box {
4008 background-color: transparent;
4011 .devtools-responsiveui-menulist html|*.menulist-editable-input {
4016 .devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4017 /* background: hsla(212,7%,57%,.35);*/
4020 .devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4025 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4026 -moz-box-orient: horizontal;
4029 .devtools-responsiveui-menulist:-moz-focusring,
4030 .devtools-responsiveui-toolbarbutton:-moz-focusring {
4031 /* outline: 1px dotted hsla(210,30%,85%,0.7);
4032 outline-offset: -4px;*/
4035 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4039 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4040 /* border-color: hsla(210,8%,5%,.6);
4041 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4042 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); */
4045 .devtools-responsiveui-menulist[open=true],
4046 .devtools-responsiveui-toolbarbutton[open=true],
4047 .devtools-responsiveui-toolbarbutton[checked=true] {
4048 /* border-color: hsla(210,8%,5%,.6) !important;
4049 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4050 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); */
4053 .devtools-responsiveui-toolbarbutton[checked=true] {
4054 /* color: hsl(208,100%,60%); */
4057 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
4058 /* background-color: transparent !important;*/
4061 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4062 /* background-color: hsla(210,8%,5%,.2) !important;*/
4065 .devtools-responsiveui-menulist > .menulist-label-box {
4069 .devtools-responsiveui-menulist > .menulist-dropmarker {
4070 /* display: -moz-box;
4071 background-color: transparent;
4072 list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4073 -moz-box-align: center;
4078 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
4081 border-inline-end: 1px solid hsla(210,8%,5%,.45);
4082 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
4085 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
4086 /* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
4089 .devtools-responsiveui-toolbarbutton[type=menu-button] {
4090 /* padding: 0 1px;*/
4091 -moz-box-align: stretch;
4094 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
4095 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
4096 /* list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4097 -moz-box-align: center;
4101 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
4102 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
4106 .devtools-responsiveui-close {
4107 list-style-image: url("chrome://devtools/skin/close.svg");
4110 .devtools-responsiveui-close:hover {
4111 filter: url(chrome://devtools/skin/images/filters.svg#checked-icon-state);
4114 .devtools-responsiveui-close > image {
4118 .devtools-responsiveui-rotate {
4119 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate.png");
4120 -moz-image-region: rect(0px,16px,16px,0px);
4123 .devtools-responsiveui-rotate:hover {
4124 -moz-image-region: rect(0px,32px,16px,16px);
4127 @media (min-resolution: 2dppx) {
4128 .devtools-responsiveui-rotate {
4129 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate@2x.png");
4132 .devtools-responsiveui-rotate:hover {
4133 -moz-image-region: rect(0px,64px,32px,32px);
4137 .devtools-responsiveui-touch {
4138 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch.png");
4139 -moz-image-region: rect(0px,16px,16px,0px);
4142 .devtools-responsiveui-touch:hover,
4143 .devtools-responsiveui-touch[checked],
4144 .devtools-responsiveui-touch[checked]:hover {
4145 -moz-image-region: rect(0px,32px,16px,16px);
4148 @media (min-resolution: 2dppx) {
4149 .devtools-responsiveui-touch {
4150 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch@2x.png");
4151 -moz-image-region: rect(0px,32px,32px,0px);
4154 .devtools-responsiveui-touch:hover,
4155 .devtools-responsiveui-touch[checked],
4156 .devtools-responsiveui-touch[checked]:hover {
4157 -moz-image-region: rect(0px,64px,32px,32px);
4161 .devtools-responsiveui-screenshot {
4162 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot.png");
4163 -moz-image-region: rect(0px,16px,16px,0px);
4166 .devtools-responsiveui-screenshot:hover {
4167 -moz-image-region: rect(0px,32px,16px,16px);
4170 @media (min-resolution: 2dppx) {
4171 .devtools-responsiveui-screenshot {
4172 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot@2x.png");
4175 .devtools-responsiveui-screenshot:hover {
4176 -moz-image-region: rect(0px,64px,32px,32px);
4180 .devtools-responsiveui-resizebarV {
4184 transform: translate(12px, -12px);
4185 background-size: cover;
4186 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer.png");
4189 .devtools-responsiveui-resizebarH {
4193 transform: translate(-12px, 12px);
4194 background-size: cover;
4195 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer.png");
4198 .devtools-responsiveui-resizehandle {
4202 transform: translate(12px, 12px);
4203 background-size: cover;
4204 background-image: url("chrome://devtools/skin/images/responsive-se-resizer.png");
4207 /* FxOS custom mode with additional buttons and phone look'n feel */
4209 /* Hide devtools manual resizer */
4210 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
4211 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
4212 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
4216 /* Gives responsive mode a phone look'n feel */
4217 .browserStack[responsivemode].fxos-mode {
4218 padding: 60px 15px 0;
4220 border-radius: 25px / 20px;
4221 border-bottom-left-radius: 0;
4222 border-bottom-right-radius: 0;
4223 border: 1px solid #FFFFFF;
4224 border-bottom-width: 0;
4226 background-color: #353535;
4228 box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
4230 background-image: linear-gradient(to right, #111 11%, #333 56%);
4234 .devtools-responsiveui-hardware-buttons {
4235 -moz-appearance: none;
4238 border: 1px solid #FFFFFF;
4239 border-bottom-left-radius: 25px;
4240 border-bottom-right-radius: 25px;
4241 border-top-width: 0;
4243 box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
4245 background-image: linear-gradient(to right, #111 11%, #333 56%);
4248 .devtools-responsiveui-home-button {
4249 -moz-user-focus: ignore;
4252 list-style-image: url("chrome://devtools/skin/images/responsiveui-home.png");
4255 .devtools-responsiveui-sleep-button {
4256 -moz-user-focus: ignore;
4257 -moz-appearance: none;
4258 /* compensate browserStack top padding */
4266 border: 1px solid #444;
4267 border-top-right-radius: 12px;
4268 border-top-left-radius: 12px;
4269 border-bottom-color: transparent;
4271 background-image: linear-gradient(to top, #111 11%, #333 56%);
4274 .devtools-responsiveui-sleep-button:hover:active {
4275 background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
4278 .devtools-responsiveui-volume-buttons {
4282 .devtools-responsiveui-volume-up-button,
4283 .devtools-responsiveui-volume-down-button {
4284 -moz-user-focus: ignore;
4285 -moz-appearance: none;
4286 border: 1px solid red;
4290 border: 1px solid #444;
4291 border-right-color: transparent;
4293 background-image: linear-gradient(to right, #111 11%, #333 56%);
4296 .devtools-responsiveui-volume-up-button:hover:active,
4297 .devtools-responsiveui-volume-down-button:hover:active {
4298 background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
4301 .devtools-responsiveui-volume-up-button {
4302 border-top-left-radius: 12px;
4305 .devtools-responsiveui-volume-down-button {
4306 border-bottom-left-radius: 12px;
4309 @media (min-resolution: 2dppx) {
4310 .devtools-responsiveui-resizebarV {
4311 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer@2x.png");
4314 .devtools-responsiveui-resizebarH {
4315 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer@2x.png");
4318 .devtools-responsiveui-resizehandle {
4319 background-image: url("chrome://devtools/skin/images/responsive-se-resizer@2x.png");
4323 /* === END responsivedesign.inc.css === */
4325 /* === including indicator.css is done at the start of the file === */
4329 #developer-toolbar-toolbox-button[error-count]:before {
4333 background-color: #FF0000;
4335 margin-inline-end: 5px;
4338 /* === BEGIN plugin-doorhanger.inc.css === */
4341 * Plugin Doorhanger Styles
4344 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4345 padding: 6px 1px 2px;
4348 .click-to-play-plugins-notification-center-box {
4351 .plugin-popupnotification-centeritem:nth-child(odd) {
4352 /* background-color: rgba(0,0,0,0.1);*/
4355 .center-item-label {
4357 text-overflow: ellipsis;
4360 .center-item-warning-icon {
4361 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.svg");
4362 background-repeat: no-repeat;
4365 margin-inline-start: 6px;
4368 .click-to-play-plugins-notification-button-container {
4371 .click-to-play-popup-button {
4375 .click-to-play-plugins-notification-description-box {
4379 padding-bottom: 3px;
4382 .click-to-play-plugins-outer-description {
4386 .click-to-play-plugins-notification-link,
4391 .messageImage[value="plugin-hidden"] {
4392 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
4395 /* Keep any changes to this style in sync with pluginProblem.css */
4396 notification.pluginVulnerable {
4399 notification.pluginVulnerable .messageImage {
4400 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
4403 /* === END plugin-doorhanger.inc.css === */
4405 /* === BEGIN customizeMode.inc.css === */
4407 /* Customization mode */
4410 --drag-drop-transition-duration: .3s;
4413 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
4417 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
4418 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4419 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4424 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4425 pointer-events: none;
4428 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4429 #PanelUI-contents > .panel-customization-placeholder {
4430 -moz-outline-radius: 2.5px;
4431 outline: 1px dashed transparent;
4434 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4435 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4436 -moz-box-ordinal-group: 0;
4441 outline-offset: -2px;
4442 pointer-events: none;
4448 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4449 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4450 offset from the bottom effectively the same as other targets (-2px). */
4451 #main-window[customize-entered] #TabsToolbar.customization-target::before {
4455 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4456 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4457 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4458 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
4462 /* Most target outlines are shown on hover and drag over but the panel menu uses
4463 placeholders instead. */
4464 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4465 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4466 /* nav-bar and panel outlines are always shown */
4467 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4468 outline-color: currentColor;
4471 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4472 transition: outline-color 250ms linear;
4475 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
4476 transition: outline-color 250ms linear;
4477 outline-color: var(--panel-separator-color);
4480 #PanelUI-contents > .panel-customization-placeholder {
4482 outline-offset: -5px;
4485 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
4487 /* padding-left: 10px;
4488 padding-right: 10px;*/
4491 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
4495 #customization-container {
4496 background-color: #000000;
4500 #customization-palette,
4501 #customization-empty {
4502 padding: 0 15px 15px;
4505 #customization-header {
4507 line-height: 1.75em;
4510 margin: 25px 25px 12px;
4511 padding-bottom: 12px;
4512 border-bottom: 1px solid #A09090;
4515 #customization-panel-container {
4516 padding: 10px 10px 0px;
4519 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4520 #customization-footer {
4521 /*background-color: rgb(236,236,236);*/
4524 #customization-footer {
4525 border-top: 1px solid #9C9CFF;
4529 .customizationmode-button {
4533 .customizationmode-button:hover {
4536 .customizationmode-button > .box-inherit {
4539 .customizationmode-button > .button-icon {
4542 .customizationmode-button:not([type=menu]) > .button-text {
4545 .customizationmode-button > .button-menu-dropmarker {
4550 .customizationmode-button[checked] {
4551 background-color: #008484;
4554 .customizationmode-button[checked]:hover:not([disabled]),
4555 .customizationmode-button:hover:not([disabled]) {
4556 background-color: #FFCF00;
4559 .customizationmode-button[checked]:hover:active:not([disabled]),
4560 .customizationmode-button:hover:active:not([disabled]),
4561 .customizationmode-button[open] {
4562 background-color: #FF9F00;
4565 .customizationmode-button[disabled="true"] {
4568 .customizationmode-button > .box-inherit > .box-inherit > .button-icon,
4569 .customizationmode-button > .button-box > .button-icon {
4573 #customization-titlebar-visibility-button {
4574 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
4575 -moz-image-region: rect(0, 16px, 16px, 0);
4578 #customization-titlebar-visibility-button:hover {
4579 -moz-image-region: rect(16px, 16px, 32px, 0);
4582 #customization-titlebar-visibility-button > .button-box {
4584 padding-bottom: 1px;
4587 #customization-titlebar-visibility-button:hover:active > .button-box {
4592 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
4593 #customization-titlebar-visibility-button > .button-box > .button-text {
4594 /* Sadly, button.css thinks its margins are perfect for everyone. */
4595 margin-inline-start: 5px !important;
4598 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
4602 background-size: contain;
4605 #customization-titlebar-visibility-button > .button-box > .button-icon {
4606 vertical-align: middle;
4609 #customization-titlebar-visibility-button[checked] {
4610 -moz-image-region: rect(0, 32px, 16px, 16px);
4611 background-color: #008484;
4614 #customization-titlebar-visibility-button[checked]:hover {
4615 -moz-image-region: rect(16px, 32px, 32px, 16px);
4616 background-color: #FFCF00;
4619 #customization-titlebar-visibility-button[checked]:hover:active {
4620 background-color: #FF9F00;
4623 @media (min-resolution: 1.1dppx) {
4624 #customization-titlebar-visibility-button {
4625 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
4626 -moz-image-region: rect(0, 48px, 48px, 0);
4629 #customization-titlebar-visibility-button:hover {
4630 -moz-image-region: rect(48px, 48px, 96px, 0);
4633 #customization-titlebar-visibility-button[checked] {
4634 -moz-image-region: rect(0, 96px, 48px, 48px);
4637 #customization-titlebar-visibility-button[checked]:hover {
4638 -moz-image-region: rect(48px, 96px, 96px, 48px);
4642 #main-window[customize-entered] #customization-panel-container {
4643 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4644 background-position: left top;
4645 background-repeat: repeat;
4646 background-size: auto;
4647 background-attachment: fixed;
4650 toolbarpaletteitem[place="toolbar"] {
4651 transition: border-width 250ms ease-in-out;
4654 toolbarpaletteitem[mousedown] {
4655 outline: 1px solid #008484;
4656 cursor: -moz-grabbing;
4660 .panel-customization-placeholder,
4661 toolbarpaletteitem[place="palette"],
4662 toolbarpaletteitem[place="panel"] {
4663 transition: transform var(--drag-drop-transition-duration) ease-in-out;
4666 #customization-palette {
4667 transition: opacity .3s ease-in-out;
4671 #customization-palette[showing="true"] {
4675 toolbarpaletteitem toolbarbutton[disabled] {
4676 /* color: inherit !important;*/
4679 toolbarpaletteitem[notransition].panel-customization-placeholder,
4680 toolbarpaletteitem[notransition][place="toolbar"],
4681 toolbarpaletteitem[notransition][place="palette"],
4682 toolbarpaletteitem[notransition][place="panel"] {
4686 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
4687 toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
4688 toolbarpaletteitem > toolbaritem.panel-wide-item,
4689 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
4690 transition: transform var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important;
4693 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
4694 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
4695 transform: scale(1.3);
4698 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
4699 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
4700 transform: scale(1.1);
4703 /* Override the toolkit styling for items being dragged over. */
4704 toolbarpaletteitem[place="toolbar"] {
4705 border-left-width: 0;
4706 border-right-width: 0;
4711 #customization-palette:not([hidden]) {
4712 margin-bottom: 25px;
4715 toolbarpaletteitem[place="palette"]:-moz-focusring,
4716 toolbarpaletteitem[place="panel"]:-moz-focusring,
4717 toolbarpaletteitem[place="toolbar"]:-moz-focusring {
4721 toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring,
4722 toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring,
4723 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4724 /* Delay adding the focusring back until after the transform transition completes. */
4725 transition: outline-width .01s linear var(--drag-drop-transition-duration);
4726 outline: 1px dotted;
4727 -moz-outline-radius: 2.5px;
4730 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4731 outline-offset: -5px;
4734 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4735 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
4736 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
4737 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
4741 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4742 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
4752 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
4753 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
4757 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
4758 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
4761 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
4762 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
4766 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
4767 -moz-box-pack: center;
4771 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
4772 margin-inline-end: 5px;
4775 #customization-palette > toolbarpaletteitem > label {
4781 #customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
4782 -moz-box-orient: vertical;
4783 /* Make the panel padding uniform across all platforms due to the
4784 styling of the section headers and footer. */
4788 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
4793 .customization-lwtheme-menu-theme {
4794 -moz-appearance: none;
4797 padding-inline-end: 5px;
4799 padding-inline-start: 0;
4802 .customization-lwtheme-menu-theme[defaulttheme] {
4803 list-style-image: url(chrome://browser/skin/Fxtheme-switcher-icon.png);
4806 .customization-lwtheme-menu-theme[active="true"] {
4807 background-color: #008484;
4810 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
4814 .customization-lwtheme-menu-theme > .toolbarbutton-text {
4818 #customization-lwtheme-menu-header,
4819 #customization-lwtheme-menu-recommended {
4824 #customization-lwtheme-menu-header,
4825 #customization-lwtheme-menu-recommended,
4826 #customization-lwtheme-menu-footer {
4827 background-color: #A09090;
4829 margin-right: -10px;
4833 #customization-lwtheme-menu-header {
4835 border-top-right-radius: 3px;
4836 border-top-left-radius: 3px;
4839 #customization-lwtheme-menu-recommended {
4842 #customization-lwtheme-menu-footer {
4843 margin-bottom: -10px;
4844 border-bottom-right-radius: 3px;
4845 border-bottom-left-radius: 3px;
4848 .customization-lwtheme-menu-footeritem {
4849 -moz-appearance: none;
4851 background-color: #C09070;
4853 border: 1px solid transparent;
4859 .customization-lwtheme-menu-footeritem:hover {
4860 background-color: #FFCF00;
4863 .customization-lwtheme-menu-footeritem:first-child {
4866 /* === END customizeMode.inc.css === */
4868 /* === BEGIN customizeTip.inc.css === */
4870 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
4877 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
4878 border: 1px solid #9C9CFF;
4882 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
4883 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
4886 .customization-tipPanel-infoBox {
4887 margin: 20px 25px 25px;
4889 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
4890 background-repeat: no-repeat;
4893 .customization-tipPanel-content {
4899 .customization-tipPanel-em {
4904 .customization-tipPanel-contentImage {
4906 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
4914 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
4915 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
4918 .customization-tipPanel-link {
4919 -moz-appearance: none;
4920 background: transparent;
4928 .customization-tipPanel-link > .button-box > .button-text {
4929 margin: 0 !important;
4932 .customization-tipPanel-closeBox > .close-icon {
4933 -moz-appearance: none;
4935 margin-inline-end: -25px;
4938 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
4939 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4940 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
4943 /* === END customizeTip.inc.css === */
4946 * This next rule is a hack to disable subpixel anti-aliasing on all
4947 * labels during the customize mode transition. Subpixel anti-aliasing
4948 * on Windows with Direct2D layers acceleration is particularly slow to
4949 * paint, so this hack is how we sidestep that performance bottleneck.
4951 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
4952 transform: perspective(0.01px);
4955 #main-window[customize-entered] > #tab-view-deck {
4956 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4957 background-attachment: fixed;
4960 #main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
4961 background-repeat: no-repeat;
4962 background-position: right top;
4963 background-attachment: fixed;
4964 /* The image will get set from CustomizeMode.jsm */
4965 background-image: none;
4966 background-color: transparent;
4969 #main-window[customization-lwtheme]:-moz-lwtheme {
4970 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4971 background-repeat: repeat;
4972 background-attachment: fixed;
4973 background-position: left top;
4976 #main-window[customize-entered] #browser-bottombox,
4977 #main-window[customize-entered] #customization-container {
4978 border-left: 1px solid #9C9CFF;
4979 border-right: 1px solid #9C9CFF;
4980 background-clip: padding-box;
4983 #main-window[customize-entered] #browser-bottombox {
4984 border-bottom: 1px solid #9C9CFF;
4987 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
4991 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4995 /* End customization mode */
4997 /* Private browsing indicators */
5000 * Currently, we have two places where we put private browsing indicators on
5001 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5002 * When tabsintitlebar is disabled, we draw the indicator at the end of the
5003 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5004 * want the bottom border of the image to line up with the bottom of the window
5005 * caption buttons. That's why there's so much special-casing going on in here.
5007 .private-browsing-indicator {
5009 pointer-events: none;
5012 #private-browsing-indicator-titlebar {
5017 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5021 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5025 #TabsToolbar > .private-browsing-indicator {
5026 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5027 margin-inline-start: 4px;
5031 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5032 * mode, since the tabstrip "mimics" the titlebar in that case with its own
5033 * min/max/close window buttons.
5035 #private-browsing-indicator-titlebar > .private-browsing-indicator,
5036 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5037 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5038 margin-inline-end: 4px;
5044 /* This one is for Linux */
5045 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5046 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5050 /* End private browsing indicators */
5052 /* === BEGIN UITour.inc.css === */
5056 #UITourHighlightContainer {
5057 -moz-appearance: none;
5059 background-color: transparent;
5060 /* This is a buffer to compensate for the movement in the "wobble" effect,
5061 and for the box-shadow of #UITourHighlight. */
5066 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5067 border-radius: 40px;
5068 border: 1px solid #9C9CFF;
5069 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5070 on Linux without an X compositor where opacity is either 0 or 1. */
5071 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5076 #UITourTooltipBody {
5077 -moz-box-align: start;
5080 #UITourTooltipTitleContainer {
5081 -moz-box-align: start;
5082 margin-bottom: 10px;
5085 #UITourTooltipIcon {
5088 margin-inline-end: 10px;
5091 #UITourTooltipTitle,
5092 #UITourTooltipDescription {
5096 #UITourTooltipTitle {
5102 #UITourTooltipDescription {
5103 margin-inline-start: 0;
5104 margin-inline-end: 0;
5106 line-height: 1.8rem;
5107 margin-bottom: 0; /* Override global.css */
5110 #UITourTooltipClose {
5112 -moz-appearance: none;
5114 background-color: transparent;
5116 margin-inline-start: 4px;
5120 #UITourTooltipClose > .toolbarbutton-text {
5124 #UITourTooltipButtons {
5126 background-color: rgba(0,0,0,.2);
5127 border-top: 1px solid rgba(0,0,0,.4);
5128 margin: 10px -16px -16px;
5132 #UITourTooltipButtons > label,
5133 #UITourTooltipButtons > button {
5137 #UITourTooltipButtons > label:first-child,
5138 #UITourTooltipButtons > button:first-child {
5139 margin-inline-start: 0;
5142 #UITourTooltipButtons > label:last-child,
5143 #UITourTooltipButtons > button:last-child {
5144 margin-inline-end: 0;
5147 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
5150 margin-inline-end: 5px;
5153 #UITourTooltipButtons > label,
5154 #UITourTooltipButtons > button .button-text {
5158 #UITourTooltipButtons > button:not(.button-link) {
5159 -moz-appearance: none;
5160 background-color: #C09070;
5161 border-radius: 3000px;
5165 transition-property: background-color, color;
5166 transition-duration: 150ms;
5169 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5170 background-color: #FFCF00;
5174 #UITourTooltipButtons > label,
5175 #UITourTooltipButtons > button.button-link {
5176 -moz-appearance: none;
5177 background: transparent;
5180 color: rgba(0,0,0,0.35);
5182 padding-right: 10px;
5185 #UITourTooltipButtons > button.button-link:hover {
5189 /* The primary button gets the same color as the customize button. */
5190 #UITourTooltipButtons > button.button-primary {
5191 background-color: #A06060; /* LCARS default button background color */
5194 padding-right: 30px;
5197 #UITourTooltipButtons > button.button-primary:not(:active):hover {
5198 background-color: #FFCF00;
5202 /* Notification overrides for Heartbeat UI */
5204 notification.heartbeat {
5205 background-color: #A09090;
5209 @keyframes pulse-onshow {
5212 transform: scale(1.0);
5216 transform: scale(1.1);
5219 transform: scale(1.0);
5222 transform: scale(1.1);
5225 transform: scale(1.0);
5229 @keyframes pulse-twice {
5231 transform: scale(1.1);
5234 transform: scale(0.8);
5237 transform: scale(1);
5241 .messageText.heartbeat {
5243 /* text-shadow: none; */
5244 margin-inline-start: 0px;
5247 .messageImage.heartbeat {
5250 margin-inline-start: 8px;
5251 margin-inline-end: 8px;
5254 .messageImage.heartbeat.pulse-onshow {
5255 animation-name: pulse-onshow;
5256 animation-duration: 1.5s;
5257 animation-iteration-count: 1;
5258 animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
5261 .messageImage.heartbeat.pulse-twice {
5262 animation-name: pulse-twice;
5263 animation-duration: 1s;
5264 animation-iteration-count: 2;
5265 animation-timing-function: linear;
5268 /* Learn More link styles */
5269 .heartbeat > .text-link {
5271 margin-inline-start: 0px;
5274 .heartbeat > .text-link:hover {
5276 text-decoration: none;
5279 .heartbeat > .text-link:hover:active {
5283 /* Heartbeat UI Rating Star Classes */
5284 .heartbeat > #star-rating-container {
5286 /* margin-bottom: 4px;*/
5289 .heartbeat > #star-rating-container > #star5 {
5290 -moz-box-ordinal-group: 5;
5293 .heartbeat > #star-rating-container > #star4 {
5294 -moz-box-ordinal-group: 4;
5297 .heartbeat > #star-rating-container > #star3 {
5298 -moz-box-ordinal-group: 3;
5301 .heartbeat > #star-rating-container > #star2 {
5302 -moz-box-ordinal-group: 2;
5305 .heartbeat > #star-rating-container > .star-x {
5306 background: url("chrome://browser/skin/heartbeat-star-off.svg");
5308 /* Overrides the margin-inline-end for all platforms defined in the .plain class */
5309 margin-inline-end: 4px !important;
5314 .heartbeat > #star-rating-container > .star-x:hover,
5315 .heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
5316 background: url("chrome://browser/skin/heartbeat-star-lit.svg");
5319 /* === END UITour.inc.css === */
5321 #UITourTooltipButtons {
5323 * Override the --panel-arrowcontent-padding so the background extends
5324 * to the sides and bottom of the panel.
5327 margin-right: -10px;
5328 margin-bottom: -10px;
5331 /* === BEGIN contextmenu.inc.css === */
5333 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
5336 #context-navigation > .menuitem-iconic {
5338 -moz-box-pack: center;
5339 -moz-box-align: center;
5342 #context-navigation > .menuitem-iconic[disabled="true"] {
5343 background-color: transparent;
5346 #context-navigation > .menuitem-iconic > .menu-iconic-left {
5347 -moz-appearance: none;
5350 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
5354 filter: url(chrome://browser/skin/filters.svg#fill);
5359 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back");
5363 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward");
5367 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload");
5371 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop");
5374 #context-bookmarkpage {
5375 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark");
5378 #context-bookmarkpage[starred=true] {
5379 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked");
5382 #context-back:-moz-locale-dir(rtl),
5383 #context-forward:-moz-locale-dir(rtl),
5384 #context-reload:-moz-locale-dir(rtl) {
5385 transform: scaleX(-1);
5388 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
5389 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
5395 #context-media-eme-learnmore {
5396 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5399 #context-media-eme-learnmore {
5400 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5403 /* === END contextmenu.inc.css === */
5405 #context-navigation {
5408 #context-sep-navigation {
5409 /* margin-top: -4px; */
5412 .browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {
5417 .webextension-popup-browser {
5418 border-radius: inherit;