diff options
Diffstat (limited to 'arc-firefox-theme/chrome/browser/sass/browser-darker.css')
| -rw-r--r-- | arc-firefox-theme/chrome/browser/sass/browser-darker.css | 4520 |
1 files changed, 4520 insertions, 0 deletions
diff --git a/arc-firefox-theme/chrome/browser/sass/browser-darker.css b/arc-firefox-theme/chrome/browser/sass/browser-darker.css new file mode 100644 index 0000000..94768a2 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/sass/browser-darker.css @@ -0,0 +1,4520 @@ +@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/. */ +:root { + --toolbarbutton-hover-background: #fbfbfc; + --toolbarbutton-hover-boxshadow: none; + --toolbarbutton-hover-bordercolor: #5294E2; + --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; } + +#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 > toolbar:not(:-moz-lwtheme):not(#toolbar-menubar):not(#TabsToolbar) { + -moz-appearance: none; + border-style: none; + background-color: -moz-Dialog; } + +#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(24, 27, 31, 0.97) !important; + background-clip: padding-box; + margin-top: -1px; + /* Move up into the TabsToolbar for the inner highlight at the top of the nav-bar */ + /* 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, 60, 68, 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; } + +#urlbar:-moz-lwtheme:not([focused="true"]), +.searchbar-textbox:-moz-lwtheme:not([focused="true"]) { + opacity: .85; } + +/* Places toolbar */ +toolbarbutton.bookmark-item:not(.subviewbutton), +#personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder { + margin: 1px; + padding: 2px 3px; } + +toolbarbutton.bookmark-item:not(.subviewbutton):not(:hover):not(:active):not([open]) { + color: inherit; } + +.bookmark-item:not(#home-button) > .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: #fbfbfc; + border: 1px solid #5294E2; } + +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 { + -moz-padding-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; + -moz-margin-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; } + +/* Stock icons for the menu bar items */ +menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { + -moz-binding: url("chrome://global/content/bindings/menu.xml#menuitem-iconic"); } + +#placesContext_open\:newwindow, +#menu_newNavigator, +#context-openlink, +#context-openframe { + list-style-image: url("chrome://browser/skin/Toolbar-small.png"); + -moz-image-region: rect(0px 80px 16px 64px); } + +#placesContext_open\:newtab, +#placesContext_openContainer\:tabs, +#menu_newNavigatorTab, +#context-openlinkintab, +#context-openframeintab { + list-style-image: url("chrome://browser/skin/Toolbar-small.png"); + -moz-image-region: rect(0px 64px 16px 48px); } + +#menu_openFile { + list-style-image: url("moz-icon://stock/gtk-open?size=menu"); } + +#menu_close { + list-style-image: url("moz-icon://stock/gtk-close?size=menu"); } + +#context-media-play { + list-style-image: url("moz-icon://stock/gtk-media-play?size=menu"); } + +#context-media-pause { + list-style-image: url("moz-icon://stock/gtk-media-pause?size=menu"); } + +#menu_savePage, +#context-savelink, +#context-saveimage, +#context-savevideo, +#context-saveaudio, +#context-savepage, +#context-saveframe { + list-style-image: url("moz-icon://stock/gtk-save-as?size=menu"); } + +#menu_printPreview { + list-style-image: url("moz-icon://stock/gtk-print-preview?size=menu"); } + +#menu_print, +#context-printframe { + list-style-image: url("moz-icon://stock/gtk-print?size=menu"); } + +#menu_FileQuitItem { + list-style-image: url("moz-icon://stock/gtk-quit?size=menu"); } + +#menu_undo, +#context-undo { + list-style-image: url("moz-icon://stock/gtk-undo?size=menu"); } + +#menu_undo[disabled], +#context-undo[disabled] { + list-style-image: url("moz-icon://stock/gtk-undo?size=menu&state=disabled"); } + +#menu_redo { + list-style-image: url("moz-icon://stock/gtk-redo?size=menu"); } + +#menu_redo[disabled] { + list-style-image: url("moz-icon://stock/gtk-redo?size=menu&state=disabled"); } + +#menu_cut, +#placesContext_cut, +#context-cut { + list-style-image: url("moz-icon://stock/gtk-cut?size=menu"); } + +#menu_cut[disabled], +#placesContext_cut[disabled], +#context-cut[disabled] { + list-style-image: url("moz-icon://stock/gtk-cut?size=menu&state=disabled"); } + +#menu_copy, +#placesContext_copy, +#context-copy, +#context-copyimage, +#context-copyvideourl, +#context-copyaudiourl, +#context-copylink, +#context-copyemail { + list-style-image: url("moz-icon://stock/gtk-copy?size=menu"); } + +#menu_copy[disabled], +#placesContext_copy[disabled], +#context-copy[disabled] { + list-style-image: url("moz-icon://stock/gtk-copy?size=menu&state=disabled"); } + +#menu_paste, +#placesContext_paste, +#context-paste { + list-style-image: url("moz-icon://stock/gtk-paste?size=menu"); } + +#menu_paste[disabled], +#placesContext_paste[disabled], +#context-paste[disabled] { + list-style-image: url("moz-icon://stock/gtk-paste?size=menu&state=disabled"); } + +#menu_delete, +#placesContext_delete, +#placesContext_delete_history, +#context-delete { + list-style-image: url("moz-icon://stock/gtk-delete?size=menu"); } + +#menu_delete[disabled], +#placesContext_delete[disabled], +#placesContext_delete_history[disabled], +#context-delete[disabled] { + list-style-image: url("moz-icon://stock/gtk-delete?size=menu&state=disabled"); } + +#menu_selectAll, +#context-selectall { + list-style-image: url("moz-icon://stock/gtk-select-all?size=menu"); } + +#menu_find { + list-style-image: url("moz-icon://stock/gtk-find?size=menu"); } + +#menu_find[disabled] { + list-style-image: url("moz-icon://stock/gtk-find?size=menu&state=disabled"); } + +#menu_preferences { + list-style-image: url("moz-icon://stock/gtk-preferences?size=menu"); } + +#placesContext_reload, +#context-reloadframe { + list-style-image: url("moz-icon://stock/gtk-refresh?size=menu"); } + +#menu_zoomEnlarge { + list-style-image: url("moz-icon://stock/gtk-zoom-in?size=menu"); } + +#menu_zoomReduce { + list-style-image: url("moz-icon://stock/gtk-zoom-out?size=menu"); } + +#menu_zoomReset { + list-style-image: url("moz-icon://stock/gtk-zoom-100?size=menu"); } + +#menu_showAllHistory { + list-style-image: url("chrome://browser/skin/Toolbar-small.png"); + -moz-image-region: rect(0px 32px 16px 16px); } + +#bookmarksShowAll { + list-style-image: url("chrome://browser/skin/Toolbar-small.png"); + -moz-image-region: rect(0px 48px 16px 32px); } + +#subscribeToPageMenuitem:not([disabled]), +#subscribeToPageMenupopup, +#BMB_subscribeToPageMenuitem:not([disabled]), +#BMB_subscribeToPageMenupopup { + list-style-image: url("chrome://browser/skin/page-livemarks.png"); } + +#bookmarksToolbarFolderMenu, +#BMB_bookmarksToolbar, +#panelMenu_bookmarksToolbar { + list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png"); } + +#BMB_unsortedBookmarks, +#panelMenu_unsortedBookmarks { + list-style-image: url("chrome://browser/skin/places/unsortedBookmarks.png"); } + +#menu_readingList, +#BMB_readingList { + list-style-image: url("chrome://browser/skin/readinglist/readinglist-icon.svg"); } + +#panelMenu_pocket, +#menu_pocket, +#BMB_pocket { + list-style-image: url("chrome://browser/content/pocket/panels/img/pocketmenuitem16.png"); } + +#menu_openDownloads { + list-style-image: url("chrome://browser/skin/Toolbar-small.png"); + -moz-image-region: rect(0px 16px 16px 0px); } + +#menu_openAddons { + list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric-16.png"); } + +#menu_pageInfo, +#context-viewinfo, +#context-viewframeinfo { + list-style-image: url("moz-icon://stock/gtk-info?size=menu"); } + +#placesContext_open\:newprivatewindow, +#privateBrowsingItem { + list-style-image: url("chrome://browser/skin/Privacy-16.png"); } + +#placesContext_show\:info { + list-style-image: url("moz-icon://stock/gtk-properties?size=menu"); } + +#sanitizeItem { + list-style-image: url("moz-icon://stock/gtk-clear?size=menu"); } + +#menu_openHelp { + list-style-image: url("moz-icon://stock/gtk-help?size=menu"); } + +#aboutName { + list-style-image: url("moz-icon://stock/gtk-about?size=menu"); } + +#javascriptConsole { + list-style-image: url("chrome://global/skin/console/console.png"); } + +/* Primary toolbar buttons */ +.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-container, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-icon { + -moz-margin-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, #tabview-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, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .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, #tabview-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, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-badge-container, +:-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, #tabview-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, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon { + padding: 3px 7px; } + +/* Help SDK icons fit: */ +toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon, +toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-container > .toolbarbutton-icon { + width: 16px; } + +:-moz-any(#TabsToolbar, #nav-bar) toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon { + /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */ + width: 32px; } + +#nav-bar #PanelUI-menu-button { + -moz-padding-start: 5px; + -moz-padding-end: 5px; } + +#nav-bar #PanelUI-button, +#nav-bar[brighttext] #PanelUI-button { + background: none; + border-image: url("chrome://browser/skin/custom_images/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-container, +:-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-container, +#TabsToolbar .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-icon { + background-color: none; + color: rgba(207, 218, 231, 0.8); + border-color: rgba(29, 32, 36, 0.97); + background-color: rgba(40, 44, 50, 0.87); } + +.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-container, +:-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-container, +#TabsToolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-icon { + background: none; + color: #ffffff; + border-color: #5294E2; + background-color: #5294E2; } + +:-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) .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before { + content: ""; + display: -moz-box; + width: 1px; + height: 18px; + -moz-margin-end: -1px; + background-image: var(--toolbarbutton-combined-backgroundimage); + background-clip: padding-box; + background-position: center; + background-repeat: no-repeat; + background-size: 1px 18px; + box-shadow: var(--toolbarbutton-combined-boxshadow); } + +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { + -moz-margin-start: -4px; } + +#back-button > menupopup { + margin-top: -1px; } + +#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { + transform: scaleX(-1); } + +#forward-button { + margin-left: 2px; + margin-right: 2px; + padding: 0; } + +/* tabview menu item */ +#menu_tabview { + list-style-image: url(chrome://browser/skin/tabview/tabview.png); + -moz-image-region: rect(0, 80px, 16px, 64px); } + +#menu_tabview[groups="0"] { + -moz-image-region: rect(0, 16px, 16px, 0); } + +#menu_tabview[groups="1"] { + -moz-image-region: rect(0, 32px, 16px, 16px); } + +#menu_tabview[groups="2"] { + -moz-image-region: rect(0, 48px, 16px, 32px); } + +#menu_tabview[groups="3"] { + -moz-image-region: rect(0, 64px, 16px, 48px); } + +/* 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, #tabview-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, #web-apps-button, #webide-button, #loop-button, #pocket-button), +#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, #tabview-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, #web-apps-button, #webide-button, #loop-button, #pocket-button), #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 #tabview-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #tabview-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 #web-apps-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #web-apps-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 #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 #pocket-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #pocket-button: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, 270px, 18px, 252px); } + +#sync-button[cui-areatype="toolbar"][status="active"] { + list-style-image: url("chrome://browser/skin/syncProgress-toolbar.png"); + -moz-image-region: rect(0, 18px, 18px, 0px); } + +toolbar[brighttext] #sync-button[status="active"] { + list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png"); } + +#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); } + +#tabview-button { + -moz-image-region: rect(0, 648px, 18px, 630px); } + +#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); } + +#web-apps-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 720px, 18px, 702px); } + +#loop-button > .toolbarbutton-badge-container { + list-style-image: url(chrome://browser/skin/loop/toolbar.png); + -moz-image-region: rect(0, 18px, 18px, 0); } + +toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { + list-style-image: url(chrome://browser/skin/loop/toolbar-inverted.png); } + +#loop-button[state="disabled"] > .toolbarbutton-badge-container, +#loop-button[disabled="true"] > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 36px, 18px, 18px); } + +#loop-button:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 54px, 18px, 36px); } + +#loop-button:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 72px, 18px, 54px); } + +#loop-button:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 90px, 18px, 72px); } + +#loop-button:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 108px, 18px, 90px); } + +#loop-button:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 126px, 18px, 108px); } + +#webide-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 738px, 18px, 720px); } + +#pocket-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 774px, 18px, 756px); } + +#pocket-button[cui-areatype="toolbar"][open] { + -moz-image-region: rect(18px, 774px, 36px, 756px); } + +/* Menu panel and palette styles */ +:root { + --menupanel-list-style-image: url(chrome://browser/skin/menuPanel.png); + --menupanel-list-style-image-2x: url(chrome://browser/skin/menuPanel@2x.png); + --menupanel-small-list-style-image: url(chrome://browser/skin/menuPanel-small.png); + --menupanel-small-list-style-image-2x: url(chrome://browser/skin/menuPanel-small@2x.png); } + +@media not all and (min-resolution: 1.1dppx) { + 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, #tabview-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, #web-apps-button, #webide-button, #loop-button, #pocket-button)[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, #tabview-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, #web-apps-button, #webide-button, #loop-button, #pocket-button) { + list-style-image: var(--menupanel-list-style-image); } + + #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); } + + #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 192px, 64px, 160px); } + + #history-panelmenu[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #history-panelmenu { + -moz-image-region: rect(0px, 224px, 32px, 192px); } + + #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 224px, 64px, 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, 384px, 32px, 352px); } + + #sync-button[cui-areatype="menu-panel"][status="active"] { + list-style-image: url(chrome://browser/skin/syncProgress-menuPanel.png); + -moz-image-region: rect(0px, 32px, 32px, 0px); } + + #feed-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #feed-button { + -moz-image-region: rect(0px, 416px, 32px, 384px); } + + #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 416px, 64px, 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); } + + #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 480px, 64px, 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); } + + #tabview-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #tabview-button { + -moz-image-region: rect(0px, 608px, 32px, 576px); } + + #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); } + + #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 736px, 64px, 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); } + + #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 864px, 64px, 832px); } + + #panic-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #panic-button { + -moz-image-region: rect(0, 896px, 32px, 864px); } + + #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 896px, 64px, 864px); } + + #web-apps-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #web-apps-button { + -moz-image-region: rect(0, 928px, 32px, 896px); } + + #webide-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #webide-button { + -moz-image-region: rect(0px, 960px, 32px, 928px); } + + #pocket-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #pocket-button { + -moz-image-region: rect(0px, 992px, 32px, 960px); } + + #pocket-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 992px, 64px, 960px); } + + toolbaritem[sdkstylewidget="true"] > toolbarbutton { + -moz-image-region: rect(0, 832px, 32px, 800px); } + + #loop-button[cui-areatype="menu-panel"] > .toolbarbutton-badge-container, + toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container { + list-style-image: url(chrome://browser/skin/loop/menuPanel.png); + -moz-image-region: rect(0, 32px, 32px, 0); } + + /* Make sure that the state icons are not shown in the customization palette. */ + toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 32px, 32px, 0) !important; } + + #loop-button[cui-areatype="menu-panel"][state="disabled"] > .toolbarbutton-badge-container, + #loop-button[cui-areatype="menu-panel"][disabled="true"] > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 64px, 32px, 32px); } + + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 96px, 32px, 64px); } + + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 128px, 32px, 96px); } + + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 160px, 32px, 128px); } + + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 192px, 32px, 160px); } + + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 224px, 32px, 192px); } + + /* 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: var(--menupanel-small-list-style-image); } + + #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.png); + -moz-image-region: rect(0px, 96px, 16px, 80px); } } +/* Menu panel and palette styles */ +@media (min-resolution: 1.1dppx) { + 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, #tabview-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, #web-apps-button, #webide-button, #loop-button, #pocket-button)[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, #tabview-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, #web-apps-button, #webide-button, #loop-button, #pocket-button) { + list-style-image: var(--menupanel-list-style-image-2x); } + + #home-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #home-button { + -moz-image-region: rect(0px, 256px, 64px, 192px); } + + #bookmarks-menu-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #bookmarks-menu-button { + -moz-image-region: rect(0px, 384px, 64px, 320px); } + + #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(64px, 384px, 128px, 320px); } + + #history-panelmenu[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #history-panelmenu { + -moz-image-region: rect(0px, 448px, 64px, 384px); } + + #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(64px, 448px, 128px, 384px); } + + #downloads-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #downloads-button { + -moz-image-region: rect(0px, 512px, 64px, 448px); } + + #add-ons-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #add-ons-button { + -moz-image-region: rect(0px, 576px, 64px, 512px); } + + #open-file-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #open-file-button { + -moz-image-region: rect(0px, 640px, 64px, 576px); } + + #save-page-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #save-page-button { + -moz-image-region: rect(0px, 704px, 64px, 640px); } + + #sync-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #sync-button { + -moz-image-region: rect(0px, 768px, 64px, 704px); } + + #sync-button[cui-areatype="menu-panel"][status="active"] { + list-style-image: url(chrome://browser/skin/syncProgress-menuPanel@2x.png); + -moz-image-region: rect(0px, 64px, 64px, 0px); } + + #feed-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #feed-button { + -moz-image-region: rect(0px, 832px, 64px, 768px); } + + #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(64px, 832px, 128px, 768px); } + + #social-share-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #social-share-button { + -moz-image-region: rect(0px, 896px, 64px, 832px); } + + #characterencoding-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #characterencoding-button { + -moz-image-region: rect(0, 960px, 64px, 896px); } + + #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(64px, 960px, 128px, 896px); } + + #new-window-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #new-window-button { + -moz-image-region: rect(0px, 1024px, 64px, 960px); } + + #e10s-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #e10s-button { + -moz-image-region: rect(0px, 1024px, 64px, 960px); } + + #webide-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #webide-button { + -moz-image-region: rect(0px, 1920px, 64px, 1856px); } + + #pocket-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #pocket-button { + -moz-image-region: rect(0px, 1984px, 64px, 1920px); } + + #pocket-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(64px, 1984px, 128px, 1920px); } + + #loop-button[cui-areatype="menu-panel"] > .toolbarbutton-badge-container, + toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container { + list-style-image: url(chrome://browser/skin/loop/menuPanel@2x.png); + -moz-image-region: rect(0, 64px, 64px, 0); } + + /* Make sure that the state icons are not shown in the customization palette. */ + toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 64px, 64px, 0) !important; } + + #loop-button[cui-areatype="menu-panel"][state="disabled"] > .toolbarbutton-badge-container, + #loop-button[cui-areatype="menu-panel"][disabled="true"] > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 128px, 64px, 64px); } + + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 192px, 64px, 128px); } + + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 256px, 64px, 192px); } + + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 320px, 64px, 256px); } + + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 384px, 64px, 320px); } + + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 448px, 64px, 384px); } + + #new-tab-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #new-tab-button { + -moz-image-region: rect(0px, 1088px, 64px, 1024px); } + + #privatebrowsing-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #privatebrowsing-button { + -moz-image-region: rect(0px, 1152px, 64px, 1088px); } + + #tabview-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #tabview-button { + -moz-image-region: rect(0px, 1216px, 64px, 1152px); } + + #find-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #find-button { + -moz-image-region: rect(0px, 1280px, 64px, 1216px); } + + #print-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #print-button { + -moz-image-region: rect(0px, 1344px, 64px, 1280px); } + + #fullscreen-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #fullscreen-button { + -moz-image-region: rect(0px, 1408px, 64px, 1344px); } + + #developer-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #developer-button { + -moz-image-region: rect(0px, 1472px, 64px, 1408px); } + + #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(64px, 1472px, 128px, 1408px); } + + #preferences-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #preferences-button { + -moz-image-region: rect(0px, 1536px, 64px, 1472px); } + + #email-link-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #email-link-button { + -moz-image-region: rect(0px, 1600px, 64px, 1536px); } + + #sidebar-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #sidebar-button { + -moz-image-region: rect(0px, 1728px, 64px, 1664px); } + + #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(64px, 1728px, 128px, 1664px); } + + #panic-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #panic-button { + -moz-image-region: rect(0, 1792px, 64px, 1728px); } + + #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(64px, 1792px, 128px, 1728px); } + + #web-apps-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #web-apps-button { + -moz-image-region: rect(0, 1856px, 64px, 1792px); } + + toolbaritem[sdkstylewidget="true"] > toolbarbutton { + -moz-image-region: rect(0, 1664px, 64px, 1600px); } + + /* Footer and 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: var(--menupanel-small-list-style-image-2x); } + + /* Wide items like the Cut/Copy/Paste and Zoom controls are special in that their icons + are 16x16 when in the panel, but 18x18 when in a toolbar. */ + #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon, + #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon, + toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon, + toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon { + width: 16px; } + + #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button, + toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button { + -moz-image-region: rect(0px, 64px, 32px, 32px); } + + #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button, + toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button { + -moz-image-region: rect(0px, 96px, 32px, 64px); } + + #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button, + toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button { + -moz-image-region: rect(0px, 128px, 32px, 96px); } + + #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, 160px, 32px, 128px); } + + #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, 192px, 32px, 160px); } } +#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; + -moz-margin-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: 3px 5px; + border-radius: 20px; + margin: 0 3px; + box-shadow: inset 0 0 rgba(255, 255, 255, 0); + color: #5c616c; + background-color: #ffffff; + border: 1px solid #cfd6e6; } + +#urlbar[focused], +.searchbar-textbox[focused] { + box-shadow: inset 0 0 rgba(255, 255, 255, 0); + color: #5c616c; + background-color: #ffffff; + border: 1px solid #5294E2; } + +.urlbar-textbox-container { + -moz-appearance: none; + -moz-box-align: center; } + +.urlbar-input-box { + -moz-margin-start: 0; } + +.urlbar-history-dropmarker { + -moz-appearance: toolbarbutton-dropdown; } + +#urlbar-container { + -moz-box-align: center; } + +#urlbar-icons { + -moz-box-align: center; } + +#urlbar-search-splitter { + -moz-appearance: none; + width: 8px; } + +#urlbar-display-box { + margin-top: -1px; + margin-bottom: -1px; + -moz-border-end: 1px solid red; + -moz-margin-end: 3px; } + +.urlbar-display { + margin-top: 0; + margin-bottom: 0; + -moz-margin-start: 0; + color: GrayText; } + +#search-container { + min-width: calc(54px + 11ch); } + +/* identity box */ +#identity-box { + padding: 1px; + font-size: .9em; } + +#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; } + +#notification-popup-box:not([hidden]) + #identity-box { + border-radius: 0; } + +window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box { + border-radius: 0; } + +/* forward button hiding is delayed when hovered */ +/* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */ +/* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */ +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI, +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { + -moz-margin-end: 4px; } + +#identity-box.verifiedIdentity:not(:-moz-lwtheme) { + background-color: var(--verified-identity-box-backgroundcolor); } + +#identity-box:-moz-focusring { + outline: 1px dotted #000; + outline-offset: -3px; } + +#identity-icon-labels { + -moz-padding-start: 2px; + -moz-padding-end: 5px; } + +:root { + --identity-box-verified-color: #479900; + --identity-box-verified-background-image: linear-gradient(transparent 15%, rgba(39, 74, 8, 0.2) 15%, rgba(39, 74, 8, 0.2) 85%, transparent 85%); + --identity-box-chrome-color: #e57300; + --identity-box-chrome-background-image: linear-gradient(transparent 15%, rgba(229, 114, 0, 0.5) 15%, rgba(229, 114, 0, 0.5) 85%, transparent 85%); } + +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI, +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { + background-position: right; + background-size: 1px; + background-repeat: no-repeat; } + +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:-moz-locale-dir(rtl), +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:-moz-locale-dir(rtl) { + background-position: left; } + +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { + color: var(--identity-box-verified-color); + background-image: var(--identity-box-verified-background-image); } + +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI { + color: var(--identity-box-chrome-color); + background-image: var(--identity-box-chrome-background-image); } + +/* page proxy icon */ +#page-proxy-favicon { + width: 16px; + height: 16px; + list-style-image: url(chrome://browser/skin/identity-icons-generic.png); } + +.chromeUI > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://branding/content/identity-icons-brand.png); } + +.verifiedDomain > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-icons-https.png); } + +.verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-icons-https-ev.png); } + +.mixedActiveContent > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-active.png); } + +.mixedDisplayContent > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png); } + +.mixedDisplayContentLoadedActiveBlocked > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png); } + +#page-proxy-favicon[pageproxystate="invalid"] { + opacity: 0.3; } + +#identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon { + list-style-image: url("chrome://branding/content/icon64.png"); } + +#identity-popup-brandName { + font-weight: bold; + font-size: 1.25em; + margin-top: .5em; + margin-bottom: .5em; } + +#identity-popup-content-box { + max-width: 50ch; } + +@media not all and (min-resolution: 1.1dppx) { + #page-proxy-favicon { + -moz-image-region: rect(0, 16px, 16px, 0); } + + #identity-box:hover > #page-proxy-favicon { + -moz-image-region: rect(0, 32px, 16px, 16px); } + + #identity-box:hover:active > #page-proxy-favicon, + #identity-box[open=true] > #page-proxy-favicon { + -moz-image-region: rect(0, 48px, 16px, 32px); } } +@media (min-resolution: 1.1dppx) { + #page-proxy-favicon { + list-style-image: url(chrome://browser/skin/identity-icons-generic@2x.png); + -moz-image-region: rect(0, 32px, 32px, 0); } + + .chromeUI > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://branding/content/identity-icons-brand@2x.png); } + + .verifiedDomain > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-icons-https@2x.png); } + + .verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-icons-https-ev@2x.png); } + + .mixedActiveContent > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-active@2x.png); } + + .mixedDisplayContent > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display@2x.png); } + + .mixedDisplayContentLoadedActiveBlocked > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display@2x.png); } + + #identity-box:hover > #page-proxy-favicon { + -moz-image-region: rect(0, 64px, 32px, 32px); } + + #identity-box:hover:active > #page-proxy-favicon, + #identity-box[open=true] > #page-proxy-favicon { + -moz-image-region: rect(0, 96px, 32px, 64px); } + + #identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon { + list-style-image: url("chrome://branding/content/icon128.png"); + -moz-image-region: rect(0, 128px, 128px, 0); } } +#page-proxy-favicon { + margin-top: 1px; + margin-bottom: 1px; + -moz-margin-start: 3px; + -moz-margin-end: 1px; } + +/* Identity popup icons */ +#identity-popup-icon { + height: 64px; + width: 64px; + padding: 0; + list-style-image: url("chrome://browser/skin/identity.png"); + -moz-image-region: rect(0px, 64px, 64px, 0px); } + +#identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon { + -moz-image-region: rect(64px, 64px, 128px, 0px); } + +#identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon { + -moz-image-region: rect(128px, 64px, 192px, 0px); } + +/* Identity popup body text */ +.identity-popup-description { + white-space: pre-wrap; + -moz-padding-start: 15px; + margin: 2px 0 4px; } + +.identity-popup-label { + white-space: pre-wrap; + -moz-padding-start: 15px; + margin: 0; } + +#identity-popup-content-host, +#identity-popup-content-owner { + font-weight: bold; + max-width: 300px; } + +#identity-popup-content-host, +#identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner { + font-size: 140%; } + +#identity-popup-content-owner { + margin-bottom: 0 !important; } + +#identity-popup-content-verifier { + margin: 4px 0 2px; } + +#identity-popup-content-box.verifiedIdentity > #identity-popup-encryption, +#identity-popup-content-box.verifiedDomain > #identity-popup-encryption { + margin-top: 10px; + -moz-margin-start: -18px; } + +#identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon, +#identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon { + list-style-image: url("chrome://browser/skin/Secure.png"); } + +#identity-popup-help-icon { + -moz-appearance: none; + margin-left: 0px; + border: none; + background: none; + min-width: 0; + list-style-image: url("moz-icon://stock/gtk-dialog-question?size=16"); + cursor: pointer; } + +#identity-popup-help-icon > .button-box > .button-text { + display: none; } + +#identity-popup-help-icon > .button-box > .button-icon { + height: 16px; + width: 16px; } + +#identity-popup-help-icon:-moz-focusring { + outline: 1px dotted; + outline-offset: 1px; } + +#identity-popup > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; } + +#identity-popup-container { + min-width: 280px; + padding: 10px; } + +#identity-popup-button-container { + background: linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 60%, transparent); + padding: 10px; + margin-top: 5px; } + +.popup-notification-icon { + width: 64px; + height: 64px; + -moz-margin-end: 10px; } + +.popup-notification-icon[popupid="geolocation"] { + list-style-image: url(chrome://browser/skin/Geolocation-64.png); } + +.popup-notification-icon[popupid="push"] { + list-style-image: url(chrome://browser/skin/Push-64.png); } + +.popup-notification-icon[popupid="xpinstall-disabled"], +.popup-notification-icon[popupid="addon-progress"], +.popup-notification-icon[popupid="addon-install-blocked"], +.popup-notification-icon[popupid="addon-install-failed"], +.popup-notification-icon[popupid="addon-install-confirmation"], +.popup-notification-icon[popupid="addon-install-complete"] { + list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric.png); + width: 32px; + height: 32px; } + +.popup-notification-icon[popupid="click-to-play-plugins"] { + list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png); } + +.popup-notification-icon[popupid="web-notifications"] { + list-style-image: url(chrome://browser/skin/notification-64.png); } + +.popup-notification-icon[popupid="indexedDB-permissions-prompt"], +.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); } + +.popup-notification-icon[popupid="password"] { + list-style-image: url(chrome://mozapps/skin/passwordmgr/key-64.png); } + +.popup-notification-icon[popupid="webapps-install-progress"], +.popup-notification-icon[popupid="webapps-install"] { + list-style-image: url(chrome://global/skin/icons/webapps-64.png); } + +.popup-notification-icon[popupid="bad-content"] { + list-style-image: url(chrome://browser/skin/bad-content-blocked-64.png); } + +.popup-notification-icon[popupid="bad-content"][mixedblockdisabled], +.popup-notification-icon[popupid="bad-content"][trackingblockdisabled] { + list-style-image: url(chrome://browser/skin/bad-content-unblocked-64.png); } + +.popup-notification-icon[popupid="webRTC-sharingDevices"], +.popup-notification-icon[popupid="webRTC-shareDevices"] { + list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64.png); } + +.popup-notification-icon[popupid="webRTC-sharingMicrophone"], +.popup-notification-icon[popupid="webRTC-shareMicrophone"] { + list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64.png); } + +.popup-notification-icon[popupid="webRTC-sharingScreen"], +.popup-notification-icon[popupid="webRTC-shareScreen"] { + list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64.png); } + +.popup-notification-icon[popupid="pointerLock"] { + list-style-image: url(chrome://browser/skin/pointerLock-64.png); } + +/* Notification icon box */ +#notification-popup-box { + position: relative; + background-color: transparent; + background-clip: padding-box; + padding-left: 1px; + border-width: 0 8px 0 0; + border-style: solid; + border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 fill; } + +#notification-popup-box:-moz-locale-dir(rtl), +.notification-anchor-icon:-moz-locale-dir(rtl) { + transform: scaleX(-1); } + +.notification-anchor-icon { + list-style-image: url(moz-icon://stock/gtk-dialog-info?size=16); + width: 16px; + height: 16px; + margin: 0 2px; } + +.identity-notification-icon, +#identity-notification-icon { + list-style-image: url(chrome://mozapps/skin/profile/profileicon.png); + /* XXX: need HiDPI version */ } + +.geo-notification-icon, +#geo-notification-icon { + list-style-image: url(chrome://browser/skin/Geolocation-16.png); } + +#push-notification-icon { + list-style-image: url(chrome://browser/skin/Push-16.png); } + +#addons-notification-icon { + list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric-16.png); } + +.indexedDB-notification-icon, +#indexedDB-notification-icon { + list-style-image: url(chrome://global/skin/icons/question-16.png); } + +#password-notification-icon { + list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png); } + +.webapps-notification-icon, +#webapps-notification-icon { + list-style-image: url(chrome://global/skin/icons/webapps-16.png); } + +#plugins-notification-icon { + list-style-image: url(chrome://browser/skin/notification-pluginNormal.png); } + +#plugins-notification-icon.plugin-hidden { + list-style-image: url(chrome://browser/skin/notification-pluginAlert.png); } + +#plugins-notification-icon.plugin-blocked { + list-style-image: url(chrome://browser/skin/notification-pluginBlocked.png); } + +#plugins-notification-icon { + -moz-image-region: rect(0, 16px, 16px, 0); } + +#plugins-notification-icon:hover { + -moz-image-region: rect(0, 32px, 16px, 16px); } + +#plugins-notification-icon:active { + -moz-image-region: rect(0, 48px, 16px, 32px); } + +#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; } } +.bad-content-blocked-notification-icon, +#bad-content-blocked-notification-icon { + list-style-image: url(chrome://browser/skin/bad-content-blocked-16.png); } + +.bad-content-unblocked-notification-icon, +#bad-content-unblocked-notification-icon { + list-style-image: url(chrome://browser/skin/bad-content-unblocked-16.png); } + +.webRTC-shareDevices-notification-icon, +#webRTC-shareDevices-notification-icon { + list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16.png); } + +.webRTC-sharingDevices-notification-icon, +#webRTC-sharingDevices-notification-icon { + list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16.png); } + +.webRTC-shareMicrophone-notification-icon, +#webRTC-shareMicrophone-notification-icon { + list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16.png); } + +.webRTC-sharingMicrophone-notification-icon, +#webRTC-sharingMicrophone-notification-icon { + list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16.png); } + +.webRTC-shareScreen-notification-icon, +#webRTC-shareScreen-notification-icon { + list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png); } + +.webRTC-sharingScreen-notification-icon, +#webRTC-sharingScreen-notification-icon { + list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16.png); } + +.web-notifications-notification-icon, +#web-notifications-notification-icon { + list-style-image: url(chrome://browser/skin/notification-16.png); } + +.pointerLock-notification-icon, +#pointerLock-notification-icon { + list-style-image: url(chrome://browser/skin/pointerLock-16.png); } + +.translate-notification-icon, +#translate-notification-icon { + list-style-image: url(chrome://browser/skin/translation-16.png); + -moz-image-region: rect(0px, 16px, 16px, 0px); } + +.translated-notification-icon, +#translated-notification-icon { + list-style-image: url(chrome://browser/skin/translation-16.png); + -moz-image-region: rect(0px, 32px, 16px, 16px); } + +.popup-notification-icon[popupid="servicesInstall"] { + list-style-image: url(chrome://browser/skin/social/services-64.png); } + +#servicesInstall-notification-icon { + list-style-image: url(chrome://browser/skin/social/services-16.png); } + +/* EME notifications */ +.popup-notification-icon[popupid="drmContentPlaying"], +#eme-notification-icon { + list-style-image: url("chrome://browser/skin/drm-icon.svg#chains"); } + +#eme-notification-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); } } +/* HiDPI notification icons */ +@media (min-resolution: 1.1dppx) { + #notification-popup-box { + border-image: url("chrome://browser/skin/urlbar-arrow@2x.png") 0 16 0 0 fill; } + + .notification-anchor-icon { + list-style-image: url(moz-icon://stock/gtk-dialog-info?size=dialog); } + + .webRTC-shareDevices-notification-icon, + #webRTC-shareDevices-notification-icon { + list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16@2x.png); } + + .webRTC-sharingDevices-notification-icon, + #webRTC-sharingDevices-notification-icon { + list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16@2x.png); } + + .webRTC-shareMicrophone-notification-icon, + #webRTC-shareMicrophone-notification-icon { + list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16@2x.png); } + + .webRTC-sharingMicrophone-notification-icon, + #webRTC-sharingMicrophone-notification-icon { + list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16@2x.png); } + + .webRTC-shareScreen-notification-icon, + #webRTC-shareScreen-notification-icon { + list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16@2x.png); } + + .webRTC-sharingScreen-notification-icon, + #webRTC-sharingScreen-notification-icon { + list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16@2x.png); } + + .popup-notification-icon[popupid="webRTC-sharingDevices"], + .popup-notification-icon[popupid="webRTC-shareDevices"] { + list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64@2x.png); } + + .popup-notification-icon[popupid="webRTC-sharingMicrophone"], + .popup-notification-icon[popupid="webRTC-shareMicrophone"] { + list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64@2x.png); } + + .popup-notification-icon[popupid="webRTC-sharingScreen"], + .popup-notification-icon[popupid="webRTC-shareScreen"] { + list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64@2x.png); } } +.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; } + +/* Notification icon box */ +#notification-popup-box { + border-radius: 2.5px 0 0 2.5px; + margin-top: -1px; + margin-bottom: -1px; } + +.notification-anchor-icon:-moz-focusring { + outline: 1px dotted -moz-DialogText; } + +.indexedDB-notification-icon, +#indexedDB-notification-icon { + list-style-image: url(moz-icon://stock/gtk-dialog-question?size=16); } + +#pointerLock-cancel { + margin: 0px; } + +/* 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 { + -moz-margin-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 { + -moz-padding-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 { + -moz-margin-start: 1ch; + -moz-margin-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; + -moz-margin-start: 3ch; } + +notification[value="translation"] button:not([type="menu"]) > .button-box { + -moz-margin-end: 3ch; } + +notification[value="translation"] menulist > .menulist-dropmarker { + display: block; } + +/* Loop/ Hello browser styles */ +notification[value="loop-sharing-notification"] .button-menubutton-button { + min-width: 0; } + +notification[value="loop-sharing-notification"] .messageImage { + list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png); } + +#treecolAutoCompleteImage { + max-width: 36px; } + +.ac-result-type-bookmark, +.autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) { + list-style-image: url("chrome://browser/skin/places/star-icons.png"); + -moz-image-region: rect(0px 32px 16px 16px); + width: 16px; + height: 16px; } + +.ac-result-type-keyword, +.autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage), +richlistitem[type~="action"][actiontype="searchengine"] > .ac-title-box > .ac-site-icon { + list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); + width: 16px; + height: 16px; } + +.ac-result-type-keyword[selected="true"], +.autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected), +richlistitem[type~="action"][actiontype="searchengine"][selected="true"] > .ac-title-box > .ac-site-icon { + list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted); } + +.ac-result-type-tag, +.autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) { + list-style-image: url("chrome://browser/skin/places/tag.png"); + width: 16px; + height: 16px; } + +.ac-comment { + font-size: 1.05em; } + +.ac-extra > .ac-comment { + font-size: inherit; } + +.ac-url-text, +.ac-action-text { + color: -moz-nativehyperlinktext; + font-size: 0.9em; } + +richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon { + list-style-image: url("chrome://browser/skin/actionicon-tab.png"); + padding: 0 3px; } + +.autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) { + color: GrayText; } + +.ac-comment[selected="true"], +.ac-url-text[selected="true"], +.ac-action-text[selected="true"] { + color: inherit !important; } + +.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 > toolbarbutton { + -moz-appearance: none; + padding: 0 2px; + list-style-image: url("chrome://browser/skin/reload-stop-go.png"); } + +#urlbar-reload-button { + -moz-image-region: rect(0, 14px, 14px, 0); } + +#urlbar-reload-button:not([disabled]):hover { + background-image: radial-gradient(circle closest-side, rgba(102, 204, 255, 0.2), transparent); + -moz-image-region: rect(14px, 14px, 28px, 0); } + +#urlbar-reload-button:not([disabled]):hover:active { + background-image: radial-gradient(circle closest-side, rgba(51, 187, 255, 0.1), transparent); + -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 { + background-image: radial-gradient(circle closest-side, rgba(68, 217, 38, 0.2), transparent); + -moz-image-region: rect(14px, 42px, 28px, 28px); } + +#urlbar-go-button:hover:active { + background-image: radial-gradient(circle closest-side, rgba(68, 217, 38, 0.1), transparent); + -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 { + background-image: radial-gradient(circle closest-side, rgba(255, 138, 128, 0.3), transparent); + -moz-image-region: rect(14px, 28px, 28px, 14px); } + +#urlbar-stop-button:hover:active { + background-image: radial-gradient(circle closest-side, rgba(255, 138, 128, 0.1), transparent); + -moz-image-region: rect(28px, 28px, 42px, 14px); } + +@media (min-resolution: 1.1dppx) { + #urlbar > toolbarbutton { + list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png"); } + + #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); } + + #urlbar > toolbarbutton > .toolbarbutton-icon { + width: 14px; } } +/* Popup blocker button */ +#page-report-button { + list-style-image: url("chrome://browser/skin/Info.png"); } + +/* Reading List button */ +#urlbar:not([focused]):not(:hover) #readinglist-addremove-button { + opacity: 0; + width: 0px; } + +#readinglist-addremove-button { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage"); + -moz-image-region: rect(0, 14px, 14px, 0); + transition: width 150ms ease-in-out, opacity 150ms ease-in-out 150ms; + opacity: 1; + width: 20px; } + +#readinglist-addremove-button:hover { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage-hover"); } + +#readinglist-addremove-button:active { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage-active"); } + +#readinglist-addremove-button[already-added="true"] { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded"); } + +#readinglist-addremove-button[already-added="true"]:hover { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded-hover"); } + +#readinglist-addremove-button[already-added="true"]:active { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded-active"); } + +/* 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 */ +.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; } + +/* social recommending panel */ +#social-mark-button { + -moz-image-region: rect(0, 16px, 16px, 0); } + +/* 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; } + +.panel-promo-box { + margin: 8px -10px -10px -10px; + padding: 8px 10px; + border-top: 1px solid ThreeDShadow; + background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.08) 6px); } + +.panel-promo-icon { + list-style-image: url("chrome://browser/skin/sync-notification-24.png"); + -moz-margin-end: 10px; + vertical-align: middle; } + +.panel-promo-closebutton { + -moz-appearance: none; + height: 16px; + width: 16px; } + +.panel-promo-closebutton > .toolbarbutton-text { + padding: 0; } + +/* Content area */ +#sidebar { + background-color: Window; } + +/* Findbar */ +.browserContainer > findbar { + background-color: -moz-dialog; + color: -moz-DialogText; + border-top: 1px solid; + -moz-border-top-colors: #dcdfe3; + text-shadow: none; } + +.browserContainer > findbar .findbar-textbox { + -moz-appearance: none; + border: 1px solid #cfd6e6; + box-shadow: none; + margin: 0; + padding: 5px; + width: 14em; } + .browserContainer > findbar .findbar-textbox[focused="true"] { + border-color: #5294E2; } + .browserContainer > findbar .findbar-textbox:-moz-locale-dir(ltr) { + border-radius: 20px 0 0 20px; + border-right-width: 0; } + .browserContainer > findbar .findbar-textbox:-moz-locale-dir(rtl) { + border-radius: 0 20px 20px 0; + border-left-width: 0; } + +.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 { + border-color: #5294E2; + box-shadow: none; } + +.browserContainer > findbar .findbar-find-previous:not([disabled]):active, +.browserContainer > findbar .findbar-find-next:not([disabled]):active { + background: #5294E2; + border-color: #5294E2; + box-shadow: none; } + +/* Tabstrip */ +:root { + --tab-toolbar-navbar-overlap: 1px; + --tab-min-height: 31px; } + +#TabsToolbar { + --tab-separator-image: url(chrome://browser/skin/tabbrowser/tab-separator.png); + --tab-separator-size: 3px 100%; + --tab-separator-opacity: 1; } + +/* 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; } + +/* 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 { + -moz-padding-end: 9px; + -moz-padding-start: 9px; } + +.tab-content[pinned] { + -moz-padding-end: 3px; } + +.tab-throbber, +.tab-icon-image, +.tab-close-button { + margin-top: 1px; } + +.tab-throbber, +.tab-icon-image { + height: 16px; + width: 16px; + -moz-margin-end: 6px; } + +.tab-icon-image { + list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); } + +.tab-icon-overlay { + width: 16px; + height: 16px; + margin-top: 10px; + -moz-margin-start: -16px; + display: none; } + +.tab-icon-overlay[crashed] { + display: -moz-box; + list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg"); } + +.tab-throbber[busy] { + list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png"); } + +.tab-throbber[progress] { + list-style-image: url("chrome://browser/skin/tabbrowser/loading.png"); } + +.tab-label { + -moz-margin-end: 0; + -moz-margin-start: 0; } + +.tab-close-button { + -moz-margin-start: 4px; + -moz-margin-end: -2px; + padding: 0; } + +.tab-background, +.tabs-newtab-button { + /* overlap the tab curves */ + -moz-margin-end: -15px; + -moz-margin-start: -15px; } + +.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox { + -moz-padding-end: 15px; + -moz-padding-start: 15px; } + +/* 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(--tab-toolbar-navbar-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]) { + -moz-margin-start: -2px; + -moz-margin-end: -12px; } + +.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) { + -moz-margin-start: -12px; + -moz-margin-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[visuallyselected=true]::after, +.tab-background-start[visuallyselected=true]::before, +.tab-background-start, +.tab-background-end, +.tab-background-end[visuallyselected=true]::after, +.tab-background-end[visuallyselected=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); } + +/* 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[visuallyselected=true]::after, +.tab-background-end[visuallyselected=true]::after { + /* position ::after on top of its parent */ + -moz-margin-start: -30px; + background-size: 100% 100%; + content: ""; + display: -moz-box; + position: relative; } + +.tab-background-start[visuallyselected=true]::before, +.tab-background-end[visuallyselected=true]::before { + /* all ::before pseudo elements */ + content: ""; + display: -moz-box; } + +.tab-background-start[visuallyselected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, +.tab-background-end[visuallyselected=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[visuallyselected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, +.tab-background-start[visuallyselected=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[visuallyselected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, +.tab-background-end[visuallyselected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { + clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-start); } + +.tab-background-end[visuallyselected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, +.tab-background-start[visuallyselected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { + clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-end); } + +.tab-background-middle[visuallyselected=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: auto 100%; + /* 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[visuallyselected=true]:-moz-lwtheme { + background-color: transparent; + background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png), linear-gradient(transparent 0px, transparent 2px, rgba(255, 255, 255, 0.35) 2px, rgba(255, 255, 255, 0.35) 3px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0.65) 4px, rgba(255, 255, 255, 0.3)); + /*, +lwtHeader;*/ + /* Don't stretch the LWT header images */ + background-size: auto 100%, auto 100%, auto auto; } + +/* These LWT styles are normally overridden by browser-lightweightTheme.css */ +.tab-background-start[visuallyselected=true]:-moz-lwtheme::before, +.tab-background-end[visuallyselected=true]:-moz-lwtheme::before { + background-image: linear-gradient(transparent 0px, transparent 2px, rgba(255, 255, 255, 0.35) 2px, rgba(255, 255, 255, 0.35) 3px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0.65) 4px, rgba(255, 255, 255, 0.3)); } + +.tab-background-start[visuallyselected=true]:-moz-lwtheme::before, +.tab-background-end[visuallyselected=true]:-moz-lwtheme::before, +.tab-background-middle[visuallyselected=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([visuallyselected=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-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[pinned][titlechanged]:not([visuallyselected="true"]) > .tab-stack > .tab-content { + 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%; } + +/* New tab button */ +.tabs-newtab-button { + width: calc(36px + 30px); } + +#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: menubar; + color: -moz-menubartext; } + +#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 > .tab-label { + outline: 1px dotted; } + +#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"); } + .close-icon:hover { + background-image: url("chrome://browser/skin/custom_images/light/tabs/tab-close-hover.svg"); } + .close-icon:active:hover { + background-image: url("chrome://browser/skin/custom_images/light/tabs/tab-close-active.svg"); } + .tabbrowser-tab:not([selected="true"]) .close-icon { + background-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-close-inactive.svg"); } + .tabbrowser-tab:not([selected="true"]) .close-icon:hover { + background-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-close-hover.svg"); } + .tabbrowser-tab:not([selected="true"]) .close-icon:active { + background-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-close-active.svg"); } + +/* Tabstrip new tab button */ +.tabs-newtab-button, +#TabsToolbar > #new-tab-button, +#TabsToolbar > #wrapper-new-tab-button > #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_16.png"); } + +.alltabs-item[tabIsVisible] { + /* box-shadow instead of background-color to work around native styling */ + box-shadow: inset -5px 0 ThreeDShadow; } + +/* Sidebar */ +#sidebar-throbber[loading="true"] { + list-style-image: url("chrome://global/skin/icons/loading_16.png"); + -moz-margin-end: 4px; } + +toolbarbutton.chevron { + list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important; } + +toolbar[brighttext] toolbarbutton.chevron:not(:hover):not([open="true"]) { + 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; } + +/* Ctrl-Tab */ +.ctrlTab-preview { + -moz-appearance: toolbarbutton; } + +.tabPreview-canvas { + box-shadow: 0 0 5px ThreeDShadow; } + +.ctrlTab-preview:focus .tabPreview-canvas, +.ctrlTab-preview:hover .tabPreview-canvas { + box-shadow: none; } + +.ctrlTab-favicon[src] { + background-color: white; + width: 20px; + height: 20px; + padding: 2px; } + +#ctrlTab-panel { + padding: 10px; } + +.ctrlTab-preview:not(#ctrlTab-showAll) .tabPreview-canvas { + margin-bottom: 2px; } + +#ctrlTab-showAll { + -moz-appearance: button; + color: ButtonText; + padding: 0 3px; + margin-top: 10px; } + +/* Sync Panel */ +.sync-panel-icon { + height: 32px; + width: 32px; + background: url("chrome://browser/content/abouthome/sync.png") top left no-repeat; } + +.sync-panel-inner { + width: 0; + padding-left: 10px; } + +.sync-panel-button-box { + margin-top: 1em; } + +#sync-error-panel-title, +#sync-start-panel-title { + font-size: 120%; + font-weight: bold; + margin-bottom: 5px; } + +#sync-start-panel-subtitle, +#sync-error-panel-subtitle { + 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; } + +#full-screen-warning-message { + background-image: url("chrome://browser/skin/fullscreen-darknoise.png"); + color: white; + border-radius: 4px; + margin-top: 30px; + padding: 30px 50px; + box-shadow: 0 0 2px white; } + +#full-screen-warning-container[obscure-browser] { + background-color: rgba(0, 0, 0, 0.3); } + +.full-screen-description { + font-size: 150%; } + +#full-screen-domain-text { + font-size: 300%; } + +.full-screen-approval-button, +#full-screen-remember-decision { + font-size: 120%; } + +/* 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-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://browser/skin/devtools/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; + -moz-border-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://browser/skin/devtools/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://browser/skin/devtools/close.png"); } + +.devtools-responsiveui-rotate { + list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate.png"); } + +@media (min-resolution: 1.25dppx) { + .devtools-responsiveui-close { + list-style-image: url("chrome://browser/skin/devtools/close@2x.png"); } + + .devtools-responsiveui-rotate { + list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate@2x.png"); } } +.devtools-responsiveui-touch { + list-style-image: url("chrome://browser/skin/devtools/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.25dppx) { + .devtools-responsiveui-touch { + list-style-image: url("chrome://browser/skin/devtools/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://browser/skin/devtools/responsiveui-screenshot.png"); } + +@media (min-resolution: 1.25dppx) { + .devtools-responsiveui-screenshot { + list-style-image: url("chrome://browser/skin/devtools/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://browser/skin/devtools/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://browser/skin/devtools/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://browser/skin/devtools/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 { + width: 40px; + height: 30px; + list-style-image: url("chrome://browser/skin/devtools/responsiveui-home.png"); } + +.devtools-responsiveui-sleep-button { + -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-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.25dppx) { + .devtools-responsiveui-resizebarV { + background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer@2x.png"); } + + .devtools-responsiveui-resizebarH { + background-image: url("chrome://browser/skin/devtools/responsive-horizontal-resizer@2x.png"); } + + .devtools-responsiveui-resizehandle { + background-image: url("chrome://browser/skin/devtools/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). */ +:root[devtoolstheme="light"] #developer-toolbar { + --gcli-background-color: #ebeced; + /* --theme-tab-toolbar-background */ + --gcli-input-background: #f0f1f2; + /* --theme-toolbar-background */ + --gcli-input-focused-background: #f7f7f7; + /* --theme-sidebar-background */ + --gcli-input-color: #18191a; + /* --theme-body-color */ + --gcli-border-color: #aaaaaa; + /* --theme-splitter-color */ + --selection-background: #4c9ed9; + /* --theme-selection-background */ + --selection-color: #f5f7fa; + /* --theme-selection-color */ } + +:root[devtoolstheme="dark"] #developer-toolbar { + --gcli-background-color: #343c45; + /* --theme-toolbar-background */ + --gcli-input-background: rgba(37, 44, 51, 0.6); + /* --theme-tab-toolbar-background */ + --gcli-input-focused-background: #252c33; + /* --theme-tab-toolbar-background */ + --gcli-input-color: #b6babf; + /* --theme-body-color-alt */ + --gcli-border-color: black; + /* --theme-splitter-color */ + --selection-background: #1d4f73; + /* --theme-selection-background */ + --selection-color: #f5f7fa; + /* --theme-selection-color */ } + +#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: transparent; + margin: 0; + padding: 0 10px; + width: 32px; } + +.developer-toolbar-button > image { + margin: auto 10px; } + +:root[devtoolstheme="light"] #developer-toolbar > toolbarbutton:not([checked=true]) > image, +:root[devtoolstheme="light"] .gclitoolbar-input-node:not([focused=true])::before { + filter: url("chrome://browser/skin/devtools/filters.svg#invert"); } + +.developer-toolbar-button > .toolbarbutton-icon, +#developer-toolbar-closebutton > .toolbarbutton-icon { + width: 16px; + height: 16px; } + +#developer-toolbar-toolbox-button { + list-style-image: url("chrome://browser/skin/devtools/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.25dppx) { + #developer-toolbar-toolbox-button { + list-style-image: url("chrome://browser/skin/devtools/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); } } +#developer-toolbar-closebutton { + list-style-image: url("chrome://browser/skin/devtools/close.png"); + -moz-appearance: none; + border: none; + margin: 0 4px; + min-width: 16px; + width: 16px; + opacity: 0.6; } + +@media (min-resolution: 1.25dppx) { + #developer-toolbar-closebutton { + list-style-image: url("chrome://browser/skin/devtools/close@2x.png"); } } +#developer-toolbar-closebutton > .toolbarbutton-icon { + /* XXX Buttons have padding in widget/ that we don't want here but can't override with good CSS, so we must + use evil CSS to give the impression of smaller content */ + margin: -4px; } + +#developer-toolbar-closebutton > .toolbarbutton-text { + display: none; } + +#developer-toolbar-closebutton:hover { + opacity: 0.8; } + +#developer-toolbar-closebutton:hover:active { + opacity: 1; } + +/* 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: url("chrome://browser/skin/devtools/commandline-icon.png"); + background-position: 0 center; + background-size: 32px 16px; } + +.gclitoolbar-input-node[focused="true"]::before { + background-position: -16px center; } + +@media (min-resolution: 1.25dppx) { + .gclitoolbar-input-node::before { + background-image: url("chrome://browser/skin/devtools/commandline-icon@2x.png"); } } +.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 { + -moz-margin-start: 6px; + margin-bottom: 0; + text-overflow: ellipsis; } + +.center-item-warning-icon { + background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png"); + background-repeat: no-repeat; + width: 16px; + height: 15px; + -moz-margin-start: 6px; } + +.click-to-play-plugins-notification-button-container { + background-color: rgba(24, 26, 27, 0.07); + border-top: 1px solid rgba(24, 26, 27, 0.12); + 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-pluginNormal.png"); + -moz-image-region: rect(0, 16px, 16px, 0); } + +/* 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-pluginBlocked.png"); } + +.popup-notification-item-title[popupid="bad-content"] { + font-weight: bold; } + +.popup-notification-item-message[popupid="bad-content"] { + width: 17em; } + +.popup-notification-item-message[popupid="bad-content"][mixedblockdisabled]:not(.popup-notification-item-message-critical), +.popup-notification-item-message[popupid="bad-content"][trackingblockdisabled]:not(.popup-notification-item-message-critical) { + color: GrayText; } + +.popup-notification-item-message-critical[popupid="bad-content"] { + color: #d74345; + font-style: italic; } + +.popup-notification-footer[popupid="bad-content"] { + padding-top: 1em; } + +#login-fill-testing { + color: #b33; + font-weight: bold; } + +#login-fill-list { + border: 1px solid black; + max-height: 20em; } + +.login-hostname { + margin: 4px; + font-weight: bold; } + +.login-username { + margin: 4px; + color: #888; } + +/* 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"] > #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] > #downloads-indicator-anchor > #downloads-indicator-icon, +#nav-bar #downloads-button[cui-areatype="toolbar"][attention] > #downloads-indicator-anchor > #downloads-indicator-icon, +#TabsToolbar #downloads-button[cui-areatype="toolbar"][attention] > #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] { + 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] > #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); + -moz-border-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; + -moz-margin-end: 2px; } + +/* Social toolbar item */ +#social-undoactivation-button { + -moz-margin-start: 0; + /* override default label margin to match description margin */ } + +.social-activation-icon { + width: auto; + height: auto; + max-height: 64px; + max-width: 64px; } + +#social-activation-message { + max-width: 250px; } + +#social-activation-message > label { + margin: 0; } + +/* social toolbar provider menu */ +#social-statusarea-popup { + margin-top: 0; + margin-left: -12px; + margin-right: -12px; } + +.social-statusarea-user { + list-style-image: url("chrome://global/skin/icons/information-32.png"); } + +.social-statusarea-user-portrait { + width: 32px; + height: 32px; + border-radius: 2px; + margin: 10px; } + +.social-panel > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; } + +#social-sidebar-header { + padding: 3px; } + +#manage-share-providers, +#social-sidebar-button { + list-style-image: url("chrome://browser/skin/Toolbar.png"); + -moz-image-region: rect(0, 468px, 18px, 450px); } + +#social-sidebar-button { + -moz-appearance: none; + border: none; + padding: 0; + margin: 2px; } + +#manage-share-providers > .toolbarbutton-icon, +#social-sidebar-button > .toolbarbutton-icon { + min-height: 18px; + min-width: 18px; } + +#social-sidebar-button > .toolbarbutton-menu-dropmarker { + display: none; } + +#social-sidebar-button[loading="true"] { + list-style-image: url("chrome://global/skin/icons/loading_16.png"); } + +#social-sidebar-favico { + max-height: 16px; + max-width: 16px; + padding: 0; + margin: 2px; } + +.chat-status-icon { + max-height: 16px; + max-width: 16px; + padding: 0; } + +.chat-toolbarbutton { + -moz-appearance: none; + border: none; + padding: 0 3px; + margin: 0; + background: none; } + +.chat-toolbarbutton:hover { + background-color: rgba(255, 255, 255, 0.35); } + +.chat-toolbarbutton:hover:active { + background-color: rgba(255, 255, 255, 0.5); } + +.chat-toolbarbutton > .toolbarbutton-text { + display: none; } + +.chat-toolbarbutton > .toolbarbutton-icon { + width: 16px; + height: 16px; } + +.chat-close-button { + list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close"); } + +.chat-close-button:-moz-any(:hover, :hover:active) { + list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-active"); } + +.chat-minimize-button { + list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize"); } + +.chat-minimize-button:-moz-any(:hover, :hover:active) { + list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-active"); } + +.chat-swap-button { + list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand"); + transform: rotate(180deg); } + +.chat-swap-button:-moz-any(:hover, :hover:active) { + list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-active"); } + +chatbar > chatbox > .chat-titlebar > .chat-swap-button { + transform: none; } + +.chat-title { + font-weight: bold; + color: black; + text-shadow: none; + cursor: inherit; } + +.chat-titlebar { + height: 30px; + min-height: 30px; + width: 100%; + margin: 0; + padding: 7px 6px; + border: none; + border-bottom: 1px solid #ccc; + cursor: pointer; } + +.chat-titlebar > .notification-anchor-icon { + margin-left: 2px; + margin-right: 2px; } + +.chat-titlebar[minimized="true"] { + border-bottom: none; } + +.chat-titlebar[activity] { + background-image: radial-gradient(ellipse closest-side at center, white, transparent); + background-repeat: no-repeat; + background-size: 100% 20px; + background-position: 0 -10px; } + +chatbox[dark=true] > .chat-titlebar, +chatbox[dark=true] > .chat-titlebar[selected] { + border-bottom: none; + background-color: #000; + background-image: none; } + +chatbox[dark=true] > .chat-titlebar > hbox > .chat-title { + font-weight: normal; + color: #c1c1c1; } + +.chat-frame { + padding: 0; + margin: 0; + overflow: hidden; } + +.chatbar-button { + list-style-image: url("chrome://browser/skin/social/services-16.png"); + margin: 0; + padding: 2px; + height: 21px; + width: 21px; + border: 1px solid #ccc; + border-bottom: none; } + +@media (min-resolution: 2dppx) { + .chatbar-button { + list-style-image: url("chrome://browser/skin/social/services-16@2x.png"); } } +.chatbar-button > .toolbarbutton-icon { + width: 16px; } + +.chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon { + width: auto; + height: auto; + max-height: 16px; + max-width: 16px; } + +.chatbar-button[open="true"] { + box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), 0 1px rgba(255, 255, 255, 0.2); } + +.chatbar-button > .toolbarbutton-text, +.chatbar-button > .toolbarbutton-menu-dropmarker { + display: none; } + +.chatbar-button > menupopup > menuitem[activity] { + font-weight: bold; } + +.chatbar-innerbox { + background: transparent; + margin: -285px 0 0; + overflow: hidden; } + +chatbar { + -moz-margin-end: 20px; } + +chatbox { + -moz-margin-start: 4px; + background-color: white; + border: 1px solid #ccc; + border-bottom: none; } + +window > chatbox { + -moz-margin-start: 0px; + margin: 0px; + border: none; + padding: 0px; } + +.chat-titlebar { + background-color: #d9d9d9; + background-image: linear-gradient(rgba(255, 255, 255, 0.3), transparent); } + +.chat-titlebar[selected] { + background-color: #f0f0f0; } + +.chatbar-button { + -moz-appearance: none; + background-color: #d9d9d9; + background-image: linear-gradient(rgba(255, 255, 255, 0.3), transparent); } + +.chatbar-button > .toolbarbutton-icon { + -moz-margin-end: 0; } + +.chatbar-button:hover, +.chatbar-button[open="true"] { + background-color: #f0f0f0; } + +.chatbar-button[activity] { + background-image: radial-gradient(circle farthest-corner at center 3px, #e9f2fc 3%, rgba(172, 206, 255, 0.75) 40%, rgba(87, 151, 201, 0.5) 80%, transparent); } + +chatbox { + border-top-left-radius: 2.5px; + border-top-right-radius: 2.5px; } + +/* 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 */ +#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: #666666; } + +#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: #bbb; } + +#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: #f7f7f7; + color: black; + text-shadow: none; } + +#customization-palette, +#customization-empty { + padding: 0 25px 25px; } + +#customization-header { + font-size: 1.75em; + line-height: 1.75em; + color: #666; + font-weight: 200; + margin: 25px 25px 12px; + padding-bottom: 12px; + border-bottom: 1px solid #e5e5e5; } + +#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: #ececec; } + +#customization-footer { + border-top: 1px solid #dddddd; + padding: 10px; } + +.customizationmode-button { + border: 1px solid silver; + border-radius: 3px; + margin: 5px; + padding: 2px 12px; + background-color: #fbfbfb; + color: #474747; + box-shadow: 0 1px rgba(255, 255, 255, 0.5), inset 0 1px rgba(255, 255, 255, 0.5); + -moz-appearance: none; } + +#customization-titlebar-visibility-button[checked], +#customization-devedition-theme-button[checked] { + background-color: #dadada; + border-color: #a8a8a8; + text-shadow: 0 1px #ececec; + box-shadow: 0 1px rgba(255, 255, 255, 0.5), inset 0 1px #c4c4c4; } + +.customizationmode-button[disabled="true"] { + opacity: .5; } + +.customizationmode-button > .box-inherit > .box-inherit > .button-icon, +.customizationmode-button > .button-box > .button-icon { + height: 24px; } + +#customization-titlebar-visibility-button { + list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png"); + -moz-image-region: rect(0, 24px, 24px, 0); } + +#customization-lwtheme-button, +#customization-titlebar-visibility-button { + padding: 2px 7px; } + +#customization-lwtheme-button > .box-inherit > .box-inherit > .button-text, +#customization-titlebar-visibility-button > .button-box > .button-text { + /* Sadly, button.css thinks its margins are perfect for everyone. */ + -moz-margin-start: 6px !important; } + +#customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon { + width: 20px; + height: 20px; + border-radius: 2px; + background-size: contain; } + +#customization-titlebar-visibility-button > .button-box > .button-icon { + vertical-align: middle; } + +#customization-titlebar-visibility-button[checked] { + -moz-image-region: rect(0, 48px, 24px, 24px); } + +@media (min-resolution: 1.1dppx) { + #customization-titlebar-visibility-button { + list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png"); + -moz-image-region: rect(0, 48px, 48px, 0); } + + #customization-titlebar-visibility-button[checked] { + -moz-image-region: rect(0, 96px, 48px, 48px); } } +#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 .3s ease-in-out; } + +#customization-palette { + transition: opacity .3s ease-in-out; + opacity: 0; } + +#customization-palette[showing="true"] { + opacity: 1; } + +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-container > .toolbarbutton-icon, +toolbarpaletteitem > toolbaritem.panel-wide-item, +toolbarpaletteitem > toolbarbutton[type="menu-button"] { + transition: transform 0.3s cubic-bezier(0.6, 2, 0.75, 1.5) !important; } + +toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon, +toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-container > .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; } + +#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 { + -moz-margin-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; + -moz-padding-end: 5px; + padding-bottom: 0; + -moz-padding-start: 0; } + +.customization-lwtheme-menu-theme[defaulttheme] { + list-style-image: url(chrome://browser/skin/theme-switcher-icon.png); } + +.customization-lwtheme-menu-theme[active="true"], +.customization-lwtheme-menu-theme:hover { + background-color: rgba(24, 26, 27, 0.08); + border-color: rgba(24, 26, 27, 0.11); } + +.customization-lwtheme-menu-theme[active="true"], +.customization-lwtheme-menu-theme:hover:active { + background-color: rgba(24, 26, 27, 0.15); } + +.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: rgba(24, 26, 27, 0.05); + color: gray; + margin-right: -10px; + margin-left: -10px; } + +#customization-lwtheme-menu-header { + margin-top: -10px; + border-bottom: 1px solid rgba(24, 26, 27, 0.05); } + +#customization-lwtheme-menu-recommended { + border-top: 1px solid rgba(24, 26, 27, 0.05); + border-bottom: 1px solid rgba(24, 26, 27, 0.05); } + +#customization-lwtheme-menu-footer { + background: linear-gradient(rgba(24, 26, 27, 0.05) 60%, transparent) border-box; + border-top: 1px solid rgba(24, 26, 27, 0.05); + margin-bottom: -10px; } + +.customization-lwtheme-menu-footeritem { + -moz-appearance: none; + -moz-box-flex: 1; + color: gray; + border-style: none; + padding: 10px; + margin-left: 0; + margin-right: 0; } + +.customization-lwtheme-menu-footeritem:hover { + background: linear-gradient(rgba(24, 26, 27, 0.08) 40%, transparent) padding-box; } + +.customization-lwtheme-menu-footeritem:first-child { + -moz-border-end: 1px solid rgba(24, 26, 27, 0.15); } + +/* 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; + -moz-margin-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; + border: none; + background-color: transparent; + /* This is a buffer to compensate for the movement in the "wobble" effect */ + 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-margin-end: 14px; } + +#UITourTooltipBody > vbox { + padding-top: 4px; } + +#UITourTooltipIconContainer { + -moz-margin-start: -16px; } + +#UITourTooltipIcon { + width: 48px; + height: 48px; + -moz-margin-start: 28px; + -moz-margin-end: 28px; } + +#UITourTooltipTitle, +#UITourTooltipDescription { + max-width: 20rem; } + +#UITourTooltipTitle { + font-size: 1.45rem; + font-weight: bold; + -moz-margin-start: 0; + -moz-margin-end: 0; + margin: 0 0 9px 0; } + +#UITourTooltipDescription { + -moz-margin-start: 0; + -moz-margin-end: 0; + font-size: 1.15rem; + line-height: 1.8rem; + margin-bottom: 0; + /* Override global.css */ } + +#UITourTooltipClose { + -moz-appearance: none; + border: none; + background-color: transparent; + min-width: 0; + -moz-margin-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: 24px -16px -16px; + padding: 2em 15px; } + +#UITourTooltipButtons > button { + margin: 0 15px; } + +#UITourTooltipButtons > button:first-child { + -moz-margin-start: 0; } + +#UITourTooltipButtons > button[image] > .button-box > .button-icon { + width: 16px; + height: 16px; + -moz-margin-end: 5px; } + +#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 > 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; + -moz-margin-start: 0px; + /* The !important is required to override OSX default style. */ + -moz-margin-end: 12px !important; } + +.messageImage.heartbeat { + width: 24px; + height: 24px; + -moz-margin-start: 8px; + -moz-margin-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; + -moz-margin-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 -moz-margin-end for all platforms defined in the .plain class */ + -moz-margin-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 { + -moz-margin-end: -4px; + height: 16px; + width: 16px; } + +#UITourTooltipButtons { + 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-back { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back"); } + +#context-back[_moz-menuactive=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-active"); } + +#context-back[disabled=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-disabled"); } + +#context-forward { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward"); } + +#context-forward[_moz-menuactive=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-active"); } + +#context-forward[disabled=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-disabled"); } + +#context-reload { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload"); } + +#context-reload[_moz-menuactive=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-active"); } + +#context-reload[disabled=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-disabled"); } + +#context-stop { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop"); } + +#context-stop[_moz-menuactive=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-active"); } + +#context-stop[disabled=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-disabled"); } + +#context-bookmarkpage { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark"); } + +#context-bookmarkpage[_moz-menuactive=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-active"); } + +#context-bookmarkpage[disabled=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); } + +#context-back:-moz-locale-dir(rtl), +#context-forward:-moz-locale-dir(rtl), +#context-reload:-moz-locale-dir(rtl) { + transform: scaleX(-1); } + +#context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon { + width: 16px; + height: 16px; + margin: 7px; } + +#context-media-eme-learnmore { + list-style-image: url("chrome://browser/skin/drm-icon.svg#chains"); } + +#context-navigation > .menuitem-iconic > .menu-iconic-left { + visibility: visible; + /* override toolkit/themes/linux/global/menu.css */ + -moz-padding-end: 0 !important; + -moz-margin-end: 0 !important; } |