diff options
Diffstat (limited to 'arc-firefox-theme/chrome/browser')
47 files changed, 1546 insertions, 844 deletions
diff --git a/arc-firefox-theme/chrome/browser/aboutCertError.css b/arc-firefox-theme/chrome/browser/aboutCertError.css deleted file mode 100644 index a109609..0000000 --- a/arc-firefox-theme/chrome/browser/aboutCertError.css +++ /dev/null @@ -1,119 +0,0 @@ -/* 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/. */ - -@import url("chrome://global/skin/in-content/common.css"); - -body { - display: flex; - box-sizing: border-box; - min-height: 100vh; - padding: 0 48px; - align-items: center; - justify-content: center; -} - -#errorPageContainer { - position: relative; - min-width: 320px; - max-width: 512px; -} - -#errorTitle { - background: url("chrome://browser/skin/cert-error.svg") left 0 no-repeat; - background-size: 3em; - margin-inline-start: -5em; - padding-inline-start: 5em; -} - -#errorTitle:-moz-dir(rtl) { - background-position: right 0; -} - -#errorTitleText { - border-bottom: 1px solid #C1C1C1; - padding-bottom: 0.4em; -} - -@media (max-width: 675px) { - #errorTitle { - padding-top: 0; - background-image: none; - margin-inline-start: 0; - padding-inline-start: 0; - } -} - -#buttonContainer { - display: flex; - flex-flow: row wrap; -} - -#buttonSpacer { - flex: 1; -} - -#certificateErrorDebugInformation { - display: none; - background-color: var(--in-content-box-background-hover) !important; - border-top: 1px solid var(--in-content-border-color); - position: absolute; - left: 0%; - top: 100%; - width: 65%; - padding: 1em 17.5%; -} - -#certificateErrorText { - font-family: monospace; - white-space: pre-wrap; - padding: 1em 0; -} - -#errorCode { - white-space: nowrap; -} - -#returnButton { - background-color: var(--in-content-primary-button-background); - border: none; - color: var(--in-content-selected-text); - min-width: 250px; - margin-inline-start: 0; -} - -#returnButton:hover { - background-color: var(--in-content-primary-button-background-hover) !important; -} - -#returnButton:hover:active { - background-color: var(--in-content-primary-button-background-active) !important; -} - -#advancedButton { - min-width: 150px; -} - -/* Advanced section is hidden via inline styles until the link is clicked */ -#advancedPanel { - background-color: white; - color: var(--in-content-text-color); - border: 1px lightgray solid; - /* Don't use top padding because the default p style has top padding, and it - * makes the overall div look uneven */ - padding: 0 12px 10px; - margin-top: 10px; - box-shadow: 0 0 4px #ddd; - font-size: 0.9em; -} - -.hostname { - font-weight: bold; -} - -#reportCertificateErrorRetry, -#certificateErrorReporting, -#reportSendingMessage, -#reportSentMessage { - display: none; -} diff --git a/arc-firefox-theme/chrome/browser/aboutNetError.css b/arc-firefox-theme/chrome/browser/aboutNetError.css index 8c4a34f..627c69e 100644 --- a/arc-firefox-theme/chrome/browser/aboutNetError.css +++ b/arc-firefox-theme/chrome/browser/aboutNetError.css @@ -2,84 +2,28 @@ * 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/. */ -@import url("chrome://global/skin/in-content/common.css"); +@import url("chrome://browser/skin/error-pages.css"); body { - display: flex; - box-sizing: border-box; - min-height: 100vh; - padding: 0 48px; - align-items: center; - justify-content: center; -} - -ul, ol { - margin: 0; - padding: 0; - -moz-margin-start: 1em; -} - -ul > li, ol > li { - margin-bottom: .5em; -} - -ul { - list-style: disc; -} - -#errorPageContainer { - position: relative; - min-width: 320px; - max-width: 512px; -} - -#advancedPanelContainer { - position: absolute; - padding-bottom: 24px; - width: 100%; -} - -#errorTitle { - background: url("chrome://global/skin/icons/info.svg") left 0 no-repeat; - background-size: 3em; - -moz-margin-start: -5em; - -moz-padding-start: 5em; + background-image: linear-gradient(-45deg, #eeeeee, #eeeeee 33%, + #fbfbfb 33%, #fbfbfb 66%, + #eeeeee 66%, #eeeeee); } -#errorTitleText { - border-bottom: 1px solid #C1C1C1; - padding-bottom: 0.4em; +body.certerror { + background-image: linear-gradient(-45deg, #f0d000, #f0d000 33%, + #fedc00 33%, #fedc00 66%, + #f0d000 66%, #f0d000); } -#errorTitleText:-moz-dir(rtl) { - background-position: right 0; -} - -#errorTitle[sslv3=true], -#errorTitle[weakCrypto=true] { +body.certerror .title { background-image: url("cert-error.svg"); } -#errorTryAgain { - margin-top: 1.2em; - min-width: 150px -} - #errorContainer { display: none; } -@media (max-width: 675px) { - #errorTitle, - #errorTitle[sslv3=true], - #errorTitle[weakCrypto=true] { - padding-top: 0; - background-image: none; - -moz-padding-start: 0; - -moz-margin-start: 0; - } -} - /* Pressing the retry button will cause the cursor to flicker from a pointer to * not-allowed. Override the disabled cursor behaviour since we will never show * the button disabled as the initial state. */ @@ -91,66 +35,50 @@ button:disabled { display: none; } -#buttonContainer { +#certErrorButtonContainer { display: none; - flex-flow: row wrap; } -#buttonSpacer { - flex: 1; +body.certerror #certErrorButtonContainer { + display: flex; } -#returnButton { - background-color: var(--in-content-primary-button-background); - border: none; - color: var(--in-content-selected-text); - min-width: 250px; - margin-inline-start: 0; +body.certerror #netErrorButtonContainer { + display: none; } -#returnButton:hover { - background-color: var(--in-content-primary-button-background-hover) !important; +#errorTryAgain { + margin-top: 1.2em; + min-width: 150px; } -#returnButton:hover:active { - background-color: var(--in-content-primary-button-background-active) !important; +#returnButton { + min-width: 250px; } #advancedButton { display: none; - min-width: 150px; } -#certificateErrorReporting, -#reportSentMessage { - display: none; +body.certerror #advancedButton { + display: block; } -div#weakCryptoAdvanced { +#certificateErrorReporting { display: none; - float: right; - /* Align with the "Try Again" button */ - margin-top: 24px; - -moz-margin-end: 24px; -} - -div#weakCryptoAdvanced a { - text-decoration: none; } -div#weakCryptoAdvanced a:hover { - text-decoration: underline; +.container { + position: relative; } -span.downArrow { - display: inline-block; - vertical-align: middle; - font-size: 0.6em; - -moz-margin-start: 0.5em; - transform: scaleY(0.7); +#advancedPanelContainer { + position: absolute; + padding: 24px 0; + width: 100%; } -div#weakCryptoAdvancedPanel { +.advanced-panel { /* Hidden until the link is clicked */ display: none; background-color: white; @@ -180,8 +108,38 @@ span#hostname { cursor: pointer; } -#errorCode { +#errorCode:not([href]) { color: var(--in-content-page-color); cursor: text; text-decoration: none; } + +#errorCode[href] { + white-space: nowrap; +} + +#badCertTechnicalInfo { + overflow: auto; + white-space: pre-wrap; +} + +#certificateErrorReporting { + display: none; +} + +#certificateErrorDebugInformation { + display: none; + background-color: var(--in-content-box-background-hover) !important; + border-top: 1px solid var(--in-content-border-color); + position: absolute; + left: 0%; + top: 100%; + width: 65%; + padding: 1em 17.5%; +} + +#certificateErrorText { + font-family: monospace; + white-space: pre-wrap; + padding: 1em 0; +} diff --git a/arc-firefox-theme/chrome/browser/blockedSite.css b/arc-firefox-theme/chrome/browser/blockedSite.css new file mode 100644 index 0000000..49846ee --- /dev/null +++ b/arc-firefox-theme/chrome/browser/blockedSite.css @@ -0,0 +1,65 @@ +/* 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/. */ + +@import url("chrome://browser/skin/error-pages.css"); + +body { + background-image: linear-gradient(-45deg, #9b2e2e, #9b2e2e 33%, + #a83232 33%, #a83232 66%, + #9b2e2e 66%, #9b2e2e); + background-color: #b14646; + color: white; +} + +.title { + background-image: url("chrome://global/skin/icons/blocked.svg"); +} + +.title-text { + color: white; +} + +.button-container button:not(.primary) { + background-color: transparent; + color: white; + border: 1px solid #9b2e2e; + margin-inline-end: 0; +} + +.button-container button:not(.primary):hover { + background-color: #a83232; +} + +.button-container button:not(.primary):active { + background-color: #9b2e2e; +} + +.button-container button { + margin-top: 1.2em; +} + +/* Style warning button to look like a small text link in the + bottom right. This is preferable to just using a text link + since there is already a mechanism in browser.js for trapping + oncommand events from unprivileged chrome pages (BrowserOnCommand).*/ +#ignoreWarningButton { + -moz-appearance: none; + background: transparent; + border: none; + color: white; + text-decoration: underline; + margin: 4px 0 0 0; + padding: 0; + font-size: smaller; + min-width: 0; +} + +#ignoreWarningButton:hover { + cursor: pointer; +} + +#ignoreWarning { + margin-top: 1.2em; + text-align: end; +} diff --git a/arc-firefox-theme/chrome/browser/browser.css b/arc-firefox-theme/chrome/browser/browser.css index 3ef2f72..16e6109 100644 --- a/arc-firefox-theme/chrome/browser/browser.css +++ b/arc-firefox-theme/chrome/browser/browser.css @@ -476,8 +476,8 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { :-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1 > :-moz-any(.toolbarbutton-menubutton-button, .toolbarbutton-badge-stack) > .toolbarbutton-icon { max-width: 16px; } -:-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button) > .toolbarbutton-icon, -:-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button) > :-moz-any(.toolbarbutton-menubutton-button, .toolbarbutton-badge-stack) > .toolbarbutton-icon, +:-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, .toolbarbutton-legacy-addon) > .toolbarbutton-icon, +:-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, .toolbarbutton-legacy-addon) > :-moz-any(.toolbarbutton-menubutton-button, .toolbarbutton-badge-stack) > .toolbarbutton-icon, #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { max-width: 18px; } @@ -502,9 +502,9 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { transition-property: background-color, border-color; transition-duration: 150ms; } -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button)) > .toolbarbutton-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button)) > .toolbarbutton-badge-stack, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon { +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, .toolbarbutton-legacy-addon)) > .toolbarbutton-icon, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, .toolbarbutton-legacy-addon)) > .toolbarbutton-badge-stack, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, .toolbarbutton-legacy-addon)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon { padding: 3px 7px; } :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-icon, @@ -519,8 +519,10 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { #nav-bar #PanelUI-button, #nav-bar[brighttext] #PanelUI-button { + margin-top: -3px; + margin-bottom: -3px; background: none; - border-image: url("chrome://browser/skin/custom_images/navbar-separator.png") 0 0 0 2/0 0 0 2px; } + border-image: url("chrome://browser/skin/custom_images/light/navbar-separator.png") 0 0 0 2/0 0 0 2px; } .findbar-button:not(:-moz-any([checked="true"], [disabled="true"])):hover > .toolbarbutton-text, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open]:not([disabled=true]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon, @@ -591,15 +593,17 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { width: 1px; height: 18px; -moz-margin-end: -1px; - background-image: linear-gradient(currentColor 0, currentColor 100%); background-position: center; background-repeat: no-repeat; - background-size: 1px 18px; - opacity: .2; } + background-size: 1px 18px; } -:-moz-any(#TabsToolbar, #nav-bar)[brighttext] .toolbaritem-combined-buttons > separator, -:-moz-any(#TabsToolbar, #nav-bar)[brighttext] .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before { - opacity: .3; } +#nav-bar .toolbaritem-combined-buttons:not(:hover) > separator, +#nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before { + background: #dcdfe3; } + +#TabsToolbar .toolbaritem-combined-buttons:not(:hover) > separator, +#TabsToolbar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before { + background: rgba(82, 93, 118, 0.15); } :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { -moz-margin-start: -4px; } @@ -1132,6 +1136,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { #minimize-button:active { list-style-image: url("chrome://browser/skin/custom_images/light/window-controls/minimize_pressed.svg"); } +/* Location bar */ #urlbar, .searchbar-textbox { -moz-appearance: none; @@ -1196,7 +1201,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { #urlbar-search-settings { -moz-appearance: none; -moz-user-focus: ignore; - color: inherit; + color: GrayText; margin: 0; border: 0; padding: 8px 20px; @@ -1306,8 +1311,11 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { #urlbar[pageproxystate="valid"] > #identity-box.chromeUI { color: var(--identity-box-chrome-color); } -#identity-icon-labels { - padding-inline-start: 2px; } +#identity-icon-labels:-moz-locale-dir(ltr) { + padding-left: 2px; } + +#identity-icon-labels:-moz-locale-dir(rtl) { + padding-right: 2px; } #notification-popup-box:not([hidden]) + #identity-box { padding-inline-start: 5px; @@ -1440,10 +1448,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box .popup-notification-icon[popupid="password"] { list-style-image: url(chrome://mozapps/skin/passwordmgr/key-64.png); } -.popup-notification-icon[popupid="webapps-install-progress"], -.popup-notification-icon[popupid="webapps-install"] { - list-style-image: url(chrome://global/skin/icons/webapps-64.png); } - .popup-notification-icon[popupid="webRTC-sharingDevices"], .popup-notification-icon[popupid="webRTC-shareDevices"] { list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64.png); } @@ -1511,10 +1515,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box 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); } - #plugins-notification-icon { list-style-image: url(chrome://browser/skin/notification-pluginNormal.png); } @@ -1815,55 +1815,94 @@ notification[value="translation"] menulist > .menulist-dropmarker { #treecolAutoCompleteImage { max-width: 36px; } -.ac-result-type-bookmark, +#PopupAutoCompleteRichResult { + /* The awesomebar popup should open just below the navbar bottom border. */ + margin-top: 1px; } + +.autocomplete-richlistbox { + padding: 4px; } + +.autocomplete-richlistitem { + height: 30px; + min-height: 30px; + font: message-box; + border-radius: 2px; + border: 1px solid transparent; } + +.autocomplete-richlistitem[selected=true] { + background-color: Highlight; } + +.ac-title { + font-size: 14px; } + +.ac-tags { + font-size: 12px; } + +html|span.ac-tag { + background-color: MenuText; + color: Menu; + border-radius: 2px; + border: 1px solid transparent; + padding: 0 1px; } + +.ac-separator, +.ac-url, +.ac-action { + font-size: 12px; + color: -moz-nativehyperlinktext; } + +.ac-title[selected=true], +.ac-separator[selected], +.ac-url[selected=true], +.ac-action[selected=true] { + color: inherit !important; } + +.ac-tags-text[selected] > html|span.ac-tag { + background-color: HighlightText; + color: Highlight; } + +html|span.ac-emphasize-text-title, +html|span.ac-emphasize-text-tag, +html|span.ac-emphasize-text-url { + font-weight: 600; } + +.ac-type-icon[type=bookmark] { + list-style-image: url("chrome://browser/skin/urlbar-star.svg#star"); } + +.ac-type-icon[type=bookmark][selected][current] { + list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted"); } + .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) { list-style-image: url("chrome://browser/skin/places/autocomplete-star.png"); width: 16px; height: 16px; } -.ac-result-type-keyword, -.autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage), -richlistitem[type~="action"][actiontype="searchengine"] > .ac-title-box > .ac-site-icon { - list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); - width: 16px; - height: 16px; } +.ac-type-icon[type=keyword], +.ac-site-icon[type=searchengine], +.autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) { + list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); } -.ac-result-type-keyword[selected="true"], -.autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected), -richlistitem[type~="action"][actiontype="searchengine"][selected="true"] > .ac-title-box > .ac-site-icon { +.ac-type-icon[type=keyword][selected], +.ac-site-icon[type=searchengine][selected], +.autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected) { list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted); } -.ac-result-type-tag, .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) { list-style-image: url("chrome://browser/skin/places/tag.png"); width: 16px; height: 16px; } -.ac-comment, -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description, -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button { - font-size: 1.05em; } +.ac-type-icon[type=switchtab], +.ac-type-icon[type=remotetab] { + list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab"); } -.ac-extra > .ac-comment { - font-size: inherit; } - -.ac-url-text, -.ac-action-text { - color: -moz-nativehyperlinktext; - font-size: 0.9em; } - -richlistitem[type~="action"][actiontype$="tab"] > .ac-url-box > .ac-action-icon { - list-style-image: url("chrome://browser/skin/actionicon-tab.png"); - padding: 0 3px; } +.ac-type-icon[type=switchtab][selected], +.ac-type-icon[type=remotetab][selected] { + list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted"); } .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) { color: GrayText; } -.ac-comment[selected="true"], -.ac-url-text[selected="true"], -.ac-action-text[selected="true"] { - color: inherit !important; } - .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment), .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment) { color: GrayText; @@ -2063,25 +2102,6 @@ richlistitem[type~="action"][actiontype$="tab"] > .ac-url-box > .ac-action-icon #editBMPanel_folderTree { min-width: 27em; } -.panel-promo-box { - margin: 8px -10px -10px -10px; - padding: 8px 10px; - border-top: 1px solid ThreeDShadow; - background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.08) 6px); } - -.panel-promo-icon { - list-style-image: url("chrome://browser/skin/sync-notification-24.png"); - -moz-margin-end: 10px; - vertical-align: middle; } - -.panel-promo-closebutton { - -moz-appearance: none; - height: 16px; - width: 16px; } - -.panel-promo-closebutton > .toolbarbutton-text { - padding: 0; } - /* Content area */ #sidebar { background-color: Window; } @@ -2621,7 +2641,7 @@ lwtHeader;*/ font-weight: bold; } .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon { - list-style-image: url("chrome://global/skin/icons/loading_16.png"); } + list-style-image: url("chrome://global/skin/icons/loading.png"); } .alltabs-item[tabIsVisible] { /* box-shadow instead of background-color to work around native styling */ @@ -2641,7 +2661,7 @@ menuitem:hover > hbox > .alltabs-endimage[soundplaying] { /* Sidebar */ #sidebar-throbber[loading="true"] { - list-style-image: url("chrome://global/skin/icons/loading_16.png"); + list-style-image: url("chrome://global/skin/icons/loading.png"); -moz-margin-end: 4px; } toolbarbutton.chevron { @@ -2813,7 +2833,7 @@ html|*#fullscreen-exit-button { color: #fff; border: 1px solid #111; border-radius: 2px; - padding: 5px; + padding: 0 5px; width: 200px; margin: 0; } @@ -2921,15 +2941,12 @@ html|*#fullscreen-exit-button { margin-left: 0; } .devtools-responsiveui-close { - list-style-image: url("chrome://devtools/skin/images/close.png"); } + list-style-image: url("chrome://devtools/skin/images/close.svg"); } .devtools-responsiveui-rotate { list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-rotate.png"); } @media (min-resolution: 1.1dppx) { - .devtools-responsiveui-close { - list-style-image: url("chrome://devtools/skin/images/close@2x.png"); } - .devtools-responsiveui-rotate { list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-rotate@2x.png"); } } .devtools-responsiveui-touch { @@ -3396,7 +3413,7 @@ notification.pluginVulnerable > .notification-inner > .messageCloseButton:not(:h min-width: 18px; min-height: 18px; } -#TabsToolbar #downloads-button[cui-areatype="toolbar"] > #downloads-indicator-anchor > #downloads-indicator-icon { +#TabsToolbar #downloads-button[cui-areatype="toolbar"]:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon { background: -moz-image-rect(url("chrome://browser/skin/custom_images/light/tabbar-icons.svg"), 0, 198, 18, 180) center no-repeat; } #downloads-button[cui-areatype="toolbar"]:not([disabled=true]):-moz-any([open], [checked], :hover:active) > #downloads-indicator-anchor > #downloads-indicator-icon, @@ -3404,12 +3421,32 @@ notification.pluginVulnerable > .notification-inner > .messageCloseButton:not(:h #nav-bar #downloads-button[cui-areatype="toolbar"]:not([disabled=true]):-moz-any([open], [checked], :hover:active) > #downloads-indicator-anchor > #downloads-indicator-icon { background: -moz-image-rect(url("chrome://browser/skin/custom_images/toolbar-icons-active.svg"), 0, 198, 18, 180) center no-repeat; } -#downloads-button[cui-areatype="toolbar"][attention] > #downloads-indicator-anchor > #downloads-indicator-icon, -#nav-bar #downloads-button[cui-areatype="toolbar"][attention] > #downloads-indicator-anchor > #downloads-indicator-icon, -#TabsToolbar #downloads-button[cui-areatype="toolbar"][attention] > #downloads-indicator-anchor > #downloads-indicator-icon { +#downloads-button[cui-areatype="toolbar"][attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#downloads-button[cui-areatype="toolbar"][attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + display: -moz-box; + height: 13px; + width: 13px; + background-size: contain; + border: none; + box-shadow: none; + filter: drop-shadow(0 1px 0 rgba(13, 27, 38, 0.15)); } + +#downloads-button[cui-areatype="toolbar"][attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: #D90000 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center; } + +#downloads-button[cui-areatype="toolbar"][attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: #FFBF00 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center; } + +#downloads-button[cui-areatype="toolbar"][attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive, +#downloads-button[cui-areatype="toolbar"][attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive { + filter: none; } + +#downloads-button[cui-areatype="toolbar"][attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon, +#nav-bar #downloads-button[cui-areatype="toolbar"][attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon, +#TabsToolbar #downloads-button[cui-areatype="toolbar"][attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon { background-image: -moz-image-rect(url("chrome://browser/skin/custom_images/light/toolbar-icons.svg"), 18, 198, 36, 180); } -#downloads-button[cui-areatype="menu-panel"][attention] { +#downloads-button[cui-areatype="menu-panel"][attention="success"] { list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png"); -moz-image-region: auto; } @@ -3419,7 +3456,7 @@ notification.pluginVulnerable > .notification-inner > .messageCloseButton:not(:h background: -moz-image-rect(url("chrome://browser/skin/Toolbar-small.png"), 0, 16, 16, 0) center no-repeat; background-size: 12px; } -#downloads-button:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { +#downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { background-image: -moz-image-rect(url("chrome://browser/skin/custom_images/light/toolbar-icons.svg"), 18, 198, 36, 180); } /*** Download notifications ***/ @@ -3595,7 +3632,7 @@ toolbar[brighttext] #downloads-indicator-counter { display: none; } #social-sidebar-button[loading="true"] { - list-style-image: url("chrome://global/skin/icons/loading_16.png"); } + list-style-image: url("chrome://global/skin/icons/loading.png"); } #social-sidebar-favico { max-height: 16px; @@ -3973,6 +4010,13 @@ toolbarpaletteitem[place="toolbar"] { #customization-palette:not([hidden]) { margin-bottom: 25px; } +toolbarpaletteitem[place="palette"]:-moz-focusring, +toolbarpaletteitem[place="panel"]:-moz-focusring, +toolbarpaletteitem[place="toolbar"]:-moz-focusring { + outline: 1px dotted rgba(0, 0, 0, 0.5); + outline-offset: -5px; + -moz-outline-radius: 2.5px; } + #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton, #wrapper-edit-controls[place="palette"] > #edit-controls > separator, #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton, @@ -4225,19 +4269,16 @@ toolbarpaletteitem[place="toolbar"] { min-width: 32px; } #UITourTooltipBody { - -moz-margin-end: 14px; } - -#UITourTooltipBody > vbox { - padding-top: 4px; } + -moz-box-align: start; } -#UITourTooltipIconContainer { - -moz-margin-start: -16px; } +#UITourtooltipTitleContainer { + -moz-box-align: start; + margin-bottom: 10px; } #UITourTooltipIcon { width: 48px; height: 48px; - -moz-margin-start: 28px; - -moz-margin-end: 28px; } + -moz-margin-end: 10px; } #UITourTooltipTitle, #UITourTooltipDescription { @@ -4246,9 +4287,7 @@ toolbarpaletteitem[place="toolbar"] { #UITourTooltipTitle { font-size: 1.45rem; font-weight: bold; - -moz-margin-start: 0; - -moz-margin-end: 0; - margin: 0 0 9px 0; } + margin: 0; } #UITourTooltipDescription { -moz-margin-start: 0; @@ -4259,6 +4298,7 @@ toolbarpaletteitem[place="toolbar"] { /* Override global.css */ } #UITourTooltipClose { + position: relative; -moz-appearance: none; border: none; background-color: transparent; @@ -4273,8 +4313,8 @@ toolbarpaletteitem[place="toolbar"] { -moz-box-pack: end; background-color: rgba(24, 26, 27, 0.07); border-top: 1px solid rgba(24, 26, 27, 0.14); - margin: 24px -16px -16px; - padding: 2em 15px; } + margin: 10px -16px -16px; + padding: 16px; } #UITourTooltipButtons > label, #UITourTooltipButtons > button { @@ -4284,6 +4324,10 @@ toolbarpaletteitem[place="toolbar"] { #UITourTooltipButtons > button:first-child { -moz-margin-start: 0; } +#UITourTooltipButtons > label:last-child, +#UITourTooltipButtons > button:last-child { + margin-inline-end: 0; } + #UITourTooltipButtons > button[image] > .button-box > .button-icon { width: 16px; height: 16px; @@ -4446,7 +4490,12 @@ notification.heartbeat { height: 16px; width: 16px; } +/** + * Override the --panel-arrowcontent-padding so the background extends + * to the sides and bottom of the panel. + */ #UITourTooltipButtons { + margin-left: -10px; margin-bottom: -10px; } #context-navigation > .menuitem-iconic { diff --git a/arc-firefox-theme/chrome/browser/controlcenter/panel.css b/arc-firefox-theme/chrome/browser/controlcenter/panel.css index 499da56..6972df3 100644 --- a/arc-firefox-theme/chrome/browser/controlcenter/panel.css +++ b/arc-firefox-theme/chrome/browser/controlcenter/panel.css @@ -102,6 +102,7 @@ #identity-popup-permissions-content, #tracking-protection-content { padding: 0.5em 0 1em; + /* .identity-popup-headline.host depends on this width */ -moz-padding-start: calc(2em + 24px); -moz-padding-end: 1em; } @@ -119,7 +120,7 @@ margin: 0; padding: 4px 0; min-width: auto; - width: 38px; + width: var(--identity-popup-expander-width); border: 0 none; -moz-appearance: none; background-image: url("chrome://browser/skin/controlcenter/arrow-subview.svg"), @@ -180,6 +181,13 @@ font-size: 150%; } +.identity-popup-headline.host { + word-wrap: break-word; + /* 1em + 2em + 24px is #identity-popup-security-content padding + * 30em is .panel-mainview:not([panelid="PanelUI-popup"]) width */ + max-width: calc(30rem - 3rem - 24px - var(--identity-popup-expander-width)) +} + .identity-popup-warning-gray { -moz-padding-start: 24px; background: url(chrome://browser/skin/controlcenter/warning-gray.svg) no-repeat 0 50%; diff --git a/arc-firefox-theme/chrome/browser/custom_images/dark/navbar-separator.png b/arc-firefox-theme/chrome/browser/custom_images/dark/navbar-separator.png Binary files differnew file mode 100644 index 0000000..355acf7 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/custom_images/dark/navbar-separator.png diff --git a/arc-firefox-theme/chrome/browser/custom_images/navbar-separator.png b/arc-firefox-theme/chrome/browser/custom_images/light/navbar-separator.png Binary files differindex 3781790..3781790 100644 --- a/arc-firefox-theme/chrome/browser/custom_images/navbar-separator.png +++ b/arc-firefox-theme/chrome/browser/custom_images/light/navbar-separator.png diff --git a/arc-firefox-theme/chrome/browser/customizableui/panelUIOverlay.css b/arc-firefox-theme/chrome/browser/customizableui/panelUIOverlay.css index eb91c9b..689ccaa 100644 --- a/arc-firefox-theme/chrome/browser/customizableui/panelUIOverlay.css +++ b/arc-firefox-theme/chrome/browser/customizableui/panelUIOverlay.css @@ -98,23 +98,37 @@ border: none; } +#PanelUI-menu-button[badge-status="download-success"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + display: none; +} + #PanelUI-menu-button[badge-status="update-succeeded"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { background: #74BF43 url(chrome://browser/skin/update-badge.svg) no-repeat center; height: 13px; } +#PanelUI-menu-button[badge-status="download-severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, #PanelUI-menu-button[badge-status="update-failed"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { background: #D90000 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center; height: 13px; } +#PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, #PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { - background: transparent url(chrome://browser/skin/warning.svg) no-repeat center; height: 13px; box-shadow: none; filter: drop-shadow(0 1px 0 hsla(206, 50%, 10%, .15)); } +#PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: #FFBF00 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center; +} + +#PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: transparent url(chrome://browser/skin/warning.svg) no-repeat center; +} + +#PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive, #PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive { filter: none; } @@ -247,6 +261,14 @@ panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .pan max-width: 800px; } +.cui-widget-panel[viewId^=PanelUI-webext-] > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; +} + +.cui-widget-panelview[id^=PanelUI-webext-] { + border-radius: 3.5px; +} + panelview:not([mainview]) .toolbarbutton-text, .cui-widget-panel toolbarbutton > .toolbarbutton-text { text-align: start; @@ -659,8 +681,16 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { list-style-image: url(chrome://browser/skin/sync-horizontalbar.png); } +#PanelUI-remotetabs { + --panel-ui-sync-illustration-height: 157.5px; +} + +.PanelUI-remotetabs-instruction-title, .PanelUI-remotetabs-instruction-label, #PanelUI-remotetabs-mobile-promo { + /* If you change the margin here, the min-height of the synced tabs panel + (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may + need adjusting (see bug 1248506) */ margin: 15px; text-align: center; text-shadow: none; @@ -668,9 +698,16 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { color: GrayText; } +.PanelUI-remotetabs-instruction-title { + font-size: 1.3em; +} + /* The boxes with "instructions" get extra top and bottom padding for space around the illustration and buttons */ .PanelUI-remotetabs-instruction-box { + /* If you change the padding here, the min-height of the synced tabs panel + (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may + need adjusting (see bug 1248506) */ padding-bottom: 30px; padding-top: 15px; } @@ -682,6 +719,9 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { is used for buttons in the toolbox overrides. See bug 1238531 for details */ color: white !important; border-radius: 2px; + /* If you change the margin or padding below, the min-height of the synced tabs + panel (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, + etc) may need adjusting (see bug 1248506) */ margin-top: 10px; margin-bottom: 10px; padding: 8px; @@ -705,7 +745,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { } .fxaSyncIllustration { - width: 180px; + height: var(--panel-ui-sync-illustration-height); list-style-image: url(chrome://browser/skin/fxa/sync-illustration.svg); } @@ -726,7 +766,12 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-reauthsync, #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-nodevicespane, #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-tabsdisabledpane { - min-height: 33em; + min-height: calc(var(--panel-ui-sync-illustration-height) + + 20px + /* margin of .PanelUI-remotetabs-prefs-button */ + 16px + /* padding of .PanelUI-remotetabs-prefs-button */ + 30px + /* margin of .PanelUI-remotetabs-instruction-label */ + 30px + 15px + /* padding of .PanelUI-remotetabs-instruction-box */ + 11em); } #PanelUI-remotetabs-tabslist > label[itemtype="client"] { @@ -741,6 +786,10 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { visibility: collapse; } +#PanelUI-remotetabs-main[devices-status="single"] > #PanelUI-remotetabs-buttons { + display: none; +} + #PanelUI-fxa-icon[syncstatus="active"] { list-style-image: url(chrome://browser/skin/syncProgress-horizontalbar.png); } @@ -809,7 +858,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { } #PanelUI-footer-fxa[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar { - list-style-image: url(chrome://browser/skin/fxa/default-avatar.png) + list-style-image: url(chrome://browser/skin/fxa/default-avatar.svg); } #PanelUI-customize:hover, @@ -1014,7 +1063,8 @@ panelview .toolbarbutton-1, } panelview .toolbarbutton-1, -.widget-overflow-list .toolbarbutton-1 { +.widget-overflow-list .toolbarbutton-1:not(:first-child), +.widget-overflow-list .toolbaritem-combined-buttons:not(:first-child) { margin-top: 6px; } @@ -1110,7 +1160,8 @@ menuitem.panel-subview-footer:not([disabled])[_moz-menuactive]:active, .cui-widget-panelview menuseparator { -moz-appearance: none; min-height: 0; - border-top: 1px solid hsla(210,4%,10%,.15); + border-top: 1px solid var(--panel-separator-color); + border-bottom: none; margin: 6px 0; padding: 0; } @@ -1299,7 +1350,7 @@ toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem] margin: .5em 0; width: 1px; height: auto; - background: hsla(210,4%,10%,.15); + background: var(--panel-separator-color); transition-property: margin; transition-duration: 10ms; transition-timing-function: ease; @@ -1598,10 +1649,6 @@ menuitem[checked="true"].subviewbutton > .menu-iconic-left { list-style-image: url(chrome://branding/content/icon32.png); } - #PanelUI-footer-fxa[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar { - list-style-image: url(chrome://browser/skin/fxa/default-avatar@2x.png) - } - #PanelUI-fxa-label, #PanelUI-fxa-icon { list-style-image: url(chrome://browser/skin/sync-horizontalbar@2x.png); @@ -1699,13 +1746,17 @@ menuitem[checked="true"].subviewbutton > .menu-iconic-left { -moz-appearance: none !important; /* important, to override toolkit rule */ } -#BMB_bookmarksPopup menupopup[placespopup=true] { +#BMB_bookmarksPopup menupopup { + -moz-appearance: none; + background: var(--panel-arrowcontent-background); + color: var(--panel-arrowcontent-color); + border: var(--panel-arrowcontent-border); margin-top: -6px; - padding-top: 2px; + padding-top: 1px; } /* Add some space at the top because there are no headers: */ -#BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox { +#BMB_bookmarksPopup menupopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox { padding-top: 4px; } diff --git a/arc-firefox-theme/chrome/browser/devedition.css b/arc-firefox-theme/chrome/browser/devedition.css index 6596a11..cd107a2 100644 --- a/arc-firefox-theme/chrome/browser/devedition.css +++ b/arc-firefox-theme/chrome/browser/devedition.css @@ -309,6 +309,17 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper { --forwardbutton-width: 29px; } +:root[devtoolstheme="light"] { + --urlbar-dropmarker-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg"); + --urlbar-dropmarker-region: rect(0px, 11px, 14px, 0px); + --urlbar-dropmarker-hover-region: rect(0, 22px, 14px, 11px); + --urlbar-dropmarker-active-region: rect(0px, 33px, 14px, 22px); + --urlbar-dropmarker-2x-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg"); + --urlbar-dropmarker-2x-region: rect(0px, 11px, 14px, 0px); + --urlbar-dropmarker-hover-2x-region: rect(0, 22px, 14px, 11px); + --urlbar-dropmarker-active-2x-region: rect(0px, 33px, 14px, 22px); +} + :root[devtoolstheme="dark"] .findbar-closebutton:not(:hover), :root[devtoolstheme="dark"] #sidebar-header > .close-icon:not(:hover), .tab-close-button[visuallyselected]:not(:hover) { @@ -389,3 +400,8 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper { text-shadow: none; } +.ac-type-icon { + /* Left-align the type icon in awesomebar popup results with the icon in the + urlbar. */ + -moz-margin-start: 11px; +} diff --git a/arc-firefox-theme/chrome/browser/downloads/allDownloadsViewOverlay.css b/arc-firefox-theme/chrome/browser/downloads/allDownloadsViewOverlay.css index 9935e0f..f7acb5f 100644 --- a/arc-firefox-theme/chrome/browser/downloads/allDownloadsViewOverlay.css +++ b/arc-firefox-theme/chrome/browser/downloads/allDownloadsViewOverlay.css @@ -66,90 +66,90 @@ } .blockedIcon { - list-style-image: url("moz-icon://stock/gtk-dialog-error?size=dialog"); + list-style-image: url("moz-icon://stock/gtk-dialog-error?size=32"); +} + +richlistitem.download[verdict="PotentiallyUnwanted"] .blockedIcon { + list-style-image: url("moz-icon://stock/gtk-dialog-warning?size=32"); +} + +richlistitem.download[verdict="Uncommon"] .blockedIcon { + list-style-image: url("moz-icon://stock/gtk-dialog-info?size=32"); } /*** Button icons ***/ -.downloadButton.downloadConfirmBlock, -.downloadButton.downloadCancel { +.downloadButton.downloadIconCancel { -moz-image-region: rect(0px, 16px, 16px, 0px); } -richlistitem.download:hover .downloadButton.downloadConfirmBlock, -richlistitem.download:hover .downloadButton.downloadCancel { +richlistitem.download:hover .downloadButton.downloadIconCancel { -moz-image-region: rect(0px, 32px, 16px, 16px); } -richlistitem.download:hover .downloadButton.downloadConfirmBlock:hover, -richlistitem.download:hover .downloadButton.downloadCancel:hover { +richlistitem.download:hover .downloadButton.downloadIconCancel:hover { -moz-image-region: rect(0px, 48px, 16px, 32px); } -richlistitem.download:hover .downloadButton.downloadConfirmBlock:active, -richlistitem.download:hover .downloadButton.downloadCancel:active { +richlistitem.download:hover .downloadButton.downloadIconCancel:active { -moz-image-region: rect(0px, 64px, 16px, 48px); } -richlistitem.download[selected] .downloadButton.downloadConfirmBlock, -richlistitem.download[selected] .downloadButton.downloadCancel { +richlistitem.download[selected] .downloadButton.downloadIconCancel { -moz-image-region: rect(0px, 80px, 16px, 64px); } -richlistitem.download[selected]:hover .downloadButton.downloadConfirmBlock, -richlistitem.download[selected]:hover .downloadButton.downloadCancel { +richlistitem.download[selected]:hover .downloadButton.downloadIconCancel { -moz-image-region: rect(0px, 96px, 16px, 80px); } -richlistitem.download[selected]:hover .downloadButton.downloadConfirmBlock:hover, -richlistitem.download[selected]:hover .downloadButton.downloadCancel:hover { +richlistitem.download[selected]:hover .downloadButton.downloadIconCancel:hover { -moz-image-region: rect(0px, 112px, 16px, 96px); } -richlistitem.download[selected]:hover .downloadButton.downloadConfirmBlock:active, -richlistitem.download[selected]:hover .downloadButton.downloadCancel:active { +richlistitem.download[selected]:hover .downloadButton.downloadIconCancel:active { -moz-image-region: rect(0px, 128px, 16px, 112px); } -.downloadButton.downloadShow { +.downloadButton.downloadIconShow { -moz-image-region: rect(16px, 16px, 32px, 0px); } -richlistitem.download:hover .downloadButton.downloadShow { +richlistitem.download:hover .downloadButton.downloadIconShow { -moz-image-region: rect(16px, 32px, 32px, 16px); } -richlistitem.download:hover .downloadButton.downloadShow:hover { +richlistitem.download:hover .downloadButton.downloadIconShow:hover { -moz-image-region: rect(16px, 48px, 32px, 32px); } -richlistitem.download:hover .downloadButton.downloadShow:active { +richlistitem.download:hover .downloadButton.downloadIconShow:active { -moz-image-region: rect(16px, 64px, 32px, 48px); } -richlistitem.download[selected] .downloadButton.downloadShow { +richlistitem.download[selected] .downloadButton.downloadIconShow { -moz-image-region: rect(16px, 80px, 32px, 64px); } -richlistitem.download[selected]:hover .downloadButton.downloadShow { +richlistitem.download[selected]:hover .downloadButton.downloadIconShow { -moz-image-region: rect(16px, 96px, 32px, 80px); } -richlistitem.download[selected]:hover .downloadButton.downloadShow:hover { +richlistitem.download[selected]:hover .downloadButton.downloadIconShow:hover { -moz-image-region: rect(16px, 112px, 32px, 96px); } -richlistitem.download[selected]:hover .downloadButton.downloadShow:active { +richlistitem.download[selected]:hover .downloadButton.downloadIconShow:active { -moz-image-region: rect(16px, 128px, 32px, 112px); } -.downloadButton.downloadRetry { +.downloadButton.downloadIconRetry { -moz-image-region: rect(32px, 16px, 48px, 0px); } -richlistitem.download:hover .downloadButton.downloadRetry { +richlistitem.download:hover .downloadButton.downloadIconRetry { -moz-image-region: rect(32px, 32px, 48px, 16px); } -richlistitem.download:hover .downloadButton.downloadRetry:hover { +richlistitem.download:hover .downloadButton.downloadIconRetry:hover { -moz-image-region: rect(32px, 48px, 48px, 32px); } -richlistitem.download:hover .downloadButton.downloadRetry:active { +richlistitem.download:hover .downloadButton.downloadIconRetry:active { -moz-image-region: rect(32px, 64px, 48px, 48px); } -richlistitem.download[selected] .downloadButton.downloadRetry { +richlistitem.download[selected] .downloadButton.downloadIconRetry { -moz-image-region: rect(32px, 80px, 48px, 64px); } -richlistitem.download[selected]:hover .downloadButton.downloadRetry { +richlistitem.download[selected]:hover .downloadButton.downloadIconRetry { -moz-image-region: rect(32px, 96px, 48px, 80px); } -richlistitem.download[selected]:hover .downloadButton.downloadRetry:hover { +richlistitem.download[selected]:hover .downloadButton.downloadIconRetry:hover { -moz-image-region: rect(32px, 112px, 48px, 96px); } -richlistitem.download[selected]:hover .downloadButton.downloadRetry:active { +richlistitem.download[selected]:hover .downloadButton.downloadIconRetry:active { -moz-image-region: rect(32px, 128px, 48px, 112px); } diff --git a/arc-firefox-theme/chrome/browser/downloads/downloads.css b/arc-firefox-theme/chrome/browser/downloads/downloads.css index 487d8f4..f30d2c7 100644 --- a/arc-firefox-theme/chrome/browser/downloads/downloads.css +++ b/arc-firefox-theme/chrome/browser/downloads/downloads.css @@ -177,7 +177,15 @@ richlistitem[type="download"]:last-child { } .blockedIcon { - list-style-image: url("moz-icon://stock/gtk-dialog-error?size=dialog"); + list-style-image: url("moz-icon://stock/gtk-dialog-error?size=32"); +} + +richlistitem[type="download"][verdict="PotentiallyUnwanted"] .blockedIcon { + list-style-image: url("moz-icon://stock/gtk-dialog-warning?size=32"); +} + +richlistitem[type="download"][verdict="Uncommon"] .blockedIcon { + list-style-image: url("moz-icon://stock/gtk-dialog-info?size=32"); } .downloadButton:focus > .button-box { @@ -203,45 +211,50 @@ richlistitem[type="download"]:last-child { /*** Button icons ***/ -.downloadButton.downloadConfirmBlock, -.downloadButton.downloadCancel { +.downloadButton.downloadIconCancel { -moz-image-region: rect(0px, 16px, 16px, 0px); } -richlistitem[type="download"]:hover .downloadButton.downloadConfirmBlock, -richlistitem[type="download"]:hover .downloadButton.downloadCancel { +richlistitem[type="download"]:hover .downloadButton.downloadIconCancel { -moz-image-region: rect(0px, 32px, 16px, 16px); } -richlistitem[type="download"]:hover .downloadButton.downloadConfirmBlock:hover, -richlistitem[type="download"]:hover .downloadButton.downloadCancel:hover { +richlistitem[type="download"]:hover .downloadButton.downloadIconCancel:hover { -moz-image-region: rect(0px, 48px, 16px, 32px); } -richlistitem[type="download"]:hover .downloadButton.downloadConfirmBlock:active, -richlistitem[type="download"]:hover .downloadButton.downloadCancel:active { +richlistitem[type="download"]:hover .downloadButton.downloadIconCancel:active { -moz-image-region: rect(0px, 64px, 16px, 48px); } -.downloadButton.downloadShow { +.downloadButton.downloadIconShow { -moz-image-region: rect(16px, 16px, 32px, 0px); } -#downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"]:hover .downloadButton.downloadShow { +richlistitem[type="download"]:not([state="1"]):hover .downloadButton.downloadIconShow { + -moz-image-region: rect(16px, 32px, 32px, 16px); +} +richlistitem[type="download"]:not([state="1"]):hover .downloadButton.downloadIconShow:hover { + -moz-image-region: rect(16px, 48px, 32px, 32px); +} +richlistitem[type="download"]:not([state="1"]):hover .downloadButton.downloadIconShow:active { + -moz-image-region: rect(16px, 64px, 32px, 48px); +} +#downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"]:hover .downloadButton.downloadIconShow { -moz-image-region: rect(16px, 96px, 32px, 80px); } -#downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"]:hover .downloadButton.downloadShow:hover { +#downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"]:hover .downloadButton.downloadIconShow:hover { -moz-image-region: rect(16px, 112px, 32px, 96px); } -#downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"]:hover .downloadButton.downloadShow:active { +#downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"]:hover .downloadButton.downloadIconShow:active { -moz-image-region: rect(16px, 128px, 32px, 112px); } -.downloadButton.downloadRetry { +.downloadButton.downloadIconRetry { -moz-image-region: rect(32px, 16px, 48px, 0px); } -richlistitem[type="download"]:hover .downloadButton.downloadRetry { +richlistitem[type="download"]:hover .downloadButton.downloadIconRetry { -moz-image-region: rect(32px, 32px, 48px, 16px); } -richlistitem[type="download"]:hover .downloadButton.downloadRetry:hover { +richlistitem[type="download"]:hover .downloadButton.downloadIconRetry:hover { -moz-image-region: rect(32px, 48px, 48px, 32px); } -richlistitem[type="download"]:hover .downloadButton.downloadRetry:active { +richlistitem[type="download"]:hover .downloadButton.downloadIconRetry:active { -moz-image-region: rect(32px, 64px, 48px, 48px); } diff --git a/arc-firefox-theme/chrome/browser/error-pages.css b/arc-firefox-theme/chrome/browser/error-pages.css new file mode 100644 index 0000000..ac9edac --- /dev/null +++ b/arc-firefox-theme/chrome/browser/error-pages.css @@ -0,0 +1,76 @@ +/* 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/. */ + +@import url("chrome://global/skin/in-content/info-pages.css"); + +body { + background-size: 64px 32px; + background-repeat: repeat-x; + /* Top padding for when the window height is small. + Bottom padding to keep everything centered. */ + padding: 75px 0; +} + +.button-container { + display: flex; + flex-flow: row wrap; +} + +.button-spacer { + flex: 1; +} + +@media only screen and (max-width: 959px) { + body { + padding: 75px 48px; + } + + .title { + background-image: none !important; + -moz-padding-start: 0; + -moz-margin-start: 0; + } + + .title-text { + padding-top: 0; + } +} + +@media only screen and (max-width: 640px) { + body { + justify-content: unset; + /* Now that everything is top-aligned, we don't need the + * bottom padding for centering - though it's added back + * when the viewport height is < 480px (see below). */ + padding: 75px 20px 0; + } + + .title-text { + padding-bottom: 0; + border-bottom: none; + } +} + +@media only screen and (max-width: 480px) { + .button-container button { + /* Force buttons to display: block here to try and enforce collapsing margins */ + display: block; + width: 100%; + margin: 0.66em 0 0; + } +} + +/* For small window height, shift the stripes up by 10px. + * We could just change the background size, but that changes + * the angle of the stripes so just shifting up is easier. */ +@media only screen and (max-height: 480px) { + body { + background-position: 10px -10px; + padding-top: 38px; + /* We get rid of bottom padding for width < 640px, but + * for height < 480px a bit of space between the content + * and the viewport edge is nice. */ + padding-bottom: 38px; + } +}
\ No newline at end of file diff --git a/arc-firefox-theme/chrome/browser/fxa/default-avatar.png b/arc-firefox-theme/chrome/browser/fxa/default-avatar.png Binary files differdeleted file mode 100644 index 8faca35..0000000 --- a/arc-firefox-theme/chrome/browser/fxa/default-avatar.png +++ /dev/null diff --git a/arc-firefox-theme/chrome/browser/fxa/default-avatar.svg b/arc-firefox-theme/chrome/browser/fxa/default-avatar.svg new file mode 100644 index 0000000..5402349 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/fxa/default-avatar.svg @@ -0,0 +1,8 @@ +<!-- 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/. --> + +<svg xmlns="http://www.w3.org/2000/svg" viewBox="194 -104 1000 1000" width="80" height="80"> + <path fill="#c3cfd8" d="M694-104.3c276.1 0 500 223.9 500 500s-223.9 500-500 500-500-223.9-500-500c0-276.2 223.9-500 500-500z"/> + <path fill="#fff" fill-rule="evenodd" clip-rule="evenodd" d="M892.4 585.9c10 3.1 19.1 5.7 27.5 8.2 34.5 10 44.8 54.6 17.5 78.1-65.4 56.5-150.7 90.8-244 90.8-92.8 0-177.6-33.8-242.9-89.8-27.4-23.5-17.3-68.2 17.4-78.3 9.2-2.7 19.2-5.5 30.2-9 62.6-19.5 92.6-43.7 98.2-68.7 0-.1 0-.2.1-.2 3.6-16.1-2.8-32.9-15.5-43.5-26.4-22.1-37.1-59.8-44.1-87.5-.8-3.2-1.7-6.5-2.5-9.8-12.1-2.1-25.4-17.3-32.2-38.5-8.2-25.5-3.9-49.8 9.6-54.1 1.3-.4 2.6-.4 3.9-.5-3.1-18.2-6.9-45.4-7.3-69.3-.1-5.2-.2-10.9-.2-16.9 0-3 .1-6.1.1-9.3 0-1.6.1-3.2.2-4.8.1-1.6.2-3.2.3-4.9.9-13.1 2.9-26.8 7-40 7.4-23.7 21.6-45.4 47.4-57.3 5.8-2.7 11-6.4 15.1-11.3 22.4-26.4 49.1-39.6 74.2-45.4 6.9-1.6 13.6-2.6 20.1-3.2 3.2-.3 6.4-.5 9.5-.6 1.6-.1 3.1-.1 4.6-.1h4.5c11.7.3 22 1.8 29.6 3.7 50 12.3 89.2 38 116.4 69.5 13.5 15.8 23.9 33 30.7 50.7 3.4 8.9 5.9 17.9 7.4 26.9.8 4.5 1.3 9 1.6 13.5.3 4.5.3 8.9.1 13.4-1.5 27.1-4.4 45.9-7.3 60.1-2.3 11.1.1 22.2 5 32.4 4.9 10.3 5.3 26.7.2 43.9-6.1 20.3-18.3 35.3-29.8 38.7-2.2 8.1-3.8 13.5-3.9 13.5-3.8 29-10.7 59.8-35.3 82.9-10.5 9.8-15 24.5-13.1 38.7.5 3.5 1 6.6 1.6 9.2 5.6 25.1 35.5 49.3 98.1 68.8z"/> +</svg> diff --git a/arc-firefox-theme/chrome/browser/fxa/default-avatar@2x.png b/arc-firefox-theme/chrome/browser/fxa/default-avatar@2x.png Binary files differdeleted file mode 100644 index 1428e23..0000000 --- a/arc-firefox-theme/chrome/browser/fxa/default-avatar@2x.png +++ /dev/null diff --git a/arc-firefox-theme/chrome/browser/preferences/in-content/dialog.css b/arc-firefox-theme/chrome/browser/preferences/in-content/dialog.css index 9bf0d03..aa59e64 100644 --- a/arc-firefox-theme/chrome/browser/preferences/in-content/dialog.css +++ b/arc-firefox-theme/chrome/browser/preferences/in-content/dialog.css @@ -66,7 +66,7 @@ groupbox description { margin-left: 0; } -label, +label:not(.menu-text), textbox, description, .tab-text, diff --git a/arc-firefox-theme/chrome/browser/preferences/in-content/preferences.css b/arc-firefox-theme/chrome/browser/preferences/in-content/preferences.css index dbedc83..b193768 100644 --- a/arc-firefox-theme/chrome/browser/preferences/in-content/preferences.css +++ b/arc-firefox-theme/chrome/browser/preferences/in-content/preferences.css @@ -379,8 +379,13 @@ description > html|a { #fxaProfileImage { max-width: 60px; border-radius: 50%; - list-style-image: url(chrome://browser/skin/fxa/default-avatar.png); + list-style-image: url(chrome://browser/skin/fxa/default-avatar.svg); margin-inline-end: 15px; + image-rendering: -moz-crisp-edges; +} + +#fxaLoginStatus[hasName] #fxaProfileImage { + max-width: 80px; } #fxaProfileImage.actionable { @@ -549,6 +554,10 @@ description > html|a { list-style-image: url(chrome://browser/skin/fxa/sync-illustration.png) } +#fxaLoginStatus[hasName] #fxaEmailAddress1 { + font-size: 1.1rem; +} + #fxaEmailAddress1, #fxaEmailAddress2, #fxaEmailAddress3 { @@ -612,9 +621,6 @@ description > html|a { .fxaFirefoxLogo { list-style-image: url(chrome://browser/skin/fxa/logo@2x.png); } - #fxaProfileImage { - list-style-image: url(chrome://browser/skin/fxa/default-avatar@2x.png); - } } .treecol-sortdirection { diff --git a/arc-firefox-theme/chrome/browser/privatebrowsing/aboutPrivateBrowsing.css b/arc-firefox-theme/chrome/browser/privatebrowsing/aboutPrivateBrowsing.css new file mode 100644 index 0000000..abc85fa --- /dev/null +++ b/arc-firefox-theme/chrome/browser/privatebrowsing/aboutPrivateBrowsing.css @@ -0,0 +1,210 @@ +/* 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/. */ + +@import url("chrome://global/skin/in-content/info-pages.css"); + +:root { + --color-grey-lightest: #fbfbfb; + --color-grey: #b1b1b1; + + --color-blue: #0996f8; + --color-blue-dark: #0670cc; + --color-blue-darker: #005bab; + + --icon-margin: 64px; +} + +html.private { + --in-content-page-color: #beb8cc; + --in-content-text-color: #beb8cc; + --in-content-page-background: #1c023c; +} + +body { + padding: 40px; +} + +a:link { + color: var(--color-blue); + text-decoration: none; +} + +a:hover { + color: var(--color-blue-dark); + text-decoration: underline; +} + +a:hover:active { + color: var(--color-blue-darker); +} + +a:visited { + color: var(--color-blue-darker); +} + +.about-content-container { + max-width: 780px; +} + +.section-main { + margin-bottom: 48px; + -moz-margin-start: var(--icon-margin); + -moz-padding-start: 24px; +} + +.section-main:last-child { + margin-bottom: 0; +} + +p { + line-height: 1.5em; +} + +.list-row { + overflow: auto; +} + +.list-row > ul > li { + float: left; + width: 220px; + line-height: 1.5em; + -moz-margin-start: 1em; + margin-bottom: 0; +} + +.list-row > ul > li:-moz-dir(rtl) { + float: right; +} + +.title { + background-image: url("chrome://browser/skin/privatebrowsing/private-browsing.svg"); + background-size: 64px; + background-position: left, center; + font-weight: lighter; + line-height: 1.5em; + min-height: 64px; + -moz-margin-start: 0; + -moz-padding-start: calc(var(--icon-margin) + 24px); +} + +.title:-moz-dir(rtl) { + background-position: right, center; +} + +.about-subheader { + display: flex; + align-items: center; + font-size: 1.5em; + font-weight: lighter; + min-height: 32px; + background-image: url("chrome://browser/skin/privatebrowsing/tracking-protection.svg"); + background-repeat: no-repeat; + background-size: 32px; + -moz-margin-start: calc(var(--icon-margin) - 32px); + -moz-padding-start: 56px; +} + +.about-subheader:-moz-dir(rtl) { + background-position: right; +} + +.about-subheader.tp-off { + background-image: url("chrome://browser/skin/privatebrowsing/tracking-protection-off.svg"); +} + +.about-info { + font-size: .875em; +} + +.tpTitle { + margin-inline-end: 12px; +} + +.private strong { + color: var(--color-grey-lightest); + font-weight: normal; +} + +a.button { + padding: 5px 40px; + background-color: #381e59; + border: 1px solid #43256a; + border-radius: 4px; + text-decoration: none; + display: inline-block; +} + +.toggle + .toggle-btn { + box-sizing: border-box; + cursor: pointer; + min-width: 60px; + height: 24px; + border-radius: 12px; + background-color: var(--color-grey); + border: 1px var(--color-grey) solid; + padding: 2px; +} + +.toggle + .toggle-btn::after, +.toggle + .toggle-btn::before { + position: relative; + display: block; + content: ""; + width: 19px; + height: 100%; +} + +.toggle + .toggle-btn::after { + left: 0; + box-shadow: 0 0 1px 1px hsla(0, 0%, 0%, .1), + 0 1px 0 hsla(0, 0%, 0%, .2); + border-radius: 50%; + background: white; + transition: left .2s ease; +} + +.toggle + .toggle-btn::before { + float: left; + left: 9px; + visibility: hidden; + background-size: 16px; + background-repeat: no-repeat; + background-color: transparent; + background-image: url("chrome://browser/skin/privatebrowsing/check.svg"); +} + +.toggle + .toggle-btn:-moz-dir(rtl)::after { + left: auto; + right: 0; + transition-property: right; +} + +.toggle + .toggle-btn:-moz-dir(rtl)::before { + float: right; + left: auto; + right: 9px; +} + +.toggle:checked + .toggle-btn { + background: #3fc455; + border: 1px solid #269939; +} + +.toggle:checked + .toggle-btn::after { + left: 35px; +} + +.toggle:checked + .toggle-btn:-moz-dir(rtl)::after { + right: 35px; +} + +.toggle:checked + .toggle-btn::before { + visibility: visible; +} + +.toggle:-moz-focusring + .toggle-btn { + outline: 2px solid rgba(0, 149, 221, 0.5); + outline-offset: 1px; + -moz-outline-radius: 2px; +} diff --git a/arc-firefox-theme/chrome/browser/privatebrowsing/attention.png b/arc-firefox-theme/chrome/browser/privatebrowsing/attention.png Binary files differdeleted file mode 100755 index 8706928..0000000 --- a/arc-firefox-theme/chrome/browser/privatebrowsing/attention.png +++ /dev/null diff --git a/arc-firefox-theme/chrome/browser/privatebrowsing/attention@2x.png b/arc-firefox-theme/chrome/browser/privatebrowsing/attention@2x.png Binary files differdeleted file mode 100755 index 5b32888..0000000 --- a/arc-firefox-theme/chrome/browser/privatebrowsing/attention@2x.png +++ /dev/null diff --git a/arc-firefox-theme/chrome/browser/privatebrowsing/check.png b/arc-firefox-theme/chrome/browser/privatebrowsing/check.png Binary files differdeleted file mode 100755 index 59ca51b..0000000 --- a/arc-firefox-theme/chrome/browser/privatebrowsing/check.png +++ /dev/null diff --git a/arc-firefox-theme/chrome/browser/privatebrowsing/check.svg b/arc-firefox-theme/chrome/browser/privatebrowsing/check.svg new file mode 100644 index 0000000..a8e4bcc --- /dev/null +++ b/arc-firefox-theme/chrome/browser/privatebrowsing/check.svg @@ -0,0 +1,8 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> + +<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"> + <path fill="#fff" d="M30.057,9.752L15.9,23.909h0l-4.044,4.045-4.045-4.045h0l-6.068-6.067,4.045-4.045,6.068,6.067L26.012,5.707Z"/> +</svg> diff --git a/arc-firefox-theme/chrome/browser/privatebrowsing/check@2x.png b/arc-firefox-theme/chrome/browser/privatebrowsing/check@2x.png Binary files differdeleted file mode 100755 index 031685c..0000000 --- a/arc-firefox-theme/chrome/browser/privatebrowsing/check@2x.png +++ /dev/null diff --git a/arc-firefox-theme/chrome/browser/privatebrowsing/favicon.svg b/arc-firefox-theme/chrome/browser/privatebrowsing/favicon.svg new file mode 100644 index 0000000..6de9c64 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/privatebrowsing/favicon.svg @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> + +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> + <circle cx="8" cy="8" r="8" fill="#8d20ae" /> + <circle cx="8" cy="8" r="7.5" stroke="#7b149a" stroke-width="1" fill="none" /> + <path d="M11.309,10.995C10.061,10.995,9.2,9.5,8,9.5s-2.135,1.5-3.309,1.5c-1.541,0-2.678-1.455-2.7-3.948C1.983,5.5,2.446,5.005,4.446,5.005S7.031,5.822,8,5.822s1.555-.817,3.555-0.817S14.017,5.5,14.006,7.047C13.987,9.54,12.85,10.995,11.309,10.995ZM5.426,6.911a1.739,1.739,0,0,0-1.716.953A2.049,2.049,0,0,0,5.3,8.544c0.788,0,1.716-.288,1.716-0.544A1.428,1.428,0,0,0,5.426,6.911Zm5.148,0A1.429,1.429,0,0,0,8.981,8c0,0.257.928,0.544,1.716,0.544a2.049,2.049,0,0,0,1.593-.681A1.739,1.739,0,0,0,10.574,6.911Z" stroke="#670c83" stroke-width="2" fill="none" /> + <path d="M11.309,10.995C10.061,10.995,9.2,9.5,8,9.5s-2.135,1.5-3.309,1.5c-1.541,0-2.678-1.455-2.7-3.948C1.983,5.5,2.446,5.005,4.446,5.005S7.031,5.822,8,5.822s1.555-.817,3.555-0.817S14.017,5.5,14.006,7.047C13.987,9.54,12.85,10.995,11.309,10.995ZM5.426,6.911a1.739,1.739,0,0,0-1.716.953A2.049,2.049,0,0,0,5.3,8.544c0.788,0,1.716-.288,1.716-0.544A1.428,1.428,0,0,0,5.426,6.911Zm5.148,0A1.429,1.429,0,0,0,8.981,8c0,0.257.928,0.544,1.716,0.544a2.049,2.049,0,0,0,1.593-.681A1.739,1.739,0,0,0,10.574,6.911Z" fill="#fff" /> +</svg> diff --git a/arc-firefox-theme/chrome/browser/privatebrowsing/mask.svg b/arc-firefox-theme/chrome/browser/privatebrowsing/mask.svg deleted file mode 100755 index 655445e..0000000 --- a/arc-firefox-theme/chrome/browser/privatebrowsing/mask.svg +++ /dev/null @@ -1,8 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?> -<!-- 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/. --> -<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" - width="47.203" height="26.109" viewBox="0 0 94.407 52.219"> - <path fill="#fff" d="M92.657,14.670 C92.270,21.197 93.816,28.994 85.124,40.236 C75.849,52.230 66.639,51.314 64.901,51.495 C54.468,52.578 53.093,43.491 46.999,43.491 C41.664,43.491 37.317,52.520 29.481,51.495 C27.749,51.268 18.533,52.230 9.259,40.236 C0.567,28.994 2.112,21.197 1.726,14.670 C1.340,8.142 -0.012,1.071 -0.012,1.071 C-0.012,1.071 4.176,5.241 9.585,5.604 C14.993,5.967 16.004,3.740 27.416,0.527 C39.755,-2.947 47.191,11.290 47.191,11.290 C47.191,11.290 55.571,-2.737 66.967,0.527 C78.363,3.791 78.836,5.967 84.245,5.604 C89.653,5.241 94.395,1.071 94.395,1.071 C94.395,1.071 93.043,8.142 92.657,14.670 ZM28.858,17.405 C22.113,15.942 19.283,18.441 16.393,19.507 C13.872,20.437 11.577,20.726 11.577,20.726 C11.577,20.726 11.963,24.533 18.724,27.797 C25.484,31.061 39.352,29.377 39.352,29.377 C39.352,29.377 40.824,20.000 28.858,17.405 ZM77.990,19.507 C75.100,18.441 72.270,15.942 65.525,17.405 C53.557,20.000 55.030,29.377 55.030,29.377 C55.030,29.377 68.899,31.061 75.659,27.797 C82.419,24.533 82.805,20.726 82.805,20.726 C82.805,20.726 80.511,20.437 77.990,19.507 Z"/> -</svg> diff --git a/arc-firefox-theme/chrome/browser/privatebrowsing/private-browsing.svg b/arc-firefox-theme/chrome/browser/privatebrowsing/private-browsing.svg new file mode 100644 index 0000000..cc37bc4 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/privatebrowsing/private-browsing.svg @@ -0,0 +1,12 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> + +<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"> + <ellipse cx="32" cy="34" rx="29.5" ry="30" fill="#000" fill-opacity=".1" /> + <circle cx="32" cy="32" r="30" fill="#8d20ae" /> + <circle cx="32" cy="32" r="29.5" stroke="#7b149a" stroke-width="1" fill="none" /> + <path d="M45.225,43c-4.989,0-8.44-5.5-13.224-5.5S23.468,43,18.776,43C12.62,43,8.074,37.656,8,28.5,7.954,22.815,9.805,21,17.8,21S28.128,24,32,24s6.214-3,14.2-3,9.842,1.815,9.8,7.5C55.926,37.656,51.381,43,45.225,43ZM21.714,28c-4.857.193-6.857,2.846-6.857,3.5s3.22,2.5,6.367,2.5,6.857-1.057,6.857-2C28.082,30.948,26.3,27.818,21.714,28Zm20.572,0c-4.583-.182-6.367,2.948-6.367,4,0,0.943,3.709,2,6.857,2s6.367-1.846,6.367-2.5S47.143,28.193,42.286,28Z" stroke="#670c83" stroke-width="2" fill="none" /> + <path d="M45.225,43c-4.989,0-8.44-5.5-13.224-5.5S23.468,43,18.776,43C12.62,43,8.074,37.656,8,28.5,7.954,22.815,9.805,21,17.8,21S28.128,24,32,24s6.214-3,14.2-3,9.842,1.815,9.8,7.5C55.926,37.656,51.381,43,45.225,43ZM21.714,28c-4.857.193-6.857,2.846-6.857,3.5s3.22,2.5,6.367,2.5,6.857-1.057,6.857-2C28.082,30.948,26.3,27.818,21.714,28Zm20.572,0c-4.583-.182-6.367,2.948-6.367,4,0,0.943,3.709,2,6.857,2s6.367-1.846,6.367-2.5S47.143,28.193,42.286,28Z" fill="#fff" /> +</svg> diff --git a/arc-firefox-theme/chrome/browser/privatebrowsing/shield-page.png b/arc-firefox-theme/chrome/browser/privatebrowsing/shield-page.png Binary files differdeleted file mode 100755 index 2ddcf34..0000000 --- a/arc-firefox-theme/chrome/browser/privatebrowsing/shield-page.png +++ /dev/null diff --git a/arc-firefox-theme/chrome/browser/privatebrowsing/shield-page@2x.png b/arc-firefox-theme/chrome/browser/privatebrowsing/shield-page@2x.png Binary files differdeleted file mode 100755 index 72a0b82..0000000 --- a/arc-firefox-theme/chrome/browser/privatebrowsing/shield-page@2x.png +++ /dev/null diff --git a/arc-firefox-theme/chrome/browser/privatebrowsing/tracking-protection-off.svg b/arc-firefox-theme/chrome/browser/privatebrowsing/tracking-protection-off.svg new file mode 100644 index 0000000..7da0ca7 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/privatebrowsing/tracking-protection-off.svg @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> + +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"> + <g fill="#ccc"> + <path d="M28.8,0.3l-2.4,2.4L16.1,1.1L4.9,2.9c-1,0.2-1.8,1-1.8,2c0,2.5,0,6.9,0.3,8.7c0.4,4.3,1.2,6.9,2.7,9.4l-3.5,3.5l2,2 + L30.8,2.3L28.8,0.3z M5.3,13.5c-0.2-1.9-0.2-6.2-0.2-8.6c0,0,0,0,0.1,0l10.9-1.8l8.6,1.4L16.1,13V5L7.2,6.6c-0.1,0-0.1,0-0.1,0 + c0,2,0,5.6,0.2,7.1c0.3,3,0.8,4.9,1.6,6.5l-1.4,1.4C6.3,19.6,5.6,17.3,5.3,13.5z"/> + <path d="M16.1,20.3l-3.9,3.9c1.7,1.2,3.4,1.6,3.9,1.7V20.3z"/> + <path d="M26.9,13.4c-0.5,5.6-1.7,8-3.8,10.7c-2.4,3.1-6.1,3.9-7,4.1c-0.7-0.2-3.2-0.7-5.4-2.5L9.3,27c3.1,2.7,6.7,3,6.7,3 + s5.2-0.5,8.6-4.9c2.5-3.2,3.6-5.9,4.2-11.6c0.1-1.3,0.2-4,0.2-6.3l-2,2C27,10.9,27,12.5,26.9,13.4z"/> + </g> +</svg> diff --git a/arc-firefox-theme/chrome/browser/privatebrowsing/tracking-protection.svg b/arc-firefox-theme/chrome/browser/privatebrowsing/tracking-protection.svg new file mode 100644 index 0000000..d22fe7d --- /dev/null +++ b/arc-firefox-theme/chrome/browser/privatebrowsing/tracking-protection.svg @@ -0,0 +1,12 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> + +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"> + <path fill="#ccc" d="M27.2,2.8L16,1L4.8,2.8C3.8,3,3,3.8,3,4.8c0,2.5,0,6.9,0.3,8.7C3.8,19,5,21.8,7.5,25.1C10.8,29.5,16,30,16,30 + s5.2-0.5,8.6-4.9c2.5-3.2,3.6-5.9,4.2-11.6C29,11.7,29,7.2,29,4.8C29,3.8,28.2,3,27.2,2.8z M26.8,13.3L26.8,13.3L26.8,13.3 + c-0.5,5.6-1.7,8-3.8,10.7c-2.4,3.1-6.1,3.9-7,4.1c-0.9-0.2-4.6-1-7-4.1c-2.1-2.8-3.3-5.2-3.8-10.6l0,0l0,0C5,11.5,5,7.2,5,4.8 + c0,0,0,0,0.1,0l0,0l0,0L16,3l10.8,1.8l0,0l0,0c0.1,0,0.1,0,0.1,0C27,7,27,11.5,26.8,13.3z M7.1,6.5L7.1,6.5L7.1,6.5 + C7,6.5,7,6.5,7.1,6.5C7,8.5,7,12.1,7.2,13.6l0,0l0,0c0.4,4.5,1.4,6.5,3.1,8.9c2,2.6,5,3.3,5.7,3.4v-21L7.1,6.5z"/> +</svg> diff --git a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss index 8e6bd9a..554a051 100644 --- a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss +++ b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss @@ -602,8 +602,8 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { max-width: 16px; } -:-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button) > .toolbarbutton-icon, -:-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button) > :-moz-any(.toolbarbutton-menubutton-button, .toolbarbutton-badge-stack) > .toolbarbutton-icon, +:-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, .toolbarbutton-legacy-addon) > .toolbarbutton-icon, +:-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, .toolbarbutton-legacy-addon) > :-moz-any(.toolbarbutton-menubutton-button, .toolbarbutton-badge-stack) > .toolbarbutton-icon, #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { max-width: 18px; } @@ -632,9 +632,9 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { transition-duration: 150ms; } -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button)) > .toolbarbutton-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button)) > .toolbarbutton-badge-stack, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon { +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, .toolbarbutton-legacy-addon)) > .toolbarbutton-icon, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, .toolbarbutton-legacy-addon)) > .toolbarbutton-badge-stack, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, .toolbarbutton-legacy-addon)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon { padding: 3px 7px; } @@ -652,8 +652,10 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { #nav-bar #PanelUI-button, #nav-bar[brighttext] #PanelUI-button { + margin-top: -3px; + margin-bottom: -3px; background: none; - border-image: url("chrome://browser/skin/custom_images/navbar-separator.png") 0 0 0 2 / 0 0 0 2px; + border-image: url("chrome://browser/skin/custom_images/#{$asset_path}/navbar-separator.png") 0 0 0 2 / 0 0 0 2px; } @@ -736,18 +738,27 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { width: 1px; height: 18px; -moz-margin-end: -1px; - background-image: linear-gradient(currentColor 0, currentColor 100%); background-position: center; background-repeat: no-repeat; background-size: 1px 18px; - opacity: .2; + //opacity: .2; } -:-moz-any(#TabsToolbar, #nav-bar)[brighttext] .toolbaritem-combined-buttons > separator, -:-moz-any(#TabsToolbar, #nav-bar)[brighttext] .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before { - opacity: .3; +#nav-bar .toolbaritem-combined-buttons:not(:hover) > separator, +#nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before { + background: $borders_color; } +#TabsToolbar .toolbaritem-combined-buttons:not(:hover) > separator, +#TabsToolbar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before { + background: transparentize($header_fg, 0.65); +} + +//:-moz-any(#TabsToolbar, #nav-bar)[brighttext] .toolbaritem-combined-buttons > separator, +//:-moz-any(#TabsToolbar, #nav-bar)[brighttext] .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before { +// opacity: .3; +//} + :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { -moz-margin-start: -4px; //margin-top: 3px; @@ -1492,6 +1503,15 @@ list-style-image: url("chrome://browser/skin/custom_images/toolbar-icons-active. &:active { list-style-image: url("chrome://browser/skin/custom_images/#{$darker_asset_path_2}/window-controls/minimize_pressed.svg"); } } +/* Location bar */ +//#nav-bar { +// --urlbar-border-color: ThreeDShadow; +//} + +//#nav-bar:-moz-lwtheme { +// --urlbar-border-color: rgba(0,0,0,.3); +//} + #urlbar, .searchbar-textbox { -moz-appearance: none; @@ -1598,7 +1618,7 @@ list-style-image: url("chrome://browser/skin/custom_images/toolbar-icons-active. #urlbar-search-settings { -moz-appearance: none; -moz-user-focus: ignore; - color: inherit; + color: GrayText; margin: 0; border: 0; padding: 8px 20px; @@ -1719,7 +1739,8 @@ list-style-image: url("chrome://browser/skin/custom_images/toolbar-icons-active. #identity-box { -// --identity-box-selected-background-color: rgb(231,230,230); + //--identity-box-hover-background-color: rgb(231,230,230); + //--identity-box-selected-background-color: rgb(211,210,210); --identity-box-verified-color: hsl(92,100%,30%); --identity-box-chrome-color: rgb(229,115,0); @@ -1760,8 +1781,12 @@ list-style-image: url("chrome://browser/skin/custom_images/toolbar-icons-active. color: var(--identity-box-chrome-color); } -#identity-icon-labels { - padding-inline-start: 2px; +#identity-icon-labels:-moz-locale-dir(ltr) { + padding-left: 2px; +} + +#identity-icon-labels:-moz-locale-dir(rtl) { + padding-right: 2px; } #notification-popup-box:not([hidden]) + #identity-box { @@ -1946,11 +1971,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box list-style-image: url(chrome://mozapps/skin/passwordmgr/key-64.png); } -.popup-notification-icon[popupid="webapps-install-progress"], -.popup-notification-icon[popupid="webapps-install"] { - list-style-image: url(chrome://global/skin/icons/webapps-64.png); -} - .popup-notification-icon[popupid="webRTC-sharingDevices"], .popup-notification-icon[popupid="webRTC-shareDevices"] { list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64.png); @@ -2041,11 +2061,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box transform: scaleX(-1); } -.webapps-notification-icon, -#webapps-notification-icon { - list-style-image: url(chrome://global/skin/icons/webapps-16.png); -} - #plugins-notification-icon { list-style-image: url(chrome://browser/skin/notification-pluginNormal.png); } @@ -2430,65 +2445,114 @@ notification[value="translation"] menulist > .menulist-dropmarker { max-width : 36px; } -.ac-result-type-bookmark, +#PopupAutoCompleteRichResult { + /* The awesomebar popup should open just below the navbar bottom border. */ + margin-top: 1px; +} + +.autocomplete-richlistbox { + padding: 4px; +} + +.autocomplete-richlistitem { + height: 30px; + min-height: 30px; + font: message-box; + border-radius: 2px; + border: 1px solid transparent; +} + +.autocomplete-richlistitem[selected=true] { + background-color: Highlight; +} + +.ac-title { + font-size: 14px; +} + +.ac-tags { + font-size: 12px; +} + +html|span.ac-tag { + background-color: MenuText; + color: Menu; + border-radius: 2px; + border: 1px solid transparent; + padding: 0 1px; +} + +.ac-separator, +.ac-url, +.ac-action { + font-size: 12px; + color: -moz-nativehyperlinktext; +} + +.ac-title[selected=true], +.ac-separator[selected], +.ac-url[selected=true], +.ac-action[selected=true] { + color: inherit !important; +} + +.ac-tags-text[selected] > html|span.ac-tag { + background-color: HighlightText; + color: Highlight; +} + +html|span.ac-emphasize-text-title, +html|span.ac-emphasize-text-tag, +html|span.ac-emphasize-text-url { + font-weight: 600; +} + +.ac-type-icon[type=bookmark] { + list-style-image: url("chrome://browser/skin/urlbar-star.svg#star"); +} + +.ac-type-icon[type=bookmark][selected][current] { + list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted"); +} + .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) { list-style-image: url("chrome://browser/skin/places/autocomplete-star.png"); width: 16px; height: 16px; } -.ac-result-type-keyword, -.autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage), -richlistitem[type~="action"][actiontype="searchengine"] > .ac-title-box > .ac-site-icon { +.ac-type-icon[type=keyword], +.ac-site-icon[type=searchengine], +.autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) { list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); - width: 16px; - height: 16px; } -.ac-result-type-keyword[selected="true"], -.autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected), -richlistitem[type~="action"][actiontype="searchengine"][selected="true"] > .ac-title-box > .ac-site-icon { +.ac-type-icon[type=keyword][selected], +.ac-site-icon[type=searchengine][selected], +.autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected) { list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted); } -.ac-result-type-tag, .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) { list-style-image: url("chrome://browser/skin/places/tag.png"); width: 16px; height: 16px; } -.ac-comment, -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description, -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button { - font-size: 1.05em; +.ac-type-icon[type=switchtab], +.ac-type-icon[type=remotetab] { + list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab"); } -.ac-extra > .ac-comment { - font-size: inherit; -} - -.ac-url-text, -.ac-action-text { - color: -moz-nativehyperlinktext; - font-size: 0.9em; -} - -richlistitem[type~="action"][actiontype$="tab"] > .ac-url-box > .ac-action-icon { - list-style-image: url("chrome://browser/skin/actionicon-tab.png"); - padding: 0 3px; +.ac-type-icon[type=switchtab][selected], +.ac-type-icon[type=remotetab][selected] { + list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted"); } .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) { color: GrayText; } -.ac-comment[selected="true"], -.ac-url-text[selected="true"], -.ac-action-text[selected="true"] { - color: inherit !important; -} - .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment), .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment) { color: GrayText; @@ -2749,29 +2813,6 @@ richlistitem[type~="action"][actiontype$="tab"] > .ac-url-box > .ac-action-icon min-width: 27em; } -.panel-promo-box { - margin: 8px -10px -10px -10px; - padding: 8px 10px; - border-top: 1px solid ThreeDShadow; - background-image: linear-gradient(hsla(0,0%,0%,.15), hsla(0,0%,0%,.08) 6px); -} - -.panel-promo-icon { - list-style-image: url("chrome://browser/skin/sync-notification-24.png"); - -moz-margin-end: 10px; - vertical-align: middle; -} - -.panel-promo-closebutton { - -moz-appearance: none; - height: 16px; - width: 16px; -} - -.panel-promo-closebutton > .toolbarbutton-text { - padding: 0; -} - /* Content area */ #sidebar { background-color: Window; @@ -3534,7 +3575,7 @@ richlistitem[type~="action"][actiontype$="tab"] > .ac-url-box > .ac-action-icon } .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon { - list-style-image: url("chrome://global/skin/icons/loading_16.png"); + list-style-image: url("chrome://global/skin/icons/loading.png"); } .alltabs-item[tabIsVisible] { @@ -3560,7 +3601,7 @@ menuitem:hover > hbox > .alltabs-endimage[soundplaying] { /* Sidebar */ #sidebar-throbber[loading="true"] { - list-style-image: url("chrome://global/skin/icons/loading_16.png"); + list-style-image: url("chrome://global/skin/icons/loading.png"); -moz-margin-end: 4px; } @@ -3761,7 +3802,7 @@ html|*#fullscreen-exit-button { color: #fff; border: 1px solid #111; border-radius: 2px; - padding: 5px; + padding: 0 5px; width: 200px; margin: 0; } @@ -3891,7 +3932,7 @@ html|*#fullscreen-exit-button { } .devtools-responsiveui-close { - list-style-image: url("chrome://devtools/skin/images/close.png"); + list-style-image: url("chrome://devtools/skin/images/close.svg"); } .devtools-responsiveui-rotate { @@ -3899,10 +3940,6 @@ html|*#fullscreen-exit-button { } @media (min-resolution: 1.1dppx) { - .devtools-responsiveui-close { - list-style-image: url("chrome://devtools/skin/images/close@2x.png"); - } - .devtools-responsiveui-rotate { list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-rotate@2x.png"); } @@ -4477,7 +4514,7 @@ notification.pluginVulnerable > .notification-inner > .messageCloseButton:not(:h min-height: 18px; } -#TabsToolbar #downloads-button[cui-areatype="toolbar"] > #downloads-indicator-anchor > #downloads-indicator-icon { +#TabsToolbar #downloads-button[cui-areatype="toolbar"]:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon { background: -moz-image-rect(url("chrome://browser/skin/custom_images/#{$asset_path}/tabbar-icons.svg"), 0, 198, 18, 180) center no-repeat; } @@ -4489,19 +4526,47 @@ notification.pluginVulnerable > .notification-inner > .messageCloseButton:not(:h 0, 198, 18, 180) center no-repeat; } -//toolbar[brighttext] #downloads-button[cui-areatype="toolbar"]:not([attention]) > #downloads-indicator-anchor > #downloads-indicator-icon { +//toolbar[brighttext] #downloads-button[cui-areatype="toolbar"]:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon { // background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), // 0, 198, 18, 180) center no-repeat; //} -#downloads-button[cui-areatype="toolbar"][attention] > #downloads-indicator-anchor > #downloads-indicator-icon, -#nav-bar #downloads-button[cui-areatype="toolbar"][attention] > #downloads-indicator-anchor > #downloads-indicator-icon, -#TabsToolbar #downloads-button[cui-areatype="toolbar"][attention] > #downloads-indicator-anchor > #downloads-indicator-icon { +#downloads-button[cui-areatype="toolbar"][attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#downloads-button[cui-areatype="toolbar"][attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + display: -moz-box; + height: 13px; + width: 13px; + background-size: contain; + border: none; + box-shadow: none; + filter: drop-shadow(0 1px 0 hsla(206, 50%, 10%, .15)); +} + +#downloads-button[cui-areatype="toolbar"][attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: #D90000 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center; +} + +#downloads-button[cui-areatype="toolbar"][attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: #FFBF00 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center; +} + +#downloads-button[cui-areatype="toolbar"][attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive, +#downloads-button[cui-areatype="toolbar"][attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive { + filter: none; +} + +#downloads-button[cui-areatype="toolbar"][attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon, +#nav-bar #downloads-button[cui-areatype="toolbar"][attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon, +#TabsToolbar #downloads-button[cui-areatype="toolbar"][attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon { background-image: -moz-image-rect(url("chrome://browser/skin/custom_images/#{$asset_path}/toolbar-icons.svg"), 18, 198, 36, 180); } -#downloads-button[cui-areatype="menu-panel"][attention] { +//toolbar[brighttext] #downloads-button[cui-areatype="toolbar"][attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon { +// background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 18, 198, 36, 180); +//} + +#downloads-button[cui-areatype="menu-panel"][attention="success"] { list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png"); -moz-image-region: auto; } @@ -4515,15 +4580,15 @@ notification.pluginVulnerable > .notification-inner > .messageCloseButton:not(:h background-size: 12px; } -//toolbar[brighttext] #downloads-button:not([counter]):not([attention]) > #downloads-indicator-anchor > #downloads-button-progress-area > #downloads-indicator-counter { +//toolbar[brighttext] #downloads-button:not([counter]):not([attention="success"]) > #downloads-indicator-anchor > #downloads-button-progress-area > #downloads-indicator-counter { // background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 198, 18, 180); //} -#downloads-button:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { +#downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { background-image: -moz-image-rect(url("chrome://browser/skin/custom_images/#{$asset_path}/toolbar-icons.svg"), 18, 198, 36, 180); } -//toolbar[brighttext] #downloads-button:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { +//toolbar[brighttext] #downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { // background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 18, 198, 36, 180); //} @@ -4719,7 +4784,7 @@ toolbar[brighttext] #downloads-indicator-counter { } #social-sidebar-button[loading="true"] { - list-style-image: url("chrome://global/skin/icons/loading_16.png"); + list-style-image: url("chrome://global/skin/icons/loading.png"); } #social-sidebar-favico { @@ -5190,6 +5255,14 @@ toolbarpaletteitem[place="toolbar"] { margin-bottom: 25px; } +toolbarpaletteitem[place="palette"]:-moz-focusring, +toolbarpaletteitem[place="panel"]:-moz-focusring, +toolbarpaletteitem[place="toolbar"]:-moz-focusring { + outline: 1px dotted rgba(0,0,0,.5); + outline-offset: -5px; + -moz-outline-radius: 2.5px; +} + #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton, #wrapper-edit-controls[place="palette"] > #edit-controls > separator, #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton, @@ -5494,22 +5567,18 @@ toolbarpaletteitem[place="toolbar"] { } #UITourTooltipBody { - -moz-margin-end: 14px; -} - -#UITourTooltipBody > vbox { - padding-top: 4px; + -moz-box-align: start; } -#UITourTooltipIconContainer { - -moz-margin-start: -16px; +#UITourtooltipTitleContainer { + -moz-box-align: start; + margin-bottom: 10px; } #UITourTooltipIcon { width: 48px; height: 48px; - -moz-margin-start: 28px; - -moz-margin-end: 28px; + -moz-margin-end: 10px; } #UITourTooltipTitle, @@ -5520,9 +5589,7 @@ toolbarpaletteitem[place="toolbar"] { #UITourTooltipTitle { font-size: 1.45rem; font-weight: bold; - -moz-margin-start: 0; - -moz-margin-end: 0; - margin: 0 0 9px 0; + margin: 0; } #UITourTooltipDescription { @@ -5534,6 +5601,7 @@ toolbarpaletteitem[place="toolbar"] { } #UITourTooltipClose { + position: relative; -moz-appearance: none; border: none; background-color: transparent; @@ -5550,8 +5618,8 @@ toolbarpaletteitem[place="toolbar"] { -moz-box-pack: end; background-color: hsla(210,4%,10%,.07); border-top: 1px solid hsla(210,4%,10%,.14); - margin: 24px -16px -16px; - padding: 2em 15px; + margin: 10px -16px -16px; + padding: 16px; } #UITourTooltipButtons > label, @@ -5564,6 +5632,11 @@ toolbarpaletteitem[place="toolbar"] { -moz-margin-start: 0; } +#UITourTooltipButtons > label:last-child, +#UITourTooltipButtons > button:last-child { + margin-inline-end: 0; +} + #UITourTooltipButtons > button[image] > .button-box > .button-icon { width: 16px; height: 16px; @@ -5767,7 +5840,12 @@ notification.heartbeat { width: 16px; } +/** + * Override the --panel-arrowcontent-padding so the background extends + * to the sides and bottom of the panel. + */ #UITourTooltipButtons { + margin-left: -10px; margin-bottom: -10px; } diff --git a/arc-firefox-theme/chrome/browser/sass/browser-dark.css b/arc-firefox-theme/chrome/browser/sass/browser-dark.css index 49f2f1d..e860708 100644 --- a/arc-firefox-theme/chrome/browser/sass/browser-dark.css +++ b/arc-firefox-theme/chrome/browser/sass/browser-dark.css @@ -476,8 +476,8 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { :-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1 > :-moz-any(.toolbarbutton-menubutton-button, .toolbarbutton-badge-stack) > .toolbarbutton-icon { max-width: 16px; } -:-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button) > .toolbarbutton-icon, -:-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button) > :-moz-any(.toolbarbutton-menubutton-button, .toolbarbutton-badge-stack) > .toolbarbutton-icon, +:-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, .toolbarbutton-legacy-addon) > .toolbarbutton-icon, +:-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, .toolbarbutton-legacy-addon) > :-moz-any(.toolbarbutton-menubutton-button, .toolbarbutton-badge-stack) > .toolbarbutton-icon, #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { max-width: 18px; } @@ -502,9 +502,9 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { transition-property: background-color, border-color; transition-duration: 150ms; } -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button)) > .toolbarbutton-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button)) > .toolbarbutton-badge-stack, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon { +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, .toolbarbutton-legacy-addon)) > .toolbarbutton-icon, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, .toolbarbutton-legacy-addon)) > .toolbarbutton-badge-stack, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, .toolbarbutton-legacy-addon)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon { padding: 3px 7px; } :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-icon, @@ -519,8 +519,10 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { #nav-bar #PanelUI-button, #nav-bar[brighttext] #PanelUI-button { + margin-top: -3px; + margin-bottom: -3px; background: none; - border-image: url("chrome://browser/skin/custom_images/navbar-separator.png") 0 0 0 2/0 0 0 2px; } + border-image: url("chrome://browser/skin/custom_images/dark/navbar-separator.png") 0 0 0 2/0 0 0 2px; } .findbar-button:not(:-moz-any([checked="true"], [disabled="true"])):hover > .toolbarbutton-text, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open]:not([disabled=true]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon, @@ -591,15 +593,17 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { width: 1px; height: 18px; -moz-margin-end: -1px; - background-image: linear-gradient(currentColor 0, currentColor 100%); background-position: center; background-repeat: no-repeat; - background-size: 1px 18px; - opacity: .2; } + background-size: 1px 18px; } -:-moz-any(#TabsToolbar, #nav-bar)[brighttext] .toolbaritem-combined-buttons > separator, -:-moz-any(#TabsToolbar, #nav-bar)[brighttext] .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before { - opacity: .3; } +#nav-bar .toolbaritem-combined-buttons:not(:hover) > separator, +#nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before { + background: #2b2e39; } + +#TabsToolbar .toolbaritem-combined-buttons:not(:hover) > separator, +#TabsToolbar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before { + background: rgba(207, 218, 231, 0.15); } :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { -moz-margin-start: -4px; } @@ -1132,6 +1136,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { #minimize-button:active { list-style-image: url("chrome://browser/skin/custom_images/dark/window-controls/minimize_pressed.svg"); } +/* Location bar */ #urlbar, .searchbar-textbox { -moz-appearance: none; @@ -1197,7 +1202,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { #urlbar-search-settings { -moz-appearance: none; -moz-user-focus: ignore; - color: inherit; + color: GrayText; margin: 0; border: 0; padding: 8px 20px; @@ -1307,8 +1312,11 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { #urlbar[pageproxystate="valid"] > #identity-box.chromeUI { color: var(--identity-box-chrome-color); } -#identity-icon-labels { - padding-inline-start: 2px; } +#identity-icon-labels:-moz-locale-dir(ltr) { + padding-left: 2px; } + +#identity-icon-labels:-moz-locale-dir(rtl) { + padding-right: 2px; } #notification-popup-box:not([hidden]) + #identity-box { padding-inline-start: 5px; @@ -1441,10 +1449,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box .popup-notification-icon[popupid="password"] { list-style-image: url(chrome://mozapps/skin/passwordmgr/key-64.png); } -.popup-notification-icon[popupid="webapps-install-progress"], -.popup-notification-icon[popupid="webapps-install"] { - list-style-image: url(chrome://global/skin/icons/webapps-64.png); } - .popup-notification-icon[popupid="webRTC-sharingDevices"], .popup-notification-icon[popupid="webRTC-shareDevices"] { list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64.png); } @@ -1512,10 +1516,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box 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); } - #plugins-notification-icon { list-style-image: url(chrome://browser/skin/notification-pluginNormal.png); } @@ -1816,55 +1816,94 @@ notification[value="translation"] menulist > .menulist-dropmarker { #treecolAutoCompleteImage { max-width: 36px; } -.ac-result-type-bookmark, +#PopupAutoCompleteRichResult { + /* The awesomebar popup should open just below the navbar bottom border. */ + margin-top: 1px; } + +.autocomplete-richlistbox { + padding: 4px; } + +.autocomplete-richlistitem { + height: 30px; + min-height: 30px; + font: message-box; + border-radius: 2px; + border: 1px solid transparent; } + +.autocomplete-richlistitem[selected=true] { + background-color: Highlight; } + +.ac-title { + font-size: 14px; } + +.ac-tags { + font-size: 12px; } + +html|span.ac-tag { + background-color: MenuText; + color: Menu; + border-radius: 2px; + border: 1px solid transparent; + padding: 0 1px; } + +.ac-separator, +.ac-url, +.ac-action { + font-size: 12px; + color: -moz-nativehyperlinktext; } + +.ac-title[selected=true], +.ac-separator[selected], +.ac-url[selected=true], +.ac-action[selected=true] { + color: inherit !important; } + +.ac-tags-text[selected] > html|span.ac-tag { + background-color: HighlightText; + color: Highlight; } + +html|span.ac-emphasize-text-title, +html|span.ac-emphasize-text-tag, +html|span.ac-emphasize-text-url { + font-weight: 600; } + +.ac-type-icon[type=bookmark] { + list-style-image: url("chrome://browser/skin/urlbar-star.svg#star"); } + +.ac-type-icon[type=bookmark][selected][current] { + list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted"); } + .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) { list-style-image: url("chrome://browser/skin/places/autocomplete-star.png"); width: 16px; height: 16px; } -.ac-result-type-keyword, -.autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage), -richlistitem[type~="action"][actiontype="searchengine"] > .ac-title-box > .ac-site-icon { - list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); - width: 16px; - height: 16px; } +.ac-type-icon[type=keyword], +.ac-site-icon[type=searchengine], +.autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) { + list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); } -.ac-result-type-keyword[selected="true"], -.autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected), -richlistitem[type~="action"][actiontype="searchengine"][selected="true"] > .ac-title-box > .ac-site-icon { +.ac-type-icon[type=keyword][selected], +.ac-site-icon[type=searchengine][selected], +.autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected) { list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted); } -.ac-result-type-tag, .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) { list-style-image: url("chrome://browser/skin/places/tag.png"); width: 16px; height: 16px; } -.ac-comment, -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description, -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button { - font-size: 1.05em; } +.ac-type-icon[type=switchtab], +.ac-type-icon[type=remotetab] { + list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab"); } -.ac-extra > .ac-comment { - font-size: inherit; } - -.ac-url-text, -.ac-action-text { - color: -moz-nativehyperlinktext; - font-size: 0.9em; } - -richlistitem[type~="action"][actiontype$="tab"] > .ac-url-box > .ac-action-icon { - list-style-image: url("chrome://browser/skin/actionicon-tab.png"); - padding: 0 3px; } +.ac-type-icon[type=switchtab][selected], +.ac-type-icon[type=remotetab][selected] { + list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted"); } .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) { color: GrayText; } -.ac-comment[selected="true"], -.ac-url-text[selected="true"], -.ac-action-text[selected="true"] { - color: inherit !important; } - .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment), .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment) { color: GrayText; @@ -2064,25 +2103,6 @@ richlistitem[type~="action"][actiontype$="tab"] > .ac-url-box > .ac-action-icon #editBMPanel_folderTree { min-width: 27em; } -.panel-promo-box { - margin: 8px -10px -10px -10px; - padding: 8px 10px; - border-top: 1px solid ThreeDShadow; - background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.08) 6px); } - -.panel-promo-icon { - list-style-image: url("chrome://browser/skin/sync-notification-24.png"); - -moz-margin-end: 10px; - vertical-align: middle; } - -.panel-promo-closebutton { - -moz-appearance: none; - height: 16px; - width: 16px; } - -.panel-promo-closebutton > .toolbarbutton-text { - padding: 0; } - /* Content area */ #sidebar { background-color: Window; } @@ -2621,7 +2641,7 @@ lwtHeader;*/ font-weight: bold; } .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon { - list-style-image: url("chrome://global/skin/icons/loading_16.png"); } + list-style-image: url("chrome://global/skin/icons/loading.png"); } .alltabs-item[tabIsVisible] { /* box-shadow instead of background-color to work around native styling */ @@ -2641,7 +2661,7 @@ menuitem:hover > hbox > .alltabs-endimage[soundplaying] { /* Sidebar */ #sidebar-throbber[loading="true"] { - list-style-image: url("chrome://global/skin/icons/loading_16.png"); + list-style-image: url("chrome://global/skin/icons/loading.png"); -moz-margin-end: 4px; } toolbarbutton.chevron { @@ -2813,7 +2833,7 @@ html|*#fullscreen-exit-button { color: #fff; border: 1px solid #111; border-radius: 2px; - padding: 5px; + padding: 0 5px; width: 200px; margin: 0; } @@ -2921,15 +2941,12 @@ html|*#fullscreen-exit-button { margin-left: 0; } .devtools-responsiveui-close { - list-style-image: url("chrome://devtools/skin/images/close.png"); } + list-style-image: url("chrome://devtools/skin/images/close.svg"); } .devtools-responsiveui-rotate { list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-rotate.png"); } @media (min-resolution: 1.1dppx) { - .devtools-responsiveui-close { - list-style-image: url("chrome://devtools/skin/images/close@2x.png"); } - .devtools-responsiveui-rotate { list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-rotate@2x.png"); } } .devtools-responsiveui-touch { @@ -3396,7 +3413,7 @@ notification.pluginVulnerable > .notification-inner > .messageCloseButton:not(:h min-width: 18px; min-height: 18px; } -#TabsToolbar #downloads-button[cui-areatype="toolbar"] > #downloads-indicator-anchor > #downloads-indicator-icon { +#TabsToolbar #downloads-button[cui-areatype="toolbar"]:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon { background: -moz-image-rect(url("chrome://browser/skin/custom_images/dark/tabbar-icons.svg"), 0, 198, 18, 180) center no-repeat; } #downloads-button[cui-areatype="toolbar"]:not([disabled=true]):-moz-any([open], [checked], :hover:active) > #downloads-indicator-anchor > #downloads-indicator-icon, @@ -3404,12 +3421,32 @@ notification.pluginVulnerable > .notification-inner > .messageCloseButton:not(:h #nav-bar #downloads-button[cui-areatype="toolbar"]:not([disabled=true]):-moz-any([open], [checked], :hover:active) > #downloads-indicator-anchor > #downloads-indicator-icon { background: -moz-image-rect(url("chrome://browser/skin/custom_images/toolbar-icons-active.svg"), 0, 198, 18, 180) center no-repeat; } -#downloads-button[cui-areatype="toolbar"][attention] > #downloads-indicator-anchor > #downloads-indicator-icon, -#nav-bar #downloads-button[cui-areatype="toolbar"][attention] > #downloads-indicator-anchor > #downloads-indicator-icon, -#TabsToolbar #downloads-button[cui-areatype="toolbar"][attention] > #downloads-indicator-anchor > #downloads-indicator-icon { +#downloads-button[cui-areatype="toolbar"][attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#downloads-button[cui-areatype="toolbar"][attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + display: -moz-box; + height: 13px; + width: 13px; + background-size: contain; + border: none; + box-shadow: none; + filter: drop-shadow(0 1px 0 rgba(13, 27, 38, 0.15)); } + +#downloads-button[cui-areatype="toolbar"][attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: #D90000 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center; } + +#downloads-button[cui-areatype="toolbar"][attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: #FFBF00 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center; } + +#downloads-button[cui-areatype="toolbar"][attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive, +#downloads-button[cui-areatype="toolbar"][attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive { + filter: none; } + +#downloads-button[cui-areatype="toolbar"][attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon, +#nav-bar #downloads-button[cui-areatype="toolbar"][attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon, +#TabsToolbar #downloads-button[cui-areatype="toolbar"][attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon { background-image: -moz-image-rect(url("chrome://browser/skin/custom_images/dark/toolbar-icons.svg"), 18, 198, 36, 180); } -#downloads-button[cui-areatype="menu-panel"][attention] { +#downloads-button[cui-areatype="menu-panel"][attention="success"] { list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png"); -moz-image-region: auto; } @@ -3419,7 +3456,7 @@ notification.pluginVulnerable > .notification-inner > .messageCloseButton:not(:h background: -moz-image-rect(url("chrome://browser/skin/Toolbar-small.png"), 0, 16, 16, 0) center no-repeat; background-size: 12px; } -#downloads-button:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { +#downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { background-image: -moz-image-rect(url("chrome://browser/skin/custom_images/dark/toolbar-icons.svg"), 18, 198, 36, 180); } /*** Download notifications ***/ @@ -3595,7 +3632,7 @@ toolbar[brighttext] #downloads-indicator-counter { display: none; } #social-sidebar-button[loading="true"] { - list-style-image: url("chrome://global/skin/icons/loading_16.png"); } + list-style-image: url("chrome://global/skin/icons/loading.png"); } #social-sidebar-favico { max-height: 16px; @@ -3973,6 +4010,13 @@ toolbarpaletteitem[place="toolbar"] { #customization-palette:not([hidden]) { margin-bottom: 25px; } +toolbarpaletteitem[place="palette"]:-moz-focusring, +toolbarpaletteitem[place="panel"]:-moz-focusring, +toolbarpaletteitem[place="toolbar"]:-moz-focusring { + outline: 1px dotted rgba(0, 0, 0, 0.5); + outline-offset: -5px; + -moz-outline-radius: 2.5px; } + #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton, #wrapper-edit-controls[place="palette"] > #edit-controls > separator, #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton, @@ -4225,19 +4269,16 @@ toolbarpaletteitem[place="toolbar"] { min-width: 32px; } #UITourTooltipBody { - -moz-margin-end: 14px; } - -#UITourTooltipBody > vbox { - padding-top: 4px; } + -moz-box-align: start; } -#UITourTooltipIconContainer { - -moz-margin-start: -16px; } +#UITourtooltipTitleContainer { + -moz-box-align: start; + margin-bottom: 10px; } #UITourTooltipIcon { width: 48px; height: 48px; - -moz-margin-start: 28px; - -moz-margin-end: 28px; } + -moz-margin-end: 10px; } #UITourTooltipTitle, #UITourTooltipDescription { @@ -4246,9 +4287,7 @@ toolbarpaletteitem[place="toolbar"] { #UITourTooltipTitle { font-size: 1.45rem; font-weight: bold; - -moz-margin-start: 0; - -moz-margin-end: 0; - margin: 0 0 9px 0; } + margin: 0; } #UITourTooltipDescription { -moz-margin-start: 0; @@ -4259,6 +4298,7 @@ toolbarpaletteitem[place="toolbar"] { /* Override global.css */ } #UITourTooltipClose { + position: relative; -moz-appearance: none; border: none; background-color: transparent; @@ -4273,8 +4313,8 @@ toolbarpaletteitem[place="toolbar"] { -moz-box-pack: end; background-color: rgba(24, 26, 27, 0.07); border-top: 1px solid rgba(24, 26, 27, 0.14); - margin: 24px -16px -16px; - padding: 2em 15px; } + margin: 10px -16px -16px; + padding: 16px; } #UITourTooltipButtons > label, #UITourTooltipButtons > button { @@ -4284,6 +4324,10 @@ toolbarpaletteitem[place="toolbar"] { #UITourTooltipButtons > button:first-child { -moz-margin-start: 0; } +#UITourTooltipButtons > label:last-child, +#UITourTooltipButtons > button:last-child { + margin-inline-end: 0; } + #UITourTooltipButtons > button[image] > .button-box > .button-icon { width: 16px; height: 16px; @@ -4446,7 +4490,12 @@ notification.heartbeat { height: 16px; width: 16px; } +/** + * Override the --panel-arrowcontent-padding so the background extends + * to the sides and bottom of the panel. + */ #UITourTooltipButtons { + margin-left: -10px; margin-bottom: -10px; } #context-navigation > .menuitem-iconic { diff --git a/arc-firefox-theme/chrome/browser/sass/browser-darker.css b/arc-firefox-theme/chrome/browser/sass/browser-darker.css index 4a1a652..fde2007 100644 --- a/arc-firefox-theme/chrome/browser/sass/browser-darker.css +++ b/arc-firefox-theme/chrome/browser/sass/browser-darker.css @@ -476,8 +476,8 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { :-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1 > :-moz-any(.toolbarbutton-menubutton-button, .toolbarbutton-badge-stack) > .toolbarbutton-icon { max-width: 16px; } -:-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button) > .toolbarbutton-icon, -:-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button) > :-moz-any(.toolbarbutton-menubutton-button, .toolbarbutton-badge-stack) > .toolbarbutton-icon, +:-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, .toolbarbutton-legacy-addon) > .toolbarbutton-icon, +:-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, .toolbarbutton-legacy-addon) > :-moz-any(.toolbarbutton-menubutton-button, .toolbarbutton-badge-stack) > .toolbarbutton-icon, #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { max-width: 18px; } @@ -502,9 +502,9 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { transition-property: background-color, border-color; transition-duration: 150ms; } -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button)) > .toolbarbutton-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button)) > .toolbarbutton-badge-stack, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon { +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, .toolbarbutton-legacy-addon)) > .toolbarbutton-icon, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, .toolbarbutton-legacy-addon)) > .toolbarbutton-badge-stack, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, .toolbarbutton-legacy-addon)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon { padding: 3px 7px; } :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-icon, @@ -519,8 +519,10 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { #nav-bar #PanelUI-button, #nav-bar[brighttext] #PanelUI-button { + margin-top: -3px; + margin-bottom: -3px; background: none; - border-image: url("chrome://browser/skin/custom_images/navbar-separator.png") 0 0 0 2/0 0 0 2px; } + border-image: url("chrome://browser/skin/custom_images/light/navbar-separator.png") 0 0 0 2/0 0 0 2px; } .findbar-button:not(:-moz-any([checked="true"], [disabled="true"])):hover > .toolbarbutton-text, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open]:not([disabled=true]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon, @@ -591,15 +593,17 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { width: 1px; height: 18px; -moz-margin-end: -1px; - background-image: linear-gradient(currentColor 0, currentColor 100%); background-position: center; background-repeat: no-repeat; - background-size: 1px 18px; - opacity: .2; } + background-size: 1px 18px; } -:-moz-any(#TabsToolbar, #nav-bar)[brighttext] .toolbaritem-combined-buttons > separator, -:-moz-any(#TabsToolbar, #nav-bar)[brighttext] .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before { - opacity: .3; } +#nav-bar .toolbaritem-combined-buttons:not(:hover) > separator, +#nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before { + background: #dcdfe3; } + +#TabsToolbar .toolbaritem-combined-buttons:not(:hover) > separator, +#TabsToolbar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before { + background: rgba(207, 218, 231, 0.15); } :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { -moz-margin-start: -4px; } @@ -1132,6 +1136,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { #minimize-button:active { list-style-image: url("chrome://browser/skin/custom_images/dark/window-controls/minimize_pressed.svg"); } +/* Location bar */ #urlbar, .searchbar-textbox { -moz-appearance: none; @@ -1196,7 +1201,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { #urlbar-search-settings { -moz-appearance: none; -moz-user-focus: ignore; - color: inherit; + color: GrayText; margin: 0; border: 0; padding: 8px 20px; @@ -1306,8 +1311,11 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { #urlbar[pageproxystate="valid"] > #identity-box.chromeUI { color: var(--identity-box-chrome-color); } -#identity-icon-labels { - padding-inline-start: 2px; } +#identity-icon-labels:-moz-locale-dir(ltr) { + padding-left: 2px; } + +#identity-icon-labels:-moz-locale-dir(rtl) { + padding-right: 2px; } #notification-popup-box:not([hidden]) + #identity-box { padding-inline-start: 5px; @@ -1440,10 +1448,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box .popup-notification-icon[popupid="password"] { list-style-image: url(chrome://mozapps/skin/passwordmgr/key-64.png); } -.popup-notification-icon[popupid="webapps-install-progress"], -.popup-notification-icon[popupid="webapps-install"] { - list-style-image: url(chrome://global/skin/icons/webapps-64.png); } - .popup-notification-icon[popupid="webRTC-sharingDevices"], .popup-notification-icon[popupid="webRTC-shareDevices"] { list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64.png); } @@ -1511,10 +1515,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box 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); } - #plugins-notification-icon { list-style-image: url(chrome://browser/skin/notification-pluginNormal.png); } @@ -1815,55 +1815,94 @@ notification[value="translation"] menulist > .menulist-dropmarker { #treecolAutoCompleteImage { max-width: 36px; } -.ac-result-type-bookmark, +#PopupAutoCompleteRichResult { + /* The awesomebar popup should open just below the navbar bottom border. */ + margin-top: 1px; } + +.autocomplete-richlistbox { + padding: 4px; } + +.autocomplete-richlistitem { + height: 30px; + min-height: 30px; + font: message-box; + border-radius: 2px; + border: 1px solid transparent; } + +.autocomplete-richlistitem[selected=true] { + background-color: Highlight; } + +.ac-title { + font-size: 14px; } + +.ac-tags { + font-size: 12px; } + +html|span.ac-tag { + background-color: MenuText; + color: Menu; + border-radius: 2px; + border: 1px solid transparent; + padding: 0 1px; } + +.ac-separator, +.ac-url, +.ac-action { + font-size: 12px; + color: -moz-nativehyperlinktext; } + +.ac-title[selected=true], +.ac-separator[selected], +.ac-url[selected=true], +.ac-action[selected=true] { + color: inherit !important; } + +.ac-tags-text[selected] > html|span.ac-tag { + background-color: HighlightText; + color: Highlight; } + +html|span.ac-emphasize-text-title, +html|span.ac-emphasize-text-tag, +html|span.ac-emphasize-text-url { + font-weight: 600; } + +.ac-type-icon[type=bookmark] { + list-style-image: url("chrome://browser/skin/urlbar-star.svg#star"); } + +.ac-type-icon[type=bookmark][selected][current] { + list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted"); } + .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) { list-style-image: url("chrome://browser/skin/places/autocomplete-star.png"); width: 16px; height: 16px; } -.ac-result-type-keyword, -.autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage), -richlistitem[type~="action"][actiontype="searchengine"] > .ac-title-box > .ac-site-icon { - list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); - width: 16px; - height: 16px; } +.ac-type-icon[type=keyword], +.ac-site-icon[type=searchengine], +.autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) { + list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); } -.ac-result-type-keyword[selected="true"], -.autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected), -richlistitem[type~="action"][actiontype="searchengine"][selected="true"] > .ac-title-box > .ac-site-icon { +.ac-type-icon[type=keyword][selected], +.ac-site-icon[type=searchengine][selected], +.autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected) { list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted); } -.ac-result-type-tag, .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) { list-style-image: url("chrome://browser/skin/places/tag.png"); width: 16px; height: 16px; } -.ac-comment, -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description, -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button { - font-size: 1.05em; } +.ac-type-icon[type=switchtab], +.ac-type-icon[type=remotetab] { + list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab"); } -.ac-extra > .ac-comment { - font-size: inherit; } - -.ac-url-text, -.ac-action-text { - color: -moz-nativehyperlinktext; - font-size: 0.9em; } - -richlistitem[type~="action"][actiontype$="tab"] > .ac-url-box > .ac-action-icon { - list-style-image: url("chrome://browser/skin/actionicon-tab.png"); - padding: 0 3px; } +.ac-type-icon[type=switchtab][selected], +.ac-type-icon[type=remotetab][selected] { + list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted"); } .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) { color: GrayText; } -.ac-comment[selected="true"], -.ac-url-text[selected="true"], -.ac-action-text[selected="true"] { - color: inherit !important; } - .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment), .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment) { color: GrayText; @@ -2063,25 +2102,6 @@ richlistitem[type~="action"][actiontype$="tab"] > .ac-url-box > .ac-action-icon #editBMPanel_folderTree { min-width: 27em; } -.panel-promo-box { - margin: 8px -10px -10px -10px; - padding: 8px 10px; - border-top: 1px solid ThreeDShadow; - background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.08) 6px); } - -.panel-promo-icon { - list-style-image: url("chrome://browser/skin/sync-notification-24.png"); - -moz-margin-end: 10px; - vertical-align: middle; } - -.panel-promo-closebutton { - -moz-appearance: none; - height: 16px; - width: 16px; } - -.panel-promo-closebutton > .toolbarbutton-text { - padding: 0; } - /* Content area */ #sidebar { background-color: Window; } @@ -2621,7 +2641,7 @@ lwtHeader;*/ font-weight: bold; } .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon { - list-style-image: url("chrome://global/skin/icons/loading_16.png"); } + list-style-image: url("chrome://global/skin/icons/loading.png"); } .alltabs-item[tabIsVisible] { /* box-shadow instead of background-color to work around native styling */ @@ -2641,7 +2661,7 @@ menuitem:hover > hbox > .alltabs-endimage[soundplaying] { /* Sidebar */ #sidebar-throbber[loading="true"] { - list-style-image: url("chrome://global/skin/icons/loading_16.png"); + list-style-image: url("chrome://global/skin/icons/loading.png"); -moz-margin-end: 4px; } toolbarbutton.chevron { @@ -2813,7 +2833,7 @@ html|*#fullscreen-exit-button { color: #fff; border: 1px solid #111; border-radius: 2px; - padding: 5px; + padding: 0 5px; width: 200px; margin: 0; } @@ -2921,15 +2941,12 @@ html|*#fullscreen-exit-button { margin-left: 0; } .devtools-responsiveui-close { - list-style-image: url("chrome://devtools/skin/images/close.png"); } + list-style-image: url("chrome://devtools/skin/images/close.svg"); } .devtools-responsiveui-rotate { list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-rotate.png"); } @media (min-resolution: 1.1dppx) { - .devtools-responsiveui-close { - list-style-image: url("chrome://devtools/skin/images/close@2x.png"); } - .devtools-responsiveui-rotate { list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-rotate@2x.png"); } } .devtools-responsiveui-touch { @@ -3396,7 +3413,7 @@ notification.pluginVulnerable > .notification-inner > .messageCloseButton:not(:h min-width: 18px; min-height: 18px; } -#TabsToolbar #downloads-button[cui-areatype="toolbar"] > #downloads-indicator-anchor > #downloads-indicator-icon { +#TabsToolbar #downloads-button[cui-areatype="toolbar"]:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon { background: -moz-image-rect(url("chrome://browser/skin/custom_images/light/tabbar-icons.svg"), 0, 198, 18, 180) center no-repeat; } #downloads-button[cui-areatype="toolbar"]:not([disabled=true]):-moz-any([open], [checked], :hover:active) > #downloads-indicator-anchor > #downloads-indicator-icon, @@ -3404,12 +3421,32 @@ notification.pluginVulnerable > .notification-inner > .messageCloseButton:not(:h #nav-bar #downloads-button[cui-areatype="toolbar"]:not([disabled=true]):-moz-any([open], [checked], :hover:active) > #downloads-indicator-anchor > #downloads-indicator-icon { background: -moz-image-rect(url("chrome://browser/skin/custom_images/toolbar-icons-active.svg"), 0, 198, 18, 180) center no-repeat; } -#downloads-button[cui-areatype="toolbar"][attention] > #downloads-indicator-anchor > #downloads-indicator-icon, -#nav-bar #downloads-button[cui-areatype="toolbar"][attention] > #downloads-indicator-anchor > #downloads-indicator-icon, -#TabsToolbar #downloads-button[cui-areatype="toolbar"][attention] > #downloads-indicator-anchor > #downloads-indicator-icon { +#downloads-button[cui-areatype="toolbar"][attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#downloads-button[cui-areatype="toolbar"][attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + display: -moz-box; + height: 13px; + width: 13px; + background-size: contain; + border: none; + box-shadow: none; + filter: drop-shadow(0 1px 0 rgba(13, 27, 38, 0.15)); } + +#downloads-button[cui-areatype="toolbar"][attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: #D90000 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center; } + +#downloads-button[cui-areatype="toolbar"][attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: #FFBF00 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center; } + +#downloads-button[cui-areatype="toolbar"][attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive, +#downloads-button[cui-areatype="toolbar"][attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive { + filter: none; } + +#downloads-button[cui-areatype="toolbar"][attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon, +#nav-bar #downloads-button[cui-areatype="toolbar"][attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon, +#TabsToolbar #downloads-button[cui-areatype="toolbar"][attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon { background-image: -moz-image-rect(url("chrome://browser/skin/custom_images/light/toolbar-icons.svg"), 18, 198, 36, 180); } -#downloads-button[cui-areatype="menu-panel"][attention] { +#downloads-button[cui-areatype="menu-panel"][attention="success"] { list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png"); -moz-image-region: auto; } @@ -3419,7 +3456,7 @@ notification.pluginVulnerable > .notification-inner > .messageCloseButton:not(:h background: -moz-image-rect(url("chrome://browser/skin/Toolbar-small.png"), 0, 16, 16, 0) center no-repeat; background-size: 12px; } -#downloads-button:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { +#downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { background-image: -moz-image-rect(url("chrome://browser/skin/custom_images/light/toolbar-icons.svg"), 18, 198, 36, 180); } /*** Download notifications ***/ @@ -3595,7 +3632,7 @@ toolbar[brighttext] #downloads-indicator-counter { display: none; } #social-sidebar-button[loading="true"] { - list-style-image: url("chrome://global/skin/icons/loading_16.png"); } + list-style-image: url("chrome://global/skin/icons/loading.png"); } #social-sidebar-favico { max-height: 16px; @@ -3973,6 +4010,13 @@ toolbarpaletteitem[place="toolbar"] { #customization-palette:not([hidden]) { margin-bottom: 25px; } +toolbarpaletteitem[place="palette"]:-moz-focusring, +toolbarpaletteitem[place="panel"]:-moz-focusring, +toolbarpaletteitem[place="toolbar"]:-moz-focusring { + outline: 1px dotted rgba(0, 0, 0, 0.5); + outline-offset: -5px; + -moz-outline-radius: 2.5px; } + #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton, #wrapper-edit-controls[place="palette"] > #edit-controls > separator, #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton, @@ -4225,19 +4269,16 @@ toolbarpaletteitem[place="toolbar"] { min-width: 32px; } #UITourTooltipBody { - -moz-margin-end: 14px; } - -#UITourTooltipBody > vbox { - padding-top: 4px; } + -moz-box-align: start; } -#UITourTooltipIconContainer { - -moz-margin-start: -16px; } +#UITourtooltipTitleContainer { + -moz-box-align: start; + margin-bottom: 10px; } #UITourTooltipIcon { width: 48px; height: 48px; - -moz-margin-start: 28px; - -moz-margin-end: 28px; } + -moz-margin-end: 10px; } #UITourTooltipTitle, #UITourTooltipDescription { @@ -4246,9 +4287,7 @@ toolbarpaletteitem[place="toolbar"] { #UITourTooltipTitle { font-size: 1.45rem; font-weight: bold; - -moz-margin-start: 0; - -moz-margin-end: 0; - margin: 0 0 9px 0; } + margin: 0; } #UITourTooltipDescription { -moz-margin-start: 0; @@ -4259,6 +4298,7 @@ toolbarpaletteitem[place="toolbar"] { /* Override global.css */ } #UITourTooltipClose { + position: relative; -moz-appearance: none; border: none; background-color: transparent; @@ -4273,8 +4313,8 @@ toolbarpaletteitem[place="toolbar"] { -moz-box-pack: end; background-color: rgba(24, 26, 27, 0.07); border-top: 1px solid rgba(24, 26, 27, 0.14); - margin: 24px -16px -16px; - padding: 2em 15px; } + margin: 10px -16px -16px; + padding: 16px; } #UITourTooltipButtons > label, #UITourTooltipButtons > button { @@ -4284,6 +4324,10 @@ toolbarpaletteitem[place="toolbar"] { #UITourTooltipButtons > button:first-child { -moz-margin-start: 0; } +#UITourTooltipButtons > label:last-child, +#UITourTooltipButtons > button:last-child { + margin-inline-end: 0; } + #UITourTooltipButtons > button[image] > .button-box > .button-icon { width: 16px; height: 16px; @@ -4446,7 +4490,12 @@ notification.heartbeat { height: 16px; width: 16px; } +/** + * Override the --panel-arrowcontent-padding so the background extends + * to the sides and bottom of the panel. + */ #UITourTooltipButtons { + margin-left: -10px; margin-bottom: -10px; } #context-navigation > .menuitem-iconic { diff --git a/arc-firefox-theme/chrome/browser/sass/browser-light.css b/arc-firefox-theme/chrome/browser/sass/browser-light.css index 3ef2f72..16e6109 100644 --- a/arc-firefox-theme/chrome/browser/sass/browser-light.css +++ b/arc-firefox-theme/chrome/browser/sass/browser-light.css @@ -476,8 +476,8 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { :-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1 > :-moz-any(.toolbarbutton-menubutton-button, .toolbarbutton-badge-stack) > .toolbarbutton-icon { max-width: 16px; } -:-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button) > .toolbarbutton-icon, -:-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button) > :-moz-any(.toolbarbutton-menubutton-button, .toolbarbutton-badge-stack) > .toolbarbutton-icon, +:-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, .toolbarbutton-legacy-addon) > .toolbarbutton-icon, +:-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, .toolbarbutton-legacy-addon) > :-moz-any(.toolbarbutton-menubutton-button, .toolbarbutton-badge-stack) > .toolbarbutton-icon, #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { max-width: 18px; } @@ -502,9 +502,9 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { transition-property: background-color, border-color; transition-duration: 150ms; } -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button)) > .toolbarbutton-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button)) > .toolbarbutton-badge-stack, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon { +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, .toolbarbutton-legacy-addon)) > .toolbarbutton-icon, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, .toolbarbutton-legacy-addon)) > .toolbarbutton-badge-stack, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, .toolbarbutton-legacy-addon)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon { padding: 3px 7px; } :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-icon, @@ -519,8 +519,10 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { #nav-bar #PanelUI-button, #nav-bar[brighttext] #PanelUI-button { + margin-top: -3px; + margin-bottom: -3px; background: none; - border-image: url("chrome://browser/skin/custom_images/navbar-separator.png") 0 0 0 2/0 0 0 2px; } + border-image: url("chrome://browser/skin/custom_images/light/navbar-separator.png") 0 0 0 2/0 0 0 2px; } .findbar-button:not(:-moz-any([checked="true"], [disabled="true"])):hover > .toolbarbutton-text, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open]:not([disabled=true]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon, @@ -591,15 +593,17 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { width: 1px; height: 18px; -moz-margin-end: -1px; - background-image: linear-gradient(currentColor 0, currentColor 100%); background-position: center; background-repeat: no-repeat; - background-size: 1px 18px; - opacity: .2; } + background-size: 1px 18px; } -:-moz-any(#TabsToolbar, #nav-bar)[brighttext] .toolbaritem-combined-buttons > separator, -:-moz-any(#TabsToolbar, #nav-bar)[brighttext] .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before { - opacity: .3; } +#nav-bar .toolbaritem-combined-buttons:not(:hover) > separator, +#nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before { + background: #dcdfe3; } + +#TabsToolbar .toolbaritem-combined-buttons:not(:hover) > separator, +#TabsToolbar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before { + background: rgba(82, 93, 118, 0.15); } :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { -moz-margin-start: -4px; } @@ -1132,6 +1136,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { #minimize-button:active { list-style-image: url("chrome://browser/skin/custom_images/light/window-controls/minimize_pressed.svg"); } +/* Location bar */ #urlbar, .searchbar-textbox { -moz-appearance: none; @@ -1196,7 +1201,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { #urlbar-search-settings { -moz-appearance: none; -moz-user-focus: ignore; - color: inherit; + color: GrayText; margin: 0; border: 0; padding: 8px 20px; @@ -1306,8 +1311,11 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { #urlbar[pageproxystate="valid"] > #identity-box.chromeUI { color: var(--identity-box-chrome-color); } -#identity-icon-labels { - padding-inline-start: 2px; } +#identity-icon-labels:-moz-locale-dir(ltr) { + padding-left: 2px; } + +#identity-icon-labels:-moz-locale-dir(rtl) { + padding-right: 2px; } #notification-popup-box:not([hidden]) + #identity-box { padding-inline-start: 5px; @@ -1440,10 +1448,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box .popup-notification-icon[popupid="password"] { list-style-image: url(chrome://mozapps/skin/passwordmgr/key-64.png); } -.popup-notification-icon[popupid="webapps-install-progress"], -.popup-notification-icon[popupid="webapps-install"] { - list-style-image: url(chrome://global/skin/icons/webapps-64.png); } - .popup-notification-icon[popupid="webRTC-sharingDevices"], .popup-notification-icon[popupid="webRTC-shareDevices"] { list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64.png); } @@ -1511,10 +1515,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box 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); } - #plugins-notification-icon { list-style-image: url(chrome://browser/skin/notification-pluginNormal.png); } @@ -1815,55 +1815,94 @@ notification[value="translation"] menulist > .menulist-dropmarker { #treecolAutoCompleteImage { max-width: 36px; } -.ac-result-type-bookmark, +#PopupAutoCompleteRichResult { + /* The awesomebar popup should open just below the navbar bottom border. */ + margin-top: 1px; } + +.autocomplete-richlistbox { + padding: 4px; } + +.autocomplete-richlistitem { + height: 30px; + min-height: 30px; + font: message-box; + border-radius: 2px; + border: 1px solid transparent; } + +.autocomplete-richlistitem[selected=true] { + background-color: Highlight; } + +.ac-title { + font-size: 14px; } + +.ac-tags { + font-size: 12px; } + +html|span.ac-tag { + background-color: MenuText; + color: Menu; + border-radius: 2px; + border: 1px solid transparent; + padding: 0 1px; } + +.ac-separator, +.ac-url, +.ac-action { + font-size: 12px; + color: -moz-nativehyperlinktext; } + +.ac-title[selected=true], +.ac-separator[selected], +.ac-url[selected=true], +.ac-action[selected=true] { + color: inherit !important; } + +.ac-tags-text[selected] > html|span.ac-tag { + background-color: HighlightText; + color: Highlight; } + +html|span.ac-emphasize-text-title, +html|span.ac-emphasize-text-tag, +html|span.ac-emphasize-text-url { + font-weight: 600; } + +.ac-type-icon[type=bookmark] { + list-style-image: url("chrome://browser/skin/urlbar-star.svg#star"); } + +.ac-type-icon[type=bookmark][selected][current] { + list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted"); } + .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) { list-style-image: url("chrome://browser/skin/places/autocomplete-star.png"); width: 16px; height: 16px; } -.ac-result-type-keyword, -.autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage), -richlistitem[type~="action"][actiontype="searchengine"] > .ac-title-box > .ac-site-icon { - list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); - width: 16px; - height: 16px; } +.ac-type-icon[type=keyword], +.ac-site-icon[type=searchengine], +.autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) { + list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); } -.ac-result-type-keyword[selected="true"], -.autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected), -richlistitem[type~="action"][actiontype="searchengine"][selected="true"] > .ac-title-box > .ac-site-icon { +.ac-type-icon[type=keyword][selected], +.ac-site-icon[type=searchengine][selected], +.autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected) { list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted); } -.ac-result-type-tag, .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) { list-style-image: url("chrome://browser/skin/places/tag.png"); width: 16px; height: 16px; } -.ac-comment, -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description, -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button { - font-size: 1.05em; } +.ac-type-icon[type=switchtab], +.ac-type-icon[type=remotetab] { + list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab"); } -.ac-extra > .ac-comment { - font-size: inherit; } - -.ac-url-text, -.ac-action-text { - color: -moz-nativehyperlinktext; - font-size: 0.9em; } - -richlistitem[type~="action"][actiontype$="tab"] > .ac-url-box > .ac-action-icon { - list-style-image: url("chrome://browser/skin/actionicon-tab.png"); - padding: 0 3px; } +.ac-type-icon[type=switchtab][selected], +.ac-type-icon[type=remotetab][selected] { + list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted"); } .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) { color: GrayText; } -.ac-comment[selected="true"], -.ac-url-text[selected="true"], -.ac-action-text[selected="true"] { - color: inherit !important; } - .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment), .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment) { color: GrayText; @@ -2063,25 +2102,6 @@ richlistitem[type~="action"][actiontype$="tab"] > .ac-url-box > .ac-action-icon #editBMPanel_folderTree { min-width: 27em; } -.panel-promo-box { - margin: 8px -10px -10px -10px; - padding: 8px 10px; - border-top: 1px solid ThreeDShadow; - background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.08) 6px); } - -.panel-promo-icon { - list-style-image: url("chrome://browser/skin/sync-notification-24.png"); - -moz-margin-end: 10px; - vertical-align: middle; } - -.panel-promo-closebutton { - -moz-appearance: none; - height: 16px; - width: 16px; } - -.panel-promo-closebutton > .toolbarbutton-text { - padding: 0; } - /* Content area */ #sidebar { background-color: Window; } @@ -2621,7 +2641,7 @@ lwtHeader;*/ font-weight: bold; } .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon { - list-style-image: url("chrome://global/skin/icons/loading_16.png"); } + list-style-image: url("chrome://global/skin/icons/loading.png"); } .alltabs-item[tabIsVisible] { /* box-shadow instead of background-color to work around native styling */ @@ -2641,7 +2661,7 @@ menuitem:hover > hbox > .alltabs-endimage[soundplaying] { /* Sidebar */ #sidebar-throbber[loading="true"] { - list-style-image: url("chrome://global/skin/icons/loading_16.png"); + list-style-image: url("chrome://global/skin/icons/loading.png"); -moz-margin-end: 4px; } toolbarbutton.chevron { @@ -2813,7 +2833,7 @@ html|*#fullscreen-exit-button { color: #fff; border: 1px solid #111; border-radius: 2px; - padding: 5px; + padding: 0 5px; width: 200px; margin: 0; } @@ -2921,15 +2941,12 @@ html|*#fullscreen-exit-button { margin-left: 0; } .devtools-responsiveui-close { - list-style-image: url("chrome://devtools/skin/images/close.png"); } + list-style-image: url("chrome://devtools/skin/images/close.svg"); } .devtools-responsiveui-rotate { list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-rotate.png"); } @media (min-resolution: 1.1dppx) { - .devtools-responsiveui-close { - list-style-image: url("chrome://devtools/skin/images/close@2x.png"); } - .devtools-responsiveui-rotate { list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-rotate@2x.png"); } } .devtools-responsiveui-touch { @@ -3396,7 +3413,7 @@ notification.pluginVulnerable > .notification-inner > .messageCloseButton:not(:h min-width: 18px; min-height: 18px; } -#TabsToolbar #downloads-button[cui-areatype="toolbar"] > #downloads-indicator-anchor > #downloads-indicator-icon { +#TabsToolbar #downloads-button[cui-areatype="toolbar"]:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon { background: -moz-image-rect(url("chrome://browser/skin/custom_images/light/tabbar-icons.svg"), 0, 198, 18, 180) center no-repeat; } #downloads-button[cui-areatype="toolbar"]:not([disabled=true]):-moz-any([open], [checked], :hover:active) > #downloads-indicator-anchor > #downloads-indicator-icon, @@ -3404,12 +3421,32 @@ notification.pluginVulnerable > .notification-inner > .messageCloseButton:not(:h #nav-bar #downloads-button[cui-areatype="toolbar"]:not([disabled=true]):-moz-any([open], [checked], :hover:active) > #downloads-indicator-anchor > #downloads-indicator-icon { background: -moz-image-rect(url("chrome://browser/skin/custom_images/toolbar-icons-active.svg"), 0, 198, 18, 180) center no-repeat; } -#downloads-button[cui-areatype="toolbar"][attention] > #downloads-indicator-anchor > #downloads-indicator-icon, -#nav-bar #downloads-button[cui-areatype="toolbar"][attention] > #downloads-indicator-anchor > #downloads-indicator-icon, -#TabsToolbar #downloads-button[cui-areatype="toolbar"][attention] > #downloads-indicator-anchor > #downloads-indicator-icon { +#downloads-button[cui-areatype="toolbar"][attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#downloads-button[cui-areatype="toolbar"][attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + display: -moz-box; + height: 13px; + width: 13px; + background-size: contain; + border: none; + box-shadow: none; + filter: drop-shadow(0 1px 0 rgba(13, 27, 38, 0.15)); } + +#downloads-button[cui-areatype="toolbar"][attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: #D90000 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center; } + +#downloads-button[cui-areatype="toolbar"][attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: #FFBF00 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center; } + +#downloads-button[cui-areatype="toolbar"][attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive, +#downloads-button[cui-areatype="toolbar"][attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive { + filter: none; } + +#downloads-button[cui-areatype="toolbar"][attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon, +#nav-bar #downloads-button[cui-areatype="toolbar"][attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon, +#TabsToolbar #downloads-button[cui-areatype="toolbar"][attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon { background-image: -moz-image-rect(url("chrome://browser/skin/custom_images/light/toolbar-icons.svg"), 18, 198, 36, 180); } -#downloads-button[cui-areatype="menu-panel"][attention] { +#downloads-button[cui-areatype="menu-panel"][attention="success"] { list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png"); -moz-image-region: auto; } @@ -3419,7 +3456,7 @@ notification.pluginVulnerable > .notification-inner > .messageCloseButton:not(:h background: -moz-image-rect(url("chrome://browser/skin/Toolbar-small.png"), 0, 16, 16, 0) center no-repeat; background-size: 12px; } -#downloads-button:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { +#downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { background-image: -moz-image-rect(url("chrome://browser/skin/custom_images/light/toolbar-icons.svg"), 18, 198, 36, 180); } /*** Download notifications ***/ @@ -3595,7 +3632,7 @@ toolbar[brighttext] #downloads-indicator-counter { display: none; } #social-sidebar-button[loading="true"] { - list-style-image: url("chrome://global/skin/icons/loading_16.png"); } + list-style-image: url("chrome://global/skin/icons/loading.png"); } #social-sidebar-favico { max-height: 16px; @@ -3973,6 +4010,13 @@ toolbarpaletteitem[place="toolbar"] { #customization-palette:not([hidden]) { margin-bottom: 25px; } +toolbarpaletteitem[place="palette"]:-moz-focusring, +toolbarpaletteitem[place="panel"]:-moz-focusring, +toolbarpaletteitem[place="toolbar"]:-moz-focusring { + outline: 1px dotted rgba(0, 0, 0, 0.5); + outline-offset: -5px; + -moz-outline-radius: 2.5px; } + #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton, #wrapper-edit-controls[place="palette"] > #edit-controls > separator, #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton, @@ -4225,19 +4269,16 @@ toolbarpaletteitem[place="toolbar"] { min-width: 32px; } #UITourTooltipBody { - -moz-margin-end: 14px; } - -#UITourTooltipBody > vbox { - padding-top: 4px; } + -moz-box-align: start; } -#UITourTooltipIconContainer { - -moz-margin-start: -16px; } +#UITourtooltipTitleContainer { + -moz-box-align: start; + margin-bottom: 10px; } #UITourTooltipIcon { width: 48px; height: 48px; - -moz-margin-start: 28px; - -moz-margin-end: 28px; } + -moz-margin-end: 10px; } #UITourTooltipTitle, #UITourTooltipDescription { @@ -4246,9 +4287,7 @@ toolbarpaletteitem[place="toolbar"] { #UITourTooltipTitle { font-size: 1.45rem; font-weight: bold; - -moz-margin-start: 0; - -moz-margin-end: 0; - margin: 0 0 9px 0; } + margin: 0; } #UITourTooltipDescription { -moz-margin-start: 0; @@ -4259,6 +4298,7 @@ toolbarpaletteitem[place="toolbar"] { /* Override global.css */ } #UITourTooltipClose { + position: relative; -moz-appearance: none; border: none; background-color: transparent; @@ -4273,8 +4313,8 @@ toolbarpaletteitem[place="toolbar"] { -moz-box-pack: end; background-color: rgba(24, 26, 27, 0.07); border-top: 1px solid rgba(24, 26, 27, 0.14); - margin: 24px -16px -16px; - padding: 2em 15px; } + margin: 10px -16px -16px; + padding: 16px; } #UITourTooltipButtons > label, #UITourTooltipButtons > button { @@ -4284,6 +4324,10 @@ toolbarpaletteitem[place="toolbar"] { #UITourTooltipButtons > button:first-child { -moz-margin-start: 0; } +#UITourTooltipButtons > label:last-child, +#UITourTooltipButtons > button:last-child { + margin-inline-end: 0; } + #UITourTooltipButtons > button[image] > .button-box > .button-icon { width: 16px; height: 16px; @@ -4446,7 +4490,12 @@ notification.heartbeat { height: 16px; width: 16px; } +/** + * Override the --panel-arrowcontent-padding so the background extends + * to the sides and bottom of the panel. + */ #UITourTooltipButtons { + margin-left: -10px; margin-bottom: -10px; } #context-navigation > .menuitem-iconic { diff --git a/arc-firefox-theme/chrome/browser/searchbar.css b/arc-firefox-theme/chrome/browser/searchbar.css index 67eaa5c..3b2c2df 100644 --- a/arc-firefox-theme/chrome/browser/searchbar.css +++ b/arc-firefox-theme/chrome/browser/searchbar.css @@ -96,7 +96,7 @@ menuitem[cmd="cmd_clearhistory"][disabled] { font-weight: normal; border-top: 1px solid rgba(0, 0, 0, 0.2); padding: 3px 5px; - color: MenuText; + color: GrayText; } .search-panel-header > label { @@ -163,6 +163,8 @@ menuitem[cmd="cmd_clearhistory"][disabled] { .addengine-item { -moz-appearance: none; + background-color: transparent; + color: inherit; border: none; height: 32px; margin: 0; @@ -227,7 +229,6 @@ menuitem[cmd="cmd_clearhistory"][disabled] { .search-setting-button { -moz-appearance: none; - background-color: Menu; border: none; border-top: 1px solid rgba(0, 0, 0, 0.2); margin: 0; diff --git a/arc-firefox-theme/chrome/browser/syncCommon.css b/arc-firefox-theme/chrome/browser/syncCommon.css index 9a84ceb..0449a59 100644 --- a/arc-firefox-theme/chrome/browser/syncCommon.css +++ b/arc-firefox-theme/chrome/browser/syncCommon.css @@ -14,7 +14,7 @@ } .statusIcon[status="active"] { - list-style-image: url("chrome://global/skin/icons/loading_16.png"); + list-style-image: url("chrome://global/skin/icons/loading.png"); } .statusIcon[status="error"] { diff --git a/arc-firefox-theme/chrome/browser/syncSetup.css b/arc-firefox-theme/chrome/browser/syncSetup.css index 4c6518a..3370718 100644 --- a/arc-firefox-theme/chrome/browser/syncSetup.css +++ b/arc-firefox-theme/chrome/browser/syncSetup.css @@ -112,9 +112,15 @@ description > .text-link:focus { width: 0.5em; } +#pairDeviceThrobber, +#login-throbber { + -moz-box-align: center; +} + #pairDeviceThrobber > image, #login-throbber > image { - list-style-image: url("chrome://global/skin/icons/loading_16.png"); + width: 16px; + list-style-image: url("chrome://global/skin/icons/loading.png"); } #captchaFeedback { diff --git a/arc-firefox-theme/chrome/browser/syncedtabs/sidebar.css b/arc-firefox-theme/chrome/browser/syncedtabs/sidebar.css index 2311d6f..63d5b64 100644 --- a/arc-firefox-theme/chrome/browser/syncedtabs/sidebar.css +++ b/arc-firefox-theme/chrome/browser/syncedtabs/sidebar.css @@ -5,16 +5,36 @@ /* These styles are intended to mimic XUL trees and the XUL search box. */ -:root, body { - overflow-x: hidden; +html { + height: 100%; } body { + height: 100%; margin: 0; font: message-box; color: #333333; -moz-user-select: none; - overflow: hidden; +} + +/* The content-container holds the non-scrollable header and the scrollable + content area. +*/ +.content-container { + display: flex; + flex-flow: column; + height: 100%; +} + +/* The content header is not scrollable */ +.content-header { + flex: 0 1 auto; +} + +/* The main content area is scrollable and fills the rest of the area */ +.content-scrollable { + flex: 1 1 auto; + overflow: auto; } .emptyListInfo { @@ -65,10 +85,21 @@ body { .client .item.tab > .item-title-container { padding-inline-start: 35px; } + .item.tab > .item-title-container { padding-inline-start: 20px; } +.item.tab > .item-title-container > .item-icon-container { + background-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); +} + +@media (min-resolution: 1.1dppx) { +.item.tab > .item-title-container > .item-icon-container { + background-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png"); + } +} + .item-icon-container { min-width: 16px; max-width: 16px; @@ -169,6 +200,10 @@ body { opacity: 100; } +.sidebar-search-container.tabs-container:not(.selected) { + display: none; +} + .textbox-search-clear:not([disabled]) { cursor: default; } diff --git a/arc-firefox-theme/chrome/browser/tabbrowser/loading.png b/arc-firefox-theme/chrome/browser/tabbrowser/loading.png Binary files differdeleted file mode 100644 index a2f9b79..0000000 --- a/arc-firefox-theme/chrome/browser/tabbrowser/loading.png +++ /dev/null diff --git a/arc-firefox-theme/chrome/browser/tabbrowser/newtab-inverted.svg b/arc-firefox-theme/chrome/browser/tabbrowser/newtab-inverted.svg new file mode 100644 index 0000000..2728cda --- /dev/null +++ b/arc-firefox-theme/chrome/browser/tabbrowser/newtab-inverted.svg @@ -0,0 +1,13 @@ +<!-- 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/. --> +<svg width="16" height="18" xmlns="http://www.w3.org/2000/svg"> + <g stroke="#666" stroke-width="2" fill="none"> + <rect x="7" y="3" width="2" height="12" rx="0.25" ry="0.25"/> + <rect x="2" y="8" width="12" height="2" rx="0.25" ry="0.25"/> + </g> + <g fill="#fff"> + <rect x="7" y="3" width="2" height="12"/> + <rect x="2" y="8" width="12" height="2"/> + </g> +</svg> diff --git a/arc-firefox-theme/chrome/browser/tabbrowser/newtab.svg b/arc-firefox-theme/chrome/browser/tabbrowser/newtab.svg new file mode 100644 index 0000000..40548da --- /dev/null +++ b/arc-firefox-theme/chrome/browser/tabbrowser/newtab.svg @@ -0,0 +1,7 @@ +<!-- 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/. --> +<svg width="16" height="18" xmlns="http://www.w3.org/2000/svg" fill="#4c4c4c"> + <rect x="7" y="3" width="2" height="12"/> + <rect x="2" y="8" width="12" height="2"/> +</svg> diff --git a/arc-firefox-theme/chrome/browser/tabbrowser/tab-selected-end.svg b/arc-firefox-theme/chrome/browser/tabbrowser/tab-selected-end.svg index 75d70c9..319c519 100644 --- a/arc-firefox-theme/chrome/browser/tabbrowser/tab-selected-end.svg +++ b/arc-firefox-theme/chrome/browser/tabbrowser/tab-selected-end.svg @@ -29,10 +29,6 @@ <svg:clipPath id="tab-curve-clip-path-end" clipPathUnits="objectBoundingBox"> <svg:path d="m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z"/> </svg:clipPath> - -<svg:clipPath id="tab-hover-clip-path" clipPathUnits="objectBoundingBox"> - <svg:path d="M 0,0.2 0,1 1,1, 1,0.2 z"/> -</svg:clipPath> </defs> <foreignObject width="30" height="31" clip-path="url(#tab-curve-clip-path-end)"> <div id="tab-background-fill" xmlns="http://www.w3.org/1999/xhtml"></div> diff --git a/arc-firefox-theme/chrome/browser/tabbrowser/tab-selected-start.svg b/arc-firefox-theme/chrome/browser/tabbrowser/tab-selected-start.svg index 66d75dd..8887dd0 100644 --- a/arc-firefox-theme/chrome/browser/tabbrowser/tab-selected-start.svg +++ b/arc-firefox-theme/chrome/browser/tabbrowser/tab-selected-start.svg @@ -29,10 +29,6 @@ <svg:clipPath id="tab-curve-clip-path-end" clipPathUnits="objectBoundingBox"> <svg:path d="m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z"/> </svg:clipPath> - -<svg:clipPath id="tab-hover-clip-path" clipPathUnits="objectBoundingBox"> - <svg:path d="M 0,0.2 0,1 1,1, 1,0.2 z"/> -</svg:clipPath> </defs> <foreignObject width="30" height="31" clip-path="url(#tab-curve-clip-path-start)"> <div id="tab-background-fill" xmlns="http://www.w3.org/1999/xhtml"></div> diff --git a/arc-firefox-theme/chrome/browser/urlbar-star.svg b/arc-firefox-theme/chrome/browser/urlbar-star.svg new file mode 100644 index 0000000..3080aca --- /dev/null +++ b/arc-firefox-theme/chrome/browser/urlbar-star.svg @@ -0,0 +1,20 @@ +<?xml version="1.0"?>
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+ <style>
+ path:not(:target) {
+ display: none;
+ }
+ path {
+ fill: #b2b2b2;
+ }
+ path[id$="-inverted"] {
+ fill: #fff;
+ }
+ </style>
+
+ <path id="star" d="M8.7,0.5l2,4.3l4.6,0.7c0.6,0.1,0.9,0.9,0.4,1.4l-3.3,3.4l0.8,4.8c0.1,0.7-0.6,1.2-1.1,0.9L8,13.7l-4.1,2.3 c-0.6,0.3-1.2-0.2-1.1-0.9l0.8-4.8L0.2,6.9C-0.2,6.4,0,5.6,0.7,5.5l4.6-0.7l2-4.3C7.6-0.1,8.4-0.1,8.7,0.5z"/>
+ <path id="star-inverted" d="M8.7,0.5l2,4.3l4.6,0.7c0.6,0.1,0.9,0.9,0.4,1.4l-3.3,3.4l0.8,4.8c0.1,0.7-0.6,1.2-1.1,0.9L8,13.7l-4.1,2.3 c-0.6,0.3-1.2-0.2-1.1-0.9l0.8-4.8L0.2,6.9C-0.2,6.4,0,5.6,0.7,5.5l4.6-0.7l2-4.3C7.6-0.1,8.4-0.1,8.7,0.5z"/>
+</svg>
diff --git a/arc-firefox-theme/chrome/browser/urlbar-tab.svg b/arc-firefox-theme/chrome/browser/urlbar-tab.svg new file mode 100644 index 0000000..87a2c7f --- /dev/null +++ b/arc-firefox-theme/chrome/browser/urlbar-tab.svg @@ -0,0 +1,21 @@ +<?xml version="1.0"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"> + <style> + path:not(:target) { + display: none; + } + path { + fill: #b2b2b2; + } + path[id$="-inverted"] { + fill: #fff; + } + </style> + + <path id="tab" d="M14,9.5V6c0-1.7-1.3-3-3-3H5C3.3,3,2,4.3,2,6v3.5C2,10.3,1.3,11,0.5,11h0C0.2,11,0,11.2,0,11.5v1 C0,12.8,0.2,13,0.5,13h15c0.3,0,0.5-0.2,0.5-0.5v-1c0-0.3-0.2-0.5-0.5-0.5h0C14.7,11,14,10.3,14,9.5z"/> + <path id="tab-inverted" d="M14,9.5V6c0-1.7-1.3-3-3-3H5C3.3,3,2,4.3,2,6v3.5C2,10.3,1.3,11,0.5,11h0C0.2,11,0,11.2,0,11.5v1 C0,12.8,0.2,13,0.5,13h15c0.3,0,0.5-0.2,0.5-0.5v-1c0-0.3-0.2-0.5-0.5-0.5h0C14.7,11,14,10.3,14,9.5z"/> + +</svg> diff --git a/arc-firefox-theme/chrome/browser/web-notifications-icon.svg b/arc-firefox-theme/chrome/browser/web-notifications-icon.svg index f7186c7..8c03565 100644 --- a/arc-firefox-theme/chrome/browser/web-notifications-icon.svg +++ b/arc-firefox-theme/chrome/browser/web-notifications-icon.svg @@ -1,15 +1,6 @@ -<?xml version="1.0" encoding="utf-8"?> <!-- 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/. --> -<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="64" height="64" viewBox="0 0 64 64"> - <defs> - <style> - .icon { - fill: #a6a6a6; - fill-rule: evenodd; - } - </style> - </defs> - <path d="M57,48 L46,48 L46,60.016 L32.482,48 L7,48 C5.343,48 4,46.657 4,45 L4,11.031 C4,9.374 5.343,8.031 7,8.031 L57,8.031 C58.657,8.031 60,9.374 60,11.031 L60,45 C60,46.657 58.657,48 57,48 ZM36,16.031 C36,14.927 35.105,14.031 34,14.031 L30,14.031 C28.895,14.031 28,14.927 28,16.031 L28,30.031 C28,31.136 28.895,32.031 30,32.031 L34,32.031 C35.105,32.031 36,31.136 36,30.031 L36,16.031 ZM36,37.5 C36,36.672 35.328,36 34.5,36 L29.5,36 C28.672,36 28,36.672 28,37.5 L28,40.5 C28,41.328 28.672,42 29.5,42 L34.5,42 C35.328,42 36,41.328 36,40.5 L36,37.5 Z" class="icon"/> +<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"> + <path fill="#a6a6a6" d="M53.6,8H10.4A6.4,6.4,0,0,0,4,14.4V41.6A6.4,6.4,0,0,0,10.4,48H12V62L26.7,48H53.6A6.4,6.4,0,0,0,60,41.6V14.4A6.4,6.4,0,0,0,53.6,8ZM34,36H14a2,2,0,0,1,0-4H34A2,2,0,0,1,34,36Zm8-8H14a2,2,0,0,1,0-4H42A2,2,0,0,1,42,28Zm8-8H14a2,2,0,0,1,0-4H50A2,2,0,0,1,50,20Z"/> </svg> diff --git a/arc-firefox-theme/chrome/browser/web-notifications-tray.svg b/arc-firefox-theme/chrome/browser/web-notifications-tray.svg index 314026a..9c47315 100644 --- a/arc-firefox-theme/chrome/browser/web-notifications-tray.svg +++ b/arc-firefox-theme/chrome/browser/web-notifications-tray.svg @@ -2,11 +2,11 @@ <!-- 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/. --> -<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="16" viewBox="0 0 96 32"> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="16" viewBox="0 0 48 16"> <defs> <style> .style-icon-notification { - fill: #666666; + fill: #666; } .style-icon-notification.hover { fill: #808080; @@ -15,9 +15,9 @@ fill: #4d4d4d; } </style> - <path id="shape-notifcations-push" d="M27,23.969 L24,23.969 L24,29.977 L17.241,23.969 L5,23.969 C3.343,23.969 2,22.626 2,20.969 L2,6.969 C2,5.312 3.343,3.969 5,3.969 L27,3.969 C28.657,3.969 30,5.312 30,6.969 L30,20.969 C30,22.626 28.657,23.969 27,23.969 ZM18,8.969 C18,7.864 17.105,6.969 16,6.969 C14.895,6.969 14,7.864 14,8.969 L14,13.969 C14,15.073 14.895,15.969 16,15.969 C17.105,15.969 18,15.073 18,13.969 L18,8.969 ZM16.5,17.969 L15.5,17.969 C14.672,17.969 14,18.640 14,19.469 C14,20.297 14.672,20.969 15.5,20.969 L16.5,20.969 C17.328,20.969 18,20.297 18,19.469 C18,18.640 17.328,17.969 16.5,17.969 Z"/> + <path id="shape-notifications-push" d="M13.4,2H2.6A1.6,1.6,0,0,0,1,3.6v6.8A1.6,1.6,0,0,0,2.6,12H3v3.5L6.7,12h6.7A1.6,1.6,0,0,0,15,10.4V3.6A1.6,1.6,0,0,0,13.4,2ZM8.5,9h-5a0.5,0.5,0,0,1,0-1h5A0.5,0.5,0,0,1,8.5,9Zm2-2h-7a0.5,0.5,0,0,1,0-1h7A0.5,0.5,0,0,1,10.5,7Zm2-2h-9a0.5,0.5,0,0,1,0-1h9A0.5,0.5,0,0,1,12.5,5Z"/> </defs> - <use xlink:href="#shape-notifcations-push" class="style-icon-notification"/> - <use xlink:href="#shape-notifcations-push" transform="translate(32)" class="style-icon-notification hover"/> - <use xlink:href="#shape-notifcations-push" transform="translate(64)" class="style-icon-notification active"/> + <use xlink:href="#shape-notifications-push" class="style-icon-notification"/> + <use xlink:href="#shape-notifications-push" transform="translate(16)" class="style-icon-notification hover"/> + <use xlink:href="#shape-notifications-push" transform="translate(32)" class="style-icon-notification active"/> </svg> |
