diff options
Diffstat (limited to 'arc-firefox-theme/chrome/browser/sass')
4 files changed, 501 insertions, 539 deletions
diff --git a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss index 1c6b99c..8f9abab 100644 --- a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss +++ b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss @@ -35,8 +35,11 @@ $darker_asset_path_2: if($darker=='true', 'dark', $asset_path); --toolbarbutton-combined-backgroundimage: linear-gradient(hsla(210,54%,20%,.2) 0, hsla(210,54%,20%,.2) 18px); --verified-identity-box-backgroundcolor: transparent; -} + --panel-separator-color: ThreeDShadow; + + --urlbar-separator-color: hsla(0,0%,16%,.2); +} #menubar-items { -moz-box-orient: vertical; /* for flex hack */ @@ -1692,7 +1695,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 { @@ -1746,9 +1749,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; @@ -1756,14 +1759,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; } @@ -1924,21 +1927,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); @@ -1992,11 +1980,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 { @@ -2006,129 +1997,49 @@ 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"); +.popup-notification-icon { + width: 64px; + height: 64px; + -moz-margin-end: 10px; } -#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; +.popup-notification-icon[popupid="geolocation"] { + list-style-image: url(chrome://browser/skin/Geolocation-64.png); } -#identity-popup-help-icon > .button-box > .button-text { - display: none; +.popup-notification-icon[popupid="push"] { + list-style-image: url(chrome://browser/skin/Push-64.png); } -#identity-popup-help-icon > .button-box > .button-icon { - height: 16px; - width: 16px; +.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); } -#identity-popup-help-icon:-moz-focusring { - outline: 1px dotted; - outline-offset: 1px; +.popup-notification-icon[popupid="addon-progress"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg); } -#identity-popup > .panel-arrowcontainer > .panel-arrowcontent { - padding: 0; +.popup-notification-icon[popupid="addon-install-failed"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg); } -#identity-popup-container { - min-width: 280px; - padding: 10px; +.popup-notification-icon[popupid="addon-install-confirmation"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg); } -#identity-popup-button-container { - background: linear-gradient(to bottom, rgba(0,0,0,0.04) 60%, transparent); - padding: 10px; - margin-top: 5px; +#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 { - width: 64px; - height: 64px; - -moz-margin-end: 10px; -} - -.popup-notification-icon[popupid="geolocation"] { - list-style-image: url(chrome://browser/skin/Geolocation-64.png); -} - -.popup-notification-icon[popupid="push"] { - list-style-image: url(chrome://browser/skin/Push-64.png); +.popup-notification-icon[popupid="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"] { @@ -2228,7 +2139,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, @@ -2240,6 +2159,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); @@ -2463,10 +2388,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 { @@ -2714,10 +2635,19 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- /* Combined go/reload/stop button in location bar */ -#urlbar > toolbarbutton { +#urlbar-go-button, +#urlbar-reload-button, +#urlbar-stop-button { -moz-appearance: none; - padding: 0 2px; list-style-image: url("chrome://browser/skin/reload-stop-go.png"); + padding: 0 9px; + margin-inline-start: 2px; + 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-reload-button { @@ -2725,12 +2655,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); } @@ -2743,12 +2671,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); } @@ -2761,20 +2687,26 @@ 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); } @media (min-resolution: 1.1dppx) { - #urlbar > toolbarbutton { + #urlbar-go-button, + #urlbar-reload-button, + #urlbar-stop-button { list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png"); } + #urlbar-go-button > .toolbarbutton-icon, + #urlbar-reload-button > .toolbarbutton-icon, + #urlbar-stop-button > .toolbarbutton-icon { + width: 14px; + } + #urlbar-go-button { -moz-image-region: rect(0, 84px, 28px, 56px); } @@ -2810,10 +2742,6 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- #urlbar-stop-button:hover:active { -moz-image-region: rect(56px, 56px, 84px, 28px); } - - #urlbar > toolbarbutton > .toolbarbutton-icon { - width: 14px; - } } /* Popup blocker button */ @@ -4443,6 +4371,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; @@ -4453,16 +4416,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/. */ @@ -4669,10 +4657,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; @@ -4902,7 +4886,6 @@ chatbox[dark=true] > .chat-titlebar > hbox > .chat-title { .chatbar-innerbox { background: transparent; - margin: -285px 0 0; overflow: hidden; } @@ -5869,6 +5852,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 02d74f2..f7a1d97 100644 --- a/arc-firefox-theme/chrome/browser/sass/browser-dark.css +++ b/arc-firefox-theme/chrome/browser/sass/browser-dark.css @@ -15,7 +15,9 @@ --toolbarbutton-checkedhover-backgroundcolor: #5294E2; --toolbarbutton-combined-boxshadow: none; --toolbarbutton-combined-backgroundimage: linear-gradient(rgba(23, 51, 79, 0.2) 0, rgba(23, 51, 79, 0.2) 18px); - --verified-identity-box-backgroundcolor: transparent; } + --verified-identity-box-backgroundcolor: transparent; + --panel-separator-color: ThreeDShadow; + --urlbar-separator-color: rgba(41, 41, 41, 0.2); } #menubar-items { -moz-box-orient: vertical; @@ -1317,7 +1319,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 { @@ -1417,18 +1419,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); } @@ -1467,98 +1457,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; @@ -1571,14 +1483,27 @@ 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-origin-blocked"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg); } + +.popup-notification-icon[popupid="addon-progress"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg); } + +.popup-notification-icon[popupid="addon-install-failed"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg); } + +.popup-notification-icon[popupid="addon-install-confirmation"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg); } + +#addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg); } + .popup-notification-icon[popupid="addon-install-complete"] { - list-style-image: url(chrome://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); } @@ -1654,7 +1579,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 { @@ -1663,6 +1594,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); } @@ -1836,9 +1772,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); @@ -2035,20 +1968,24 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- border-top: 1px solid GrayText; } /* Combined go/reload/stop button in location bar */ -#urlbar > toolbarbutton { +#urlbar-go-button, +#urlbar-reload-button, +#urlbar-stop-button { -moz-appearance: none; - padding: 0 2px; - list-style-image: url("chrome://browser/skin/reload-stop-go.png"); } + list-style-image: url("chrome://browser/skin/reload-stop-go.png"); + padding: 0 9px; + margin-inline-start: 2px; + 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-reload-button { -moz-image-region: rect(0, 14px, 14px, 0); } #urlbar-reload-button:not([disabled]):hover { - background-image: radial-gradient(circle closest-side, rgba(102, 204, 255, 0.2), transparent); -moz-image-region: rect(14px, 14px, 28px, 0); } #urlbar-reload-button:not([disabled]):hover:active { - background-image: radial-gradient(circle closest-side, rgba(51, 187, 255, 0.1), transparent); -moz-image-region: rect(28px, 14px, 42px, 0); } #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { @@ -2058,11 +1995,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 { @@ -2072,17 +2007,22 @@ 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) { - #urlbar > toolbarbutton { + #urlbar-go-button, + #urlbar-reload-button, + #urlbar-stop-button { list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png"); } + #urlbar-go-button > .toolbarbutton-icon, + #urlbar-reload-button > .toolbarbutton-icon, + #urlbar-stop-button > .toolbarbutton-icon { + width: 14px; } + #urlbar-go-button { -moz-image-region: rect(0, 84px, 28px, 56px); } @@ -2108,10 +2048,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-image-region: rect(28px, 56px, 56px, 28px); } #urlbar-stop-button:hover:active { - -moz-image-region: rect(56px, 56px, 84px, 28px); } - - #urlbar > toolbarbutton > .toolbarbutton-icon { - width: 14px; } } + -moz-image-region: rect(56px, 56px, 84px, 28px); } } /* Popup blocker button */ #page-report-button { list-style-image: url("chrome://browser/skin/Info.png"); } @@ -3374,6 +3311,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; } @@ -3382,14 +3347,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/. */ @@ -3559,10 +3544,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; @@ -3748,7 +3729,6 @@ chatbox[dark=true] > .chat-titlebar > hbox > .chat-title { .chatbar-innerbox { background: transparent; - margin: -285px 0 0; overflow: hidden; } chatbar { @@ -4528,6 +4508,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 6cbb380..f0c97ac 100644 --- a/arc-firefox-theme/chrome/browser/sass/browser-darker.css +++ b/arc-firefox-theme/chrome/browser/sass/browser-darker.css @@ -15,7 +15,9 @@ --toolbarbutton-checkedhover-backgroundcolor: #5294E2; --toolbarbutton-combined-boxshadow: none; --toolbarbutton-combined-backgroundimage: linear-gradient(rgba(23, 51, 79, 0.2) 0, rgba(23, 51, 79, 0.2) 18px); - --verified-identity-box-backgroundcolor: transparent; } + --verified-identity-box-backgroundcolor: transparent; + --panel-separator-color: ThreeDShadow; + --urlbar-separator-color: rgba(41, 41, 41, 0.2); } #menubar-items { -moz-box-orient: vertical; @@ -1316,7 +1318,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 +1418,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 +1456,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 +1482,27 @@ 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-origin-blocked"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg); } + +.popup-notification-icon[popupid="addon-progress"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg); } + +.popup-notification-icon[popupid="addon-install-failed"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg); } + +.popup-notification-icon[popupid="addon-install-confirmation"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg); } + +#addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg); } + .popup-notification-icon[popupid="addon-install-complete"] { - list-style-image: url(chrome://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); } @@ -1653,7 +1578,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 { @@ -1662,6 +1593,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); } @@ -1835,9 +1771,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); @@ -2034,20 +1967,24 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- border-top: 1px solid GrayText; } /* Combined go/reload/stop button in location bar */ -#urlbar > toolbarbutton { +#urlbar-go-button, +#urlbar-reload-button, +#urlbar-stop-button { -moz-appearance: none; - padding: 0 2px; - list-style-image: url("chrome://browser/skin/reload-stop-go.png"); } + list-style-image: url("chrome://browser/skin/reload-stop-go.png"); + padding: 0 9px; + margin-inline-start: 2px; + 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-reload-button { -moz-image-region: rect(0, 14px, 14px, 0); } #urlbar-reload-button:not([disabled]):hover { - background-image: radial-gradient(circle closest-side, rgba(102, 204, 255, 0.2), transparent); -moz-image-region: rect(14px, 14px, 28px, 0); } #urlbar-reload-button:not([disabled]):hover:active { - background-image: radial-gradient(circle closest-side, rgba(51, 187, 255, 0.1), transparent); -moz-image-region: rect(28px, 14px, 42px, 0); } #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { @@ -2057,11 +1994,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 { @@ -2071,17 +2006,22 @@ 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) { - #urlbar > toolbarbutton { + #urlbar-go-button, + #urlbar-reload-button, + #urlbar-stop-button { list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png"); } + #urlbar-go-button > .toolbarbutton-icon, + #urlbar-reload-button > .toolbarbutton-icon, + #urlbar-stop-button > .toolbarbutton-icon { + width: 14px; } + #urlbar-go-button { -moz-image-region: rect(0, 84px, 28px, 56px); } @@ -2107,10 +2047,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-image-region: rect(28px, 56px, 56px, 28px); } #urlbar-stop-button:hover:active { - -moz-image-region: rect(56px, 56px, 84px, 28px); } - - #urlbar > toolbarbutton > .toolbarbutton-icon { - width: 14px; } } + -moz-image-region: rect(56px, 56px, 84px, 28px); } } /* Popup blocker button */ #page-report-button { list-style-image: url("chrome://browser/skin/Info.png"); } @@ -3374,6 +3311,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; } @@ -3382,14 +3347,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/. */ @@ -3559,10 +3544,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; @@ -3748,7 +3729,6 @@ chatbox[dark=true] > .chat-titlebar > hbox > .chat-title { .chatbar-innerbox { background: transparent; - margin: -285px 0 0; overflow: hidden; } chatbar { @@ -4528,6 +4508,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 a1d5f42..f163b8e 100644 --- a/arc-firefox-theme/chrome/browser/sass/browser-light.css +++ b/arc-firefox-theme/chrome/browser/sass/browser-light.css @@ -15,7 +15,9 @@ --toolbarbutton-checkedhover-backgroundcolor: #5294E2; --toolbarbutton-combined-boxshadow: none; --toolbarbutton-combined-backgroundimage: linear-gradient(rgba(23, 51, 79, 0.2) 0, rgba(23, 51, 79, 0.2) 18px); - --verified-identity-box-backgroundcolor: transparent; } + --verified-identity-box-backgroundcolor: transparent; + --panel-separator-color: ThreeDShadow; + --urlbar-separator-color: rgba(41, 41, 41, 0.2); } #menubar-items { -moz-box-orient: vertical; @@ -1316,7 +1318,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 +1418,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 +1456,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 +1482,27 @@ 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-origin-blocked"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg); } + +.popup-notification-icon[popupid="addon-progress"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg); } + +.popup-notification-icon[popupid="addon-install-failed"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg); } + +.popup-notification-icon[popupid="addon-install-confirmation"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg); } + +#addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg); } + .popup-notification-icon[popupid="addon-install-complete"] { - list-style-image: url(chrome://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); } @@ -1653,7 +1578,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 { @@ -1662,6 +1593,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); } @@ -1835,9 +1771,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); @@ -2034,20 +1967,24 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- border-top: 1px solid GrayText; } /* Combined go/reload/stop button in location bar */ -#urlbar > toolbarbutton { +#urlbar-go-button, +#urlbar-reload-button, +#urlbar-stop-button { -moz-appearance: none; - padding: 0 2px; - list-style-image: url("chrome://browser/skin/reload-stop-go.png"); } + list-style-image: url("chrome://browser/skin/reload-stop-go.png"); + padding: 0 9px; + margin-inline-start: 2px; + 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-reload-button { -moz-image-region: rect(0, 14px, 14px, 0); } #urlbar-reload-button:not([disabled]):hover { - background-image: radial-gradient(circle closest-side, rgba(102, 204, 255, 0.2), transparent); -moz-image-region: rect(14px, 14px, 28px, 0); } #urlbar-reload-button:not([disabled]):hover:active { - background-image: radial-gradient(circle closest-side, rgba(51, 187, 255, 0.1), transparent); -moz-image-region: rect(28px, 14px, 42px, 0); } #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { @@ -2057,11 +1994,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 { @@ -2071,17 +2006,22 @@ 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) { - #urlbar > toolbarbutton { + #urlbar-go-button, + #urlbar-reload-button, + #urlbar-stop-button { list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png"); } + #urlbar-go-button > .toolbarbutton-icon, + #urlbar-reload-button > .toolbarbutton-icon, + #urlbar-stop-button > .toolbarbutton-icon { + width: 14px; } + #urlbar-go-button { -moz-image-region: rect(0, 84px, 28px, 56px); } @@ -2107,10 +2047,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-image-region: rect(28px, 56px, 56px, 28px); } #urlbar-stop-button:hover:active { - -moz-image-region: rect(56px, 56px, 84px, 28px); } - - #urlbar > toolbarbutton > .toolbarbutton-icon { - width: 14px; } } + -moz-image-region: rect(56px, 56px, 84px, 28px); } } /* Popup blocker button */ #page-report-button { list-style-image: url("chrome://browser/skin/Info.png"); } @@ -3374,6 +3311,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; } @@ -3382,14 +3347,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/. */ @@ -3559,10 +3544,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; @@ -3748,7 +3729,6 @@ chatbox[dark=true] > .chat-titlebar > hbox > .chat-title { .chatbar-innerbox { background: transparent; - margin: -285px 0 0; overflow: hidden; } chatbar { @@ -4528,6 +4508,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) { |