@import url("chrome://global/skin/"); @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); @namespace html url("http://www.w3.org/1999/xhtml"); @namespace svg url("http://www.w3.org/2000/svg"); /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ /* navbarInsetHighlight is tightly coupled to the toolbarHighlight constant. */ :root { --toolbarbutton-hover-background: #fbfbfc; --toolbarbutton-hover-boxshadow: none; --toolbarbutton-hover-bordercolor: #cfd6e6; --toolbarbutton-active-boxshadow: none; --toolbarbutton-active-bordercolor: #5294E2; --toolbarbutton-active-background: #5294E2; --toolbarbutton-checkedhover-backgroundcolor: #5294E2; --toolbarbutton-combined-boxshadow: none; --toolbarbutton-combined-backgroundimage: linear-gradient(rgba(23, 51, 79, 0.2) 0, rgba(23, 51, 79, 0.2) 18px); --verified-identity-box-backgroundcolor: transparent; --panel-separator-color: ThreeDShadow; --arrowpanel-dimmed: rgba(204, 204, 204, 0.3); --arrowpanel-dimmed-further: rgba(204, 204, 204, 0.45); --arrowpanel-dimmed-even-further: rgba(204, 204, 204, 0.8); --urlbar-separator-color: rgba(41, 41, 41, 0.2); } #menubar-items { -moz-box-orient: vertical; /* for flex hack */ } #main-menubar { -moz-box-flex: 1; /* make menu items expand to fill toolbar height */ } #navigator-toolbox { -moz-appearance: none; background-color: transparent; border-top: none; } #navigator-toolbox::after { content: ""; display: -moz-box; -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */ height: 1px; background-color: #dcdfe3; } #navigator-toolbox:-moz-lwtheme::after { background-color: rgba(0, 0, 0, 0.3); } #navigator-toolbox > toolbar:not(:-moz-lwtheme):not(#toolbar-menubar):not(#TabsToolbar) { -moz-appearance: none; border-style: none; background-color: #F5F6F7; } #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar) { padding-top: 1px; padding-bottom: 1px; } #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar) { overflow: -moz-hidden-unscrollable; max-height: 4em; transition: min-height 170ms ease-out, max-height 170ms ease-out; } #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar)[collapsed=true] { min-height: 0.1px; max-height: 0; transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear; } #TabsToolbar:not([collapsed="true"]) + #nav-bar { border-top: 1px solid rgba(38, 42, 51, 0.97) !important; background-clip: padding-box; /* Move up into the TabsToolbar for the inner highlight at the top of the nav-bar */ margin-top: calc(-1 * var(--navbar-tab-toolbar-highlight-overlap)); /* Position the toolbar above the bottom of background tabs */ position: relative; z-index: 1; } #main-window[htitlemode=always] #TabsToolbar { box-shadow: inset 0 1px rgba(54, 59, 72, 0.97) !important; } #nav-bar { background-image: none !important; background-color: #F5F6F7 !important; box-shadow: none; padding-top: 3px; padding-bottom: 3px; } #nav-bar-overflow-button { -moz-image-region: rect(-5px, 12px, 11px, -4px); } /* This only has an effect when this element is placed on the bookmarks toolbar. * It's 30px to make sure buttons with 18px icons fit along with the default 16px * icons, without changing the size of the toolbar. */ #personal-bookmarks { min-height: 30px; } #browser-bottombox { /* opaque for layers optimization */ background-color: -moz-Dialog; } /* Places toolbar */ toolbarbutton.bookmark-item:not(.subviewbutton), #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder { margin: 0; padding: 2px 3px; } toolbarbutton.bookmark-item:not(.subviewbutton):not(:hover):not(:active):not([open]) { color: inherit; } .bookmark-item > .toolbarbutton-icon, #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon { width: 16px; height: 16px; } /* Force the display of the label for bookmarks */ .bookmark-item > .toolbarbutton-text, #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text { display: -moz-box !important; } .bookmark-item > .toolbarbutton-menu-dropmarker { display: none; } /* Dropmarker for folder bookmarks */ .bookmark-item[container] > .toolbarbutton-menu-dropmarker { display: -moz-box !important; } #bookmarks-toolbar-placeholder { list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png") !important; } toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder, #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder { list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important; } toolbarbutton.bookmark-item { -moz-appearance: none; border: 1px solid transparent; border-radius: 2px; background: none; color: #5c616c; } toolbarbutton.bookmark-item:not([disabled=true]):hover { -moz-appearance: none; color: #5c616c; background-color: white; border: 1px solid #cfd6e6; } toolbarbutton.bookmark-item:not([disabled=true]):-moz-any([open], [checked], :hover:active) { -moz-appearance: none; color: #ffffff; background-color: #5294E2; border: 1px solid #5294E2; } /* ----- BOOKMARK STAR ANIMATION ----- */ @keyframes animation-bookmarkAdded { from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; } 60% { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; } 80% { opacity: 1; } to { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; } } @keyframes animation-bookmarkPulse { from { transform: scale(1); } 50% { transform: scale(1.3); } to { transform: scale(1); } } #bookmarked-notification-container { min-height: 1px; min-width: 1px; height: 1px; margin-bottom: -1px; z-index: 5; position: relative; } #bookmarked-notification { background-size: 16px; background-position: center; background-repeat: no-repeat; width: 16px; height: 16px; opacity: 0; } #bookmarked-notification-dropmarker-anchor { z-index: -1; position: relative; } #bookmarked-notification-dropmarker-icon { width: 18px; height: 18px; visibility: hidden; } #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification { background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png"); animation: animation-bookmarkAdded 800ms; animation-timing-function: ease, ease, ease; } #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { list-style-image: none !important; } #bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon { visibility: visible; animation: animation-bookmarkPulse 300ms; animation-delay: 600ms; animation-timing-function: ease-out; } /* Bookmark menus */ menu.bookmark-item, menuitem.bookmark-item { min-width: 0; max-width: 32em; } .bookmark-item:not(.subviewbutton) > .menu-iconic-left { margin-top: 0; margin-bottom: 0; } .bookmark-item > .menu-iconic-left > .menu-iconic-icon { padding-inline-start: 0px; } /* Bookmark drag and drop styles */ .bookmark-item[dragover-into="true"] { background: Highlight !important; color: HighlightText !important; } /* rules for menupopup drop indicators */ .menupopup-drop-indicator-bar { position: relative; /* these two margins must together compensate the indicator's height */ margin-top: -1px; margin-bottom: -1px; } .menupopup-drop-indicator { list-style-image: none; height: 2px; margin-inline-end: -4em; background-color: Highlight; } /* Bookmarks toolbar */ #PlacesToolbarDropIndicator { list-style-image: url(chrome://browser/skin/places/toolbarDropMarker.png); } /* Bookmark items */ .bookmark-item { list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); } .bookmark-item[container] { list-style-image: url("moz-icon://stock/gtk-directory?size=menu"); } .bookmark-item[container][livemark] { list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png"); } .bookmark-item[container][livemark] .bookmark-item { list-style-image: url("chrome://browser/skin/places/livemark-item.png"); -moz-image-region: rect(0px, 16px, 16px, 0px); } .bookmark-item[container][livemark] .bookmark-item[visited] { -moz-image-region: rect(0px, 32px, 16px, 16px); } .bookmark-item[container][query] { list-style-image: url("chrome://browser/skin/places/query.png"); } .bookmark-item[query][tagContainer] { list-style-image: url("chrome://browser/skin/places/tag.png"); } .bookmark-item[query][dayContainer] { list-style-image: url("chrome://browser/skin/places/calendar.png"); } .bookmark-item[query][hostContainer] { list-style-image: url("moz-icon://stock/gtk-directory?size=menu"); } .bookmark-item[query][hostContainer][open] { list-style-image: url("moz-icon://stock/gtk-directory?size=menu"); } .bookmark-item[cutting] > .toolbarbutton-icon, .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon { opacity: 0.5; } .bookmark-item[cutting] > .toolbarbutton-text, .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text { opacity: 0.7; } /* Primary toolbar buttons */ :-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1 > .toolbarbutton-icon, :-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1 > :-moz-any(.toolbarbutton-menubutton-button, .toolbarbutton-badge-stack) > .toolbarbutton-icon { max-width: 16px; } :-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu, .toolbarbutton-legacy-addon) > .toolbarbutton-icon, :-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu, .toolbarbutton-legacy-addon) > :-moz-any(.toolbarbutton-menubutton-button, .toolbarbutton-badge-stack) > .toolbarbutton-icon, #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { max-width: 18px; } .findbar-button, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 { -moz-appearance: none; } :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open="true"], :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:hover:active { padding: 3px; } .findbar-button > .toolbarbutton-text, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-badge-stack, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-icon { margin-inline-end: 0; padding: 2px 6px; border: 1px solid transparent; border-radius: 2px; transition-property: background-color, border-color; transition-duration: 150ms; } :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu, .toolbarbutton-legacy-addon)) > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu, .toolbarbutton-legacy-addon)) > .toolbarbutton-badge-stack, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu, .toolbarbutton-legacy-addon)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon { padding: 3px 7px; } :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { /* horizontal padding + border + actual icon width */ max-width: 32px !important; } #nav-bar #PanelUI-menu-button { padding-inline-start: 5px; padding-inline-end: 5px; } #nav-bar #PanelUI-button, #nav-bar[brighttext] #PanelUI-button { margin-top: -3px; margin-bottom: -3px; background: none; border-image: url("chrome://browser/skin/custom_images/light/navbar-separator.png") 0 0 0 2/0 0 0 2px; } .findbar-button:not(:-moz-any([checked="true"], [disabled="true"])):hover > .toolbarbutton-text, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open]:not([disabled=true]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):not([open]):hover > .toolbarbutton-menubutton-button > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):not([open]):hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-badge-stack, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-icon { background: var(--toolbarbutton-hover-background); border-width: 1px; border-style: solid; border-color: var(--toolbarbutton-hover-bordercolor); box-shadow: var(--toolbarbutton-hover-boxshadow); } #TabsToolbar .toolbarbutton-1[open]:not([disabled=true]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon, #TabsToolbar .toolbarbutton-1:not([disabled=true]):not([open]):hover > .toolbarbutton-menubutton-button > .toolbarbutton-icon, #TabsToolbar .toolbarbutton-1:not([disabled=true]):not([open]):hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-badge-stack, #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-icon { background-color: none; color: rgba(207, 218, 231, 0.8); border-color: rgba(21, 23, 28, 0.37); background-color: rgba(95, 105, 127, 0.37); background-clip: padding-box; } .findbar-button:not([disabled=true]):-moz-any([checked="true"], :hover:active) > .toolbarbutton-text, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([open="true"]) > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open="true"]) > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-stack, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-icon { background: var(--toolbarbutton-active-background); box-shadow: var(--toolbarbutton-active-boxshadow); border-width: 1px; border-style: solid; border-color: var(--toolbarbutton-active-bordercolor); transition-duration: 10ms; } #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open="true"]) > .toolbarbutton-icon, #TabsToolbar .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon, #TabsToolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-stack, #TabsToolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-icon { background: none; color: #ffffff; border-color: rgba(21, 23, 28, 0.37); background-color: #5294E2; background-clip: padding-box; } :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[checked]:not(:active):hover > .toolbarbutton-icon { background-color: var(--toolbarbutton-checkedhover-backgroundcolor); transition: background-color 150ms; } :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button[open], :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button:hover:active, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:hover:active { padding: 3px; } :-moz-any(#TabsToolbar, #nav-bar) .toolbaritem-combined-buttons { margin-left: 2px; margin-right: 2px; } :-moz-any(#TabsToolbar, #nav-bar) .toolbaritem-combined-buttons > .toolbarbutton-1 { padding-left: 0; padding-right: 0; } :-moz-any(#TabsToolbar, #nav-bar) .toolbaritem-combined-buttons:not(:hover) > separator, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before { content: ""; display: -moz-box; width: 1px; height: 18px; margin-inline-end: -1px; background-position: center; background-repeat: no-repeat; background-size: 1px 18px; } #nav-bar .toolbaritem-combined-buttons:not(:hover) > separator, #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before { background: #dcdfe3; } #TabsToolbar .toolbaritem-combined-buttons:not(:hover) > separator, #TabsToolbar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before { background: rgba(207, 218, 231, 0.15); } :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { margin-inline-start: -4px; } #back-button > menupopup { margin-top: -1px; } #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { transform: scaleX(-1); } #forward-button { padding: 0; margin-left: 2px; margin-right: 2px; } /* undo close tab menu item */ #alltabs_undoCloseTab { list-style-image: url(chrome://browser/skin/undoCloseTab.png); } .unified-nav-back[_moz-menuactive] { list-style-image: url("moz-icon://stock/gtk-go-back-ltr?size=menu") !important; } .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) { list-style-image: url("moz-icon://stock/gtk-go-back-rtl?size=menu") !important; } .unified-nav-forward[_moz-menuactive] { list-style-image: url("moz-icon://stock/gtk-go-forward-ltr?size=menu") !important; } .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) { list-style-image: url("moz-icon://stock/gtk-go-forward-rtl?size=menu") !important; } /* Menu panel buttons */ :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu), #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { list-style-image: url("chrome://browser/skin/custom_images/light/toolbar-icons.svg"); } #TabsToolbar :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu), #TabsToolbar #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { list-style-image: url("chrome://browser/skin/custom_images/dark/tabbar-icons.svg"); } #nav-bar #back-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #back-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar #forward-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #forward-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar #home-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #home-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar #print-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #print-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar #downloads-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #downloads-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar #new-tab-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #new-tab-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar #new-window-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #new-window-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar #fullscreen-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #fullscreen-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar #sync-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #sync-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar #feed-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #feed-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar #social-share-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #social-share-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar #open-file-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #open-file-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar #find-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #find-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar #developer-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #developer-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar #preferences-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #preferences-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar #privatebrowsing-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #privatebrowsing-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar #save-page-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #save-page-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar #add-ons-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #add-ons-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar #history-panelmenu:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #history-panelmenu:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar #nav-bar-overflow-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #nav-bar-overflow-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar #PanelUI-menu-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #PanelUI-menu-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar #characterencoding-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #characterencoding-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar #email-link-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #email-link-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar #sidebar-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #sidebar-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar #zoom-out-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #zoom-out-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar #zoom-reset-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #zoom-reset-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar #zoom-in-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #zoom-in-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar #cut-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #cut-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar #copy-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #copy-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar #paste-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #paste-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar #e10s-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #e10s-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar #panic-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #panic-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar #webide-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #webide-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar #containers-panelmenu:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #containers-panelmenu:not([disabled=true]):-moz-any([open], [checked], :hover:active) { list-style-image: url("chrome://browser/skin/custom_images/toolbar-icons-active.svg"); } #nav-bar #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .dropmarker-icon, #TabsToolbar #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .dropmarker-icon, #nav-bar #bookmarks-menu-button > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-icon, #TabsToolbar #bookmarks-menu-button > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-icon { list-style-image: url("chrome://browser/skin/custom_images/toolbar-icons-active.svg"); } #back-button { -moz-image-region: rect(0, 36px, 18px, 18px); } #forward-button { -moz-image-region: rect(0, 72px, 18px, 54px); } #home-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 126px, 18px, 108px); } #bookmarks-menu-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 144px, 18px, 126px); } #bookmarks-menu-button[cui-areatype="toolbar"][starred] { -moz-image-region: rect(0, 162px, 18px, 144px); } #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { -moz-image-region: rect(0, 630px, 18px, 612px); } #history-panelmenu[cui-areatype="toolbar"] { -moz-image-region: rect(0, 180px, 18px, 162px); } #downloads-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 198px, 18px, 180px); } #add-ons-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 216px, 18px, 198px); } #open-file-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 234px, 18px, 216px); } #save-page-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 252px, 18px, 234px); } #sync-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 792px, 18px, 774px); } #containers-panelmenu[cui-areatype="toolbar"] { -moz-image-region: rect(0, 810px, 18px, 792px); } #feed-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 288px, 18px, 270px); } #social-share-button[cui-areatype="toolbar"] { -moz-image-region: rect(0px, 306px, 18px, 288px); } #characterencoding-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 324px, 18px, 306px); } #new-window-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 342px, 18px, 324px); } #e10s-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 342px, 18px, 324px); } #e10s-button > .toolbarbutton-icon { transform: scaleY(-1); } #new-tab-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 360px, 18px, 342px); } #privatebrowsing-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 378px, 18px, 360px); } #find-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 396px, 18px, 378px); } #print-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 414px, 18px, 396px); } #fullscreen-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 432px, 18px, 414px); } #developer-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 450px, 18px, 432px); } #preferences-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 468px, 18px, 450px); } #PanelUI-menu-button { -moz-image-region: rect(0, 486px, 18px, 468px); } #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button { -moz-image-region: rect(0, 504px, 18px, 486px); } #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button { -moz-image-region: rect(0, 522px, 18px, 504px); } #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button { -moz-image-region: rect(0, 540px, 18px, 522px); } #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button { -moz-image-region: rect(0, 558px, 18px, 540px); } #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button { -moz-image-region: rect(0, 576px, 18px, 558px); } #nav-bar-overflow-button { -moz-image-region: rect(0, 612px, 18px, 594px); } #nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { transform: scaleX(-1); } #email-link-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 666px, 18px, 648px); } #sidebar-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 684px, 18px, 666px); } #panic-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 702px, 18px, 684px); } #panic-button[cui-areatype="toolbar"][open] { -moz-image-region: rect(18px, 702px, 36px, 684px); } #panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { transform: scaleX(-1); } #webide-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 738px, 18px, 720px); } /* @media (min-resolution: 1.1dppx) { :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu), #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { list-style-image: url("chrome://browser/skin/Toolbar@2x.png"); } toolbar[brighttext] :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu), toolbar[brighttext] #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { list-style-image: url("chrome://browser/skin/Toolbar-inverted@2x.png"); } #back-button { -moz-image-region: rect(0, 72px, 36px, 36px); } #forward-button { -moz-image-region: rect(0, 144px, 36px, 108px); } #home-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 252px, 36px, 216px); } #bookmarks-menu-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 288px, 36px, 252px); } #bookmarks-menu-button[cui-areatype="toolbar"][starred] { -moz-image-region: rect(0, 324px, 36px, 288px); } #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { -moz-image-region: rect(0px, 1260px, 36px, 1224px); } #history-panelmenu[cui-areatype="toolbar"] { -moz-image-region: rect(0, 360px, 36px, 324px); } #downloads-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 396px, 36px, 360px); } #add-ons-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 432px, 36px, 396px); } #open-file-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 468px, 36px, 432px); } #save-page-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 504px, 36px, 468px); } #sync-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 1584px, 36px, 1548px); } #containers-panelmenu[cui-areatype="toolbar"] { -moz-image-region: rect(0, 1620px, 36px, 1584px); } #feed-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 576px, 36px, 540px); } #social-share-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 612px, 36px, 576px); } #characterencoding-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 648px, 36px, 612px); } #new-window-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 684px, 36px, 648px); } #e10s-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 684px, 36px, 648px); } #e10s-button > .toolbarbutton-icon { transform: scaleY(-1); } #new-tab-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 720px, 36px, 684px); } #privatebrowsing-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 756px, 36px, 720px); } #find-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 792px, 36px, 756px); } #print-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 828px, 36px, 792px); } #fullscreen-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 864px, 36px, 828px); } #developer-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 900px, 36px, 864px); } #preferences-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 936px, 36px, 900px); } #PanelUI-menu-button { -moz-image-region: rect(0, 972px, 36px, 936px); } #edit-controls[cui-areatype="toolbar"] > #cut-button { -moz-image-region: rect(0, 1008px, 36px, 972px); } #edit-controls[cui-areatype="toolbar"] > #copy-button { -moz-image-region: rect(0, 1044px, 36px, 1008px); } #edit-controls[cui-areatype="toolbar"] > #paste-button { -moz-image-region: rect(0, 1080px, 36px, 1044px); } #zoom-controls[cui-areatype="toolbar"] > #zoom-out-button { -moz-image-region: rect(0, 1116px, 36px, 1080px); } #zoom-controls[cui-areatype="toolbar"] > #zoom-in-button { -moz-image-region: rect(0, 1152px, 36px, 1116px); } #nav-bar-overflow-button { -moz-image-region: rect(0, 1224px, 36px, 1188px); } #email-link-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 1332px, 36px, 1296px); } #sidebar-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 1368px, 36px, 1332px); } #panic-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 1404px, 36px, 1368px); } #panic-button[cui-areatype="toolbar"][open] { -moz-image-region: rect(36px, 1404px, 72px, 1368px); } #webide-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 1476px, 36px, 1440px); } } */ /* Menu panel and palette styles */ toolbaritem[sdkstylewidget="true"] > toolbarbutton, :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"], toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) { list-style-image: url(chrome://browser/skin/menuPanel.svg); } :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-icon, :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #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, :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #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 { filter: url(chrome://global/skin/filters.svg#fill); fill: currentColor; } #home-button[cui-areatype="menu-panel"], toolbarpaletteitem[place="palette"] > #home-button { -moz-image-region: rect(0px, 128px, 32px, 96px); } #bookmarks-menu-button[cui-areatype="menu-panel"], toolbarpaletteitem[place="palette"] > #bookmarks-menu-button { -moz-image-region: rect(0px, 192px, 32px, 160px); } #history-panelmenu[cui-areatype="menu-panel"], toolbarpaletteitem[place="palette"] > #history-panelmenu { -moz-image-region: rect(0px, 224px, 32px, 192px); } #downloads-button[cui-areatype="menu-panel"], toolbarpaletteitem[place="palette"] > #downloads-button { -moz-image-region: rect(0px, 256px, 32px, 224px); } #add-ons-button[cui-areatype="menu-panel"], toolbarpaletteitem[place="palette"] > #add-ons-button { -moz-image-region: rect(0px, 288px, 32px, 256px); } #open-file-button[cui-areatype="menu-panel"], toolbarpaletteitem[place="palette"] > #open-file-button { -moz-image-region: rect(0px, 320px, 32px, 288px); } #save-page-button[cui-areatype="menu-panel"], toolbarpaletteitem[place="palette"] > #save-page-button { -moz-image-region: rect(0px, 352px, 32px, 320px); } #sync-button[cui-areatype="menu-panel"], toolbarpaletteitem[place="palette"] > #sync-button { -moz-image-region: rect(0px, 1024px, 32px, 992px); } #containers-panelmenu[cui-areatype="menu-panel"], toolbarpaletteitem[place="palette"] > #containers-panelmenu { -moz-image-region: rect(0px, 1056px, 32px, 1024px); } #feed-button[cui-areatype="menu-panel"], toolbarpaletteitem[place="palette"] > #feed-button { -moz-image-region: rect(0px, 416px, 32px, 384px); } #social-share-button[cui-areatype="menu-panel"], toolbarpaletteitem[place="palette"] > #social-share-button { -moz-image-region: rect(0px, 448px, 32px, 416px); } #characterencoding-button[cui-areatype="menu-panel"], toolbarpaletteitem[place="palette"] > #characterencoding-button { -moz-image-region: rect(0px, 480px, 32px, 448px); } #new-window-button[cui-areatype="menu-panel"], toolbarpaletteitem[place="palette"] > #new-window-button { -moz-image-region: rect(0px, 512px, 32px, 480px); } #e10s-button[cui-areatype="menu-panel"], toolbarpaletteitem[place="palette"] > #e10s-button { -moz-image-region: rect(0px, 512px, 32px, 480px); } #new-tab-button[cui-areatype="menu-panel"], toolbarpaletteitem[place="palette"] > #new-tab-button { -moz-image-region: rect(0px, 544px, 32px, 512px); } #privatebrowsing-button[cui-areatype="menu-panel"], toolbarpaletteitem[place="palette"] > #privatebrowsing-button { -moz-image-region: rect(0px, 576px, 32px, 544px); } #find-button[cui-areatype="menu-panel"], toolbarpaletteitem[place="palette"] > #find-button { -moz-image-region: rect(0px, 640px, 32px, 608px); } #print-button[cui-areatype="menu-panel"], toolbarpaletteitem[place="palette"] > #print-button { -moz-image-region: rect(0px, 672px, 32px, 640px); } #fullscreen-button[cui-areatype="menu-panel"], toolbarpaletteitem[place="palette"] > #fullscreen-button { -moz-image-region: rect(0px, 704px, 32px, 672px); } #developer-button[cui-areatype="menu-panel"], toolbarpaletteitem[place="palette"] > #developer-button { -moz-image-region: rect(0px, 736px, 32px, 704px); } #preferences-button[cui-areatype="menu-panel"], toolbarpaletteitem[place="palette"] > #preferences-button { -moz-image-region: rect(0px, 768px, 32px, 736px); } #email-link-button[cui-areatype="menu-panel"], toolbarpaletteitem[place="palette"] > #email-link-button { -moz-image-region: rect(0, 800px, 32px, 768px); } #sidebar-button[cui-areatype="menu-panel"], toolbarpaletteitem[place="palette"] > #sidebar-button { -moz-image-region: rect(0, 864px, 32px, 832px); } #panic-button[cui-areatype="menu-panel"], toolbarpaletteitem[place="palette"] > #panic-button { -moz-image-region: rect(0, 896px, 32px, 864px); } #webide-button[cui-areatype="menu-panel"], toolbarpaletteitem[place="palette"] > #webide-button { -moz-image-region: rect(0px, 960px, 32px, 928px); } toolbaritem[sdkstylewidget="true"] > toolbarbutton { -moz-image-region: rect(0, 832px, 32px, 800px); } /* Wide panel control icons */ #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton, toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton { list-style-image: url(chrome://browser/skin/menuPanel-small.svg); } #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button, toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button { -moz-image-region: rect(0px, 32px, 16px, 16px); } #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button, toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button { -moz-image-region: rect(0px, 48px, 16px, 32px); } #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button, toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button { -moz-image-region: rect(0px, 64px, 16px, 48px); } #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button, toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button { -moz-image-region: rect(0px, 80px, 16px, 64px); } #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button, toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { -moz-image-region: rect(0px, 96px, 16px, 80px); } #add-share-provider { list-style-image: url(chrome://browser/skin/menuPanel-small.svg); -moz-image-region: rect(0px, 96px, 16px, 80px); } #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon, #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker, #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker, #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon, #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon { opacity: 0.4; } /* Fullscreen window controls */ #window-controls { -moz-box-align: start; margin-inline-start: 10px; } #close-button, #restore-button, #minimize-button { padding: 2px 4px; -moz-appearance: none; } #close-button { list-style-image: url("chrome://browser/skin/custom_images/dark/window-controls/close.svg"); } #close-button:hover { list-style-image: url("chrome://browser/skin/custom_images/dark/window-controls/close_prelight.svg"); } #close-button:active { list-style-image: url("chrome://browser/skin/custom_images/dark/window-controls/close_pressed.svg"); } #restore-button { list-style-image: url("chrome://browser/skin/custom_images/dark/window-controls/maximize.svg"); } #restore-button:hover { list-style-image: url("chrome://browser/skin/custom_images/dark/window-controls/maximize_prelight.svg"); } #restore-button:active { list-style-image: url("chrome://browser/skin/custom_images/dark/window-controls/maximize_pressed.svg"); } #minimize-button { list-style-image: url("chrome://browser/skin/custom_images/dark/window-controls/minimize.svg"); } #minimize-button:hover { list-style-image: url("chrome://browser/skin/custom_images/dark/window-controls/minimize_prelight.svg"); } #minimize-button:active { list-style-image: url("chrome://browser/skin/custom_images/dark/window-controls/minimize_pressed.svg"); } /* Location bar */ #urlbar, .searchbar-textbox { -moz-appearance: none; padding: 0 3px; border-radius: 3px; margin: 0 3px; min-height: 28px; color: #5c616c; background-color: #ffffff; border: 1px solid #cfd6e6; } #urlbar[focused], .searchbar-textbox[focused] { color: #5c616c; background-color: #ffffff; border: 1px solid #5294E2; } .searchbar-textbox { border-radius: 20px; padding-left: 6px; padding-right: 6px; } #urlbar:-moz-lwtheme, .searchbar-textbox:-moz-lwtheme { background-color: rgba(255, 255, 255, 0.8); color: black; } #urlbar:-moz-lwtheme[focused=true], .searchbar-textbox:-moz-lwtheme[focused=true] { background-color: white; } .urlbar-textbox-container { -moz-appearance: none; -moz-box-align: stretch; } .urlbar-input-box { margin-inline-start: 0; } .urlbar-history-dropmarker { -moz-appearance: toolbarbutton-dropdown; transition: opacity 0.15s ease; } #urlbar-wrapper[switchingtabs] > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker { transition: none; } #navigator-toolbox:not(:hover) #nav-bar:not([customizing="true"]) #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker { opacity: 0; } #urlbar-container { -moz-box-align: center; } #urlbar-icons { -moz-box-align: center; } .urlbar-icon { padding: 0 1px; /* 16x16 icon with border-box sizing */ width: 16px; height: 16px; } /* ::::: URL Bar Zoom Reset Button ::::: */ @keyframes urlbar-zoom-reset-pulse { 0% { transform: scale(0); } 75% { transform: scale(1.5); } 100% { transform: scale(1); } } #urlbar-zoom-button { -moz-appearance: none; margin: 0 3px; font-size: .8em; padding: 0 8px; border-radius: 1em; background-color: rgba(0, 0, 0, 0.05); color: inherit; border: 1px solid ThreeDLightShadow; } #urlbar-zoom-button[animate="true"] { animation-name: urlbar-zoom-reset-pulse; animation-duration: 250ms; } #urlbar-zoom-button:hover { background-color: rgba(0, 0, 0, 0.1); } #urlbar-zoom-button:hover:active { background-color: rgba(0, 0, 0, 0.15); } #urlbar-zoom-button > .toolbarbutton-text { display: -moz-box; } #urlbar-zoom-button > .toolbarbutton-icon { display: none; } #urlbar-search-footer { border-top: 1px solid var(--panel-separator-color); background-color: var(--arrowpanel-dimmed); } #urlbar-search-settings { -moz-appearance: none; -moz-user-focus: ignore; color: GrayText; margin: 0; border: 0; padding: 8px 20px; background: transparent; } #urlbar-search-settings:hover { background-color: var(--arrowpanel-dimmed); } #urlbar-search-settings:hover:active { background-color: var(--arrowpanel-dimmed-further); } #urlbar-search-splitter { -moz-appearance: none; width: 8px; } #urlbar-display-box { margin-top: -1px; margin-bottom: -1px; } .urlbar-display { margin-top: 0; margin-bottom: 0; margin-inline-start: 0; color: GrayText; } #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] { border-bottom: 1px solid var(--panel-separator-color); background-color: rgba(24, 26, 27, 0.07); padding: 6px 0; padding-inline-start: 44px; padding-inline-end: 6px; background-image: url("chrome://browser/skin/info.svg"); background-clip: padding-box; background-position: 20px center; background-repeat: no-repeat; background-size: 16px 16px; } #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) { background-position: right 20px center; } #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description { margin: 0; padding: 0; } #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link { margin-inline-start: 0; } #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button { -moz-appearance: none; min-width: 80px; border-radius: 3px; padding: 4px 16px; margin: 0; margin-inline-start: 10px; } #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] { color: #616161; background-color: #e0e0e0; border: 1px solid #d1d1d1; } #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover { background-color: #d6d6d6; } #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] { color: white; background-color: #67cc14; border: 1px solid #67cc14; } #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover { background-color: #5eba12; } #search-container { min-width: calc(54px + 11ch); } /* identity box */ #identity-box:-moz-locale-dir(ltr) { border-top-left-radius: 1.5px; border-bottom-left-radius: 1.5px; } #identity-box:-moz-locale-dir(rtl) { border-top-right-radius: 1.5px; border-bottom-right-radius: 1.5px; } #identity-box:-moz-focusring { outline: 1px dotted; outline-offset: -3px; } #identity-icon { list-style-image: url(chrome://browser/skin/identity-icon.svg#normal); } #identity-box:hover > #identity-icon:not(.no-hover), #identity-box[open=true] > #identity-icon { list-style-image: url(chrome://browser/skin/identity-icon.svg#hover); } #identity-box.grantedPermissions > #identity-icon { list-style-image: url(chrome://browser/skin/identity-icon.svg#notice); } #identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover), #identity-box.grantedPermissions[open=true] > #identity-icon { list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover); } #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon { list-style-image: url(chrome://branding/content/identity-icons-brand.svg); } #tracking-protection-icon { list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled); } #tracking-protection-icon[state="loaded-tracking-content"] { list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled); } #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon, #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon, #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon { list-style-image: url(chrome://browser/skin/connection-secure.svg); visibility: visible; } #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon, #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon, #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon, #urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon { list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon); visibility: visible; } #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon, #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon { list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon); visibility: visible; } #identity-icon:-moz-lwtheme { list-style-image: url(chrome://browser/skin/identity-icon.svg#normal-black); } #identity-box:hover > #identity-icon:not(.no-hover):-moz-lwtheme, #identity-box[open=true] > #identity-icon:-moz-lwtheme { list-style-image: url(chrome://browser/skin/identity-icon.svg#hover-black); } #identity-box.grantedPermissions > #identity-icon:-moz-lwtheme { list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-black); } #identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover):-moz-lwtheme, #identity-box.grantedPermissions[open=true] > #identity-icon:-moz-lwtheme { list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover-black); } #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon:-moz-lwtheme { list-style-image: url(chrome://branding/content/identity-icons-brand.svg); } #tracking-protection-icon:-moz-lwtheme { list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled-black); } #tracking-protection-icon[state="loaded-tracking-content"]:-moz-lwtheme { list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled-black); } #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon:-moz-lwtheme, #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon:-moz-lwtheme, #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon:-moz-lwtheme { list-style-image: url(chrome://browser/skin/connection-secure.svg); visibility: visible; } #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon:-moz-lwtheme, #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon:-moz-lwtheme, #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon:-moz-lwtheme, #urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon:-moz-lwtheme { list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon-black); visibility: visible; } #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon:-moz-lwtheme, #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon:-moz-lwtheme { list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon-black); visibility: visible; } #identity-box { --identity-box-verified-color: #479900; --identity-box-chrome-color: #e57300; border-inline-end: 1px solid rgba(207, 214, 230, 0.5); font-size: .9em; padding: 3px 9px 3px 7px; margin-inline-end: 5px; overflow: hidden; } #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { color: var(--identity-box-verified-color); } #urlbar[pageproxystate="valid"] > #identity-box.chromeUI { color: var(--identity-box-chrome-color); } #identity-icon-labels:-moz-locale-dir(ltr) { padding-left: 2px; } #identity-icon-labels:-moz-locale-dir(rtl) { padding-right: 2px; } #notification-popup-box:not([hidden]) + #identity-box { padding-inline-start: 9px; border-radius: 0; } /* MAIN IDENTITY ICON */ #identity-icon { width: 16px; height: 16px; } #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon { opacity: .3; } #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon { -moz-image-region: inherit; list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); width: 16px; height: 16px; } #urlbar[actiontype="extension"] > #identity-box > #identity-icon { -moz-image-region: inherit; list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg); width: 16px; height: 16px; } /* SHARING ICON */ #sharing-icon { width: 16px; height: 16px; margin-inline-start: -16px; position: relative; display: none; } #identity-box[sharing="camera"] > #sharing-icon { list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing"); } #identity-box[sharing="microphone"] > #sharing-icon { list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing"); } #identity-box[sharing="screen"] > #sharing-icon { list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing"); } #identity-box[sharing] > #sharing-icon { display: -moz-box; animation-delay: -1.5s; } #identity-box[sharing] > #identity-icon, #sharing-icon { animation: 3s linear identity-box-sharing-icon-pulse infinite; } /* This should remain identical to tab-sharing-icon-pulse in tabs.inc.css */ @keyframes identity-box-sharing-icon-pulse { 0%, 16.66%, 83.33%, 100% { opacity: 0; } 33.33%, 66.66% { opacity: 1; } } /* TRACKING PROTECTION ICON */ #tracking-protection-icon { width: 16px; height: 16px; margin-inline-start: 2px; margin-inline-end: 0; } #tracking-protection-icon[animate] { transition: margin-left 200ms ease-out, margin-right 200ms ease-out; } #tracking-protection-icon:not([state]) { margin-inline-end: -18px; pointer-events: none; opacity: 0; /* Only animate the shield in, when it disappears hide it immediately. */ transition: none; } #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon { visibility: collapse; } /* CONNECTION ICON */ #connection-icon { width: 16px; height: 16px; margin-inline-start: 2px; visibility: collapse; } #notification-popup-box { padding: 5px 0px; margin: -5px 0px; margin-inline-end: -5px; padding-inline-end: 5px; } .notification-anchor-icon, #blocked-permissions-container > .blocked-permission-icon { width: 16px; height: 16px; margin-inline-start: 2px; } /* This class can be used alone or in combination with the class defining the type of icon displayed. This rule must be defined before the others in order for its list-style-image to be overridden. */ .notification-anchor-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#default-info); } .notification-anchor-icon:not(.plugin-blocked):-moz-lwtheme, #blocked-permissions-container > .blocked-permission-icon:-moz-lwtheme { filter: url(chrome://global/skin/filters.svg#fill); fill: currentColor; } /* INDIVIDUAL NOTIFICATIONS */ .popup-notification-icon[popupid="web-notifications"], .desktop-notification-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification); } .desktop-notification-icon.blocked-permission-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked); } .geo-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-linux); } .geo-icon.blocked-permission-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-linux-blocked); } .popup-notification-icon[popupid="geolocation"] { list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-linux-detailed); } .popup-notification-icon[popupid="indexedDB-permissions-prompt"], .indexedDB-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB); } .indexedDB-icon.blocked-permission-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked); } .login-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#login); } .popup-notification-icon[popupid="password"] { list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed); } .camera-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#camera); } .camera-icon.in-use { list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-sharing); } .camera-icon.blocked-permission-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked); } .microphone-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone); } .microphone-icon.in-use { list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-sharing); } .microphone-icon.blocked-permission-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked); } .popup-notification-icon.microphone-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed); } .screen-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#screen); } .screen-icon.in-use { list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-sharing); } .screen-icon.blocked-permission-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked); } #webRTC-preview:not([hidden]) { display: -moz-stack; border-radius: 4px; border: 1px solid GrayText; overflow: hidden; min-width: 300px; min-height: 10em; } html|*#webRTC-previewVideo { width: 300px; /* If we don't set the min-width, width is ignored. */ min-width: 300px; max-height: 200px; } #webRTC-previewWarning { background: rgba(255, 217, 99, 0.8) url("chrome://browser/skin/warning-white.svg") no-repeat 0.75em 0.75em; margin: 0; padding: .5em; padding-inline-start: calc(1.5em + 16px); border-top: 1px solid GrayText; } #webRTC-previewWarning > .text-link { margin-inline-start: 0; } /* This icon has a block sign in it, so we don't need a blocked version. */ .popup-icon { list-style-image: url("chrome://browser/skin/notification-icons.svg#popup"); } /* EME */ .popup-notification-icon[popupid="drmContentPlaying"], .drm-icon { list-style-image: url("chrome://browser/skin/drm-icon.svg#chains"); } .drm-icon:hover:active { list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed"); } #eme-notification-icon[firstplay=true] { animation: emeTeachingMoment 0.2s linear 0s 5 normal; } @keyframes emeTeachingMoment { 0% { transform: translateX(0); } 25% { transform: translateX(3px); } 75% { transform: translateX(-3px); } 100% { transform: translateX(0); } } /* INSTALL ADDONS */ .install-icon { list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg); } .popup-notification-icon[popupid="xpinstall-disabled"], .popup-notification-icon[popupid="addon-install-blocked"], .popup-notification-icon[popupid="addon-install-origin-blocked"] { list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg); } .popup-notification-icon[popupid="addon-progress"] { list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg); } .popup-notification-icon[popupid="addon-install-failed"] { list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg); } .popup-notification-icon[popupid="addon-install-confirmation"] { list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg); } #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] { list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg); } .popup-notification-icon[popupid="addon-install-complete"] { list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg); } .popup-notification-icon[popupid="addon-install-restart"] { list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg); } .popup-notification-icon[popupid="click-to-play-plugins"] { list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png); } /* OFFLINE APPS */ .popup-notification-icon[popupid*="offline-app-requested"], .popup-notification-icon[popupid="offline-app-usage"] { list-style-image: url(chrome://global/skin/icons/question-64.png); } /* PLUGINS */ .plugin-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin); } .plugin-icon.plugin-blocked { list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked); } #notification-popup-box[hidden] { /* Override display:none to make the pluginBlockedNotification animation work when showing the notification repeatedly. */ display: -moz-box; visibility: collapse; } #plugins-notification-icon.plugin-blocked[showing] { animation: pluginBlockedNotification 500ms ease 0s 5 alternate both; } @keyframes pluginBlockedNotification { from { opacity: 0; } to { opacity: 1; } } /* SOCIAL API */ .popup-notification-icon[popupid="servicesInstall"] { list-style-image: url(chrome://browser/skin/social/services-64.png); } .service-icon { list-style-image: url(chrome://browser/skin/social/services-16.png); } /* TRANSLATION */ .translation-icon { list-style-image: url(chrome://browser/skin/translation-16.png); -moz-image-region: rect(0px, 16px, 16px, 0px); } .translation-icon.in-use { -moz-image-region: rect(0px, 32px, 16px, 16px); } .popup-notification-body[popupid="addon-progress"], .popup-notification-body[popupid="addon-install-confirmation"] { width: 28em; max-width: 28em; } .addon-install-confirmation-name { font-weight: bold; } .addon-webext-perm-header { font-size: 1.3em; } .addon-webext-name { font-weight: bold; margin: 0; } .addon-addon-icon { width: 14px; height: 14px; list-style-image: url("chrome://browser/skin/menuPanel.svg"); -moz-image-region: rect(0px, 288px, 32px, 256px); } .addon-toolbar-icon { width: 14px; height: 14px; list-style-image: url("chrome://browser/skin/Toolbar.png"); -moz-image-region: rect(0, 486px, 18px, 468px); } /* Notification icon box */ .notification-anchor-icon:-moz-focusring { outline: 1px dotted -moz-DialogText; } /* Translation infobar */ notification[value="translation"] .messageImage { list-style-image: url(chrome://browser/skin/translation-16.png); -moz-image-region: rect(0, 32px, 16px, 16px); } @media (min-resolution: 1.25dppx) { notification[value="translation"] .messageImage { list-style-image: url(chrome://browser/skin/translation-16@2x.png); -moz-image-region: rect(0, 64px, 32px, 32px); } } notification[value="translation"][state="translating"] .messageImage { list-style-image: url(chrome://browser/skin/translating-16.png); -moz-image-region: auto; } @media (min-resolution: 1.25dppx) { notification[value="translation"][state="translating"] .messageImage { list-style-image: url(chrome://browser/skin/translating-16@2x.png); } } notification[value="translation"] hbox[anonid="details"] { overflow: hidden; } notification[value="translation"] button, notification[value="translation"] menulist { -moz-appearance: none; border-width: 1px; -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-radius: 2px; min-width: 0; box-shadow: 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(255, 255, 255, 0.5) inset; } notification[value="translation"] menulist > .menulist-dropmarker { -moz-appearance: toolbarbutton-dropdown; border: none; background-color: transparent; margin: auto; padding: 5px 0; } .translation-menupopup arrowscrollbox { padding-bottom: 0; } .translation-attribution { cursor: pointer; -moz-box-align: end; font-size: small; } .translation-attribution > label { margin-bottom: 0; } .translation-attribution > image { width: 70px; } .translation-welcome-panel { width: 305px; } .translation-welcome-logo { height: 32px; width: 32px; list-style-image: url(chrome://browser/skin/translation-16@2x.png); -moz-image-region: rect(0, 64px, 32px, 32px); } .translation-welcome-content { margin-inline-start: 16px; } .translation-welcome-headline { font-size: larger; font-weight: bold; } .translation-welcome-body { padding: 1em 0; margin: 0 0; } notification[value="translation"] { min-height: 40px; } notification[value="translation"], notification[value="translation"] button, notification[value="translation"] menulist { min-height: 30px; color: #5A5959; } notification[value="translation"] { background-color: #F2F1F0; } notification[value="translation"] button, notification[value="translation"] menulist { padding-inline-end: 1ch; } notification[value="translation"] menulist { border: 1px solid #C1C1C1; background-color: #FFF; } notification[value="translation"] button { border: 1px solid #C1C1C1; background-color: #F2F1F0; } notification[value="translation"] button, notification[value="translation"] menulist, notification[value="translation"] menulist > .menulist-label-box { margin-inline-start: 1ch; margin-inline-end: 1ch; } notification[value="translation"] button:hover, notification[value="translation"] button:active, notification[value="translation"] menulist:hover, notification[value="translation"] menulist:active { background-color: #E2E1E0; } notification[value="translation"] button[anonid="translate"] { color: #FFF; background-image: linear-gradient(#9FB938, #8DA726); box-shadow: none; border: 1px solid #829C1C; } notification[value="translation"] button[anonid="translate"]:hover, notification[value="translation"] button[anonid="translate"]:active { background-image: linear-gradient(#8DA726, #8DA726); } notification[value="translation"] button > .button-box, notification[value="translation"] button[type="menu"] > .button-box > .button-menu-dropmarker { padding: 0; margin-inline-start: 3ch; } notification[value="translation"] button:not([type="menu"]) > .button-box { margin-inline-end: 3ch; } notification[value="translation"] menulist > .menulist-dropmarker { display: block; } /* AutoComplete */ #PopupAutoComplete > richlistbox > richlistitem { height: 20px; min-height: 20px; border: 0; border-radius: 0; padding: 0px 1px 0px 1px; } #PopupAutoComplete > richlistbox > richlistitem > .ac-site-icon { margin-inline-start: 4px; margin-inline-end: 0; } #PopupAutoComplete > richlistbox > richlistitem > .ac-title { font: icon; margin-inline-start: 4px; } #PopupAutoComplete > richlistbox { padding: 0; } /* Login form autocompletion */ #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon { display: initial; list-style-image: url(chrome://browser/skin/notification-icons.svg#login); } #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon[selected] { list-style-image: url(chrome://browser/skin/notification-icons.svg#login-highlighted); } /* Insecure field warning */ #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] { background-color: var(--arrowpanel-dimmed); border-bottom: 1px solid var(--panel-separator-color); padding-bottom: 4px; padding-top: 4px; } #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] { background-color: var(--arrowpanel-dimmed-further); color: -moz-DialogText; } #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title { color: GrayText; font-size: 1em; } #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] > .ac-title { color: inherit; } #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-site-icon { list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon); } #PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] { border-top: 1px solid ThreeDShadow; } #treecolAutoCompleteImage { max-width: 36px; } .autocomplete-richlistbox { padding: 4px; } .autocomplete-richlistitem { height: 30px; min-height: 30px; font: message-box; border-radius: 2px; border: 1px solid transparent; } .ac-title { font-size: 1.05em; } .ac-separator, .ac-url, .ac-action, .ac-tags { font-size: 0.9em; } html|span.ac-tag { background-color: MenuText; color: Menu; border-radius: 2px; border: 1px solid transparent; padding: 0 1px; } .ac-separator:not([selected=true]), .ac-url:not([selected=true]), .ac-action:not([selected=true]) { color: -moz-nativehyperlinktext; } .ac-tags-text[selected] > html|span.ac-tag { background-color: HighlightText; color: Highlight; } html|span.ac-emphasize-text-title, html|span.ac-emphasize-text-tag, html|span.ac-emphasize-text-url { font-weight: 600; } .ac-type-icon[type=bookmark] { list-style-image: url("chrome://browser/skin/urlbar-star.svg#star"); } .ac-type-icon[type=bookmark][selected][current] { list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted"); } .ac-type-icon[type=keyword], .ac-site-icon[type=searchengine] { list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); } .ac-type-icon[type=keyword][selected], .ac-site-icon[type=searchengine][selected] { list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted); } .ac-type-icon[type=switchtab], .ac-type-icon[type=remotetab] { list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab"); } .ac-type-icon[type=switchtab][selected], .ac-type-icon[type=remotetab][selected] { list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted"); } .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) { color: GrayText; } .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment), .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment) { color: GrayText; font-size: smaller; } .autocomplete-treebody::-moz-tree-cell(suggesthint) { border-top: 1px solid GrayText; } /* Combined go/reload/stop button in location bar */ #urlbar-go-button, #urlbar-reload-button, #urlbar-stop-button { -moz-appearance: none; list-style-image: url("chrome://browser/skin/reload-stop-go.png"); padding: 0 7px 0 10px; margin-inline-start: 5px; border-inline-start: 1px solid rgba(207, 214, 230, 0.5); } #urlbar-reload-button { -moz-image-region: rect(0, 14px, 14px, 0); } #urlbar-reload-button:not([disabled]):hover { -moz-image-region: rect(14px, 14px, 28px, 0); } #urlbar-reload-button:not([disabled]):hover:active { -moz-image-region: rect(28px, 14px, 42px, 0); } #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { transform: scaleX(-1); } #urlbar-go-button { -moz-image-region: rect(0, 42px, 14px, 28px); } #urlbar-go-button:hover { -moz-image-region: rect(14px, 42px, 28px, 28px); } #urlbar-go-button:hover:active { -moz-image-region: rect(28px, 42px, 42px, 28px); } #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { transform: scaleX(-1); } #urlbar-stop-button { -moz-image-region: rect(0, 28px, 14px, 14px); } #urlbar-stop-button:not([disabled]):hover { -moz-image-region: rect(14px, 28px, 28px, 14px); } #urlbar-stop-button:hover:active { -moz-image-region: rect(28px, 28px, 42px, 14px); } @media (min-resolution: 1.1dppx) { #urlbar-go-button, #urlbar-reload-button, #urlbar-stop-button { list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png"); } #urlbar-go-button > .toolbarbutton-icon, #urlbar-reload-button > .toolbarbutton-icon, #urlbar-stop-button > .toolbarbutton-icon { width: 14px; } #urlbar-go-button { -moz-image-region: rect(0, 84px, 28px, 56px); } #urlbar-go-button:hover { -moz-image-region: rect(28px, 84px, 56px, 56px); } #urlbar-go-button:hover:active { -moz-image-region: rect(56px, 84px, 84px, 56px); } #urlbar-reload-button { -moz-image-region: rect(0, 28px, 28px, 0); } #urlbar-reload-button:not([disabled]):hover { -moz-image-region: rect(28px, 28px, 56px, 0); } #urlbar-reload-button:not([disabled]):hover:active { -moz-image-region: rect(56px, 28px, 84px, 0); } #urlbar-stop-button { -moz-image-region: rect(0, 56px, 28px, 28px); } #urlbar-stop-button:not([disabled]):hover { -moz-image-region: rect(28px, 56px, 56px, 28px); } #urlbar-stop-button:hover:active { -moz-image-region: rect(56px, 56px, 84px, 28px); } } /* Popup blocker button */ #page-report-button { list-style-image: url("chrome://browser/skin/Info.png"); } /* Reader mode button */ #reader-mode-button { list-style-image: url("chrome://browser/skin/readerMode.svg"); -moz-image-region: rect(0, 16px, 16px, 0); } #reader-mode-button:hover, #reader-mode-button[readeractive]:hover { -moz-image-region: rect(0, 32px, 16px, 16px); } #reader-mode-button:hover:active, #reader-mode-button[readeractive] { -moz-image-region: rect(0, 48px, 16px, 32px); } /* social share panel */ #manage-share-providers { list-style-image: url("chrome://browser/skin/Toolbar.png"); -moz-image-region: rect(0, 468px, 18px, 450px); } #manage-share-providers > .toolbarbutton-icon { min-height: 18px; min-width: 18px; } .social-panel > .panel-arrowcontainer > .panel-arrowcontent { padding: 0; } /* fixup corners for share panel */ .social-panel > .social-panel-frame { border-radius: inherit; } .social-share-frame { border-top: 1px solid #f8f8f8; width: 756px; height: 150px; } #share-container { min-width: 756px; background-color: white; background-repeat: no-repeat; background-position: center center; } #share-container[loading] { background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png); } #share-container > browser { transition: opacity 150ms ease-in-out; opacity: 1; } #share-container[loading] > browser { opacity: 0; } .social-share-toolbar { border-bottom: 1px solid #dedede; padding: 2px; } #social-share-provider-buttons { padding: 0; margin: 0; } .share-provider-button { padding: 5px; margin: 2px; } .share-provider-button > .toolbarbutton-text { display: none; } .share-provider-button > .toolbarbutton-icon { width: 16px; min-height: 16px; max-height: 16px; } /* bookmarks menu-button */ #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker { -moz-appearance: none !important; -moz-box-align: center; } #bookmarks-menu-button[disabled][cui-areatype="toolbar"] > .toolbarbutton-icon, #bookmarks-menu-button[disabled][cui-areatype="toolbar"] > .toolbarbutton-menu-dropmarker, #bookmarks-menu-button[disabled][cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker, #bookmarks-menu-button[disabled][cui-areatype="toolbar"] > .toolbarbutton-menubutton-button > .toolbarbutton-icon, #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled] > .toolbarbutton-icon { opacity: .4; } #BMB_bookmarksPopup[side="top"], #BMB_bookmarksPopup[side="bottom"] { margin-left: -16px; margin-right: -16px; } #BMB_bookmarksPopup[side="left"], #BMB_bookmarksPopup[side="right"] { margin-top: -16px; margin-bottom: -16px; } #nav-bar .toolbarbutton-1 > menupopup[side="top"].cui-widget-panel, #nav-bar .toolbarbutton-1 > menupopup[side="bottom"].cui-widget-panel { margin-top: -4px; } /* Bookmarking panel */ #editBookmarkPanelStarIcon { list-style-image: url("chrome://browser/skin/places/starred48.png"); width: 48px; height: 48px; } #editBookmarkPanelStarIcon[unstarred] { list-style-image: url("chrome://browser/skin/places/unstarred48.png"); } #editBookmarkPanelTitle { font-size: 130%; } #editBookmarkPanelHeader, #editBookmarkPanelContent { margin-bottom: .5em; } /* Implements editBookmarkPanel resizing on folderTree un-collapse. */ #editBMPanel_folderTree { min-width: 27em; } /* Content area */ #sidebar { background-color: Window; } #sidebar-header > .close-icon:not(:hover):-moz-lwtheme-brighttext { background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 80, 16, 64); } /* Findbar */ .browserContainer > findbar { background-color: #F5F6F7; color: #5c616c; border-top: 1px solid; -moz-border-top-colors: #dcdfe3; text-shadow: none; } .browserContainer > findbar .findbar-textbox { -moz-appearance: none; color: #5c616c; border: 1px solid #cfd6e6; background-color: #ffffff; box-shadow: none; margin: 0; padding: 5px; width: 14em; } .browserContainer > findbar .findbar-textbox[focused="true"] { border-color: #5294E2; } .browserContainer > findbar .findbar-textbox[focused="true"] + .findbar-find-previous { border-left-color: #5294E2; } .browserContainer > findbar .findbar-textbox[status="notfound"] { background-color: #FC4138; border-color: #fb1b10; color: #ffffff; box-shadow: none; } .browserContainer > findbar .findbar-textbox[flash="true"] { background-color: #F27835; border-color: #ef5f0f; color: #ffffff; box-shadow: none; } .browserContainer > findbar .findbar-textbox:-moz-locale-dir(ltr) { border-radius: 3px 0 0 3px; border-right-width: 0; } .browserContainer > findbar .findbar-textbox:-moz-locale-dir(rtl) { border-radius: 0 3px 3px 0; border-left-width: 0; } .browserContainer > findbar .findbar-textbox.minimal { border-width: 1px; border-radius: 3px; } .browserContainer > findbar .findbar-find-previous, .browserContainer > findbar .findbar-find-next { background: #fbfbfc; border: 1px solid #cfd6e6; box-shadow: none; } .browserContainer > findbar .findbar-find-previous { border-right-width: 0; } .browserContainer > findbar .findbar-find-previous:focus, .browserContainer > findbar .findbar-find-next:focus { outline: 1px dashed rgba(92, 97, 108, 0.3); outline-offset: -3px; box-shadow: none; } .browserContainer > findbar .findbar-find-previous:not([disabled]):active, .browserContainer > findbar .findbar-find-next:not([disabled]):active { outline-color: rgba(255, 255, 255, 0.3); background: #5294E2; border-color: #5294E2; box-shadow: none; } /* Tabstrip */ :root { --tab-toolbar-navbar-overlap: 1px; --navbar-tab-toolbar-highlight-overlap: 1px; --tab-min-height: 31px; } #TabsToolbar { --tab-stroke-background-size: auto 100%; } /* image preloading hack */ #tabbrowser-tabs::before { /* Because of bug 853415, we need to ordinal this to the first position: */ -moz-box-ordinal-group: 0; content: ''; display: block; } #tabbrowser-tabs { min-height: var(--tab-min-height); } .tabbrowser-tab, .tabs-newtab-button { -moz-appearance: none; background-color: transparent; border-radius: 0; border-width: 0; margin: 0; padding: 0; } .tabbrowser-tab { -moz-box-align: stretch; } .tabbrowser-tab[selected="true"], .tabbrowser-tab[selected="true"]:hover, .tabbrowser-tab:not([selected="true"]):hover { color: #5c616c; } /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */ .tabbrowser-tab[visuallyselected=true] { position: relative; z-index: 2; } .tab-background-middle { -moz-box-flex: 1; background-clip: padding-box; border-left: 15px solid transparent; border-right: 15px solid transparent; margin: 0 -15px; } .tab-content { padding-inline-end: 9px; padding-inline-start: 9px; } .tab-content[pinned] { padding-inline-end: 3px; } .tab-throbber, .tab-icon-image, .tab-sharing-icon-overlay, .tab-icon-sound, .tab-close-button { margin-top: 1px; } .tab-throbber, .tab-sharing-icon-overlay, .tab-icon-image { height: 16px; width: 16px; margin-inline-end: 6px; } .tab-icon-image { list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); } .tab-icon-image[sharing]:not([selected]), .tab-sharing-icon-overlay { animation: 3s linear tab-sharing-icon-pulse infinite; } /* This should remain identical to identity-box-sharing-icon-pulse in identity-block.inc.css */ @keyframes tab-sharing-icon-pulse { 0%, 16.66%, 83.33%, 100% { opacity: 0; } 33.33%, 66.66% { opacity: 1; } } .tab-icon-image[sharing]:not([selected]) { animation-delay: -1.5s; } .tab-sharing-icon-overlay { /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */ margin-inline-start: -22px; position: relative; } .tab-sharing-icon-overlay[sharing="camera"] { list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing"); } .tab-sharing-icon-overlay[sharing="microphone"] { list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing"); } .tab-sharing-icon-overlay[sharing="screen"] { list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing"); } .tab-icon-overlay { width: 16px; height: 16px; margin-top: -12px; margin-inline-start: -16px; position: relative; } .tab-icon-overlay[crashed] { list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg"); } .tab-icon-overlay[soundplaying], .tab-icon-overlay[muted]:not([crashed]), .tab-icon-overlay[blocked]:not([crashed]) { border-radius: 8px; } .tab-icon-overlay[soundplaying]:hover, .tab-icon-overlay[muted]:not([crashed]):hover, .tab-icon-overlay[blocked]:not([crashed]):hover { background-color: white; } .tab-icon-overlay[soundplaying] { list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio"); } .tab-icon-overlay[muted]:not([crashed]) { list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted"); } .tab-icon-overlay[blocked]:not([crashed]) { list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-blocked"); } .tab-throbber[busy] { list-style-image: url("chrome://browser/skin/custom_images/connecting.png"); } .tab-throbber[progress] { list-style-image: url("chrome://browser/skin/custom_images/loading.png"); } .tab-label { margin-inline-end: 0; margin-inline-start: 0; } .tab-close-button { margin-inline-start: 4px; margin-inline-end: -2px; padding: 0; } .tab-icon-sound { margin-inline-start: 4px; width: 16px; height: 16px; padding: 0; } .tab-icon-sound[soundplaying], .tab-icon-sound[muted], .tab-icon-sound[blocked] { list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio); filter: url(chrome://global/skin/filters.svg#fill); fill: currentColor; } .tab-icon-sound[muted] { list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted); } .tab-icon-sound[blocked] { list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked); } .tab-icon-sound:-moz-lwtheme-darktext[soundplaying], .tab-icon-sound:-moz-lwtheme-darktext[muted], .tab-icon-sound:-moz-lwtheme-darktext[blocked] { filter: url(chrome://global/skin/filters.svg#fill) drop-shadow(1px 1px 1px white); } .tab-icon-sound:-moz-lwtheme-brighttext[soundplaying], .tab-icon-sound:-moz-lwtheme-brighttext[muted], .tab-icon-sound:-moz-lwtheme-brighttext[blocked] { filter: url(chrome://global/skin/filters.svg#fill) drop-shadow(1px 1px 1px black); } .tab-icon-sound[soundplaying]:not(:hover), .tab-icon-sound[muted]:not(:hover), .tab-icon-sound[blocked]:not(:hover) { opacity: .8; } .tab-icon-sound[soundplaying-scheduledremoval]:not([muted]):not(:hover), .tab-icon-overlay[soundplaying-scheduledremoval]:not([muted]):not(:hover) { transition: opacity 0.3s linear var(--soundplaying-removal-delay); opacity: 0; } .tab-background, .tabs-newtab-button { /* overlap the tab curves */ margin-inline-end: -14px; margin-inline-start: -14px; } .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox { padding-inline-end: 15px; padding-inline-start: 5px; } /* Tab Overflow */ .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]), .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) { background-image: url(chrome://browser/skin/custom_images/dark/tabs/tab-overflow-indicator.png); background-size: 100% 100%; width: 14px; margin-bottom: var(--navbar-tab-toolbar-highlight-overlap); pointer-events: none; position: relative; z-index: 3; /* the selected tab's z-index + 1 */ } .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl), .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) { transform: scaleX(-1); } .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) { margin-inline-start: -2px; margin-inline-end: -12px; } .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) { margin-inline-start: -12px; margin-inline-end: -2px; } .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed], .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] { opacity: 0; } .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator, .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator { transition: opacity 150ms ease; } .tab-background-start[selected=true]::after, .tab-background-start[selected=true]::before, .tab-background-start, .tab-background-end, .tab-background-end[selected=true]::after, .tab-background-end[selected=true]::before { min-height: var(--tab-min-height); width: 30px; } .tabbrowser-tab:not([visuallyselected=true]), .tabbrowser-tab:-moz-lwtheme { color: inherit; } .tabbrowser-tab:not([selected="true"]) { color: rgba(207, 218, 231, 0.6); } .tabbrowser-tab:not([selected="true"]):hover { color: rgba(207, 218, 231, 0.8); } /* Selected tab */ /* Tab background pseudo-elements which are positioned above .tab-background-start/end: - ::before - provides the fill of the tab curve and is clipped to the tab shape. This is where pointer events go for the curve. - ::after - provides the border/stroke of the tab curve and is overlayed above ::before. Pointer events go through to ::before to get the proper shape. */ .tab-background-start[selected=true]::after, .tab-background-end[selected=true]::after { /* position ::after on top of its parent */ margin-inline-start: -30px; background-size: 100% 100%; content: ""; display: -moz-box; position: relative; } .tab-background-start[selected=true]::before, .tab-background-end[selected=true]::before { /* all ::before pseudo elements */ content: ""; display: -moz-box; } .tab-background-start[selected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, .tab-background-end[selected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { background-image: url(chrome://browser/skin/custom_images/darker/tabs/tab-start.svg); background-size: 100% 100%; } .tab-background-end[selected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, .tab-background-start[selected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { background-image: url(chrome://browser/skin/custom_images/darker/tabs/tab-end.svg); background-size: 100% 100%; } /* For lightweight themes, clip the header image on start, middle, and end. */ .tab-background-start[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, .tab-background-end[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-start); } .tab-background-end[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, .tab-background-start[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-end); } .tab-background-middle[selected=true] { background-clip: padding-box, padding-box, content-box; background-color: transparent; background-image: url(chrome://browser/skin/custom_images/darker/tabs/tab-middle.svg); background-repeat: repeat-x; background-size: var(--tab-stroke-background-size); /* The padding-top combined with background-clip: content-box (the bottom-most) ensure the background-color doesn't extend above the top border. */ padding-top: 2px; } /* Selected tab lightweight theme styles. See browser-lightweightTheme.css for information about run-time changes to LWT styles. */ .tab-background-middle[selected=true]:-moz-lwtheme { background-color: transparent; background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png), linear-gradient(transparent 2px, rgba(255, 255, 255, 0.4) 2px, rgba(255, 255, 255, 0.4)); /*, lwtHeader;*/ /* Don't stretch the LWT header images */ background-size: var(--tab-stroke-background-size), auto 100%, auto auto; } /* These LWT styles are normally overridden by browser-lightweightTheme.css */ .tab-background-start[selected=true]:-moz-lwtheme::before, .tab-background-end[selected=true]:-moz-lwtheme::before { background-image: linear-gradient(transparent 2px, rgba(255, 255, 255, 0.4) 2px, rgba(255, 255, 255, 0.4)); } .tab-background-start[selected=true]:-moz-lwtheme::before, .tab-background-end[selected=true]:-moz-lwtheme::before, .tab-background-middle[selected=true]:-moz-lwtheme { background-color: transparent; } /* End selected tab */ /* new tab button border and gradient on hover */ .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]), .tabs-newtab-button:hover { background-image: url(chrome://browser/skin/custom_images/darker/tabs/tab-start-hover.svg), url(chrome://browser/skin/custom_images/darker/tabs/tab-middle-hover.svg), url(chrome://browser/skin/custom_images/darker/tabs/tab-end-hover.svg); background-position: left bottom, 30px bottom, right bottom; background-repeat: no-repeat; background-size: 30px 100%, calc(100% - (2 * 30px)) 100%, 30px 100%; } /* Tab pointer-events */ .tabbrowser-tab { pointer-events: none; } .tab-background-middle, .tabs-newtab-button, .tab-icon-overlay[soundplaying], .tab-icon-overlay[muted]:not([crashed]), .tab-icon-overlay[blocked]:not([crashed]), .tab-icon-sound, .tab-close-button { pointer-events: auto; } /* Pinned tabs */ /* Pinned tab separators need position: absolute when positioned (during overflow). */ #tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]::before { height: 100%; position: absolute; } .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { background-image: radial-gradient(farthest-corner at center bottom, white 3%, rgba(186, 221, 251, 0.75) 20%, rgba(127, 179, 255, 0.25) 40%, transparent 70%); background-position: center bottom var(--tab-toolbar-navbar-overlap); background-repeat: no-repeat; background-size: 85% 100%; } .tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned]):not([selected="true"]) { background-position: left bottom var(--tab-toolbar-navbar-overlap); background-size: 34px 100%; } .tab-label[attention]:not([selected="true"]) { font-weight: bold; } /* Tab separators */ /* Also show separators beside the selected tab when dragging it. */ /* New tab button */ .tabs-newtab-button { width: calc(36px + 30px); } /* All tabs menupopup */ .alltabs-item[tabIsVisible] { /* box-shadow instead of background-color to work around native styling */ box-shadow: inset -5px 0 ThreeDShadow; } .alltabs-endimage[soundplaying], .alltabs-endimage[muted], .alltabs-endimage[blocked] { list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio); filter: url(chrome://global/skin/filters.svg#fill); fill: currentColor; } .alltabs-endimage[muted] { list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted); } .alltabs-endimage[blocked] { list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked); } #tabbrowser-tabs { /* override the global style to allow the selected tab to be above the nav-bar */ z-index: auto; } #TabsToolbar { min-height: 0; padding: 0; margin-bottom: calc(-1 * var(--tab-toolbar-navbar-overlap)); } #TabsToolbar:not(:-moz-lwtheme) { -moz-appearance: none; color: rgba(207, 218, 231, 0.8); background: #2f343f; } #toolbar-menubar:not([autohide="true"]):not(:-moz-lwtheme):-moz-system-metric(menubar-drag), #TabsToolbar:not(:-moz-lwtheme):-moz-system-metric(menubar-drag) { -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-drag"); } .tabbrowser-tab:focus > .tab-stack > .tab-content { outline: 1px dotted; outline-offset: -6px; } #context_reloadTab { list-style-image: url("moz-icon://stock/gtk-refresh?size=menu"); } #context_closeOtherTabs { list-style-image: url("moz-icon://stock/gtk-clear?size=menu"); } #context_closeOtherTabs[disabled] { list-style-image: url("moz-icon://stock/gtk-clear?size=menu&state=disabled"); } #context_undoCloseTab { list-style-image: url("moz-icon://stock/gtk-undelete?size=menu"); } #context_closeTab { list-style-image: url("moz-icon://stock/gtk-close?size=menu"); } /* Tab drag and drop */ .tab-drop-indicator { list-style-image: url(chrome://browser/skin/tabbrowser/tabDragIndicator.png); margin-bottom: -9px; z-index: 3; } /* Tab close button */ .close-icon { background-image: url("chrome://browser/skin/custom_images/light/tabs/tab-close.svg") !important; } .close-icon:hover { background-image: url("chrome://browser/skin/custom_images/light/tabs/tab-close-hover.svg") !important; } .close-icon:active:hover { background-image: url("chrome://browser/skin/custom_images/light/tabs/tab-close-active.svg") !important; } .tabbrowser-tab:not([selected="true"]) .close-icon { background-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-close-inactive.svg") !important; } .tabbrowser-tab:not([selected="true"]) .close-icon:hover { background-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-close-hover.svg") !important; } .tabbrowser-tab:not([selected="true"]) .close-icon:active { background-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-close-active.svg") !important; } /* Tabstrip new tab button */ .tabs-newtab-button, #TabsToolbar > #new-tab-button, #TabsToolbar > toolbarpaletteitem > #new-tab-button { list-style-image: url("moz-icon://stock/gtk-add?size=menu"); -moz-image-region: auto; } .tabs-newtab-button > .toolbarbutton-icon, #new-tab-button > .toolbarbutton-icon { -moz-appearance: none; list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/new-tab.png"); -moz-image-region: auto; } /* Tabbrowser arrowscrollbox arrows */ .tabbrowser-arrowscrollbox > .scrollbutton-up > .toolbarbutton-icon, .tabbrowser-arrowscrollbox > .scrollbutton-down > .toolbarbutton-icon { -moz-appearance: none; } .tabbrowser-arrowscrollbox > .scrollbutton-up, .tabbrowser-arrowscrollbox > .scrollbutton-down { -moz-appearance: none; list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-arrow-left.svg"); margin: 0 0 var(--tab-toolbar-navbar-overlap); } .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled], .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] { opacity: .4; } .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl), .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) { transform: scaleX(-1); } .tabbrowser-arrowscrollbox > .scrollbutton-down { transition: 1s background-color ease-out; } .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] { background-color: Highlight; transition: none; } #TabsToolbar .toolbarbutton-1 { margin-bottom: var(--tab-toolbar-navbar-overlap); } #alltabs-button { list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/alltabs.svg"); } #alltabs-button > .toolbarbutton-icon { padding: 9px 6px 6px; } #alltabs-button > .toolbarbutton-menu-dropmarker { display: none; } /* All tabs menupopup */ .alltabs-item > .menu-iconic-left > .menu-iconic-icon { list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); } .alltabs-item[selected="true"] { font-weight: bold; } .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon { list-style-image: url("chrome://global/skin/icons/loading.png"); } /* Sidebar */ #sidebar-throbber[loading="true"] { list-style-image: url("chrome://global/skin/icons/loading.png"); margin-inline-end: 4px; } toolbarbutton.chevron { list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important; } toolbar[brighttext] toolbarbutton.chevron { list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important; } toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon { transform: scaleX(-1); } toolbarbutton.chevron > .toolbarbutton-text, toolbarbutton.chevron > .toolbarbutton-menu-dropmarker { display: none; } toolbarbutton.chevron > .toolbarbutton-icon { margin: 0; } /* Status panel */ .statuspanel-label { margin: 0; padding: 2px 4px; background: #5294E2; border: 1px none #5294E2; border-top-style: solid; color: #ffffff; text-shadow: none; } .statuspanel-label:-moz-locale-dir(ltr):not([mirror]), .statuspanel-label:-moz-locale-dir(rtl)[mirror] { border-right-style: solid; border-top-right-radius: .3em; margin-right: 1em; } .statuspanel-label:-moz-locale-dir(rtl):not([mirror]), .statuspanel-label:-moz-locale-dir(ltr)[mirror] { border-left-style: solid; border-top-left-radius: .3em; margin-left: 1em; } html|*.pointerlockfswarning { align-items: center; color: #BAC3CF; background: rgba(53, 57, 69, 0.95); border: 1px solid rgba(31, 33, 40, 0.95); box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.2); border-radius: 3px; padding: 24px 16px; font: message-box; } html|*.pointerlockfswarning::before { margin: 0; width: 24px; height: 24px; } html|*.pointerlockfswarning[data-identity="verifiedIdentity"]::before, html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before { content: url("chrome://browser/skin/fullscreen/secure.svg"); } html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before { content: url("chrome://browser/skin/fullscreen/insecure.svg"); } html|*.pointerlockfswarning-domain-text, html|*.pointerlockfswarning-generic-text { font-size: 21px; font-weight: lighter; color: #fafafa; margin: 0 16px; } html|*.pointerlockfswarning-domain { font-weight: bold; margin: 0; } html|*.pointerlockfswarning-exit-button { padding: 5px 30px; font: message-box; font-size: 14px; font-weight: lighter; margin: 0; box-sizing: content-box; } /* Ctrl-Tab */ #ctrlTab-panel { -moz-appearance: none; background: rgba(84, 84, 84, 0.85); color: white; border-style: none; padding: 20px 10px 10px; font-weight: bold; text-shadow: 0 0 1px #1f1f1f, 0 0 2px #1f1f1f; } .ctrlTab-favicon[src] { background-color: white; width: 20px; height: 20px; padding: 2px; } .ctrlTab-preview-inner > .tabPreview-canvas { box-shadow: 1px 1px 2px #1f1f1f; } .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas { margin-bottom: 2px; } .ctrlTab-preview-inner { padding: 8px; border: 2px solid transparent; border-radius: .5em; } .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner { margin: -10px -10px 0; } #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner { background-color: rgba(255, 255, 255, 0.2); } .ctrlTab-preview:focus > * > .ctrlTab-preview-inner { color: white; background-color: rgba(0, 0, 0, 0.6); text-shadow: none; border-color: white; } #ctrlTab-showAll { margin-top: .5em; } /* Responsive Mode */ .browserContainer[responsivemode] { background-color: #222; padding: 0 20px 20px 20px; } .browserStack[responsivemode] { box-shadow: 0 0 7px black; } .devtools-responsiveui-toolbar { -moz-appearance: none; background: transparent; /* text color is textColor from dark theme, since no theme is applied to * the responsive toolbar. */ color: #cdd9e4; margin: 10px 0; padding: 0; box-shadow: none; border-bottom-width: 0; } .devtools-responsiveui-textinput { -moz-appearance: none; background: #333; color: #fff; border: 1px solid #111; border-radius: 2px; padding: 0 5px; width: 200px; margin: 0; } .devtools-responsiveui-textinput[attention] { border-color: #38ace6; background: rgba(56, 172, 230, 0.4); } .devtools-responsiveui-menulist, .devtools-responsiveui-toolbarbutton { -moz-appearance: none; -moz-box-align: center; min-width: 32px; min-height: 22px; text-shadow: 0 -1px 0 rgba(12, 13, 14, 0.45); border: 1px solid rgba(12, 13, 14, 0.45); border-radius: 0; background: linear-gradient(rgba(138, 145, 153, 0.35), rgba(138, 145, 153, 0.1)) padding-box; box-shadow: 0 1px 0 rgba(184, 194, 204, 0.15) inset, 0 0 0 1px rgba(184, 194, 204, 0.15) inset, 0 1px 0 rgba(184, 194, 204, 0.15); margin: 0 3px; color: inherit; } .devtools-responsiveui-menulist .menulist-editable-box { -moz-appearance: none; background-color: transparent; } .devtools-responsiveui-menulist html|*.menulist-editable-input { -moz-appearance: none; color: inherit; text-align: center; } .devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection { background: rgba(138, 145, 153, 0.35); } .devtools-responsiveui-toolbarbutton > .toolbarbutton-icon { width: 16px; height: 16px; } .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button { -moz-box-orient: horizontal; } .devtools-responsiveui-menulist:-moz-focusring, .devtools-responsiveui-toolbarbutton:-moz-focusring { outline: 1px dotted rgba(205, 217, 228, 0.7); outline-offset: -4px; } .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text { display: none; } .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active { border-color: rgba(12, 13, 14, 0.6); background: linear-gradient(rgba(24, 25, 27, 0.3), rgba(138, 145, 153, 0.15) 65%, rgba(138, 145, 153, 0.3)); box-shadow: 0 0 3px rgba(12, 13, 14, 0.25) inset, 0 1px 3px rgba(12, 13, 14, 0.25) inset, 0 1px 0 rgba(184, 194, 204, 0.15); } .devtools-responsiveui-menulist[open=true], .devtools-responsiveui-toolbarbutton[open=true], .devtools-responsiveui-toolbarbutton[checked=true] { border-color: rgba(12, 13, 14, 0.6) !important; background: linear-gradient(rgba(24, 25, 27, 0.6), rgba(41, 46, 51, 0.45) 75%, rgba(68, 76, 85, 0.4)); box-shadow: 0 1px 3px rgba(12, 13, 14, 0.25) inset, 0 1px 3px rgba(12, 13, 14, 0.25) inset, 0 1px 0 rgba(184, 194, 204, 0.15); } .devtools-responsiveui-toolbarbutton[checked=true] { color: #33a0ff; } .devtools-responsiveui-toolbarbutton[checked=true]:hover { background-color: transparent !important; } .devtools-responsiveui-toolbarbutton[checked=true]:hover:active { background-color: rgba(12, 13, 14, 0.2) !important; } .devtools-responsiveui-menulist > .menulist-label-box { text-align: center; } .devtools-responsiveui-menulist > .menulist-dropmarker { -moz-appearance: none; display: -moz-box; background-color: transparent; list-style-image: url("chrome://devtools/skin/images/dropmarker.svg"); -moz-box-align: center; border-width: 0; min-width: 16px; } .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button { -moz-appearance: none; color: inherit; border-width: 0; border-inline-end: 1px solid rgba(12, 13, 14, 0.45); box-shadow: -1px 0 0 rgba(184, 194, 204, 0.15) inset, 1px 0 0 rgba(184, 194, 204, 0.15); } .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button { box-shadow: 1px 0 0 rgba(184, 194, 204, 0.15) inset, -1px 0 0 rgba(184, 194, 204, 0.15); } .devtools-responsiveui-toolbarbutton[type=menu-button] { padding: 0 1px; -moz-box-align: stretch; } .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker, .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker { -moz-appearance: none !important; list-style-image: url("chrome://devtools/skin/images/dropmarker.svg"); -moz-box-align: center; padding: 0 3px; } .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child, .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child { margin-left: 0; } .devtools-responsiveui-close { list-style-image: url("chrome://devtools/skin/images/close.svg"); } .devtools-responsiveui-close > image { filter: invert(1); } .devtools-responsiveui-rotate { list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-rotate.png"); } @media (min-resolution: 1.1dppx) { .devtools-responsiveui-rotate { list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-rotate@2x.png"); } } .devtools-responsiveui-touch { list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-touch.png"); -moz-image-region: rect(0px, 16px, 16px, 0px); } .devtools-responsiveui-touch[checked] { -moz-image-region: rect(0px, 32px, 16px, 16px); } @media (min-resolution: 1.1dppx) { .devtools-responsiveui-touch { list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-touch@2x.png"); -moz-image-region: rect(0px, 32px, 32px, 0px); } .devtools-responsiveui-touch[checked] { -moz-image-region: rect(0px, 64px, 32px, 32px); } } .devtools-responsiveui-screenshot { list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-screenshot.png"); } @media (min-resolution: 1.1dppx) { .devtools-responsiveui-screenshot { list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-screenshot@2x.png"); } } .devtools-responsiveui-resizebarV { width: 7px; height: 24px; cursor: ew-resize; transform: translate(12px, -12px); background-size: cover; background-image: url("chrome://devtools/skin/images/responsivemode/responsive-vertical-resizer.png"); } .devtools-responsiveui-resizebarH { width: 24px; height: 7px; cursor: ns-resize; transform: translate(-12px, 12px); background-size: cover; background-image: url("chrome://devtools/skin/images/responsivemode/responsive-horizontal-resizer.png"); } .devtools-responsiveui-resizehandle { width: 16px; height: 16px; cursor: se-resize; transform: translate(12px, 12px); background-size: cover; background-image: url("chrome://devtools/skin/images/responsivemode/responsive-se-resizer.png"); } /* FxOS custom mode with additional buttons and phone look'n feel */ /* Hide devtools manual resizer */ .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle, .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH, .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV { display: none; } /* Gives responsive mode a phone look'n feel */ .browserStack[responsivemode].fxos-mode { padding: 60px 15px 0; border-radius: 25px / 20px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid #FFFFFF; border-bottom-width: 0; background-color: #353535; box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset; background-image: linear-gradient(to right, #111 11%, #333 56%); min-width: 320px; } .devtools-responsiveui-hardware-buttons { -moz-appearance: none; padding: 20px; border: 1px solid #FFFFFF; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; border-top-width: 0; box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset; background-image: linear-gradient(to right, #111 11%, #333 56%); } .devtools-responsiveui-home-button { -moz-user-focus: ignore; width: 40px; height: 30px; list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-home.png"); } .devtools-responsiveui-sleep-button { -moz-user-focus: ignore; -moz-appearance: none; /* compensate browserStack top padding */ margin-top: -67px; margin-right: 10px; min-width: 10px; width: 50px; height: 5px; border: 1px solid #444; border-top-right-radius: 12px; border-top-left-radius: 12px; border-bottom-color: transparent; background-image: linear-gradient(to top, #111 11%, #333 56%); } .devtools-responsiveui-sleep-button:hover:active { background-image: linear-gradient(to top, #aaa 11%, #ddd 56%); } .devtools-responsiveui-volume-buttons { margin-left: -29px; } .devtools-responsiveui-volume-up-button, .devtools-responsiveui-volume-down-button { -moz-user-focus: ignore; -moz-appearance: none; border: 1px solid red; min-width: 8px; height: 40px; border: 1px solid #444; border-right-color: transparent; background-image: linear-gradient(to right, #111 11%, #333 56%); } .devtools-responsiveui-volume-up-button:hover:active, .devtools-responsiveui-volume-down-button:hover:active { background-image: linear-gradient(to right, #aaa 11%, #ddd 56%); } .devtools-responsiveui-volume-up-button { border-top-left-radius: 12px; } .devtools-responsiveui-volume-down-button { border-bottom-left-radius: 12px; } @media (min-resolution: 1.1dppx) { .devtools-responsiveui-resizebarV { background-image: url("chrome://devtools/skin/images/responsivemode/responsive-vertical-resizer@2x.png"); } .devtools-responsiveui-resizebarH { background-image: url("chrome://devtools/skin/images/responsivemode/responsive-horizontal-resizer@2x.png"); } .devtools-responsiveui-resizehandle { background-image: url("chrome://devtools/skin/images/responsivemode/responsive-se-resizer@2x.png"); } } /* Developer toolbar */ /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS. We are copy/pasting variables from light-theme and dark-theme, since they aren't loaded in this context (within browser.css). */ #browser-bottombox[devtoolstheme="light"] #developer-toolbar { --gcli-background-color: #fcfcfc; /* --theme-tab-toolbar-background */ --gcli-input-background: #fcfcfc; /* --theme-toolbar-background */ --gcli-input-focused-background: #ffffff; /* --theme-sidebar-background */ --gcli-input-color: #393f4c; /* --theme-body-color */ --gcli-border-color: #dde1e4; /* --theme-splitter-color */ --selection-background: #4c9ed9; /* --theme-selection-background */ --selection-color: #f5f7fa; /* --theme-selection-color */ --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */ --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */ } #browser-bottombox[devtoolstheme="dark"] #developer-toolbar { --gcli-background-color: #272b35; /* --theme-toolbar-background */ --gcli-input-background: #272b35; /* --theme-tab-toolbar-background */ --gcli-input-focused-background: #272b35; /* --theme-tab-toolbar-background */ --gcli-input-color: #b6babf; /* --theme-body-color-alt */ --gcli-border-color: #454d5d; /* --theme-splitter-color */ --selection-background: #5675b9; /* --theme-selection-background */ --selection-color: #f5f7fa; /* --theme-selection-color */ --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme); /* --theme-command-line-image */ --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme-focus); /* --theme-command-line-image-focus */ } #developer-toolbar { -moz-appearance: none; padding: 0; min-height: 32px; background-color: var(--gcli-background-color); border-top: 1px solid var(--gcli-border-color); } #developer-toolbar > toolbarbutton { -moz-appearance: none; border: none; background-color: transparent; margin: 0; padding: 0 10px; width: 32px; } .developer-toolbar-button > image { margin: auto 10px; } #browser-bottombox[devtoolstheme="light"] #developer-toolbar > .developer-toolbar-button:not([checked=true]) > image, #browser-bottombox[devtoolstheme="light"] .gclitoolbar-input-node:not([focused=true])::before { filter: invert(1); } .developer-toolbar-button > .toolbarbutton-icon { width: 16px; height: 16px; } /* The toolkit close button is low contrast in the dark theme so invert it. */ #browser-bottombox[devtoolstheme="dark"] #developer-toolbar > .close-icon:not(:hover) > image { filter: invert(1); } #developer-toolbar-toolbox-button { list-style-image: url("chrome://devtools/skin/images/toggle-tools.png"); -moz-image-region: rect(0px, 16px, 16px, 0px); } #developer-toolbar-toolbox-button > label { display: none; } #developer-toolbar-toolbox-button:hover { -moz-image-region: rect(0px, 32px, 16px, 16px); } #developer-toolbar-toolbox-button:hover:active { -moz-image-region: rect(0px, 48px, 16px, 32px); } #developer-toolbar-toolbox-button[checked=true] { -moz-image-region: rect(0px, 64px, 16px, 48px); } @media (min-resolution: 1.1dppx) { #developer-toolbar-toolbox-button { list-style-image: url("chrome://devtools/skin/images/toggle-tools@2x.png"); -moz-image-region: rect(0px, 32px, 32px, 0px); } #developer-toolbar-toolbox-button:hover { -moz-image-region: rect(0px, 64px, 32px, 32px); } #developer-toolbar-toolbox-button:hover:active { -moz-image-region: rect(0px, 96px, 32px, 64px); } #developer-toolbar-toolbox-button[checked=true] { -moz-image-region: rect(0px, 128px, 32px, 96px); } } /* GCLI */ html|*#gcli-tooltip-frame, html|*#gcli-output-frame { padding: 0; border-width: 0; background-color: transparent; } #gcli-output, #gcli-tooltip { border-width: 0; background-color: transparent; -moz-appearance: none; } .gclitoolbar-input-node, .gclitoolbar-complete-node { margin: 0; -moz-box-align: center; padding-top: 0; padding-bottom: 0; padding-right: 8px; text-shadow: none; box-shadow: none; border-width: 0; background-color: transparent; border-radius: 0; } .gclitoolbar-input-node { -moz-appearance: none; color: var(--gcli-input-color); background-color: var(--gcli-input-background); background-repeat: no-repeat; background-position: 4px center; box-shadow: 1px 0 0 var(--gcli-border-color) inset, -1px 0 0 var(--gcli-border-color) inset; line-height: 32px; outline-style: none; padding: 0; } .gclitoolbar-input-node[focused="true"] { background-color: var(--gcli-input-focused-background); } .gclitoolbar-input-node::before { content: ""; display: inline-block; -moz-box-ordinal-group: 0; width: 16px; height: 16px; margin: 0 2px; background-image: var(--command-line-image); } .gclitoolbar-input-node[focused="true"]::before { background-image: var(--command-line-image-focus); } .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection { background-color: var(--selection-background); color: var(--selection-color); text-shadow: none; } .gclitoolbar-complete-node { padding-left: 21px; background-color: transparent; color: transparent; z-index: 100; pointer-events: none; } .gcli-in-incomplete, .gcli-in-error, .gcli-in-ontab, .gcli-in-todo, .gcli-in-closebrace, .gcli-in-param, .gcli-in-valid { margin: 0; padding: 0; } .gcli-in-incomplete { border-bottom: 2px dotted #999; } .gcli-in-error { border-bottom: 2px dotted #F00; } .gcli-in-ontab { color: #595959; } .gcli-in-todo { color: #2d5986; } .gcli-in-closebrace { color: #cccccc; } #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent { padding: 0px; } .click-to-play-plugins-notification-center-box { border: 1px solid ThreeDShadow; margin: 10px; } .plugin-popupnotification-centeritem:nth-child(odd) { background-color: rgba(0, 0, 0, 0.1); } .center-item-label { margin-inline-start: 6px; margin-bottom: 0; text-overflow: ellipsis; } .center-item-warning-icon { background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.svg"); background-repeat: no-repeat; width: 16px; height: 15px; margin-inline-start: 6px; } .click-to-play-plugins-notification-button-container { background-color: var(--arrowpanel-dimmed); border-top: 1px solid var(--panel-separator-color); padding: 10px; margin-top: 5px; } .click-to-play-popup-button { width: 50%; } .click-to-play-plugins-notification-description-box { padding: 10px; } .click-to-play-plugins-outer-description { margin-top: 8px; } .click-to-play-plugins-notification-link, .center-item-link { margin: 0; } .messageImage[value="plugin-hidden"] { list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin); } /* Keep any changes to this style in sync with pluginProblem.css */ notification.pluginVulnerable { background-color: #484848; background-image: url(chrome://mozapps/skin/plugins/contentPluginStripe.png); color: white; } notification.pluginVulnerable .messageImage { list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked); } notification.pluginVulnerable > .notification-inner > .messageCloseButton:not(:hover) { background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 80, 16, 64); } /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ /*** Status and progress indicator ***/ #downloads-animation-container { min-height: 1px; min-width: 1px; height: 1px; margin-bottom: -1px; /* Makes the outermost animation container element positioned, so that its contents are rendered over the main browser window in the Z order. This is required by the animated event notification. */ position: relative; /* The selected tab may overlap #downloads-indicator-notification */ z-index: 5; } /*** Main indicator icon ***/ #downloads-button[cui-areatype="toolbar"] > #downloads-indicator-anchor > #downloads-indicator-icon, #nav-bar #downloads-button[cui-areatype="toolbar"] > #downloads-indicator-anchor > #downloads-indicator-icon { background: -moz-image-rect(url("chrome://browser/skin/custom_images/light/toolbar-icons.svg"), 0, 198, 18, 180) center no-repeat; min-width: 18px; min-height: 18px; } #TabsToolbar #downloads-button[cui-areatype="toolbar"]:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon { background: -moz-image-rect(url("chrome://browser/skin/custom_images/light/tabbar-icons.svg"), 0, 198, 18, 180) center no-repeat; } #downloads-button[cui-areatype="toolbar"]:not([disabled=true]):-moz-any([open], [checked], :hover:active) > #downloads-indicator-anchor > #downloads-indicator-icon, #TabsToolbar #downloads-button[cui-areatype="toolbar"]:not([disabled=true]):-moz-any([open], [checked], :hover:active) > #downloads-indicator-anchor > #downloads-indicator-icon, #nav-bar #downloads-button[cui-areatype="toolbar"]:not([disabled=true]):-moz-any([open], [checked], :hover:active) > #downloads-indicator-anchor > #downloads-indicator-icon { background: -moz-image-rect(url("chrome://browser/skin/custom_images/toolbar-icons-active.svg"), 0, 198, 18, 180) center no-repeat; } #downloads-button[cui-areatype="toolbar"][attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, #downloads-button[cui-areatype="toolbar"][attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { display: -moz-box; height: 13px; width: 13px; background-size: contain; border: none; box-shadow: none; filter: drop-shadow(0 1px 0 rgba(13, 27, 38, 0.15)); } #downloads-button[cui-areatype="toolbar"][attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { background: #D90000 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center; } #downloads-button[cui-areatype="toolbar"][attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { background: #FFBF00 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center; } #downloads-button[cui-areatype="toolbar"][attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive, #downloads-button[cui-areatype="toolbar"][attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive { filter: none; } #downloads-button[cui-areatype="toolbar"][attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon, #nav-bar #downloads-button[cui-areatype="toolbar"][attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon, #TabsToolbar #downloads-button[cui-areatype="toolbar"][attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon { background-image: -moz-image-rect(url("chrome://browser/skin/custom_images/light/toolbar-icons.svg"), 18, 198, 36, 180); } #downloads-button[cui-areatype="menu-panel"][attention="success"] { list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png"); -moz-image-region: auto; } /* In the next few rules, we use :not([counter]) as a shortcut that is equivalent to -moz-any([progress], [paused]). */ #downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { background: -moz-image-rect(url("chrome://browser/skin/Toolbar-small.png"), 0, 16, 16, 0) center no-repeat; background-size: 12px; } #downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { background-image: -moz-image-rect(url("chrome://browser/skin/custom_images/light/toolbar-icons.svg"), 18, 198, 36, 180); } /*** Download notifications ***/ #downloads-indicator-notification { opacity: 0; background-size: 16px; background-position: center; background-repeat: no-repeat; width: 16px; height: 16px; } @keyframes downloadsIndicatorNotificationStartRight { from { opacity: 0; transform: translate(-128px, 128px) scale(8); } 20% { opacity: .85; animation-timing-function: ease-out; } to { opacity: 0; transform: translate(0) scale(1); } } @keyframes downloadsIndicatorNotificationStartLeft { from { opacity: 0; transform: translate(128px, 128px) scale(8); } 20% { opacity: .85; animation-timing-function: ease-out; } to { opacity: 0; transform: translate(0) scale(1); } } #downloads-notification-anchor[notification="start"] > #downloads-indicator-notification { background-image: url("chrome://browser/skin/downloads/download-notification-start.png"); animation-name: downloadsIndicatorNotificationStartRight; animation-duration: 1s; } #downloads-notification-anchor[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-notification { animation-name: downloadsIndicatorNotificationStartLeft; } @keyframes downloadsIndicatorNotificationFinish { from { opacity: 0; transform: scale(1); } 20% { opacity: .65; animation-timing-function: ease-in; } to { opacity: 0; transform: scale(8); } } #downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification { background-image: url("chrome://browser/skin/downloads/download-notification-finish.png"); animation-name: downloadsIndicatorNotificationFinish; animation-duration: 1s; } /*** Progress bar and text ***/ #downloads-indicator-counter { height: 10px; margin: 0; color: #4d4d4d; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); font-size: 10px; line-height: 10px; text-align: center; } toolbar[brighttext] #downloads-indicator-counter { color: white; text-shadow: 0 0 1px rgba(0, 0, 0, 0.7), 0 1px 1.5px rgba(0, 0, 0, 0.5); } #downloads-indicator-progress { width: 18px; height: 6px; min-width: 0; min-height: 0; margin-top: 1px; margin-bottom: 2px; border-radius: 2px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); } #downloads-indicator-progress > .progress-bar { -moz-appearance: none; min-width: 0; min-height: 0; /* The background-clip: border-box; and background-image: none; are there to expand the background-color behind the border */ background-clip: padding-box, border-box; background-color: #ff875e; background-image: linear-gradient(transparent 1px, rgba(255, 255, 255, 0.4) 1px, rgba(255, 255, 255, 0.4) 2px, transparent 2px), none; border: 1px solid; border-color: rgba(0, 43, 86, 0.6) rgba(0, 43, 86, 0.4) rgba(0, 43, 86, 0.4); border-radius: 2px 0 0 2px; } #downloads-indicator-progress > .progress-remainder { -moz-appearance: none; min-width: 0; min-height: 0; background-image: linear-gradient(#505050, #575757); border: 1px solid; border-color: rgba(0, 0, 0, 0.6) rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.4); border-inline-start: none; border-radius: 0 2px 2px 0; } #downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar { background-color: #dce651; } #downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder { background-image: linear-gradient(#4b5000, #515700); } .gcli-panel { padding: 0; } .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection { color: #24292d; } /* Error counter */ #developer-toolbar-toolbox-button[error-count]:before { color: #FDF3DE; min-width: 16px; text-shadow: none; background-image: linear-gradient(#B4211B, #8A1915); border-radius: 1px; margin-inline-end: 2px; } /* Customization mode */ /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ /* Customization mode */ :root { --drag-drop-transition-duration: .3s; } #main-window:-moz-any([customize-entering], [customize-entered]) #browser-bottombox { margin-bottom: 2em; } #main-window:-moz-any([customize-entering], [customize-entered]) #content-deck, #main-window:-moz-any([customize-entering], [customize-entered]) #browser-bottombox, #main-window:-moz-any([customize-entering], [customize-entered]) #navigator-toolbox { margin-left: 2em; margin-right: 2em; } #main-window:-moz-any([customize-entering], [customize-exiting]) #tab-view-deck { pointer-events: none; } #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before, #PanelUI-contents > .panel-customization-placeholder { -moz-outline-radius: 2.5px; outline: 1px dashed transparent; } #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before { /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */ -moz-box-ordinal-group: 0; content: ""; display: -moz-box; height: 100%; left: 0; outline-offset: -2px; pointer-events: none; position: absolute; top: 0; width: 100%; } /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the offset from the bottom effectively the same as other targets (-2px). */ #main-window[customize-entered] #TabsToolbar.customization-target::before { top: -2px; } /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */ #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover, #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)), #main-window[customize-entered] #nav-bar-customization-target.customization-target { position: relative; } /* Most target outlines are shown on hover and drag over but the panel menu uses placeholders instead. */ #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before, #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before, #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before { outline-color: currentColor; } #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before { transition: outline-color 250ms linear; } #PanelUI-contents[showoutline=true] > .panel-customization-placeholder { transition: outline-color 250ms linear; outline-color: var(--panel-separator-color); } #PanelUI-contents > .panel-customization-placeholder { cursor: auto; outline-offset: -5px; } #main-window[customizing] .customization-target:not(#PanelUI-contents) { min-width: 100px; padding-left: 10px; padding-right: 10px; } #customization-container { background-color: -moz-field; color: -moz-fieldText; text-shadow: none; } #customization-palette, #customization-empty { padding: 5px 25px 25px; } #customization-header { font-size: 1.75em; line-height: 1.75em; color: GrayText; font-weight: 200; margin: 25px 25px 12px; padding-bottom: 12px; border-bottom: 1px solid ThreeDLightShadow; } #customization-panel-container { padding: 15px 25px 25px; background-image: linear-gradient(to bottom, #3e86ce, #3878ba); } #main-window:-moz-any([customize-entering], [customize-entered]) #browser-bottombox, #customization-footer { background-color: -moz-dialog; } #customization-footer { border-top: 1px solid ThreeDLightShadow; padding: 10px; } .customizationmode-button > .box-inherit > .box-inherit > .button-icon, .customizationmode-button > .button-box > .button-icon { height: 24px; } #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text { /* Sadly, button.css thinks its margins are perfect for everyone. */ margin-inline-start: 6px !important; } #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon { width: 20px; height: 20px; border-radius: 2px; background-image: url("chrome://browser/content/default-theme-icon.svg"); background-size: contain; } #main-window[customize-entered] #customization-panel-container { background-image: url("chrome://browser/skin/customizableui/customizeMode-separatorHorizontal.png"), url("chrome://browser/skin/customizableui/customizeMode-separatorVertical.png"), url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png"), url("chrome://browser/skin/customizableui/background-noise-toolbar.png"), linear-gradient(to bottom, #3e86ce, #3878ba); background-position: center top, left center, left top, left top, left top; background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat; background-size: auto 12px, 12px 100%, auto, auto, auto; background-attachment: scroll, scroll, fixed, fixed, scroll; } toolbarpaletteitem[place="toolbar"] { transition: border-width 250ms ease-in-out; } toolbarpaletteitem[mousedown] { cursor: -moz-grabbing; } .panel-customization-placeholder, toolbarpaletteitem[place="palette"], toolbarpaletteitem[place="panel"] { transition: transform var(--drag-drop-transition-duration) ease-in-out; } #customization-palette { transition: opacity .3s ease-in-out; opacity: 0; } #customization-palette[showing="true"] { opacity: 1; } toolbarpaletteitem toolbarbutton[disabled] { color: inherit !important; } toolbarpaletteitem[notransition].panel-customization-placeholder, toolbarpaletteitem[notransition][place="toolbar"], toolbarpaletteitem[notransition][place="palette"], toolbarpaletteitem[notransition][place="panel"] { transition: none; } toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon, toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon, toolbarpaletteitem > toolbaritem.panel-wide-item, toolbarpaletteitem > toolbarbutton[type="menu-button"] { transition: transform var(--drag-drop-transition-duration) cubic-bezier(0.6, 2, 0.75, 1.5) !important; } toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon, toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon { transform: scale(1.3); } toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item, toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] { transform: scale(1.1); } /* Override the toolkit styling for items being dragged over. */ toolbarpaletteitem[place="toolbar"] { border-left-width: 0; border-right-width: 0; margin-right: 0; margin-left: 0; } #customization-palette:not([hidden]) { margin-bottom: 25px; } toolbarpaletteitem[place="palette"]:-moz-focusring, toolbarpaletteitem[place="panel"]:-moz-focusring, toolbarpaletteitem[place="toolbar"]:-moz-focusring { outline-width: 0; } toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring, toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring, toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { /* Delay adding the focusring back until after the transform transition completes. */ transition: outline-width 0.01s linear var(--drag-drop-transition-duration); outline: 1px dotted; -moz-outline-radius: 2.5px; } toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { outline-offset: -5px; } #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton, #wrapper-edit-controls[place="palette"] > #edit-controls > separator, #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton, #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator { margin-top: 20px; } #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton, #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton { margin-left: 0; margin-right: 0; max-width: 24px; min-width: 24px; max-height: 24px; min-height: 24px; padding: 4px; } #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon, #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon { width: 16px; } #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon { opacity: 1; /* To ensure these buttons always look enabled in customize mode */ } #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button, #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator { display: none; } #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks { -moz-box-pack: center; min-height: 48px; } #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon { margin-inline-end: 5px; } #customization-palette > toolbarpaletteitem > label { text-align: center; margin-left: 0; margin-right: 0; } #customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent { -moz-box-orient: vertical; /* Make the panel padding uniform across all platforms due to the styling of the section headers and footer. */ padding: 10px; } .customization-lwtheme-menu-theme > .toolbarbutton-icon { width: 32px; height: 32px; } .customization-lwtheme-menu-theme { -moz-appearance: none; border: 1px solid transparent; margin: 0 -5px 5px; padding-top: 0; padding-inline-end: 5px; padding-bottom: 0; padding-inline-start: 0; } .customization-lwtheme-menu-theme[defaulttheme] { list-style-image: url(chrome://browser/content/default-theme-icon.svg); } .customization-lwtheme-menu-theme[active="true"], .customization-lwtheme-menu-theme:hover { background-color: var(--arrowpanel-dimmed); border-color: var(--panel-separator-color); } .customization-lwtheme-menu-theme[active="true"], .customization-lwtheme-menu-theme:hover:active { background-color: var(--arrowpanel-dimmed-further); } .customization-lwtheme-menu-theme > .toolbarbutton-icon { margin: 5px; } .customization-lwtheme-menu-theme > .toolbarbutton-text { text-align: start; } #customization-lwtheme-menu-header, #customization-lwtheme-menu-recommended { padding: 10px; margin-bottom: 5px; } #customization-lwtheme-menu-header, #customization-lwtheme-menu-recommended, #customization-lwtheme-menu-footer { background-color: var(--arrowpanel-dimmed); margin-right: -10px; margin-left: -10px; } #customization-lwtheme-menu-header { margin-top: -10px; border-bottom: 1px solid var(--arrowpanel-dimmed); } #customization-lwtheme-menu-recommended { border-top: 1px solid var(--arrowpanel-dimmed); border-bottom: 1px solid var(--arrowpanel-dimmed); } #customization-lwtheme-menu-footer { background: linear-gradient(var(--arrowpanel-dimmed) 60%, transparent) border-box; border-top: 1px solid var(--arrowpanel-dimmed); margin-bottom: -10px; } .customization-lwtheme-menu-footeritem { -moz-appearance: none; -moz-box-flex: 1; color: inherit; border-style: none; padding: 10px; margin-left: 0; margin-right: 0; } .customization-lwtheme-menu-footeritem:hover { background: linear-gradient(var(--arrowpanel-dimmed) 40%, transparent) padding-box; } .customization-lwtheme-menu-footeritem:first-child { border-inline-end: 1px solid var(--panel-separator-color); } /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent { padding: 0; margin: 0; min-width: 400px; max-width: 1000px; min-height: 200px; border-radius: 3px; background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%); border: 0px solid rgba(0, 148, 221, 0.5); box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.5), inset 0 1px 1px 0 #fff; color: #333333; } #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) { background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%); } .customization-tipPanel-infoBox { margin: 20px 25px 25px; width: 25px; background-image: url(chrome://browser/skin/customizableui/info-icon-customizeTip.png); background-repeat: no-repeat; } .customization-tipPanel-content { margin: 25px 0; font-size: 12px; line-height: 18px; } .customization-tipPanel-em { margin: 0; font-weight: bold; } .customization-tipPanel-contentImage { margin-top: 25px; list-style-image: url(chrome://browser/skin/customizableui/customize-illustration.png); min-width: 300px; max-width: 300px; min-height: 190px; max-height: 190px; display: -moz-box; } .customization-tipPanel-contentImage:-moz-locale-dir(rtl) { list-style-image: url(chrome://browser/skin/customizableui/customize-illustration-rtl.png); } .customization-tipPanel-link { -moz-appearance: none; background: transparent; border: none; box-shadow: none; color: #1952ab; margin: 0; cursor: pointer; } .customization-tipPanel-link > .button-box > .button-text { margin: 0 !important; } .customization-tipPanel-closeBox > .close-icon { -moz-appearance: none; border: 0; margin-inline-end: -25px; } #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"], #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] { list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png"); } #main-window[customize-entered] > #tab-view-deck { background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png"), linear-gradient(to bottom, #bcbcbc, #b5b5b5); background-attachment: fixed; } #main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme { background-repeat: no-repeat; background-position: right top; background-attachment: fixed; /* The image will get set from CustomizeMode.jsm */ background-image: none; background-color: transparent; } #main-window[customization-lwtheme]:-moz-lwtheme { background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png"), url("chrome://browser/skin/customizableui/background-noise-toolbar.png"), linear-gradient(to bottom, #bcbcbc, #b5b5b5); background-color: #b5b5b5; background-repeat: repeat; background-attachment: fixed; background-position: left top; } #main-window[customize-entered] #browser-bottombox, #main-window[customize-entered] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar), #main-window[customize-entered] #customization-container { border: 3px solid rgba(0, 0, 0, 0.1); border-top-width: 0; background-clip: padding-box; background-origin: padding-box; -moz-border-right-colors: rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2); -moz-border-bottom-colors: rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2); -moz-border-left-colors: rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2); } #main-window[customize-entered] #customization-container, #main-window[customize-entered] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) { border-bottom-width: 0; } #main-window[customize-entered] #TabsToolbar { -moz-appearance: none; background-clip: padding-box; border-right: 3px solid transparent; border-left: 3px solid transparent; } /* The :hover:active style from toolkit doesn't seem to work in this panel so just use :active. */ .customization-tipPanel-closeBox > .close-icon:active { background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 48, 16, 32); } /* End customization mode */ #main-window[privatebrowsingmode=temporary] #private-browsing-indicator { background: url("chrome://browser/skin/privatebrowsing-mask.png") center no-repeat; width: 40px; } /* UI Tour */ #UITourHighlightContainer { -moz-appearance: none; -moz-window-shadow: none; border: none; background-color: transparent; /* This is a buffer to compensate for the movement in the "wobble" effect, and for the box-shadow of #UITourHighlight. */ padding: 4px; } #UITourHighlight { background-image: radial-gradient(50% 100%, rgba(0, 149, 220, 0.4) 50%, rgba(0, 149, 220, 0.6) 100%); border-radius: 40px; border: 1px solid white; /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity on Linux without an X compositor where opacity is either 0 or 1. */ box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.49); min-height: 32px; min-width: 32px; } #UITourTooltipBody { -moz-box-align: start; } #UITourTooltipTitleContainer { -moz-box-align: start; margin-bottom: 10px; } #UITourTooltipIcon { width: 48px; height: 48px; margin-inline-end: 10px; } #UITourTooltipTitle, #UITourTooltipDescription { max-width: 20rem; } #UITourTooltipTitle { font-size: 1.45rem; font-weight: bold; margin: 0; } #UITourTooltipDescription { margin-inline-start: 0; margin-inline-end: 0; font-size: 1.15rem; line-height: 1.8rem; margin-bottom: 0; /* Override global.css */ } #UITourTooltipClose { position: relative; -moz-appearance: none; border: none; background-color: transparent; min-width: 0; margin-inline-start: 4px; margin-top: -2px; } #UITourTooltipClose > .toolbarbutton-text { display: none; } #UITourTooltipButtons { -moz-box-pack: end; background-color: rgba(24, 26, 27, 0.07); border-top: 1px solid rgba(24, 26, 27, 0.14); margin: 10px -16px -16px; padding: 16px; } #UITourTooltipButtons > label, #UITourTooltipButtons > button { margin: 0 15px; } #UITourTooltipButtons > label:first-child, #UITourTooltipButtons > button:first-child { margin-inline-start: 0; } #UITourTooltipButtons > label:last-child, #UITourTooltipButtons > button:last-child { margin-inline-end: 0; } #UITourTooltipButtons > button[image] > .button-box > .button-icon { width: 16px; height: 16px; margin-inline-end: 5px; } #UITourTooltipButtons > label, #UITourTooltipButtons > button .button-text { font-size: 1.15rem; } #UITourTooltipButtons > button:not(.button-link) { -moz-appearance: none; background-color: #fbfbfb; border-radius: 3px; border: 1px solid; border-color: silver; color: #474747; padding: 4px 30px; transition-property: background-color, border-color; transition-duration: 150ms; } #UITourTooltipButtons > button:not(.button-link):not(:active):hover { background-color: rgba(24, 26, 27, 0.15); border-color: rgba(24, 26, 27, 0.15); box-shadow: 0 1px 0 0 rgba(24, 26, 27, 0.05) inset; } #UITourTooltipButtons > label, #UITourTooltipButtons > button.button-link { -moz-appearance: none; background: transparent; border: none; box-shadow: none; color: rgba(0, 0, 0, 0.35); padding-left: 10px; padding-right: 10px; } #UITourTooltipButtons > button.button-link:hover { color: black; } /* The primary button gets the same color as the customize button. */ #UITourTooltipButtons > button.button-primary { background-color: #74bf43; color: white; padding-left: 30px; padding-right: 30px; } #UITourTooltipButtons > button.button-primary:not(:active):hover { background-color: #69ad3d; } /* Notification overrides for Heartbeat UI */ notification.heartbeat { background-color: #F1F1F1; border-bottom: 1px solid #C1C1C1; height: 40px; } /* In themes/osx/global/notification.css the close icon is inverted because notifications on OSX are usually dark. Heartbeat is light, so override that behaviour. */ @keyframes pulse-onshow { 0% { opacity: 0; transform: scale(1); } 25% { opacity: 1; transform: scale(1.1); } 50% { transform: scale(1); } 75% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes pulse-twice { 0% { transform: scale(1.1); } 50% { transform: scale(0.8); } 100% { transform: scale(1); } } .messageText.heartbeat { color: #333333; text-shadow: none; margin-inline-start: 0px; /* The !important is required to override OSX default style. */ margin-inline-end: 12px !important; } .messageImage.heartbeat { width: 24px; height: 24px; margin-inline-start: 8px; margin-inline-end: 8px; } .messageImage.heartbeat.pulse-onshow { animation-name: pulse-onshow; animation-duration: 1.5s; animation-iteration-count: 1; animation-timing-function: cubic-bezier(0.7, 1.8, 0.9, 1.1); } .messageImage.heartbeat.pulse-twice { animation-name: pulse-twice; animation-duration: 1s; animation-iteration-count: 2; animation-timing-function: linear; } /* Learn More link styles */ .heartbeat > .text-link { color: #0095DD; margin-inline-start: 0px; } .heartbeat > .text-link:hover { color: #008ACB; text-decoration: none; } .heartbeat > .text-link:hover:active { color: #006B9D; } /* Heartbeat UI Rating Star Classes */ .heartbeat > #star-rating-container { display: -moz-box; margin-bottom: 4px; } .heartbeat > #star-rating-container > #star5 { -moz-box-ordinal-group: 5; } .heartbeat > #star-rating-container > #star4 { -moz-box-ordinal-group: 4; } .heartbeat > #star-rating-container > #star3 { -moz-box-ordinal-group: 3; } .heartbeat > #star-rating-container > #star2 { -moz-box-ordinal-group: 2; } .heartbeat > #star-rating-container > .star-x { background: url("chrome://browser/skin/heartbeat-star-off.svg"); cursor: pointer; /* Overrides the margin-inline-end for all platforms defined in the .plain class */ margin-inline-end: 4px !important; width: 16px; height: 16px; } .heartbeat > #star-rating-container > .star-x:hover, .heartbeat > #star-rating-container > .star-x:hover ~ .star-x { background: url("chrome://browser/skin/heartbeat-star-lit.svg"); } #UITourHighlight { /* Below are some fixes for people without an X compositor on Linux. This is why we can't have nice things: */ /* Animations don't repaint properly without an X compositor. */ animation-name: none !important; /* Opacity rounds to 0 or 1 on Linux without an X compositor so make the background be transparent in that case by having all alpha values < 0.5 */ background-image: radial-gradient(50% 100%, rgba(0, 149, 220, 0.3) 50%, rgba(0, 149, 220, 0.49) 100%); /* The highlight isn't anti-aliased without an X compositor so make it thicker. Make it a darker color since we don't have the box-shadow in this case. */ border: 4px solid #0095dc; } #UITourTooltipDescription { font-size: 1.05rem; } #UITourTooltipClose { margin-inline-end: -4px; height: 16px; width: 16px; } /** * Override the --arrowpanel-padding so the background extends * to the sides and bottom of the panel. */ #UITourTooltipButtons { margin-left: -10px; margin-bottom: -10px; } #context-navigation > .menuitem-iconic { -moz-box-flex: 1; -moz-box-pack: center; -moz-box-align: center; } #context-navigation > .menuitem-iconic > .menu-iconic-left { -moz-appearance: none; } #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon { width: 16px; height: 16px; margin: 7px; filter: url(chrome://global/skin/filters.svg#fill); fill: currentColor; } #context-back { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back"); } #context-forward { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward"); } #context-reload { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload"); } #context-stop { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop"); } #context-bookmarkpage { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark"); } #context-bookmarkpage[starred=true] { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); } #context-back:-moz-locale-dir(rtl), #context-forward:-moz-locale-dir(rtl), #context-reload:-moz-locale-dir(rtl) { transform: scaleX(-1); } #context-media-eme-learnmore { list-style-image: url("chrome://browser/skin/drm-icon.svg#chains"); } #context-navigation > .menuitem-iconic > .menu-iconic-left { /* override toolkit/themes/linux/global/menu.css */ padding-inline-end: 0 !important; margin-inline-end: 0 !important; } .browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent { padding: 0; overflow: hidden; } .webextension-popup-browser { border-radius: inherit; } #nav-bar #loop-button, #nav-bar toolbar[brighttext] #loop-button { list-style-image: url("chrome://browser/skin/custom_images/light/loop-toolbar-icons.svg") !important; } #TabsToolbar #loop-button, #TabsToolbar toolbar[brighttext] #loop-button { list-style-image: url("chrome://browser/skin/custom_images/dark/loop-tabbar-icons.svg") !important; } #nav-bar #loop-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #loop-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar toolbar[brighttext] #loop-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar toolbar[brighttext] #loop-button:not([disabled=true]):-moz-any([open], [checked], :hover:active) { list-style-image: url("chrome://browser/skin/custom_images/loop-toolbar-icons-active.svg") !important; } #nav-bar #pocket-button, #nav-bar toolbar[brighttext] #pocket-button { list-style-image: url("chrome://browser/skin/custom_images/light/pocket-toolbar-icons.svg") !important; } #TabsToolbar #pocket-button, #TabsToolbar toolbar[brighttext] #pocket-button { list-style-image: url("chrome://browser/skin/custom_images/dark/pocket-tabbar-icons.svg") !important; } #nav-bar #pocket-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #pocket-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar toolbar[brighttext] #pocket-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar toolbar[brighttext] #pocket-button:not([disabled=true]):-moz-any([open], [checked], :hover:active) { list-style-image: url("chrome://browser/skin/custom_images/pocket-toolbar-icons-active.svg") !important; }