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-sharing");
2037 #identity-box[sharing="microphone"] > #sharing-icon {
2038 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
2041 #identity-box[sharing="screen"] > #sharing-icon {
2042 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
2046 #identity-box[sharing] > #sharing-icon {
2048 animation-delay: -1.5s;
2051 #identity-box[sharing] > #identity-icon,
2053 animation: 3s linear pulse infinite;
2057 0%, 16.66%, 83.33%, 100% {
2065 /* TRACKING PROTECTION ICON */
2067 #tracking-protection-icon {
2070 margin-inline-start: 2px;
2071 margin-inline-end: 0;
2074 #tracking-protection-icon[animate] {
2075 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2078 #tracking-protection-icon:not([state]) {
2079 margin-inline-end: -18px;
2080 pointer-events: none;
2082 /* Only animate the shield in, when it disappears hide it immediately. */
2086 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2087 visibility: collapse;
2090 /* CONNECTION ICON */
2095 margin-inline-start: 2px;
2096 visibility: collapse;
2099 /* === END identity-block.inc.css === */
2101 #page-proxy-favicon {
2102 -moz-image-region: rect(0, 16px, 16px, 0);
2105 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2106 /* margin-inline-end: 1px;*/
2109 #identity-box:hover > #page-proxy-favicon {
2110 -moz-image-region: rect(0, 32px, 16px, 16px);
2113 #identity-box:hover:active > #page-proxy-favicon,
2114 #identity-box[open=true] > #page-proxy-favicon {
2115 -moz-image-region: rect(0, 48px, 16px, 32px);
2118 #identity-box:hover {
2119 background-color: #FFCF00;
2123 #identity-box:hover:active,
2124 #identity-box[open=true] {
2125 background-color: #FF9F00;
2129 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2130 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2131 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2132 background-color: #A09090;
2136 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover > #identity-icon-labels,
2137 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active > #identity-icon-labels,
2138 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] > #identity-icon-labels {
2142 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2143 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2144 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2145 background-color: #008484;
2149 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover > #identity-icon-labels,
2150 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active > #identity-icon-labels,
2151 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] > #identity-icon-labels {
2155 #identity-box:hover > image,
2156 #identity-box:hover:active > image,
2157 #identity-box[open=true] > image {
2158 filter: url(chrome://global/skin/filters.svg#active-icon-state);
2163 #treecolAutoCompleteImage {
2168 .autocomplete-richlistbox {
2172 .autocomplete-richlistitem {
2177 border: 1px solid transparent;
2180 .autocomplete-richlistitem[selected=true] {
2181 background-color: hsl(210, 80%, 52%);
2186 /* color: hsl(0, 0%, 0%);*/
2194 background-color: hsl(216, 0%, 88%);
2195 color: hsl(0, 0%, 0%);
2197 border: 1px solid transparent;
2209 /* color: hsl(0, 0%, 50%);*/
2220 .ac-title[selected=true],
2221 .ac-separator[selected],
2222 .ac-url[selected=true],
2223 .ac-action[selected=true] {
2227 .ac-tags-text[selected] > html|span.ac-tag {
2228 background-color: #A09090;
2232 html|span.ac-emphasize-text-title,
2233 html|span.ac-emphasize-text-tag,
2234 html|span.ac-emphasize-text-url {
2238 .ac-type-icon[type=bookmark] {
2239 list-style-image: url("chrome://browser/skin/urlbar-star.svg#star");
2242 .ac-type-icon[type=bookmark][selected][current] {
2243 /* list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted");*/
2246 .ac-result-type-bookmark,
2247 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
2248 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2249 -moz-image-region: rect(0px 16px 16px 0px);
2254 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
2255 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
2256 /* -moz-image-region: rect(0px 48px 16px 32px);*/
2259 .ac-type-icon[type=keyword],
2260 .ac-site-icon[type=searchengine],
2261 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) {
2262 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2265 .ac-type-icon[type=keyword][selected],
2266 .ac-site-icon[type=searchengine][selected],
2267 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected) {
2268 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2271 .ac-result-type-tag,
2272 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
2273 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2278 .ac-type-icon[type=switchtab],
2279 .ac-type-icon[type=remotetab] {
2280 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab");
2283 .ac-type-icon[type=switchtab][selected],
2284 .ac-type-icon[type=remotetab][selected] {
2285 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted");
2288 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2289 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2295 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2296 border-top: 1px solid #9C9CFF;
2299 /* combined go/reload/stop button in location bar */
2302 #urlbar-reload-button,
2303 #urlbar-stop-button {
2305 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2306 /* margin: 0 9px; */
2307 margin-inline-start: 0px;
2308 border-inline-start: 1px solid var(--urlbar-separator-color);
2309 border-image: linear-gradient(transparent 15%,
2310 var(--urlbar-separator-color) 15%,
2311 var(--urlbar-separator-color) 85%,
2313 border-image-slice: 1;
2316 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2317 border-top-left-radius: 0px;
2318 border-bottom-left-radius: 0px;
2321 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2322 border-top-right-radius: 0px;
2323 border-bottom-right-radius: 0px;
2326 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2327 #urlbar-reload-button:not(:hover) {
2328 border-inline-start-style: none;
2329 padding-inline-start: 3px;
2332 #urlbar-reload-button {
2333 -moz-image-region: rect(0px, 14px, 14px, 0px);
2336 #urlbar-reload-button[disabled=true] {
2337 -moz-image-region: rect(28px, 14px, 42px, 0px);
2340 #urlbar-reload-button:not([disabled=true]):hover {
2341 -moz-image-region: rect(14px, 14px, 28px, 0px);
2344 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2345 transform: scaleX(-1);
2349 -moz-image-region: rect(0, 42px, 14px, 28px);
2352 #urlbar-go-button:hover {
2353 -moz-image-region: rect(14px, 42px, 28px, 28px);
2356 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2357 transform: scaleX(-1);
2360 #urlbar-stop-button {
2361 -moz-image-region: rect(0px, 28px, 14px, 14px);
2364 #urlbar-stop-button:hover {
2365 -moz-image-region: rect(14px, 28px, 28px, 14px);
2368 @media (min-resolution: 1.1dppx) {
2370 #urlbar-reload-button,
2371 #urlbar-stop-button {
2372 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2375 #urlbar-go-button > .toolbarbutton-icon,
2376 #urlbar-reload-button > .toolbarbutton-icon,
2377 #urlbar-stop-button > .toolbarbutton-icon {
2382 -moz-image-region: rect(0, 84px, 28px, 56px);
2385 #urlbar-go-button:hover {
2386 -moz-image-region: rect(28px, 84px, 56px, 56px);
2389 #urlbar-go-button:hover:active {
2390 -moz-image-region: rect(56px, 84px, 84px, 56px);
2393 #urlbar-reload-button {
2394 -moz-image-region: rect(0, 28px, 28px, 0);
2397 #urlbar-reload-button:not([disabled]):hover {
2398 -moz-image-region: rect(28px, 28px, 56px, 0);
2401 #urlbar-reload-button:not([disabled]):hover:active {
2402 -moz-image-region: rect(56px, 28px, 84px, 0);
2405 #urlbar-stop-button {
2406 -moz-image-region: rect(0, 56px, 28px, 28px);
2409 #urlbar-stop-button:not([disabled]):hover {
2410 -moz-image-region: rect(28px, 56px, 56px, 28px);
2413 #urlbar-stop-button:hover:active {
2414 -moz-image-region: rect(56px, 56px, 84px, 28px);
2418 /* popup blocker button */
2420 #page-report-button {
2421 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2422 -moz-image-region: rect(0, 16px, 16px, 0);
2425 #page-report-button:hover ,
2426 #page-report-button:hover:active,
2427 #page-report-button[open="true"] {
2428 -moz-image-region: rect(0, 32px, 16px, 16px);
2431 /* Reader mode button */
2433 #reader-mode-button {
2434 list-style-image: url("chrome://browser/skin/readerMode.svg");
2435 -moz-image-region: rect(0, 16px, 16px, 0);
2438 #reader-mode-button:hover,
2439 #reader-mode-button[readeractive]:hover {
2440 -moz-image-region: rect(0, 32px, 16px, 16px);
2443 #reader-mode-button:hover:active,
2444 #reader-mode-button[readeractive] {
2445 -moz-image-region: rect(0, 48px, 16px, 32px);
2448 /* social share panel */
2450 /* === BEGIN social.inc.css === */
2452 #manage-share-providers {
2453 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
2454 -moz-image-region: rect(0, 468px, 18px, 450px);
2457 #manage-share-providers > .toolbarbutton-icon {
2462 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
2465 /* fixup corners for share panel */
2466 .social-panel > .social-panel-frame {
2467 border-radius: inherit;
2470 /* === END social.inc.css === */
2472 .social-panel-frame {
2473 border-radius: inherit;
2476 .social-share-frame {
2483 background-color: white;
2484 background-repeat: no-repeat;
2485 background-position: center center;
2487 #share-container[loading] {
2488 background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2490 #share-container > browser {
2491 transition: opacity 150ms ease-in-out;
2494 #share-container[loading] > browser {
2498 .social-share-toolbar {
2499 border-bottom: 1px solid #9C9CFF;
2503 #social-share-provider-buttons {
2508 .share-provider-button {
2513 .share-provider-button > .toolbarbutton-text {
2516 .share-provider-button > .toolbarbutton-icon {
2522 #social-share-panel {
2528 .social-share-frame {
2529 border-top-left-radius: 0;
2530 border-bottom-left-radius: inherit;
2531 border-top-right-radius: 0;
2532 border-bottom-right-radius: inherit;
2535 #social-share-panel > .social-share-toolbar {
2536 border-top-left-radius: inherit;
2537 border-top-right-radius: inherit;
2540 #social-share-provider-buttons {
2541 border-top-left-radius: inherit;
2542 border-top-right-radius: inherit;
2545 /* bookmarks menu-button */
2547 #bookmarks-menu-button.bookmark-item {
2548 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2549 -moz-image-region: rect(0px 16px 16px 0px);
2552 #bookmarks-menu-button.bookmark-item[starred] {
2553 -moz-image-region: rect(0px 32px 16px 16px);
2556 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2558 padding-bottom: 2px;
2561 #BMB_bookmarksPopup[side="top"],
2562 #BMB_bookmarksPopup[side="bottom"] {
2564 margin-right: -20px;
2567 #BMB_bookmarksPopup[side="left"],
2568 #BMB_bookmarksPopup[side="right"] {
2570 margin-bottom: -20px;
2573 /* bookmarking panel */
2575 #editBookmarkPanelStarIcon {
2576 list-style-image: url("chrome://browser/skin/places/starred48.png");
2581 #editBookmarkPanelStarIcon[unstarred] {
2582 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2585 #editBookmarkPanelTitle {
2589 #editBookmarkPanelHeader,
2590 #editBookmarkPanelContent {
2591 margin-bottom: .5em;
2594 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2595 #editBMPanel_folderTree {
2599 /* ::::: content area ::::: */
2602 background-color: #9C9CFF;
2607 background-color: #000000;
2611 margin-inline-start: 0;
2620 padding-inline-start: 0px;
2623 #sidebar-header > .close-icon {
2624 /* padding: 4px 2px;
2627 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2630 #sidebar-header > .close-icon:hover,
2631 #sidebar-header > .close-icon:hover:active {
2632 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2635 #sidebar-splitter:-moz-locale-dir(ltr),
2636 #sidebar:-moz-locale-dir(ltr) {
2637 border-radius: 0 5px 0 0;
2640 #sidebar-splitter:-moz-locale-dir(rtl),
2641 #sidebar:-moz-locale-dir(rtl) {
2642 border-radius: 5px 0 0 0;
2645 .browserContainer > findbar {
2647 background-color: -moz-dialog;
2648 color: -moz-DialogText;
2657 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2660 #TabsToolbar .toolbar-holder {
2661 background-color: #000000; /* correct effect of being an actual toolbar */
2664 #main-window[disablechrome] #TabsToolbar,
2665 #TabsToolbar[tabsontop="false"] {
2666 border-bottom: 1px solid #008484;
2669 /* === BEGIN tabs.inc.css === */
2672 /* --tab-toolbar-navbar-overlap: 1px; */
2673 /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2674 /* --tab-min-height: 31px; */
2677 /* --tab-stroke-background-size: auto 100%; */
2681 .tabs-newtab-button,
2682 #TabsToolbar > #new-tab-button {
2687 padding: 1px 4px 2px;
2690 .tabbrowser-tab:first-of-type {
2691 margin-inline-start: 2px;
2694 .tabs-newtab-button,
2695 #TabsToolbar > #new-tab-button,
2696 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2697 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2698 border-radius: 8px 8px 0px 0px;
2699 margin-inline-start: 0;
2702 .tabs-newtab-button:not(:hover),
2703 #TabsToolbar > #new-tab-button:not(:hover),
2704 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2705 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2706 background-color: #C09070;
2709 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2710 .tabbrowser-tab[visuallyselected=true] {
2711 /* position: relative;
2715 .tab-background-middle {
2721 .tab-content[pinned] {
2726 .tab-sharing-icon-overlay,
2732 .tab-sharing-icon-overlay,
2736 margin-inline-end: 3px;
2740 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2743 .tab-icon-image[sharing]:not([selected]),
2744 .tab-sharing-icon-overlay {
2745 animation: 3s linear pulse infinite;
2749 0%, 16.66%, 83.33%, 100% {
2757 .tab-icon-image[sharing]:not([selected]) {
2758 animation-delay: -1.5s;
2761 .tab-sharing-icon-overlay {
2762 /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */
2763 margin-inline-start: -22px;
2767 .tab-sharing-icon-overlay[sharing="camera"] {
2768 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
2771 .tab-sharing-icon-overlay[sharing="microphone"] {
2772 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
2775 .tab-sharing-icon-overlay[sharing="screen"] {
2776 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
2783 margin-inline-start: -15px;
2784 margin-inline-end: -1px;
2788 .tab-icon-overlay[crashed] {
2789 list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2792 .tab-icon-overlay[soundplaying],
2793 .tab-icon-overlay[muted]:not([crashed]) {
2794 border-radius: 10px;
2797 .tab-icon-overlay[soundplaying]:hover,
2798 .tab-icon-overlay[muted]:hover {
2799 background-color: #FFCF00;
2802 .tab-icon-overlay[soundplaying] {
2803 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2806 .tab-icon-overlay[muted]:not([crashed]) {
2807 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2810 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) {
2811 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2815 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) {
2816 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2819 .tab-throbber[busy] {
2820 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2823 .tab-throbber[progress] {
2824 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2827 @media (min-resolution: 1.1dppx) {
2828 .tab-throbber[busy] {
2829 list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
2832 .tab-throbber[progress] {
2833 list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
2837 .tab-throbber[pinned],
2838 .tab-icon-image[pinned] {
2839 margin-inline-start: 2px;
2840 margin-inline-end: 2px;
2844 /* this needs to add up to the 16px of the icon image */
2846 margin-top: 2px !important;
2847 margin-bottom: 2px !important;
2851 margin-inline-start: 4px;
2857 .tab-icon-sound[soundplaying],
2858 .tab-icon-sound[muted] {
2859 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
2860 filter: url(chrome://browser/skin/filters.svg#fill);
2864 .tab-icon-sound[muted] {
2865 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
2874 .tabs-newtab-button {
2875 /* overlap the tab curves */
2878 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
2882 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
2883 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
2886 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
2887 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
2890 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
2893 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
2896 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
2897 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
2900 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
2901 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
2904 .tab-background-start[selected=true]::after,
2905 .tab-background-start[selected=true]::before,
2906 .tab-background-start,
2907 .tab-background-end,
2908 .tab-background-end[selected=true]::after,
2909 .tab-background-end[selected=true]::before {
2912 .tabbrowser-tab:not([visuallyselected=true]),
2913 .tabbrowser-tab:-moz-lwtheme {
2916 /* tabbrowser-tab focus ring */
2917 .tabbrowser-tab:focus {
2918 outline: 1px dotted;
2923 .tabbrowser-tab[visuallyselected="true"] {
2926 /* End selected tab */
2928 /* Tab pointer-events */
2931 pointer-events: none;
2934 .tab-background-middle,
2935 .tabs-newtab-button,
2936 .tab-icon-overlay[soundplaying],
2937 .tab-icon-overlay[muted]:not([crashed]),
2940 pointer-events: auto;
2946 .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
2947 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
2949 .tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
2950 background-color: #E7ADE7;
2953 .tab-label[attention]:not([selected="true"]) {
2957 .tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
2958 background-color: #3333FF;
2962 /* Tab separators */
2964 .tabbrowser-tab::after,
2965 .tabbrowser-tab::before {
2967 margin-inline-start: -1px;
2968 background-image: linear-gradient(transparent 5px,
2970 currentColor calc(100% - 4px),
2971 transparent calc(100% - 4px));
2975 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
2976 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
2980 /* Also show separators beside the selected tab when dragging it. */
2982 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
2983 .tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
2984 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
2989 /* New tab button */
2991 .tabs-newtab-button {
2993 /* width: calc(36px + var(--tab-curve-width)); */
2995 @media (min-resolution: 1.1dppx) {
2996 /* image preloading hack from like lowdpi styles */
2997 #tabbrowser-tabs::before {
3000 .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
3001 .tabs-newtab-button:hover {
3004 .tab-background-middle[selected=true] {
3007 .tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
3008 .tab-background-end[selected=true]:-moz-locale-dir(rtl)::after {
3011 .tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
3012 .tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
3016 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
3020 /* All tabs menupopup */
3022 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3023 background-color: #402800;
3026 .alltabs-endimage[soundplaying],
3027 .alltabs-endimage[muted] {
3028 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
3029 filter: url(chrome://browser/skin/filters.svg#fill);
3033 .alltabs-endimage[muted] {
3034 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
3037 /* === END tabs.inc.css === */
3039 /* Tab DnD indicator */
3040 .tab-drop-indicator {
3041 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3042 margin-bottom: -11px;
3045 /* Tab close button */
3047 list-style-image: url("chrome://global/skin/icons/close-button.gif") !important;
3048 -moz-image-region: auto !important;
3051 .tab-close-button:hover,
3052 .tab-close-button:hover[selected="true"] {
3053 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
3054 -moz-image-region: auto !important;
3057 .tab-close-button:hover:active,
3058 .tab-close-button:hover:active[selected="true"] {
3059 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
3060 -moz-image-region: auto !important;
3063 .tab-close-button > .button-icon,
3064 .tab-close-button > .button-box > .button-icon,
3065 .tab-close-button > .toolbarbutton-icon {
3066 width: auto !important;
3070 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3072 .tabbrowser-arrowscrollbox > .scrollbutton-up,
3073 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3077 background-origin: border-box;
3080 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3081 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3082 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3083 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3086 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3087 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3090 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3091 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3092 /* transform: scaleX(-1);*/
3095 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3096 transition: 1s background-color ease-out;
3099 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
3100 background-color: #008484;
3103 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3104 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3105 /* border-width: 0 2px 0 0;
3106 border-style: solid;
3107 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3110 .tabs-newtab-button > .toolbarbutton-icon {
3112 margin-bottom: -1px;
3115 .tabs-newtab-button,
3116 #TabsToolbar > #new-tab-button,
3117 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3118 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3119 list-style-image: url("chrome://browser/skin/tabbrowser/newtab.svg");
3120 -moz-image-region: auto;
3123 .tabs-newtab-button,
3124 .tabs-newtab-button:hover,
3125 #TabsToolbar > #new-tab-button,
3126 #TabsToolbar > #new-tab-button:hover {
3129 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3130 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3131 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3132 .tabs-newtab-button:-moz-lwtheme-brighttext,
3133 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3134 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3137 #TabsToolbar > #new-tab-button {
3142 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3145 #alltabs-button:hover,
3146 #alltabs-button:hover:active,
3147 #alltabs-button[open="true"] {
3148 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3151 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3152 #alltabs-button:-moz-lwtheme-brighttext {
3155 #alltabs-button > .toolbarbutton-icon {
3159 #alltabs-button > .toolbarbutton-menu-dropmarker {
3163 /* All tabs menupopup */
3164 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3165 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
3166 -moz-image-region: auto;
3169 .alltabs-item[selected="true"] {
3173 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3174 list-style-image: url("chrome://global/skin/icons/loading.png");
3177 @media (min-resolution: 1.1dppx) {
3178 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3179 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3183 toolbarbutton.chevron {
3184 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3187 toolbarbutton.chevron:hover {
3188 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3191 toolbar[brighttext] toolbarbutton.chevron {
3192 list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3195 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3196 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3197 transform: scaleX(-1);
3200 toolbarbutton.chevron > .toolbarbutton-text,
3201 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3205 toolbarbutton.chevron > .toolbarbutton-icon {
3209 #sidebar-throbber[loading="true"] {
3210 list-style-image: url("chrome://global/skin/icons/loading.png");
3211 margin-inline-end: 4px;
3214 @media (min-resolution: 1.1dppx) {
3215 #sidebar-throbber[loading="true"] {
3216 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3221 /* Bookmarks toolbar */
3222 #PlacesToolbarDropIndicator {
3223 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3226 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3227 background-color: #008484 !important;
3228 color: #FFCF00 !important;
3231 /* rules for menupopup drop indicators */
3232 .menupopup-drop-indicator-bar {
3234 /* these two margins must together compensate the indicator's height */
3236 margin-bottom: -1px;
3239 .menupopup-drop-indicator {
3240 list-style-image: none;
3242 margin-inline-end: -4em;
3243 background-color: #008484;
3246 /* === BEGIN notification-icons.inc.css === */
3248 #notification-popup-box {
3249 border-radius: 3px 0 0 3px;
3252 margin-inline-end: -5px;
3253 padding-inline-end: 5px;
3256 .notification-anchor-icon,
3257 #blocked-permissions-container > .blocked-permission-icon {
3260 margin-inline-start: 2px;
3263 /* This class can be used alone or in combination with the class defining the
3264 type of icon displayed. This rule must be defined before the others in order
3265 for its list-style-image to be overridden. */
3266 .notification-anchor-icon {
3267 list-style-image: url("chrome://global/skin/icons/information-16.png");
3270 .notification-anchor-icon:-moz-focusring {
3271 outline: 1px dotted #008484;
3274 @media (min-resolution: 1.1dppx) {
3275 .notification-anchor-icon {
3276 list-style-image: url(chrome://global/skin/icons/information-32.png);
3280 .popup-notification-icon {
3283 margin-inline-end: 10px;
3286 .notification-anchor-icon:not(.plugin-blocked),
3287 #blocked-permissions-container > .blocked-permission-icon {
3288 filter: url(chrome://global/skin/filters.svg#fill);
3292 .notification-anchor-icon:not(.plugin-blocked):not(:hover) {
3295 /* INDIVIDUAL NOTIFICATIONS */
3297 .popup-notification-icon[popupid="web-notifications"],
3298 .desktop-notification-icon {
3299 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification);
3302 .desktop-notification-icon.blocked-permission-icon {
3303 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked);
3307 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows);
3310 .geo-icon.blocked-permission-icon {
3311 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-blocked);
3314 .popup-notification-icon[popupid="geolocation"] {
3315 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-detailed);
3318 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3320 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB);
3323 .indexedDB-icon.blocked-permission-icon {
3324 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked);
3328 list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
3331 .popup-notification-icon[popupid="password"] {
3332 list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed);
3336 .popup-notification-icon[popupid="webRTC-shareDevices"] {
3337 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera);
3340 .camera-icon.in-use {
3341 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-sharing);
3344 .camera-icon.blocked-permission-icon {
3345 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked);
3349 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone);
3352 .microphone-icon.in-use {
3353 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-sharing);
3356 .microphone-icon.blocked-permission-icon {
3357 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked);
3360 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3361 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed);
3364 .popup-notification-icon[popupid="webRTC-shareScreen"],
3366 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen);
3369 .screen-icon.in-use {
3370 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-sharing);
3373 .screen-icon.blocked-permission-icon {
3374 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked);
3377 /* This icon has a block sign in it, so we don't need a blocked version. */
3379 list-style-image: url("chrome://browser/skin/notification-icons.svg#popup");
3384 .popup-notification-icon[popupid="drmContentPlaying"],
3386 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3389 .drm-icon:hover:active {
3390 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3393 #eme-notification-icon[firstplay=true] {
3394 animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3397 @keyframes emeTeachingMoment {
3398 0% {transform: translateX(0); }
3399 25% {transform: translateX(3px) }
3400 75% {transform: translateX(-3px) }
3401 100% { transform: translateX(0); }
3404 /* INSTALL ADDONS */
3407 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default);
3410 .popup-notification-icon[popupid="xpinstall-disabled"],
3411 .popup-notification-icon[popupid="addon-install-blocked"],
3412 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
3413 list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3416 .popup-notification-icon[popupid="addon-progress"] {
3417 list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3420 .popup-notification-icon[popupid="addon-install-failed"] {
3421 list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3424 .popup-notification-icon[popupid="addon-install-confirmation"] {
3425 list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3428 #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3429 list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3432 .popup-notification-icon[popupid="addon-install-complete"] {
3433 list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3436 .popup-notification-icon[popupid="addon-install-restart"] {
3437 list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3440 .popup-notification-icon[popupid="click-to-play-plugins"] {
3441 list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png);
3446 .popup-notification-icon[popupid*="offline-app-requested"],
3447 .popup-notification-icon[popupid="offline-app-usage"] {
3448 list-style-image: url(chrome://global/skin/icons/question-64.png);
3454 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
3457 .plugin-icon.plugin-blocked {
3458 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
3461 #notification-popup-box[hidden] {
3462 /* Override display:none to make the pluginBlockedNotification animation work
3463 when showing the notification repeatedly. */
3465 visibility: collapse;
3468 #plugins-notification-icon.plugin-blocked[showing] {
3469 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3472 @keyframes pluginBlockedNotification {
3483 .popup-notification-icon[popupid="servicesInstall"] {
3484 list-style-image: url(chrome://browser/skin/social/services-64.png);
3488 list-style-image: url(chrome://browser/skin/social/services-16.png);
3494 list-style-image: url(chrome://browser/skin/translation-16.png);
3495 -moz-image-region: rect(0px, 16px, 16px, 0px);
3498 .translation-icon.in-use {
3499 -moz-image-region: rect(0px, 32px, 16px, 16px);
3502 /* === END notification-icons.inc.css === */
3504 .popup-notification-body[popupid="addon-progress"],
3505 .popup-notification-body[popupid="addon-install-confirmation"] {
3510 /* Translation infobar */
3512 /* === BEGIN infobar.inc.css === */
3514 notification[value="translation"] .messageImage {
3515 list-style-image: url("chrome://browser/skin/translation-16.png");
3516 -moz-image-region: rect(0, 32px, 16px, 16px);
3519 @media (min-resolution: 1.25dppx) {
3520 notification[value="translation"] .messageImage {
3521 list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3522 -moz-image-region: rect(0, 64px, 32px, 32px);
3526 notification[value="translation"][state="translating"] .messageImage {
3527 list-style-image: url("chrome://browser/skin/translating-16.png");
3528 -moz-image-region: auto;
3531 @media (min-resolution: 1.25dppx) {
3532 notification[value="translation"][state="translating"] .messageImage {
3533 list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3537 notification[value="translation"] hbox[anonid="details"] {
3541 notification[value="translation"] button,
3542 notification[value="translation"] menulist {
3546 notification[value="translation"] menulist > .menulist-dropmarker {
3549 .translation-menupopup arrowscrollbox {
3553 .translation-attribution {
3555 -moz-box-align: end;
3559 .translation-attribution > label {
3563 .translation-attribution > image {
3567 .translation-welcome-panel {
3571 .translation-welcome-logo {
3574 list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3575 -moz-image-region: rect(0, 64px, 32px, 32px);
3578 .translation-welcome-content {
3579 margin-inline-start: 16px;
3582 .translation-welcome-headline {
3587 .translation-welcome-body {
3592 /* === END infobar.inc.css === */
3594 notification[value="translation"] {
3598 .translation-menupopup {
3599 -moz-appearance: none;
3602 /* Bookmarks roots menu-items */
3603 #subscribeToPageMenuitem:not([disabled]),
3604 #subscribeToPageMenupopup {
3605 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3608 #bookmarksToolbarFolderMenu,
3609 #BMB_bookmarksToolbar,
3610 #panelMenu_bookmarksToolbar {
3611 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3612 -moz-image-region: auto;
3615 #BMB_unsortedBookmarks,
3616 #panelMenu_unsortedBookmarks {
3617 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3618 -moz-image-region: auto;
3623 .statuspanel-label {
3626 background: #404000;
3627 border: 1px none #9C9CFF;
3628 border-top-style: solid;
3633 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3634 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3635 border-right-style: solid;
3636 border-top-right-radius: .3em;
3640 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3641 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3642 border-left-style: solid;
3643 border-top-left-radius: .3em;
3647 /* HACK to abolish devily color on main content */
3650 background-color: transparent !important;
3653 /* === BEGIN fullscreen/warning.inc.css === */
3655 html|*.pointerlockfswarning {
3656 align-items: center;
3657 background: rgba(0, 0, 0, 0.9);
3658 border: 2px solid #A09090;
3659 box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
3662 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3665 html|*.pointerlockfswarning::before {
3667 width: 24px; height: 24px;
3670 html|*.pointerlockfswarning[data-identity="verifiedIdentity"]::before,
3671 html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before {
3672 content: url("chrome://browser/skin/fullscreen/secure.svg");
3675 html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before {
3676 content: url("chrome://browser/skin/fullscreen/insecure.svg");
3679 html|*.pointerlockfswarning-domain-text,
3680 html|*.pointerlockfswarning-generic-text {
3682 font-weight: lighter;
3687 html|*.pointerlockfswarning-domain {
3692 html|*.pointerlockfswarning-exit-button {
3694 font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3696 font-weight: lighter;
3698 box-sizing: content-box;
3700 border-radius: 300px;
3702 background-color: #C09070;
3706 /* === END fullscreen/warning.inc.css === */
3708 /* === BEGIN ctrlTab.inc.css === */
3713 -moz-appearance: none;
3714 background: rgba(0%,0%,0%,.7);
3717 padding: 20px 10px 10px;
3721 .ctrlTab-favicon[src] {
3722 background-color: #000000;
3728 .ctrlTab-preview-inner > .tabPreview-canvas {
3729 /* box-shadow: 1px 1px 2px hsl(0,0%,12%);*/
3732 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3736 .ctrlTab-preview-inner {
3738 border: 2px solid transparent;
3739 border-radius: .5em;
3742 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner {
3743 margin: -10px -10px 0;
3746 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3747 background-color: #000000;
3750 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3752 background-color: #000000;
3754 border-color: #9C9CFF;
3761 /* === END ctrlTab.inc.css === */
3763 /* === BEGIN commandline.inc.css === */
3765 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
3766 We are copy/pasting variables from light-theme and dark-theme,
3767 since they aren't loaded in this context (within browser.css). */
3768 :root #developer-toolbar {
3769 --gcli-background-color: #000000; /* --theme-toolbar-background */
3770 --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
3771 --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
3772 --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
3773 --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
3774 --selection-background: #008484; /* --theme-selection-background */
3775 --selection-color: #000000; /* --theme-selection-color */
3776 --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */
3777 --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */
3780 /* Developer toolbar */
3782 #developer-toolbar {
3783 border-top: 3px solid var(--gcli-background-color);
3784 border-bottom: none;
3787 #developer-toolbar .toolbar-holder {
3788 background-color: #8050B0;
3792 #developer-toolbar .toolbar-holder {
3793 background-color: #8050B0;
3797 #developer-toolbar .toolbar-startcap,
3798 #developer-toolbar .toolbar-endcap{
3799 background-color: #6000CF;
3802 #developer-toolbar {
3804 min-height: 32px; */
3807 #developer-toolbar > toolbarbutton {
3809 background-color: transparent;
3815 .developer-toolbar-button > image {
3816 /* margin: auto 10px; */
3819 #developer-toolbar-toolbox-button > label {
3823 .developer-toolbar-button > .toolbarbutton-icon {
3828 #developer-toolbar-toolbox-button {
3829 list-style-image: url("chrome://devtools/skin/images/toggle-tools.png");
3830 -moz-image-region: rect(0px, 16px, 16px, 0px);
3833 #developer-toolbar-toolbox-button > label {
3837 #developer-toolbar-toolbox-button:hover,
3838 #developer-toolbar-toolbox-button:hover:active,
3839 #developer-toolbar-toolbox-button[checked=true] {
3840 -moz-image-region: rect(0px, 32px, 16px, 16px);
3843 @media (min-resolution: 2dppx) {
3844 #developer-toolbar-toolbox-button {
3845 list-style-image: url("chrome://devtools/skin/images/toggle-tools@2x.png");
3846 -moz-image-region: rect(0px, 32px, 32px, 0px);
3849 #developer-toolbar-toolbox-button:hover,
3850 #developer-toolbar-toolbox-button:hover:active,
3851 #developer-toolbar-toolbox-button[checked=true] {
3852 -moz-image-region: rect(0px, 64px, 32px, 32px);
3858 html|*#gcli-tooltip-frame,
3859 html|*#gcli-output-frame {
3862 background-color: transparent;
3868 background-color: transparent;
3871 .gclitoolbar-input-node,
3872 .gclitoolbar-complete-node {
3874 -moz-box-align: center;
3878 background-color: transparent;
3881 .gclitoolbar-input-node {
3882 /* line-height: 32px;
3883 outline-style: none; */
3884 background-repeat: no-repeat;
3885 background-color: var(--gcli-input-background);
3888 .gclitoolbar-input-node[focused="true"] {
3889 background-color: var(--gcli-input-focused-background);
3892 .gclitoolbar-input-node::before {
3894 display: inline-block;
3895 -moz-box-ordinal-group: 0;
3899 background-image: var(--command-line-image);
3902 .gclitoolbar-input-node[focused="true"]::before {
3903 background-image: var(--command-line-image-focus);
3906 .gclitoolbar-input-node:not([focused="true"]) {
3907 border-color: transparent;
3910 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
3911 background-color: var(--selection-background);
3912 color: var(--selection-color);
3915 .gclitoolbar-complete-node {
3917 background-color: transparent;
3920 pointer-events: none;
3923 .gcli-in-incomplete,
3927 .gcli-in-closebrace,
3934 .gcli-in-incomplete {
3935 border-bottom: 2px dotted #8050B0;
3939 border-bottom: 2px dotted #FF0000;
3950 .gcli-in-closebrace {
3954 /* === END commandline.inc.css === */
3956 /* === BEGIN responsivedesign.inc.css === */
3958 /* Responsive Mode */
3960 .browserContainer[responsivemode] {
3961 background-color: #221500;
3962 padding: 0 20px 20px 20px;
3965 .browserStack[responsivemode] {
3966 box-shadow: 0 0 7px #9C9CFF;
3969 .devtools-responsiveui-toolbar {
3970 background: transparent;
3971 /* text color is textColor from dark theme, since no theme is applied to
3972 * the responsive toolbar.
3978 border-bottom-width: 0;
3981 .devtools-responsiveui-textinput {
3982 /* -moz-appearance: none;
3985 border: 1px solid #111;
3992 .devtools-responsiveui-textinput[attention] {
3993 /* border-color: #38ace6;
3994 background: rgba(56,172,230,0.4);*/
3997 .devtools-responsiveui-menulist,
3998 .devtools-responsiveui-toolbarbutton {
3999 -moz-box-align: center;
4001 /* min-height: 22px;*/
4002 /* margin: 0 3px; */
4005 .devtools-responsiveui-menulist .menulist-editable-box {
4006 background-color: transparent;
4009 .devtools-responsiveui-menulist html|*.menulist-editable-input {
4014 .devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4015 /* background: hsla(212,7%,57%,.35);*/
4018 .devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4023 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4024 -moz-box-orient: horizontal;
4027 .devtools-responsiveui-menulist:-moz-focusring,
4028 .devtools-responsiveui-toolbarbutton:-moz-focusring {
4029 /* outline: 1px dotted hsla(210,30%,85%,0.7);
4030 outline-offset: -4px;*/
4033 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4037 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4038 /* border-color: hsla(210,8%,5%,.6);
4039 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4040 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); */
4043 .devtools-responsiveui-menulist[open=true],
4044 .devtools-responsiveui-toolbarbutton[open=true],
4045 .devtools-responsiveui-toolbarbutton[checked=true] {
4046 /* border-color: hsla(210,8%,5%,.6) !important;
4047 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4048 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); */
4051 .devtools-responsiveui-toolbarbutton[checked=true] {
4052 /* color: hsl(208,100%,60%); */
4055 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
4056 /* background-color: transparent !important;*/
4059 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4060 /* background-color: hsla(210,8%,5%,.2) !important;*/
4063 .devtools-responsiveui-menulist > .menulist-label-box {
4067 .devtools-responsiveui-menulist > .menulist-dropmarker {
4068 /* display: -moz-box;
4069 background-color: transparent;
4070 list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4071 -moz-box-align: center;
4076 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
4079 border-inline-end: 1px solid hsla(210,8%,5%,.45);
4080 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
4083 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
4084 /* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
4087 .devtools-responsiveui-toolbarbutton[type=menu-button] {
4088 /* padding: 0 1px;*/
4089 -moz-box-align: stretch;
4092 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
4093 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
4094 /* list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4095 -moz-box-align: center;
4099 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
4100 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
4104 .devtools-responsiveui-close {
4105 list-style-image: url("chrome://devtools/skin/close.svg");
4108 .devtools-responsiveui-close:hover {
4109 filter: url(chrome://devtools/skin/images/filters.svg#checked-icon-state);
4112 .devtools-responsiveui-close > image {
4116 .devtools-responsiveui-rotate {
4117 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate.png");
4118 -moz-image-region: rect(0px,16px,16px,0px);
4121 .devtools-responsiveui-rotate:hover {
4122 -moz-image-region: rect(0px,32px,16px,16px);
4125 @media (min-resolution: 2dppx) {
4126 .devtools-responsiveui-rotate {
4127 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate@2x.png");
4130 .devtools-responsiveui-rotate:hover {
4131 -moz-image-region: rect(0px,64px,32px,32px);
4135 .devtools-responsiveui-touch {
4136 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch.png");
4137 -moz-image-region: rect(0px,16px,16px,0px);
4140 .devtools-responsiveui-touch:hover,
4141 .devtools-responsiveui-touch[checked],
4142 .devtools-responsiveui-touch[checked]:hover {
4143 -moz-image-region: rect(0px,32px,16px,16px);
4146 @media (min-resolution: 2dppx) {
4147 .devtools-responsiveui-touch {
4148 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch@2x.png");
4149 -moz-image-region: rect(0px,32px,32px,0px);
4152 .devtools-responsiveui-touch:hover,
4153 .devtools-responsiveui-touch[checked],
4154 .devtools-responsiveui-touch[checked]:hover {
4155 -moz-image-region: rect(0px,64px,32px,32px);
4159 .devtools-responsiveui-screenshot {
4160 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot.png");
4161 -moz-image-region: rect(0px,16px,16px,0px);
4164 .devtools-responsiveui-screenshot:hover {
4165 -moz-image-region: rect(0px,32px,16px,16px);
4168 @media (min-resolution: 2dppx) {
4169 .devtools-responsiveui-screenshot {
4170 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot@2x.png");
4173 .devtools-responsiveui-screenshot:hover {
4174 -moz-image-region: rect(0px,64px,32px,32px);
4178 .devtools-responsiveui-resizebarV {
4182 transform: translate(12px, -12px);
4183 background-size: cover;
4184 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer.png");
4187 .devtools-responsiveui-resizebarH {
4191 transform: translate(-12px, 12px);
4192 background-size: cover;
4193 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer.png");
4196 .devtools-responsiveui-resizehandle {
4200 transform: translate(12px, 12px);
4201 background-size: cover;
4202 background-image: url("chrome://devtools/skin/images/responsive-se-resizer.png");
4205 /* FxOS custom mode with additional buttons and phone look'n feel */
4207 /* Hide devtools manual resizer */
4208 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
4209 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
4210 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
4214 /* Gives responsive mode a phone look'n feel */
4215 .browserStack[responsivemode].fxos-mode {
4216 padding: 60px 15px 0;
4218 border-radius: 25px / 20px;
4219 border-bottom-left-radius: 0;
4220 border-bottom-right-radius: 0;
4221 border: 1px solid #FFFFFF;
4222 border-bottom-width: 0;
4224 background-color: #353535;
4226 box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
4228 background-image: linear-gradient(to right, #111 11%, #333 56%);
4232 .devtools-responsiveui-hardware-buttons {
4233 -moz-appearance: none;
4236 border: 1px solid #FFFFFF;
4237 border-bottom-left-radius: 25px;
4238 border-bottom-right-radius: 25px;
4239 border-top-width: 0;
4241 box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
4243 background-image: linear-gradient(to right, #111 11%, #333 56%);
4246 .devtools-responsiveui-home-button {
4247 -moz-user-focus: ignore;
4250 list-style-image: url("chrome://devtools/skin/images/responsiveui-home.png");
4253 .devtools-responsiveui-sleep-button {
4254 -moz-user-focus: ignore;
4255 -moz-appearance: none;
4256 /* compensate browserStack top padding */
4264 border: 1px solid #444;
4265 border-top-right-radius: 12px;
4266 border-top-left-radius: 12px;
4267 border-bottom-color: transparent;
4269 background-image: linear-gradient(to top, #111 11%, #333 56%);
4272 .devtools-responsiveui-sleep-button:hover:active {
4273 background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
4276 .devtools-responsiveui-volume-buttons {
4280 .devtools-responsiveui-volume-up-button,
4281 .devtools-responsiveui-volume-down-button {
4282 -moz-user-focus: ignore;
4283 -moz-appearance: none;
4284 border: 1px solid red;
4288 border: 1px solid #444;
4289 border-right-color: transparent;
4291 background-image: linear-gradient(to right, #111 11%, #333 56%);
4294 .devtools-responsiveui-volume-up-button:hover:active,
4295 .devtools-responsiveui-volume-down-button:hover:active {
4296 background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
4299 .devtools-responsiveui-volume-up-button {
4300 border-top-left-radius: 12px;
4303 .devtools-responsiveui-volume-down-button {
4304 border-bottom-left-radius: 12px;
4307 @media (min-resolution: 2dppx) {
4308 .devtools-responsiveui-resizebarV {
4309 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer@2x.png");
4312 .devtools-responsiveui-resizebarH {
4313 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer@2x.png");
4316 .devtools-responsiveui-resizehandle {
4317 background-image: url("chrome://devtools/skin/images/responsive-se-resizer@2x.png");
4321 /* === END responsivedesign.inc.css === */
4323 /* === including indicator.css is done at the start of the file === */
4327 #developer-toolbar-toolbox-button[error-count]:before {
4331 background-color: #FF0000;
4333 margin-inline-end: 5px;
4336 /* === BEGIN plugin-doorhanger.inc.css === */
4339 * Plugin Doorhanger Styles
4342 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4343 padding: 6px 1px 2px;
4346 .click-to-play-plugins-notification-center-box {
4349 .plugin-popupnotification-centeritem:nth-child(odd) {
4350 /* background-color: rgba(0,0,0,0.1);*/
4353 .center-item-label {
4355 text-overflow: ellipsis;
4358 .center-item-warning-icon {
4359 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.svg");
4360 background-repeat: no-repeat;
4363 margin-inline-start: 6px;
4366 .click-to-play-plugins-notification-button-container {
4369 .click-to-play-popup-button {
4373 .click-to-play-plugins-notification-description-box {
4377 padding-bottom: 3px;
4380 .click-to-play-plugins-outer-description {
4384 .click-to-play-plugins-notification-link,
4389 .messageImage[value="plugin-hidden"] {
4390 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
4393 /* Keep any changes to this style in sync with pluginProblem.css */
4394 notification.pluginVulnerable {
4397 notification.pluginVulnerable .messageImage {
4398 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
4401 /* === END plugin-doorhanger.inc.css === */
4403 /* === BEGIN customizeMode.inc.css === */
4405 /* Customization mode */
4408 --drag-drop-transition-duration: .3s;
4411 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
4415 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
4416 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4417 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4422 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4423 pointer-events: none;
4426 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4427 #PanelUI-contents > .panel-customization-placeholder {
4428 -moz-outline-radius: 2.5px;
4429 outline: 1px dashed transparent;
4432 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4433 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4434 -moz-box-ordinal-group: 0;
4439 outline-offset: -2px;
4440 pointer-events: none;
4446 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4447 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4448 offset from the bottom effectively the same as other targets (-2px). */
4449 #main-window[customize-entered] #TabsToolbar.customization-target::before {
4453 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4454 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4455 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4456 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
4460 /* Most target outlines are shown on hover and drag over but the panel menu uses
4461 placeholders instead. */
4462 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4463 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4464 /* nav-bar and panel outlines are always shown */
4465 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4466 outline-color: currentColor;
4469 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4470 transition: outline-color 250ms linear;
4473 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
4474 transition: outline-color 250ms linear;
4475 outline-color: var(--panel-separator-color);
4478 #PanelUI-contents > .panel-customization-placeholder {
4480 outline-offset: -5px;
4483 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
4485 /* padding-left: 10px;
4486 padding-right: 10px;*/
4489 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
4493 #customization-container {
4494 background-color: #000000;
4498 #customization-palette,
4499 #customization-empty {
4500 padding: 0 15px 15px;
4503 #customization-header {
4505 line-height: 1.75em;
4508 margin: 25px 25px 12px;
4509 padding-bottom: 12px;
4510 border-bottom: 1px solid #A09090;
4513 #customization-panel-container {
4514 padding: 10px 10px 0px;
4517 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4518 #customization-footer {
4519 /*background-color: rgb(236,236,236);*/
4522 #customization-footer {
4523 border-top: 1px solid #9C9CFF;
4527 .customizationmode-button {
4531 .customizationmode-button:hover {
4534 .customizationmode-button > .box-inherit {
4537 .customizationmode-button > .button-icon {
4540 .customizationmode-button:not([type=menu]) > .button-text {
4543 .customizationmode-button > .button-menu-dropmarker {
4548 .customizationmode-button[checked] {
4549 background-color: #008484;
4552 .customizationmode-button[checked]:hover:not([disabled]),
4553 .customizationmode-button:hover:not([disabled]) {
4554 background-color: #FFCF00;
4557 .customizationmode-button[checked]:hover:active:not([disabled]),
4558 .customizationmode-button:hover:active:not([disabled]),
4559 .customizationmode-button[open] {
4560 background-color: #FF9F00;
4563 .customizationmode-button[disabled="true"] {
4566 .customizationmode-button > .box-inherit > .box-inherit > .button-icon,
4567 .customizationmode-button > .button-box > .button-icon {
4571 #customization-titlebar-visibility-button {
4572 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
4573 -moz-image-region: rect(0, 16px, 16px, 0);
4576 #customization-titlebar-visibility-button:hover {
4577 -moz-image-region: rect(16px, 16px, 32px, 0);
4580 #customization-titlebar-visibility-button > .button-box {
4582 padding-bottom: 1px;
4585 #customization-titlebar-visibility-button:hover:active > .button-box {
4590 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
4591 #customization-titlebar-visibility-button > .button-box > .button-text {
4592 /* Sadly, button.css thinks its margins are perfect for everyone. */
4593 margin-inline-start: 5px !important;
4596 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
4600 background-size: contain;
4603 #customization-titlebar-visibility-button > .button-box > .button-icon {
4604 vertical-align: middle;
4607 #customization-titlebar-visibility-button[checked] {
4608 -moz-image-region: rect(0, 32px, 16px, 16px);
4609 background-color: #008484;
4612 #customization-titlebar-visibility-button[checked]:hover {
4613 -moz-image-region: rect(16px, 32px, 32px, 16px);
4614 background-color: #FFCF00;
4617 #customization-titlebar-visibility-button[checked]:hover:active {
4618 background-color: #FF9F00;
4621 @media (min-resolution: 1.1dppx) {
4622 #customization-titlebar-visibility-button {
4623 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
4624 -moz-image-region: rect(0, 48px, 48px, 0);
4627 #customization-titlebar-visibility-button:hover {
4628 -moz-image-region: rect(48px, 48px, 96px, 0);
4631 #customization-titlebar-visibility-button[checked] {
4632 -moz-image-region: rect(0, 96px, 48px, 48px);
4635 #customization-titlebar-visibility-button[checked]:hover {
4636 -moz-image-region: rect(48px, 96px, 96px, 48px);
4640 #main-window[customize-entered] #customization-panel-container {
4641 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4642 background-position: left top;
4643 background-repeat: repeat;
4644 background-size: auto;
4645 background-attachment: fixed;
4648 toolbarpaletteitem[place="toolbar"] {
4649 transition: border-width 250ms ease-in-out;
4652 toolbarpaletteitem[mousedown] {
4653 outline: 1px solid #008484;
4654 cursor: -moz-grabbing;
4658 .panel-customization-placeholder,
4659 toolbarpaletteitem[place="palette"],
4660 toolbarpaletteitem[place="panel"] {
4661 transition: transform var(--drag-drop-transition-duration) ease-in-out;
4664 #customization-palette {
4665 transition: opacity .3s ease-in-out;
4669 #customization-palette[showing="true"] {
4673 toolbarpaletteitem toolbarbutton[disabled] {
4674 /* color: inherit !important;*/
4677 toolbarpaletteitem[notransition].panel-customization-placeholder,
4678 toolbarpaletteitem[notransition][place="toolbar"],
4679 toolbarpaletteitem[notransition][place="palette"],
4680 toolbarpaletteitem[notransition][place="panel"] {
4684 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
4685 toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
4686 toolbarpaletteitem > toolbaritem.panel-wide-item,
4687 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
4688 transition: transform var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important;
4691 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
4692 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
4693 transform: scale(1.3);
4696 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
4697 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
4698 transform: scale(1.1);
4701 /* Override the toolkit styling for items being dragged over. */
4702 toolbarpaletteitem[place="toolbar"] {
4703 border-left-width: 0;
4704 border-right-width: 0;
4709 #customization-palette:not([hidden]) {
4710 margin-bottom: 25px;
4713 toolbarpaletteitem[place="palette"]:-moz-focusring,
4714 toolbarpaletteitem[place="panel"]:-moz-focusring,
4715 toolbarpaletteitem[place="toolbar"]:-moz-focusring {
4719 toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring,
4720 toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring,
4721 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4722 /* Delay adding the focusring back until after the transform transition completes. */
4723 transition: outline-width .01s linear var(--drag-drop-transition-duration);
4724 outline: 1px dotted;
4725 -moz-outline-radius: 2.5px;
4728 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4729 outline-offset: -5px;
4732 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4733 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
4734 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
4735 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
4739 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4740 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
4750 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
4751 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
4755 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
4756 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
4759 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
4760 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
4764 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
4765 -moz-box-pack: center;
4769 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
4770 margin-inline-end: 5px;
4773 #customization-palette > toolbarpaletteitem > label {
4779 #customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
4780 -moz-box-orient: vertical;
4781 /* Make the panel padding uniform across all platforms due to the
4782 styling of the section headers and footer. */
4786 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
4791 .customization-lwtheme-menu-theme {
4792 -moz-appearance: none;
4795 padding-inline-end: 5px;
4797 padding-inline-start: 0;
4800 .customization-lwtheme-menu-theme[defaulttheme] {
4801 list-style-image: url(chrome://browser/skin/Fxtheme-switcher-icon.png);
4804 .customization-lwtheme-menu-theme[active="true"] {
4805 background-color: #008484;
4808 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
4812 .customization-lwtheme-menu-theme > .toolbarbutton-text {
4816 #customization-lwtheme-menu-header,
4817 #customization-lwtheme-menu-recommended {
4822 #customization-lwtheme-menu-header,
4823 #customization-lwtheme-menu-recommended,
4824 #customization-lwtheme-menu-footer {
4825 background-color: #A09090;
4827 margin-right: -10px;
4831 #customization-lwtheme-menu-header {
4833 border-top-right-radius: 3px;
4834 border-top-left-radius: 3px;
4837 #customization-lwtheme-menu-recommended {
4840 #customization-lwtheme-menu-footer {
4841 margin-bottom: -10px;
4842 border-bottom-right-radius: 3px;
4843 border-bottom-left-radius: 3px;
4846 .customization-lwtheme-menu-footeritem {
4847 -moz-appearance: none;
4849 background-color: #C09070;
4851 border: 1px solid transparent;
4857 .customization-lwtheme-menu-footeritem:hover {
4858 background-color: #FFCF00;
4861 .customization-lwtheme-menu-footeritem:first-child {
4864 /* === END customizeMode.inc.css === */
4866 /* === BEGIN customizeTip.inc.css === */
4868 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
4875 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
4876 border: 1px solid #9C9CFF;
4880 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
4881 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
4884 .customization-tipPanel-infoBox {
4885 margin: 20px 25px 25px;
4887 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
4888 background-repeat: no-repeat;
4891 .customization-tipPanel-content {
4897 .customization-tipPanel-em {
4902 .customization-tipPanel-contentImage {
4904 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
4912 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
4913 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
4916 .customization-tipPanel-link {
4917 -moz-appearance: none;
4918 background: transparent;
4926 .customization-tipPanel-link > .button-box > .button-text {
4927 margin: 0 !important;
4930 .customization-tipPanel-closeBox > .close-icon {
4931 -moz-appearance: none;
4933 margin-inline-end: -25px;
4936 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
4937 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4938 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
4941 /* === END customizeTip.inc.css === */
4944 * This next rule is a hack to disable subpixel anti-aliasing on all
4945 * labels during the customize mode transition. Subpixel anti-aliasing
4946 * on Windows with Direct2D layers acceleration is particularly slow to
4947 * paint, so this hack is how we sidestep that performance bottleneck.
4949 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
4950 transform: perspective(0.01px);
4953 #main-window[customize-entered] > #tab-view-deck {
4954 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4955 background-attachment: fixed;
4958 #main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
4959 background-repeat: no-repeat;
4960 background-position: right top;
4961 background-attachment: fixed;
4962 /* The image will get set from CustomizeMode.jsm */
4963 background-image: none;
4964 background-color: transparent;
4967 #main-window[customization-lwtheme]:-moz-lwtheme {
4968 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4969 background-repeat: repeat;
4970 background-attachment: fixed;
4971 background-position: left top;
4974 #main-window[customize-entered] #browser-bottombox,
4975 #main-window[customize-entered] #customization-container {
4976 border-left: 1px solid #9C9CFF;
4977 border-right: 1px solid #9C9CFF;
4978 background-clip: padding-box;
4981 #main-window[customize-entered] #browser-bottombox {
4982 border-bottom: 1px solid #9C9CFF;
4985 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
4989 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4993 /* End customization mode */
4995 /* Private browsing indicators */
4998 * Currently, we have two places where we put private browsing indicators on
4999 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5000 * When tabsintitlebar is disabled, we draw the indicator at the end of the
5001 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5002 * want the bottom border of the image to line up with the bottom of the window
5003 * caption buttons. That's why there's so much special-casing going on in here.
5005 .private-browsing-indicator {
5007 pointer-events: none;
5010 #private-browsing-indicator-titlebar {
5015 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5019 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5023 #TabsToolbar > .private-browsing-indicator {
5024 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5025 margin-inline-start: 4px;
5029 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5030 * mode, since the tabstrip "mimics" the titlebar in that case with its own
5031 * min/max/close window buttons.
5033 #private-browsing-indicator-titlebar > .private-browsing-indicator,
5034 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5035 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5036 margin-inline-end: 4px;
5042 /* This one is for Linux */
5043 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5044 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5048 /* End private browsing indicators */
5050 /* === BEGIN UITour.inc.css === */
5054 #UITourHighlightContainer {
5055 -moz-appearance: none;
5057 background-color: transparent;
5058 /* This is a buffer to compensate for the movement in the "wobble" effect,
5059 and for the box-shadow of #UITourHighlight. */
5064 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5065 border-radius: 40px;
5066 border: 1px solid #9C9CFF;
5067 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5068 on Linux without an X compositor where opacity is either 0 or 1. */
5069 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5074 #UITourTooltipBody {
5075 -moz-box-align: start;
5078 #UITourTooltipTitleContainer {
5079 -moz-box-align: start;
5080 margin-bottom: 10px;
5083 #UITourTooltipIcon {
5086 margin-inline-end: 10px;
5089 #UITourTooltipTitle,
5090 #UITourTooltipDescription {
5094 #UITourTooltipTitle {
5100 #UITourTooltipDescription {
5101 margin-inline-start: 0;
5102 margin-inline-end: 0;
5104 line-height: 1.8rem;
5105 margin-bottom: 0; /* Override global.css */
5108 #UITourTooltipClose {
5110 -moz-appearance: none;
5112 background-color: transparent;
5114 margin-inline-start: 4px;
5118 #UITourTooltipClose > .toolbarbutton-text {
5122 #UITourTooltipButtons {
5124 background-color: rgba(0,0,0,.2);
5125 border-top: 1px solid rgba(0,0,0,.4);
5126 margin: 10px -16px -16px;
5130 #UITourTooltipButtons > label,
5131 #UITourTooltipButtons > button {
5135 #UITourTooltipButtons > label:first-child,
5136 #UITourTooltipButtons > button:first-child {
5137 margin-inline-start: 0;
5140 #UITourTooltipButtons > label:last-child,
5141 #UITourTooltipButtons > button:last-child {
5142 margin-inline-end: 0;
5145 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
5148 margin-inline-end: 5px;
5151 #UITourTooltipButtons > label,
5152 #UITourTooltipButtons > button .button-text {
5156 #UITourTooltipButtons > button:not(.button-link) {
5157 -moz-appearance: none;
5158 background-color: #C09070;
5159 border-radius: 3000px;
5163 transition-property: background-color, color;
5164 transition-duration: 150ms;
5167 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5168 background-color: #FFCF00;
5172 #UITourTooltipButtons > label,
5173 #UITourTooltipButtons > button.button-link {
5174 -moz-appearance: none;
5175 background: transparent;
5178 color: rgba(0,0,0,0.35);
5180 padding-right: 10px;
5183 #UITourTooltipButtons > button.button-link:hover {
5187 /* The primary button gets the same color as the customize button. */
5188 #UITourTooltipButtons > button.button-primary {
5189 background-color: #A06060; /* LCARS default button background color */
5192 padding-right: 30px;
5195 #UITourTooltipButtons > button.button-primary:not(:active):hover {
5196 background-color: #FFCF00;
5200 /* Notification overrides for Heartbeat UI */
5202 notification.heartbeat {
5203 background-color: #A09090;
5207 @keyframes pulse-onshow {
5210 transform: scale(1.0);
5214 transform: scale(1.1);
5217 transform: scale(1.0);
5220 transform: scale(1.1);
5223 transform: scale(1.0);
5227 @keyframes pulse-twice {
5229 transform: scale(1.1);
5232 transform: scale(0.8);
5235 transform: scale(1);
5239 .messageText.heartbeat {
5241 /* text-shadow: none; */
5242 margin-inline-start: 0px;
5245 .messageImage.heartbeat {
5248 margin-inline-start: 8px;
5249 margin-inline-end: 8px;
5252 .messageImage.heartbeat.pulse-onshow {
5253 animation-name: pulse-onshow;
5254 animation-duration: 1.5s;
5255 animation-iteration-count: 1;
5256 animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
5259 .messageImage.heartbeat.pulse-twice {
5260 animation-name: pulse-twice;
5261 animation-duration: 1s;
5262 animation-iteration-count: 2;
5263 animation-timing-function: linear;
5266 /* Learn More link styles */
5267 .heartbeat > .text-link {
5269 margin-inline-start: 0px;
5272 .heartbeat > .text-link:hover {
5274 text-decoration: none;
5277 .heartbeat > .text-link:hover:active {
5281 /* Heartbeat UI Rating Star Classes */
5282 .heartbeat > #star-rating-container {
5284 /* margin-bottom: 4px;*/
5287 .heartbeat > #star-rating-container > #star5 {
5288 -moz-box-ordinal-group: 5;
5291 .heartbeat > #star-rating-container > #star4 {
5292 -moz-box-ordinal-group: 4;
5295 .heartbeat > #star-rating-container > #star3 {
5296 -moz-box-ordinal-group: 3;
5299 .heartbeat > #star-rating-container > #star2 {
5300 -moz-box-ordinal-group: 2;
5303 .heartbeat > #star-rating-container > .star-x {
5304 background: url("chrome://browser/skin/heartbeat-star-off.svg");
5306 /* Overrides the margin-inline-end for all platforms defined in the .plain class */
5307 margin-inline-end: 4px !important;
5312 .heartbeat > #star-rating-container > .star-x:hover,
5313 .heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
5314 background: url("chrome://browser/skin/heartbeat-star-lit.svg");
5317 /* === END UITour.inc.css === */
5319 #UITourTooltipButtons {
5321 * Override the --arrowpanel-padding so the background extends
5322 * to the sides and bottom of the panel.
5325 margin-right: -10px;
5326 margin-bottom: -10px;
5329 /* === BEGIN contextmenu.inc.css === */
5331 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
5334 #context-navigation > .menuitem-iconic {
5336 -moz-box-pack: center;
5337 -moz-box-align: center;
5340 #context-navigation > .menuitem-iconic[disabled="true"] {
5341 background-color: transparent;
5344 #context-navigation > .menuitem-iconic > .menu-iconic-left {
5345 -moz-appearance: none;
5348 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
5352 filter: url(chrome://browser/skin/filters.svg#fill);
5357 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back");
5361 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward");
5365 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload");
5369 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop");
5372 #context-bookmarkpage {
5373 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark");
5376 #context-bookmarkpage[starred=true] {
5377 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked");
5380 #context-back:-moz-locale-dir(rtl),
5381 #context-forward:-moz-locale-dir(rtl),
5382 #context-reload:-moz-locale-dir(rtl) {
5383 transform: scaleX(-1);
5386 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
5387 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
5393 #context-media-eme-learnmore {
5394 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5397 #context-media-eme-learnmore {
5398 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5401 /* === END contextmenu.inc.css === */
5403 #context-navigation {
5406 #context-sep-navigation {
5407 /* margin-top: -4px; */
5410 .browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {
5415 .webextension-popup-browser {
5416 border-radius: inherit;