From 976787c0273b2f4d60e979dc7754d76acbaea8ed Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Thu, 24 Sep 2015 02:11:04 +0200 Subject: update to 42.0b1 --- .../chrome/browser/bad-content-blocked-16.png | Bin 346 -> 0 bytes .../chrome/browser/bad-content-blocked-16@2x.png | Bin 691 -> 0 bytes .../chrome/browser/bad-content-blocked-64.png | Bin 2062 -> 0 bytes .../chrome/browser/bad-content-unblocked-16.png | Bin 462 -> 0 bytes .../chrome/browser/bad-content-unblocked-64.png | Bin 3209 -> 0 bytes arc-firefox-theme/chrome/browser/browser.css | 494 ++++++++-------- .../browser/controlcenter/arrow-subview-back.svg | 7 + .../chrome/browser/controlcenter/conn-degraded.svg | 27 + .../chrome/browser/controlcenter/mcb-disabled.svg | 33 ++ .../chrome/browser/controlcenter/panel.css | 205 ++++--- .../controlcenter/tracking-protection-disabled.svg | 23 + .../browser/controlcenter/tracking-protection.svg | 21 + .../chrome/browser/controlcenter/warning-gray.svg | 9 + .../browser/controlcenter/warning-yellow.svg | 9 + .../browser/customizableui/panelUIOverlay.css | 111 ++-- .../browser/customizableui/thumburger-inverted.png | Bin 0 -> 411 bytes .../chrome/browser/customizableui/thumburger.png | Bin 0 -> 453 bytes arc-firefox-theme/chrome/browser/devedition.css | 36 +- .../chrome/browser/devedition/urlbar-arrow.png | Bin 0 -> 189 bytes .../chrome/browser/devedition/urlbar-arrow@2x.png | Bin 0 -> 263 bytes .../chrome/browser/devtools/canvasdebugger.css | 4 - .../chrome/browser/devtools/computedview.css | 5 - .../chrome/browser/devtools/dark-theme.css | 36 +- .../chrome/browser/devtools/debugger.css | 8 +- .../chrome/browser/devtools/filetype-dir-close.svg | 2 +- .../chrome/browser/devtools/filetype-dir-open.svg | 2 +- .../chrome/browser/devtools/filetype-globe.svg | 2 +- .../chrome/browser/devtools/filetype-store.svg | 2 +- .../chrome/browser/devtools/filters.svg | 22 +- .../chrome/browser/devtools/light-theme.css | 36 +- .../chrome/browser/devtools/netmonitor.css | 15 +- .../chrome/browser/devtools/performance.css | 12 +- .../chrome/browser/devtools/promisedebugger.css | 3 + .../chrome/browser/devtools/ruleview.css | 16 +- .../chrome/browser/devtools/scratchpad.css | 4 - .../chrome/browser/devtools/shadereditor.css | 4 - .../chrome/browser/devtools/splitview.css | 17 - .../chrome/browser/devtools/storage.css | 4 +- .../chrome/browser/devtools/webaudioeditor.css | 4 - .../chrome/browser/devtools/widgets.css | 144 ++--- .../chrome/browser/feeds/subscribe.css | 9 +- arc-firefox-theme/chrome/browser/fxa/android.png | Bin 0 -> 15286 bytes .../chrome/browser/fxa/android@2x.png | Bin 0 -> 736 bytes .../chrome/browser/fxa/default-avatar.png | Bin 0 -> 1562 bytes .../chrome/browser/fxa/default-avatar@2x.png | Bin 0 -> 2560 bytes .../chrome/browser/fxa/default-profile-image.svg | 9 - arc-firefox-theme/chrome/browser/fxa/logo.png | Bin 0 -> 17703 bytes arc-firefox-theme/chrome/browser/fxa/logo@2x.png | Bin 0 -> 4517 bytes .../chrome/browser/fxa/sync-illustration.png | Bin 0 -> 18697 bytes .../chrome/browser/fxa/sync-illustration@2x.png | Bin 0 -> 8682 bytes .../chrome/browser/identity-icons-generic.png | Bin 965 -> 0 bytes .../chrome/browser/identity-icons-generic@2x.png | Bin 2269 -> 0 bytes .../chrome/browser/identity-icons-https-ev.png | Bin 708 -> 0 bytes .../chrome/browser/identity-icons-https-ev@2x.png | Bin 1560 -> 0 bytes .../browser/identity-icons-https-mixed-active.png | Bin 984 -> 0 bytes .../identity-icons-https-mixed-active@2x.png | Bin 1889 -> 0 bytes .../browser/identity-icons-https-mixed-display.png | Bin 535 -> 0 bytes .../identity-icons-https-mixed-display@2x.png | Bin 698 -> 0 bytes .../chrome/browser/identity-icons-https.png | Bin 672 -> 0 bytes .../chrome/browser/identity-icons-https@2x.png | Bin 1130 -> 0 bytes .../browser/identity-mixed-active-blocked.svg | 31 + .../browser/identity-mixed-active-loaded.svg | 38 ++ .../browser/identity-mixed-passive-loaded.svg | 31 + .../chrome/browser/identity-not-secure.svg | 8 + .../chrome/browser/identity-secure.svg | 27 + arc-firefox-theme/chrome/browser/info.svg | 9 + arc-firefox-theme/chrome/browser/mask.png | Bin 1286 -> 0 bytes arc-firefox-theme/chrome/browser/mask@2x.png | Bin 2438 -> 0 bytes arc-firefox-theme/chrome/browser/newtab/close.png | Bin 0 -> 931 bytes arc-firefox-theme/chrome/browser/newtab/newTab.css | 32 +- .../browser/preferences/aboutPermissions.css | 3 - .../browser/preferences/in-content/preferences.css | 219 +++++-- .../chrome/browser/privatebrowsing/attention.png | Bin 0 -> 602 bytes .../browser/privatebrowsing/attention@2x.png | Bin 0 -> 902 bytes .../chrome/browser/privatebrowsing/check.png | Bin 0 -> 338 bytes .../chrome/browser/privatebrowsing/check@2x.png | Bin 0 -> 370 bytes .../chrome/browser/privatebrowsing/mask.svg | 8 + .../chrome/browser/privatebrowsing/shield-page.png | Bin 0 -> 4257 bytes .../browser/privatebrowsing/shield-page@2x.png | Bin 0 -> 9367 bytes .../chrome/browser/readinglist/icons.svg | 43 -- .../browser/readinglist/readinglist-icon.svg | 12 - .../chrome/browser/readinglist/sidebar.css | 148 ----- .../chrome/browser/sass/_browser-sass.scss | 626 +++++++++++---------- .../chrome/browser/sass/browser-dark.css | 494 ++++++++-------- .../chrome/browser/sass/browser-darker.css | 494 ++++++++-------- .../chrome/browser/sass/browser-light.css | 494 ++++++++-------- .../chrome/browser/search-arrow-go.svg | 22 + .../browser/search-indicator-magnifying-glass.svg | 7 + arc-firefox-theme/chrome/browser/searchbar.css | 7 +- .../chrome/browser/tabbrowser/pendingpaint.png | Bin 158914 -> 30233 bytes .../chrome/browser/tabbrowser/tab-audio-small.svg | 44 ++ .../chrome/browser/tabbrowser/tab-audio.svg | 87 +++ .../chrome/browser/tracking-protection-16.svg | 21 + .../browser/tracking-protection-disabled-16.svg | 23 + .../chrome/browser/update-badge-failed.svg | 6 + arc-firefox-theme/chrome/browser/urlbar-arrow.png | Bin 305 -> 265 bytes arc-firefox-theme/chrome/browser/warning.svg | 7 + arc-firefox-theme/chrome/browser/warning16.png | Bin 445 -> 0 bytes arc-firefox-theme/chrome/browser/warning16@2x.png | Bin 583 -> 0 bytes arc-firefox-theme/chrome/global/menu.css | 9 +- arc-firefox-theme/chrome/global/notification.css | 4 +- arc-firefox-theme/chrome/global/toolbarbutton.css | 28 +- .../chrome/mozapps/extensions/extensions.css | 10 +- 103 files changed, 2507 insertions(+), 1820 deletions(-) delete mode 100644 arc-firefox-theme/chrome/browser/bad-content-blocked-16.png delete mode 100644 arc-firefox-theme/chrome/browser/bad-content-blocked-16@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/bad-content-blocked-64.png delete mode 100644 arc-firefox-theme/chrome/browser/bad-content-unblocked-16.png delete mode 100644 arc-firefox-theme/chrome/browser/bad-content-unblocked-64.png create mode 100644 arc-firefox-theme/chrome/browser/controlcenter/arrow-subview-back.svg create mode 100644 arc-firefox-theme/chrome/browser/controlcenter/conn-degraded.svg create mode 100644 arc-firefox-theme/chrome/browser/controlcenter/mcb-disabled.svg create mode 100644 arc-firefox-theme/chrome/browser/controlcenter/tracking-protection-disabled.svg create mode 100644 arc-firefox-theme/chrome/browser/controlcenter/tracking-protection.svg create mode 100644 arc-firefox-theme/chrome/browser/controlcenter/warning-gray.svg create mode 100644 arc-firefox-theme/chrome/browser/controlcenter/warning-yellow.svg create mode 100755 arc-firefox-theme/chrome/browser/customizableui/thumburger-inverted.png create mode 100755 arc-firefox-theme/chrome/browser/customizableui/thumburger.png create mode 100644 arc-firefox-theme/chrome/browser/devedition/urlbar-arrow.png create mode 100644 arc-firefox-theme/chrome/browser/devedition/urlbar-arrow@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/promisedebugger.css create mode 100644 arc-firefox-theme/chrome/browser/fxa/android.png create mode 100644 arc-firefox-theme/chrome/browser/fxa/android@2x.png create mode 100644 arc-firefox-theme/chrome/browser/fxa/default-avatar.png create mode 100644 arc-firefox-theme/chrome/browser/fxa/default-avatar@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/fxa/default-profile-image.svg create mode 100644 arc-firefox-theme/chrome/browser/fxa/logo.png create mode 100644 arc-firefox-theme/chrome/browser/fxa/logo@2x.png create mode 100644 arc-firefox-theme/chrome/browser/fxa/sync-illustration.png create mode 100644 arc-firefox-theme/chrome/browser/fxa/sync-illustration@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/identity-icons-generic.png delete mode 100644 arc-firefox-theme/chrome/browser/identity-icons-generic@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/identity-icons-https-ev.png delete mode 100644 arc-firefox-theme/chrome/browser/identity-icons-https-ev@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/identity-icons-https-mixed-active.png delete mode 100644 arc-firefox-theme/chrome/browser/identity-icons-https-mixed-active@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/identity-icons-https-mixed-display.png delete mode 100644 arc-firefox-theme/chrome/browser/identity-icons-https-mixed-display@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/identity-icons-https.png delete mode 100644 arc-firefox-theme/chrome/browser/identity-icons-https@2x.png create mode 100644 arc-firefox-theme/chrome/browser/identity-mixed-active-blocked.svg create mode 100644 arc-firefox-theme/chrome/browser/identity-mixed-active-loaded.svg create mode 100644 arc-firefox-theme/chrome/browser/identity-mixed-passive-loaded.svg create mode 100644 arc-firefox-theme/chrome/browser/identity-not-secure.svg create mode 100644 arc-firefox-theme/chrome/browser/identity-secure.svg create mode 100644 arc-firefox-theme/chrome/browser/info.svg delete mode 100644 arc-firefox-theme/chrome/browser/mask.png delete mode 100644 arc-firefox-theme/chrome/browser/mask@2x.png create mode 100644 arc-firefox-theme/chrome/browser/newtab/close.png create mode 100755 arc-firefox-theme/chrome/browser/privatebrowsing/attention.png create mode 100755 arc-firefox-theme/chrome/browser/privatebrowsing/attention@2x.png create mode 100755 arc-firefox-theme/chrome/browser/privatebrowsing/check.png create mode 100755 arc-firefox-theme/chrome/browser/privatebrowsing/check@2x.png create mode 100755 arc-firefox-theme/chrome/browser/privatebrowsing/mask.svg create mode 100755 arc-firefox-theme/chrome/browser/privatebrowsing/shield-page.png create mode 100755 arc-firefox-theme/chrome/browser/privatebrowsing/shield-page@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/readinglist/icons.svg delete mode 100644 arc-firefox-theme/chrome/browser/readinglist/readinglist-icon.svg delete mode 100644 arc-firefox-theme/chrome/browser/readinglist/sidebar.css create mode 100644 arc-firefox-theme/chrome/browser/search-arrow-go.svg create mode 100644 arc-firefox-theme/chrome/browser/search-indicator-magnifying-glass.svg create mode 100644 arc-firefox-theme/chrome/browser/tabbrowser/tab-audio-small.svg create mode 100644 arc-firefox-theme/chrome/browser/tabbrowser/tab-audio.svg create mode 100755 arc-firefox-theme/chrome/browser/tracking-protection-16.svg create mode 100755 arc-firefox-theme/chrome/browser/tracking-protection-disabled-16.svg create mode 100644 arc-firefox-theme/chrome/browser/update-badge-failed.svg create mode 100644 arc-firefox-theme/chrome/browser/warning.svg delete mode 100644 arc-firefox-theme/chrome/browser/warning16.png delete mode 100644 arc-firefox-theme/chrome/browser/warning16@2x.png (limited to 'arc-firefox-theme') diff --git a/arc-firefox-theme/chrome/browser/bad-content-blocked-16.png b/arc-firefox-theme/chrome/browser/bad-content-blocked-16.png deleted file mode 100644 index 7cf33ec..0000000 Binary files a/arc-firefox-theme/chrome/browser/bad-content-blocked-16.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/bad-content-blocked-16@2x.png b/arc-firefox-theme/chrome/browser/bad-content-blocked-16@2x.png deleted file mode 100644 index c2e49b3..0000000 Binary files a/arc-firefox-theme/chrome/browser/bad-content-blocked-16@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/bad-content-blocked-64.png b/arc-firefox-theme/chrome/browser/bad-content-blocked-64.png deleted file mode 100644 index 75cf7f9..0000000 Binary files a/arc-firefox-theme/chrome/browser/bad-content-blocked-64.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/bad-content-unblocked-16.png b/arc-firefox-theme/chrome/browser/bad-content-unblocked-16.png deleted file mode 100644 index 2bf0868..0000000 Binary files a/arc-firefox-theme/chrome/browser/bad-content-unblocked-16.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/bad-content-unblocked-64.png b/arc-firefox-theme/chrome/browser/bad-content-unblocked-64.png deleted file mode 100644 index 54eb9f3..0000000 Binary files a/arc-firefox-theme/chrome/browser/bad-content-unblocked-64.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/browser.css b/arc-firefox-theme/chrome/browser/browser.css index 5aed89b..c95f45b 100644 --- a/arc-firefox-theme/chrome/browser/browser.css +++ b/arc-firefox-theme/chrome/browser/browser.css @@ -62,8 +62,8 @@ #TabsToolbar:not([collapsed="true"]) + #nav-bar { border-top: 1px solid rgba(212, 213, 219, 0.95) !important; background-clip: padding-box; - margin-top: -1px; /* Move up into the TabsToolbar for the inner highlight at the top of the nav-bar */ + margin-top: calc(-1 * var(--navbar-tab-toolbar-highlight-overlap)); /* Position the toolbar above the bottom of background tabs */ position: relative; z-index: 1; } @@ -99,7 +99,7 @@ /* Places toolbar */ toolbarbutton.bookmark-item:not(.subviewbutton), #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder { - margin: 1px; + margin: 0; padding: 2px 3px; } toolbarbutton.bookmark-item:not(.subviewbutton):not(:hover):not(:active):not([open]) { @@ -283,7 +283,7 @@ menuitem.bookmark-item { opacity: 0.7; } /* Stock icons for the menu bar items */ -menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { +menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip):not([endimage]) { -moz-binding: url("chrome://global/content/bindings/menu.xml#menuitem-iconic"); } #placesContext_open\:newwindow, @@ -442,10 +442,6 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { #panelMenu_unsortedBookmarks { list-style-image: url("chrome://browser/skin/places/unsortedBookmarks.png"); } -#menu_readingList, -#BMB_readingList { - list-style-image: url("chrome://browser/skin/readinglist/readinglist-icon.svg"); } - #panelMenu_pocket, #menu_pocket, #BMB_pocket { @@ -495,7 +491,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { .findbar-button > .toolbarbutton-text, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-badge-container, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-badge-stack, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-icon { -moz-margin-end: 0; padding: 2px 6px; @@ -505,13 +501,13 @@ 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, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-badge-container, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-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, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon { padding: 3px 7px; } /* Help SDK icons fit: */ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon, -toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-container > .toolbarbutton-icon { +toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon { width: 16px; } :-moz-any(#TabsToolbar, #nav-bar) toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon { @@ -531,7 +527,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open]:not([disabled=true]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):not([open]):hover > .toolbarbutton-menubutton-button > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):not([open]):hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-badge-container, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-badge-stack, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-icon { background: var(--toolbarbutton-hover-background); border-width: 1px; @@ -553,7 +549,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba .findbar-button:not([disabled=true]):-moz-any([checked="true"], :hover:active) > .toolbarbutton-text, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([open="true"]) > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open="true"]) > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-container, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-stack, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-icon { background: var(--toolbarbutton-active-background); box-shadow: var(--toolbarbutton-active-boxshadow); @@ -564,7 +560,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open="true"]) > .toolbarbutton-icon, #TabsToolbar .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon, -#TabsToolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-container, +#TabsToolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-stack, #TabsToolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-icon { background: none; color: #ffffff; @@ -743,6 +739,13 @@ toolbar[brighttext] #sync-button[status="active"] { #PanelUI-menu-button { -moz-image-region: rect(0, 486px, 18px, 468px); } +#PanelUI-menu-button.thumburger { + list-style-image: url("chrome://browser/skin/customizableui/thumburger.png") !important; + -moz-image-region: auto !important; } + +toolbar[brighttext] #PanelUI-menu-button.thumburger { + list-style-image: url("chrome://browser/skin/customizableui/thumburger-inverted.png") !important; } + #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button { -moz-image-region: rect(0, 504px, 18px, 486px); } @@ -785,30 +788,30 @@ toolbar[brighttext] #sync-button[status="active"] { #web-apps-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 720px, 18px, 702px); } -#loop-button > .toolbarbutton-badge-container { +#loop-button { list-style-image: url(chrome://browser/skin/loop/toolbar.png); -moz-image-region: rect(0, 18px, 18px, 0); } -toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { +toolbar[brighttext] #loop-button { list-style-image: url(chrome://browser/skin/loop/toolbar-inverted.png); } -#loop-button[state="disabled"] > .toolbarbutton-badge-container, -#loop-button[disabled="true"] > .toolbarbutton-badge-container { +#loop-button[state="disabled"], +#loop-button[disabled="true"] { -moz-image-region: rect(0, 36px, 18px, 18px); } -#loop-button:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container { +#loop-button:not([disabled="true"])[state="error"] { -moz-image-region: rect(0, 54px, 18px, 36px); } -#loop-button:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container { +#loop-button:not([disabled="true"])[state="action"] { -moz-image-region: rect(0, 72px, 18px, 54px); } -#loop-button:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { +#loop-button:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) { -moz-image-region: rect(0, 90px, 18px, 72px); } -#loop-button:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container { +#loop-button:not([disabled="true"])[state="active"] { -moz-image-region: rect(0, 108px, 18px, 90px); } -#loop-button:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { +#loop-button:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) { -moz-image-region: rect(0, 126px, 18px, 108px); } #webide-button[cui-areatype="toolbar"] { @@ -972,32 +975,32 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { toolbaritem[sdkstylewidget="true"] > toolbarbutton { -moz-image-region: rect(0, 832px, 32px, 800px); } - #loop-button[cui-areatype="menu-panel"] > .toolbarbutton-badge-container, - toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #loop-button { list-style-image: url(chrome://browser/skin/loop/menuPanel.png); -moz-image-region: rect(0, 32px, 32px, 0); } /* Make sure that the state icons are not shown in the customization palette. */ - toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container { + toolbarpaletteitem[place="palette"] > #loop-button { -moz-image-region: rect(0, 32px, 32px, 0) !important; } - #loop-button[cui-areatype="menu-panel"][state="disabled"] > .toolbarbutton-badge-container, - #loop-button[cui-areatype="menu-panel"][disabled="true"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"][state="disabled"], + #loop-button[cui-areatype="menu-panel"][disabled="true"] { -moz-image-region: rect(0, 64px, 32px, 32px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] { -moz-image-region: rect(0, 96px, 32px, 64px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] { -moz-image-region: rect(0, 128px, 32px, 96px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) { -moz-image-region: rect(0, 160px, 32px, 128px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] { -moz-image-region: rect(0, 192px, 32px, 160px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) { -moz-image-region: rect(0, 224px, 32px, 192px); } /* Wide panel control icons */ @@ -1116,32 +1119,32 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { #pocket-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { -moz-image-region: rect(64px, 1984px, 128px, 1920px); } - #loop-button[cui-areatype="menu-panel"] > .toolbarbutton-badge-container, - toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #loop-button { list-style-image: url(chrome://browser/skin/loop/menuPanel@2x.png); -moz-image-region: rect(0, 64px, 64px, 0); } /* Make sure that the state icons are not shown in the customization palette. */ - toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container { + toolbarpaletteitem[place="palette"] > #loop-button { -moz-image-region: rect(0, 64px, 64px, 0) !important; } - #loop-button[cui-areatype="menu-panel"][state="disabled"] > .toolbarbutton-badge-container, - #loop-button[cui-areatype="menu-panel"][disabled="true"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"][state="disabled"], + #loop-button[cui-areatype="menu-panel"][disabled="true"] { -moz-image-region: rect(0, 128px, 64px, 64px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] { -moz-image-region: rect(0, 192px, 64px, 128px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] { -moz-image-region: rect(0, 256px, 64px, 192px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) { -moz-image-region: rect(0, 320px, 64px, 256px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] { -moz-image-region: rect(0, 384px, 64px, 320px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) { -moz-image-region: rect(0, 448px, 64px, 384px); } #new-tab-button[cui-areatype="menu-panel"], @@ -1311,6 +1314,25 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { #urlbar-icons { -moz-box-align: center; } +#urlbar-search-footer { + border-top: 1px solid rgba(24, 26, 27, 0.14); + background-color: rgba(24, 26, 27, 0.07); } + +#urlbar-search-settings { + -moz-appearance: none; + -moz-user-focus: ignore; + color: inherit; + margin: 0; + border: 0; + padding: 8px 20px; + background: transparent; } + +#urlbar-search-settings:hover { + background-color: rgba(24, 26, 27, 0.07); } + +#urlbar-search-settings:hover:active { + background-color: rgba(24, 26, 27, 0.12); } + #urlbar-search-splitter { -moz-appearance: none; width: 8px; } @@ -1327,14 +1349,57 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { -moz-margin-start: 0; color: GrayText; } +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] { + border-bottom: 1px solid rgba(24, 26, 27, 0.14); + background-color: rgba(24, 26, 27, 0.07); + padding: 6px 0; + -moz-padding-start: 44px; + -moz-padding-end: 6px; + background-image: url("chrome://browser/skin/info.svg"); + background-clip: padding-box; + background-position: 20px center; + background-repeat: no-repeat; + background-size: 16px 16px; } + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) { + background-position: right 20px center; } + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description { + margin: 0; + padding: 0; } + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link { + -moz-margin-start: 0; } + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button { + -moz-appearance: none; + -moz-user-focus: ignore; + min-width: 80px; + border-radius: 3px; + padding: 4px 16px; + margin: 0; + -moz-margin-start: 10px; } + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] { + color: #616161; + background-color: #e0e0e0; + border: 1px solid #d1d1d1; } + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover { + background-color: #d6d6d6; } + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] { + color: white; + background-color: #67cc14; + border: 1px solid #67cc14; } + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover { + background-color: #5eba12; } + #search-container { min-width: calc(54px + 11ch); } /* identity box */ -#identity-box { - padding: 1px; - font-size: .9em; } - #identity-box:-moz-locale-dir(ltr) { border-top-left-radius: 1.5px; border-bottom-left-radius: 1.5px; } @@ -1343,133 +1408,99 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { border-top-right-radius: 1.5px; border-bottom-right-radius: 1.5px; } -#notification-popup-box:not([hidden]) + #identity-box { - border-radius: 0; } - -window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box { - border-radius: 0; } - -/* forward button hiding is delayed when hovered */ -/* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */ -/* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */ -#urlbar[pageproxystate="valid"] > #identity-box.chromeUI, -#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { - -moz-margin-end: 4px; } - -#identity-box.verifiedIdentity:not(:-moz-lwtheme) { - background-color: var(--verified-identity-box-backgroundcolor); } +#identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) { + background-color: var(--identity-box-verified-background-color); } #identity-box:-moz-focusring { outline: 1px dotted #000; outline-offset: -3px; } -#identity-icon-labels { - -moz-padding-start: 2px; - -moz-padding-end: 5px; } - -:root { +#identity-box { --identity-box-verified-color: #479900; - --identity-box-verified-background-image: linear-gradient(transparent 15%, rgba(39, 74, 8, 0.2) 15%, rgba(39, 74, 8, 0.2) 85%, transparent 85%); --identity-box-chrome-color: #e57300; - --identity-box-chrome-background-image: linear-gradient(transparent 15%, rgba(229, 114, 0, 0.5) 15%, rgba(229, 114, 0, 0.5) 85%, transparent 85%); } - -#urlbar[pageproxystate="valid"] > #identity-box.chromeUI, -#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { - background-position: right; - background-size: 1px; - background-repeat: no-repeat; } - -#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:-moz-locale-dir(rtl), -#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:-moz-locale-dir(rtl) { - background-position: left; } + border-inline-end: 1px solid var(--urlbar-separator-color); + border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%); + border-image-slice: 1; + font-size: .9em; + padding: 3px 5px 3px 3px; + margin-inline-end: 4px; + overflow: hidden; } #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { - color: var(--identity-box-verified-color); - background-image: var(--identity-box-verified-background-image); } + color: var(--identity-box-verified-color); } #urlbar[pageproxystate="valid"] > #identity-box.chromeUI { - color: var(--identity-box-chrome-color); - background-image: var(--identity-box-chrome-background-image); } - -/* page proxy icon */ -#page-proxy-favicon { - width: 16px; - height: 16px; - list-style-image: url(chrome://browser/skin/identity-icons-generic.png); } + color: var(--identity-box-chrome-color); } -.chromeUI > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://branding/content/identity-icons-brand.png); } - -.verifiedDomain > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https.png); } - -.verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-ev.png); } +#identity-icon-labels { + padding-inline-start: 2px; } -.mixedActiveContent > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-active.png); } +#notification-popup-box:not([hidden]) + #identity-box { + padding-inline-start: 10px; + border-radius: 0; } -.mixedDisplayContent > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png); } +window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box { + border-radius: 0; } -.mixedDisplayContentLoadedActiveBlocked > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png); } +/* TRACKING PROTECTION ICON */ +#tracking-protection-icon { + width: 16px; + height: 16px; + margin-inline-start: 0; + margin-inline-end: 2px; + list-style-image: url(chrome://browser/skin/tracking-protection-16.svg); + opacity: 1; } -#page-proxy-favicon[pageproxystate="invalid"] { - opacity: 0.3; } +#tracking-protection-icon[state="loaded-tracking-content"] { + list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg); } -@media not all and (min-resolution: 1.1dppx) { - #page-proxy-favicon { - -moz-image-region: rect(0, 16px, 16px, 0); } +#tracking-protection-icon[animate] { + transition: margin-left 200ms ease-out, margin-right 200ms ease-out; } - #identity-box:hover > #page-proxy-favicon { - -moz-image-region: rect(0, 32px, 16px, 16px); } +#tracking-protection-icon:not([state]) { + margin-inline-start: -18px; + pointer-events: none; + opacity: 0; + /* Only animate the shield in, when it disappears hide it immediately. */ + transition: none; } - #identity-box:hover:active > #page-proxy-favicon, - #identity-box[open=true] > #page-proxy-favicon { - -moz-image-region: rect(0, 48px, 16px, 32px); } } -@media (min-resolution: 1.1dppx) { - #page-proxy-favicon { - list-style-image: url(chrome://browser/skin/identity-icons-generic@2x.png); - -moz-image-region: rect(0, 32px, 32px, 0); } +#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icons > #tracking-protection-icon { + visibility: collapse; } - .chromeUI > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://branding/content/identity-icons-brand@2x.png); } +/* MAIN IDENTITY ICON */ +#page-proxy-favicon { + width: 16px; + height: 16px; + list-style-image: url(chrome://browser/skin/identity-not-secure.svg); } - .verifiedDomain > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https@2x.png); } +.chromeUI > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://branding/content/identity-icons-brand.svg); } - .verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-ev@2x.png); } +.verifiedDomain > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], +.verifiedIdentity > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-secure.svg); } - .mixedActiveContent > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-active@2x.png); } +.mixedActiveContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg); } - .mixedDisplayContent > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display@2x.png); } +.weakCipher > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], +.mixedDisplayContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], +.mixedDisplayContentLoadedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg); } - .mixedDisplayContentLoadedActiveBlocked > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display@2x.png); } +.mixedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg); } - #identity-box:hover > #page-proxy-favicon { - -moz-image-region: rect(0, 64px, 32px, 32px); } +#page-proxy-favicon[pageproxystate="invalid"] { + opacity: 0.3; } - #identity-box:hover:active > #page-proxy-favicon, - #identity-box[open=true] > #page-proxy-favicon { - -moz-image-region: rect(0, 96px, 32px, 64px); } } -#urlbar[actiontype="searchengine"] > #identity-box > #page-proxy-favicon { +#urlbar[actiontype="searchengine"] > #identity-box > #identity-icons > #page-proxy-favicon { -moz-image-region: inherit; list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); width: 16px; height: 16px; opacity: 1; } -#page-proxy-favicon { - margin-top: 1px; - margin-bottom: 1px; - -moz-margin-start: 3px; - -moz-margin-end: 1px; } - .popup-notification-icon { width: 64px; height: 64px; @@ -1522,13 +1553,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box .popup-notification-icon[popupid="webapps-install"] { list-style-image: url(chrome://global/skin/icons/webapps-64.png); } -.popup-notification-icon[popupid="bad-content"] { - list-style-image: url(chrome://browser/skin/bad-content-blocked-64.png); } - -.popup-notification-icon[popupid="bad-content"][mixedblockdisabled], -.popup-notification-icon[popupid="bad-content"][trackingblockdisabled] { - list-style-image: url(chrome://browser/skin/bad-content-unblocked-64.png); } - .popup-notification-icon[popupid="webRTC-sharingDevices"], .popup-notification-icon[popupid="webRTC-shareDevices"] { list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64.png); } @@ -1634,14 +1658,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box opacity: 0; } to { opacity: 1; } } -.bad-content-blocked-notification-icon, -#bad-content-blocked-notification-icon { - list-style-image: url(chrome://browser/skin/bad-content-blocked-16.png); } - -.bad-content-unblocked-notification-icon, -#bad-content-unblocked-notification-icon { - list-style-image: url(chrome://browser/skin/bad-content-unblocked-16.png); } - .webRTC-shareDevices-notification-icon, #webRTC-shareDevices-notification-icon { list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16.png); } @@ -1760,9 +1776,7 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box /* Notification icon box */ #notification-popup-box { - border-radius: 2.5px 0 0 2.5px; - margin-top: -1px; - margin-bottom: -1px; } + border-radius: 2.5px 0 0 2.5px; } .notification-anchor-icon:-moz-focusring { outline: 1px dotted -moz-DialogText; } @@ -1935,7 +1949,9 @@ richlistitem[type~="action"][actiontype="searchengine"][selected="true"] > .ac-t width: 16px; height: 16px; } -.ac-comment { +.ac-comment, +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description, +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button { font-size: 1.05em; } .ac-extra > .ac-comment { @@ -2052,33 +2068,6 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- #page-report-button { list-style-image: url("chrome://browser/skin/Info.png"); } -/* Reading List button */ -#urlbar:not([focused]):not(:hover) #readinglist-addremove-button { - opacity: 0; - width: 0px; } - -#readinglist-addremove-button { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage"); - -moz-image-region: rect(0, 14px, 14px, 0); - transition: width 150ms ease-in-out, opacity 150ms ease-in-out 150ms; - opacity: 1; - width: 20px; } - -#readinglist-addremove-button:hover { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage-hover"); } - -#readinglist-addremove-button:active { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage-active"); } - -#readinglist-addremove-button[already-added="true"] { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded"); } - -#readinglist-addremove-button[already-added="true"]:hover { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded-hover"); } - -#readinglist-addremove-button[already-added="true"]:active { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded-active"); } - /* Reader mode button */ #reader-mode-button { list-style-image: url("chrome://browser/skin/readerMode.svg"); @@ -2276,9 +2265,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- --tab-min-height: 31px; } #TabsToolbar { - --tab-separator-image: url(chrome://browser/skin/tabbrowser/tab-separator.png); - --tab-separator-size: 3px 100%; - --tab-separator-opacity: 1; } + --tab-stroke-background-size: auto 100%; } /* image preloading hack */ #tabbrowser-tabs::before { @@ -2328,6 +2315,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- .tab-throbber, .tab-icon-image, +.tab-icon-sound, .tab-close-button { margin-top: 1px; } @@ -2348,9 +2336,28 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- display: none; } .tab-icon-overlay[crashed] { - display: -moz-box; list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg"); } +.tab-icon-overlay[soundplaying], +.tab-icon-overlay[muted]:not([crashed]) { + border-radius: 8px; } + +.tab-icon-overlay[soundplaying]:hover, +.tab-icon-overlay[muted]:not([crashed]):hover { + background-color: white; } + +.tab-icon-overlay[soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio"); } + +.tab-icon-overlay[muted]:not([crashed]) { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted"); } + +#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white"); } + +#TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted"); } + .tab-throbber[busy] { list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png"); } @@ -2366,6 +2373,66 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-margin-end: -2px; padding: 0; } +.tab-icon-sound { + -moz-margin-start: 4px; + width: 16px; + height: 16px; + padding: 0; } + +.tab-icon-sound[soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab"); } + +.tab-icon-sound[soundplaying]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-hover"); } + +.tab-icon-sound[soundplaying]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-pressed"); } + +.tab-icon-sound[muted] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted"); } + +.tab-icon-sound[muted]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-hover"); } + +.tab-icon-sound[muted]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-pressed"); } + +.tab-icon-sound[visuallyselected=true][soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio"); } + +.tab-icon-sound[visuallyselected=true][soundplaying]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover"); } + +.tab-icon-sound[visuallyselected=true][soundplaying]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed"); } + +.tab-icon-sound[visuallyselected=true][muted] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted"); } + +.tab-icon-sound[visuallyselected=true][muted]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover"); } + +.tab-icon-sound[visuallyselected=true][muted]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed"); } + +#TabsToolbar[brighttext] .tab-icon-sound[soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white"); } + +#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover"); } + +#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed"); } + +#TabsToolbar[brighttext] .tab-icon-sound[muted] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white"); } + +#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover"); } + +#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed"); } + .tab-background, .tabs-newtab-button { /* overlap the tab curves */ @@ -2473,7 +2540,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- background-color: transparent; background-image: url(chrome://browser/skin/custom_images/light/tabs/tab-middle.svg); background-repeat: repeat-x; - background-size: auto 100%; + background-size: var(--tab-stroke-background-size); /* The padding-top combined with background-clip: content-box (the bottom-most) ensure the background-color doesn't extend above the top border. */ padding-top: 2px; } @@ -2486,7 +2553,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- /*, lwtHeader;*/ /* Don't stretch the LWT header images */ - background-size: auto 100%, auto 100%, auto auto; } + background-size: var(--tab-stroke-background-size), auto 100%, auto auto; } /* These LWT styles are normally overridden by browser-lightweightTheme.css */ .tab-background-start[visuallyselected=true]:-moz-lwtheme::before, @@ -2513,6 +2580,9 @@ lwtHeader;*/ .tab-background-middle, .tabs-newtab-button, +.tab-icon-overlay[soundplaying], +.tab-icon-overlay[muted]:not([crashed]), +.tab-icon-sound, .tab-close-button { pointer-events: auto; } @@ -2550,8 +2620,9 @@ lwtHeader;*/ #TabsToolbar:not(:-moz-lwtheme):-moz-system-metric(menubar-drag) { -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-drag"); } -.tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-label { - outline: 1px dotted; } +.tabbrowser-tab:focus > .tab-stack > .tab-content { + outline: 1px dotted; + outline-offset: -6px; } #context_reloadTab { list-style-image: url("moz-icon://stock/gtk-refresh?size=menu"); } @@ -2756,19 +2827,12 @@ toolbarbutton.chevron > .toolbarbutton-icon { padding: 30px 50px; box-shadow: 0 0 2px white; } -#full-screen-warning-container[obscure-browser] { - background-color: rgba(0, 0, 0, 0.3); } - .full-screen-description { font-size: 150%; } #full-screen-domain-text { font-size: 300%; } -.full-screen-approval-button, -#full-screen-remember-decision { - font-size: 120%; } - /* Responsive Mode */ .browserContainer[responsivemode] { background-color: #222; @@ -3294,23 +3358,6 @@ notification.pluginVulnerable { notification.pluginVulnerable .messageImage { list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png"); } -.popup-notification-item-title[popupid="bad-content"] { - font-weight: bold; } - -.popup-notification-item-message[popupid="bad-content"] { - width: 17em; } - -.popup-notification-item-message[popupid="bad-content"][mixedblockdisabled]:not(.popup-notification-item-message-critical), -.popup-notification-item-message[popupid="bad-content"][trackingblockdisabled]:not(.popup-notification-item-message-critical) { - color: GrayText; } - -.popup-notification-item-message-critical[popupid="bad-content"] { - color: #d74345; - font-style: italic; } - -.popup-notification-footer[popupid="bad-content"] { - padding-top: 1em; } - #notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent { /* Since we display a sliding subview that extends to the border, we cannot * keep the default padding of arrow panels. We use the same padding in the @@ -3960,13 +4007,13 @@ toolbarpaletteitem[notransition][place="panel"] { transition: none; } toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon, -toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-container > .toolbarbutton-icon, +toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon, toolbarpaletteitem > toolbaritem.panel-wide-item, toolbarpaletteitem > toolbarbutton[type="menu-button"] { transition: transform 0.3s cubic-bezier(0.6, 2, 0.75, 1.5) !important; } toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon, -toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-container > .toolbarbutton-icon { +toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon { transform: scale(1.3); } toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item, @@ -4286,9 +4333,11 @@ toolbarpaletteitem[place="toolbar"] { margin: 24px -16px -16px; padding: 2em 15px; } +#UITourTooltipButtons > label, #UITourTooltipButtons > button { margin: 0 15px; } +#UITourTooltipButtons > label:first-child, #UITourTooltipButtons > button:first-child { -moz-margin-start: 0; } @@ -4297,6 +4346,7 @@ toolbarpaletteitem[place="toolbar"] { height: 16px; -moz-margin-end: 5px; } +#UITourTooltipButtons > label, #UITourTooltipButtons > button .button-text { font-size: 1.15rem; } @@ -4316,6 +4366,7 @@ toolbarpaletteitem[place="toolbar"] { border-color: rgba(24, 26, 27, 0.15); box-shadow: 0 1px 0 0 rgba(24, 26, 27, 0.05) inset; } +#UITourTooltipButtons > label, #UITourTooltipButtons > button.button-link { -moz-appearance: none; background: transparent; @@ -4535,3 +4586,6 @@ notification.heartbeat { /* override toolkit/themes/linux/global/menu.css */ -moz-padding-end: 0 !important; -moz-margin-end: 0 !important; } + +.browser-action-panel > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; } diff --git a/arc-firefox-theme/chrome/browser/controlcenter/arrow-subview-back.svg b/arc-firefox-theme/chrome/browser/controlcenter/arrow-subview-back.svg new file mode 100644 index 0000000..8566d63 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/controlcenter/arrow-subview-back.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/arc-firefox-theme/chrome/browser/controlcenter/conn-degraded.svg b/arc-firefox-theme/chrome/browser/controlcenter/conn-degraded.svg new file mode 100644 index 0000000..e3e82c1 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/controlcenter/conn-degraded.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/controlcenter/mcb-disabled.svg b/arc-firefox-theme/chrome/browser/controlcenter/mcb-disabled.svg new file mode 100644 index 0000000..af45b90 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/controlcenter/mcb-disabled.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/controlcenter/panel.css b/arc-firefox-theme/chrome/browser/controlcenter/panel.css index 56c6245..15577de 100644 --- a/arc-firefox-theme/chrome/browser/controlcenter/panel.css +++ b/arc-firefox-theme/chrome/browser/controlcenter/panel.css @@ -2,25 +2,46 @@ * 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/. */ -#identity-popup-securityView:not(.verifiedIdentity) > #identity-popup-content-owner, -#identity-popup-securityView:not(.verifiedIdentity):not(.verifiedDomain) > #identity-popup-content-verifier, -#identity-popup-securityView:not(.verifiedIdentity):not(.mixedContent) > #identity-popup-content-supplemental, -#identity-popup-security-content:not(.verifiedIdentity):not(.verifiedDomain) > .identity-popup-connection-secure, -#identity-popup-securityView:not(.verifiedIdentity):not(.verifiedDomain) > #identity-popup-securityView-header > .identity-popup-connection-secure, -#identity-popup-securityView:not(.unknownIdentity) > #identity-popup-securityView-header > .identity-popup-connection-not-secure, -#identity-popup-securityView:not(.chromeUI) > #identity-popup-securityView-header > .identity-popup-connection-internal, -#identity-popup-security-content:not(.unknownIdentity) > .identity-popup-connection-not-secure, -#identity-popup-securityView:not(.verifiedIdentity) > #identity-popup-securityView-connection, -#identity-popup-security-content.unknownIdentity:not(.mixedContent) + .identity-popup-expander, -#identity-popup-security-content:not(.chromeUI) > .identity-popup-connection-internal, -#identity-popup-security-content.chromeUI + .identity-popup-expander { + +/* Hide all conditional elements by default. */ +:-moz-any([when-connection],[when-mixedcontent],[when-ciphers]) { + display: none; +} + +/* Show the right elements for the right connection states. */ +#identity-popup[connection=not-secure] [when-connection~=not-secure], +#identity-popup[connection=secure-ev] [when-connection~=secure-ev], +#identity-popup[connection=secure] [when-connection~=secure], +#identity-popup[connection=chrome] [when-connection~=chrome], +#identity-popup[connection=file] [when-connection~=file], +/* Show weak cipher messages when needed. */ +#identity-popup[ciphers=weak] [when-ciphers~=weak], +/* Show mixed content warnings when needed */ +#identity-popup[mixedcontent~=active-loaded] [when-mixedcontent=active-loaded], +#identity-popup[mixedcontent~=passive-loaded]:not([mixedcontent~=active-loaded]) [when-mixedcontent=passive-loaded], +#identity-popup[mixedcontent~=active-blocked]:not([mixedcontent~=passive-loaded]) [when-mixedcontent=active-blocked], +/* Show the right elements when there is mixed passive content loaded and active blocked. */ +#identity-popup[mixedcontent~=active-blocked][mixedcontent~=passive-loaded] [when-mixedcontent~=active-blocked][when-mixedcontent~=passive-loaded], +/* Show 'disable MCB' button always when there is mixed active content blocked. */ +#identity-popup-securityView-body[mixedcontent~=active-blocked] > button[when-mixedcontent=active-blocked] { + display: inherit; +} + +/* Hide 'not secure' message in subview when weak cipher or mixed content messages are shown. */ +#identity-popup-securityView-body:-moz-any([mixedcontent],[ciphers]) > description[when-connection=not-secure], +/* Hide 'passive-loaded (only)' message when there is mixed passive content loaded and active blocked. */ +#identity-popup-securityView-body[mixedcontent~=passive-loaded][mixedcontent~=active-blocked] > description[when-mixedcontent=passive-loaded] { display: none; } -/* PANEL */ +/* Make sure hidden elements don't accidentally become visible from one of the + above selectors (see Bug 1194258) */ +#identity-popup [hidden] { + display: none !important; +} #identity-popup, -.panel-viewstack[viewtype="main"]:not([transitioning]) > .panel-mainview[panelid=identity-popup] > #identity-popup-mainView { +#identity-popup:not([panelopen]) .panel-viewstack[viewtype="main"]:not([transitioning]) #identity-popup-mainView { /* Tiny hack to ensure the panel shrinks back to its original size after closing a subview that is bigger than the main view. */ max-height: 0; @@ -65,8 +86,9 @@ #identity-popup-securityView, #identity-popup-security-content, -#identity-popup-permissions-content { - padding: 0.75em 0 1em; +#identity-popup-permissions-content, +#tracking-protection-content { + padding: 0.5em 0 1em; -moz-padding-start: calc(2em + 24px); -moz-padding-end: 1em; background-repeat: no-repeat; @@ -76,7 +98,8 @@ #identity-popup-securityView:-moz-locale-dir(rtl), #identity-popup-security-content:-moz-locale-dir(rtl), -#identity-popup-permissions-content:-moz-locale-dir(rtl) { +#identity-popup-permissions-content:-moz-locale-dir(rtl), +#tracking-protection-content:-moz-locale-dir(rtl) { background-position: calc(100% - 1em) 1em; } @@ -103,18 +126,11 @@ .identity-popup-expander[panel-multiview-anchor] { transition: background-color 250ms ease-in; - background-color: #0069d9; - background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png"), + background-color: Highlight; + background-image: url("chrome://browser/skin/controlcenter/arrow-subview-back.svg"), linear-gradient(rgba(255,255,255,0.3), transparent); } -@media (min-resolution: 1.1dppx) { - .identity-popup-expander[panel-multiview-anchor] { - background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted@2x.png"), - linear-gradient(rgba(255,255,255,0.3), transparent); - } -} - .identity-popup-expander > .button-box { padding: 0; -moz-appearance: none; @@ -138,23 +154,33 @@ /* CONTENT */ -.identity-popup-text { +#identity-popup-security-content > description, +#identity-popup-security-descriptions > description, +#identity-popup-securityView-header > description, +#identity-popup-securityView-body > description, +#tracking-protection-content > label { white-space: pre-wrap; font-size: 110%; margin: 0; } .identity-popup-headline { - margin: 2px 0 4px; + margin: 3px 0 4px; font-size: 150%; } -/* SECURITY */ +.identity-popup-warning-gray { + -moz-padding-start: 24px; + background: url(chrome://browser/skin/controlcenter/warning-gray.svg) no-repeat 0 50%; +} -#identity-popup-securityView > .identity-popup-text:not(#identity-popup-content-owner) { - margin: 2px 0 4px; +.identity-popup-warning-yellow { + -moz-padding-start: 24px; + background: url(chrome://browser/skin/controlcenter/warning-yellow.svg) no-repeat 0 50%; } +/* SECURITY */ + .identity-popup-connection-secure { color: #418220; } @@ -163,12 +189,6 @@ color: #d74345; } -#identity-popup-security-content.chromeUI { - background-image: url(chrome://branding/content/icon48.png); -} - -/* SECURITY SUBVIEW */ - #identity-popup-securityView { padding-bottom: 2em; overflow: hidden; @@ -179,86 +199,107 @@ background-image: url(chrome://browser/skin/controlcenter/conn-not-secure.svg); } -#identity-popup-securityView.verifiedDomain, -#identity-popup-securityView.verifiedIdentity, -#identity-popup-security-content.verifiedDomain, -#identity-popup-security-content.verifiedIdentity { +#identity-popup[connection=chrome] #identity-popup-securityView, +#identity-popup[connection=chrome] #identity-popup-security-content { + background-image: url(chrome://branding/content/icon48.png); +} + +#identity-popup[connection^=secure] #identity-popup-securityView, +#identity-popup[connection^=secure] #identity-popup-security-content { background-image: url(chrome://browser/skin/controlcenter/conn-secure.svg); } +/* Use [isbroken] to make sure we don't show a lock on an http page. See Bug 1192162. */ +#identity-popup[ciphers=weak] #identity-popup-securityView, +#identity-popup[ciphers=weak] #identity-popup-security-content, +#identity-popup[mixedcontent~=passive-loaded][isbroken] #identity-popup-securityView, +#identity-popup[mixedcontent~=passive-loaded][isbroken] #identity-popup-security-content { + background-image: url(chrome://browser/skin/controlcenter/conn-degraded.svg); +} + +#identity-popup[mixedcontent~=active-loaded][isbroken] #identity-popup-securityView, +#identity-popup[mixedcontent~=active-loaded][isbroken] #identity-popup-security-content { + background-image: url(chrome://browser/skin/controlcenter/mcb-disabled.svg); +} + +#identity-popup-security-descriptions > description { + margin-top: 6px; + color: Graytext; +} + #identity-popup-securityView-header { border-bottom: 1px solid var(--panel-separator-color); padding-bottom: 1em; - margin-bottom: 1em; } -#identity-popup-content-owner { - font-weight: 700; +#identity-popup-securityView-body { + -moz-padding-end: 1em; } -#identity-popup-content-verifier { +#identity-popup-content-verifier ~ description { + margin-top: 1em; color: Graytext; } -#identity-popup-content-owner, -#identity-popup-securityView > #identity-popup-securityView-connection.identity-popup-text { +description#identity-popup-content-verified-by, +description#identity-popup-content-owner, +description#identity-popup-content-verifier, +#identity-popup-securityView-body > button { margin-top: 1em; } -/* PERMISSIONS */ - -#identity-popup-permissions-content { - background-image: url(chrome://browser/skin/controlcenter/permissions.svg); +#identity-popup-securityView-body > button { + margin-inline-start: 0; + margin-inline-end: 0; } -#identity-popup-permission-list { - margin-top: 5px; -} +/* TRACKING PROTECTION */ -.identity-popup-permission-label { - -moz-margin-start: 0; +#tracking-protection-content { + background-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg"); } -/* FOOTER BUTTONS */ - -#identity-popup-button-container { - background-color: hsla(210,4%,10%,.07); +#tracking-protection-content[state="loaded-tracking-content"] { + background-image: url("chrome://browser/skin/controlcenter/tracking-protection-disabled.svg"); } -#identity-popup-more-info-button { - border: none; - border-top: 1px solid var(--panel-separator-color); - background: transparent; - -moz-appearance: none; - margin-top: 5px; - margin: 0; +#tracking-action-block, +#tracking-action-unblock, +#tracking-action-unblock-private { + margin: 1em 0 0; } -#identity-popup-more-info-button > .button-box { - -moz-appearance: none; - padding: 1em; +#tracking-protection-content[state] > #tracking-not-detected, +#tracking-protection-content:not([state="blocked-tracking-content"]) > #tracking-blocked, +#main-window[privatebrowsingmode] #tracking-action-unblock, +#main-window:not([privatebrowsingmode]) #tracking-action-unblock-private, +#tracking-protection-content:not([state="blocked-tracking-content"]) #tracking-action-unblock, +#tracking-protection-content:not([state="blocked-tracking-content"]) #tracking-action-unblock-private, +#tracking-protection-content:not([state="loaded-tracking-content"]) > #tracking-loaded, +#tracking-protection-content:not([state="loaded-tracking-content"]) #tracking-action-block, +#tracking-protection-content:not([state]) > #tracking-actions { + display: none; } -#identity-popup-more-info-button:hover { - background-color: hsla(210,4%,10%,.07); +/* PERMISSIONS */ + +#identity-popup-permissions-content { + background-image: url(chrome://browser/skin/controlcenter/permissions.svg); } -#identity-popup-more-info-button:hover:active { - color: inherit; - background-color: hsla(210,4%,10%,.12); - box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset; +#identity-popup-permission-list { + margin-top: 5px; } -#identity-popup-more-info-button:-moz-focusring { - border-color: transparent; +.identity-popup-permission-label { + -moz-margin-start: 0; } -.identity-popup-expander:-moz-focusring, -#identity-popup-more-info-button { + +.identity-popup-expander:-moz-focusring { padding: 1px; } -.identity-popup-expander:-moz-focusring > .button-box, -#identity-popup-more-info-button:-moz-focusring > .button-box { +.identity-popup-expander:-moz-focusring > .button-box { outline: 1px -moz-dialogtext dotted; } diff --git a/arc-firefox-theme/chrome/browser/controlcenter/tracking-protection-disabled.svg b/arc-firefox-theme/chrome/browser/controlcenter/tracking-protection-disabled.svg new file mode 100644 index 0000000..363b0df --- /dev/null +++ b/arc-firefox-theme/chrome/browser/controlcenter/tracking-protection-disabled.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/controlcenter/tracking-protection.svg b/arc-firefox-theme/chrome/browser/controlcenter/tracking-protection.svg new file mode 100644 index 0000000..a58d8bd --- /dev/null +++ b/arc-firefox-theme/chrome/browser/controlcenter/tracking-protection.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/controlcenter/warning-gray.svg b/arc-firefox-theme/chrome/browser/controlcenter/warning-gray.svg new file mode 100644 index 0000000..5f122c3 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/controlcenter/warning-gray.svg @@ -0,0 +1,9 @@ + + + + + + diff --git a/arc-firefox-theme/chrome/browser/controlcenter/warning-yellow.svg b/arc-firefox-theme/chrome/browser/controlcenter/warning-yellow.svg new file mode 100644 index 0000000..e2d3a36 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/controlcenter/warning-yellow.svg @@ -0,0 +1,9 @@ + + + + + + diff --git a/arc-firefox-theme/chrome/browser/customizableui/panelUIOverlay.css b/arc-firefox-theme/chrome/browser/customizableui/panelUIOverlay.css index 8937d70..c96ee12 100644 --- a/arc-firefox-theme/chrome/browser/customizableui/panelUIOverlay.css +++ b/arc-firefox-theme/chrome/browser/customizableui/panelUIOverlay.css @@ -83,8 +83,8 @@ } #PanelUI-button { - -moz-margin-start: 2px; - -moz-border-start: 1px solid; + margin-inline-start: 2px; + border-inline-start: 1px solid; border-image: linear-gradient(transparent, rgba(0,0,0,.1) 20%, rgba(0,0,0,.1) 80%, transparent); border-image-slice: 1; } @@ -93,10 +93,33 @@ border-image-source: linear-gradient(transparent, rgba(100%,100%,100%,.2) 20%, rgba(100%,100%,100%,.2) 80%, transparent); } -#PanelUI-menu-button[update-status="succeeded"] .toolbarbutton-badge::after { - content: url(chrome://browser/skin/update-badge.svg); - background-color: #74BF43; +#PanelUI-menu-button[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + display: -moz-box; height: 10px; + width: 10px; + background-size: contain; + border: 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="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="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="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive { + filter: none; } .panel-subviews { @@ -163,16 +186,6 @@ panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .pan flex-direction: column; } -#app-extension-point-end > #PanelUI-menu-button { - padding: 2px 5px; -} -#app-extension-point-end > #PanelUI-menu-button .toolbarbutton-text { - display: none; -} -#app-extension-point-end > #PanelUI-menu-button .toolbarbutton-icon { - margin: 0; -} - #PanelUI-popup > arrowscrollbox > autorepeatbutton { display: none; } @@ -298,9 +311,9 @@ toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 { /* Help SDK buttons fit in. */ toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-icon, -toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-badge-container > .toolbarbutton-icon, +toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon, toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon, -toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-badge-container > .toolbarbutton-icon { +toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-badge-stack > .toolbarbutton-icon { height: 32px; width: 32px; } @@ -418,10 +431,10 @@ toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-it .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon, .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon, -.panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container, +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack, .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon, .customization-palette .toolbarbutton-1 > .toolbarbutton-icon, -.customization-palette .toolbarbutton-1 > .toolbarbutton-badge-container, +.customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack, .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon, .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon, .panel-customization-placeholder-child > .toolbarbutton-icon { @@ -447,8 +460,8 @@ toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-it /* above we treat the container as the icon for the margins, that is so the /* badge itself is positioned correctly. Here we make sure that the icon itself /* has the minimum size we want, but no padding/margin. */ -.panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon, -.customization-palette .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon { +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon, +.customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon { width: 32px; height: 32px; min-width: 32px; @@ -501,6 +514,38 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { display: none; } +#PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status::after { + content: url(chrome://browser/skin/warning.svg); + filter: drop-shadow(0 1px 0 hsla(206, 50%, 10%, .15)); + width: 47px; + padding-top: 1px; + display: block; + text-align: center; + position: relative; + top: 25%; +} + +#PanelUI-update-status[update-status]::after { + content: ""; + width: 14px; + height: 14px; + margin-right: 16.5px; + box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px rgba(0, 0, 0, 0.1) inset, 0px 1px 0px rgba(12, 27, 38, 0.2); + border-radius: 2px; + background-size: contain; + display: -moz-box; +} + +#PanelUI-update-status[update-status="succeeded"]::after { + background-image: url(chrome://browser/skin/update-badge.svg); + background-color: #74BF43; +} + +#PanelUI-update-status[update-status="failed"]::after { + background-image: url(chrome://browser/skin/update-badge-failed.svg); + background-color: #D90000; +} + #PanelUI-fxa-status { display: flex; flex: 1 1 0%; @@ -628,8 +673,8 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { #PanelUI-footer-fxa[fxastatus="migrate-signup"] > #PanelUI-fxa-status > #PanelUI-fxa-label, #PanelUI-footer-fxa[fxastatus="migrate-verify"] > #PanelUI-fxa-status > #PanelUI-fxa-label { - list-style-image: url(chrome://browser/skin/warning16.png); - -moz-image-region: rect(0, 32px, 16px, 16px); + list-style-image: url(chrome://browser/skin/warning.svg); + -moz-image-region: auto; } #PanelUI-customize { @@ -690,7 +735,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-profile-image.svg); + list-style-image: url(chrome://browser/skin/fxa/default-avatar.png) } #PanelUI-customize:hover, @@ -741,16 +786,16 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { } #PanelUI-footer-fxa[fxastatus="error"] { - background-color: rgb(255, 236, 158); - border-top: 1px solid rgb(254, 212, 21); + background-color: hsla(42, 94%, 88%, 1.0); + border-top: 1px solid hsla(42, 94%, 70%, 1.0); } #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover { - background-color: #F9E79A; + background-color: hsla(42, 94%, 85%, 1.0); } #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover:active { - background-color: #ECDB92; + background-color: hsla(42, 94%, 82%, 1.0); box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset; } @@ -1482,6 +1527,10 @@ 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); @@ -1491,12 +1540,6 @@ menuitem[checked="true"].subviewbutton > .menu-iconic-left { list-style-image: url(chrome://browser/skin/syncProgress-horizontalbar@2x.png); } - #PanelUI-footer-fxa[fxastatus="migrate-signup"] > #PanelUI-fxa-status > #PanelUI-fxa-label, - #PanelUI-footer-fxa[fxastatus="migrate-verify"] > #PanelUI-fxa-status > #PanelUI-fxa-label { - list-style-image: url(chrome://browser/skin/warning16@2x.png); - -moz-image-region: rect(0, 64px, 32px, 32px); - } - #PanelUI-customize { list-style-image: url(chrome://browser/skin/menuPanel-customize@2x.png); } diff --git a/arc-firefox-theme/chrome/browser/customizableui/thumburger-inverted.png b/arc-firefox-theme/chrome/browser/customizableui/thumburger-inverted.png new file mode 100755 index 0000000..5bd6385 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/customizableui/thumburger-inverted.png differ diff --git a/arc-firefox-theme/chrome/browser/customizableui/thumburger.png b/arc-firefox-theme/chrome/browser/customizableui/thumburger.png new file mode 100755 index 0000000..bd75b44 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/customizableui/thumburger.png differ diff --git a/arc-firefox-theme/chrome/browser/devedition.css b/arc-firefox-theme/chrome/browser/devedition.css index 44e3228..d1ddeca 100644 --- a/arc-firefox-theme/chrome/browser/devedition.css +++ b/arc-firefox-theme/chrome/browser/devedition.css @@ -6,8 +6,10 @@ :root { --tab-toolbar-navbar-overlap: 0px; + --navbar-tab-toolbar-highlight-overlap: 0px; --space-above-tabbar: 0px; --toolbarbutton-text-shadow: none; + --backbutton-urlbar-overlap: 0px; } :root[devtoolstheme="dark"] { @@ -45,15 +47,10 @@ --toolbarbutton-combined-boxshadow: none; --toolbarbutton-combined-backgroundimage: linear-gradient(#5F6670 0, #5F6670 18px); - /* Identity box */ - --identity-box-chrome-color: #46afe3; - --identity-box-chrome-background-image: linear-gradient(#5F6670 0, #5F6670 100%); - --identity-box-verified-background-image: linear-gradient(#5F6670 0, #5F6670 100%); - --verified-identity-box-backgroundcolor: transparent; - /* Url and search bars */ --url-and-searchbar-background-color: #171B1F; --url-and-searchbar-color: #fff; + --urlbar-separator-color: #5F6670; --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); @@ -65,6 +62,12 @@ --search-button-image: url("chrome://browser/skin/devedition/search.svg#search-icon-inverted"); } +:root[devtoolstheme="dark"] #identity-box { + --identity-box-chrome-color: #46afe3; + --identity-box-verified-background-color: transparent; + --identity-box-selected-background-color: rgba(231,230,230,.2); +} + :root[devtoolstheme="dark"] .searchbar-dropmarker-image { --searchbar-dropmarker-url: url("chrome://browser/skin/devtools/dropmarker.svg"); --searchbar-dropmarker-2x-url: url("chrome://browser/skin/devtools/dropmarker.svg"); @@ -229,11 +232,21 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper { -moz-margin-start: 0; } -/* Make the white notication box stick out less. */ +/* Swap out the white arrow with a dark one for the dark theme */ +:root[devtoolstheme="dark"] #notification-popup-box { + border-image: url("chrome://browser/skin/devedition/urlbar-arrow.png") 0 8 0 0 fill; +} + +@media (min-resolution: 1.1dppx) { + :root[devtoolstheme="dark"] #notification-popup-box { + border-image: url("chrome://browser/skin/devedition/urlbar-arrow@2x.png") 0 16 0 0 fill; + } +} + +/* The (white) notification box background color should match the theme */ #notification-popup-box { border-radius: 0; - border: none; - background: transparent; + background-color: var(--url-and-searchbar-background-color); } /* Nav bar specific stuff */ @@ -281,11 +294,6 @@ searchbar:not([oneoffui]) .search-go-button { border-color: transparent; } -.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]), -.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) { - margin-bottom: 0; -} - .tabbrowser-tab { /* We normally rely on other tab elements for pointer events, but this theme hides those so we need it set here instead */ diff --git a/arc-firefox-theme/chrome/browser/devedition/urlbar-arrow.png b/arc-firefox-theme/chrome/browser/devedition/urlbar-arrow.png new file mode 100644 index 0000000..c14afc7 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devedition/urlbar-arrow.png differ diff --git a/arc-firefox-theme/chrome/browser/devedition/urlbar-arrow@2x.png b/arc-firefox-theme/chrome/browser/devedition/urlbar-arrow@2x.png new file mode 100644 index 0000000..e6867a4 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devedition/urlbar-arrow@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/canvasdebugger.css b/arc-firefox-theme/chrome/browser/devtools/canvasdebugger.css index 69e847c..a749260 100644 --- a/arc-firefox-theme/chrome/browser/devtools/canvasdebugger.css +++ b/arc-firefox-theme/chrome/browser/devtools/canvasdebugger.css @@ -1,7 +1,3 @@ -/* 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/. */ - /* 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/. */ diff --git a/arc-firefox-theme/chrome/browser/devtools/computedview.css b/arc-firefox-theme/chrome/browser/devtools/computedview.css index f8b0d62..f770681 100644 --- a/arc-firefox-theme/chrome/browser/devtools/computedview.css +++ b/arc-firefox-theme/chrome/browser/devtools/computedview.css @@ -124,11 +124,6 @@ body { border-bottom-width: 1px; } -/* This rule is necessary because Templater.jsm breaks LTR TDs in RTL docs */ -.rule-text { - direction: ltr; -} - .matched { text-decoration: line-through; } diff --git a/arc-firefox-theme/chrome/browser/devtools/dark-theme.css b/arc-firefox-theme/chrome/browser/devtools/dark-theme.css index bfc0fa1..53a868f 100644 --- a/arc-firefox-theme/chrome/browser/devtools/dark-theme.css +++ b/arc-firefox-theme/chrome/browser/devtools/dark-theme.css @@ -138,7 +138,7 @@ .cm-s-mozilla .cm-unused-line { text-decoration: line-through; - text-decoration-color: #5f88b0; + text-decoration-color: #0072ab; } .cm-s-mozilla .cm-executed-line { @@ -953,73 +953,57 @@ div.CodeMirror span.eval-text { text-shadow: none; } -.devtools-sidebar-tabs tabs > tab:first-child { - -moz-border-start-width: 0; +.devtools-sidebar-tabs tabs > tab { + border-image: linear-gradient(transparent 15%, var(--theme-splitter-color) 15%, var(--theme-splitter-color) 85%, transparent 85%) 1 1; } -.theme-dark .devtools-sidebar-tabs tabs > tab { - border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; +.devtools-sidebar-tabs tabs > tab[selected], +.devtools-sidebar-tabs tabs > tab[selected] + tab { + border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1; +} + +.devtools-sidebar-tabs tabs > tab:first-child { + -moz-border-start-width: 0; } .theme-dark .devtools-sidebar-tabs tabs > tab:hover { background: hsla(206,37%,4%,.2); - border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; } .theme-dark .devtools-sidebar-tabs tabs > tab:hover:active { background: hsla(206,37%,4%,.4); - border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; -} - -.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab { - border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; } .theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover { background: hsla(206,37%,4%,.2); - border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; } .theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover:active { background: hsla(206,37%,4%,.4); - border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; } .theme-dark .devtools-sidebar-tabs tabs > tab[selected], .theme-dark .devtools-sidebar-tabs tabs > tab[selected]:hover:active { color: var(--theme-selection-color); background: #1d4f73; - border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; -} - -.theme-light .devtools-sidebar-tabs tabs > tab { - border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; } .theme-light .devtools-sidebar-tabs tabs > tab:hover { background: #ddd; - border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; } .theme-light .devtools-sidebar-tabs tabs > tab:hover:active { background: #ddd; - border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; -} - -.theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab { - border-image: linear-gradient(#aaa, #aaa); } .theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab:hover { background: #ddd; - border-image: linear-gradient(#aaa, #aaa); } .theme-light .devtools-sidebar-tabs tabs > tab[selected], .theme-light .devtools-sidebar-tabs tabs > tab[selected]:hover:active { color: var(--theme-selection-color); background: #4c9ed9; - border-image: linear-gradient(#aaa, #aaa); } /* Toolbox - moved from toolbox.css. diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger.css b/arc-firefox-theme/chrome/browser/devtools/debugger.css index fb7be09..97eb3b0 100644 --- a/arc-firefox-theme/chrome/browser/devtools/debugger.css +++ b/arc-firefox-theme/chrome/browser/devtools/debugger.css @@ -1,7 +1,3 @@ -/* 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/. */ - /* vim:set ts=2 sw=2 sts=2 et: */ /* 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 @@ -96,6 +92,10 @@ } } +#toggle-promise-debugger { + /* TODO Bug 1186119: Add a toggle promise debugger image */ +} + #sources-toolbar .devtools-toolbarbutton:not([label]) { -moz-image-region: rect(0px,16px,16px,0px); } diff --git a/arc-firefox-theme/chrome/browser/devtools/filetype-dir-close.svg b/arc-firefox-theme/chrome/browser/devtools/filetype-dir-close.svg index fa893f4..ae6f221 100644 --- a/arc-firefox-theme/chrome/browser/devtools/filetype-dir-close.svg +++ b/arc-firefox-theme/chrome/browser/devtools/filetype-dir-close.svg @@ -2,6 +2,6 @@ - + diff --git a/arc-firefox-theme/chrome/browser/devtools/filetype-dir-open.svg b/arc-firefox-theme/chrome/browser/devtools/filetype-dir-open.svg index 1faebe4..c7fafc2 100644 --- a/arc-firefox-theme/chrome/browser/devtools/filetype-dir-open.svg +++ b/arc-firefox-theme/chrome/browser/devtools/filetype-dir-open.svg @@ -2,6 +2,6 @@ - + diff --git a/arc-firefox-theme/chrome/browser/devtools/filetype-globe.svg b/arc-firefox-theme/chrome/browser/devtools/filetype-globe.svg index bf1fe2d..a5580b4 100644 --- a/arc-firefox-theme/chrome/browser/devtools/filetype-globe.svg +++ b/arc-firefox-theme/chrome/browser/devtools/filetype-globe.svg @@ -2,5 +2,5 @@ - 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/. --> - + diff --git a/arc-firefox-theme/chrome/browser/devtools/filetype-store.svg b/arc-firefox-theme/chrome/browser/devtools/filetype-store.svg index 01d3625..c85c560 100644 --- a/arc-firefox-theme/chrome/browser/devtools/filetype-store.svg +++ b/arc-firefox-theme/chrome/browser/devtools/filetype-store.svg @@ -1,7 +1,7 @@ - + diff --git a/arc-firefox-theme/chrome/browser/devtools/filters.svg b/arc-firefox-theme/chrome/browser/devtools/filters.svg index 1f51d32..700fdbf 100644 --- a/arc-firefox-theme/chrome/browser/devtools/filters.svg +++ b/arc-firefox-theme/chrome/browser/devtools/filters.svg @@ -3,20 +3,14 @@ - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> - - - - - - - - - - - - - - + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/light-theme.css b/arc-firefox-theme/chrome/browser/devtools/light-theme.css index ea8b1fe..92515ff 100644 --- a/arc-firefox-theme/chrome/browser/devtools/light-theme.css +++ b/arc-firefox-theme/chrome/browser/devtools/light-theme.css @@ -28,7 +28,7 @@ --theme-highlight-green: #2cbb0f; --theme-highlight-blue: #0088cc; - --theme-highlight-bluegrey: #5f88b0; + --theme-highlight-bluegrey: #0072ab; --theme-highlight-purple: #5b5fff; --theme-highlight-lightorange: #d97e00; --theme-highlight-orange: #f13c00; @@ -951,73 +951,57 @@ div.CodeMirror span.eval-text { text-shadow: none; } -.devtools-sidebar-tabs tabs > tab:first-child { - -moz-border-start-width: 0; +.devtools-sidebar-tabs tabs > tab { + border-image: linear-gradient(transparent 15%, var(--theme-splitter-color) 15%, var(--theme-splitter-color) 85%, transparent 85%) 1 1; } -.theme-dark .devtools-sidebar-tabs tabs > tab { - border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; +.devtools-sidebar-tabs tabs > tab[selected], +.devtools-sidebar-tabs tabs > tab[selected] + tab { + border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1; +} + +.devtools-sidebar-tabs tabs > tab:first-child { + -moz-border-start-width: 0; } .theme-dark .devtools-sidebar-tabs tabs > tab:hover { background: hsla(206,37%,4%,.2); - border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; } .theme-dark .devtools-sidebar-tabs tabs > tab:hover:active { background: hsla(206,37%,4%,.4); - border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; -} - -.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab { - border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; } .theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover { background: hsla(206,37%,4%,.2); - border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; } .theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover:active { background: hsla(206,37%,4%,.4); - border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; } .theme-dark .devtools-sidebar-tabs tabs > tab[selected], .theme-dark .devtools-sidebar-tabs tabs > tab[selected]:hover:active { color: var(--theme-selection-color); background: #1d4f73; - border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; -} - -.theme-light .devtools-sidebar-tabs tabs > tab { - border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; } .theme-light .devtools-sidebar-tabs tabs > tab:hover { background: #ddd; - border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; } .theme-light .devtools-sidebar-tabs tabs > tab:hover:active { background: #ddd; - border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; -} - -.theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab { - border-image: linear-gradient(#aaa, #aaa); } .theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab:hover { background: #ddd; - border-image: linear-gradient(#aaa, #aaa); } .theme-light .devtools-sidebar-tabs tabs > tab[selected], .theme-light .devtools-sidebar-tabs tabs > tab[selected]:hover:active { color: var(--theme-selection-color); background: #4c9ed9; - border-image: linear-gradient(#aaa, #aaa); } /* Toolbox - moved from toolbox.css. diff --git a/arc-firefox-theme/chrome/browser/devtools/netmonitor.css b/arc-firefox-theme/chrome/browser/devtools/netmonitor.css index 92f2efc..9448a39 100644 --- a/arc-firefox-theme/chrome/browser/devtools/netmonitor.css +++ b/arc-firefox-theme/chrome/browser/devtools/netmonitor.css @@ -143,31 +143,28 @@ } .requests-security-state-icon { + width: 16px; + height: 16px; -moz-margin-end: 4px; - -moz-image-region:rect(0px, 16px, 16px, 0px); -} - -.requests-security-state-icon:hover { - -moz-image-region: rect(0px, 32px, 16px, 16px); } .security-state-insecure { - list-style-image: url(chrome://browser/skin/identity-icons-generic.png); + list-style-image: url(chrome://browser/skin/identity-not-secure.svg); } .security-state-secure { cursor: pointer; - list-style-image: url(chrome://browser/skin/identity-icons-https.png); + list-style-image: url(chrome://browser/skin/identity-secure.svg); } .security-state-weak { cursor: pointer; - list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png); + list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg); } .security-state-broken { cursor: pointer; - list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-active.png); + list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg); } .requests-menu-type { diff --git a/arc-firefox-theme/chrome/browser/devtools/performance.css b/arc-firefox-theme/chrome/browser/devtools/performance.css index 1187fd8..8eafa36 100644 --- a/arc-firefox-theme/chrome/browser/devtools/performance.css +++ b/arc-firefox-theme/chrome/browser/devtools/performance.css @@ -1,7 +1,3 @@ -/* 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/. */ - /* vim:set ts=2 sw=2 sts=2 et: */ /* 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, @@ -225,10 +221,10 @@ width: 4.5vw; } -.call-tree-header[type="allocations"], -.call-tree-cell[type="allocations"], -.call-tree-header[type="self-allocations"], -.call-tree-cell[type="self-allocations"] { +.call-tree-header[type="count"], +.call-tree-cell[type="count"], +.call-tree-header[type="self-count"], +.call-tree-cell[type="self-count"] { width: 9vw; } diff --git a/arc-firefox-theme/chrome/browser/devtools/promisedebugger.css b/arc-firefox-theme/chrome/browser/devtools/promisedebugger.css new file mode 100644 index 0000000..e003224 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/promisedebugger.css @@ -0,0 +1,3 @@ +/* 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/. */ diff --git a/arc-firefox-theme/chrome/browser/devtools/ruleview.css b/arc-firefox-theme/chrome/browser/devtools/ruleview.css index c38224c..8fad666 100644 --- a/arc-firefox-theme/chrome/browser/devtools/ruleview.css +++ b/arc-firefox-theme/chrome/browser/devtools/ruleview.css @@ -243,14 +243,28 @@ border-bottom-color: hsl(0,0%,50%); } -.ruleview-selector { +.ruleview-selectorcontainer { word-wrap: break-word; + cursor: text; } .ruleview-selector-separator, .ruleview-selector-unmatched { color: #888; } +.ruleview-selector-matched > .ruleview-selector-attribute { + /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */ +} + +.ruleview-selector-matched > .ruleview-selector-pseudo-class { + /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */ +} + +.ruleview-selector-matched > .ruleview-selector-pseudo-class-lock { + font-weight: bold; + color: var(--theme-highlight-orange); +} + .ruleview-selectorhighlighter { background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0; padding-left: 16px; diff --git a/arc-firefox-theme/chrome/browser/devtools/scratchpad.css b/arc-firefox-theme/chrome/browser/devtools/scratchpad.css index 96d6f70..4c8a5d1 100644 --- a/arc-firefox-theme/chrome/browser/devtools/scratchpad.css +++ b/arc-firefox-theme/chrome/browser/devtools/scratchpad.css @@ -1,7 +1,3 @@ -/* 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/. */ - #scratchpad-sidebar > tabs { height: 0; diff --git a/arc-firefox-theme/chrome/browser/devtools/shadereditor.css b/arc-firefox-theme/chrome/browser/devtools/shadereditor.css index c63a4c6..9ba9ff8 100644 --- a/arc-firefox-theme/chrome/browser/devtools/shadereditor.css +++ b/arc-firefox-theme/chrome/browser/devtools/shadereditor.css @@ -1,7 +1,3 @@ -/* 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/. */ - /* 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/. */ diff --git a/arc-firefox-theme/chrome/browser/devtools/splitview.css b/arc-firefox-theme/chrome/browser/devtools/splitview.css index 9710c38..902fedb 100644 --- a/arc-firefox-theme/chrome/browser/devtools/splitview.css +++ b/arc-firefox-theme/chrome/browser/devtools/splitview.css @@ -133,20 +133,3 @@ min-width: 48px; min-height: 0; } - - -/* Resizers */ - -.splitview-portrait-resizer { - -moz-appearance: none; - background: linear-gradient(black 1px, rgba(255,255,255,0.2) 1px), - linear-gradient(hsl(210,11%,36%), hsl(210,11%,18%)); - height: 12px; - background-size: 10px 2px, 100% 12px; - background-clip: content-box, border-box; - background-repeat: repeat-y, no-repeat; - background-position: center center; - padding: 2px 0; - border-top: 1px solid hsla(210,8%,5%,.5); - border-bottom: 1px solid hsla(210,8%,5%,.5); -} diff --git a/arc-firefox-theme/chrome/browser/devtools/storage.css b/arc-firefox-theme/chrome/browser/devtools/storage.css index 5f6d78e..a5a897e 100644 --- a/arc-firefox-theme/chrome/browser/devtools/storage.css +++ b/arc-firefox-theme/chrome/browser/devtools/storage.css @@ -10,8 +10,8 @@ overflow: auto; } -.theme-dark #storage-tree { - background: #343c45; /* Toolbars */ +#storage-tree { + background: var(--theme-sidebar-background); } #storage-tree .tree-widget-item[type="store"]:after { diff --git a/arc-firefox-theme/chrome/browser/devtools/webaudioeditor.css b/arc-firefox-theme/chrome/browser/devtools/webaudioeditor.css index 11439a6..0d66638 100644 --- a/arc-firefox-theme/chrome/browser/devtools/webaudioeditor.css +++ b/arc-firefox-theme/chrome/browser/devtools/webaudioeditor.css @@ -1,7 +1,3 @@ -/* 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/. */ - /* 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/. */ diff --git a/arc-firefox-theme/chrome/browser/devtools/widgets.css b/arc-firefox-theme/chrome/browser/devtools/widgets.css index 17a96ad..18a6757 100644 --- a/arc-firefox-theme/chrome/browser/devtools/widgets.css +++ b/arc-firefox-theme/chrome/browser/devtools/widgets.css @@ -7,6 +7,14 @@ * 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/. */ +.theme-dark { + --table-splitter-color: rgba(255,255,255,0.15); + --table-zebra-background: rgba(255,255,255,0.05); +} +.theme-light { + --table-splitter-color: rgba(0,0,0,0.15); + --table-zebra-background: rgba(0,0,0,0.05); +} /* Generic pane helpers */ @@ -1199,43 +1207,16 @@ overflow: auto; } -.theme-light .table-widget-body { - background: var(--theme-sidebar-background); -} - -.theme-dark .table-widget-body, -.theme-dark .table-widget-empty-text { - background-color: var(--theme-toolbar-background); -} - -.theme-dark .table-widget-body:-moz-locale-dir(ltr) { - box-shadow: inset -1px 0 0 #000; -} - -.theme-dark .table-widget-body:-moz-locale-dir(rtl) { - box-shadow: inset 1px 0 0 #000; -} - -.table-widget-body:-moz-locale-dir(ltr) { - box-shadow: inset -1px 0 0 #aaa; -} - -.table-widget-body:-moz-locale-dir(rtl) { - box-shadow: inset 1px 0 0 #aaa; +.table-widget-body, +.table-widget-empty-text { + background-color: var(--theme-body-background); } /* Column Headers */ -.theme-dark .table-widget-column-header, -.theme-dark .table-widget-cell { - -moz-border-end: 1px solid rgba(0,0,0,0.2); - box-shadow: inset 1px 0 0 rgba(128,128,128,0.15); -} - -.theme-light .table-widget-column-header, -.theme-light .table-widget-cell { - -moz-border-end: 1px solid rgba(128,128,128,0.25); - box-shadow: inset 1px 0 0 transparent; +.table-widget-column-header, +.table-widget-cell { + -moz-border-end: 1px solid var(--table-splitter-color) !important; } /* Table widget column header colors are taken from netmonitor.inc.css to match @@ -1246,10 +1227,8 @@ background: rgba(0,0,0,0); position: sticky; top: 0; - min-height: 32px; width: 100%; - border: none; - padding: 8px 0 0 !important; + padding: 5px 0 0 !important; color: inherit; text-align: center; font-weight: inherit !important; @@ -1257,27 +1236,29 @@ } .table-widget-column-header:hover { - background: rgba(0,0,0,0.10); + background-image: linear-gradient(rgba(0,0,0,0.10), rgba(0,0,0,0.10)); } .table-widget-column-header:hover:active { - background: rgba(0,0,0,0.25); + background-image: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25)); } .table-widget-column-header:not(:active)[sorted] { - background: rgba(0,0,0,0.15); + background-image: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15)); } .table-widget-column-header:not(:active)[sorted=ascending] { - background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3)); - background-size: 100% 1px; - background-repeat: no-repeat; + background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3)), + linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15)); + background-size: 100% 1px, auto; + background-repeat: no-repeat, repeat; } .table-widget-column-header:not(:active)[sorted=descending] { - background-image: radial-gradient(farthest-side at center bottom, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3)); - background-size: 100% 1px; - background-repeat: no-repeat; + background-image: radial-gradient(farthest-side at center bottom, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3)), + linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15)); + background-size: 100% 1px, auto; + background-repeat: no-repeat, repeat; background-position: bottom; } @@ -1285,44 +1266,22 @@ .table-widget-cell { width: 100%; - margin: -1px 0 !important; padding: 3px 4px; background-clip: padding-box; min-width: 100px; -moz-user-focus: normal; -} - -.theme-dark .table-widget-cell { - border-top: 1px solid rgba(0,0,0,0.2); - border-bottom: 1px solid rgba(128,128,128,0.15); - color: var(--theme-selection-color); -} - -.theme-dark:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected), -.theme-dark .table-widget-cell:not(.theme-selected)[odd] { - background: rgba(255,255,255,0.05); -} - -.theme-dark .table-widget-cell:last-of-type { - box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2); -} - -.theme-light .table-widget-cell { - border-top: 1px solid rgba(128,128,128,0.15); + margin-bottom: -1px !important; border-bottom: 1px solid transparent; -} - -.theme-light .table-widget-cell:not(.theme-selected) { color: var(--theme-body-color); } -.theme-light:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected), -.theme-light .table-widget-cell:not(.theme-selected)[odd] { - background: rgba(128,128,128,0.05); +.table-widget-cell:last-child { + border-bottom: 1px solid var(--table-splitter-color); } -.theme-light .table-widget-cell:last-of-type { - box-shadow: inset 0 -1px 0 rgba(128,128,128,0.15); +:root:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected), +.table-widget-cell:not(.theme-selected)[odd] { + background: var(--table-zebra-background); } .table-widget-cell.flash-out { @@ -1344,10 +1303,6 @@ margin-top: -20px !important; } -.theme-light .table-widget-empty-text { - background: #F7F7F7; /* Background-Sidebar */ -} - .table-widget-body:empty + .table-widget-empty-text:not([value=""]), .table-widget-body[empty] + .table-widget-empty-text:not([value=""]) { display: block; @@ -1399,11 +1354,11 @@ } .tree-widget-item[level="1"] { - font-weight: 800; + font-weight: 700; } /* Twisties */ -.tree-widget-item:before { +.tree-widget-item::before { content: ""; width: 14px; height: 14px; @@ -1416,24 +1371,24 @@ background-position: -28px -14px; } -.tree-widget-item:-moz-locale-dir(rtl):before { +.tree-widget-item:-moz-locale-dir(rtl)::before { float: right; transform: scaleX(-1); } -.theme-light .tree-widget-item:before { +.theme-light .tree-widget-item:not(.theme-selected)::before { background-position: 0 -14px; } -.tree-widget-item[empty]:before { +.tree-widget-item[empty]::before { background: transparent; } -.tree-widget-item[expanded]:before { +.tree-widget-item[expanded]::before { background-position: -42px -14px; } -.theme-light .tree-widget-item[expanded]:before { +.theme-light .tree-widget-item:not(.theme-selected)[expanded]:before { background-position: -14px -14px; } @@ -1511,7 +1466,7 @@ /* Custom icons for certain tree items indicating the type of the item */ -.tree-widget-item[type]:after { +.tree-widget-item[type]::after { content: ""; float: left; width: 16px; @@ -1519,31 +1474,36 @@ -moz-margin-end: 4px; background-repeat: no-repeat; background-size: 20px auto; - filter: url('filters.svg#invert'); background-position: 0 0; background-size: auto 20px; + opacity: 0.75; +} + +.tree-widget-item.theme-selected[type]::after { + opacity: 1; } -.tree-widget-item:-moz-locale-dir(rtl):after { +.tree-widget-item:-moz-locale-dir(rtl)::after { float: right; } -.theme-dark .tree-widget-item[type]:after { - filter: url('filters.svg#invert-white'); +.theme-light .tree-widget-item.theme-selected[type]::after, +.theme-dark .tree-widget-item[type]::after { + filter: invert(1); } -.tree-widget-item[type="dir"]:after { +.tree-widget-item[type="dir"]::after { background-image: url(chrome://browser/skin/devtools/filetype-dir-close.svg); background-position: 2px 0; background-size: auto 16px; width: 20px; } -.tree-widget-item[type="dir"][expanded]:not([empty]):after { +.tree-widget-item[type="dir"][expanded]:not([empty])::after { background-image: url(chrome://browser/skin/devtools/filetype-dir-open.svg); } -.tree-widget-item[type="url"]:after { +.tree-widget-item[type="url"]::after { background-image: url(chrome://browser/skin/devtools/filetype-globe.svg); background-size: auto 18px; width: 18px; diff --git a/arc-firefox-theme/chrome/browser/feeds/subscribe.css b/arc-firefox-theme/chrome/browser/feeds/subscribe.css index 4cd70fa..03b534a 100644 --- a/arc-firefox-theme/chrome/browser/feeds/subscribe.css +++ b/arc-firefox-theme/chrome/browser/feeds/subscribe.css @@ -20,6 +20,7 @@ html { border-radius: 10px; margin: -4em auto 0 auto; background-color: InfoBackground; + -moz-appearance: -moz-gtk-info-bar; } #feedHeader { @@ -29,19 +30,19 @@ html { -moz-margin-end: 1em; -moz-padding-start: 2.9em; font-size: 110%; - color: InfoText; + color: -moz-gtk-info-bar-text; } .feedBackground { - background: url("chrome://browser/skin/feeds/feedIcon.png") 0% 10% no-repeat InfoBackground; + background: url("chrome://browser/skin/feeds/feedIcon.png") 0% 10% no-repeat; } .videoPodcastBackground { - background: url("chrome://browser/skin/feeds/videoFeedIcon.png") 0% 10% no-repeat InfoBackground; + background: url("chrome://browser/skin/feeds/videoFeedIcon.png") 0% 10% no-repeat; } .audioPodcastBackground { - background: url("chrome://browser/skin/feeds/audioFeedIcon.png") 0% 10% no-repeat InfoBackground; + background: url("chrome://browser/skin/feeds/audioFeedIcon.png") 0% 10% no-repeat; } #feedHeader[dir="rtl"] { diff --git a/arc-firefox-theme/chrome/browser/fxa/android.png b/arc-firefox-theme/chrome/browser/fxa/android.png new file mode 100644 index 0000000..bb1ada8 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/fxa/android.png differ diff --git a/arc-firefox-theme/chrome/browser/fxa/android@2x.png b/arc-firefox-theme/chrome/browser/fxa/android@2x.png new file mode 100644 index 0000000..957b907 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/fxa/android@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/fxa/default-avatar.png b/arc-firefox-theme/chrome/browser/fxa/default-avatar.png new file mode 100644 index 0000000..6ed0e7a Binary files /dev/null and b/arc-firefox-theme/chrome/browser/fxa/default-avatar.png differ diff --git a/arc-firefox-theme/chrome/browser/fxa/default-avatar@2x.png b/arc-firefox-theme/chrome/browser/fxa/default-avatar@2x.png new file mode 100644 index 0000000..0bda852 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/fxa/default-avatar@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/fxa/default-profile-image.svg b/arc-firefox-theme/chrome/browser/fxa/default-profile-image.svg deleted file mode 100644 index 2b95431..0000000 --- a/arc-firefox-theme/chrome/browser/fxa/default-profile-image.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/fxa/logo.png b/arc-firefox-theme/chrome/browser/fxa/logo.png new file mode 100644 index 0000000..b54b392 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/fxa/logo.png differ diff --git a/arc-firefox-theme/chrome/browser/fxa/logo@2x.png b/arc-firefox-theme/chrome/browser/fxa/logo@2x.png new file mode 100644 index 0000000..5d25f05 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/fxa/logo@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/fxa/sync-illustration.png b/arc-firefox-theme/chrome/browser/fxa/sync-illustration.png new file mode 100644 index 0000000..c6de26c Binary files /dev/null and b/arc-firefox-theme/chrome/browser/fxa/sync-illustration.png differ diff --git a/arc-firefox-theme/chrome/browser/fxa/sync-illustration@2x.png b/arc-firefox-theme/chrome/browser/fxa/sync-illustration@2x.png new file mode 100644 index 0000000..bc13da3 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/fxa/sync-illustration@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/identity-icons-generic.png b/arc-firefox-theme/chrome/browser/identity-icons-generic.png deleted file mode 100644 index a39e493..0000000 Binary files a/arc-firefox-theme/chrome/browser/identity-icons-generic.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/identity-icons-generic@2x.png b/arc-firefox-theme/chrome/browser/identity-icons-generic@2x.png deleted file mode 100644 index e7c041e..0000000 Binary files a/arc-firefox-theme/chrome/browser/identity-icons-generic@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/identity-icons-https-ev.png b/arc-firefox-theme/chrome/browser/identity-icons-https-ev.png deleted file mode 100644 index d49be13..0000000 Binary files a/arc-firefox-theme/chrome/browser/identity-icons-https-ev.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/identity-icons-https-ev@2x.png b/arc-firefox-theme/chrome/browser/identity-icons-https-ev@2x.png deleted file mode 100644 index 93a615d..0000000 Binary files a/arc-firefox-theme/chrome/browser/identity-icons-https-ev@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/identity-icons-https-mixed-active.png b/arc-firefox-theme/chrome/browser/identity-icons-https-mixed-active.png deleted file mode 100644 index 3c77bc8..0000000 Binary files a/arc-firefox-theme/chrome/browser/identity-icons-https-mixed-active.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/identity-icons-https-mixed-active@2x.png b/arc-firefox-theme/chrome/browser/identity-icons-https-mixed-active@2x.png deleted file mode 100644 index cb3456e..0000000 Binary files a/arc-firefox-theme/chrome/browser/identity-icons-https-mixed-active@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/identity-icons-https-mixed-display.png b/arc-firefox-theme/chrome/browser/identity-icons-https-mixed-display.png deleted file mode 100644 index 09b4e97..0000000 Binary files a/arc-firefox-theme/chrome/browser/identity-icons-https-mixed-display.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/identity-icons-https-mixed-display@2x.png b/arc-firefox-theme/chrome/browser/identity-icons-https-mixed-display@2x.png deleted file mode 100644 index c79694f..0000000 Binary files a/arc-firefox-theme/chrome/browser/identity-icons-https-mixed-display@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/identity-icons-https.png b/arc-firefox-theme/chrome/browser/identity-icons-https.png deleted file mode 100644 index ffd6694..0000000 Binary files a/arc-firefox-theme/chrome/browser/identity-icons-https.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/identity-icons-https@2x.png b/arc-firefox-theme/chrome/browser/identity-icons-https@2x.png deleted file mode 100644 index a4af07b..0000000 Binary files a/arc-firefox-theme/chrome/browser/identity-icons-https@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/identity-mixed-active-blocked.svg b/arc-firefox-theme/chrome/browser/identity-mixed-active-blocked.svg new file mode 100644 index 0000000..8b442ba --- /dev/null +++ b/arc-firefox-theme/chrome/browser/identity-mixed-active-blocked.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/identity-mixed-active-loaded.svg b/arc-firefox-theme/chrome/browser/identity-mixed-active-loaded.svg new file mode 100644 index 0000000..b7191a8 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/identity-mixed-active-loaded.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/identity-mixed-passive-loaded.svg b/arc-firefox-theme/chrome/browser/identity-mixed-passive-loaded.svg new file mode 100644 index 0000000..d1e9dbd --- /dev/null +++ b/arc-firefox-theme/chrome/browser/identity-mixed-passive-loaded.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/identity-not-secure.svg b/arc-firefox-theme/chrome/browser/identity-not-secure.svg new file mode 100644 index 0000000..a57a5af --- /dev/null +++ b/arc-firefox-theme/chrome/browser/identity-not-secure.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/arc-firefox-theme/chrome/browser/identity-secure.svg b/arc-firefox-theme/chrome/browser/identity-secure.svg new file mode 100644 index 0000000..5dad890 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/identity-secure.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/info.svg b/arc-firefox-theme/chrome/browser/info.svg new file mode 100644 index 0000000..f004119 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/info.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/mask.png b/arc-firefox-theme/chrome/browser/mask.png deleted file mode 100644 index f48d176..0000000 Binary files a/arc-firefox-theme/chrome/browser/mask.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/mask@2x.png b/arc-firefox-theme/chrome/browser/mask@2x.png deleted file mode 100644 index e284af0..0000000 Binary files a/arc-firefox-theme/chrome/browser/mask@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/newtab/close.png b/arc-firefox-theme/chrome/browser/newtab/close.png new file mode 100644 index 0000000..ea6ada4 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/newtab/close.png differ diff --git a/arc-firefox-theme/chrome/browser/newtab/newTab.css b/arc-firefox-theme/chrome/browser/newtab/newTab.css index 81042b4..4073cd9 100644 --- a/arc-firefox-theme/chrome/browser/newtab/newTab.css +++ b/arc-firefox-theme/chrome/browser/newtab/newTab.css @@ -12,16 +12,6 @@ background-color: transparent; } -/* SCROLLBOX */ -#newtab-scrollbox:not([page-disabled]) { - color: rgb(0,0,0); - background-color: #f9f9f9; -} - -#newtab-scrollbox:not([page-disabled]) #newtab-margin-bottom { - background: inherit; -} - /* UNDO */ #newtab-undo-container { padding: 4px 3px; @@ -61,8 +51,24 @@ border: none; } -#newtab-undo-close-button:-moz-focusring { - outline: 1px dotted; +#newtab-undo-close-button { + -moz-appearance: none; + padding: 0; + border: none; + height: 16px; + width: 16px; + float: right; + right: 0; + background-image: -moz-image-rect(url(chrome://browser/skin/newtab/close.png), 0, 16, 16, 0); + background-color: transparent; +} + +#newtab-undo-close-button:hover { + background-image: -moz-image-rect(url(chrome://browser/skin/newtab/close.png), 0, 32, 16, 16); +} + +#newtab-undo-close-button:hover:active { + background-image: -moz-image-rect(url(chrome://browser/skin/newtab/close.png), 0, 48, 16, 32); } /* CUSTOMIZE */ @@ -184,7 +190,7 @@ margin-top: 6px; } -.newtab-site[pinned] .newtab-title:-moz-locale-dir(rtl)::before { +.newtab-site[pinned] .newtab-title:-moz-dir(rtl)::before { left: auto; right: 0; } diff --git a/arc-firefox-theme/chrome/browser/preferences/aboutPermissions.css b/arc-firefox-theme/chrome/browser/preferences/aboutPermissions.css index a7eaff1..16d0aee 100644 --- a/arc-firefox-theme/chrome/browser/preferences/aboutPermissions.css +++ b/arc-firefox-theme/chrome/browser/preferences/aboutPermissions.css @@ -112,9 +112,6 @@ .pref-icon[type="plugins"] { list-style-image: url(chrome://mozapps/skin/plugins/pluginGeneric.png); } -.pref-icon[type="fullscreen"] { - list-style-image: url(chrome://global/skin/icons/question-64.png); -} .pref-icon[type="camera"] { list-style-image: url(chrome://global/skin/icons/question-64.png); } 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 28f5fc3..c83e0eb 100644 --- a/arc-firefox-theme/chrome/browser/preferences/in-content/preferences.css +++ b/arc-firefox-theme/chrome/browser/preferences/in-content/preferences.css @@ -194,15 +194,23 @@ treecol { -moz-margin-end: 8px !important; } +/* Privacy pane */ + +#doNotTrackInfo, +#trackingProtectionPBMLearnMore, +#trackingProtectionLearnMore { + -moz-margin-start: 1.5em !important; + margin-top: 0; +} + /* Collapse the non-active vboxes in decks to use only the height the active vbox needs */ #historyPane:not([selectedIndex="1"]) > #historyDontRememberPane, #historyPane:not([selectedIndex="2"]) > #historyCustomPane, #weavePrefsDeck:not([selectedIndex="1"]) > #hasAccount, #weavePrefsDeck:not([selectedIndex="2"]) > #needsUpdate, -#weavePrefsDeck:not([selectedIndex="3"]) > #fxaDeterminingStatus, -#weavePrefsDeck:not([selectedIndex="4"]) > #noFxaAccount, -#weavePrefsDeck:not([selectedIndex="5"]) > #hasFxaAccount, +#weavePrefsDeck:not([selectedIndex="3"]) > #noFxaAccount, +#weavePrefsDeck:not([selectedIndex="4"]) > #hasFxaAccount, #fxaLoginStatus:not([selectedIndex="1"]) > #fxaLoginUnverified, #fxaLoginStatus:not([selectedIndex="2"]) > #fxaLoginRejected { visibility: collapse; @@ -214,28 +222,6 @@ description > html|a { cursor: pointer; } -#fxaProfileImage { - width: 60px; - height: 60px; - border-radius: 50%; - border-width: 5px; - border-color: red; - background-image: url(chrome://browser/skin/fxa/default-profile-image.svg); - background-size: contain; - cursor: pointer; - -moz-margin-end: 15px; -} - -#fxaProfileImage:hover { - border-color: blue; -} - -#noFxaAccount { - /* Overriding the margins from the base preferences.css theme file. - These overrides can be simplified by fixing bug 1027174 */ - margin: 0; -} - #weavePrefsDeck > vbox > label, #weavePrefsDeck > vbox > groupbox, #weavePrefsDeck > vbox > description, @@ -266,16 +252,8 @@ description > html|a { -moz-margin-start: 33px; } -#trackingProtectionImage { - width: 16px; - height: 16px; - list-style-image: url(chrome://browser/skin/bad-content-blocked-16.png); -} - -@media (min-resolution: 2dppx) { - #trackingProtectionImage { - list-style-image: url(chrome://browser/skin/bad-content-blocked-16@2x.png); - } +.text-link { + margin-bottom: 0; } #showUpdateHistory { @@ -392,13 +370,176 @@ description > html|a { * Sync */ +#fxaProfileImage { + max-width: 60px; + border-radius: 50%; + list-style-image: url(chrome://browser/skin/fxa/default-avatar.png); + margin-inline-end: 15px; +} + +#fxaProfileImage.actionable { + cursor: pointer; +} + +#fxaProfileImage.actionable:hover { + box-shadow: 0px 0px 0px 1px #0095DD; +} + +#fxaProfileImage.actionable:hover:active { + box-shadow: 0px 0px 0px 1px #ff9500; +} + +#noFxaAccount { + /* Overriding the margins from the base preferences.css theme file. + These overrides can be simplified by fixing bug 1027174 */ + margin: 0; + padding-top: 15px; +} + +#fxaContentWrapper { + -moz-box-flex: 1; +} + +#noFxaGroup { + -moz-box-flex: 1; + margin: 0; +} + +#fxaContentWrapper { + padding-right: 15px; +} + +#noFxaGroup > vbox, +#fxaGroup { + -moz-box-align: start; +} + +#fxaSyncEngines > vbox:first-child { + margin-right: 80px; +} + +#fxaSyncComputerName { + margin-inline-start: 0px; + -moz-box-flex: 1; +} + +#tosPP-small-ToS { + margin-bottom: 14px; +} + +#noFxaCaption { + font-weight: bold; + margin-bottom: 11px; +} + +.fxaSyncIllustration { + margin-top: 35px; +} + +#syncOptions caption { + margin-bottom: 11px; +} + #fxaDeviceName { - margin: 14px 0px; + margin-bottom: 27.5px; +} + +#noFxaDescription { + margin-bottom: 20px !important; +} + +.separator { + border-bottom: 1px solid var(--in-content-header-border-color); +} + +.fxaAccountBox { + border: 1px solid #D1D2D3; + border-radius: 5px; + padding: 14px 20px 14px 14px; +} + +#signedOutAccountBoxTitle { + margin-inline-start: 6px !important; + font-weight: bold; +} + +.fxaAccountBoxButtons { + margin-bottom: 0 !important; + margin-top: 11px; +} + +.fxaAccountBoxButtons > button { + padding-left: 11px; + padding-right: 11px; } -#fxaSyncComputerName.plain { - background-color: transparent; - opacity: 1; +.fxaSyncIllustration { + width: 231px; + list-style-image: url(chrome://browser/skin/fxa/sync-illustration.png) +} + +#fxaEmailAddress1, +#fxaEmailAddress2, +#fxaEmailAddress3 { + word-break: break-all; +} + +.fxaFirefoxLogo { + list-style-image: url(chrome://browser/skin/fxa/logo.png); + max-width: 64px; + margin-inline-end: 14px; +} + +.fxaMobilePromo { + margin-top: 14px; + margin-bottom: 41px; +} + +#fxaLoginRejectedWarning { + list-style-image: url(chrome://browser/skin/warning.svg); + filter: drop-shadow(0 1px 0 hsla(206, 50%, 10%, .15)); + margin: 4px 8px 0px 0px; +} + +#syncOptions { + margin-bottom: 27.5px; +} + +.androidLogo { + list-style-image: url(chrome://browser/skin/fxa/android.png); + max-width: 24px; + position: relative; + top: 8px; + margin: 0px; + margin-inline-end: 5px; +} + +.androidLink { + margin: 0; +} + +#tosPP-small { + margin-bottom: 20px; +} + +.androidAttribution { + font-size: 12px; + color: #D1D2D3; +} + +@media (min-resolution: 1.1dppx) { + .fxaSyncIllustration { + list-style-image: url(chrome://browser/skin/fxa/sync-illustration@2x.png) + } + .fxaFirefoxLogo { + list-style-image: url(chrome://browser/skin/fxa/logo@2x.png); + } + .androidLogo { + list-style-image: url(chrome://browser/skin/fxa/android@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/attention.png b/arc-firefox-theme/chrome/browser/privatebrowsing/attention.png new file mode 100755 index 0000000..8706928 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/privatebrowsing/attention.png differ diff --git a/arc-firefox-theme/chrome/browser/privatebrowsing/attention@2x.png b/arc-firefox-theme/chrome/browser/privatebrowsing/attention@2x.png new file mode 100755 index 0000000..5b32888 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/privatebrowsing/attention@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/privatebrowsing/check.png b/arc-firefox-theme/chrome/browser/privatebrowsing/check.png new file mode 100755 index 0000000..59ca51b Binary files /dev/null and b/arc-firefox-theme/chrome/browser/privatebrowsing/check.png differ diff --git a/arc-firefox-theme/chrome/browser/privatebrowsing/check@2x.png b/arc-firefox-theme/chrome/browser/privatebrowsing/check@2x.png new file mode 100755 index 0000000..031685c Binary files /dev/null and b/arc-firefox-theme/chrome/browser/privatebrowsing/check@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/privatebrowsing/mask.svg b/arc-firefox-theme/chrome/browser/privatebrowsing/mask.svg new file mode 100755 index 0000000..655445e --- /dev/null +++ b/arc-firefox-theme/chrome/browser/privatebrowsing/mask.svg @@ -0,0 +1,8 @@ + + + + + diff --git a/arc-firefox-theme/chrome/browser/privatebrowsing/shield-page.png b/arc-firefox-theme/chrome/browser/privatebrowsing/shield-page.png new file mode 100755 index 0000000..2ddcf34 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/privatebrowsing/shield-page.png differ diff --git a/arc-firefox-theme/chrome/browser/privatebrowsing/shield-page@2x.png b/arc-firefox-theme/chrome/browser/privatebrowsing/shield-page@2x.png new file mode 100755 index 0000000..72a0b82 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/privatebrowsing/shield-page@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/readinglist/icons.svg b/arc-firefox-theme/chrome/browser/readinglist/icons.svg deleted file mode 100644 index f6bb404..0000000 --- a/arc-firefox-theme/chrome/browser/readinglist/icons.svg +++ /dev/null @@ -1,43 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/readinglist/readinglist-icon.svg b/arc-firefox-theme/chrome/browser/readinglist/readinglist-icon.svg deleted file mode 100644 index 58b18c9..0000000 --- a/arc-firefox-theme/chrome/browser/readinglist/readinglist-icon.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/readinglist/sidebar.css b/arc-firefox-theme/chrome/browser/readinglist/sidebar.css deleted file mode 100644 index 27fc12b..0000000 --- a/arc-firefox-theme/chrome/browser/readinglist/sidebar.css +++ /dev/null @@ -1,148 +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/. */ - - -:root, body { - overflow-x: hidden; -} - -body { - margin: 0; - font: message-box; - color: #333333; - -moz-user-select: none; - overflow: hidden; -} - -#emptyListInfo { - cursor: default; - padding: 3em 1em; - text-align: center; -} - -.item { - display: flex; - flex-flow: row; - cursor: pointer; - padding: 6px; - opacity: 0; - max-height: 0; - transition: opacity 150ms ease-in-out, max-height 150ms ease-in-out 150ms; -} - -.item.active { - background: #FEFEFE; -} - -.item.selected { - background: #FDFDFD; -} - -.item-thumb-container { - min-width: 64px; - max-width: 64px; - min-height: 40px; - max-height: 40px; - border: 1px solid white; - box-shadow: 0px 1px 2px rgba(0,0,0,.35); - margin: 5px; - background-color: #ebebeb; - background-size: contain; - background-repeat: no-repeat; - background-position: center; - background-image: url("chrome://branding/content/silhouette-40.svg"); -} - -.item-thumb-container.preview-available { - background-color: #fff; - background-size: cover; -} - -.item-summary-container { - display: flex; - flex-flow: column; - -moz-padding-start: 4px; - overflow: hidden; - flex-grow: 1; -} - -.item-title-lines { - display: flex; -} - -.item-title { - overflow: hidden; - max-height: 2.8em; - line-height: 1.4; - flex-grow: 1; -} - -.item-domain { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - max-height: 1.4em; - color: #0095DD; -} - -.item:hover .item-domain { - color: #008ACB; -} - -.item:not(:hover):not(.selected) .remove-button { - visibility: hidden; -} - -.remove-button { - padding: 0; - width: 16px; - height: 16px; - min-width: 16px; - min-height: 16px; - background-size: contain; - background-color: transparent; - border-width: 0; -} - -.item.visible { - opacity: 1; - max-height: 80px; - transition: max-height 250ms ease-in-out, opacity 250ms ease-in-out 250ms; -} - -html { - border: 1px solid ThreeDShadow; - background-color: -moz-Field; - color: -moz-FieldText; - box-sizing: border-box; -} - -.item { - -moz-padding-end: 0; -} - -.item.active { - background-color: -moz-cellhighlight; - color: -moz-cellhighlighttext; -} - -.item-title { - margin: 1px 0 0; -} - -.item-title, .item-domain { - -moz-margin-end: 6px; -} - -.remove-button { - background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 16, 16, 0); -} - -.remove-button:hover { - background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 32, 16, 16); -} - -.remove-button:hover:active { - background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 48, 16, 32); -} diff --git a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss index c0eac2f..f69d2b8 100644 --- a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss +++ b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss @@ -89,7 +89,8 @@ $darker_asset_path_2: if($darker=='true', 'dark', $asset_path); #TabsToolbar:not([collapsed="true"]) + #nav-bar { border-top: 1px solid $header_border !important; background-clip: padding-box; - margin-top: -1px; /* Move up into the TabsToolbar for the inner highlight at the top of the nav-bar */ + /* Move up into the TabsToolbar for the inner highlight at the top of the nav-bar */ + margin-top: calc(-1 * var(--navbar-tab-toolbar-highlight-overlap)); /* Position the toolbar above the bottom of background tabs */ position: relative; z-index: 1; @@ -132,7 +133,7 @@ $darker_asset_path_2: if($darker=='true', 'dark', $asset_path); /* Places toolbar */ toolbarbutton.bookmark-item:not(.subviewbutton), #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder { - margin: 1px; + margin: 0; padding: 2px 3px; } @@ -353,7 +354,7 @@ menuitem.bookmark-item { } /* Stock icons for the menu bar items */ -menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { +menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip):not([endimage]) { -moz-binding: url("chrome://global/content/bindings/menu.xml#menuitem-iconic"); } @@ -548,11 +549,6 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { list-style-image: url("chrome://browser/skin/places/unsortedBookmarks.png"); } -#menu_readingList, -#BMB_readingList { - list-style-image: url("chrome://browser/skin/readinglist/readinglist-icon.svg"); -} - #panelMenu_pocket, #menu_pocket, #BMB_pocket { @@ -614,7 +610,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { .findbar-button > .toolbarbutton-text, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-badge-container, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-badge-stack, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-icon { -moz-margin-end: 0; padding: 2px 6px; @@ -625,14 +621,14 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { } :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-badge-container, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-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, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon { padding: 3px 7px; } /* Help SDK icons fit: */ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon, -toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-container > .toolbarbutton-icon { +toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon { width: 16px; } @@ -656,7 +652,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open]:not([disabled=true]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):not([open]):hover > .toolbarbutton-menubutton-button > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):not([open]):hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-badge-container, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-badge-stack, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-icon { background: var(--toolbarbutton-hover-background); border-width: 1px; @@ -684,7 +680,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([open="true"]) > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open="true"]) > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-container, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon { background: var(--toolbarbutton-active-background); box-shadow: var(--toolbarbutton-active-boxshadow); @@ -696,7 +692,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open="true"]) > .toolbarbutton-icon, #TabsToolbar .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon, -#TabsToolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-container, +#TabsToolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack, #TabsToolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon { background: none; @include button(header-active); @@ -1003,6 +999,15 @@ toolbar[brighttext] #sync-button[status="active"] { -moz-image-region: rect(0, 486px, 18px, 468px); } +#PanelUI-menu-button.thumburger { + list-style-image: url("chrome://browser/skin/customizableui/thumburger.png") !important; + -moz-image-region: auto !important; +} + +toolbar[brighttext] #PanelUI-menu-button.thumburger { + list-style-image: url("chrome://browser/skin/customizableui/thumburger-inverted.png") !important; +} + #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button { -moz-image-region: rect(0, 504px, 18px, 486px); } @@ -1059,37 +1064,37 @@ toolbar[brighttext] #sync-button[status="active"] { -moz-image-region: rect(0, 720px, 18px, 702px); } -#loop-button > .toolbarbutton-badge-container { +#loop-button { list-style-image: url(chrome://browser/skin/loop/toolbar.png); -moz-image-region: rect(0, 18px, 18px, 0); } -toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { +toolbar[brighttext] #loop-button { list-style-image: url(chrome://browser/skin/loop/toolbar-inverted.png); } -#loop-button[state="disabled"] > .toolbarbutton-badge-container, -#loop-button[disabled="true"] > .toolbarbutton-badge-container { +#loop-button[state="disabled"], +#loop-button[disabled="true"] { -moz-image-region: rect(0, 36px, 18px, 18px); } -#loop-button:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container { +#loop-button:not([disabled="true"])[state="error"] { -moz-image-region: rect(0, 54px, 18px, 36px); } -#loop-button:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container { +#loop-button:not([disabled="true"])[state="action"] { -moz-image-region: rect(0, 72px, 18px, 54px); } -#loop-button:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-container { +#loop-button:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]) { -moz-image-region: rect(0, 90px, 18px, 72px); } -#loop-button:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container { +#loop-button:not([disabled="true"])[state="active"] { -moz-image-region: rect(0, 108px, 18px, 90px); } -#loop-button:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-container { +#loop-button:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]) { -moz-image-region: rect(0, 126px, 18px, 108px); } @@ -1298,39 +1303,39 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { -moz-image-region: rect(0, 832px, 32px, 800px); } - #loop-button[cui-areatype="menu-panel"] > .toolbarbutton-badge-container, - toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #loop-button { list-style-image: url(chrome://browser/skin/loop/menuPanel.png); -moz-image-region: rect(0, 32px, 32px, 0); } /* Make sure that the state icons are not shown in the customization palette. */ - toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container { + toolbarpaletteitem[place="palette"] > #loop-button { -moz-image-region: rect(0, 32px, 32px, 0) !important; } - #loop-button[cui-areatype="menu-panel"][state="disabled"] > .toolbarbutton-badge-container, - #loop-button[cui-areatype="menu-panel"][disabled="true"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"][state="disabled"], + #loop-button[cui-areatype="menu-panel"][disabled="true"] { -moz-image-region: rect(0, 64px, 32px, 32px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] { -moz-image-region: rect(0, 96px, 32px, 64px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] { -moz-image-region: rect(0, 128px, 32px, 96px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]) { -moz-image-region: rect(0, 160px, 32px, 128px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] { -moz-image-region: rect(0, 192px, 32px, 160px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]) { -moz-image-region: rect(0, 224px, 32px, 192px); } @@ -1482,39 +1487,39 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { -moz-image-region: rect(64px, 1984px, 128px, 1920px); } - #loop-button[cui-areatype="menu-panel"] > .toolbarbutton-badge-container, - toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #loop-button { list-style-image: url(chrome://browser/skin/loop/menuPanel@2x.png); -moz-image-region: rect(0, 64px, 64px, 0); } /* Make sure that the state icons are not shown in the customization palette. */ - toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container { + toolbarpaletteitem[place="palette"] > #loop-button { -moz-image-region: rect(0, 64px, 64px, 0) !important; } - #loop-button[cui-areatype="menu-panel"][state="disabled"] > .toolbarbutton-badge-container, - #loop-button[cui-areatype="menu-panel"][disabled="true"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"][state="disabled"], + #loop-button[cui-areatype="menu-panel"][disabled="true"] { -moz-image-region: rect(0, 128px, 64px, 64px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] { -moz-image-region: rect(0, 192px, 64px, 128px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] { -moz-image-region: rect(0, 256px, 64px, 192px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]) { -moz-image-region: rect(0, 320px, 64px, 256px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] { -moz-image-region: rect(0, 384px, 64px, 320px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]) { -moz-image-region: rect(0, 448px, 64px, 384px); } @@ -1753,6 +1758,29 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { // padding: 0 3px; //} +#urlbar-search-footer { + border-top: 1px solid hsla(210,4%,10%,.14); + background-color: hsla(210,4%,10%,.07); +} + +#urlbar-search-settings { + -moz-appearance: none; + -moz-user-focus: ignore; + color: inherit; + margin: 0; + border: 0; + padding: 8px 20px; + background: transparent; +} + +#urlbar-search-settings:hover { + background-color: hsla(210,4%,10%,.07); +} + +#urlbar-search-settings:hover:active { + background-color: hsla(210,4%,10%,.12); +} + #urlbar-search-splitter { -moz-appearance: none; width: 8px; @@ -1777,70 +1805,80 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { color: GrayText; } -#search-container { - min-width: calc(54px + 11ch); +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] { + border-bottom: 1px solid hsla(210, 4%, 10%, 0.14); + background-color: hsla(210, 4%, 10%, 0.07); + padding: 6px 0; + -moz-padding-start: 44px; + -moz-padding-end: 6px; + background-image: url("chrome://browser/skin/info.svg"); + background-clip: padding-box; + background-position: 20px center; + background-repeat: no-repeat; + background-size: 16px 16px; } -/* identity box */ - -#identity-box { - padding: 1px; - font-size: .9em; +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) { + background-position: right 20px center; } -#identity-box:-moz-locale-dir(ltr) { - border-top-left-radius: 1.5px; - border-bottom-left-radius: 1.5px; +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description { + margin: 0; + padding: 0; } -#identity-box:-moz-locale-dir(rtl) { - border-top-right-radius: 1.5px; - border-bottom-right-radius: 1.5px; +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link { + -moz-margin-start: 0; } -#notification-popup-box:not([hidden]) + #identity-box { - //-moz-padding-start: 10px; - border-radius: 0; +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button { + -moz-appearance: none; + -moz-user-focus: ignore; + min-width: 80px; + border-radius: 3px; + padding: 4px 16px; + margin: 0; + -moz-margin-start: 10px; } -window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box { - border-radius: 0; +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] { + color: hsl(210, 0%, 38%); + background-color: hsl(210, 0%, 88%); + border: 1px solid hsl(210, 0%, 82%); } -//window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #urlbar > #identity-box { - //transition: padding-left, padding-right; -//} +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover { + background-color: hsl(210, 0%, 84%); +} -//window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) { - //padding-left: 5px; -//} +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] { + color: white; + background-color: hsl(93, 82%, 44%); + border: 1px solid hsl(93, 82%, 44%); +} -//window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) { - //padding-right: 5px; -//} +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover { + background-color: hsl(93, 82%, 40%); +} -//window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box { - /* forward button hiding is delayed when hovered */ -// transition-delay: 100s; -//} +#search-container { + min-width: calc(54px + 11ch); +} -//window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) { - /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */ - //padding-left: 5.01px; -//} +/* identity box */ -//window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) { - /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */ - //padding-right: 5.01px; -//} +#identity-box:-moz-locale-dir(ltr) { + border-top-left-radius: 1.5px; + border-bottom-left-radius: 1.5px; +} -#urlbar[pageproxystate="valid"] > #identity-box.chromeUI, -#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { - -moz-margin-end: 4px; +#identity-box:-moz-locale-dir(rtl) { + border-top-right-radius: 1.5px; + border-bottom-right-radius: 1.5px; } -#identity-box.verifiedIdentity:not(:-moz-lwtheme) { - background-color: var(--verified-identity-box-backgroundcolor); +#identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) { + background-color: var(--identity-box-verified-background-color); } #identity-box:-moz-focusring { @@ -1848,141 +1886,137 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box outline-offset: -3px; } -#identity-icon-labels { - -moz-padding-start: 2px; - -moz-padding-end: 5px; -} - -:root { +#identity-box { +// --identity-box-selected-background-color: rgb(231,230,230); --identity-box-verified-color: hsl(92,100%,30%); - --identity-box-verified-background-image: linear-gradient( - transparent 15%, - hsla(92,81%,16%,.2) 15%, - hsla(92,81%,16%,.2) 85%, - transparent 85%); --identity-box-chrome-color: rgb(229,115,0); - --identity-box-chrome-background-image: linear-gradient( - transparent 15%, - rgba(229,114,0,.5) 15%, - rgba(229,114,0,.5) 85%, - transparent 85%); -} -#urlbar[pageproxystate="valid"] > #identity-box.chromeUI, -#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { - background-position: right; - background-size: 1px; - background-repeat: no-repeat; + border-inline-end: 1px solid var(--urlbar-separator-color); + border-image: linear-gradient(transparent 15%, + var(--urlbar-separator-color) 15%, + var(--urlbar-separator-color) 85%, + transparent 85%); + border-image-slice: 1; + font-size: .9em; + padding: 3px 5px 3px 3px; + margin-inline-end: 4px; + overflow: hidden; +// /* The latter two properties have a transition to handle the delayed hiding of +// the forward button when hovered. */ +// transition: background-color 150ms ease, padding-left, padding-right; } -#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:-moz-locale-dir(rtl), -#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:-moz-locale-dir(rtl) { - background-position: left; -} +//#identity-box:hover, +//#identity-box[open=true] { +// background-color: var(--identity-box-selected-background-color); +// border-image-source: none; +//} #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { color: var(--identity-box-verified-color); - background-image: var(--identity-box-verified-background-image); } #urlbar[pageproxystate="valid"] > #identity-box.chromeUI { color: var(--identity-box-chrome-color); - background-image: var(--identity-box-chrome-background-image); } -/* page proxy icon */ - -#page-proxy-favicon { - width: 16px; - height: 16px; - list-style-image: url(chrome://browser/skin/identity-icons-generic.png); +#identity-icon-labels { + padding-inline-start: 2px; } -.chromeUI > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://branding/content/identity-icons-brand.png); +#notification-popup-box:not([hidden]) + #identity-box { + padding-inline-start: 10px; + border-radius: 0; } -.verifiedDomain > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https.png); +window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box { + border-radius: 0; } -.verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-ev.png); -} +//window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box { +// padding-inline-start: calc(var(--backbutton-urlbar-overlap) + 4px); +//} -.mixedActiveContent > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-active.png); -} +//window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box { +// /* Forward button hiding is delayed when hovered, so we should use the same +// delay for the identity box. We handle both horizontal paddings (for LTR and +// RTL), the latter two delays here are for padding-left and padding-right. */ +// transition-delay: 0s, 100s, 100s; +//} -.mixedDisplayContent > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png); -} +//window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box { +// /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */ +// padding-inline-start: calc(var(--backbutton-urlbar-overlap) + 4.01px); +//} -.mixedDisplayContentLoadedActiveBlocked > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png); -} +/* TRACKING PROTECTION ICON */ -#page-proxy-favicon[pageproxystate="invalid"] { - opacity: 0.3; +#tracking-protection-icon { + width: 16px; + height: 16px; + margin-inline-start: 0; + margin-inline-end: 2px; + list-style-image: url(chrome://browser/skin/tracking-protection-16.svg); + opacity: 1; } -@media not all and (min-resolution: 1.1dppx) { - #page-proxy-favicon { - -moz-image-region: rect(0, 16px, 16px, 0); - } +#tracking-protection-icon[state="loaded-tracking-content"] { + list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg); +} - #identity-box:hover > #page-proxy-favicon { - -moz-image-region: rect(0, 32px, 16px, 16px); - } +#tracking-protection-icon[animate] { + transition: margin-left 200ms ease-out, margin-right 200ms ease-out; +} - #identity-box:hover:active > #page-proxy-favicon, - #identity-box[open=true] > #page-proxy-favicon { - -moz-image-region: rect(0, 48px, 16px, 32px); - } +#tracking-protection-icon:not([state]) { + margin-inline-start: -18px; + pointer-events: none; + opacity: 0; + /* Only animate the shield in, when it disappears hide it immediately. */ + transition: none; } -@media (min-resolution: 1.1dppx) { - #page-proxy-favicon { - list-style-image: url(chrome://browser/skin/identity-icons-generic@2x.png); - -moz-image-region: rect(0, 32px, 32px, 0); - } +#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icons > #tracking-protection-icon { + visibility: collapse; +} - .chromeUI > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://branding/content/identity-icons-brand@2x.png); - } +/* MAIN IDENTITY ICON */ - .verifiedDomain > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https@2x.png); - } +#page-proxy-favicon { + width: 16px; + height: 16px; + list-style-image: url(chrome://browser/skin/identity-not-secure.svg); +} - .verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-ev@2x.png); - } +.chromeUI > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://branding/content/identity-icons-brand.svg); +} - .mixedActiveContent > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-active@2x.png); - } +.verifiedDomain > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], +.verifiedIdentity > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-secure.svg); +} - .mixedDisplayContent > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display@2x.png); - } +.mixedActiveContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg); +} - .mixedDisplayContentLoadedActiveBlocked > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display@2x.png); - } +.weakCipher > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], +.mixedDisplayContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], +.mixedDisplayContentLoadedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg); +} - #identity-box:hover > #page-proxy-favicon { - -moz-image-region: rect(0, 64px, 32px, 32px); - } +.mixedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg); +} - #identity-box:hover:active > #page-proxy-favicon, - #identity-box[open=true] > #page-proxy-favicon { - -moz-image-region: rect(0, 96px, 32px, 64px); - } +#page-proxy-favicon[pageproxystate="invalid"] { + opacity: 0.3; } -#urlbar[actiontype="searchengine"] > #identity-box > #page-proxy-favicon { +#urlbar[actiontype="searchengine"] > #identity-box > #identity-icons > #page-proxy-favicon { -moz-image-region: inherit; list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); width: 16px; @@ -1990,13 +2024,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box opacity: 1; } -#page-proxy-favicon { - margin-top: 1px; - margin-bottom: 1px; - -moz-margin-start: 3px; - -moz-margin-end: 1px; -} - .popup-notification-icon { width: 64px; @@ -2065,15 +2092,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box list-style-image: url(chrome://global/skin/icons/webapps-64.png); } -.popup-notification-icon[popupid="bad-content"] { - list-style-image: url(chrome://browser/skin/bad-content-blocked-64.png); -} - -.popup-notification-icon[popupid="bad-content"][mixedblockdisabled], -.popup-notification-icon[popupid="bad-content"][trackingblockdisabled] { - list-style-image: url(chrome://browser/skin/bad-content-unblocked-64.png); -} - .popup-notification-icon[popupid="webRTC-sharingDevices"], .popup-notification-icon[popupid="webRTC-shareDevices"] { list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64.png); @@ -2214,16 +2232,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box } } -.bad-content-blocked-notification-icon, -#bad-content-blocked-notification-icon { - list-style-image: url(chrome://browser/skin/bad-content-blocked-16.png); -} - -.bad-content-unblocked-notification-icon, -#bad-content-unblocked-notification-icon { - list-style-image: url(chrome://browser/skin/bad-content-unblocked-16.png); -} - .webRTC-shareDevices-notification-icon, #webRTC-shareDevices-notification-icon { list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16.png); @@ -2375,8 +2383,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box /* Notification icon box */ #notification-popup-box { border-radius: 2.5px 0 0 2.5px; - margin-top: -1px; - margin-bottom: -1px; } .notification-anchor-icon:-moz-focusring { @@ -2594,7 +2600,9 @@ richlistitem[type~="action"][actiontype="searchengine"][selected="true"] > .ac-t height: 16px; } -.ac-comment { +.ac-comment, +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description, +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button { font-size: 1.05em; } @@ -2749,41 +2757,6 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- list-style-image: url("chrome://browser/skin/Info.png"); } -/* Reading List button */ - -#urlbar:not([focused]):not(:hover) #readinglist-addremove-button { - opacity: 0; - width: 0px; -} - -#readinglist-addremove-button { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage"); - -moz-image-region: rect(0, 14px, 14px, 0); - transition: width 150ms ease-in-out, opacity 150ms ease-in-out 150ms; - opacity: 1; - width: 20px; -} - -#readinglist-addremove-button:hover { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage-hover"); -} - -#readinglist-addremove-button:active { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage-active"); -} - -#readinglist-addremove-button[already-added="true"] { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded"); -} - -#readinglist-addremove-button[already-added="true"]:hover { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded-hover"); -} - -#readinglist-addremove-button[already-added="true"]:active { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded-active"); -} - /* Reader mode button */ #reader-mode-button { @@ -3043,9 +3016,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- --tab-min-height: 31px; } #TabsToolbar { - --tab-separator-image: url(chrome://browser/skin/tabbrowser/tab-separator.png); - --tab-separator-size: 3px 100%; - --tab-separator-opacity: 1; + --tab-stroke-background-size: auto 100%; } @@ -3111,6 +3082,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- .tab-throbber, .tab-icon-image, +.tab-icon-sound, .tab-close-button { margin-top: 1px; } @@ -3135,10 +3107,35 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- } .tab-icon-overlay[crashed] { - display: -moz-box; list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg"); } +.tab-icon-overlay[soundplaying], +.tab-icon-overlay[muted]:not([crashed]) { + border-radius: 8px; +} + +.tab-icon-overlay[soundplaying]:hover, +.tab-icon-overlay[muted]:not([crashed]):hover { + background-color: white; +} + +.tab-icon-overlay[soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio"); +} + +.tab-icon-overlay[muted]:not([crashed]) { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted"); +} + +#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white"); +} + +#TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted"); +} + .tab-throbber[busy] { list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png"); } @@ -3158,6 +3155,85 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- padding: 0; } +.tab-icon-sound { + -moz-margin-start: 4px; + width: 16px; + height: 16px; + padding: 0; +} + +.tab-icon-sound[soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab"); +} + +.tab-icon-sound[soundplaying]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-hover"); +} + +.tab-icon-sound[soundplaying]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-pressed"); +} + +.tab-icon-sound[muted] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted"); +} + +.tab-icon-sound[muted]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-hover"); +} + +.tab-icon-sound[muted]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-pressed"); +} + +.tab-icon-sound[visuallyselected=true][soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio"); +} + +.tab-icon-sound[visuallyselected=true][soundplaying]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover"); +} + +.tab-icon-sound[visuallyselected=true][soundplaying]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed"); +} + +.tab-icon-sound[visuallyselected=true][muted] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted"); +} + +.tab-icon-sound[visuallyselected=true][muted]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover"); +} + +.tab-icon-sound[visuallyselected=true][muted]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed"); +} + +#TabsToolbar[brighttext] .tab-icon-sound[soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white"); +} + +#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover"); +} + +#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed"); +} + +#TabsToolbar[brighttext] .tab-icon-sound[muted] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white"); +} + +#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover"); +} + +#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed"); +} + .tab-background, .tabs-newtab-button { /* overlap the tab curves */ @@ -3294,7 +3370,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- background-color: transparent; background-image: url(chrome://browser/skin/custom_images/#{$darker_asset_path}/tabs/tab-middle.svg); background-repeat: repeat-x; - background-size: auto 100%; + background-size: var(--tab-stroke-background-size); /* The padding-top combined with background-clip: content-box (the bottom-most) ensure the background-color doesn't extend above the top border. */ padding-top: 2px; @@ -3308,7 +3384,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- linear-gradient(transparent 0px, transparent 2px, hsla(0,0%,100%,0.35) 2px, hsla(0,0%,100%,0.35) 3px, hsla(0,0%,100%,0.65) 3px, hsla(0,0%,100%,0.65) 4px, rgba(255,255,255,.3));/*, lwtHeader;*/ /* Don't stretch the LWT header images */ - background-size: auto 100%, auto 100%, auto auto; + background-size: var(--tab-stroke-background-size), auto 100%, auto auto; } /* These LWT styles are normally overridden by browser-lightweightTheme.css */ @@ -3344,6 +3420,9 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- .tab-background-middle, .tabs-newtab-button, +.tab-icon-overlay[soundplaying], +.tab-icon-overlay[muted]:not([crashed]), +.tab-icon-sound, .tab-close-button { pointer-events: auto; } @@ -3414,8 +3493,9 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-drag"); } -.tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-label { +.tabbrowser-tab:focus > .tab-stack > .tab-content { outline: 1px dotted; + outline-offset: -6px; } #context_reloadTab { @@ -3690,10 +3770,6 @@ toolbarbutton.chevron > .toolbarbutton-icon { box-shadow: 0 0 2px white; } -#full-screen-warning-container[obscure-browser] { - background-color: rgba(0,0,0,0.3); -} - .full-screen-description { font-size: 150%; } @@ -3702,11 +3778,6 @@ toolbarbutton.chevron > .toolbarbutton-icon { font-size: 300%; } -.full-screen-approval-button, -#full-screen-remember-decision { - font-size: 120%; -} - /* Responsive Mode */ @@ -4350,27 +4421,6 @@ notification.pluginVulnerable { notification.pluginVulnerable .messageImage { list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png"); } -.popup-notification-item-title[popupid="bad-content"] { - font-weight: bold; -} - -.popup-notification-item-message[popupid="bad-content"] { - width: 17em; -} - -.popup-notification-item-message[popupid="bad-content"][mixedblockdisabled]:not(.popup-notification-item-message-critical), -.popup-notification-item-message[popupid="bad-content"][trackingblockdisabled]:not(.popup-notification-item-message-critical) { - color: GrayText; -} - -.popup-notification-item-message-critical[popupid="bad-content"] { - color: #d74345; - font-style: italic; -} - -.popup-notification-footer[popupid="bad-content"] { - padding-top: 1em; -} #notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent { /* Since we display a sliding subview that extends to the border, we cannot * keep the default padding of arrow panels. We use the same padding in the @@ -5177,14 +5227,14 @@ toolbarpaletteitem[notransition][place="panel"] { } toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon, -toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-container > .toolbarbutton-icon, +toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon, toolbarpaletteitem > toolbaritem.panel-wide-item, toolbarpaletteitem > toolbarbutton[type="menu-button"] { transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important; } toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon, -toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-container > .toolbarbutton-icon { +toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon { transform: scale(1.3); } @@ -5569,10 +5619,12 @@ toolbarpaletteitem[place="toolbar"] { padding: 2em 15px; } +#UITourTooltipButtons > label, #UITourTooltipButtons > button { margin: 0 15px; } +#UITourTooltipButtons > label:first-child, #UITourTooltipButtons > button:first-child { -moz-margin-start: 0; } @@ -5583,6 +5635,7 @@ toolbarpaletteitem[place="toolbar"] { -moz-margin-end: 5px; } +#UITourTooltipButtons > label, #UITourTooltipButtons > button .button-text { font-size: 1.15rem; } @@ -5605,6 +5658,7 @@ toolbarpaletteitem[place="toolbar"] { box-shadow: 0 1px 0 0 hsla(210,4%,10%,.05) inset; } +#UITourTooltipButtons > label, #UITourTooltipButtons > button.button-link { -moz-appearance: none; background: transparent; @@ -5886,3 +5940,7 @@ notification.heartbeat { -moz-padding-end: 0 !important; -moz-margin-end: 0 !important; } + +.browser-action-panel > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; +} diff --git a/arc-firefox-theme/chrome/browser/sass/browser-dark.css b/arc-firefox-theme/chrome/browser/sass/browser-dark.css index e897904..a17f8d2 100644 --- a/arc-firefox-theme/chrome/browser/sass/browser-dark.css +++ b/arc-firefox-theme/chrome/browser/sass/browser-dark.css @@ -62,8 +62,8 @@ #TabsToolbar:not([collapsed="true"]) + #nav-bar { border-top: 1px solid rgba(38, 42, 51, 0.97) !important; background-clip: padding-box; - margin-top: -1px; /* Move up into the TabsToolbar for the inner highlight at the top of the nav-bar */ + margin-top: calc(-1 * var(--navbar-tab-toolbar-highlight-overlap)); /* Position the toolbar above the bottom of background tabs */ position: relative; z-index: 1; } @@ -99,7 +99,7 @@ /* Places toolbar */ toolbarbutton.bookmark-item:not(.subviewbutton), #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder { - margin: 1px; + margin: 0; padding: 2px 3px; } toolbarbutton.bookmark-item:not(.subviewbutton):not(:hover):not(:active):not([open]) { @@ -283,7 +283,7 @@ menuitem.bookmark-item { opacity: 0.7; } /* Stock icons for the menu bar items */ -menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { +menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip):not([endimage]) { -moz-binding: url("chrome://global/content/bindings/menu.xml#menuitem-iconic"); } #placesContext_open\:newwindow, @@ -442,10 +442,6 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { #panelMenu_unsortedBookmarks { list-style-image: url("chrome://browser/skin/places/unsortedBookmarks.png"); } -#menu_readingList, -#BMB_readingList { - list-style-image: url("chrome://browser/skin/readinglist/readinglist-icon.svg"); } - #panelMenu_pocket, #menu_pocket, #BMB_pocket { @@ -495,7 +491,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { .findbar-button > .toolbarbutton-text, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-badge-container, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-badge-stack, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-icon { -moz-margin-end: 0; padding: 2px 6px; @@ -505,13 +501,13 @@ 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, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-badge-container, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-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, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon { padding: 3px 7px; } /* Help SDK icons fit: */ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon, -toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-container > .toolbarbutton-icon { +toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon { width: 16px; } :-moz-any(#TabsToolbar, #nav-bar) toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon { @@ -531,7 +527,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open]:not([disabled=true]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):not([open]):hover > .toolbarbutton-menubutton-button > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):not([open]):hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-badge-container, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-badge-stack, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-icon { background: var(--toolbarbutton-hover-background); border-width: 1px; @@ -553,7 +549,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba .findbar-button:not([disabled=true]):-moz-any([checked="true"], :hover:active) > .toolbarbutton-text, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([open="true"]) > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open="true"]) > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-container, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-stack, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-icon { background: var(--toolbarbutton-active-background); box-shadow: var(--toolbarbutton-active-boxshadow); @@ -564,7 +560,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open="true"]) > .toolbarbutton-icon, #TabsToolbar .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon, -#TabsToolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-container, +#TabsToolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-stack, #TabsToolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-icon { background: none; color: #ffffff; @@ -743,6 +739,13 @@ toolbar[brighttext] #sync-button[status="active"] { #PanelUI-menu-button { -moz-image-region: rect(0, 486px, 18px, 468px); } +#PanelUI-menu-button.thumburger { + list-style-image: url("chrome://browser/skin/customizableui/thumburger.png") !important; + -moz-image-region: auto !important; } + +toolbar[brighttext] #PanelUI-menu-button.thumburger { + list-style-image: url("chrome://browser/skin/customizableui/thumburger-inverted.png") !important; } + #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button { -moz-image-region: rect(0, 504px, 18px, 486px); } @@ -785,30 +788,30 @@ toolbar[brighttext] #sync-button[status="active"] { #web-apps-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 720px, 18px, 702px); } -#loop-button > .toolbarbutton-badge-container { +#loop-button { list-style-image: url(chrome://browser/skin/loop/toolbar.png); -moz-image-region: rect(0, 18px, 18px, 0); } -toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { +toolbar[brighttext] #loop-button { list-style-image: url(chrome://browser/skin/loop/toolbar-inverted.png); } -#loop-button[state="disabled"] > .toolbarbutton-badge-container, -#loop-button[disabled="true"] > .toolbarbutton-badge-container { +#loop-button[state="disabled"], +#loop-button[disabled="true"] { -moz-image-region: rect(0, 36px, 18px, 18px); } -#loop-button:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container { +#loop-button:not([disabled="true"])[state="error"] { -moz-image-region: rect(0, 54px, 18px, 36px); } -#loop-button:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container { +#loop-button:not([disabled="true"])[state="action"] { -moz-image-region: rect(0, 72px, 18px, 54px); } -#loop-button:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { +#loop-button:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) { -moz-image-region: rect(0, 90px, 18px, 72px); } -#loop-button:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container { +#loop-button:not([disabled="true"])[state="active"] { -moz-image-region: rect(0, 108px, 18px, 90px); } -#loop-button:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { +#loop-button:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) { -moz-image-region: rect(0, 126px, 18px, 108px); } #webide-button[cui-areatype="toolbar"] { @@ -972,32 +975,32 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { toolbaritem[sdkstylewidget="true"] > toolbarbutton { -moz-image-region: rect(0, 832px, 32px, 800px); } - #loop-button[cui-areatype="menu-panel"] > .toolbarbutton-badge-container, - toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #loop-button { list-style-image: url(chrome://browser/skin/loop/menuPanel.png); -moz-image-region: rect(0, 32px, 32px, 0); } /* Make sure that the state icons are not shown in the customization palette. */ - toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container { + toolbarpaletteitem[place="palette"] > #loop-button { -moz-image-region: rect(0, 32px, 32px, 0) !important; } - #loop-button[cui-areatype="menu-panel"][state="disabled"] > .toolbarbutton-badge-container, - #loop-button[cui-areatype="menu-panel"][disabled="true"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"][state="disabled"], + #loop-button[cui-areatype="menu-panel"][disabled="true"] { -moz-image-region: rect(0, 64px, 32px, 32px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] { -moz-image-region: rect(0, 96px, 32px, 64px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] { -moz-image-region: rect(0, 128px, 32px, 96px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) { -moz-image-region: rect(0, 160px, 32px, 128px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] { -moz-image-region: rect(0, 192px, 32px, 160px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) { -moz-image-region: rect(0, 224px, 32px, 192px); } /* Wide panel control icons */ @@ -1116,32 +1119,32 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { #pocket-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { -moz-image-region: rect(64px, 1984px, 128px, 1920px); } - #loop-button[cui-areatype="menu-panel"] > .toolbarbutton-badge-container, - toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #loop-button { list-style-image: url(chrome://browser/skin/loop/menuPanel@2x.png); -moz-image-region: rect(0, 64px, 64px, 0); } /* Make sure that the state icons are not shown in the customization palette. */ - toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container { + toolbarpaletteitem[place="palette"] > #loop-button { -moz-image-region: rect(0, 64px, 64px, 0) !important; } - #loop-button[cui-areatype="menu-panel"][state="disabled"] > .toolbarbutton-badge-container, - #loop-button[cui-areatype="menu-panel"][disabled="true"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"][state="disabled"], + #loop-button[cui-areatype="menu-panel"][disabled="true"] { -moz-image-region: rect(0, 128px, 64px, 64px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] { -moz-image-region: rect(0, 192px, 64px, 128px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] { -moz-image-region: rect(0, 256px, 64px, 192px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) { -moz-image-region: rect(0, 320px, 64px, 256px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] { -moz-image-region: rect(0, 384px, 64px, 320px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) { -moz-image-region: rect(0, 448px, 64px, 384px); } #new-tab-button[cui-areatype="menu-panel"], @@ -1312,6 +1315,25 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { #urlbar-icons { -moz-box-align: center; } +#urlbar-search-footer { + border-top: 1px solid rgba(24, 26, 27, 0.14); + background-color: rgba(24, 26, 27, 0.07); } + +#urlbar-search-settings { + -moz-appearance: none; + -moz-user-focus: ignore; + color: inherit; + margin: 0; + border: 0; + padding: 8px 20px; + background: transparent; } + +#urlbar-search-settings:hover { + background-color: rgba(24, 26, 27, 0.07); } + +#urlbar-search-settings:hover:active { + background-color: rgba(24, 26, 27, 0.12); } + #urlbar-search-splitter { -moz-appearance: none; width: 8px; } @@ -1328,14 +1350,57 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { -moz-margin-start: 0; color: GrayText; } +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] { + border-bottom: 1px solid rgba(24, 26, 27, 0.14); + background-color: rgba(24, 26, 27, 0.07); + padding: 6px 0; + -moz-padding-start: 44px; + -moz-padding-end: 6px; + background-image: url("chrome://browser/skin/info.svg"); + background-clip: padding-box; + background-position: 20px center; + background-repeat: no-repeat; + background-size: 16px 16px; } + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) { + background-position: right 20px center; } + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description { + margin: 0; + padding: 0; } + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link { + -moz-margin-start: 0; } + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button { + -moz-appearance: none; + -moz-user-focus: ignore; + min-width: 80px; + border-radius: 3px; + padding: 4px 16px; + margin: 0; + -moz-margin-start: 10px; } + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] { + color: #616161; + background-color: #e0e0e0; + border: 1px solid #d1d1d1; } + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover { + background-color: #d6d6d6; } + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] { + color: white; + background-color: #67cc14; + border: 1px solid #67cc14; } + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover { + background-color: #5eba12; } + #search-container { min-width: calc(54px + 11ch); } /* identity box */ -#identity-box { - padding: 1px; - font-size: .9em; } - #identity-box:-moz-locale-dir(ltr) { border-top-left-radius: 1.5px; border-bottom-left-radius: 1.5px; } @@ -1344,133 +1409,99 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { border-top-right-radius: 1.5px; border-bottom-right-radius: 1.5px; } -#notification-popup-box:not([hidden]) + #identity-box { - border-radius: 0; } - -window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box { - border-radius: 0; } - -/* forward button hiding is delayed when hovered */ -/* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */ -/* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */ -#urlbar[pageproxystate="valid"] > #identity-box.chromeUI, -#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { - -moz-margin-end: 4px; } - -#identity-box.verifiedIdentity:not(:-moz-lwtheme) { - background-color: var(--verified-identity-box-backgroundcolor); } +#identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) { + background-color: var(--identity-box-verified-background-color); } #identity-box:-moz-focusring { outline: 1px dotted #000; outline-offset: -3px; } -#identity-icon-labels { - -moz-padding-start: 2px; - -moz-padding-end: 5px; } - -:root { +#identity-box { --identity-box-verified-color: #479900; - --identity-box-verified-background-image: linear-gradient(transparent 15%, rgba(39, 74, 8, 0.2) 15%, rgba(39, 74, 8, 0.2) 85%, transparent 85%); --identity-box-chrome-color: #e57300; - --identity-box-chrome-background-image: linear-gradient(transparent 15%, rgba(229, 114, 0, 0.5) 15%, rgba(229, 114, 0, 0.5) 85%, transparent 85%); } - -#urlbar[pageproxystate="valid"] > #identity-box.chromeUI, -#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { - background-position: right; - background-size: 1px; - background-repeat: no-repeat; } - -#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:-moz-locale-dir(rtl), -#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:-moz-locale-dir(rtl) { - background-position: left; } + border-inline-end: 1px solid var(--urlbar-separator-color); + border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%); + border-image-slice: 1; + font-size: .9em; + padding: 3px 5px 3px 3px; + margin-inline-end: 4px; + overflow: hidden; } #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { - color: var(--identity-box-verified-color); - background-image: var(--identity-box-verified-background-image); } + color: var(--identity-box-verified-color); } #urlbar[pageproxystate="valid"] > #identity-box.chromeUI { - color: var(--identity-box-chrome-color); - background-image: var(--identity-box-chrome-background-image); } - -/* page proxy icon */ -#page-proxy-favicon { - width: 16px; - height: 16px; - list-style-image: url(chrome://browser/skin/identity-icons-generic.png); } + color: var(--identity-box-chrome-color); } -.chromeUI > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://branding/content/identity-icons-brand.png); } - -.verifiedDomain > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https.png); } - -.verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-ev.png); } +#identity-icon-labels { + padding-inline-start: 2px; } -.mixedActiveContent > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-active.png); } +#notification-popup-box:not([hidden]) + #identity-box { + padding-inline-start: 10px; + border-radius: 0; } -.mixedDisplayContent > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png); } +window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box { + border-radius: 0; } -.mixedDisplayContentLoadedActiveBlocked > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png); } +/* TRACKING PROTECTION ICON */ +#tracking-protection-icon { + width: 16px; + height: 16px; + margin-inline-start: 0; + margin-inline-end: 2px; + list-style-image: url(chrome://browser/skin/tracking-protection-16.svg); + opacity: 1; } -#page-proxy-favicon[pageproxystate="invalid"] { - opacity: 0.3; } +#tracking-protection-icon[state="loaded-tracking-content"] { + list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg); } -@media not all and (min-resolution: 1.1dppx) { - #page-proxy-favicon { - -moz-image-region: rect(0, 16px, 16px, 0); } +#tracking-protection-icon[animate] { + transition: margin-left 200ms ease-out, margin-right 200ms ease-out; } - #identity-box:hover > #page-proxy-favicon { - -moz-image-region: rect(0, 32px, 16px, 16px); } +#tracking-protection-icon:not([state]) { + margin-inline-start: -18px; + pointer-events: none; + opacity: 0; + /* Only animate the shield in, when it disappears hide it immediately. */ + transition: none; } - #identity-box:hover:active > #page-proxy-favicon, - #identity-box[open=true] > #page-proxy-favicon { - -moz-image-region: rect(0, 48px, 16px, 32px); } } -@media (min-resolution: 1.1dppx) { - #page-proxy-favicon { - list-style-image: url(chrome://browser/skin/identity-icons-generic@2x.png); - -moz-image-region: rect(0, 32px, 32px, 0); } +#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icons > #tracking-protection-icon { + visibility: collapse; } - .chromeUI > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://branding/content/identity-icons-brand@2x.png); } +/* MAIN IDENTITY ICON */ +#page-proxy-favicon { + width: 16px; + height: 16px; + list-style-image: url(chrome://browser/skin/identity-not-secure.svg); } - .verifiedDomain > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https@2x.png); } +.chromeUI > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://branding/content/identity-icons-brand.svg); } - .verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-ev@2x.png); } +.verifiedDomain > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], +.verifiedIdentity > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-secure.svg); } - .mixedActiveContent > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-active@2x.png); } +.mixedActiveContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg); } - .mixedDisplayContent > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display@2x.png); } +.weakCipher > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], +.mixedDisplayContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], +.mixedDisplayContentLoadedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg); } - .mixedDisplayContentLoadedActiveBlocked > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display@2x.png); } +.mixedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg); } - #identity-box:hover > #page-proxy-favicon { - -moz-image-region: rect(0, 64px, 32px, 32px); } +#page-proxy-favicon[pageproxystate="invalid"] { + opacity: 0.3; } - #identity-box:hover:active > #page-proxy-favicon, - #identity-box[open=true] > #page-proxy-favicon { - -moz-image-region: rect(0, 96px, 32px, 64px); } } -#urlbar[actiontype="searchengine"] > #identity-box > #page-proxy-favicon { +#urlbar[actiontype="searchengine"] > #identity-box > #identity-icons > #page-proxy-favicon { -moz-image-region: inherit; list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); width: 16px; height: 16px; opacity: 1; } -#page-proxy-favicon { - margin-top: 1px; - margin-bottom: 1px; - -moz-margin-start: 3px; - -moz-margin-end: 1px; } - .popup-notification-icon { width: 64px; height: 64px; @@ -1523,13 +1554,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box .popup-notification-icon[popupid="webapps-install"] { list-style-image: url(chrome://global/skin/icons/webapps-64.png); } -.popup-notification-icon[popupid="bad-content"] { - list-style-image: url(chrome://browser/skin/bad-content-blocked-64.png); } - -.popup-notification-icon[popupid="bad-content"][mixedblockdisabled], -.popup-notification-icon[popupid="bad-content"][trackingblockdisabled] { - list-style-image: url(chrome://browser/skin/bad-content-unblocked-64.png); } - .popup-notification-icon[popupid="webRTC-sharingDevices"], .popup-notification-icon[popupid="webRTC-shareDevices"] { list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64.png); } @@ -1635,14 +1659,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box opacity: 0; } to { opacity: 1; } } -.bad-content-blocked-notification-icon, -#bad-content-blocked-notification-icon { - list-style-image: url(chrome://browser/skin/bad-content-blocked-16.png); } - -.bad-content-unblocked-notification-icon, -#bad-content-unblocked-notification-icon { - list-style-image: url(chrome://browser/skin/bad-content-unblocked-16.png); } - .webRTC-shareDevices-notification-icon, #webRTC-shareDevices-notification-icon { list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16.png); } @@ -1761,9 +1777,7 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box /* Notification icon box */ #notification-popup-box { - border-radius: 2.5px 0 0 2.5px; - margin-top: -1px; - margin-bottom: -1px; } + border-radius: 2.5px 0 0 2.5px; } .notification-anchor-icon:-moz-focusring { outline: 1px dotted -moz-DialogText; } @@ -1936,7 +1950,9 @@ richlistitem[type~="action"][actiontype="searchengine"][selected="true"] > .ac-t width: 16px; height: 16px; } -.ac-comment { +.ac-comment, +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description, +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button { font-size: 1.05em; } .ac-extra > .ac-comment { @@ -2053,33 +2069,6 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- #page-report-button { list-style-image: url("chrome://browser/skin/Info.png"); } -/* Reading List button */ -#urlbar:not([focused]):not(:hover) #readinglist-addremove-button { - opacity: 0; - width: 0px; } - -#readinglist-addremove-button { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage"); - -moz-image-region: rect(0, 14px, 14px, 0); - transition: width 150ms ease-in-out, opacity 150ms ease-in-out 150ms; - opacity: 1; - width: 20px; } - -#readinglist-addremove-button:hover { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage-hover"); } - -#readinglist-addremove-button:active { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage-active"); } - -#readinglist-addremove-button[already-added="true"] { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded"); } - -#readinglist-addremove-button[already-added="true"]:hover { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded-hover"); } - -#readinglist-addremove-button[already-added="true"]:active { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded-active"); } - /* Reader mode button */ #reader-mode-button { list-style-image: url("chrome://browser/skin/readerMode.svg"); @@ -2276,9 +2265,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- --tab-min-height: 31px; } #TabsToolbar { - --tab-separator-image: url(chrome://browser/skin/tabbrowser/tab-separator.png); - --tab-separator-size: 3px 100%; - --tab-separator-opacity: 1; } + --tab-stroke-background-size: auto 100%; } /* image preloading hack */ #tabbrowser-tabs::before { @@ -2328,6 +2315,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- .tab-throbber, .tab-icon-image, +.tab-icon-sound, .tab-close-button { margin-top: 1px; } @@ -2348,9 +2336,28 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- display: none; } .tab-icon-overlay[crashed] { - display: -moz-box; list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg"); } +.tab-icon-overlay[soundplaying], +.tab-icon-overlay[muted]:not([crashed]) { + border-radius: 8px; } + +.tab-icon-overlay[soundplaying]:hover, +.tab-icon-overlay[muted]:not([crashed]):hover { + background-color: white; } + +.tab-icon-overlay[soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio"); } + +.tab-icon-overlay[muted]:not([crashed]) { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted"); } + +#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white"); } + +#TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted"); } + .tab-throbber[busy] { list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png"); } @@ -2366,6 +2373,66 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-margin-end: -2px; padding: 0; } +.tab-icon-sound { + -moz-margin-start: 4px; + width: 16px; + height: 16px; + padding: 0; } + +.tab-icon-sound[soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab"); } + +.tab-icon-sound[soundplaying]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-hover"); } + +.tab-icon-sound[soundplaying]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-pressed"); } + +.tab-icon-sound[muted] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted"); } + +.tab-icon-sound[muted]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-hover"); } + +.tab-icon-sound[muted]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-pressed"); } + +.tab-icon-sound[visuallyselected=true][soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio"); } + +.tab-icon-sound[visuallyselected=true][soundplaying]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover"); } + +.tab-icon-sound[visuallyselected=true][soundplaying]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed"); } + +.tab-icon-sound[visuallyselected=true][muted] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted"); } + +.tab-icon-sound[visuallyselected=true][muted]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover"); } + +.tab-icon-sound[visuallyselected=true][muted]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed"); } + +#TabsToolbar[brighttext] .tab-icon-sound[soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white"); } + +#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover"); } + +#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed"); } + +#TabsToolbar[brighttext] .tab-icon-sound[muted] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white"); } + +#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover"); } + +#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed"); } + .tab-background, .tabs-newtab-button { /* overlap the tab curves */ @@ -2473,7 +2540,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- background-color: transparent; background-image: url(chrome://browser/skin/custom_images/dark/tabs/tab-middle.svg); background-repeat: repeat-x; - background-size: auto 100%; + background-size: var(--tab-stroke-background-size); /* The padding-top combined with background-clip: content-box (the bottom-most) ensure the background-color doesn't extend above the top border. */ padding-top: 2px; } @@ -2486,7 +2553,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- /*, lwtHeader;*/ /* Don't stretch the LWT header images */ - background-size: auto 100%, auto 100%, auto auto; } + background-size: var(--tab-stroke-background-size), auto 100%, auto auto; } /* These LWT styles are normally overridden by browser-lightweightTheme.css */ .tab-background-start[visuallyselected=true]:-moz-lwtheme::before, @@ -2513,6 +2580,9 @@ lwtHeader;*/ .tab-background-middle, .tabs-newtab-button, +.tab-icon-overlay[soundplaying], +.tab-icon-overlay[muted]:not([crashed]), +.tab-icon-sound, .tab-close-button { pointer-events: auto; } @@ -2550,8 +2620,9 @@ lwtHeader;*/ #TabsToolbar:not(:-moz-lwtheme):-moz-system-metric(menubar-drag) { -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-drag"); } -.tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-label { - outline: 1px dotted; } +.tabbrowser-tab:focus > .tab-stack > .tab-content { + outline: 1px dotted; + outline-offset: -6px; } #context_reloadTab { list-style-image: url("moz-icon://stock/gtk-refresh?size=menu"); } @@ -2756,19 +2827,12 @@ toolbarbutton.chevron > .toolbarbutton-icon { padding: 30px 50px; box-shadow: 0 0 2px white; } -#full-screen-warning-container[obscure-browser] { - background-color: rgba(0, 0, 0, 0.3); } - .full-screen-description { font-size: 150%; } #full-screen-domain-text { font-size: 300%; } -.full-screen-approval-button, -#full-screen-remember-decision { - font-size: 120%; } - /* Responsive Mode */ .browserContainer[responsivemode] { background-color: #222; @@ -3294,23 +3358,6 @@ notification.pluginVulnerable { notification.pluginVulnerable .messageImage { list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png"); } -.popup-notification-item-title[popupid="bad-content"] { - font-weight: bold; } - -.popup-notification-item-message[popupid="bad-content"] { - width: 17em; } - -.popup-notification-item-message[popupid="bad-content"][mixedblockdisabled]:not(.popup-notification-item-message-critical), -.popup-notification-item-message[popupid="bad-content"][trackingblockdisabled]:not(.popup-notification-item-message-critical) { - color: GrayText; } - -.popup-notification-item-message-critical[popupid="bad-content"] { - color: #d74345; - font-style: italic; } - -.popup-notification-footer[popupid="bad-content"] { - padding-top: 1em; } - #notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent { /* Since we display a sliding subview that extends to the border, we cannot * keep the default padding of arrow panels. We use the same padding in the @@ -3960,13 +4007,13 @@ toolbarpaletteitem[notransition][place="panel"] { transition: none; } toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon, -toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-container > .toolbarbutton-icon, +toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon, toolbarpaletteitem > toolbaritem.panel-wide-item, toolbarpaletteitem > toolbarbutton[type="menu-button"] { transition: transform 0.3s cubic-bezier(0.6, 2, 0.75, 1.5) !important; } toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon, -toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-container > .toolbarbutton-icon { +toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon { transform: scale(1.3); } toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item, @@ -4286,9 +4333,11 @@ toolbarpaletteitem[place="toolbar"] { margin: 24px -16px -16px; padding: 2em 15px; } +#UITourTooltipButtons > label, #UITourTooltipButtons > button { margin: 0 15px; } +#UITourTooltipButtons > label:first-child, #UITourTooltipButtons > button:first-child { -moz-margin-start: 0; } @@ -4297,6 +4346,7 @@ toolbarpaletteitem[place="toolbar"] { height: 16px; -moz-margin-end: 5px; } +#UITourTooltipButtons > label, #UITourTooltipButtons > button .button-text { font-size: 1.15rem; } @@ -4316,6 +4366,7 @@ toolbarpaletteitem[place="toolbar"] { border-color: rgba(24, 26, 27, 0.15); box-shadow: 0 1px 0 0 rgba(24, 26, 27, 0.05) inset; } +#UITourTooltipButtons > label, #UITourTooltipButtons > button.button-link { -moz-appearance: none; background: transparent; @@ -4535,3 +4586,6 @@ notification.heartbeat { /* override toolkit/themes/linux/global/menu.css */ -moz-padding-end: 0 !important; -moz-margin-end: 0 !important; } + +.browser-action-panel > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; } diff --git a/arc-firefox-theme/chrome/browser/sass/browser-darker.css b/arc-firefox-theme/chrome/browser/sass/browser-darker.css index 4a6899e..8e4374d 100644 --- a/arc-firefox-theme/chrome/browser/sass/browser-darker.css +++ b/arc-firefox-theme/chrome/browser/sass/browser-darker.css @@ -62,8 +62,8 @@ #TabsToolbar:not([collapsed="true"]) + #nav-bar { border-top: 1px solid rgba(38, 42, 51, 0.97) !important; background-clip: padding-box; - margin-top: -1px; /* Move up into the TabsToolbar for the inner highlight at the top of the nav-bar */ + margin-top: calc(-1 * var(--navbar-tab-toolbar-highlight-overlap)); /* Position the toolbar above the bottom of background tabs */ position: relative; z-index: 1; } @@ -99,7 +99,7 @@ /* Places toolbar */ toolbarbutton.bookmark-item:not(.subviewbutton), #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder { - margin: 1px; + margin: 0; padding: 2px 3px; } toolbarbutton.bookmark-item:not(.subviewbutton):not(:hover):not(:active):not([open]) { @@ -283,7 +283,7 @@ menuitem.bookmark-item { opacity: 0.7; } /* Stock icons for the menu bar items */ -menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { +menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip):not([endimage]) { -moz-binding: url("chrome://global/content/bindings/menu.xml#menuitem-iconic"); } #placesContext_open\:newwindow, @@ -442,10 +442,6 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { #panelMenu_unsortedBookmarks { list-style-image: url("chrome://browser/skin/places/unsortedBookmarks.png"); } -#menu_readingList, -#BMB_readingList { - list-style-image: url("chrome://browser/skin/readinglist/readinglist-icon.svg"); } - #panelMenu_pocket, #menu_pocket, #BMB_pocket { @@ -495,7 +491,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { .findbar-button > .toolbarbutton-text, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-badge-container, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-badge-stack, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-icon { -moz-margin-end: 0; padding: 2px 6px; @@ -505,13 +501,13 @@ 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, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-badge-container, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-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, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon { padding: 3px 7px; } /* Help SDK icons fit: */ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon, -toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-container > .toolbarbutton-icon { +toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon { width: 16px; } :-moz-any(#TabsToolbar, #nav-bar) toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon { @@ -531,7 +527,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open]:not([disabled=true]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):not([open]):hover > .toolbarbutton-menubutton-button > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):not([open]):hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-badge-container, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-badge-stack, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-icon { background: var(--toolbarbutton-hover-background); border-width: 1px; @@ -553,7 +549,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba .findbar-button:not([disabled=true]):-moz-any([checked="true"], :hover:active) > .toolbarbutton-text, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([open="true"]) > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open="true"]) > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-container, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-stack, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-icon { background: var(--toolbarbutton-active-background); box-shadow: var(--toolbarbutton-active-boxshadow); @@ -564,7 +560,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open="true"]) > .toolbarbutton-icon, #TabsToolbar .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon, -#TabsToolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-container, +#TabsToolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-stack, #TabsToolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-icon { background: none; color: #ffffff; @@ -743,6 +739,13 @@ toolbar[brighttext] #sync-button[status="active"] { #PanelUI-menu-button { -moz-image-region: rect(0, 486px, 18px, 468px); } +#PanelUI-menu-button.thumburger { + list-style-image: url("chrome://browser/skin/customizableui/thumburger.png") !important; + -moz-image-region: auto !important; } + +toolbar[brighttext] #PanelUI-menu-button.thumburger { + list-style-image: url("chrome://browser/skin/customizableui/thumburger-inverted.png") !important; } + #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button { -moz-image-region: rect(0, 504px, 18px, 486px); } @@ -785,30 +788,30 @@ toolbar[brighttext] #sync-button[status="active"] { #web-apps-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 720px, 18px, 702px); } -#loop-button > .toolbarbutton-badge-container { +#loop-button { list-style-image: url(chrome://browser/skin/loop/toolbar.png); -moz-image-region: rect(0, 18px, 18px, 0); } -toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { +toolbar[brighttext] #loop-button { list-style-image: url(chrome://browser/skin/loop/toolbar-inverted.png); } -#loop-button[state="disabled"] > .toolbarbutton-badge-container, -#loop-button[disabled="true"] > .toolbarbutton-badge-container { +#loop-button[state="disabled"], +#loop-button[disabled="true"] { -moz-image-region: rect(0, 36px, 18px, 18px); } -#loop-button:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container { +#loop-button:not([disabled="true"])[state="error"] { -moz-image-region: rect(0, 54px, 18px, 36px); } -#loop-button:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container { +#loop-button:not([disabled="true"])[state="action"] { -moz-image-region: rect(0, 72px, 18px, 54px); } -#loop-button:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { +#loop-button:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) { -moz-image-region: rect(0, 90px, 18px, 72px); } -#loop-button:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container { +#loop-button:not([disabled="true"])[state="active"] { -moz-image-region: rect(0, 108px, 18px, 90px); } -#loop-button:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { +#loop-button:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) { -moz-image-region: rect(0, 126px, 18px, 108px); } #webide-button[cui-areatype="toolbar"] { @@ -972,32 +975,32 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { toolbaritem[sdkstylewidget="true"] > toolbarbutton { -moz-image-region: rect(0, 832px, 32px, 800px); } - #loop-button[cui-areatype="menu-panel"] > .toolbarbutton-badge-container, - toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #loop-button { list-style-image: url(chrome://browser/skin/loop/menuPanel.png); -moz-image-region: rect(0, 32px, 32px, 0); } /* Make sure that the state icons are not shown in the customization palette. */ - toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container { + toolbarpaletteitem[place="palette"] > #loop-button { -moz-image-region: rect(0, 32px, 32px, 0) !important; } - #loop-button[cui-areatype="menu-panel"][state="disabled"] > .toolbarbutton-badge-container, - #loop-button[cui-areatype="menu-panel"][disabled="true"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"][state="disabled"], + #loop-button[cui-areatype="menu-panel"][disabled="true"] { -moz-image-region: rect(0, 64px, 32px, 32px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] { -moz-image-region: rect(0, 96px, 32px, 64px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] { -moz-image-region: rect(0, 128px, 32px, 96px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) { -moz-image-region: rect(0, 160px, 32px, 128px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] { -moz-image-region: rect(0, 192px, 32px, 160px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) { -moz-image-region: rect(0, 224px, 32px, 192px); } /* Wide panel control icons */ @@ -1116,32 +1119,32 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { #pocket-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { -moz-image-region: rect(64px, 1984px, 128px, 1920px); } - #loop-button[cui-areatype="menu-panel"] > .toolbarbutton-badge-container, - toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #loop-button { list-style-image: url(chrome://browser/skin/loop/menuPanel@2x.png); -moz-image-region: rect(0, 64px, 64px, 0); } /* Make sure that the state icons are not shown in the customization palette. */ - toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container { + toolbarpaletteitem[place="palette"] > #loop-button { -moz-image-region: rect(0, 64px, 64px, 0) !important; } - #loop-button[cui-areatype="menu-panel"][state="disabled"] > .toolbarbutton-badge-container, - #loop-button[cui-areatype="menu-panel"][disabled="true"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"][state="disabled"], + #loop-button[cui-areatype="menu-panel"][disabled="true"] { -moz-image-region: rect(0, 128px, 64px, 64px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] { -moz-image-region: rect(0, 192px, 64px, 128px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] { -moz-image-region: rect(0, 256px, 64px, 192px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) { -moz-image-region: rect(0, 320px, 64px, 256px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] { -moz-image-region: rect(0, 384px, 64px, 320px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) { -moz-image-region: rect(0, 448px, 64px, 384px); } #new-tab-button[cui-areatype="menu-panel"], @@ -1311,6 +1314,25 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { #urlbar-icons { -moz-box-align: center; } +#urlbar-search-footer { + border-top: 1px solid rgba(24, 26, 27, 0.14); + background-color: rgba(24, 26, 27, 0.07); } + +#urlbar-search-settings { + -moz-appearance: none; + -moz-user-focus: ignore; + color: inherit; + margin: 0; + border: 0; + padding: 8px 20px; + background: transparent; } + +#urlbar-search-settings:hover { + background-color: rgba(24, 26, 27, 0.07); } + +#urlbar-search-settings:hover:active { + background-color: rgba(24, 26, 27, 0.12); } + #urlbar-search-splitter { -moz-appearance: none; width: 8px; } @@ -1327,14 +1349,57 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { -moz-margin-start: 0; color: GrayText; } +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] { + border-bottom: 1px solid rgba(24, 26, 27, 0.14); + background-color: rgba(24, 26, 27, 0.07); + padding: 6px 0; + -moz-padding-start: 44px; + -moz-padding-end: 6px; + background-image: url("chrome://browser/skin/info.svg"); + background-clip: padding-box; + background-position: 20px center; + background-repeat: no-repeat; + background-size: 16px 16px; } + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) { + background-position: right 20px center; } + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description { + margin: 0; + padding: 0; } + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link { + -moz-margin-start: 0; } + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button { + -moz-appearance: none; + -moz-user-focus: ignore; + min-width: 80px; + border-radius: 3px; + padding: 4px 16px; + margin: 0; + -moz-margin-start: 10px; } + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] { + color: #616161; + background-color: #e0e0e0; + border: 1px solid #d1d1d1; } + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover { + background-color: #d6d6d6; } + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] { + color: white; + background-color: #67cc14; + border: 1px solid #67cc14; } + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover { + background-color: #5eba12; } + #search-container { min-width: calc(54px + 11ch); } /* identity box */ -#identity-box { - padding: 1px; - font-size: .9em; } - #identity-box:-moz-locale-dir(ltr) { border-top-left-radius: 1.5px; border-bottom-left-radius: 1.5px; } @@ -1343,133 +1408,99 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { border-top-right-radius: 1.5px; border-bottom-right-radius: 1.5px; } -#notification-popup-box:not([hidden]) + #identity-box { - border-radius: 0; } - -window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box { - border-radius: 0; } - -/* forward button hiding is delayed when hovered */ -/* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */ -/* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */ -#urlbar[pageproxystate="valid"] > #identity-box.chromeUI, -#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { - -moz-margin-end: 4px; } - -#identity-box.verifiedIdentity:not(:-moz-lwtheme) { - background-color: var(--verified-identity-box-backgroundcolor); } +#identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) { + background-color: var(--identity-box-verified-background-color); } #identity-box:-moz-focusring { outline: 1px dotted #000; outline-offset: -3px; } -#identity-icon-labels { - -moz-padding-start: 2px; - -moz-padding-end: 5px; } - -:root { +#identity-box { --identity-box-verified-color: #479900; - --identity-box-verified-background-image: linear-gradient(transparent 15%, rgba(39, 74, 8, 0.2) 15%, rgba(39, 74, 8, 0.2) 85%, transparent 85%); --identity-box-chrome-color: #e57300; - --identity-box-chrome-background-image: linear-gradient(transparent 15%, rgba(229, 114, 0, 0.5) 15%, rgba(229, 114, 0, 0.5) 85%, transparent 85%); } - -#urlbar[pageproxystate="valid"] > #identity-box.chromeUI, -#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { - background-position: right; - background-size: 1px; - background-repeat: no-repeat; } - -#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:-moz-locale-dir(rtl), -#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:-moz-locale-dir(rtl) { - background-position: left; } + border-inline-end: 1px solid var(--urlbar-separator-color); + border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%); + border-image-slice: 1; + font-size: .9em; + padding: 3px 5px 3px 3px; + margin-inline-end: 4px; + overflow: hidden; } #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { - color: var(--identity-box-verified-color); - background-image: var(--identity-box-verified-background-image); } + color: var(--identity-box-verified-color); } #urlbar[pageproxystate="valid"] > #identity-box.chromeUI { - color: var(--identity-box-chrome-color); - background-image: var(--identity-box-chrome-background-image); } - -/* page proxy icon */ -#page-proxy-favicon { - width: 16px; - height: 16px; - list-style-image: url(chrome://browser/skin/identity-icons-generic.png); } + color: var(--identity-box-chrome-color); } -.chromeUI > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://branding/content/identity-icons-brand.png); } - -.verifiedDomain > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https.png); } - -.verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-ev.png); } +#identity-icon-labels { + padding-inline-start: 2px; } -.mixedActiveContent > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-active.png); } +#notification-popup-box:not([hidden]) + #identity-box { + padding-inline-start: 10px; + border-radius: 0; } -.mixedDisplayContent > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png); } +window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box { + border-radius: 0; } -.mixedDisplayContentLoadedActiveBlocked > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png); } +/* TRACKING PROTECTION ICON */ +#tracking-protection-icon { + width: 16px; + height: 16px; + margin-inline-start: 0; + margin-inline-end: 2px; + list-style-image: url(chrome://browser/skin/tracking-protection-16.svg); + opacity: 1; } -#page-proxy-favicon[pageproxystate="invalid"] { - opacity: 0.3; } +#tracking-protection-icon[state="loaded-tracking-content"] { + list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg); } -@media not all and (min-resolution: 1.1dppx) { - #page-proxy-favicon { - -moz-image-region: rect(0, 16px, 16px, 0); } +#tracking-protection-icon[animate] { + transition: margin-left 200ms ease-out, margin-right 200ms ease-out; } - #identity-box:hover > #page-proxy-favicon { - -moz-image-region: rect(0, 32px, 16px, 16px); } +#tracking-protection-icon:not([state]) { + margin-inline-start: -18px; + pointer-events: none; + opacity: 0; + /* Only animate the shield in, when it disappears hide it immediately. */ + transition: none; } - #identity-box:hover:active > #page-proxy-favicon, - #identity-box[open=true] > #page-proxy-favicon { - -moz-image-region: rect(0, 48px, 16px, 32px); } } -@media (min-resolution: 1.1dppx) { - #page-proxy-favicon { - list-style-image: url(chrome://browser/skin/identity-icons-generic@2x.png); - -moz-image-region: rect(0, 32px, 32px, 0); } +#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icons > #tracking-protection-icon { + visibility: collapse; } - .chromeUI > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://branding/content/identity-icons-brand@2x.png); } +/* MAIN IDENTITY ICON */ +#page-proxy-favicon { + width: 16px; + height: 16px; + list-style-image: url(chrome://browser/skin/identity-not-secure.svg); } - .verifiedDomain > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https@2x.png); } +.chromeUI > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://branding/content/identity-icons-brand.svg); } - .verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-ev@2x.png); } +.verifiedDomain > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], +.verifiedIdentity > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-secure.svg); } - .mixedActiveContent > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-active@2x.png); } +.mixedActiveContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg); } - .mixedDisplayContent > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display@2x.png); } +.weakCipher > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], +.mixedDisplayContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], +.mixedDisplayContentLoadedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg); } - .mixedDisplayContentLoadedActiveBlocked > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display@2x.png); } +.mixedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg); } - #identity-box:hover > #page-proxy-favicon { - -moz-image-region: rect(0, 64px, 32px, 32px); } +#page-proxy-favicon[pageproxystate="invalid"] { + opacity: 0.3; } - #identity-box:hover:active > #page-proxy-favicon, - #identity-box[open=true] > #page-proxy-favicon { - -moz-image-region: rect(0, 96px, 32px, 64px); } } -#urlbar[actiontype="searchengine"] > #identity-box > #page-proxy-favicon { +#urlbar[actiontype="searchengine"] > #identity-box > #identity-icons > #page-proxy-favicon { -moz-image-region: inherit; list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); width: 16px; height: 16px; opacity: 1; } -#page-proxy-favicon { - margin-top: 1px; - margin-bottom: 1px; - -moz-margin-start: 3px; - -moz-margin-end: 1px; } - .popup-notification-icon { width: 64px; height: 64px; @@ -1522,13 +1553,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box .popup-notification-icon[popupid="webapps-install"] { list-style-image: url(chrome://global/skin/icons/webapps-64.png); } -.popup-notification-icon[popupid="bad-content"] { - list-style-image: url(chrome://browser/skin/bad-content-blocked-64.png); } - -.popup-notification-icon[popupid="bad-content"][mixedblockdisabled], -.popup-notification-icon[popupid="bad-content"][trackingblockdisabled] { - list-style-image: url(chrome://browser/skin/bad-content-unblocked-64.png); } - .popup-notification-icon[popupid="webRTC-sharingDevices"], .popup-notification-icon[popupid="webRTC-shareDevices"] { list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64.png); } @@ -1634,14 +1658,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box opacity: 0; } to { opacity: 1; } } -.bad-content-blocked-notification-icon, -#bad-content-blocked-notification-icon { - list-style-image: url(chrome://browser/skin/bad-content-blocked-16.png); } - -.bad-content-unblocked-notification-icon, -#bad-content-unblocked-notification-icon { - list-style-image: url(chrome://browser/skin/bad-content-unblocked-16.png); } - .webRTC-shareDevices-notification-icon, #webRTC-shareDevices-notification-icon { list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16.png); } @@ -1760,9 +1776,7 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box /* Notification icon box */ #notification-popup-box { - border-radius: 2.5px 0 0 2.5px; - margin-top: -1px; - margin-bottom: -1px; } + border-radius: 2.5px 0 0 2.5px; } .notification-anchor-icon:-moz-focusring { outline: 1px dotted -moz-DialogText; } @@ -1935,7 +1949,9 @@ richlistitem[type~="action"][actiontype="searchengine"][selected="true"] > .ac-t width: 16px; height: 16px; } -.ac-comment { +.ac-comment, +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description, +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button { font-size: 1.05em; } .ac-extra > .ac-comment { @@ -2052,33 +2068,6 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- #page-report-button { list-style-image: url("chrome://browser/skin/Info.png"); } -/* Reading List button */ -#urlbar:not([focused]):not(:hover) #readinglist-addremove-button { - opacity: 0; - width: 0px; } - -#readinglist-addremove-button { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage"); - -moz-image-region: rect(0, 14px, 14px, 0); - transition: width 150ms ease-in-out, opacity 150ms ease-in-out 150ms; - opacity: 1; - width: 20px; } - -#readinglist-addremove-button:hover { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage-hover"); } - -#readinglist-addremove-button:active { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage-active"); } - -#readinglist-addremove-button[already-added="true"] { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded"); } - -#readinglist-addremove-button[already-added="true"]:hover { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded-hover"); } - -#readinglist-addremove-button[already-added="true"]:active { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded-active"); } - /* Reader mode button */ #reader-mode-button { list-style-image: url("chrome://browser/skin/readerMode.svg"); @@ -2276,9 +2265,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- --tab-min-height: 31px; } #TabsToolbar { - --tab-separator-image: url(chrome://browser/skin/tabbrowser/tab-separator.png); - --tab-separator-size: 3px 100%; - --tab-separator-opacity: 1; } + --tab-stroke-background-size: auto 100%; } /* image preloading hack */ #tabbrowser-tabs::before { @@ -2328,6 +2315,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- .tab-throbber, .tab-icon-image, +.tab-icon-sound, .tab-close-button { margin-top: 1px; } @@ -2348,9 +2336,28 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- display: none; } .tab-icon-overlay[crashed] { - display: -moz-box; list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg"); } +.tab-icon-overlay[soundplaying], +.tab-icon-overlay[muted]:not([crashed]) { + border-radius: 8px; } + +.tab-icon-overlay[soundplaying]:hover, +.tab-icon-overlay[muted]:not([crashed]):hover { + background-color: white; } + +.tab-icon-overlay[soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio"); } + +.tab-icon-overlay[muted]:not([crashed]) { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted"); } + +#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white"); } + +#TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted"); } + .tab-throbber[busy] { list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png"); } @@ -2366,6 +2373,66 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-margin-end: -2px; padding: 0; } +.tab-icon-sound { + -moz-margin-start: 4px; + width: 16px; + height: 16px; + padding: 0; } + +.tab-icon-sound[soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab"); } + +.tab-icon-sound[soundplaying]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-hover"); } + +.tab-icon-sound[soundplaying]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-pressed"); } + +.tab-icon-sound[muted] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted"); } + +.tab-icon-sound[muted]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-hover"); } + +.tab-icon-sound[muted]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-pressed"); } + +.tab-icon-sound[visuallyselected=true][soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio"); } + +.tab-icon-sound[visuallyselected=true][soundplaying]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover"); } + +.tab-icon-sound[visuallyselected=true][soundplaying]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed"); } + +.tab-icon-sound[visuallyselected=true][muted] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted"); } + +.tab-icon-sound[visuallyselected=true][muted]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover"); } + +.tab-icon-sound[visuallyselected=true][muted]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed"); } + +#TabsToolbar[brighttext] .tab-icon-sound[soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white"); } + +#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover"); } + +#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed"); } + +#TabsToolbar[brighttext] .tab-icon-sound[muted] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white"); } + +#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover"); } + +#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed"); } + .tab-background, .tabs-newtab-button { /* overlap the tab curves */ @@ -2473,7 +2540,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- background-color: transparent; background-image: url(chrome://browser/skin/custom_images/darker/tabs/tab-middle.svg); background-repeat: repeat-x; - background-size: auto 100%; + background-size: var(--tab-stroke-background-size); /* The padding-top combined with background-clip: content-box (the bottom-most) ensure the background-color doesn't extend above the top border. */ padding-top: 2px; } @@ -2486,7 +2553,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- /*, lwtHeader;*/ /* Don't stretch the LWT header images */ - background-size: auto 100%, auto 100%, auto auto; } + background-size: var(--tab-stroke-background-size), auto 100%, auto auto; } /* These LWT styles are normally overridden by browser-lightweightTheme.css */ .tab-background-start[visuallyselected=true]:-moz-lwtheme::before, @@ -2513,6 +2580,9 @@ lwtHeader;*/ .tab-background-middle, .tabs-newtab-button, +.tab-icon-overlay[soundplaying], +.tab-icon-overlay[muted]:not([crashed]), +.tab-icon-sound, .tab-close-button { pointer-events: auto; } @@ -2550,8 +2620,9 @@ lwtHeader;*/ #TabsToolbar:not(:-moz-lwtheme):-moz-system-metric(menubar-drag) { -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-drag"); } -.tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-label { - outline: 1px dotted; } +.tabbrowser-tab:focus > .tab-stack > .tab-content { + outline: 1px dotted; + outline-offset: -6px; } #context_reloadTab { list-style-image: url("moz-icon://stock/gtk-refresh?size=menu"); } @@ -2756,19 +2827,12 @@ toolbarbutton.chevron > .toolbarbutton-icon { padding: 30px 50px; box-shadow: 0 0 2px white; } -#full-screen-warning-container[obscure-browser] { - background-color: rgba(0, 0, 0, 0.3); } - .full-screen-description { font-size: 150%; } #full-screen-domain-text { font-size: 300%; } -.full-screen-approval-button, -#full-screen-remember-decision { - font-size: 120%; } - /* Responsive Mode */ .browserContainer[responsivemode] { background-color: #222; @@ -3294,23 +3358,6 @@ notification.pluginVulnerable { notification.pluginVulnerable .messageImage { list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png"); } -.popup-notification-item-title[popupid="bad-content"] { - font-weight: bold; } - -.popup-notification-item-message[popupid="bad-content"] { - width: 17em; } - -.popup-notification-item-message[popupid="bad-content"][mixedblockdisabled]:not(.popup-notification-item-message-critical), -.popup-notification-item-message[popupid="bad-content"][trackingblockdisabled]:not(.popup-notification-item-message-critical) { - color: GrayText; } - -.popup-notification-item-message-critical[popupid="bad-content"] { - color: #d74345; - font-style: italic; } - -.popup-notification-footer[popupid="bad-content"] { - padding-top: 1em; } - #notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent { /* Since we display a sliding subview that extends to the border, we cannot * keep the default padding of arrow panels. We use the same padding in the @@ -3960,13 +4007,13 @@ toolbarpaletteitem[notransition][place="panel"] { transition: none; } toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon, -toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-container > .toolbarbutton-icon, +toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon, toolbarpaletteitem > toolbaritem.panel-wide-item, toolbarpaletteitem > toolbarbutton[type="menu-button"] { transition: transform 0.3s cubic-bezier(0.6, 2, 0.75, 1.5) !important; } toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon, -toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-container > .toolbarbutton-icon { +toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon { transform: scale(1.3); } toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item, @@ -4286,9 +4333,11 @@ toolbarpaletteitem[place="toolbar"] { margin: 24px -16px -16px; padding: 2em 15px; } +#UITourTooltipButtons > label, #UITourTooltipButtons > button { margin: 0 15px; } +#UITourTooltipButtons > label:first-child, #UITourTooltipButtons > button:first-child { -moz-margin-start: 0; } @@ -4297,6 +4346,7 @@ toolbarpaletteitem[place="toolbar"] { height: 16px; -moz-margin-end: 5px; } +#UITourTooltipButtons > label, #UITourTooltipButtons > button .button-text { font-size: 1.15rem; } @@ -4316,6 +4366,7 @@ toolbarpaletteitem[place="toolbar"] { border-color: rgba(24, 26, 27, 0.15); box-shadow: 0 1px 0 0 rgba(24, 26, 27, 0.05) inset; } +#UITourTooltipButtons > label, #UITourTooltipButtons > button.button-link { -moz-appearance: none; background: transparent; @@ -4535,3 +4586,6 @@ notification.heartbeat { /* override toolkit/themes/linux/global/menu.css */ -moz-padding-end: 0 !important; -moz-margin-end: 0 !important; } + +.browser-action-panel > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; } diff --git a/arc-firefox-theme/chrome/browser/sass/browser-light.css b/arc-firefox-theme/chrome/browser/sass/browser-light.css index 5aed89b..c95f45b 100644 --- a/arc-firefox-theme/chrome/browser/sass/browser-light.css +++ b/arc-firefox-theme/chrome/browser/sass/browser-light.css @@ -62,8 +62,8 @@ #TabsToolbar:not([collapsed="true"]) + #nav-bar { border-top: 1px solid rgba(212, 213, 219, 0.95) !important; background-clip: padding-box; - margin-top: -1px; /* Move up into the TabsToolbar for the inner highlight at the top of the nav-bar */ + margin-top: calc(-1 * var(--navbar-tab-toolbar-highlight-overlap)); /* Position the toolbar above the bottom of background tabs */ position: relative; z-index: 1; } @@ -99,7 +99,7 @@ /* Places toolbar */ toolbarbutton.bookmark-item:not(.subviewbutton), #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder { - margin: 1px; + margin: 0; padding: 2px 3px; } toolbarbutton.bookmark-item:not(.subviewbutton):not(:hover):not(:active):not([open]) { @@ -283,7 +283,7 @@ menuitem.bookmark-item { opacity: 0.7; } /* Stock icons for the menu bar items */ -menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { +menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip):not([endimage]) { -moz-binding: url("chrome://global/content/bindings/menu.xml#menuitem-iconic"); } #placesContext_open\:newwindow, @@ -442,10 +442,6 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { #panelMenu_unsortedBookmarks { list-style-image: url("chrome://browser/skin/places/unsortedBookmarks.png"); } -#menu_readingList, -#BMB_readingList { - list-style-image: url("chrome://browser/skin/readinglist/readinglist-icon.svg"); } - #panelMenu_pocket, #menu_pocket, #BMB_pocket { @@ -495,7 +491,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { .findbar-button > .toolbarbutton-text, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-badge-container, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-badge-stack, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-icon { -moz-margin-end: 0; padding: 2px 6px; @@ -505,13 +501,13 @@ 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, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-badge-container, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-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, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon { padding: 3px 7px; } /* Help SDK icons fit: */ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon, -toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-container > .toolbarbutton-icon { +toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon { width: 16px; } :-moz-any(#TabsToolbar, #nav-bar) toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon { @@ -531,7 +527,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open]:not([disabled=true]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):not([open]):hover > .toolbarbutton-menubutton-button > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):not([open]):hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-badge-container, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-badge-stack, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-icon { background: var(--toolbarbutton-hover-background); border-width: 1px; @@ -553,7 +549,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba .findbar-button:not([disabled=true]):-moz-any([checked="true"], :hover:active) > .toolbarbutton-text, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([open="true"]) > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open="true"]) > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-container, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-stack, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-icon { background: var(--toolbarbutton-active-background); box-shadow: var(--toolbarbutton-active-boxshadow); @@ -564,7 +560,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open="true"]) > .toolbarbutton-icon, #TabsToolbar .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon, -#TabsToolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-container, +#TabsToolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-stack, #TabsToolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-icon { background: none; color: #ffffff; @@ -743,6 +739,13 @@ toolbar[brighttext] #sync-button[status="active"] { #PanelUI-menu-button { -moz-image-region: rect(0, 486px, 18px, 468px); } +#PanelUI-menu-button.thumburger { + list-style-image: url("chrome://browser/skin/customizableui/thumburger.png") !important; + -moz-image-region: auto !important; } + +toolbar[brighttext] #PanelUI-menu-button.thumburger { + list-style-image: url("chrome://browser/skin/customizableui/thumburger-inverted.png") !important; } + #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button { -moz-image-region: rect(0, 504px, 18px, 486px); } @@ -785,30 +788,30 @@ toolbar[brighttext] #sync-button[status="active"] { #web-apps-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 720px, 18px, 702px); } -#loop-button > .toolbarbutton-badge-container { +#loop-button { list-style-image: url(chrome://browser/skin/loop/toolbar.png); -moz-image-region: rect(0, 18px, 18px, 0); } -toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { +toolbar[brighttext] #loop-button { list-style-image: url(chrome://browser/skin/loop/toolbar-inverted.png); } -#loop-button[state="disabled"] > .toolbarbutton-badge-container, -#loop-button[disabled="true"] > .toolbarbutton-badge-container { +#loop-button[state="disabled"], +#loop-button[disabled="true"] { -moz-image-region: rect(0, 36px, 18px, 18px); } -#loop-button:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container { +#loop-button:not([disabled="true"])[state="error"] { -moz-image-region: rect(0, 54px, 18px, 36px); } -#loop-button:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container { +#loop-button:not([disabled="true"])[state="action"] { -moz-image-region: rect(0, 72px, 18px, 54px); } -#loop-button:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { +#loop-button:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) { -moz-image-region: rect(0, 90px, 18px, 72px); } -#loop-button:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container { +#loop-button:not([disabled="true"])[state="active"] { -moz-image-region: rect(0, 108px, 18px, 90px); } -#loop-button:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { +#loop-button:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) { -moz-image-region: rect(0, 126px, 18px, 108px); } #webide-button[cui-areatype="toolbar"] { @@ -972,32 +975,32 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { toolbaritem[sdkstylewidget="true"] > toolbarbutton { -moz-image-region: rect(0, 832px, 32px, 800px); } - #loop-button[cui-areatype="menu-panel"] > .toolbarbutton-badge-container, - toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #loop-button { list-style-image: url(chrome://browser/skin/loop/menuPanel.png); -moz-image-region: rect(0, 32px, 32px, 0); } /* Make sure that the state icons are not shown in the customization palette. */ - toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container { + toolbarpaletteitem[place="palette"] > #loop-button { -moz-image-region: rect(0, 32px, 32px, 0) !important; } - #loop-button[cui-areatype="menu-panel"][state="disabled"] > .toolbarbutton-badge-container, - #loop-button[cui-areatype="menu-panel"][disabled="true"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"][state="disabled"], + #loop-button[cui-areatype="menu-panel"][disabled="true"] { -moz-image-region: rect(0, 64px, 32px, 32px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] { -moz-image-region: rect(0, 96px, 32px, 64px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] { -moz-image-region: rect(0, 128px, 32px, 96px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) { -moz-image-region: rect(0, 160px, 32px, 128px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] { -moz-image-region: rect(0, 192px, 32px, 160px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) { -moz-image-region: rect(0, 224px, 32px, 192px); } /* Wide panel control icons */ @@ -1116,32 +1119,32 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { #pocket-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { -moz-image-region: rect(64px, 1984px, 128px, 1920px); } - #loop-button[cui-areatype="menu-panel"] > .toolbarbutton-badge-container, - toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"], + toolbarpaletteitem[place="palette"] > #loop-button { list-style-image: url(chrome://browser/skin/loop/menuPanel@2x.png); -moz-image-region: rect(0, 64px, 64px, 0); } /* Make sure that the state icons are not shown in the customization palette. */ - toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container { + toolbarpaletteitem[place="palette"] > #loop-button { -moz-image-region: rect(0, 64px, 64px, 0) !important; } - #loop-button[cui-areatype="menu-panel"][state="disabled"] > .toolbarbutton-badge-container, - #loop-button[cui-areatype="menu-panel"][disabled="true"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"][state="disabled"], + #loop-button[cui-areatype="menu-panel"][disabled="true"] { -moz-image-region: rect(0, 128px, 64px, 64px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] { -moz-image-region: rect(0, 192px, 64px, 128px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] { -moz-image-region: rect(0, 256px, 64px, 192px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) { -moz-image-region: rect(0, 320px, 64px, 256px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] { -moz-image-region: rect(0, 384px, 64px, 320px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { + #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) { -moz-image-region: rect(0, 448px, 64px, 384px); } #new-tab-button[cui-areatype="menu-panel"], @@ -1311,6 +1314,25 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { #urlbar-icons { -moz-box-align: center; } +#urlbar-search-footer { + border-top: 1px solid rgba(24, 26, 27, 0.14); + background-color: rgba(24, 26, 27, 0.07); } + +#urlbar-search-settings { + -moz-appearance: none; + -moz-user-focus: ignore; + color: inherit; + margin: 0; + border: 0; + padding: 8px 20px; + background: transparent; } + +#urlbar-search-settings:hover { + background-color: rgba(24, 26, 27, 0.07); } + +#urlbar-search-settings:hover:active { + background-color: rgba(24, 26, 27, 0.12); } + #urlbar-search-splitter { -moz-appearance: none; width: 8px; } @@ -1327,14 +1349,57 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { -moz-margin-start: 0; color: GrayText; } +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] { + border-bottom: 1px solid rgba(24, 26, 27, 0.14); + background-color: rgba(24, 26, 27, 0.07); + padding: 6px 0; + -moz-padding-start: 44px; + -moz-padding-end: 6px; + background-image: url("chrome://browser/skin/info.svg"); + background-clip: padding-box; + background-position: 20px center; + background-repeat: no-repeat; + background-size: 16px 16px; } + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) { + background-position: right 20px center; } + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description { + margin: 0; + padding: 0; } + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link { + -moz-margin-start: 0; } + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button { + -moz-appearance: none; + -moz-user-focus: ignore; + min-width: 80px; + border-radius: 3px; + padding: 4px 16px; + margin: 0; + -moz-margin-start: 10px; } + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] { + color: #616161; + background-color: #e0e0e0; + border: 1px solid #d1d1d1; } + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover { + background-color: #d6d6d6; } + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] { + color: white; + background-color: #67cc14; + border: 1px solid #67cc14; } + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover { + background-color: #5eba12; } + #search-container { min-width: calc(54px + 11ch); } /* identity box */ -#identity-box { - padding: 1px; - font-size: .9em; } - #identity-box:-moz-locale-dir(ltr) { border-top-left-radius: 1.5px; border-bottom-left-radius: 1.5px; } @@ -1343,133 +1408,99 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { border-top-right-radius: 1.5px; border-bottom-right-radius: 1.5px; } -#notification-popup-box:not([hidden]) + #identity-box { - border-radius: 0; } - -window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box { - border-radius: 0; } - -/* forward button hiding is delayed when hovered */ -/* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */ -/* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */ -#urlbar[pageproxystate="valid"] > #identity-box.chromeUI, -#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { - -moz-margin-end: 4px; } - -#identity-box.verifiedIdentity:not(:-moz-lwtheme) { - background-color: var(--verified-identity-box-backgroundcolor); } +#identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) { + background-color: var(--identity-box-verified-background-color); } #identity-box:-moz-focusring { outline: 1px dotted #000; outline-offset: -3px; } -#identity-icon-labels { - -moz-padding-start: 2px; - -moz-padding-end: 5px; } - -:root { +#identity-box { --identity-box-verified-color: #479900; - --identity-box-verified-background-image: linear-gradient(transparent 15%, rgba(39, 74, 8, 0.2) 15%, rgba(39, 74, 8, 0.2) 85%, transparent 85%); --identity-box-chrome-color: #e57300; - --identity-box-chrome-background-image: linear-gradient(transparent 15%, rgba(229, 114, 0, 0.5) 15%, rgba(229, 114, 0, 0.5) 85%, transparent 85%); } - -#urlbar[pageproxystate="valid"] > #identity-box.chromeUI, -#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { - background-position: right; - background-size: 1px; - background-repeat: no-repeat; } - -#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:-moz-locale-dir(rtl), -#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:-moz-locale-dir(rtl) { - background-position: left; } + border-inline-end: 1px solid var(--urlbar-separator-color); + border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%); + border-image-slice: 1; + font-size: .9em; + padding: 3px 5px 3px 3px; + margin-inline-end: 4px; + overflow: hidden; } #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { - color: var(--identity-box-verified-color); - background-image: var(--identity-box-verified-background-image); } + color: var(--identity-box-verified-color); } #urlbar[pageproxystate="valid"] > #identity-box.chromeUI { - color: var(--identity-box-chrome-color); - background-image: var(--identity-box-chrome-background-image); } - -/* page proxy icon */ -#page-proxy-favicon { - width: 16px; - height: 16px; - list-style-image: url(chrome://browser/skin/identity-icons-generic.png); } + color: var(--identity-box-chrome-color); } -.chromeUI > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://branding/content/identity-icons-brand.png); } - -.verifiedDomain > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https.png); } - -.verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-ev.png); } +#identity-icon-labels { + padding-inline-start: 2px; } -.mixedActiveContent > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-active.png); } +#notification-popup-box:not([hidden]) + #identity-box { + padding-inline-start: 10px; + border-radius: 0; } -.mixedDisplayContent > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png); } +window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box { + border-radius: 0; } -.mixedDisplayContentLoadedActiveBlocked > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png); } +/* TRACKING PROTECTION ICON */ +#tracking-protection-icon { + width: 16px; + height: 16px; + margin-inline-start: 0; + margin-inline-end: 2px; + list-style-image: url(chrome://browser/skin/tracking-protection-16.svg); + opacity: 1; } -#page-proxy-favicon[pageproxystate="invalid"] { - opacity: 0.3; } +#tracking-protection-icon[state="loaded-tracking-content"] { + list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg); } -@media not all and (min-resolution: 1.1dppx) { - #page-proxy-favicon { - -moz-image-region: rect(0, 16px, 16px, 0); } +#tracking-protection-icon[animate] { + transition: margin-left 200ms ease-out, margin-right 200ms ease-out; } - #identity-box:hover > #page-proxy-favicon { - -moz-image-region: rect(0, 32px, 16px, 16px); } +#tracking-protection-icon:not([state]) { + margin-inline-start: -18px; + pointer-events: none; + opacity: 0; + /* Only animate the shield in, when it disappears hide it immediately. */ + transition: none; } - #identity-box:hover:active > #page-proxy-favicon, - #identity-box[open=true] > #page-proxy-favicon { - -moz-image-region: rect(0, 48px, 16px, 32px); } } -@media (min-resolution: 1.1dppx) { - #page-proxy-favicon { - list-style-image: url(chrome://browser/skin/identity-icons-generic@2x.png); - -moz-image-region: rect(0, 32px, 32px, 0); } +#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icons > #tracking-protection-icon { + visibility: collapse; } - .chromeUI > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://branding/content/identity-icons-brand@2x.png); } +/* MAIN IDENTITY ICON */ +#page-proxy-favicon { + width: 16px; + height: 16px; + list-style-image: url(chrome://browser/skin/identity-not-secure.svg); } - .verifiedDomain > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https@2x.png); } +.chromeUI > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://branding/content/identity-icons-brand.svg); } - .verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-ev@2x.png); } +.verifiedDomain > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], +.verifiedIdentity > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-secure.svg); } - .mixedActiveContent > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-active@2x.png); } +.mixedActiveContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg); } - .mixedDisplayContent > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display@2x.png); } +.weakCipher > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], +.mixedDisplayContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], +.mixedDisplayContentLoadedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg); } - .mixedDisplayContentLoadedActiveBlocked > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display@2x.png); } +.mixedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg); } - #identity-box:hover > #page-proxy-favicon { - -moz-image-region: rect(0, 64px, 32px, 32px); } +#page-proxy-favicon[pageproxystate="invalid"] { + opacity: 0.3; } - #identity-box:hover:active > #page-proxy-favicon, - #identity-box[open=true] > #page-proxy-favicon { - -moz-image-region: rect(0, 96px, 32px, 64px); } } -#urlbar[actiontype="searchengine"] > #identity-box > #page-proxy-favicon { +#urlbar[actiontype="searchengine"] > #identity-box > #identity-icons > #page-proxy-favicon { -moz-image-region: inherit; list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); width: 16px; height: 16px; opacity: 1; } -#page-proxy-favicon { - margin-top: 1px; - margin-bottom: 1px; - -moz-margin-start: 3px; - -moz-margin-end: 1px; } - .popup-notification-icon { width: 64px; height: 64px; @@ -1522,13 +1553,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box .popup-notification-icon[popupid="webapps-install"] { list-style-image: url(chrome://global/skin/icons/webapps-64.png); } -.popup-notification-icon[popupid="bad-content"] { - list-style-image: url(chrome://browser/skin/bad-content-blocked-64.png); } - -.popup-notification-icon[popupid="bad-content"][mixedblockdisabled], -.popup-notification-icon[popupid="bad-content"][trackingblockdisabled] { - list-style-image: url(chrome://browser/skin/bad-content-unblocked-64.png); } - .popup-notification-icon[popupid="webRTC-sharingDevices"], .popup-notification-icon[popupid="webRTC-shareDevices"] { list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64.png); } @@ -1634,14 +1658,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box opacity: 0; } to { opacity: 1; } } -.bad-content-blocked-notification-icon, -#bad-content-blocked-notification-icon { - list-style-image: url(chrome://browser/skin/bad-content-blocked-16.png); } - -.bad-content-unblocked-notification-icon, -#bad-content-unblocked-notification-icon { - list-style-image: url(chrome://browser/skin/bad-content-unblocked-16.png); } - .webRTC-shareDevices-notification-icon, #webRTC-shareDevices-notification-icon { list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16.png); } @@ -1760,9 +1776,7 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box /* Notification icon box */ #notification-popup-box { - border-radius: 2.5px 0 0 2.5px; - margin-top: -1px; - margin-bottom: -1px; } + border-radius: 2.5px 0 0 2.5px; } .notification-anchor-icon:-moz-focusring { outline: 1px dotted -moz-DialogText; } @@ -1935,7 +1949,9 @@ richlistitem[type~="action"][actiontype="searchengine"][selected="true"] > .ac-t width: 16px; height: 16px; } -.ac-comment { +.ac-comment, +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description, +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button { font-size: 1.05em; } .ac-extra > .ac-comment { @@ -2052,33 +2068,6 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- #page-report-button { list-style-image: url("chrome://browser/skin/Info.png"); } -/* Reading List button */ -#urlbar:not([focused]):not(:hover) #readinglist-addremove-button { - opacity: 0; - width: 0px; } - -#readinglist-addremove-button { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage"); - -moz-image-region: rect(0, 14px, 14px, 0); - transition: width 150ms ease-in-out, opacity 150ms ease-in-out 150ms; - opacity: 1; - width: 20px; } - -#readinglist-addremove-button:hover { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage-hover"); } - -#readinglist-addremove-button:active { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage-active"); } - -#readinglist-addremove-button[already-added="true"] { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded"); } - -#readinglist-addremove-button[already-added="true"]:hover { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded-hover"); } - -#readinglist-addremove-button[already-added="true"]:active { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded-active"); } - /* Reader mode button */ #reader-mode-button { list-style-image: url("chrome://browser/skin/readerMode.svg"); @@ -2276,9 +2265,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- --tab-min-height: 31px; } #TabsToolbar { - --tab-separator-image: url(chrome://browser/skin/tabbrowser/tab-separator.png); - --tab-separator-size: 3px 100%; - --tab-separator-opacity: 1; } + --tab-stroke-background-size: auto 100%; } /* image preloading hack */ #tabbrowser-tabs::before { @@ -2328,6 +2315,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- .tab-throbber, .tab-icon-image, +.tab-icon-sound, .tab-close-button { margin-top: 1px; } @@ -2348,9 +2336,28 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- display: none; } .tab-icon-overlay[crashed] { - display: -moz-box; list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg"); } +.tab-icon-overlay[soundplaying], +.tab-icon-overlay[muted]:not([crashed]) { + border-radius: 8px; } + +.tab-icon-overlay[soundplaying]:hover, +.tab-icon-overlay[muted]:not([crashed]):hover { + background-color: white; } + +.tab-icon-overlay[soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio"); } + +.tab-icon-overlay[muted]:not([crashed]) { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted"); } + +#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white"); } + +#TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted"); } + .tab-throbber[busy] { list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png"); } @@ -2366,6 +2373,66 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-margin-end: -2px; padding: 0; } +.tab-icon-sound { + -moz-margin-start: 4px; + width: 16px; + height: 16px; + padding: 0; } + +.tab-icon-sound[soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab"); } + +.tab-icon-sound[soundplaying]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-hover"); } + +.tab-icon-sound[soundplaying]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-pressed"); } + +.tab-icon-sound[muted] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted"); } + +.tab-icon-sound[muted]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-hover"); } + +.tab-icon-sound[muted]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-pressed"); } + +.tab-icon-sound[visuallyselected=true][soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio"); } + +.tab-icon-sound[visuallyselected=true][soundplaying]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover"); } + +.tab-icon-sound[visuallyselected=true][soundplaying]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed"); } + +.tab-icon-sound[visuallyselected=true][muted] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted"); } + +.tab-icon-sound[visuallyselected=true][muted]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover"); } + +.tab-icon-sound[visuallyselected=true][muted]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed"); } + +#TabsToolbar[brighttext] .tab-icon-sound[soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white"); } + +#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover"); } + +#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed"); } + +#TabsToolbar[brighttext] .tab-icon-sound[muted] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white"); } + +#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover"); } + +#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed"); } + .tab-background, .tabs-newtab-button { /* overlap the tab curves */ @@ -2473,7 +2540,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- background-color: transparent; background-image: url(chrome://browser/skin/custom_images/light/tabs/tab-middle.svg); background-repeat: repeat-x; - background-size: auto 100%; + background-size: var(--tab-stroke-background-size); /* The padding-top combined with background-clip: content-box (the bottom-most) ensure the background-color doesn't extend above the top border. */ padding-top: 2px; } @@ -2486,7 +2553,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- /*, lwtHeader;*/ /* Don't stretch the LWT header images */ - background-size: auto 100%, auto 100%, auto auto; } + background-size: var(--tab-stroke-background-size), auto 100%, auto auto; } /* These LWT styles are normally overridden by browser-lightweightTheme.css */ .tab-background-start[visuallyselected=true]:-moz-lwtheme::before, @@ -2513,6 +2580,9 @@ lwtHeader;*/ .tab-background-middle, .tabs-newtab-button, +.tab-icon-overlay[soundplaying], +.tab-icon-overlay[muted]:not([crashed]), +.tab-icon-sound, .tab-close-button { pointer-events: auto; } @@ -2550,8 +2620,9 @@ lwtHeader;*/ #TabsToolbar:not(:-moz-lwtheme):-moz-system-metric(menubar-drag) { -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-drag"); } -.tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-label { - outline: 1px dotted; } +.tabbrowser-tab:focus > .tab-stack > .tab-content { + outline: 1px dotted; + outline-offset: -6px; } #context_reloadTab { list-style-image: url("moz-icon://stock/gtk-refresh?size=menu"); } @@ -2756,19 +2827,12 @@ toolbarbutton.chevron > .toolbarbutton-icon { padding: 30px 50px; box-shadow: 0 0 2px white; } -#full-screen-warning-container[obscure-browser] { - background-color: rgba(0, 0, 0, 0.3); } - .full-screen-description { font-size: 150%; } #full-screen-domain-text { font-size: 300%; } -.full-screen-approval-button, -#full-screen-remember-decision { - font-size: 120%; } - /* Responsive Mode */ .browserContainer[responsivemode] { background-color: #222; @@ -3294,23 +3358,6 @@ notification.pluginVulnerable { notification.pluginVulnerable .messageImage { list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png"); } -.popup-notification-item-title[popupid="bad-content"] { - font-weight: bold; } - -.popup-notification-item-message[popupid="bad-content"] { - width: 17em; } - -.popup-notification-item-message[popupid="bad-content"][mixedblockdisabled]:not(.popup-notification-item-message-critical), -.popup-notification-item-message[popupid="bad-content"][trackingblockdisabled]:not(.popup-notification-item-message-critical) { - color: GrayText; } - -.popup-notification-item-message-critical[popupid="bad-content"] { - color: #d74345; - font-style: italic; } - -.popup-notification-footer[popupid="bad-content"] { - padding-top: 1em; } - #notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent { /* Since we display a sliding subview that extends to the border, we cannot * keep the default padding of arrow panels. We use the same padding in the @@ -3960,13 +4007,13 @@ toolbarpaletteitem[notransition][place="panel"] { transition: none; } toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon, -toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-container > .toolbarbutton-icon, +toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon, toolbarpaletteitem > toolbaritem.panel-wide-item, toolbarpaletteitem > toolbarbutton[type="menu-button"] { transition: transform 0.3s cubic-bezier(0.6, 2, 0.75, 1.5) !important; } toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon, -toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-container > .toolbarbutton-icon { +toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon { transform: scale(1.3); } toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item, @@ -4286,9 +4333,11 @@ toolbarpaletteitem[place="toolbar"] { margin: 24px -16px -16px; padding: 2em 15px; } +#UITourTooltipButtons > label, #UITourTooltipButtons > button { margin: 0 15px; } +#UITourTooltipButtons > label:first-child, #UITourTooltipButtons > button:first-child { -moz-margin-start: 0; } @@ -4297,6 +4346,7 @@ toolbarpaletteitem[place="toolbar"] { height: 16px; -moz-margin-end: 5px; } +#UITourTooltipButtons > label, #UITourTooltipButtons > button .button-text { font-size: 1.15rem; } @@ -4316,6 +4366,7 @@ toolbarpaletteitem[place="toolbar"] { border-color: rgba(24, 26, 27, 0.15); box-shadow: 0 1px 0 0 rgba(24, 26, 27, 0.05) inset; } +#UITourTooltipButtons > label, #UITourTooltipButtons > button.button-link { -moz-appearance: none; background: transparent; @@ -4535,3 +4586,6 @@ notification.heartbeat { /* override toolkit/themes/linux/global/menu.css */ -moz-padding-end: 0 !important; -moz-margin-end: 0 !important; } + +.browser-action-panel > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; } diff --git a/arc-firefox-theme/chrome/browser/search-arrow-go.svg b/arc-firefox-theme/chrome/browser/search-arrow-go.svg new file mode 100644 index 0000000..ddddff1 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/search-arrow-go.svg @@ -0,0 +1,22 @@ + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/search-indicator-magnifying-glass.svg b/arc-firefox-theme/chrome/browser/search-indicator-magnifying-glass.svg new file mode 100644 index 0000000..15bddfb --- /dev/null +++ b/arc-firefox-theme/chrome/browser/search-indicator-magnifying-glass.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/arc-firefox-theme/chrome/browser/searchbar.css b/arc-firefox-theme/chrome/browser/searchbar.css index 4627bba..08fd9dd 100644 --- a/arc-firefox-theme/chrome/browser/searchbar.css +++ b/arc-firefox-theme/chrome/browser/searchbar.css @@ -7,11 +7,6 @@ padding: 1px; } -.searchbar-textbox { - min-height: 22px; - background-color: -moz-field; -} - .autocomplete-textbox-container { -moz-box-align: stretch; } @@ -81,6 +76,8 @@ menuitem[cmd="cmd_clearhistory"][disabled] { .searchbar-search-button { list-style-image: url("chrome://browser/skin/search-indicator.png"); -moz-image-region: rect(0, 20px, 20px, 0); + margin-top: 1px; + margin-bottom: 1px; -moz-margin-start: 2px; } diff --git a/arc-firefox-theme/chrome/browser/tabbrowser/pendingpaint.png b/arc-firefox-theme/chrome/browser/tabbrowser/pendingpaint.png index 82bac53..512b525 100644 Binary files a/arc-firefox-theme/chrome/browser/tabbrowser/pendingpaint.png and b/arc-firefox-theme/chrome/browser/tabbrowser/pendingpaint.png differ diff --git a/arc-firefox-theme/chrome/browser/tabbrowser/tab-audio-small.svg b/arc-firefox-theme/chrome/browser/tabbrowser/tab-audio-small.svg new file mode 100644 index 0000000..27a36c4 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/tabbrowser/tab-audio-small.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/tabbrowser/tab-audio.svg b/arc-firefox-theme/chrome/browser/tabbrowser/tab-audio.svg new file mode 100644 index 0000000..e62a69f --- /dev/null +++ b/arc-firefox-theme/chrome/browser/tabbrowser/tab-audio.svg @@ -0,0 +1,87 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/tracking-protection-16.svg b/arc-firefox-theme/chrome/browser/tracking-protection-16.svg new file mode 100755 index 0000000..ebe6b5f --- /dev/null +++ b/arc-firefox-theme/chrome/browser/tracking-protection-16.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/tracking-protection-disabled-16.svg b/arc-firefox-theme/chrome/browser/tracking-protection-disabled-16.svg new file mode 100755 index 0000000..b0c68d2 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/tracking-protection-disabled-16.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/update-badge-failed.svg b/arc-firefox-theme/chrome/browser/update-badge-failed.svg new file mode 100644 index 0000000..e31e6ec --- /dev/null +++ b/arc-firefox-theme/chrome/browser/update-badge-failed.svg @@ -0,0 +1,6 @@ + + + + diff --git a/arc-firefox-theme/chrome/browser/urlbar-arrow.png b/arc-firefox-theme/chrome/browser/urlbar-arrow.png index fcab253..ed83d8a 100644 Binary files a/arc-firefox-theme/chrome/browser/urlbar-arrow.png and b/arc-firefox-theme/chrome/browser/urlbar-arrow.png differ diff --git a/arc-firefox-theme/chrome/browser/warning.svg b/arc-firefox-theme/chrome/browser/warning.svg new file mode 100644 index 0000000..7befd73 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/warning.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/arc-firefox-theme/chrome/browser/warning16.png b/arc-firefox-theme/chrome/browser/warning16.png deleted file mode 100644 index 46200ce..0000000 Binary files a/arc-firefox-theme/chrome/browser/warning16.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/warning16@2x.png b/arc-firefox-theme/chrome/browser/warning16@2x.png deleted file mode 100644 index d1426d3..0000000 Binary files a/arc-firefox-theme/chrome/browser/warning16@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/global/menu.css b/arc-firefox-theme/chrome/global/menu.css index 61de49d..c2c779b 100644 --- a/arc-firefox-theme/chrome/global/menu.css +++ b/arc-firefox-theme/chrome/global/menu.css @@ -80,6 +80,7 @@ menulist > menupopup > menu { .menu-text, .menu-iconic-left, +.menu-iconic-right, .menu-iconic-text { margin-top: 0px !important; margin-bottom: 0px !important; @@ -118,7 +119,8 @@ menucaption > .menu-iconic-text { -moz-box-pack: end; } -.menu-iconic-left { +.menu-iconic-left, +.menu-iconic-right { width: 16px; /* We can only hardcode this, to make the default GTK icon<->label spacing */ -moz-padding-end: 3px !important; @@ -158,7 +160,10 @@ menucaption > .menu-iconic-text { menulist > menupopup > menuitem > .menu-iconic-left, menulist > menupopup > menucaption > .menu-iconic-left, -menulist > menupopup > menu > .menu-iconic-left { +menulist > menupopup > menu > .menu-iconic-left, +menulist > menupopup > menuitem > .menu-iconic-right, +menulist > menupopup > menucaption > .menu-iconic-right, +menulist > menupopup > menu > .menu-iconic-right { display: none; } diff --git a/arc-firefox-theme/chrome/global/notification.css b/arc-firefox-theme/chrome/global/notification.css index 4c5d27e..079f408 100644 --- a/arc-firefox-theme/chrome/global/notification.css +++ b/arc-firefox-theme/chrome/global/notification.css @@ -5,14 +5,16 @@ @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); notification { - color: InfoText; + color: -moz-gtk-info-bar-text; background-color: InfoBackground; + -moz-appearance: -moz-gtk-info-bar; text-shadow: none; } notification[type="info"] { color: -moz-DialogText; background-color: -moz-Dialog; + -moz-appearance: none; } notification[type="critical"] { diff --git a/arc-firefox-theme/chrome/global/toolbarbutton.css b/arc-firefox-theme/chrome/global/toolbarbutton.css index 4a11f72..a62e173 100644 --- a/arc-firefox-theme/chrome/global/toolbarbutton.css +++ b/arc-firefox-theme/chrome/global/toolbarbutton.css @@ -106,37 +106,25 @@ toolbarbutton[type="menu-button"][disabled="true"]:hover:active { } /* ::::: toolbarbutton badged ::::: */ +.toolbarbutton-badge-stack > .toolbarbutton-icon[label]:not([label=""]) { + -moz-margin-end: 0; +} .toolbarbutton-badge { background-color: #d90000; -} - -.toolbarbutton-badge::after { - /* The |content| property is set in the content stylesheet. */ font-size: 10px; - font-weight: bold; - padding: 1px 2px 2px; + padding: 0 2px 1px; color: #fff; - background-color: inherit; border-radius: 2px; box-shadow: 0 1px 0 hsla(0, 100%, 100%, .2) inset, 0 -1px 0 hsla(0, 0%, 0%, .1) inset, 0 1px 0 hsla(206, 50%, 10%, .2); - position: absolute; - top: -4px; - right: -2px; - min-width: 10px; + margin: -6px 0 0 !important; + -moz-margin-end: -8px !important; + min-width: 14px; line-height: 10px; text-align: center; -} - -.toolbarbutton-badge:-moz-locale-dir(rtl)::after { - left: -2px; - right: auto; -} - -.toolbarbutton-badge-container { - position: relative; + -moz-stack-sizing: ignore; } /* .......... dropmarker .......... */ diff --git a/arc-firefox-theme/chrome/mozapps/extensions/extensions.css b/arc-firefox-theme/chrome/mozapps/extensions/extensions.css index 30b1ab6..e3e5a63 100644 --- a/arc-firefox-theme/chrome/mozapps/extensions/extensions.css +++ b/arc-firefox-theme/chrome/mozapps/extensions/extensions.css @@ -675,14 +675,13 @@ #detail-screenshot-box { -moz-margin-end: 2em; - padding: 10px; - background-color: white; - box-shadow: 0 1px 2px #666; } #detail-screenshot { max-width: 300px; max-height: 300px; + background-color: white; + box-shadow: 0 1px 2px #666; } #detail-screenshot[loading] { @@ -1041,6 +1040,11 @@ button.button-link:not([disabled="true"]):active:hover { font-style: italic; } +#detail-findUpdates-btn[hidden] { + display: -moz-box; + visibility: hidden; +} + #header-utils-btn .toolbarbutton-icon { list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities-native"); } -- cgit v1.2.3