diff options
Diffstat (limited to 'arc-firefox-theme/chrome/browser/sass/_browser-sass.scss')
| -rw-r--r-- | arc-firefox-theme/chrome/browser/sass/_browser-sass.scss | 845 |
1 files changed, 521 insertions, 324 deletions
diff --git a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss index b7cd1ad..51699b3 100644 --- a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss +++ b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss @@ -149,12 +149,29 @@ toolbarbutton.bookmark-item:not(.subviewbutton):not(:hover):not(:active):not([op color: inherit; } +//toolbarbutton.bookmark-item:not(.subviewbutton) { +// -moz-appearance: none; +// border: 1px solid transparent; +// border-radius: 2px; +// transition-property: background-color, border-color; +// transition-duration: 150ms; +//} +// +//toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([open]) { +// background: var(--toolbarbutton-hover-background); +// border-color: var(--toolbarbutton-hover-bordercolor); +//} +// //toolbarbutton.bookmark-item:not(.subviewbutton):hover:active, //toolbarbutton.bookmark-item[open="true"] { -// padding-top: 3px; -// padding-bottom: 1px; -// -moz-padding-start: 4px; -// -moz-padding-end: 2px; +// background: var(--toolbarbutton-active-background); +// box-shadow: var(--toolbarbutton-active-boxshadow); +// border-color: var(--toolbarbutton-active-bordercolor); +//} +// +//toolbarbutton.bookmark-item:not(.subviewbutton):hover:-moz-lwtheme { +// background: var(--toolbarbutton-hover-background); +// border-color: var(--toolbarbutton-hover-bordercolor); //} .bookmark-item > .toolbarbutton-icon, @@ -660,7 +677,6 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { border-image: url("chrome://browser/skin/custom_images/#{$asset_path}/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, @@ -1049,6 +1065,172 @@ list-style-image: url("chrome://browser/skin/custom_images/toolbar-icons-active. -moz-image-region: rect(0, 738px, 18px, 720px); } +/* +@media (min-resolution: 1.1dppx) { + :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu), + #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { + list-style-image: url("chrome://browser/skin/Toolbar@2x.png"); + } + + toolbar[brighttext] :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu), + toolbar[brighttext] #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { + list-style-image: url("chrome://browser/skin/Toolbar-inverted@2x.png"); + } + + #back-button { + -moz-image-region: rect(0, 72px, 36px, 36px); + } + + #forward-button { + -moz-image-region: rect(0, 144px, 36px, 108px); + } + + #home-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 252px, 36px, 216px); + } + + #bookmarks-menu-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 288px, 36px, 252px); + } + + #bookmarks-menu-button[cui-areatype="toolbar"][starred] { + -moz-image-region: rect(0, 324px, 36px, 288px); + } + + #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { + -moz-image-region: rect(0px, 1260px, 36px, 1224px); + } + + #history-panelmenu[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 360px, 36px, 324px); + } + + #downloads-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 396px, 36px, 360px); + } + + #add-ons-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 432px, 36px, 396px); + } + + #open-file-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 468px, 36px, 432px); + } + + #save-page-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 504px, 36px, 468px); + } + + #sync-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 1584px, 36px, 1548px); + } + + #containers-panelmenu[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 1620px, 36px, 1584px); + } + + #feed-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 576px, 36px, 540px); + } + + #social-share-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 612px, 36px, 576px); + } + + #characterencoding-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 648px, 36px, 612px); + } + + #new-window-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 684px, 36px, 648px); + } + + #e10s-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 684px, 36px, 648px); + } + + #e10s-button > .toolbarbutton-icon { + transform: scaleY(-1); + } + + #new-tab-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 720px, 36px, 684px); + } + + #privatebrowsing-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 756px, 36px, 720px); + } + + #find-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 792px, 36px, 756px); + } + + #print-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 828px, 36px, 792px); + } + + #fullscreen-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 864px, 36px, 828px); + } + + #developer-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 900px, 36px, 864px); + } + + #preferences-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 936px, 36px, 900px); + } + + #PanelUI-menu-button { + -moz-image-region: rect(0, 972px, 36px, 936px); + } + + #edit-controls[cui-areatype="toolbar"] > #cut-button { + -moz-image-region: rect(0, 1008px, 36px, 972px); + } + + #edit-controls[cui-areatype="toolbar"] > #copy-button { + -moz-image-region: rect(0, 1044px, 36px, 1008px); + } + + #edit-controls[cui-areatype="toolbar"] > #paste-button { + -moz-image-region: rect(0, 1080px, 36px, 1044px); + } + + #zoom-controls[cui-areatype="toolbar"] > #zoom-out-button { + -moz-image-region: rect(0, 1116px, 36px, 1080px); + } + + #zoom-controls[cui-areatype="toolbar"] > #zoom-in-button { + -moz-image-region: rect(0, 1152px, 36px, 1116px); + } + + #nav-bar-overflow-button { + -moz-image-region: rect(0, 1224px, 36px, 1188px); + } + + #email-link-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 1332px, 36px, 1296px); + } + + #sidebar-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 1368px, 36px, 1332px); + } + + #panic-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 1404px, 36px, 1368px); + } + + #panic-button[cui-areatype="toolbar"][open] { + -moz-image-region: rect(36px, 1404px, 72px, 1368px); + } + + #webide-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 1476px, 36px, 1440px); + } +} +*/ + /* Menu panel and palette styles */ :root { @@ -1503,7 +1685,7 @@ list-style-image: url("chrome://browser/skin/custom_images/toolbar-icons-active. /* Fullscreen window controls */ #window-controls { -moz-box-align: start; - -moz-margin-start: 10px; + margin-inline-start: 10px; } #close-button, #restore-button, #minimize-button { @@ -1533,11 +1715,11 @@ list-style-image: url("chrome://browser/skin/custom_images/toolbar-icons-active. } /* Location bar */ -//#nav-bar { +//#main-window { // --urlbar-border-color: ThreeDShadow; //} - -//#nav-bar:-moz-lwtheme { +// +//#navigator-toolbox:-moz-lwtheme { // --urlbar-border-color: rgba(0,0,0,.3); //} @@ -1582,6 +1764,14 @@ list-style-image: url("chrome://browser/skin/custom_images/toolbar-icons-active. margin-inline-start: 0; } +//.urlbar-input-box, +//#urlbar-display-box { +// padding-inline-start: 4px; +// border-inline-start: 1px solid var(--urlbar-separator-color); +// border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%); +// border-image-slice: 1; +//} + .urlbar-history-dropmarker { -moz-appearance: toolbarbutton-dropdown; transition: opacity 0.15s ease; @@ -1591,7 +1781,7 @@ list-style-image: url("chrome://browser/skin/custom_images/toolbar-icons-active. transition: none; } -#navigator-toolbox:not(:hover) #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker { +#navigator-toolbox:not(:hover) #nav-bar:not([customizing="true"]) #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker { opacity: 0; } @@ -1676,8 +1866,6 @@ list-style-image: url("chrome://browser/skin/custom_images/toolbar-icons-active. #urlbar-display-box { margin-top: -1px; margin-bottom: -1px; - border-inline-end: 1px solid #AAA; - margin-inline-end: 3px; } .urlbar-display { @@ -1784,20 +1972,6 @@ list-style-image: url("chrome://browser/skin/custom_images/toolbar-icons-active. // transition: background-color 150ms ease, padding-left, padding-right; } -//#identity-box:hover, -//#identity-box[open=true] { -// border-image-source: none; -//} - -//#identity-box:hover { -// background-color: var(--identity-box-hover-background-color); -//} - -//#identity-box:hover:active, -//#identity-box[open=true] { -// background-color: var(--identity-box-selected-background-color); -//} - #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { color: var(--identity-box-verified-color); } @@ -1814,31 +1988,27 @@ list-style-image: url("chrome://browser/skin/custom_images/toolbar-icons-active. padding-right: 2px; } -#notification-popup-box:not([hidden]) + #identity-box { - padding-inline-start: 9px; - border-radius: 0; -} - -window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box { - border-radius: 0; -} - -//window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box { -// padding-inline-start: calc(var(--backbutton-urlbar-overlap) + 4px); +//window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #identity-box { +// padding-inline-start: calc(var(--backbutton-urlbar-overlap) + 5px); //} - -//window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box { +// +//window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #identity-box { // /* Forward button hiding is delayed when hovered, so we should use the same // delay for the identity box. We handle both horizontal paddings (for LTR and // RTL), the latter two delays here are for padding-left and padding-right. */ // transition-delay: 0s, 100s, 100s; //} - -//window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box { +// +//window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > #identity-box { // /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */ -// padding-inline-start: calc(var(--backbutton-urlbar-overlap) + 4.01px); +// padding-inline-start: calc(var(--backbutton-urlbar-overlap) + 5.01px); //} +#notification-popup-box:not([hidden]) + #identity-box { + padding-inline-start: 9px; + border-radius: 0; +} + /* MAIN IDENTITY ICON */ #identity-icon { @@ -1847,11 +2017,20 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box list-style-image: url(chrome://browser/skin/identity-icon.svg#normal); } -#identity-box:hover > #identity-icon, +#identity-box:hover > #identity-icon:not(.no-hover), #identity-box[open=true] > #identity-icon { list-style-image: url(chrome://browser/skin/identity-icon.svg#hover); } +#identity-box.grantedPermissions > #identity-icon { + list-style-image: url(chrome://browser/skin/identity-icon.svg#notice); +} + +#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover), +#identity-box.grantedPermissions[open=true] > #identity-icon { + list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover); +} + #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon { list-style-image: url(chrome://branding/content/identity-icons-brand.svg); } @@ -1909,11 +2088,17 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box } #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon, -#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon { +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon { list-style-image: url(chrome://browser/skin/identity-secure.svg); visibility: visible; } +#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon { + list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg); + visibility: visible; +} + #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon, #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon { list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg); @@ -1927,16 +2112,29 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box visibility: visible; } -#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon { - list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg); - visibility: visible; + +#notification-popup-box { + padding: 5px 0px; + margin: -5px 0px; + margin-inline-end: -5px; + padding-inline-end: 5px; } -#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon { - list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg); - visibility: visible; +/* This class can be used alone or in combination with the class defining the + type of icon displayed. This rule must be defined before the others in order + for its list-style-image to be overridden. */ +.notification-anchor-icon { + width: 16px; + height: 16px; + margin-inline-start: 2px; + list-style-image: url(moz-icon://stock/gtk-dialog-info?size=16); } +@media (min-resolution: 1.1dppx) { + .notification-anchor-icon { + list-style-image: url(moz-icon://stock/gtk-dialog-info?size=dialog); + } +} .popup-notification-icon { width: 64px; @@ -1944,180 +2142,222 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box margin-inline-end: 10px; } -.popup-notification-icon[popupid="geolocation"] { - list-style-image: url(chrome://browser/skin/Geolocation-64.png); +#notification-popup-box > .notification-anchor-icon:not(.in-use):hover { + fill: #606060; } -.popup-notification-icon[popupid="xpinstall-disabled"], -.popup-notification-icon[popupid="addon-install-blocked"], -.popup-notification-icon[popupid="addon-install-origin-blocked"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg); +/* INDIVIDUAL NOTIFICATIONS */ + +/* For the moment we apply the color filter only on the icons listed here. + The first two selectors are used by socialchat.xml (bug 1275558). */ +.webRTC-sharingDevices-notification-icon, +.webRTC-sharingMicrophone-notification-icon, +.camera-icon, +.geo-icon, +.indexedDB-icon, +.install-icon, +.login-icon, +.microphone-icon, +.plugin-icon, +.pointerLock-icon, +.popup-icon, +.screen-icon, +.desktop-notification-icon, +.popup-notification-icon[popupid="geolocation"], +.popup-notification-icon[popupid="indexedDB-permissions-prompt"], +.popup-notification-icon[popupid="password"], +.popup-notification-icon[popupid="pointerLock"], +.popup-notification-icon[popupid="webRTC-shareDevices"], +.popup-notification-icon[popupid="webRTC-shareMicrophone"], +.popup-notification-icon[popupid="webRTC-shareScreen"], +.popup-notification-icon[popupid="webRTC-sharingDevices"], +.popup-notification-icon[popupid="webRTC-sharingMicrophone"], +.popup-notification-icon[popupid="webRTC-sharingScreen"], +.popup-notification-icon[popupid="web-notifications"] { + filter: url(chrome://browser/skin/filters.svg#fill); + fill: #999; } -.popup-notification-icon[popupid="addon-progress"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg); +/* The first two selectors are used by socialchat.xml (bug 1275558). The + notifications in the chat window are only shown when they are in use. */ +.webRTC-sharingDevices-notification-icon, +.webRTC-sharingMicrophone-notification-icon, +.in-use { + fill: #fea01b; } -.popup-notification-icon[popupid="addon-install-failed"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg); +.popup-notification-icon[popupid="web-notifications"], +.desktop-notification-icon { + list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification); } -.popup-notification-icon[popupid="addon-install-confirmation"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg); +.desktop-notification-icon.blocked { + list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked); } -#addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg); +.geo-icon { + list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-linux); } -.popup-notification-icon[popupid="addon-install-complete"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg); +.geo-icon.blocked { + list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-linux-blocked); } -.popup-notification-icon[popupid="addon-install-restart"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg); +.popup-notification-icon[popupid="geolocation"] { + list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-linux-detailed); } -.popup-notification-icon[popupid="click-to-play-plugins"] { - list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png); +.popup-notification-icon[popupid="indexedDB-permissions-prompt"], +.indexedDB-icon { + list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB); } -.popup-notification-icon[popupid="web-notifications"] { - list-style-image: url(chrome://browser/skin/web-notifications-icon.svg); +.indexedDB-icon.blocked { + list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked); } -.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); +.login-icon { + list-style-image: url(chrome://browser/skin/notification-icons.svg#login); } .popup-notification-icon[popupid="password"] { - list-style-image: url(chrome://mozapps/skin/passwordmgr/key-64.png); + list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed); } -.popup-notification-icon[popupid="webRTC-sharingDevices"], -.popup-notification-icon[popupid="webRTC-shareDevices"] { - list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64.png); +#login-fill-notification-icon { + /* Temporary solution until the capture and fill doorhangers are unified. */ + transform: scaleX(-1); } -.popup-notification-icon[popupid="webRTC-sharingMicrophone"], -.popup-notification-icon[popupid="webRTC-shareMicrophone"] { - list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64.png); +/* The first selector is used by socialchat.xml (bug 1275558). */ +.webRTC-sharingDevices-notification-icon, +.camera-icon, +.popup-notification-icon[popupid="webRTC-shareDevices"], +.popup-notification-icon[popupid="webRTC-sharingDevices"] { + list-style-image: url(chrome://browser/skin/notification-icons.svg#camera); } -.popup-notification-icon[popupid="webRTC-sharingScreen"], -.popup-notification-icon[popupid="webRTC-shareScreen"] { - list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64.png); +.camera-icon.blocked { + list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked); } -.popup-notification-icon[popupid="pointerLock"] { - list-style-image: url(chrome://browser/skin/pointerLock-64.png); +/* The first selector is used by socialchat.xml (bug 1275558). */ +.webRTC-sharingMicrophone-notification-icon, +.microphone-icon { + list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone); } -.popup-notification-icon[popupid="servicesInstall"] { - list-style-image: url(chrome://browser/skin/social/services-64.png); +.microphone-icon.blocked { + list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked); } -/* Notification icon box */ -#notification-popup-box { - position: relative; - background-color: transparent; - background-clip: padding-box; - padding-left: 5px; - padding-right: 8px; - border-width: 0 1px 0 0; - border-style: solid; - border-color: transparentize($entry_border, 0.5); - //border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 fill; - //-moz-margin-end: -8px; +.popup-notification-icon[popupid="webRTC-shareMicrophone"], +.popup-notification-icon[popupid="webRTC-sharingMicrophone"] { + list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed); } -//window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #notification-popup-box { -// padding-left: 7px; -//} +.popup-notification-icon[popupid="webRTC-shareScreen"], +.popup-notification-icon[popupid="webRTC-sharingScreen"], +.screen-icon { + list-style-image: url(chrome://browser/skin/notification-icons.svg#screen); +} -/* This changes the direction of the main notification box on the url bar. */ -#notification-popup-box:-moz-locale-dir(rtl), -/* This adds a second flip for the notification anchors, as they don't switch direction - for RTL mode. */ -.notification-anchor-icon:-moz-locale-dir(rtl) { - transform: scaleX(-1); +.screen-icon.blocked { + list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked); } -/* For the anchor icons in the chat window, we don't have the notification popup box, - so we need to cancel the RTL transform. */ -.notification-anchor-icon.chat-toolbarbutton:-moz-locale-dir(rtl) { - transform: none; +.popup-notification-icon[popupid="pointerLock"], +.pointerLock-icon { + list-style-image: url(chrome://browser/skin/notification-icons.svg#pointerLock); } -/* This class can be used alone or in combination with the class defining the - type of icon displayed. This rule must be defined before the others in order - for its list-style-image to be overridden. */ -.notification-anchor-icon { - list-style-image: url(moz-icon://stock/gtk-dialog-info?size=16); - width: 16px; - height: 16px; - margin: 0 2px; +.pointerLock-icon.blocked { + list-style-image: url(chrome://browser/skin/notification-icons.svg#pointerLock-blocked); } -@media (min-resolution: 1.1dppx) { - .notification-anchor-icon { - list-style-image: url(moz-icon://stock/gtk-dialog-info?size=dialog); - } +/* This icon has a block sign in it, so we don't need a blocked version. */ +.popup-icon { + list-style-image: url("chrome://browser/skin/notification-icons.svg#popup"); } -.geo-icon { - list-style-image: url(chrome://browser/skin/Geolocation-16.png); +/* EME */ + +.popup-notification-icon[popupid="drmContentPlaying"], +.drm-icon { + list-style-image: url("chrome://browser/skin/drm-icon.svg#chains"); +} + +.drm-icon:hover:active { + list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed"); +} + +#eme-notification-icon[firstplay=true] { + animation: emeTeachingMoment 0.2s linear 0s 5 normal; } +@keyframes emeTeachingMoment { + 0% {transform: translateX(0); } + 25% {transform: translateX(3px) } + 75% {transform: translateX(-3px) } + 100% { transform: translateX(0); } +} + +/* INSTALL ADDONS */ + .install-icon { list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default); } -.install-icon:hover { - list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#hover); +.popup-notification-icon[popupid="xpinstall-disabled"], +.popup-notification-icon[popupid="addon-install-blocked"], +.popup-notification-icon[popupid="addon-install-origin-blocked"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg); } -.install-icon:hover:active { - list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#active); +.popup-notification-icon[popupid="addon-progress"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg); } -.indexedDB-icon { - list-style-image: url(chrome://global/skin/icons/question-16.png); +.popup-notification-icon[popupid="addon-install-failed"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg); } -.login-icon { - list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png); +.popup-notification-icon[popupid="addon-install-confirmation"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg); } -#login-fill-notification-icon { - /* Temporary solution until the capture and fill doorhangers are unified. */ - transform: scaleX(-1); +#addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg); } -.plugin-icon { - list-style-image: url(chrome://browser/skin/notification-pluginNormal.png); +.popup-notification-icon[popupid="addon-install-complete"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg); } -.plugin-icon.plugin-hidden { - list-style-image: url(chrome://browser/skin/notification-pluginAlert.png); +.popup-notification-icon[popupid="addon-install-restart"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg); } -.plugin-icon.plugin-blocked { - list-style-image: url(chrome://browser/skin/notification-pluginBlocked.png); +.popup-notification-icon[popupid="click-to-play-plugins"] { + list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png); } -.plugin-icon { - -moz-image-region: rect(0, 16px, 16px, 0); +/* OFFLINE APPS */ + +.popup-notification-icon[popupid*="offline-app-requested"], +.popup-notification-icon[popupid="offline-app-usage"] { + list-style-image: url(chrome://global/skin/icons/question-64.png); } -.plugin-icon:hover { - -moz-image-region: rect(0, 32px, 16px, 16px); +/* PLUGINS */ + +.plugin-icon { + list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin); } -.plugin-icon:active { - -moz-image-region: rect(0, 48px, 16px, 32px); +.plugin-icon.plugin-blocked { + list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked); + fill: #d92215 !important; /* important! to override the default hover color */ } #notification-popup-box[hidden] { @@ -2140,55 +2380,19 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box } } -.camera-icon { - list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16.png); -} - -/* The first selector is used by socialchat.xml (bug 1275558). */ -.webRTC-sharingDevices-notification-icon, -.camera-icon.in-use { - list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16.png); -} - -.microphone-icon { - list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16.png); -} - -/* The first selector is used by socialchat.xml (bug 1275558). */ -.webRTC-sharingMicrophone-notification-icon, -.microphone-icon.in-use { - list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16.png); -} - -.screen-icon { - list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png); -} - -.screen-icon.in-use { - list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16.png); -} - -.web-notifications-icon { - list-style-image: url(chrome://browser/skin/web-notifications-tray.svg); - -moz-image-region: rect(0, 16px, 16px, 0); -} - -.web-notifications-icon:hover { - -moz-image-region: rect(0, 32px, 16px, 16px); -} - -.web-notifications-icon:hover:active { - -moz-image-region: rect(0, 48px, 16px, 32px); -} +/* SOCIAL API */ -.pointer-icon { - list-style-image: url(chrome://browser/skin/pointerLock-16.png); +.popup-notification-icon[popupid="servicesInstall"] { + list-style-image: url(chrome://browser/skin/social/services-64.png); } .service-icon { list-style-image: url(chrome://browser/skin/social/services-16.png); } + +/* TRANSLATION */ + .translation-icon { list-style-image: url(chrome://browser/skin/translation-16.png); -moz-image-region: rect(0px, 16px, 16px, 0px); @@ -2198,74 +2402,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box -moz-image-region: rect(0px, 32px, 16px, 16px); } -/* EME notifications */ - -.popup-notification-icon[popupid="drmContentPlaying"], -.drm-icon { - list-style-image: url("chrome://browser/skin/drm-icon.svg#chains"); -} - -.drm-icon:hover:active { - list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed"); -} - -#eme-notification-icon[firstplay=true] { - animation: emeTeachingMoment 0.2s linear 0s 5 normal; -} - -@keyframes emeTeachingMoment { - 0% {transform: translateX(0); } - 25% {transform: translateX(3px) } - 75% {transform: translateX(-3px) } - 100% { transform: translateX(0); } -} - -/* 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; - } - - .camera-icon { - list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16@2x.png); - } - - .camera-icon.in-use { - list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16@2x.png); - } - - .microphone-icon { - list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16@2x.png); - } - - .microphone-icon.in-use { - list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16@2x.png); - } - - .screen-icon { - list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16@2x.png); - } - - .screen-icon.in-use { - 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"] { @@ -2278,18 +2414,11 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box } /* Notification icon box */ -#notification-popup-box { - border-radius: 2.5px 0 0 2.5px; -} .notification-anchor-icon:-moz-focusring { outline: 1px dotted -moz-DialogText; } -.indexedDB-icon { - list-style-image: url(moz-icon://stock/gtk-dialog-question?size=16); -} - /* Translation infobar */ notification[value="translation"] .messageImage { @@ -2987,12 +3116,14 @@ html|span.ac-emphasize-text-url { .tab-throbber, .tab-icon-image, +.tab-sharing-icon-overlay, .tab-icon-sound, .tab-close-button { margin-top: 1px; } .tab-throbber, +.tab-sharing-icon-overlay, .tab-icon-image { height: 16px; width: 16px; @@ -3003,6 +3134,47 @@ html|span.ac-emphasize-text-url { list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); } +.tab-icon-image[sharing]:not([selected]), +.tab-sharing-icon-overlay { + animation: 3s linear pulse infinite; +} + +@keyframes pulse { + 0%, 16.66%, 83.33%, 100% { + opacity: 0; + } + 33.33%, 66.66% { + opacity: 1; + } +} + +.tab-icon-image[sharing]:not([selected]) { + animation-delay: -1.5s; +} + +.tab-sharing-icon-overlay { + /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */ + margin-inline-start: -22px; + position: relative; +} + +.tab-sharing-icon-overlay[sharing="camera"] { + list-style-image: url("chrome://browser/skin/notification-icons.svg#camera"); +} + +.tab-sharing-icon-overlay[sharing="microphone"] { + list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone"); +} + +.tab-sharing-icon-overlay[sharing="screen"] { + list-style-image: url("chrome://browser/skin/notification-icons.svg#screen"); +} + +.tab-sharing-icon-overlay[sharing] { + filter: url("chrome://browser/skin/filters.svg#fill"); + fill: rgb(224, 41, 29); +} + .tab-icon-overlay { width: 16px; height: 16px; @@ -3478,7 +3650,7 @@ html|span.ac-emphasize-text-url { /* Tabstrip new tab button */ .tabs-newtab-button, #TabsToolbar > #new-tab-button , -#TabsToolbar > #wrapper-new-tab-button > #new-tab-button { +#TabsToolbar > toolbarpaletteitem > #new-tab-button { list-style-image: url("moz-icon://stock/gtk-add?size=menu"); -moz-image-region: auto; } @@ -3592,7 +3764,7 @@ toolbarbutton.chevron { list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important; } -toolbar[brighttext] toolbarbutton.chevron:not(:hover):not([open="true"]) { +toolbar[brighttext] toolbarbutton.chevron { list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important; } @@ -3611,17 +3783,14 @@ toolbarbutton.chevron > .toolbarbutton-icon { /* 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-panel { + -moz-appearance: none; + background: rgba(27%,27%,27%,.7); + color: white; + border-style: none; + padding: 20px 10px 10px; + font-weight: bold; + text-shadow: 0 0 1px rgb(27%,27%,27%), 0 0 2px rgb(27%,27%,27%); } .ctrlTab-favicon[src] { @@ -3631,19 +3800,39 @@ toolbarbutton.chevron > .toolbarbutton-icon { padding: 2px; } -#ctrlTab-panel { - padding: 10px; +.ctrlTab-preview-inner > .tabPreview-canvas { + box-shadow: 1px 1px 2px hsl(0,0%,12%); } -.ctrlTab-preview:not(#ctrlTab-showAll) .tabPreview-canvas { +.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas { margin-bottom: 2px; } +.ctrlTab-preview-inner { + padding-bottom: 10px; +} + +#ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner { + padding: 10px; + background-color: rgba(255,255,255,.2); + border-radius: .5em; +} + +.ctrlTab-preview:focus > * > .ctrlTab-preview-inner { + color: white; + background-color: rgba(0,0,0,.6); + text-shadow: none; + padding: 8px; + border: 2px solid white; + border-radius: .5em; +} + +.ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner { + margin: -10px -10px 0; +} + #ctrlTab-showAll { - -moz-appearance: button; - color: ButtonText; - padding: 0 3px; - margin-top: 10px; + margin-top: .5em; } /* Status panel */ @@ -3673,7 +3862,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { } -html|*#fullscreen-warning { +html|*.pointerlockfswarning { align-items: center; color: $dark_sidebar_fg; background: $dark_sidebar_bg; @@ -3684,34 +3873,34 @@ html|*#fullscreen-warning { font: message-box; } -html|*#fullscreen-warning::before { +html|*.pointerlockfswarning::before { margin: 0; width: 24px; height: 24px; } -html|*#fullscreen-warning.verifiedIdentity::before, -html|*#fullscreen-warning.verifiedDomain::before { +html|*.pointerlockfswarning[data-identity="verifiedIdentity"]::before, +html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before { content: url("chrome://browser/skin/fullscreen/secure.svg"); } -html|*#fullscreen-warning.unknownIdentity::before { +html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before { content: url("chrome://browser/skin/fullscreen/insecure.svg"); } -html|*#fullscreen-domain-text, -html|*#fullscreen-generic-text { +html|*.pointerlockfswarning-domain-text, +html|*.pointerlockfswarning-generic-text { font-size: 21px; font-weight: lighter; color: #fafafa; margin: 0 16px; } -html|*#fullscreen-domain { +html|*.pointerlockfswarning-domain { font-weight: bold; margin: 0; } -html|*#fullscreen-exit-button { +html|*.pointerlockfswarning-exit-button { padding: 5px 30px; font: message-box; font-size: 14px; @@ -3727,7 +3916,6 @@ html|*#fullscreen-exit-button { &:hover { @include button(osd-hover); } &:active, &:checked { @include button(osd-active); } } - /* Responsive Mode */ .browserContainer[responsivemode] { @@ -3891,6 +4079,10 @@ html|*#fullscreen-exit-button { list-style-image: url("chrome://devtools/skin/images/close.svg"); } +.devtools-responsiveui-close > image { + filter: invert(1); +} + .devtools-responsiveui-rotate { list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-rotate.png"); } @@ -4338,8 +4530,9 @@ html|*#gcli-output-frame { } .messageImage[value="plugin-hidden"] { - list-style-image: url("chrome://browser/skin/notification-pluginNormal.png"); - -moz-image-region: rect(0, 16px, 16px, 0); + list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin); + filter: url(chrome://browser/skin/filters.svg#fill); + fill: #808080; } /* Keep any changes to this style in sync with pluginProblem.css */ @@ -4350,7 +4543,9 @@ notification.pluginVulnerable { } notification.pluginVulnerable .messageImage { - list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png"); + list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked); + filter: url(chrome://browser/skin/filters.svg#fill); + fill: #d92215; } notification.pluginVulnerable > .notification-inner > .messageCloseButton:not(:hover) { @@ -4669,23 +4864,6 @@ toolbar[brighttext] #downloads-indicator-counter { margin-inline-end: 2px; } -/* Social toolbar item */ - -.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; @@ -4950,6 +5128,10 @@ window > chatbox { /* Customization mode */ +:root { + --drag-drop-transition-duration: .3s; +} + #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox { margin-bottom: 2em; } @@ -5036,7 +5218,7 @@ window > chatbox { #customization-palette, #customization-empty { - padding: 0 25px 25px; + padding: 5px 25px 25px; } #customization-header { @@ -5159,7 +5341,7 @@ toolbarpaletteitem[mousedown] { .panel-customization-placeholder, toolbarpaletteitem[place="palette"], toolbarpaletteitem[place="panel"] { - transition: transform .3s ease-in-out; + transition: transform var(--drag-drop-transition-duration) ease-in-out; } #customization-palette { @@ -5171,6 +5353,10 @@ toolbarpaletteitem[place="panel"] { opacity: 1; } +toolbarpaletteitem toolbarbutton[disabled] { + color: inherit !important; +} + toolbarpaletteitem[notransition].panel-customization-placeholder, toolbarpaletteitem[notransition][place="toolbar"], toolbarpaletteitem[notransition][place="palette"], @@ -5182,7 +5368,7 @@ toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon, toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon, toolbarpaletteitem > toolbaritem.panel-wide-item, toolbarpaletteitem > toolbarbutton[type="menu-button"] { - transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important; + transition: transform var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important; } toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon, @@ -5210,11 +5396,22 @@ toolbarpaletteitem[place="toolbar"] { toolbarpaletteitem[place="palette"]:-moz-focusring, toolbarpaletteitem[place="panel"]:-moz-focusring, toolbarpaletteitem[place="toolbar"]:-moz-focusring { + outline-width: 0; +} + +toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring, +toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring, +toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { + /* Delay adding the focusring back until after the transform transition completes. */ + transition: outline-width .01s linear var(--drag-drop-transition-duration); outline: 1px dotted rgba(0,0,0,.5); - outline-offset: -5px; -moz-outline-radius: 2.5px; } +toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { + outline-offset: -5px; +} + #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton, #wrapper-edit-controls[place="palette"] > #edit-controls > separator, #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton, @@ -5915,6 +6112,6 @@ notification.heartbeat { border-radius: inherit; } -.menuitem-iconic[command="Browser:NewUserContextTab"] > .menu-iconic-left > .menu-iconic-icon { +.menuitem-iconic[usercontextid] > .menu-iconic-left > .menu-iconic-icon { visibility: visible; } |