diff options
Diffstat (limited to 'arc-firefox-theme/chrome/browser/sass')
4 files changed, 413 insertions, 508 deletions
diff --git a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss index a89487b..5de59e3 100644 --- a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss +++ b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss @@ -37,7 +37,6 @@ $darker_asset_path_2: if($darker=='true', 'dark', $asset_path); --verified-identity-box-backgroundcolor: transparent; } - #menubar-items { -moz-box-orient: vertical; /* for flex hack */ } @@ -1690,7 +1689,7 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { .searchbar-textbox { border-radius: 20px; } //#urlbar { -// background-color: $entry_bg; +// background-color: -moz-field; //} .urlbar-textbox-container { @@ -1744,9 +1743,9 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { -moz-box-align: center; } -.urlbar-icon { - //padding: 0 3px; -} +//.urlbar-icon { +// padding: 0 3px; +//} #urlbar-search-splitter { -moz-appearance: none; @@ -1754,14 +1753,14 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { //-moz-margin-start: -4px; } -#urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox { - //-moz-margin-start: 0; -} +//#urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox { +// -moz-margin-start: 0; +//} #urlbar-display-box { margin-top: -1px; margin-bottom: -1px; - -moz-border-end: 1px solid red; + -moz-border-end: 1px solid #AAA; -moz-margin-end: 3px; } @@ -1922,21 +1921,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box 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); @@ -1990,11 +1974,14 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #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); - } +#urlbar[actiontype="searchengine"] > #identity-box > #page-proxy-favicon { + -moz-image-region: inherit; + list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); + width: 16px; + height: 16px; + opacity: 1; } #page-proxy-favicon { @@ -2004,129 +1991,48 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box -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; +.popup-notification-icon { + width: 64px; + height: 64px; + -moz-margin-end: 10px; } -#identity-popup-help-icon > .button-box > .button-icon { - height: 16px; - width: 16px; +.popup-notification-icon[popupid="geolocation"] { + list-style-image: url(chrome://browser/skin/Geolocation-64.png); } -#identity-popup-help-icon:-moz-focusring { - outline: 1px dotted; - outline-offset: 1px; +.popup-notification-icon[popupid="push"] { + list-style-image: url(chrome://browser/skin/Push-64.png); } -#identity-popup > .panel-arrowcontainer > .panel-arrowcontent { - padding: 0; +.popup-notification-icon[popupid="xpinstall-disabled"], +.popup-notification-icon[popupid="addon-install-blocked"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg); } -#identity-popup-container { - min-width: 280px; - padding: 10px; +.popup-notification-icon[popupid="addon-progress"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg); } -#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[popupid="addon-install-failed"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg); } - -.popup-notification-icon { - width: 64px; - height: 64px; - -moz-margin-end: 10px; +.popup-notification-icon[popupid="addon-install-confirmation"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg); } -.popup-notification-icon[popupid="geolocation"] { - list-style-image: url(chrome://browser/skin/Geolocation-64.png); +#addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg); } -.popup-notification-icon[popupid="push"] { - list-style-image: url(chrome://browser/skin/Push-64.png); +.popup-notification-icon[popupid="addon-install-complete"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg); } -.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="addon-install-restart"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg); } .popup-notification-icon[popupid="click-to-play-plugins"] { @@ -2224,7 +2130,15 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box } #addons-notification-icon { - list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric-16.png); + list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default); +} + +#addons-notification-icon:hover { + list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#hover); +} + +#addons-notification-icon:hover:active { + list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#active); } .indexedDB-notification-icon, @@ -2236,6 +2150,12 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png); } +#login-fill-notification-icon { + /* Temporary icon until the capture and fill doorhangers are unified. */ + list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png); + transform: scaleX(-1); +} + .webapps-notification-icon, #webapps-notification-icon { list-style-image: url(chrome://global/skin/icons/webapps-16.png); @@ -2459,10 +2379,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box list-style-image: url(moz-icon://stock/gtk-dialog-question?size=16); } -#pointerLock-cancel { - margin: 0px; -} - /* Translation infobar */ notification[value="translation"] .messageImage { @@ -2721,12 +2637,10 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- } #urlbar-reload-button:not([disabled]):hover { - background-image: radial-gradient(circle closest-side, hsla(200,100%,70%,.2), transparent); -moz-image-region: rect(14px, 14px, 28px, 0); } #urlbar-reload-button:not([disabled]):hover:active { - background-image: radial-gradient(circle closest-side, hsla(200,100%,60%,.1), transparent); -moz-image-region: rect(28px, 14px, 42px, 0); } @@ -2739,12 +2653,10 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- } #urlbar-go-button:hover { - background-image: radial-gradient(circle closest-side, hsla(110,70%,50%,.2), transparent); -moz-image-region: rect(14px, 42px, 28px, 28px); } #urlbar-go-button:hover:active { - background-image: radial-gradient(circle closest-side, hsla(110,70%,50%,.1), transparent); -moz-image-region: rect(28px, 42px, 42px, 28px); } @@ -2757,12 +2669,10 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- } #urlbar-stop-button:not([disabled]):hover { - background-image: radial-gradient(circle closest-side, hsla(5,100%,75%,.3), transparent); -moz-image-region: rect(14px, 28px, 28px, 14px); } #urlbar-stop-button:hover:active { - background-image: radial-gradient(circle closest-side, hsla(5,100%,75%,.1), transparent); -moz-image-region: rect(28px, 28px, 42px, 14px); } @@ -4425,6 +4335,41 @@ notification.pluginVulnerable .messageImage { .popup-notification-footer[popupid="bad-content"] { padding-top: 1em; } +#notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent { + /* Since we display a sliding subview that extends to the border, we cannot + * keep the default padding of arrow panels. We use the same padding in the + * individual content views instead. Since we removed the padding, we also + * have to ensure the contents are clipped to the border box. */ + padding: 0; + overflow: hidden; +} + +#login-fill-mainview, +#login-fill-details { + padding: var(--panel-arrowcontent-padding); +} + +#login-fill-doorhanger[inDetailView] > #login-fill-mainview { + transform: translateX(-14px); +} + +#login-fill-mainview, +#login-fill-details { + transition: transform 150ms; +} + +#login-fill-doorhanger:not([inDetailView]) > #login-fill-details { + transform: translateX(105%); +} + +#login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) { + transform: translateX(-105%); +} + +#login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer { + background-color: hsla(210,4%,10%,.1); +} + #login-fill-testing { color: #b33; font-weight: bold; @@ -4435,16 +4380,41 @@ notification.pluginVulnerable .messageImage { max-height: 20em; } +.login-fill-item[disabled] { + color: #888; + background-color: #fff; +} + +.login-fill-item[disabled][selected] { + background-color: #eef; +} + .login-hostname { margin: 4px; font-weight: bold; } +.login-fill-item.different-hostname > .login-hostname { + color: #888; + font-style: italic; +} + .login-username { margin: 4px; color: #888; } +#login-fill-details { + padding: 4px; + background: var(--panel-arrowcontent-background); + color: var(--panel-arrowcontent-color); + background-clip: padding-box; + border-left: 1px solid hsla(210,4%,10%,.3); + box-shadow: 0 3px 5px hsla(210,4%,10%,.1), + 0 0 7px hsla(210,4%,10%,.1); + -moz-margin-start: 38px; +} + /* 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/. */ @@ -4651,10 +4621,6 @@ toolbar[brighttext] #downloads-indicator-counter { /* 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; @@ -4884,7 +4850,6 @@ chatbox[dark=true] > .chat-titlebar > hbox > .chat-title { .chatbar-innerbox { background: transparent; - margin: -285px 0 0; overflow: hidden; } @@ -5851,6 +5816,18 @@ notification.heartbeat { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); } +#context-bookmarkpage[starred=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); +} + +#context-bookmarkpage[starred=true][_moz-menuactive=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); +} + +#context-bookmarkpage[starred=true][disabled=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); +} + #context-back:-moz-locale-dir(rtl), #context-forward:-moz-locale-dir(rtl), #context-reload:-moz-locale-dir(rtl) { diff --git a/arc-firefox-theme/chrome/browser/sass/browser-dark.css b/arc-firefox-theme/chrome/browser/sass/browser-dark.css index 60e38dc..a7f3d04 100644 --- a/arc-firefox-theme/chrome/browser/sass/browser-dark.css +++ b/arc-firefox-theme/chrome/browser/sass/browser-dark.css @@ -1316,7 +1316,7 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { #urlbar-display-box { margin-top: -1px; margin-bottom: -1px; - -moz-border-end: 1px solid red; + -moz-border-end: 1px solid #AAA; -moz-margin-end: 3px; } .urlbar-display { @@ -1416,18 +1416,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #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); } @@ -1466,98 +1454,20 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #identity-box:hover:active > #page-proxy-favicon, #identity-box[open=true] > #page-proxy-favicon { - -moz-image-region: rect(0, 96px, 32px, 64px); } + -moz-image-region: rect(0, 96px, 32px, 64px); } } +#urlbar[actiontype="searchengine"] > #identity-box > #page-proxy-favicon { + -moz-image-region: inherit; + list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); + width: 16px; + height: 16px; + opacity: 1; } - #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; @@ -1570,14 +1480,26 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box 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-blocked"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg); } + +.popup-notification-icon[popupid="addon-progress"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg); } + +.popup-notification-icon[popupid="addon-install-failed"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg); } + +.popup-notification-icon[popupid="addon-install-confirmation"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg); } + +#addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg); } + .popup-notification-icon[popupid="addon-install-complete"] { - list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric.png); - width: 32px; - height: 32px; } + list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg); } + +.popup-notification-icon[popupid="addon-install-restart"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg); } .popup-notification-icon[popupid="click-to-play-plugins"] { list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png); } @@ -1652,7 +1574,13 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box list-style-image: url(chrome://browser/skin/Push-16.png); } #addons-notification-icon { - list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric-16.png); } + list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default); } + +#addons-notification-icon:hover { + list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#hover); } + +#addons-notification-icon:hover:active { + list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#active); } .indexedDB-notification-icon, #indexedDB-notification-icon { @@ -1661,6 +1589,11 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #password-notification-icon { list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png); } +#login-fill-notification-icon { + /* Temporary icon until the capture and fill doorhangers are unified. */ + list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png); + transform: scaleX(-1); } + .webapps-notification-icon, #webapps-notification-icon { list-style-image: url(chrome://global/skin/icons/webapps-16.png); } @@ -1837,9 +1770,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #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); @@ -2045,11 +1975,9 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -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 { @@ -2059,11 +1987,9 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -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 { @@ -2073,11 +1999,9 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -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) { @@ -3370,6 +3294,34 @@ notification.pluginVulnerable .messageImage { .popup-notification-footer[popupid="bad-content"] { padding-top: 1em; } +#notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent { + /* Since we display a sliding subview that extends to the border, we cannot + * keep the default padding of arrow panels. We use the same padding in the + * individual content views instead. Since we removed the padding, we also + * have to ensure the contents are clipped to the border box. */ + padding: 0; + overflow: hidden; } + +#login-fill-mainview, +#login-fill-details { + padding: var(--panel-arrowcontent-padding); } + +#login-fill-doorhanger[inDetailView] > #login-fill-mainview { + transform: translateX(-14px); } + +#login-fill-mainview, +#login-fill-details { + transition: transform 150ms; } + +#login-fill-doorhanger:not([inDetailView]) > #login-fill-details { + transform: translateX(105%); } + +#login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) { + transform: translateX(-105%); } + +#login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer { + background-color: rgba(24, 26, 27, 0.1); } + #login-fill-testing { color: #b33; font-weight: bold; } @@ -3378,14 +3330,34 @@ notification.pluginVulnerable .messageImage { border: 1px solid black; max-height: 20em; } +.login-fill-item[disabled] { + color: #888; + background-color: #fff; } + +.login-fill-item[disabled][selected] { + background-color: #eef; } + .login-hostname { margin: 4px; font-weight: bold; } +.login-fill-item.different-hostname > .login-hostname { + color: #888; + font-style: italic; } + .login-username { margin: 4px; color: #888; } +#login-fill-details { + padding: 4px; + background: var(--panel-arrowcontent-background); + color: var(--panel-arrowcontent-color); + background-clip: padding-box; + border-left: 1px solid rgba(24, 26, 27, 0.3); + box-shadow: 0 3px 5px rgba(24, 26, 27, 0.1), 0 0 7px rgba(24, 26, 27, 0.1); + -moz-margin-start: 38px; } + /* 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/. */ @@ -3555,10 +3527,6 @@ toolbar[brighttext] #downloads-indicator-counter { -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; @@ -3744,7 +3712,6 @@ chatbox[dark=true] > .chat-titlebar > hbox > .chat-title { .chatbar-innerbox { background: transparent; - margin: -285px 0 0; overflow: hidden; } chatbar { @@ -4524,6 +4491,15 @@ notification.heartbeat { #context-bookmarkpage[disabled=true] { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); } +#context-bookmarkpage[starred=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); } + +#context-bookmarkpage[starred=true][_moz-menuactive=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); } + +#context-bookmarkpage[starred=true][disabled=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); } + #context-back:-moz-locale-dir(rtl), #context-forward:-moz-locale-dir(rtl), #context-reload:-moz-locale-dir(rtl) { diff --git a/arc-firefox-theme/chrome/browser/sass/browser-darker.css b/arc-firefox-theme/chrome/browser/sass/browser-darker.css index a668bd7..3a5c545 100644 --- a/arc-firefox-theme/chrome/browser/sass/browser-darker.css +++ b/arc-firefox-theme/chrome/browser/sass/browser-darker.css @@ -1316,7 +1316,7 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { #urlbar-display-box { margin-top: -1px; margin-bottom: -1px; - -moz-border-end: 1px solid red; + -moz-border-end: 1px solid #AAA; -moz-margin-end: 3px; } .urlbar-display { @@ -1416,18 +1416,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #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); } @@ -1466,98 +1454,20 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #identity-box:hover:active > #page-proxy-favicon, #identity-box[open=true] > #page-proxy-favicon { - -moz-image-region: rect(0, 96px, 32px, 64px); } + -moz-image-region: rect(0, 96px, 32px, 64px); } } +#urlbar[actiontype="searchengine"] > #identity-box > #page-proxy-favicon { + -moz-image-region: inherit; + list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); + width: 16px; + height: 16px; + opacity: 1; } - #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; @@ -1570,14 +1480,26 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box 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-blocked"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg); } + +.popup-notification-icon[popupid="addon-progress"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg); } + +.popup-notification-icon[popupid="addon-install-failed"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg); } + +.popup-notification-icon[popupid="addon-install-confirmation"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg); } + +#addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg); } + .popup-notification-icon[popupid="addon-install-complete"] { - list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric.png); - width: 32px; - height: 32px; } + list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg); } + +.popup-notification-icon[popupid="addon-install-restart"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg); } .popup-notification-icon[popupid="click-to-play-plugins"] { list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png); } @@ -1652,7 +1574,13 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box list-style-image: url(chrome://browser/skin/Push-16.png); } #addons-notification-icon { - list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric-16.png); } + list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default); } + +#addons-notification-icon:hover { + list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#hover); } + +#addons-notification-icon:hover:active { + list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#active); } .indexedDB-notification-icon, #indexedDB-notification-icon { @@ -1661,6 +1589,11 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #password-notification-icon { list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png); } +#login-fill-notification-icon { + /* Temporary icon until the capture and fill doorhangers are unified. */ + list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png); + transform: scaleX(-1); } + .webapps-notification-icon, #webapps-notification-icon { list-style-image: url(chrome://global/skin/icons/webapps-16.png); } @@ -1837,9 +1770,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #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); @@ -2045,11 +1975,9 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -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 { @@ -2059,11 +1987,9 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -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 { @@ -2073,11 +1999,9 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -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) { @@ -3370,6 +3294,34 @@ notification.pluginVulnerable .messageImage { .popup-notification-footer[popupid="bad-content"] { padding-top: 1em; } +#notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent { + /* Since we display a sliding subview that extends to the border, we cannot + * keep the default padding of arrow panels. We use the same padding in the + * individual content views instead. Since we removed the padding, we also + * have to ensure the contents are clipped to the border box. */ + padding: 0; + overflow: hidden; } + +#login-fill-mainview, +#login-fill-details { + padding: var(--panel-arrowcontent-padding); } + +#login-fill-doorhanger[inDetailView] > #login-fill-mainview { + transform: translateX(-14px); } + +#login-fill-mainview, +#login-fill-details { + transition: transform 150ms; } + +#login-fill-doorhanger:not([inDetailView]) > #login-fill-details { + transform: translateX(105%); } + +#login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) { + transform: translateX(-105%); } + +#login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer { + background-color: rgba(24, 26, 27, 0.1); } + #login-fill-testing { color: #b33; font-weight: bold; } @@ -3378,14 +3330,34 @@ notification.pluginVulnerable .messageImage { border: 1px solid black; max-height: 20em; } +.login-fill-item[disabled] { + color: #888; + background-color: #fff; } + +.login-fill-item[disabled][selected] { + background-color: #eef; } + .login-hostname { margin: 4px; font-weight: bold; } +.login-fill-item.different-hostname > .login-hostname { + color: #888; + font-style: italic; } + .login-username { margin: 4px; color: #888; } +#login-fill-details { + padding: 4px; + background: var(--panel-arrowcontent-background); + color: var(--panel-arrowcontent-color); + background-clip: padding-box; + border-left: 1px solid rgba(24, 26, 27, 0.3); + box-shadow: 0 3px 5px rgba(24, 26, 27, 0.1), 0 0 7px rgba(24, 26, 27, 0.1); + -moz-margin-start: 38px; } + /* 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/. */ @@ -3555,10 +3527,6 @@ toolbar[brighttext] #downloads-indicator-counter { -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; @@ -3744,7 +3712,6 @@ chatbox[dark=true] > .chat-titlebar > hbox > .chat-title { .chatbar-innerbox { background: transparent; - margin: -285px 0 0; overflow: hidden; } chatbar { @@ -4524,6 +4491,15 @@ notification.heartbeat { #context-bookmarkpage[disabled=true] { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); } +#context-bookmarkpage[starred=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); } + +#context-bookmarkpage[starred=true][_moz-menuactive=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); } + +#context-bookmarkpage[starred=true][disabled=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); } + #context-back:-moz-locale-dir(rtl), #context-forward:-moz-locale-dir(rtl), #context-reload:-moz-locale-dir(rtl) { diff --git a/arc-firefox-theme/chrome/browser/sass/browser-light.css b/arc-firefox-theme/chrome/browser/sass/browser-light.css index f83320f..82fc9e9 100644 --- a/arc-firefox-theme/chrome/browser/sass/browser-light.css +++ b/arc-firefox-theme/chrome/browser/sass/browser-light.css @@ -1316,7 +1316,7 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { #urlbar-display-box { margin-top: -1px; margin-bottom: -1px; - -moz-border-end: 1px solid red; + -moz-border-end: 1px solid #AAA; -moz-margin-end: 3px; } .urlbar-display { @@ -1416,18 +1416,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #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); } @@ -1466,98 +1454,20 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #identity-box:hover:active > #page-proxy-favicon, #identity-box[open=true] > #page-proxy-favicon { - -moz-image-region: rect(0, 96px, 32px, 64px); } + -moz-image-region: rect(0, 96px, 32px, 64px); } } +#urlbar[actiontype="searchengine"] > #identity-box > #page-proxy-favicon { + -moz-image-region: inherit; + list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); + width: 16px; + height: 16px; + opacity: 1; } - #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; @@ -1570,14 +1480,26 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box 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-blocked"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg); } + +.popup-notification-icon[popupid="addon-progress"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg); } + +.popup-notification-icon[popupid="addon-install-failed"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg); } + +.popup-notification-icon[popupid="addon-install-confirmation"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg); } + +#addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg); } + .popup-notification-icon[popupid="addon-install-complete"] { - list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric.png); - width: 32px; - height: 32px; } + list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg); } + +.popup-notification-icon[popupid="addon-install-restart"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg); } .popup-notification-icon[popupid="click-to-play-plugins"] { list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png); } @@ -1652,7 +1574,13 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box list-style-image: url(chrome://browser/skin/Push-16.png); } #addons-notification-icon { - list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric-16.png); } + list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default); } + +#addons-notification-icon:hover { + list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#hover); } + +#addons-notification-icon:hover:active { + list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#active); } .indexedDB-notification-icon, #indexedDB-notification-icon { @@ -1661,6 +1589,11 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #password-notification-icon { list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png); } +#login-fill-notification-icon { + /* Temporary icon until the capture and fill doorhangers are unified. */ + list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png); + transform: scaleX(-1); } + .webapps-notification-icon, #webapps-notification-icon { list-style-image: url(chrome://global/skin/icons/webapps-16.png); } @@ -1837,9 +1770,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #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); @@ -2045,11 +1975,9 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -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 { @@ -2059,11 +1987,9 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -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 { @@ -2073,11 +1999,9 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -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) { @@ -3370,6 +3294,34 @@ notification.pluginVulnerable .messageImage { .popup-notification-footer[popupid="bad-content"] { padding-top: 1em; } +#notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent { + /* Since we display a sliding subview that extends to the border, we cannot + * keep the default padding of arrow panels. We use the same padding in the + * individual content views instead. Since we removed the padding, we also + * have to ensure the contents are clipped to the border box. */ + padding: 0; + overflow: hidden; } + +#login-fill-mainview, +#login-fill-details { + padding: var(--panel-arrowcontent-padding); } + +#login-fill-doorhanger[inDetailView] > #login-fill-mainview { + transform: translateX(-14px); } + +#login-fill-mainview, +#login-fill-details { + transition: transform 150ms; } + +#login-fill-doorhanger:not([inDetailView]) > #login-fill-details { + transform: translateX(105%); } + +#login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) { + transform: translateX(-105%); } + +#login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer { + background-color: rgba(24, 26, 27, 0.1); } + #login-fill-testing { color: #b33; font-weight: bold; } @@ -3378,14 +3330,34 @@ notification.pluginVulnerable .messageImage { border: 1px solid black; max-height: 20em; } +.login-fill-item[disabled] { + color: #888; + background-color: #fff; } + +.login-fill-item[disabled][selected] { + background-color: #eef; } + .login-hostname { margin: 4px; font-weight: bold; } +.login-fill-item.different-hostname > .login-hostname { + color: #888; + font-style: italic; } + .login-username { margin: 4px; color: #888; } +#login-fill-details { + padding: 4px; + background: var(--panel-arrowcontent-background); + color: var(--panel-arrowcontent-color); + background-clip: padding-box; + border-left: 1px solid rgba(24, 26, 27, 0.3); + box-shadow: 0 3px 5px rgba(24, 26, 27, 0.1), 0 0 7px rgba(24, 26, 27, 0.1); + -moz-margin-start: 38px; } + /* 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/. */ @@ -3555,10 +3527,6 @@ toolbar[brighttext] #downloads-indicator-counter { -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; @@ -3744,7 +3712,6 @@ chatbox[dark=true] > .chat-titlebar > hbox > .chat-title { .chatbar-innerbox { background: transparent; - margin: -285px 0 0; overflow: hidden; } chatbar { @@ -4524,6 +4491,15 @@ notification.heartbeat { #context-bookmarkpage[disabled=true] { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); } +#context-bookmarkpage[starred=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); } + +#context-bookmarkpage[starred=true][_moz-menuactive=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); } + +#context-bookmarkpage[starred=true][disabled=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); } + #context-back:-moz-locale-dir(rtl), #context-forward:-moz-locale-dir(rtl), #context-reload:-moz-locale-dir(rtl) { |