From de6d0eaf6eb0b61fc1c8eea6bc53db2f0f8fde6a Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Mon, 23 Jan 2017 15:16:14 +0100 Subject: update to 51.0rc2 --- .../chrome/browser/browser-lightweightTheme.css | 6 +- arc-firefox-theme/chrome/browser/browser.css | 1318 +++++----------- .../browser/connection-mixed-active-loaded.svg | 80 + .../browser/connection-mixed-passive-loaded.svg | 78 + .../chrome/browser/connection-secure.svg | 27 + .../chrome/browser/content-contextmenu.svg | 46 +- .../browser/controlcenter/arrow-subview-back.svg | 29 +- .../chrome/browser/controlcenter/arrow-subview.svg | 29 +- .../chrome/browser/controlcenter/conn-degraded.svg | 27 - .../browser/controlcenter/conn-not-secure.svg | 37 +- .../chrome/browser/controlcenter/conn-secure.svg | 26 - .../chrome/browser/controlcenter/connection.svg | 63 + .../chrome/browser/controlcenter/mcb-disabled.svg | 31 +- .../chrome/browser/controlcenter/panel.css | 49 +- .../chrome/browser/controlcenter/permissions.svg | 47 +- .../controlcenter/tracking-protection-disabled.svg | 23 - .../browser/controlcenter/tracking-protection.svg | 58 +- .../customizableui/menuPanel-customizeFinish.png | Bin 236 -> 337 bytes .../menuPanel-customizeFinish@2x.png | Bin 399 -> 625 bytes .../chrome/browser/customizableui/panelUI.css | 135 +- arc-firefox-theme/chrome/browser/devedition.css | 119 +- .../chrome/browser/downloads/download-summary.png | Bin 691 -> 0 bytes .../chrome/browser/downloads/download-summary.svg | 11 + .../chrome/browser/downloads/downloads.css | 86 +- .../browser/downloads/menubutton-dropmarker.svg | 8 + arc-firefox-theme/chrome/browser/gear.svg | 7 + arc-firefox-theme/chrome/browser/identity-icon.svg | 101 +- .../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 - .../chrome/browser/menuPanel-small.png | Bin 2088 -> 0 bytes .../chrome/browser/menuPanel-small.svg | 42 + .../chrome/browser/menuPanel-small@2x.png | Bin 3305 -> 0 bytes arc-firefox-theme/chrome/browser/menuPanel.png | Bin 18811 -> 0 bytes arc-firefox-theme/chrome/browser/menuPanel.svg | 69 + arc-firefox-theme/chrome/browser/menuPanel@2x.png | Bin 42938 -> 0 bytes arc-firefox-theme/chrome/browser/newtab/newTab.css | 114 +- .../chrome/browser/notification-icons.svg | 47 +- .../chrome/browser/places/organizer.css | 21 +- .../browser/preferences/in-content/preferences.css | 9 + .../chrome/browser/sass/_browser-sass.scss | 1647 ++++++-------------- .../chrome/browser/sass/browser-dark.css | 1318 +++++----------- .../chrome/browser/sass/browser-darker.css | 1318 +++++----------- .../chrome/browser/sass/browser-light.css | 1318 +++++----------- arc-firefox-theme/chrome/browser/searchbar.css | 46 +- .../chrome/browser/social/chat-icons.svg | 51 - .../chrome/browser/tabbrowser/tab-audio.svg | 92 +- .../browser/toolbarbutton-dropdown-arrow.png | Bin 0 -> 91 bytes .../chrome/browser/tracking-protection-16.svg | 106 +- .../browser/tracking-protection-disabled-16.svg | 23 - 51 files changed, 3345 insertions(+), 5421 deletions(-) create mode 100644 arc-firefox-theme/chrome/browser/connection-mixed-active-loaded.svg create mode 100644 arc-firefox-theme/chrome/browser/connection-mixed-passive-loaded.svg create mode 100644 arc-firefox-theme/chrome/browser/connection-secure.svg delete mode 100644 arc-firefox-theme/chrome/browser/controlcenter/conn-degraded.svg delete mode 100644 arc-firefox-theme/chrome/browser/controlcenter/conn-secure.svg create mode 100644 arc-firefox-theme/chrome/browser/controlcenter/connection.svg delete mode 100644 arc-firefox-theme/chrome/browser/controlcenter/tracking-protection-disabled.svg delete mode 100644 arc-firefox-theme/chrome/browser/downloads/download-summary.png create mode 100644 arc-firefox-theme/chrome/browser/downloads/download-summary.svg create mode 100644 arc-firefox-theme/chrome/browser/downloads/menubutton-dropmarker.svg create mode 100644 arc-firefox-theme/chrome/browser/gear.svg delete mode 100644 arc-firefox-theme/chrome/browser/identity-mixed-active-loaded.svg delete mode 100644 arc-firefox-theme/chrome/browser/identity-mixed-passive-loaded.svg delete mode 100644 arc-firefox-theme/chrome/browser/identity-not-secure.svg delete mode 100644 arc-firefox-theme/chrome/browser/identity-secure.svg delete mode 100644 arc-firefox-theme/chrome/browser/menuPanel-small.png create mode 100644 arc-firefox-theme/chrome/browser/menuPanel-small.svg delete mode 100644 arc-firefox-theme/chrome/browser/menuPanel-small@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/menuPanel.png create mode 100644 arc-firefox-theme/chrome/browser/menuPanel.svg delete mode 100644 arc-firefox-theme/chrome/browser/menuPanel@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/social/chat-icons.svg create mode 100644 arc-firefox-theme/chrome/browser/toolbarbutton-dropdown-arrow.png mode change 100755 => 100644 arc-firefox-theme/chrome/browser/tracking-protection-16.svg delete mode 100755 arc-firefox-theme/chrome/browser/tracking-protection-disabled-16.svg (limited to 'arc-firefox-theme/chrome/browser') diff --git a/arc-firefox-theme/chrome/browser/browser-lightweightTheme.css b/arc-firefox-theme/chrome/browser/browser-lightweightTheme.css index 708729d..cf6f8dc 100644 --- a/arc-firefox-theme/chrome/browser/browser-lightweightTheme.css +++ b/arc-firefox-theme/chrome/browser/browser-lightweightTheme.css @@ -15,8 +15,8 @@ */ /* Lightweight theme on tabs */ -#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-start[visuallyselected=true]:-moz-lwtheme::before, -#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-end[visuallyselected=true]:-moz-lwtheme::before { +#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-start[selected=true]:-moz-lwtheme::before, +#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-end[selected=true]:-moz-lwtheme::before { background-attachment: scroll, fixed; background-color: transparent; background-image: linear-gradient(transparent 2px, rgba(255,255,255,.4) 2px, rgba(255,255,255,.4));/*, lwtHeader;*/ @@ -24,7 +24,7 @@ background-repeat: repeat-x, no-repeat; } -#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-middle[visuallyselected=true]:-moz-lwtheme { +#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-middle[selected=true]:-moz-lwtheme { background-attachment: scroll, scroll, fixed; background-color: transparent; background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png), diff --git a/arc-firefox-theme/chrome/browser/browser.css b/arc-firefox-theme/chrome/browser/browser.css index be47818..2f8a0c9 100644 --- a/arc-firefox-theme/chrome/browser/browser.css +++ b/arc-firefox-theme/chrome/browser/browser.css @@ -18,6 +18,9 @@ --toolbarbutton-combined-backgroundimage: linear-gradient(rgba(23, 51, 79, 0.2) 0, rgba(23, 51, 79, 0.2) 18px); --verified-identity-box-backgroundcolor: transparent; --panel-separator-color: ThreeDShadow; + --arrowpanel-dimmed: rgba(204, 204, 204, 0.3); + --arrowpanel-dimmed-further: rgba(204, 204, 204, 0.45); + --arrowpanel-dimmed-even-further: rgba(204, 204, 204, 0.8); --urlbar-separator-color: rgba(41, 41, 41, 0.2); } #menubar-items { @@ -470,9 +473,6 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { #aboutName { list-style-image: url("moz-icon://stock/gtk-about?size=menu"); } -#javascriptConsole { - list-style-image: url("chrome://global/skin/console/console.png"); } - /* Primary toolbar buttons */ :-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1 > .toolbarbutton-icon, :-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1 > :-moz-any(.toolbarbutton-menubutton-button, .toolbarbutton-badge-stack) > .toolbarbutton-icon { @@ -940,353 +940,151 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { } */ /* Menu panel and palette styles */ -:root { - --menupanel-list-style-image: url(chrome://browser/skin/menuPanel.png); - --menupanel-list-style-image-2x: url(chrome://browser/skin/menuPanel@2x.png); - --menupanel-small-list-style-image: url(chrome://browser/skin/menuPanel-small.png); - --menupanel-small-list-style-image-2x: url(chrome://browser/skin/menuPanel-small@2x.png); } - -@media not all and (min-resolution: 1.1dppx) { - toolbaritem[sdkstylewidget="true"] > toolbarbutton, - :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) { - list-style-image: var(--menupanel-list-style-image); } - - #home-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #home-button { - -moz-image-region: rect(0px, 128px, 32px, 96px); } - - #bookmarks-menu-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #bookmarks-menu-button { - -moz-image-region: rect(0px, 192px, 32px, 160px); } - - #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 192px, 64px, 160px); } - - #history-panelmenu[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #history-panelmenu { - -moz-image-region: rect(0px, 224px, 32px, 192px); } - - #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 224px, 64px, 192px); } - - #downloads-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #downloads-button { - -moz-image-region: rect(0px, 256px, 32px, 224px); } - - #add-ons-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #add-ons-button { - -moz-image-region: rect(0px, 288px, 32px, 256px); } - - #open-file-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #open-file-button { - -moz-image-region: rect(0px, 320px, 32px, 288px); } - - #save-page-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #save-page-button { - -moz-image-region: rect(0px, 352px, 32px, 320px); } - - #sync-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sync-button { - -moz-image-region: rect(0px, 1024px, 32px, 992px); } - - #sync-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 1024px, 64px, 992px); } - - #containers-panelmenu[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #containers-panelmenu { - -moz-image-region: rect(0px, 1056px, 32px, 1024px); } - - #containers-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 1056px, 64px, 1024px); } - - #feed-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #feed-button { - -moz-image-region: rect(0px, 416px, 32px, 384px); } - - #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 416px, 64px, 384px); } - - #social-share-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #social-share-button { - -moz-image-region: rect(0px, 448px, 32px, 416px); } - - #characterencoding-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #characterencoding-button { - -moz-image-region: rect(0px, 480px, 32px, 448px); } - - #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 480px, 64px, 448px); } - - #new-window-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-window-button { - -moz-image-region: rect(0px, 512px, 32px, 480px); } - - #e10s-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #e10s-button { - -moz-image-region: rect(0px, 512px, 32px, 480px); } - - #new-tab-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-tab-button { - -moz-image-region: rect(0px, 544px, 32px, 512px); } - - #privatebrowsing-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #privatebrowsing-button { - -moz-image-region: rect(0px, 576px, 32px, 544px); } - - #find-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #find-button { - -moz-image-region: rect(0px, 640px, 32px, 608px); } - - #print-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #print-button { - -moz-image-region: rect(0px, 672px, 32px, 640px); } - - #fullscreen-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #fullscreen-button { - -moz-image-region: rect(0px, 704px, 32px, 672px); } - - #developer-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #developer-button { - -moz-image-region: rect(0px, 736px, 32px, 704px); } - - #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 736px, 64px, 704px); } - - #preferences-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #preferences-button { - -moz-image-region: rect(0px, 768px, 32px, 736px); } - - #email-link-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #email-link-button { - -moz-image-region: rect(0, 800px, 32px, 768px); } - - #sidebar-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sidebar-button { - -moz-image-region: rect(0, 864px, 32px, 832px); } - - #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 864px, 64px, 832px); } - - #panic-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #panic-button { - -moz-image-region: rect(0, 896px, 32px, 864px); } - - #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 896px, 64px, 864px); } - - #webide-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #webide-button { - -moz-image-region: rect(0px, 960px, 32px, 928px); } - - toolbaritem[sdkstylewidget="true"] > toolbarbutton { - -moz-image-region: rect(0, 832px, 32px, 800px); } - - /* Wide panel control icons */ - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton, - toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton { - list-style-image: var(--menupanel-small-list-style-image); } - - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button { - -moz-image-region: rect(0px, 32px, 16px, 16px); } - - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button { - -moz-image-region: rect(0px, 48px, 16px, 32px); } - - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button { - -moz-image-region: rect(0px, 64px, 16px, 48px); } - - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button { - -moz-image-region: rect(0px, 80px, 16px, 64px); } - - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { - -moz-image-region: rect(0px, 96px, 16px, 80px); } - - #add-share-provider { - list-style-image: url(chrome://browser/skin/menuPanel-small.png); - -moz-image-region: rect(0px, 96px, 16px, 80px); } } -/* Menu panel and palette styles */ -@media (min-resolution: 1.1dppx) { - toolbaritem[sdkstylewidget="true"] > toolbarbutton, - :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) { - list-style-image: var(--menupanel-list-style-image-2x); } - - #home-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #home-button { - -moz-image-region: rect(0px, 256px, 64px, 192px); } - - #bookmarks-menu-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #bookmarks-menu-button { - -moz-image-region: rect(0px, 384px, 64px, 320px); } - - #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 384px, 128px, 320px); } - - #history-panelmenu[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #history-panelmenu { - -moz-image-region: rect(0px, 448px, 64px, 384px); } - - #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 448px, 128px, 384px); } - - #downloads-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #downloads-button { - -moz-image-region: rect(0px, 512px, 64px, 448px); } - - #add-ons-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #add-ons-button { - -moz-image-region: rect(0px, 576px, 64px, 512px); } - - #open-file-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #open-file-button { - -moz-image-region: rect(0px, 640px, 64px, 576px); } - - #save-page-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #save-page-button { - -moz-image-region: rect(0px, 704px, 64px, 640px); } +toolbaritem[sdkstylewidget="true"] > toolbarbutton, +:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) { + list-style-image: url(chrome://browser/skin/menuPanel.svg); } + +:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-icon, +:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-badge-stack > .toolbarbutton-icon, +:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon { + filter: url(chrome://browser/skin/filters.svg#fill); + fill: currentColor; } - #sync-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sync-button { - -moz-image-region: rect(0px, 2048px, 64px, 1984px); } +#home-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #home-button { + -moz-image-region: rect(0px, 128px, 32px, 96px); } - #sync-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 2048px, 128px, 1984px); } +#bookmarks-menu-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #bookmarks-menu-button { + -moz-image-region: rect(0px, 192px, 32px, 160px); } - #containers-panelmenu[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #containers-panelmenu { - -moz-image-region: rect(0px, 2112px, 64px, 2048px); } +#history-panelmenu[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #history-panelmenu { + -moz-image-region: rect(0px, 224px, 32px, 192px); } - #containers-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 2112px, 128px, 2048px); } +#downloads-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #downloads-button { + -moz-image-region: rect(0px, 256px, 32px, 224px); } - #feed-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #feed-button { - -moz-image-region: rect(0px, 832px, 64px, 768px); } +#add-ons-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #add-ons-button { + -moz-image-region: rect(0px, 288px, 32px, 256px); } - #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 832px, 128px, 768px); } +#open-file-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #open-file-button { + -moz-image-region: rect(0px, 320px, 32px, 288px); } - #social-share-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #social-share-button { - -moz-image-region: rect(0px, 896px, 64px, 832px); } +#save-page-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #save-page-button { + -moz-image-region: rect(0px, 352px, 32px, 320px); } - #characterencoding-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #characterencoding-button { - -moz-image-region: rect(0, 960px, 64px, 896px); } +#sync-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #sync-button { + -moz-image-region: rect(0px, 1024px, 32px, 992px); } - #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 960px, 128px, 896px); } +#containers-panelmenu[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #containers-panelmenu { + -moz-image-region: rect(0px, 1056px, 32px, 1024px); } - #new-window-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-window-button { - -moz-image-region: rect(0px, 1024px, 64px, 960px); } +#feed-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #feed-button { + -moz-image-region: rect(0px, 416px, 32px, 384px); } - #e10s-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #e10s-button { - -moz-image-region: rect(0px, 1024px, 64px, 960px); } +#social-share-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #social-share-button { + -moz-image-region: rect(0px, 448px, 32px, 416px); } - #webide-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #webide-button { - -moz-image-region: rect(0px, 1920px, 64px, 1856px); } +#characterencoding-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #characterencoding-button { + -moz-image-region: rect(0px, 480px, 32px, 448px); } - #new-tab-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-tab-button { - -moz-image-region: rect(0px, 1088px, 64px, 1024px); } +#new-window-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #new-window-button { + -moz-image-region: rect(0px, 512px, 32px, 480px); } - #privatebrowsing-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #privatebrowsing-button { - -moz-image-region: rect(0px, 1152px, 64px, 1088px); } +#e10s-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #e10s-button { + -moz-image-region: rect(0px, 512px, 32px, 480px); } - #find-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #find-button { - -moz-image-region: rect(0px, 1280px, 64px, 1216px); } +#new-tab-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #new-tab-button { + -moz-image-region: rect(0px, 544px, 32px, 512px); } - #print-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #print-button { - -moz-image-region: rect(0px, 1344px, 64px, 1280px); } +#privatebrowsing-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #privatebrowsing-button { + -moz-image-region: rect(0px, 576px, 32px, 544px); } - #fullscreen-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #fullscreen-button { - -moz-image-region: rect(0px, 1408px, 64px, 1344px); } +#find-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #find-button { + -moz-image-region: rect(0px, 640px, 32px, 608px); } - #developer-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #developer-button { - -moz-image-region: rect(0px, 1472px, 64px, 1408px); } +#print-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #print-button { + -moz-image-region: rect(0px, 672px, 32px, 640px); } - #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 1472px, 128px, 1408px); } +#fullscreen-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #fullscreen-button { + -moz-image-region: rect(0px, 704px, 32px, 672px); } - #preferences-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #preferences-button { - -moz-image-region: rect(0px, 1536px, 64px, 1472px); } +#developer-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #developer-button { + -moz-image-region: rect(0px, 736px, 32px, 704px); } - #email-link-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #email-link-button { - -moz-image-region: rect(0px, 1600px, 64px, 1536px); } +#preferences-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #preferences-button { + -moz-image-region: rect(0px, 768px, 32px, 736px); } - #sidebar-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sidebar-button { - -moz-image-region: rect(0px, 1728px, 64px, 1664px); } +#email-link-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #email-link-button { + -moz-image-region: rect(0, 800px, 32px, 768px); } - #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 1728px, 128px, 1664px); } +#sidebar-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #sidebar-button { + -moz-image-region: rect(0, 864px, 32px, 832px); } - #panic-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #panic-button { - -moz-image-region: rect(0, 1792px, 64px, 1728px); } +#panic-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #panic-button { + -moz-image-region: rect(0, 896px, 32px, 864px); } - #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 1792px, 128px, 1728px); } +#webide-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #webide-button { + -moz-image-region: rect(0px, 960px, 32px, 928px); } - toolbaritem[sdkstylewidget="true"] > toolbarbutton { - -moz-image-region: rect(0, 1664px, 64px, 1600px); } +toolbaritem[sdkstylewidget="true"] > toolbarbutton { + -moz-image-region: rect(0, 832px, 32px, 800px); } - #add-share-provider { - list-style-image: url(chrome://browser/skin/menuPanel-small@2x.png); - -moz-image-region: rect(0px, 192px, 32px, 160px); } +/* Wide panel control icons */ +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, +#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, +toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton, +toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton { + list-style-image: url(chrome://browser/skin/menuPanel-small.svg); } - /* Footer and wide panel control icons */ - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton, - toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton { - list-style-image: var(--menupanel-small-list-style-image-2x); } +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button, +toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button { + -moz-image-region: rect(0px, 32px, 16px, 16px); } - /* Wide items like the Cut/Copy/Paste and Zoom controls are special in that their icons - are 16x16 when in the panel, but 18x18 when in a toolbar. */ - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon, - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon, - toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon, - toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon { - width: 16px; } +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button, +toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button { + -moz-image-region: rect(0px, 48px, 16px, 32px); } - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button { - -moz-image-region: rect(0px, 64px, 32px, 32px); } +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button, +toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button { + -moz-image-region: rect(0px, 64px, 16px, 48px); } - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button { - -moz-image-region: rect(0px, 96px, 32px, 64px); } +#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button, +toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button { + -moz-image-region: rect(0px, 80px, 16px, 64px); } - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button { - -moz-image-region: rect(0px, 128px, 32px, 96px); } +#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button, +toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { + -moz-image-region: rect(0px, 96px, 16px, 80px); } - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button { - -moz-image-region: rect(0px, 160px, 32px, 128px); } +#add-share-provider { + list-style-image: url(chrome://browser/skin/menuPanel-small.svg); + -moz-image-region: rect(0px, 96px, 16px, 80px); } - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { - -moz-image-region: rect(0px, 192px, 32px, 160px); } } #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon, #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker, #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker, @@ -1385,9 +1183,43 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { width: 16px; height: 16px; } +/* ::::: URL Bar Zoom Reset Button ::::: */ +@keyframes urlbar-zoom-reset-pulse { + 0% { + transform: scale(0); } + 75% { + transform: scale(1.5); } + 100% { + transform: scale(1); } } +#urlbar-zoom-button { + -moz-appearance: none; + margin: 0 3px; + font-size: .8em; + padding: 0 8px; + border-radius: 1em; + background-color: rgba(0, 0, 0, 0.05); + color: inherit; + border: 1px solid ThreeDLightShadow; } + +#urlbar-zoom-button[animate="true"] { + animation-name: urlbar-zoom-reset-pulse; + animation-duration: 250ms; } + +#urlbar-zoom-button:hover { + background-color: rgba(0, 0, 0, 0.1); } + +#urlbar-zoom-button:hover:active { + background-color: rgba(0, 0, 0, 0.15); } + +#urlbar-zoom-button > .toolbarbutton-text { + display: -moz-box; } + +#urlbar-zoom-button > .toolbarbutton-icon { + display: none; } + #urlbar-search-footer { - border-top: 1px solid rgba(24, 26, 27, 0.14); - background-color: rgba(24, 26, 27, 0.07); } + border-top: 1px solid var(--panel-separator-color); + background-color: var(--arrowpanel-dimmed); } #urlbar-search-settings { -moz-appearance: none; @@ -1399,10 +1231,10 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { background: transparent; } #urlbar-search-settings:hover { - background-color: rgba(24, 26, 27, 0.07); } + background-color: var(--arrowpanel-dimmed); } #urlbar-search-settings:hover:active { - background-color: rgba(24, 26, 27, 0.12); } + background-color: var(--arrowpanel-dimmed-further); } #urlbar-search-splitter { -moz-appearance: none; @@ -1419,7 +1251,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { color: GrayText; } #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] { - border-bottom: 1px solid rgba(24, 26, 27, 0.14); + border-bottom: 1px solid var(--panel-separator-color); background-color: rgba(24, 26, 27, 0.07); padding: 6px 0; padding-inline-start: 44px; @@ -1476,13 +1308,98 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { border-top-right-radius: 1.5px; border-bottom-right-radius: 1.5px; } -#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: 1px dotted; outline-offset: -3px; } +#identity-icon { + list-style-image: url(chrome://browser/skin/identity-icon.svg#normal); } + +#identity-box:hover > #identity-icon:not(.no-hover), +#identity-box[open=true] > #identity-icon { + list-style-image: url(chrome://browser/skin/identity-icon.svg#hover); } + +#identity-box.grantedPermissions > #identity-icon { + list-style-image: url(chrome://browser/skin/identity-icon.svg#notice); } + +#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover), +#identity-box.grantedPermissions[open=true] > #identity-icon { + list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover); } + +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon { + list-style-image: url(chrome://branding/content/identity-icons-brand.svg); } + +#tracking-protection-icon { + list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled); } + +#tracking-protection-icon[state="loaded-tracking-content"] { + list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled); } + +#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon { + list-style-image: url(chrome://browser/skin/connection-secure.svg); + visibility: visible; } + +#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon { + list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon); + visibility: visible; } + +#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon { + list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon); + visibility: visible; } + +#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon { + list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon); + visibility: visible; } + +#identity-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/identity-icon.svg#normal-black); } + +#identity-box:hover > #identity-icon:not(.no-hover):-moz-lwtheme, +#identity-box[open=true] > #identity-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/identity-icon.svg#hover-black); } + +#identity-box.grantedPermissions > #identity-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-black); } + +#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover):-moz-lwtheme, +#identity-box.grantedPermissions[open=true] > #identity-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover-black); } + +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon:-moz-lwtheme { + list-style-image: url(chrome://branding/content/identity-icons-brand.svg); } + +#tracking-protection-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled-black); } + +#tracking-protection-icon[state="loaded-tracking-content"]:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled-black); } + +#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon:-moz-lwtheme, +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon:-moz-lwtheme, +#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/connection-secure.svg); + visibility: visible; } + +#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon-black); + visibility: visible; } + +#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon:-moz-lwtheme, +#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon-black); + visibility: visible; } + +#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon:-moz-lwtheme, +#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon:-moz-lwtheme, +#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon-black); + visibility: visible; } + #identity-box { --identity-box-verified-color: #479900; --identity-box-chrome-color: #e57300; @@ -1511,44 +1428,53 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { /* MAIN IDENTITY ICON */ #identity-icon { width: 16px; - height: 16px; - list-style-image: url(chrome://browser/skin/identity-icon.svg#normal); } - -#identity-box:hover > #identity-icon:not(.no-hover), -#identity-box[open=true] > #identity-icon { - list-style-image: url(chrome://browser/skin/identity-icon.svg#hover); } - -#identity-box.grantedPermissions > #identity-icon { - list-style-image: url(chrome://browser/skin/identity-icon.svg#notice); } - -#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover), -#identity-box.grantedPermissions[open=true] > #identity-icon { - list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover); } - -#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon { - list-style-image: url(chrome://branding/content/identity-icons-brand.svg); } + height: 16px; } #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon { - opacity: 0.3; } + opacity: .3; } #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon { -moz-image-region: inherit; list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); + width: 16px; + height: 16px; } + +/* SHARING ICON */ +#sharing-icon { width: 16px; height: 16px; - opacity: 1; } + margin-inline-start: -16px; + position: relative; + display: none; } + +#identity-box[sharing="camera"] > #sharing-icon { + list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing"); } +#identity-box[sharing="microphone"] > #sharing-icon { + list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing"); } + +#identity-box[sharing="screen"] > #sharing-icon { + list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing"); } + +#identity-box[sharing] > #sharing-icon { + display: -moz-box; + animation-delay: -1.5s; } + +#identity-box[sharing] > #identity-icon, +#sharing-icon { + animation: 3s linear pulse infinite; } + +@keyframes pulse { + 0%, 16.66%, 83.33%, 100% { + opacity: 0; } + 33.33%, 66.66% { + opacity: 1; } } /* TRACKING PROTECTION ICON */ #tracking-protection-icon { width: 16px; height: 16px; margin-inline-start: 2px; - margin-inline-end: 0; - list-style-image: url(chrome://browser/skin/tracking-protection-16.svg); - opacity: 1; } - -#tracking-protection-icon[state="loaded-tracking-content"] { - list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg); } + margin-inline-end: 0; } #tracking-protection-icon[animate] { transition: margin-left 200ms ease-out, margin-right 200ms ease-out; } @@ -1570,40 +1496,22 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { margin-inline-start: 2px; visibility: collapse; } -#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon, -#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon, -#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon { - list-style-image: url(chrome://browser/skin/identity-secure.svg); - visibility: visible; } - -#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon { - list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg); - visibility: visible; } - -#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon, -#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon { - list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg); - visibility: visible; } - -#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon, -#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon, -#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon { - list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg); - visibility: visible; } - #notification-popup-box { padding: 5px 0px; margin: -5px 0px; margin-inline-end: -5px; padding-inline-end: 5px; } +.notification-anchor-icon, +#blocked-permissions-container > .blocked-permission-icon { + width: 16px; + height: 16px; + margin-inline-start: 2px; } + /* This class can be used alone or in combination with the class defining the type of icon displayed. This rule must be defined before the others in order for its list-style-image to be overridden. */ .notification-anchor-icon { - width: 16px; - height: 16px; - margin-inline-start: 2px; list-style-image: url(moz-icon://stock/gtk-dialog-info?size=16); } @media (min-resolution: 1.1dppx) { @@ -1614,57 +1522,26 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { height: 64px; margin-inline-end: 10px; } -#notification-popup-box > .notification-anchor-icon:not(.in-use):hover { - fill: #606060; } - -/* INDIVIDUAL NOTIFICATIONS */ -/* For the moment we apply the color filter only on the icons listed here. - The first two selectors are used by socialchat.xml (bug 1275558). */ -.webRTC-sharingDevices-notification-icon, -.webRTC-sharingMicrophone-notification-icon, -.camera-icon, -.geo-icon, -.indexedDB-icon, -.install-icon, -.login-icon, -.microphone-icon, -.plugin-icon, -.pointerLock-icon, -.popup-icon, -.screen-icon, -.desktop-notification-icon, -.popup-notification-icon[popupid="geolocation"], -.popup-notification-icon[popupid="indexedDB-permissions-prompt"], -.popup-notification-icon[popupid="password"], -.popup-notification-icon[popupid="pointerLock"], -.popup-notification-icon[popupid="webRTC-shareDevices"], -.popup-notification-icon[popupid="webRTC-shareMicrophone"], -.popup-notification-icon[popupid="webRTC-shareScreen"], -.popup-notification-icon[popupid="webRTC-sharingDevices"], -.popup-notification-icon[popupid="webRTC-sharingMicrophone"], -.popup-notification-icon[popupid="webRTC-sharingScreen"], -.popup-notification-icon[popupid="web-notifications"] { +.notification-anchor-icon:not(.plugin-blocked):-moz-lwtheme, +#blocked-permissions-container > .blocked-permission-icon:-moz-lwtheme { filter: url(chrome://browser/skin/filters.svg#fill); - fill: #999; } + fill: currentColor; } -/* The first two selectors are used by socialchat.xml (bug 1275558). The - notifications in the chat window are only shown when they are in use. */ -.webRTC-sharingDevices-notification-icon, -.webRTC-sharingMicrophone-notification-icon, -.in-use { - fill: #fea01b; } +.notification-anchor-icon:not(.plugin-blocked):not(:hover) { + opacity: .8; } +/* INDIVIDUAL NOTIFICATIONS */ .popup-notification-icon[popupid="web-notifications"], .desktop-notification-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification); } -.desktop-notification-icon.blocked { +.desktop-notification-icon.blocked-permission-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked); } .geo-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-linux); } -.geo-icon.blocked { +.geo-icon.blocked-permission-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-linux-blocked); } .popup-notification-icon[popupid="geolocation"] { @@ -1674,7 +1551,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { .indexedDB-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB); } -.indexedDB-icon.blocked { +.indexedDB-icon.blocked-permission-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked); } .login-icon { @@ -1683,46 +1560,37 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { .popup-notification-icon[popupid="password"] { list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed); } -#login-fill-notification-icon { - /* Temporary solution until the capture and fill doorhangers are unified. */ - transform: scaleX(-1); } - -/* The first selector is used by socialchat.xml (bug 1275558). */ -.webRTC-sharingDevices-notification-icon, .camera-icon, -.popup-notification-icon[popupid="webRTC-shareDevices"], -.popup-notification-icon[popupid="webRTC-sharingDevices"] { +.popup-notification-icon[popupid="webRTC-shareDevices"] { list-style-image: url(chrome://browser/skin/notification-icons.svg#camera); } -.camera-icon.blocked { +.camera-icon.in-use { + list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-sharing); } + +.camera-icon.blocked-permission-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked); } -/* The first selector is used by socialchat.xml (bug 1275558). */ -.webRTC-sharingMicrophone-notification-icon, .microphone-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone); } -.microphone-icon.blocked { +.microphone-icon.in-use { + list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-sharing); } + +.microphone-icon.blocked-permission-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked); } -.popup-notification-icon[popupid="webRTC-shareMicrophone"], -.popup-notification-icon[popupid="webRTC-sharingMicrophone"] { +.popup-notification-icon[popupid="webRTC-shareMicrophone"] { list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed); } .popup-notification-icon[popupid="webRTC-shareScreen"], -.popup-notification-icon[popupid="webRTC-sharingScreen"], .screen-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#screen); } -.screen-icon.blocked { - list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked); } +.screen-icon.in-use { + list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-sharing); } -.popup-notification-icon[popupid="pointerLock"], -.pointerLock-icon { - list-style-image: url(chrome://browser/skin/notification-icons.svg#pointerLock); } - -.pointerLock-icon.blocked { - list-style-image: url(chrome://browser/skin/notification-icons.svg#pointerLock-blocked); } +.screen-icon.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked); } /* This icon has a block sign in it, so we don't need a blocked version. */ .popup-icon { @@ -1788,9 +1656,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin); } .plugin-icon.plugin-blocked { - list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked); - fill: #d92215 !important; - /* important! to override the default hover color */ } + list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked); } #notification-popup-box[hidden] { /* Override display:none to make the pluginBlockedNotification animation work @@ -2155,6 +2021,21 @@ html|span.ac-emphasize-text-url { -moz-image-region: rect(0, 48px, 16px, 32px); } /* social share panel */ +#manage-share-providers { + list-style-image: url("chrome://browser/skin/Toolbar.png"); + -moz-image-region: rect(0, 468px, 18px, 450px); } + +#manage-share-providers > .toolbarbutton-icon { + min-height: 18px; + min-width: 18px; } + +.social-panel > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; } + +/* fixup corners for share panel */ +.social-panel > .social-panel-frame { + border-radius: inherit; } + .social-share-frame { border-top: 1px solid #f8f8f8; width: 756px; @@ -2196,10 +2077,6 @@ html|span.ac-emphasize-text-url { min-height: 16px; max-height: 16px; } -/* social recommending panel */ -#social-mark-button { - -moz-image-region: rect(0, 16px, 16px, 0); } - /* bookmarks menu-button */ #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker { -moz-appearance: none !important; @@ -2353,7 +2230,7 @@ html|span.ac-emphasize-text-url { color: #5c616c; } /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */ -.tabbrowser-tab[selected=true] { +.tabbrowser-tab[visuallyselected=true] { position: relative; z-index: 2; } @@ -2406,17 +2283,13 @@ html|span.ac-emphasize-text-url { position: relative; } .tab-sharing-icon-overlay[sharing="camera"] { - list-style-image: url("chrome://browser/skin/notification-icons.svg#camera"); } + list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing"); } .tab-sharing-icon-overlay[sharing="microphone"] { - list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone"); } + list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing"); } .tab-sharing-icon-overlay[sharing="screen"] { - list-style-image: url("chrome://browser/skin/notification-icons.svg#screen"); } - -.tab-sharing-icon-overlay[sharing] { - filter: url("chrome://browser/skin/filters.svg#fill"); - fill: #e0291d; } + list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing"); } .tab-icon-overlay { width: 16px; @@ -2485,26 +2358,6 @@ html|span.ac-emphasize-text-url { .tab-icon-sound[selected=true][soundplaying] { list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio"); } -.tab-icon-sound:hover:-moz-lwtheme, -.tab-icon-sound[selected=true][soundplaying]:hover { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-hover"); } - -.tab-icon-sound:hover:active:-moz-lwtheme, -.tab-icon-sound[selected=true][soundplaying]:hover:active { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-pressed"); } - -.tab-icon-sound[muted]:-moz-lwtheme, -.tab-icon-sound[selected=true][muted] { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-muted"); } - -.tab-icon-sound[muted]:hover:-moz-lwtheme, -.tab-icon-sound[selected=true][muted]:hover { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-muted-hover"); } - -.tab-icon-sound[muted]:hover:active:-moz-lwtheme, -.tab-icon-sound[selected=true][muted]:hover:active { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-muted-pressed"); } - .tab-background, .tabs-newtab-button { /* overlap the tab curves */ @@ -2556,7 +2409,7 @@ html|span.ac-emphasize-text-url { min-height: var(--tab-min-height); width: 30px; } -.tabbrowser-tab:not([selected=true]), +.tabbrowser-tab:not([visuallyselected=true]), .tabbrowser-tab:-moz-lwtheme { color: inherit; } @@ -2802,22 +2655,6 @@ lwtHeader;*/ .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon { list-style-image: url("chrome://global/skin/icons/loading.png"); } -.alltabs-item[tabIsVisible] { - /* box-shadow instead of background-color to work around native styling */ - box-shadow: inset -5px 0 ThreeDShadow; } - -.alltabs-endimage[muted] { - list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-menu-muted); } - -.alltabs-endimage[soundplaying] { - list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-menu); } - -menuitem:hover > hbox > .alltabs-endimage[muted] { - list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-menu-muted-hover); } - -menuitem:hover > hbox > .alltabs-endimage[soundplaying] { - list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-menu-hover); } - /* Sidebar */ #sidebar-throbber[loading="true"] { list-style-image: url("chrome://global/skin/icons/loading.png"); @@ -2839,50 +2676,6 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker { toolbarbutton.chevron > .toolbarbutton-icon { margin: 0; } -/* Ctrl-Tab */ -#ctrlTab-panel { - -moz-appearance: none; - background: rgba(68, 68, 68, 0.7); - color: white; - border-style: none; - padding: 20px 10px 10px; - font-weight: bold; - text-shadow: 0 0 1px #444444, 0 0 2px #444444; } - -.ctrlTab-favicon[src] { - background-color: white; - width: 20px; - height: 20px; - padding: 2px; } - -.ctrlTab-preview-inner > .tabPreview-canvas { - box-shadow: 1px 1px 2px #1f1f1f; } - -.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas { - margin-bottom: 2px; } - -.ctrlTab-preview-inner { - padding-bottom: 10px; } - -#ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner { - padding: 10px; - background-color: rgba(255, 255, 255, 0.2); - border-radius: .5em; } - -.ctrlTab-preview:focus > * > .ctrlTab-preview-inner { - color: white; - background-color: rgba(0, 0, 0, 0.6); - text-shadow: none; - padding: 8px; - border: 2px solid white; - border-radius: .5em; } - -.ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner { - margin: -10px -10px 0; } - -#ctrlTab-showAll { - margin-top: .5em; } - /* Status panel */ .statuspanel-label { margin: 0; @@ -2944,21 +2737,49 @@ html|*.pointerlockfswarning-exit-button { font-size: 14px; font-weight: lighter; margin: 0; - box-sizing: content-box; - background-clip: padding-box; - border: 1px solid; - border-radius: 3px; - color: #BAC3CF; - border-color: rgba(26, 28, 34, 0.35); - background-color: rgba(102, 109, 132, 0.35); } - html|*.pointerlockfswarning-exit-button:hover { - color: #BAC3CF; - border-color: rgba(26, 28, 34, 0.35); - background-color: rgba(119, 127, 151, 0.45); } - html|*.pointerlockfswarning-exit-button:active, html|*.pointerlockfswarning-exit-button:checked { - color: #ffffff; - border-color: rgba(26, 28, 34, 0.35); - background-color: #5294E2; } + box-sizing: content-box; } + +/* Ctrl-Tab */ +#ctrlTab-panel { + -moz-appearance: none; + background: rgba(84, 84, 84, 0.85); + color: white; + border-style: none; + padding: 20px 10px 10px; + font-weight: bold; + text-shadow: 0 0 1px #1f1f1f, 0 0 2px #1f1f1f; } + +.ctrlTab-favicon[src] { + background-color: white; + width: 20px; + height: 20px; + padding: 2px; } + +.ctrlTab-preview-inner > .tabPreview-canvas { + box-shadow: 1px 1px 2px #1f1f1f; } + +.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas { + margin-bottom: 2px; } + +.ctrlTab-preview-inner { + padding: 8px; + border: 2px solid transparent; + border-radius: .5em; } + +.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner { + margin: -10px -10px 0; } + +#ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner { + background-color: rgba(255, 255, 255, 0.2); } + +.ctrlTab-preview:focus > * > .ctrlTab-preview-inner { + color: white; + background-color: rgba(0, 0, 0, 0.6); + text-shadow: none; + border-color: white; } + +#ctrlTab-showAll { + margin-top: .5em; } /* Responsive Mode */ .browserContainer[responsivemode] { @@ -3451,8 +3272,8 @@ html|*#gcli-output-frame { margin-inline-start: 6px; } .click-to-play-plugins-notification-button-container { - background-color: rgba(24, 26, 27, 0.07); - border-top: 1px solid rgba(24, 26, 27, 0.12); + background-color: var(--arrowpanel-dimmed); + border-top: 1px solid var(--panel-separator-color); padding: 10px; margin-top: 5px; } @@ -3470,9 +3291,7 @@ html|*#gcli-output-frame { margin: 0; } .messageImage[value="plugin-hidden"] { - list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin); - filter: url(chrome://browser/skin/filters.svg#fill); - fill: #808080; } + list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin); } /* Keep any changes to this style in sync with pluginProblem.css */ notification.pluginVulnerable { @@ -3481,77 +3300,11 @@ notification.pluginVulnerable { color: white; } notification.pluginVulnerable .messageImage { - list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked); - filter: url(chrome://browser/skin/filters.svg#fill); - fill: #d92215; } + list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked); } notification.pluginVulnerable > .notification-inner > .messageCloseButton:not(:hover) { background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 80, 16, 64); } -#notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent { - /* Since we display a sliding subview that extends to the border, we cannot - * keep the default padding of arrow panels. We use the same padding in the - * individual content views instead. Since we removed the padding, we also - * have to ensure the contents are clipped to the border box. */ - padding: 0; - overflow: hidden; } - -#login-fill-mainview, -#login-fill-details { - padding: var(--panel-arrowcontent-padding); } - -#login-fill-doorhanger[inDetailView] > #login-fill-mainview { - transform: translateX(-14px); } - -#login-fill-mainview, -#login-fill-details { - transition: transform 150ms; } - -#login-fill-doorhanger:not([inDetailView]) > #login-fill-details { - transform: translateX(105%); } - -#login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) { - transform: translateX(-105%); } - -#login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer { - background-color: rgba(24, 26, 27, 0.1); } - -#login-fill-testing { - color: #b33; - font-weight: bold; } - -#login-fill-list { - border: 1px solid black; - max-height: 20em; } - -.login-fill-item[disabled] { - color: #888; - background-color: #fff; } - -.login-fill-item[disabled][selected] { - background-color: #eef; } - -.login-hostname { - margin: 4px; - font-weight: bold; } - -.login-fill-item.different-hostname > .login-hostname { - color: #888; - font-style: italic; } - -.login-username { - margin: 4px; - color: #888; } - -#login-fill-details { - padding: 4px; - background: var(--panel-arrowcontent-background); - color: var(--panel-arrowcontent-color); - background-clip: padding-box; - border-left: 1px solid rgba(24, 26, 27, 0.3); - box-shadow: 0 3px 5px rgba(24, 26, 27, 0.1), 0 0 7px rgba(24, 26, 27, 0.1); - margin-inline-start: 38px; } - /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ @@ -3740,214 +3493,6 @@ toolbar[brighttext] #downloads-indicator-counter { border-radius: 1px; margin-inline-end: 2px; } -/* social toolbar provider menu */ -#social-statusarea-popup { - margin-top: 0; - margin-left: -12px; - margin-right: -12px; } - -.social-statusarea-user { - list-style-image: url("chrome://global/skin/icons/information-32.png"); } - -.social-statusarea-user-portrait { - width: 32px; - height: 32px; - border-radius: 2px; - margin: 10px; } - -.social-panel > .panel-arrowcontainer > .panel-arrowcontent { - padding: 0; } - -#social-sidebar-header { - padding: 3px; } - -#manage-share-providers, -#social-sidebar-button { - list-style-image: url("chrome://browser/skin/Toolbar.png"); - -moz-image-region: rect(0, 468px, 18px, 450px); } - -#social-sidebar-button { - -moz-appearance: none; - border: none; - padding: 0; - margin: 2px; } - -#manage-share-providers > .toolbarbutton-icon, -#social-sidebar-button > .toolbarbutton-icon { - min-height: 18px; - min-width: 18px; } - -#social-sidebar-button > .toolbarbutton-menu-dropmarker { - display: none; } - -#social-sidebar-button[loading="true"] { - list-style-image: url("chrome://global/skin/icons/loading.png"); } - -#social-sidebar-favico { - max-height: 16px; - max-width: 16px; - padding: 0; - margin: 2px; } - -.chat-status-icon { - max-height: 16px; - max-width: 16px; - padding: 0; } - -.chat-toolbarbutton { - -moz-appearance: none; - border: none; - padding: 0 3px; - margin: 0; - background: none; } - -.chat-toolbarbutton > .toolbarbutton-text { - display: none; } - -.chat-toolbarbutton > .toolbarbutton-icon { - width: 16px; - height: 16px; } - -.chat-close-button { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close"); } - -.chat-close-button:hover { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-hover"); } - -.chat-close-button:hover:active { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-active"); } - -.chat-minimize-button { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize"); } - -.chat-minimize-button:hover { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-hover"); } - -.chat-minimize-button:hover:active { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-active"); } - -.chat-swap-button { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand"); - transform: rotate(180deg); } - -.chat-swap-button:hover { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-hover"); } - -.chat-swap-button:hover:active { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-active"); } - -chatbar > chatbox > .chat-titlebar > .chat-swap-button { - transform: none; } - -.chat-title { - color: #666; - text-shadow: none; - cursor: inherit; } - -.chat-titlebar { - height: 26px; - min-height: 26px; - width: 100%; - margin: 0; - padding: 5px 4px; - border: 1px solid #ebebeb; - border-bottom: 0; - border-top-left-radius: 4px; - border-top-right-radius: 4px; - cursor: pointer; - background-color: #ebebeb; } - -.chat-titlebar[selected] { - background-color: #f0f0f0; } - -.chat-titlebar > .notification-anchor-icon { - margin-left: 2px; - margin-right: 2px; } - -.chat-titlebar[minimized="true"] { - border-bottom: none; } - -.chat-titlebar[activity] { - background-image: radial-gradient(ellipse closest-side at center, white, transparent); - background-repeat: no-repeat; - background-size: 100% 20px; - background-position: 0 -10px; } - -.chat-frame { - padding: 0; - margin: 0; - overflow: hidden; } - -.chatbar-button { - list-style-image: url("chrome://browser/skin/social/services-16.png"); - margin: 0; - padding: 2px; - height: 21px; - width: 21px; - border: 1px solid #ccc; - border-bottom: none; - background-color: #d9d9d9; - background-image: linear-gradient(rgba(255, 255, 255, 0.43), transparent); - border-top-left-radius: 3px; - border-top-right-radius: 3px; } - -@media (min-resolution: 2dppx) { - .chatbar-button { - list-style-image: url("chrome://browser/skin/social/services-16@2x.png"); } } -.chatbar-button:hover, -.chatbar-button[open="true"] { - background-color: #f0f0f0; } - -.chatbar-button[activity]:not([open]) { - background-image: radial-gradient(circle farthest-corner at center 2px, #fefeff 3%, rgba(210, 235, 255, 0.9) 12%, rgba(148, 205, 253, 0.6) 30%, rgba(148, 205, 253, 0.2) 70%); } - -.chatbar-button > .toolbarbutton-icon { - width: 16px; } - -.chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon { - width: auto; - height: auto; - max-height: 16px; - max-width: 16px; } - -.chatbar-button[open="true"] { - box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), 0 1px rgba(255, 255, 255, 0.2); } - -.chatbar-button > .toolbarbutton-text, -.chatbar-button > .toolbarbutton-menu-dropmarker { - display: none; } - -.chatbar-button > menupopup > menuitem[activity] { - font-weight: bold; } - -.chatbar-innerbox { - background: transparent; - overflow: hidden; } - -chatbar { - margin-inline-end: 20px; } - -chatbox { - margin-inline-start: 4px; - background-color: transparent; } - -chatbar > chatbox { - /* Apply the same border-radius as the .chat-titlebar to make the box-shadow - go round nicely. */ - border-top-left-radius: 4px; - border-top-right-radius: 4px; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); - /* Offset the chatbox the same amount as the box-shadows' spread, to make it - visible. */ - margin-inline-end: 5px; } - -window > chatbox { - margin-inline-start: 0px; - margin: 0px; - border: none; - padding: 0px; - border-radius: 4px; } - /* Customization mode */ /* 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 @@ -4003,14 +3548,14 @@ window > chatbox { #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before, #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before, #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before { - outline-color: #666666; } + outline-color: currentColor; } #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before { transition: outline-color 250ms linear; } #PanelUI-contents[showoutline=true] > .panel-customization-placeholder { transition: outline-color 250ms linear; - outline-color: #bbb; } + outline-color: var(--panel-separator-color); } #PanelUI-contents > .panel-customization-placeholder { cursor: auto; @@ -4022,8 +3567,8 @@ window > chatbox { padding-right: 10px; } #customization-container { - background-color: #f7f7f7; - color: black; + background-color: -moz-field; + color: -moz-fieldText; text-shadow: none; } #customization-palette, @@ -4033,11 +3578,11 @@ window > chatbox { #customization-header { font-size: 1.75em; line-height: 1.75em; - color: #666; + color: GrayText; font-weight: 200; margin: 25px 25px 12px; padding-bottom: 12px; - border-bottom: 1px solid #e5e5e5; } + border-bottom: 1px solid ThreeDLightShadow; } #customization-panel-container { padding: 15px 25px 25px; @@ -4045,32 +3590,12 @@ window > chatbox { #main-window:-moz-any([customize-entering], [customize-entered]) #browser-bottombox, #customization-footer { - background-color: #ececec; } + background-color: -moz-dialog; } #customization-footer { - border-top: 1px solid #dddddd; + border-top: 1px solid ThreeDLightShadow; padding: 10px; } -.customizationmode-button { - border: 1px solid silver; - border-radius: 3px; - margin: 5px; - padding: 2px 12px; - background-color: #fbfbfb; - color: #474747; - box-shadow: 0 1px rgba(255, 255, 255, 0.5), inset 0 1px rgba(255, 255, 255, 0.5); - -moz-appearance: none; } - -#customization-titlebar-visibility-button[checked], -#customization-devedition-theme-button[checked] { - background-color: #dadada; - border-color: #a8a8a8; - text-shadow: 0 1px #ececec; - box-shadow: 0 1px rgba(255, 255, 255, 0.5), inset 0 1px #c4c4c4; } - -.customizationmode-button[disabled="true"] { - opacity: .5; } - .customizationmode-button > .box-inherit > .box-inherit > .button-icon, .customizationmode-button > .button-box > .button-icon { height: 24px; } @@ -4079,10 +3604,6 @@ window > chatbox { list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png"); -moz-image-region: rect(0, 24px, 24px, 0); } -#customization-lwtheme-button, -#customization-titlebar-visibility-button { - padding: 2px 7px; } - #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text, #customization-titlebar-visibility-button > .button-box > .button-text { /* Sadly, button.css thinks its margins are perfect for everyone. */ @@ -4175,7 +3696,7 @@ toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring, toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { /* Delay adding the focusring back until after the transform transition completes. */ transition: outline-width 0.01s linear var(--drag-drop-transition-duration); - outline: 1px dotted rgba(0, 0, 0, 0.5); + outline: 1px dotted; -moz-outline-radius: 2.5px; } toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { @@ -4245,12 +3766,12 @@ toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { .customization-lwtheme-menu-theme[active="true"], .customization-lwtheme-menu-theme:hover { - background-color: rgba(24, 26, 27, 0.08); - border-color: rgba(24, 26, 27, 0.11); } + background-color: var(--arrowpanel-dimmed); + border-color: var(--panel-separator-color); } .customization-lwtheme-menu-theme[active="true"], .customization-lwtheme-menu-theme:hover:active { - background-color: rgba(24, 26, 27, 0.15); } + background-color: var(--arrowpanel-dimmed-further); } .customization-lwtheme-menu-theme > .toolbarbutton-icon { margin: 5px; } @@ -4266,38 +3787,37 @@ toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { #customization-lwtheme-menu-header, #customization-lwtheme-menu-recommended, #customization-lwtheme-menu-footer { - background-color: rgba(24, 26, 27, 0.05); - color: gray; + background-color: var(--arrowpanel-dimmed); margin-right: -10px; margin-left: -10px; } #customization-lwtheme-menu-header { margin-top: -10px; - border-bottom: 1px solid rgba(24, 26, 27, 0.05); } + border-bottom: 1px solid var(--arrowpanel-dimmed); } #customization-lwtheme-menu-recommended { - border-top: 1px solid rgba(24, 26, 27, 0.05); - border-bottom: 1px solid rgba(24, 26, 27, 0.05); } + border-top: 1px solid var(--arrowpanel-dimmed); + border-bottom: 1px solid var(--arrowpanel-dimmed); } #customization-lwtheme-menu-footer { - background: linear-gradient(rgba(24, 26, 27, 0.05) 60%, transparent) border-box; - border-top: 1px solid rgba(24, 26, 27, 0.05); + background: linear-gradient(var(--arrowpanel-dimmed) 60%, transparent) border-box; + border-top: 1px solid var(--arrowpanel-dimmed); margin-bottom: -10px; } .customization-lwtheme-menu-footeritem { -moz-appearance: none; -moz-box-flex: 1; - color: gray; + color: inherit; border-style: none; padding: 10px; margin-left: 0; margin-right: 0; } .customization-lwtheme-menu-footeritem:hover { - background: linear-gradient(rgba(24, 26, 27, 0.08) 40%, transparent) padding-box; } + background: linear-gradient(var(--arrowpanel-dimmed) 40%, transparent) padding-box; } .customization-lwtheme-menu-footeritem:first-child { - border-inline-end: 1px solid rgba(24, 26, 27, 0.15); } + border-inline-end: 1px solid var(--panel-separator-color); } /* 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 @@ -4417,9 +3937,11 @@ toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { /* UI Tour */ #UITourHighlightContainer { -moz-appearance: none; + -moz-window-shadow: none; border: none; background-color: transparent; - /* This is a buffer to compensate for the movement in the "wobble" effect */ + /* This is a buffer to compensate for the movement in the "wobble" effect, + and for the box-shadow of #UITourHighlight. */ padding: 4px; } #UITourHighlight { @@ -4670,70 +4192,36 @@ notification.heartbeat { #context-navigation > .menuitem-iconic > .menu-iconic-left { -moz-appearance: none; } +#context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon { + width: 16px; + height: 16px; + margin: 7px; + filter: url(chrome://browser/skin/filters.svg#fill); + fill: currentColor; } + #context-back { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back"); } -#context-back[_moz-menuactive=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-active"); } - -#context-back[disabled=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-disabled"); } - #context-forward { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward"); } -#context-forward[_moz-menuactive=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-active"); } - -#context-forward[disabled=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-disabled"); } - #context-reload { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload"); } -#context-reload[_moz-menuactive=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-active"); } - -#context-reload[disabled=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-disabled"); } - #context-stop { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop"); } -#context-stop[_moz-menuactive=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-active"); } - -#context-stop[disabled=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-disabled"); } - #context-bookmarkpage { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark"); } -#context-bookmarkpage[_moz-menuactive=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-active"); } - -#context-bookmarkpage[disabled=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); } - #context-bookmarkpage[starred=true] { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); } -#context-bookmarkpage[starred=true][_moz-menuactive=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); } - -#context-bookmarkpage[starred=true][disabled=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); } - #context-back:-moz-locale-dir(rtl), #context-forward:-moz-locale-dir(rtl), #context-reload:-moz-locale-dir(rtl) { transform: scaleX(-1); } -#context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon { - width: 16px; - height: 16px; - margin: 7px; } - #context-media-eme-learnmore { list-style-image: url("chrome://browser/skin/drm-icon.svg#chains"); } diff --git a/arc-firefox-theme/chrome/browser/connection-mixed-active-loaded.svg b/arc-firefox-theme/chrome/browser/connection-mixed-active-loaded.svg new file mode 100644 index 0000000..c228a15 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/connection-mixed-active-loaded.svg @@ -0,0 +1,80 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/connection-mixed-passive-loaded.svg b/arc-firefox-theme/chrome/browser/connection-mixed-passive-loaded.svg new file mode 100644 index 0000000..096b0d1 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/connection-mixed-passive-loaded.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/connection-secure.svg b/arc-firefox-theme/chrome/browser/connection-secure.svg new file mode 100644 index 0000000..5dad890 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/connection-secure.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/content-contextmenu.svg b/arc-firefox-theme/chrome/browser/content-contextmenu.svg index b72b247..6b53c13 100644 --- a/arc-firefox-theme/chrome/browser/content-contextmenu.svg +++ b/arc-firefox-theme/chrome/browser/content-contextmenu.svg @@ -2,45 +2,17 @@ - + - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + diff --git a/arc-firefox-theme/chrome/browser/controlcenter/arrow-subview-back.svg b/arc-firefox-theme/chrome/browser/controlcenter/arrow-subview-back.svg index 8566d63..12b7509 100644 --- a/arc-firefox-theme/chrome/browser/controlcenter/arrow-subview-back.svg +++ b/arc-firefox-theme/chrome/browser/controlcenter/arrow-subview-back.svg @@ -3,5 +3,32 @@ - 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/controlcenter/arrow-subview.svg b/arc-firefox-theme/chrome/browser/controlcenter/arrow-subview.svg index 98c8f61..04be5d4 100644 --- a/arc-firefox-theme/chrome/browser/controlcenter/arrow-subview.svg +++ b/arc-firefox-theme/chrome/browser/controlcenter/arrow-subview.svg @@ -3,5 +3,32 @@ - 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/controlcenter/conn-degraded.svg b/arc-firefox-theme/chrome/browser/controlcenter/conn-degraded.svg deleted file mode 100644 index e3e82c1..0000000 --- a/arc-firefox-theme/chrome/browser/controlcenter/conn-degraded.svg +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - - - - - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/controlcenter/conn-not-secure.svg b/arc-firefox-theme/chrome/browser/controlcenter/conn-not-secure.svg index d4ee83a..75aeed8 100644 --- a/arc-firefox-theme/chrome/browser/controlcenter/conn-not-secure.svg +++ b/arc-firefox-theme/chrome/browser/controlcenter/conn-not-secure.svg @@ -3,6 +3,39 @@ - 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/controlcenter/conn-secure.svg b/arc-firefox-theme/chrome/browser/controlcenter/conn-secure.svg deleted file mode 100644 index b82ee42..0000000 --- a/arc-firefox-theme/chrome/browser/controlcenter/conn-secure.svg +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - - - - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/controlcenter/connection.svg b/arc-firefox-theme/chrome/browser/controlcenter/connection.svg new file mode 100644 index 0000000..df5035f --- /dev/null +++ b/arc-firefox-theme/chrome/browser/controlcenter/connection.svg @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/controlcenter/mcb-disabled.svg b/arc-firefox-theme/chrome/browser/controlcenter/mcb-disabled.svg index af45b90..cca3153 100644 --- a/arc-firefox-theme/chrome/browser/controlcenter/mcb-disabled.svg +++ b/arc-firefox-theme/chrome/browser/controlcenter/mcb-disabled.svg @@ -5,6 +5,33 @@ + @@ -26,8 +53,8 @@ - - + + diff --git a/arc-firefox-theme/chrome/browser/controlcenter/panel.css b/arc-firefox-theme/chrome/browser/controlcenter/panel.css index f22053e..c872205 100644 --- a/arc-firefox-theme/chrome/browser/controlcenter/panel.css +++ b/arc-firefox-theme/chrome/browser/controlcenter/panel.css @@ -155,16 +155,18 @@ } .identity-popup-expander:hover { - background-color: hsla(210,4%,10%,.07); + background-color: var(--arrowpanel-dimmed); } .identity-popup-expander:hover:active { - background-color: hsla(210,4%,10%,.12); + background-color: var(--arrowpanel-dimmed-further); box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset; } /* CONTENT */ +.identity-popup-permission-label, +.identity-popup-permission-state-label, #identity-popup-security-content > description, #identity-popup-security-descriptions > description, #identity-popup-securityView-header > description, @@ -229,7 +231,7 @@ #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); + background-image: url(chrome://browser/skin/controlcenter/connection.svg#connection-secure); } /* Use [isbroken] to make sure we don't show a lock on an http page. See Bug 1192162. */ @@ -237,12 +239,12 @@ #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); + background-image: url(chrome://browser/skin/controlcenter/connection.svg#connection-degraded); } #identity-popup[connection=secure-cert-user-overridden] #identity-popup-securityView, #identity-popup[connection=secure-cert-user-overridden] #identity-popup-security-content { - background-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg); + background-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon); } #identity-popup[loginforms=insecure] #identity-popup-securityView, @@ -275,26 +277,26 @@ #identity-popup-securityView-footer { margin-top: 1em; - background-color: hsla(210,4%,10%,.07); + background-color: var(--arrowpanel-dimmed); } #identity-popup-securityView-footer > button { -moz-appearance: none; margin: 0; border: none; - border-top: 1px solid #ccc; + border-top: 1px solid var(--panel-separator-color); padding: 8px 20px; - color: ButtonText; + color: inherit; background-color: transparent; } #identity-popup-securityView-footer > button:hover, #identity-popup-securityView-footer > button:focus { - background-color: hsla(210,4%,10%,.07); + background-color: var(--arrowpanel-dimmed); } #identity-popup-securityView-footer > button:hover:active { - background-color: hsla(210,4%,10%,.12); + background-color: var(--arrowpanel-dimmed-further); } #identity-popup-content-verifier ~ description { @@ -317,11 +319,11 @@ description#identity-popup-content-verifier, /* TRACKING PROTECTION */ #tracking-protection-content { - background-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg"); + background-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg#enabled"); } #tracking-protection-content[state="loaded-tracking-content"] { - background-image: url("chrome://browser/skin/controlcenter/tracking-protection-disabled.svg"); + background-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg#disabled"); } #tracking-action-block, @@ -369,20 +371,35 @@ description#identity-popup-content-verifier, margin-top: 5px; } -#identity-popup-permission-list:not(:empty) + description { - display: none; -} - .identity-popup-permission-icon { width: 16px; height: 16px; } +.identity-popup-permission-icon.in-use { + animation: 1.5s ease in-use-blink infinite; +} + +@keyframes in-use-blink { + 50% { opacity: 0; } +} + +.identity-popup-permission-label, +.identity-popup-permission-state-label { + /* We need to align the action buttons and permission icons with the text. + This is tricky because the icon height is defined in pixels, while the + font height can vary with platform and system settings, and at least on + Windows the default font metrics reserve more extra space for accents. + This value is a good compromise for different platforms and font sizes. */ + margin-top: -0.1em; +} + .identity-popup-permission-label { margin-inline-start: 1em; } .identity-popup-permission-state-label { + margin-inline-end: 5px; text-align: end; color: graytext; } diff --git a/arc-firefox-theme/chrome/browser/controlcenter/permissions.svg b/arc-firefox-theme/chrome/browser/controlcenter/permissions.svg index 9a0cb2b..c97a6e7 100644 --- a/arc-firefox-theme/chrome/browser/controlcenter/permissions.svg +++ b/arc-firefox-theme/chrome/browser/controlcenter/permissions.svg @@ -2,10 +2,45 @@ - - - - - - + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/controlcenter/tracking-protection-disabled.svg b/arc-firefox-theme/chrome/browser/controlcenter/tracking-protection-disabled.svg deleted file mode 100644 index 363b0df..0000000 --- a/arc-firefox-theme/chrome/browser/controlcenter/tracking-protection-disabled.svg +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - - - - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/controlcenter/tracking-protection.svg b/arc-firefox-theme/chrome/browser/controlcenter/tracking-protection.svg index a58d8bd..895f171 100644 --- a/arc-firefox-theme/chrome/browser/controlcenter/tracking-protection.svg +++ b/arc-firefox-theme/chrome/browser/controlcenter/tracking-protection.svg @@ -4,18 +4,66 @@ - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> + + + - - - - + + + + + + + + + + + + - + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/customizableui/menuPanel-customizeFinish.png b/arc-firefox-theme/chrome/browser/customizableui/menuPanel-customizeFinish.png index 0251ed7..07be6a7 100644 Binary files a/arc-firefox-theme/chrome/browser/customizableui/menuPanel-customizeFinish.png and b/arc-firefox-theme/chrome/browser/customizableui/menuPanel-customizeFinish.png differ diff --git a/arc-firefox-theme/chrome/browser/customizableui/menuPanel-customizeFinish@2x.png b/arc-firefox-theme/chrome/browser/customizableui/menuPanel-customizeFinish@2x.png index 593e1df..7562e13 100644 Binary files a/arc-firefox-theme/chrome/browser/customizableui/menuPanel-customizeFinish@2x.png and b/arc-firefox-theme/chrome/browser/customizableui/menuPanel-customizeFinish@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/customizableui/panelUI.css b/arc-firefox-theme/chrome/browser/customizableui/panelUI.css index ef775e0..7549339 100644 --- a/arc-firefox-theme/chrome/browser/customizableui/panelUI.css +++ b/arc-firefox-theme/chrome/browser/customizableui/panelUI.css @@ -107,7 +107,6 @@ height: 13px; } -#PanelUI-menu-button[badge-status="download-severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, #PanelUI-menu-button[badge-status="update-failed"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { background: #D90000 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center; height: 13px; @@ -115,16 +114,31 @@ #PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, #PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { - height: 13px; box-shadow: none; filter: drop-shadow(0 1px 0 hsla(206, 50%, 10%, .15)); } +#PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="download-severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + width: 7px; + height: 7px; + min-width: 0; + border-radius: 50%; + /* "!important" is necessary to override the rule in toolbarbutton.css */ + margin-top: -1px !important; + margin-right: -2px !important; +} + #PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { - background: #FFBF00 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center; + background: #FFBF00; +} + +#PanelUI-menu-button[badge-status="download-severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: #D90000; } #PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + height: 13px; background: transparent url(chrome://browser/skin/warning.svg) no-repeat center; } @@ -136,7 +150,7 @@ .panel-subviews { padding: 4px; background-clip: padding-box; - border-left: 1px solid hsla(210,4%,10%,.3); + border-left: 1px solid var(--panel-arrowcontent-border-color); box-shadow: 0 3px 5px hsla(210,4%,10%,.1), 0 0 7px hsla(210,4%,10%,.1); margin-inline-start: var(--panel-ui-exit-subview-gutter-width); @@ -178,7 +192,7 @@ panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .pan .panel-subview-header { margin: -4px -4px 4px; - box-shadow: 0 -1px 0 hsla(210,4%,10%,.05) inset; + border-bottom: 1px solid var(--panel-separator-color); color: GrayText; font-variant: small-caps; } @@ -385,7 +399,7 @@ toolbarpaletteitem:-moz-any([place="palette"], [place="panel"]) > toolbaritem[sd } .panelUI-grid .toolbarbutton-1:not([buttonover]):not(:-moz-any([disabled],[open],:active)):hover > .toolbarbutton-menubutton-dropmarker { - background-color: hsla(210,4%,10%,.1) !important; + background-color: var(--arrowpanel-dimmed) !important; border-radius: 0 0 0 2px; } @@ -412,7 +426,7 @@ toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe { } #PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview > #PanelUI-mainView { - background-color: hsla(210,4%,10%,.1); + background-color: var(--arrowpanel-dimmed); } #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item, @@ -513,7 +527,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { display: flex; flex-shrink: 0; flex-direction: column; - background-color: hsla(210,4%,10%,.07); + background-color: var(--arrowpanel-dimmed); padding: 0; margin: 0; } @@ -530,7 +544,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { #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)); + filter: drop-shadow(0 1px 0 hsla(206,50%,10%,.15)); width: 47px; padding-top: 1px; display: block; @@ -544,7 +558,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { 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); + box-shadow: 0px 1px 0px rgba(255,255,255,.2) inset, 0px -1px 0px rgba(0,0,0,.1) inset, 0px 1px 0px rgba(12,27,38,.2); border-radius: 2px; background-size: contain; display: -moz-box; @@ -569,7 +583,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { #PanelUI-footer-inner, #PanelUI-footer-fxa:not([hidden]) { display: flex; - border-top: 1px solid hsla(210,4%,10%,.14); + border-top: 1px solid var(--panel-separator-color); } #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner, @@ -580,7 +594,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { #PanelUI-footer-inner > toolbarseparator, #PanelUI-footer-fxa > toolbarseparator { border: 0; - border-left: 1px solid hsla(210,4%,10%,.14); + border-left: 1px solid var(--panel-separator-color); margin: 7px 0 7px; -moz-appearance: none; } @@ -609,7 +623,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { } #PanelUI-update-status { - border-top: 1px solid hsla(210,4%,10%,.14); + border-top: 1px solid var(--panel-separator-color); } #PanelUI-update-status { @@ -887,8 +901,8 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { #PanelUI-help:not([disabled]):hover, #PanelUI-customize:hover, #PanelUI-quit:not([disabled]):hover { - outline: 1px solid hsla(210,4%,10%,.07); - background-color: hsla(210,4%,10%,.07); + outline: 1px solid var(--arrowpanel-dimmed); + background-color: var(--arrowpanel-dimmed); } #PanelUI-fxa-status:not([disabled]):hover:active, @@ -896,8 +910,8 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { #PanelUI-help:not([disabled]):hover:active, #PanelUI-customize:hover:active, #PanelUI-quit:not([disabled]):hover:active { - outline: 1px solid hsla(210,4%,10%,.12); - background-color: hsla(210,4%,10%,.12); + outline: 1px solid var(--arrowpanel-dimmed-further); + background-color: var(--arrowpanel-dimmed-further); box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset; } @@ -909,16 +923,16 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { } #PanelUI-footer-fxa[fxastatus="error"] { - background-color: hsla(42, 94%, 88%, 1.0); - border-top: 1px solid hsla(42, 94%, 70%, 1.0); + background-color: hsl(42,94%,88%); + border-top: 1px solid hsl(42,94%,70%); } #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover { - background-color: hsla(42, 94%, 85%, 1.0); + background-color: hsl(42,94%,85%); } #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover:active { - background-color: hsla(42, 94%, 82%, 1.0); + background-color: hsl(42,94%,82%); box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset; } @@ -927,27 +941,27 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { } #PanelUI-update-status[update-status="succeeded"] { - background-color: hsla(96, 65%, 75%, 0.5); + background-color: hsla(96,65%,75%,.5); } #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover { - background-color: hsla(96, 65%, 75%, 0.8); + background-color: hsla(96,65%,75%,.8); } #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover:active { - background-color: hsl(96, 65%, 75%); + background-color: hsl(96,65%,75%); } #PanelUI-update-status[update-status="failed"] { - background-color: hsla(359, 69%, 84%, 0.5); + background-color: hsla(359,69%,84%,.5); } #PanelUI-update-status[update-status="failed"]:not([disabled]):hover { - background-color: hsla(359, 69%, 84%, 0.8); + background-color: hsla(359,69%,84%,.8); } #PanelUI-update-status[update-status="failed"]:not([disabled]):hover:active { - background-color: hsl(359, 69%, 84%); + background-color: hsl(359,69%,84%); } #PanelUI-quit:not([disabled]):hover { @@ -962,7 +976,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { #customization-panelHolder #PanelUI-customize { color: white; - background-color: rgb(116,191,67); + background-color: hsl(108,66%,30%); text-shadow: none; margin-top: -1px; } @@ -971,9 +985,12 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { display: none; } -#customization-panelHolder #PanelUI-customize:hover, +#customization-panelHolder #PanelUI-customize:hover { + background-color: hsl(109,65%,26%); +} + #customization-panelHolder #PanelUI-customize:hover:active { - background-color: rgb(105,173,61); + background-color: hsl(109,65%,22%); } #customization-palette .toolbarbutton-multiline-text, @@ -989,10 +1006,10 @@ panelview .toolbarbutton-1, .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton { -moz-appearance: none; padding: 0 6px; - background-color: hsla(210,4%,10%,0); + background-color: transparent; border-radius: 2px; border-style: solid; - border-color: hsla(210,4%,10%,0); + border-color: transparent; } panelview .toolbarbutton-1, @@ -1075,12 +1092,12 @@ menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive], .share-provider-button:not(:-moz-any([disabled],[open],:active)):hover:not([checked="true"]), .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover, .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton:not(:-moz-any([disabled],[open],:active)):hover { - background-color: hsla(210,4%,10%,.08); - border-color: hsla(210,4%,10%,.11); + background-color: var(--arrowpanel-dimmed); + border-color: var(--panel-separator-color); } .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[open],:active)):hover { - border-color: hsla(210,4%,10%,.11); + border-color: var(--panel-separator-color); } panelview .toolbarbutton-1:-moz-any(:not([disabled]):-moz-any([open],:hover:active),[checked=true]), @@ -1090,28 +1107,26 @@ menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active, .share-provider-button:-moz-any(:not([disabled]):-moz-any([open],:hover:active),[checked=true]), .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active), .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton:not([disabled]):-moz-any([open],:hover:active) { - background-color: hsla(210,4%,10%,.12); - border-color: hsla(210,4%,10%,.14); + background-color: var(--arrowpanel-dimmed-further); + border-color: var(--panel-separator-color); box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset; } .subviewbutton.panel-subview-footer { margin: 4px -4px -4px; - background-color: hsla(210,4%,10%,.07); - border-top: 1px solid hsla(210,4%,10%,.12); + background-color: var(--arrowpanel-dimmed); + border-top: 1px solid var(--panel-separator-color); border-radius: 0; } menuitem.panel-subview-footer:not(:-moz-any([disabled],:active))[_moz-menuactive], .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover { - background-color: hsla(210,4%,10%,.15); - border-top: 1px solid hsla(210,4%,10%,.14); + background-color: var(--arrowpanel-dimmed-further); } menuitem.panel-subview-footer:not([disabled])[_moz-menuactive]:active, .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active) { - background-color: hsla(210,4%,10%,.19); - border-top: 1px solid hsla(210,4%,10%,.14); + background-color: var(--arrowpanel-dimmed-even-further); box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset; } @@ -1278,11 +1293,11 @@ toolbarpaletteitem[place="palette"] > #search-container { } .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) { - background-color: hsla(210,4%,10%,0); + background-color: transparent; border-radius: 2px; border: 1px solid; - border-color: hsla(210,4%,10%,0); - border-bottom-color: hsla(210,4%,10%,.1); + border-color: transparent; + border-bottom-color: var(--panel-separator-color); padding: 0; transition-property: background-color, border-color; transition-duration: 150ms; @@ -1457,7 +1472,7 @@ menuitem[checked="true"].subviewbutton > .menu-iconic-left { #PanelUI-panic-timeframe { padding: 15px; - border-bottom: 1px solid rgba(0,0,0,0.1); + border-bottom: 1px solid var(--panel-separator-color); } #panic-button-success-icon, @@ -1510,23 +1525,21 @@ menuitem[checked="true"].subviewbutton > .menu-iconic-left { -moz-box-align: center; padding: 1px; margin: 0 0 2px; - background-color: hsla(210,4%,10%,0); + background-color: transparent; border-radius: 2px; - border-width: 1px; - border-style: solid; - border-color: hsla(210,4%,10%,0); + border: 1px solid transparent; } .subviewradio:not(:-moz-any([disabled],[open],:active)):hover { - background-color: hsla(210,4%,10%,.08); - border-color: hsla(210,4%,10%,.11); + background-color: var(--arrowpanel-dimmed); + border-color: var(--panel-separator-color); } .subviewradio[selected], .subviewradio[selected]:hover, .subviewradio:not([disabled]):-moz-any([open],:hover:active) { - background-color: hsla(210,4%,10%,.12); - border-color: hsla(210,4%,10%,.14); + background-color: var(--arrowpanel-dimmed-further); + border-color: var(--panel-separator-color); box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset; } @@ -1744,7 +1757,7 @@ menuitem[checked="true"].subviewbutton > .menu-iconic-left { } .panel-subviews { - background-color: -moz-dialog; + background-color: var(--panel-arrowcontent-background); } #BMB_bookmarksPopup > menuitem[type="checkbox"] { @@ -1755,7 +1768,7 @@ menuitem[checked="true"].subviewbutton > .menu-iconic-left { -moz-appearance: none; background: var(--panel-arrowcontent-background); color: var(--panel-arrowcontent-color); - border: var(--panel-arrowcontent-border); + border: 1px solid var(--panel-arrowcontent-border-color); margin-top: -6px; padding-top: 1px; } @@ -1832,14 +1845,6 @@ menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) { margin-bottom: 2px !important; } -.PanelUI-subView toolbarseparator, -.PanelUI-subView menuseparator, -.cui-widget-panelview menuseparator, -#PanelUI-footer-inner > toolbarseparator, -#PanelUI-footer-fxa > toolbarseparator { - -moz-appearance: none !important; -} - .subviewradio > .radio-label-box { -moz-appearance: none; } diff --git a/arc-firefox-theme/chrome/browser/devedition.css b/arc-firefox-theme/chrome/browser/devedition.css index 4ad2288..1331705 100644 --- a/arc-firefox-theme/chrome/browser/devedition.css +++ b/arc-firefox-theme/chrome/browser/devedition.css @@ -47,11 +47,6 @@ --urlbar-dropmarker-active-2x-region: rect(0px, 33px, 14px, 22px); } -:root[devtoolstheme="dark"] #identity-box { - --identity-box-chrome-color: #46afe3; - --identity-box-verified-background-color: transparent; -} - /* Override the lwtheme-specific styling for toolbar buttons */ :root[devtoolstheme="dark"], :root[devtoolstheme="dark"] toolbar:-moz-lwtheme { @@ -62,6 +57,7 @@ --toolbarbutton-active-boxshadow: none; --toolbarbutton-active-bordercolor: rgba(25,33,38,.8); --toolbarbutton-checkedhover-backgroundcolor: #3C5283; + } :root[devtoolstheme="light"] { @@ -122,17 +118,17 @@ padding-inline-start: 0; } -.tab-background-start[visuallyselected=true]::after, -.tab-background-start[visuallyselected=true]::before, +.tab-background-start[selected=true]::after, +.tab-background-start[selected=true]::before, .tab-background-start, .tab-background-end, -.tab-background-end[visuallyselected=true]::after, -.tab-background-end[visuallyselected=true]::before { +.tab-background-end[selected=true]::after, +.tab-background-end[selected=true]::before { width: 0; } -.tab-background-start[visuallyselected=true]::after, -.tab-background-end[visuallyselected=true]::after { +.tab-background-start[selected=true]::after, +.tab-background-end[selected=true]::after { margin-inline-start: 0; } /* End override @tabCurveHalfWidth@ and @tabCurveWidth@ */ @@ -154,7 +150,7 @@ } #navigator-toolbox:-moz-lwtheme::after { - background: var(--chrome-navigator-toolbox-separator-color); + border-bottom-color: var(--chrome-navigator-toolbox-separator-color); } #navigator-toolbox > toolbar:not(#TabsToolbar):not(#toolbar-menubar), @@ -199,6 +195,64 @@ toolbar[brighttext] #downloads-indicator-counter { box-shadow: none !important; } + +:root[devtoolstheme="dark"] #identity-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/identity-icon.svg#normal-white); +} + +:root[devtoolstheme="dark"] #identity-box:hover > #identity-icon:not(.no-hover):-moz-lwtheme, +:root[devtoolstheme="dark"] #identity-box[open=true] > #identity-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/identity-icon.svg#hover-white); +} + +:root[devtoolstheme="dark"] #identity-box.grantedPermissions > #identity-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-white); +} + +:root[devtoolstheme="dark"] #identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover):-moz-lwtheme, +:root[devtoolstheme="dark"] #identity-box.grantedPermissions[open=true] > #identity-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover-white); +} + +:root[devtoolstheme="dark"] #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon:-moz-lwtheme { + list-style-image: url(chrome://branding/content/identity-icons-brand.svg); +} + + +:root[devtoolstheme="dark"] #tracking-protection-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled-white); +} + +:root[devtoolstheme="dark"] #tracking-protection-icon[state="loaded-tracking-content"]:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled-white); +} + + +:root[devtoolstheme="dark"] #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon:-moz-lwtheme, +:root[devtoolstheme="dark"] #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon:-moz-lwtheme, +:root[devtoolstheme="dark"] #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/connection-secure.svg); + visibility: visible; +} + +:root[devtoolstheme="dark"] #urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon-white); + visibility: visible; +} + +:root[devtoolstheme="dark"] #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon:-moz-lwtheme, +:root[devtoolstheme="dark"] #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon-white); + visibility: visible; +} + +:root[devtoolstheme="dark"] #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon:-moz-lwtheme, +:root[devtoolstheme="dark"] #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon:-moz-lwtheme, +:root[devtoolstheme="dark"] #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon-white); + visibility: visible; +} + #urlbar { border-inline-start: none !important; opacity: 1 !important; @@ -210,6 +264,14 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper { margin-inline-start: 0; } +:root[devtoolstheme="dark"] #urlbar-zoom-button:hover { + background-color: rgba(255,255,255,.2); +} + +:root[devtoolstheme="dark"] #urlbar-zoom-button:hover:active { + background-color: rgba(255,255,255,.3); +} + /* Nav bar specific stuff */ #nav-bar { margin-top: 0 !important; @@ -260,14 +322,14 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper { pointer-events: auto; } -.tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([visuallyselected="true"]), -.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([visuallyselected="true"]) { +.tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), +.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { background-image: var(--pinned-tab-glow); background-position: center; background-size: 100%; } -.tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned]):not([visuallyselected="true"]) { +.tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned]):not([selected="true"]) { background-position: left bottom var(--tab-toolbar-navbar-overlap); background-size: 34px 100%; } @@ -283,28 +345,9 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper { background-color: var(--tab-selection-background-color); } -.tab-icon-sound[visuallyselected=true][soundplaying] { - list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white"); -} - -.tab-icon-sound[visuallyselected=true][soundplaying]:hover { - list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover"); -} - -.tab-icon-sound[visuallyselected=true][soundplaying]:hover:active { - list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed"); -} - -.tab-icon-sound[visuallyselected=true][muted] { - list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white"); -} - -.tab-icon-sound[visuallyselected=true][muted]:hover { - list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover"); -} - -.tab-icon-sound[visuallyselected=true][muted]:hover:active { - list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed"); +.tab-icon-sound[soundplaying], +.tab-icon-sound[muted] { + filter: url(chrome://browser/skin/filters.svg#fill) !important; /* removes drop-shadow filter */ } /* Don't need space for the tab curves (66px - 30px) */ @@ -335,7 +378,7 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper { :root[devtoolstheme="dark"] .findbar-closebutton:not(:hover), :root[devtoolstheme="dark"] #sidebar-header > .close-icon:not(:hover), -.tab-close-button[visuallyselected]:not(:hover) { +.tab-close-button[selected]:not(:hover) { background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 80, 16, 64); } diff --git a/arc-firefox-theme/chrome/browser/downloads/download-summary.png b/arc-firefox-theme/chrome/browser/downloads/download-summary.png deleted file mode 100644 index c5d4754..0000000 Binary files a/arc-firefox-theme/chrome/browser/downloads/download-summary.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/downloads/download-summary.svg b/arc-firefox-theme/chrome/browser/downloads/download-summary.svg new file mode 100644 index 0000000..c10ee95 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/downloads/download-summary.svg @@ -0,0 +1,11 @@ + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/downloads/downloads.css b/arc-firefox-theme/chrome/browser/downloads/downloads.css index 0ab69eb..ec00aba 100644 --- a/arc-firefox-theme/chrome/browser/downloads/downloads.css +++ b/arc-firefox-theme/chrome/browser/downloads/downloads.css @@ -24,26 +24,30 @@ background: transparent; padding: 4px; color: inherit; + -moz-appearance: none; + margin: 0; + border: none; } #emptyDownloads { - padding: 10px 20px; + padding: 16px 25px; + margin: 0; /* The panel can be wider than this description after the blocked subview is shown, so center the text. */ text-align: center; } .downloadsPanelFooter { - background-color: hsla(210,4%,10%,.07); - border-top: 1px solid hsla(210,4%,10%,.14); + background-color: var(--arrowpanel-dimmed); + border-top: 1px solid var(--panel-separator-color); } -.downloadsPanelFooter > toolbarseparator { +.downloadsPanelFooter toolbarseparator { margin: 0; border: 0; min-width: 0; - border-left: 1px solid hsla(210,4%,10%,.14); - -moz-appearance: none !important; + border-left: 1px solid var(--panel-separator-color); + -moz-appearance: none; } .downloadsPanelFooterButton { @@ -52,17 +56,20 @@ color: inherit; margin: 0; padding: 0; + min-width: 0; min-height: 40px; + border: none; } .downloadsPanelFooterButton:hover { - outline: 1px solid hsla(210,4%,10%,.07); - background-color: hsla(210,4%,10%,.07); + outline: 1px solid var(--arrowpanel-dimmed); + background-color: var(--arrowpanel-dimmed); } -.downloadsPanelFooterButton:hover:active { - outline: 1px solid hsla(210,4%,10%,.12); - background-color: hsla(210,4%,10%,.12); +.downloadsPanelFooterButton:hover:active, +.downloadsPanelFooterButton[open="true"] { + outline: 1px solid var(--arrowpanel-dimmed-further); + background-color: var(--arrowpanel-dimmed-further); box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset; } @@ -79,6 +86,60 @@ background-color: #0568ba; } +.downloadsPanelFooterButton > .button-box { + padding: 0; + margin: 0; + border: none; +} + +#downloadsHistory { + padding-inline-start: 10px; + padding-inline-end: 10px; +} + +#downloadsPanel[hasdownloads] #downloadsFooterButtons:not(.downloadsHideDropmarker) > #downloadsHistory { + padding-inline-start: 68px; +} + +toolbarseparator.downloadsDropmarkerSplitter { + margin: 7px 0; +} + +#downloadsFooter:hover toolbarseparator.downloadsDropmarkerSplitter, +#downloadsFooter[showingdropdown] toolbarseparator { + margin: 0; +} + +.downloadsDropmarker { + padding: 0 21px; +} + +.downloadsDropmarker > .button-box > hbox { + display: none; +} + +.downloadsDropmarker > .button-box > .button-menu-dropmarker { + /* This is to override the linux !important */ + -moz-appearance: none !important; + display: -moz-box; + padding: 0; + margin: 0; +} + +.downloadsDropmarker > .button-box > .button-menu-dropmarker > .dropmarker-icon { + width: 16px; + height: 16px; + list-style-image: url("chrome://browser/skin/downloads/menubutton-dropmarker.svg"); + filter: url("chrome://browser/skin/filters.svg#fill"); + fill: currentColor; +} + +/* Override default icon size which is too small for this dropdown */ +.downloadsDropmarker > .button-box > .button-menu-dropmarker { + width: 16px; + height: 16px; +} + #downloadsSummary { padding: 0 12px; cursor: pointer; @@ -86,10 +147,9 @@ } #downloadsSummary > .downloadTypeIcon { - list-style-image: url("chrome://browser/skin/downloads/download-summary.png"); + list-style-image: url("chrome://browser/skin/downloads/download-summary.svg"); } - #downloadsSummaryDescription { color: -moz-nativehyperlinktext; } diff --git a/arc-firefox-theme/chrome/browser/downloads/menubutton-dropmarker.svg b/arc-firefox-theme/chrome/browser/downloads/menubutton-dropmarker.svg new file mode 100644 index 0000000..76af113 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/downloads/menubutton-dropmarker.svg @@ -0,0 +1,8 @@ + + + + + diff --git a/arc-firefox-theme/chrome/browser/gear.svg b/arc-firefox-theme/chrome/browser/gear.svg new file mode 100644 index 0000000..b765f3d --- /dev/null +++ b/arc-firefox-theme/chrome/browser/gear.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/arc-firefox-theme/chrome/browser/identity-icon.svg b/arc-firefox-theme/chrome/browser/identity-icon.svg index c19765a..d0a4b7e 100644 --- a/arc-firefox-theme/chrome/browser/identity-icon.svg +++ b/arc-firefox-theme/chrome/browser/identity-icon.svg @@ -1,36 +1,65 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/identity-mixed-active-loaded.svg b/arc-firefox-theme/chrome/browser/identity-mixed-active-loaded.svg deleted file mode 100644 index b7191a8..0000000 --- a/arc-firefox-theme/chrome/browser/identity-mixed-active-loaded.svg +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/identity-mixed-passive-loaded.svg b/arc-firefox-theme/chrome/browser/identity-mixed-passive-loaded.svg deleted file mode 100644 index d1e9dbd..0000000 --- a/arc-firefox-theme/chrome/browser/identity-mixed-passive-loaded.svg +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/identity-not-secure.svg b/arc-firefox-theme/chrome/browser/identity-not-secure.svg deleted file mode 100644 index a57a5af..0000000 --- a/arc-firefox-theme/chrome/browser/identity-not-secure.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - diff --git a/arc-firefox-theme/chrome/browser/identity-secure.svg b/arc-firefox-theme/chrome/browser/identity-secure.svg deleted file mode 100644 index 5dad890..0000000 --- a/arc-firefox-theme/chrome/browser/identity-secure.svg +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - - - - - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/menuPanel-small.png b/arc-firefox-theme/chrome/browser/menuPanel-small.png deleted file mode 100644 index 4cd3e52..0000000 Binary files a/arc-firefox-theme/chrome/browser/menuPanel-small.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/menuPanel-small.svg b/arc-firefox-theme/chrome/browser/menuPanel-small.svg new file mode 100644 index 0000000..44a264c --- /dev/null +++ b/arc-firefox-theme/chrome/browser/menuPanel-small.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/menuPanel-small@2x.png b/arc-firefox-theme/chrome/browser/menuPanel-small@2x.png deleted file mode 100644 index f3eb362..0000000 Binary files a/arc-firefox-theme/chrome/browser/menuPanel-small@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/menuPanel.png b/arc-firefox-theme/chrome/browser/menuPanel.png deleted file mode 100644 index 1ef5f9a..0000000 Binary files a/arc-firefox-theme/chrome/browser/menuPanel.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/menuPanel.svg b/arc-firefox-theme/chrome/browser/menuPanel.svg new file mode 100644 index 0000000..199278f --- /dev/null +++ b/arc-firefox-theme/chrome/browser/menuPanel.svg @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/menuPanel@2x.png b/arc-firefox-theme/chrome/browser/menuPanel@2x.png deleted file mode 100644 index e29fe55..0000000 Binary files a/arc-firefox-theme/chrome/browser/menuPanel@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/newtab/newTab.css b/arc-firefox-theme/chrome/browser/newtab/newTab.css index c0c7b77..29bcead 100644 --- a/arc-firefox-theme/chrome/browser/newtab/newTab.css +++ b/arc-firefox-theme/chrome/browser/newtab/newTab.css @@ -89,6 +89,13 @@ width: 28px; } +#newtab-customize-button { + font-size: 28px; + padding: 0; + /* only display the text label when CSS backgrounds are disabled (e.g. in high contrast mode) */ + color: transparent; +} + #newtab-customize-button:-moz-any(:hover, :active, [active]) { background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 64, 32, 32); background-color: #FFFFFF; @@ -98,18 +105,24 @@ /* CELLS */ .newtab-cell { + --cell-corner-radius: 8px; background-color: rgba(255,255,255,.2); - border-radius: 8px; + border-radius: var(--cell-corner-radius); +} + +body.compact .newtab-cell { + --cell-corner-radius: 2px; } .newtab-cell:empty { outline: 2px dashed #c1c1c1; - -moz-outline-radius: 8px; + outline-offset: -2px; + -moz-outline-radius: var(--cell-corner-radius); } /* SITES */ .newtab-site { - border-radius: inherit; + border-radius: var(--cell-corner-radius); box-shadow: 0 1px 3px #c1c1c1; text-decoration: none; transition-property: top, left, opacity, box-shadow, background-color; @@ -130,7 +143,7 @@ /* LINKS */ .newtab-link { - border-radius: 10px; + border-radius: var(--cell-corner-radius); overflow: hidden; } @@ -146,11 +159,28 @@ background-clip: padding-box; background-repeat: no-repeat; background-size: cover; - border-radius: 8px 8px 0px 0px; height: 180px; transition: opacity 100ms ease-out; } +body.compact .newtab-thumbnail { + height: 100%; + border-radius: calc(var(--cell-corner-radius) + 1px); + outline: 1px solid hsla(0,0%,0%,.1); + -moz-outline-radius: var(--cell-corner-radius); + outline-offset: -1px; +} + +.newtab-thumbnail.placeholder { + color: white; + font-size: 85px; + line-height: 200%; +} + +body.compact .newtab-thumbnail.placeholder { + font-size: 45px; +} + .newtab-cell:not([ignorehover]) .newtab-site:hover .newtab-thumbnail.enhanced-content { opacity: 0; } @@ -160,27 +190,66 @@ .newtab-site[type=organic] .newtab-thumbnail, .newtab-site[type=sponsored] .newtab-thumbnail { background-position: center center; +} + +body.compact .newtab-site[type=affiliate] .newtab-thumbnail { + background-position: center 30%; +} + +.newtab-site[type=affiliate] .newtab-thumbnail, +body:not(.compact) .newtab-site[type=enhanced] .newtab-thumbnail, +body:not(.compact) .newtab-site[type=organic] .newtab-thumbnail, +body:not(.compact) .newtab-site[type=sponsored] .newtab-thumbnail { background-size: auto; } /* TITLES */ -.newtab-sponsored, + +.newtab-title { + background-color: #F2F2F2; + font-size: 13px; + line-height: 30px; + border: 1px solid #fff; + border-radius: 0 0 var(--cell-corner-radius) var(--cell-corner-radius); +} + +body.compact .newtab-title { + background-color: hsla(0,0%,100%,.85); + font-size: 12px; + line-height: 21px; + border: 1px solid hsla(0,0%,80%,.8); + border-top-color: hsla(0,0%,0%,.1); + background-clip: padding-box; +} + .newtab-title, -.newtab-suggested { +.newtab-suggested { color: #5c5c5c; } +body.compact .newtab-title, +body.compact .newtab-suggested { + color: black; +} + .newtab-suggested[active] { background-color: rgba(51, 51, 51, 0.95); border: 0; color: white; } -.newtab-site:hover .newtab-title { +body:not(.compact) .newtab-site:hover .newtab-title { color: white; background-color: #333; - border: 1px solid #333; - border-top: 1px solid white; + border-color: #333; + border-top-color: white; +} + +body.compact .newtab-site:hover .newtab-title { + color: white; + background-color: hsla(0,0%,20%,.85); + border-color: hsla(0,0%,0%,.8); + border-top-color: white; } .newtab-site[pinned] .newtab-title { @@ -211,6 +280,31 @@ border: none; height: 24px; width: 24px; + top: 4px; +} + +.newtab-control-pin:dir(ltr), +.newtab-control-block:dir(rtl) { + left: 4px; +} + +.newtab-control-block:dir(ltr), +.newtab-control-pin:dir(rtl) { + right: 4px; +} + +body.compact .newtab-control { + top: -8px; +} + +body.compact .newtab-control-pin:dir(ltr), +body.compact .newtab-control-block:dir(rtl) { + left: -8px; +} + +body.compact .newtab-control-block:dir(ltr), +body.compact .newtab-control-pin:dir(rtl) { + right: -8px; } .newtab-control-pin, diff --git a/arc-firefox-theme/chrome/browser/notification-icons.svg b/arc-firefox-theme/chrome/browser/notification-icons.svg index ff13181..dfb35ce 100644 --- a/arc-firefox-theme/chrome/browser/notification-icons.svg +++ b/arc-firefox-theme/chrome/browser/notification-icons.svg @@ -4,7 +4,35 @@ - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> + @@ -34,7 +75,6 @@ - @@ -44,6 +84,7 @@ + @@ -60,14 +101,14 @@ + - - + diff --git a/arc-firefox-theme/chrome/browser/places/organizer.css b/arc-firefox-theme/chrome/browser/places/organizer.css index 9d9a040..10804a2 100644 --- a/arc-firefox-theme/chrome/browser/places/organizer.css +++ b/arc-firefox-theme/chrome/browser/places/organizer.css @@ -5,7 +5,19 @@ /* Toolbar */ #placesToolbar { - border: none; + -moz-appearance: menubar; +} + +#placesToolbar:-moz-system-metric(menubar-drag) { + -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar-drag"); +} + +#placesToolbar > toolbarbutton { + color: -moz-menubartext; +} + +#placesToolbar > toolbarbutton:hover { + color: ButtonText; } /* back button */ @@ -50,11 +62,12 @@ padding-inline-start: 4px; -moz-binding: url("chrome://browser/skin/places/organizer.xml#toolbarbutton-dropdown"); -moz-appearance: toolbarbutton; - color: -moz-DialogText; } -#placesMenu > menu:hover:not(:active):not([open="true"]) { - color: -moz-buttonhovertext; +#placesMenu > menu:active, +#placesMenu > menu:hover, +#placesMenu > menu[open] { + color: ButtonText; } #placesMenu > menu > .menubar-right { 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 58cea34..a9bc23e 100644 --- a/arc-firefox-theme/chrome/browser/preferences/in-content/preferences.css +++ b/arc-firefox-theme/chrome/browser/preferences/in-content/preferences.css @@ -101,6 +101,15 @@ treecol { } /* header */ +.header { + display: flex; + align-items: center; + justify-content: space-between; +} + +.header[hidden=true] { + display: none; +} #header-advanced { border-bottom: none; diff --git a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss index 903650f..9f0b5f8 100644 --- a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss +++ b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss @@ -38,6 +38,9 @@ $darker_asset_path_2: if($darker=='true', 'dark', $asset_path); --verified-identity-box-backgroundcolor: transparent; --panel-separator-color: ThreeDShadow; + --arrowpanel-dimmed: hsla(0,0%,80%,.3); + --arrowpanel-dimmed-further: hsla(0,0%,80%,.45); + --arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8); --urlbar-separator-color: hsla(0,0%,16%,.2); } @@ -610,10 +613,6 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { list-style-image: url("moz-icon://stock/gtk-about?size=menu"); } -#javascriptConsole { - list-style-image: url("chrome://global/skin/console/console.png"); -} - /* Primary toolbar buttons */ :-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1 > .toolbarbutton-icon, @@ -1233,447 +1232,188 @@ list-style-image: url("chrome://browser/skin/custom_images/toolbar-icons-active. /* Menu panel and palette styles */ -:root { - --menupanel-list-style-image: url(chrome://browser/skin/menuPanel.png); - --menupanel-list-style-image-2x: url(chrome://browser/skin/menuPanel@2x.png); - --menupanel-small-list-style-image: url(chrome://browser/skin/menuPanel-small.png); - --menupanel-small-list-style-image-2x: url(chrome://browser/skin/menuPanel-small@2x.png); +toolbaritem[sdkstylewidget="true"] > toolbarbutton, +:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) { + list-style-image: url(chrome://browser/skin/menuPanel.svg); } -@media not all and (min-resolution: 1.1dppx) { - - toolbaritem[sdkstylewidget="true"] > toolbarbutton, - :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) { - list-style-image: var(--menupanel-list-style-image); - } - - #home-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #home-button { - -moz-image-region: rect(0px, 128px, 32px, 96px); - } - - #bookmarks-menu-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #bookmarks-menu-button { - -moz-image-region: rect(0px, 192px, 32px, 160px); - } - - #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 192px, 64px, 160px); - } - - #history-panelmenu[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #history-panelmenu { - -moz-image-region: rect(0px, 224px, 32px, 192px); - } - - #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 224px, 64px, 192px); - } - - #downloads-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #downloads-button { - -moz-image-region: rect(0px, 256px, 32px, 224px); - } - - #add-ons-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #add-ons-button { - -moz-image-region: rect(0px, 288px, 32px, 256px); - } - - #open-file-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #open-file-button { - -moz-image-region: rect(0px, 320px, 32px, 288px); - } - - #save-page-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #save-page-button { - -moz-image-region: rect(0px, 352px, 32px, 320px); - } - - #sync-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sync-button { - -moz-image-region: rect(0px, 1024px, 32px, 992px); - } - - #sync-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 1024px, 64px, 992px); - } - - #containers-panelmenu[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #containers-panelmenu { - -moz-image-region: rect(0px, 1056px, 32px, 1024px); - } - - #containers-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 1056px, 64px, 1024px); - } - - #feed-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #feed-button { - -moz-image-region: rect(0px, 416px, 32px, 384px); - } - - #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 416px, 64px, 384px); - } - - #social-share-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #social-share-button { - -moz-image-region: rect(0px, 448px, 32px, 416px); - } - - #characterencoding-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #characterencoding-button { - -moz-image-region: rect(0px, 480px, 32px, 448px); - } - - #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 480px, 64px, 448px); - } - - #new-window-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-window-button { - -moz-image-region: rect(0px, 512px, 32px, 480px); - } - - #e10s-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #e10s-button { - -moz-image-region: rect(0px, 512px, 32px, 480px); - } - - #new-tab-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-tab-button { - -moz-image-region: rect(0px, 544px, 32px, 512px); - } - - #privatebrowsing-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #privatebrowsing-button { - -moz-image-region: rect(0px, 576px, 32px, 544px); - } - - #find-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #find-button { - -moz-image-region: rect(0px, 640px, 32px, 608px); - } - - #print-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #print-button { - -moz-image-region: rect(0px, 672px, 32px, 640px); - } - - #fullscreen-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #fullscreen-button { - -moz-image-region: rect(0px, 704px, 32px, 672px); - } - - #developer-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #developer-button { - -moz-image-region: rect(0px, 736px, 32px, 704px); - } - - #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 736px, 64px, 704px); - } - - #preferences-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #preferences-button { - -moz-image-region: rect(0px, 768px, 32px, 736px); - } - - #email-link-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #email-link-button { - -moz-image-region: rect(0, 800px, 32px, 768px); - } - - #sidebar-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sidebar-button { - -moz-image-region: rect(0, 864px, 32px, 832px); - } - - #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 864px, 64px, 832px); - } - - #panic-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #panic-button { - -moz-image-region: rect(0, 896px, 32px, 864px); - } - - #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 896px, 64px, 864px); - } - - #webide-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #webide-button { - -moz-image-region: rect(0px, 960px, 32px, 928px); - } - - toolbaritem[sdkstylewidget="true"] > toolbarbutton { - -moz-image-region: rect(0, 832px, 32px, 800px); - } - - /* Wide panel control icons */ - - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton, - toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton { - list-style-image: var(--menupanel-small-list-style-image); - } - - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button { - -moz-image-region: rect(0px, 32px, 16px, 16px); - } - - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button { - -moz-image-region: rect(0px, 48px, 16px, 32px); - } - - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button { - -moz-image-region: rect(0px, 64px, 16px, 48px); - } - - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button { - -moz-image-region: rect(0px, 80px, 16px, 64px); - } - - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { - -moz-image-region: rect(0px, 96px, 16px, 80px); - } - - #add-share-provider { - list-style-image: url(chrome://browser/skin/menuPanel-small.png); - -moz-image-region: rect(0px, 96px, 16px, 80px); - } +:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-icon, +:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-badge-stack > .toolbarbutton-icon, +:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon { + filter: url(chrome://browser/skin/filters.svg#fill); + fill: currentColor; } -/* Menu panel and palette styles */ -@media (min-resolution: 1.1dppx) { - toolbaritem[sdkstylewidget="true"] > toolbarbutton, - :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) { - list-style-image: var(--menupanel-list-style-image-2x); - } - - #home-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #home-button { - -moz-image-region: rect(0px, 256px, 64px, 192px); - } - - #bookmarks-menu-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #bookmarks-menu-button { - -moz-image-region: rect(0px, 384px, 64px, 320px); - } - - #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 384px, 128px, 320px); - } - - #history-panelmenu[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #history-panelmenu { - -moz-image-region: rect(0px, 448px, 64px, 384px); - } - - #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 448px, 128px, 384px); - } - - #downloads-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #downloads-button { - -moz-image-region: rect(0px, 512px, 64px, 448px); - } - - #add-ons-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #add-ons-button { - -moz-image-region: rect(0px, 576px, 64px, 512px); - } - - #open-file-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #open-file-button { - -moz-image-region: rect(0px, 640px, 64px, 576px); - } - - #save-page-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #save-page-button { - -moz-image-region: rect(0px, 704px, 64px, 640px); - } - - #sync-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sync-button { - -moz-image-region: rect(0px, 2048px, 64px, 1984px); - } +#home-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #home-button { + -moz-image-region: rect(0px, 128px, 32px, 96px); +} - #sync-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 2048px, 128px, 1984px); - } +#bookmarks-menu-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #bookmarks-menu-button { + -moz-image-region: rect(0px, 192px, 32px, 160px); +} - #containers-panelmenu[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #containers-panelmenu { - -moz-image-region: rect(0px, 2112px, 64px, 2048px); - } +#history-panelmenu[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #history-panelmenu { + -moz-image-region: rect(0px, 224px, 32px, 192px); +} - #containers-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 2112px, 128px, 2048px); - } +#downloads-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #downloads-button { + -moz-image-region: rect(0px, 256px, 32px, 224px); +} - #feed-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #feed-button { - -moz-image-region: rect(0px, 832px, 64px, 768px); - } +#add-ons-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #add-ons-button { + -moz-image-region: rect(0px, 288px, 32px, 256px); +} - #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 832px, 128px, 768px); - } +#open-file-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #open-file-button { + -moz-image-region: rect(0px, 320px, 32px, 288px); +} - #social-share-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #social-share-button { - -moz-image-region: rect(0px, 896px, 64px, 832px); - } +#save-page-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #save-page-button { + -moz-image-region: rect(0px, 352px, 32px, 320px); +} - #characterencoding-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #characterencoding-button { - -moz-image-region: rect(0, 960px, 64px, 896px); - } +#sync-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #sync-button { + -moz-image-region: rect(0px, 1024px, 32px, 992px); +} - #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 960px, 128px, 896px); - } +#containers-panelmenu[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #containers-panelmenu { + -moz-image-region: rect(0px, 1056px, 32px, 1024px); +} - #new-window-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-window-button { - -moz-image-region: rect(0px, 1024px, 64px, 960px); - } +#feed-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #feed-button { + -moz-image-region: rect(0px, 416px, 32px, 384px); +} - #e10s-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #e10s-button { - -moz-image-region: rect(0px, 1024px, 64px, 960px); - } +#social-share-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #social-share-button { + -moz-image-region: rect(0px, 448px, 32px, 416px); +} - #webide-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #webide-button { - -moz-image-region: rect(0px, 1920px, 64px, 1856px); - } +#characterencoding-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #characterencoding-button { + -moz-image-region: rect(0px, 480px, 32px, 448px); +} - #new-tab-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-tab-button { - -moz-image-region: rect(0px, 1088px, 64px, 1024px); - } +#new-window-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #new-window-button { + -moz-image-region: rect(0px, 512px, 32px, 480px); +} - #privatebrowsing-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #privatebrowsing-button { - -moz-image-region: rect(0px, 1152px, 64px, 1088px); - } +#e10s-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #e10s-button { + -moz-image-region: rect(0px, 512px, 32px, 480px); +} - #find-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #find-button { - -moz-image-region: rect(0px, 1280px, 64px, 1216px); - } +#new-tab-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #new-tab-button { + -moz-image-region: rect(0px, 544px, 32px, 512px); +} - #print-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #print-button { - -moz-image-region: rect(0px, 1344px, 64px, 1280px); - } +#privatebrowsing-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #privatebrowsing-button { + -moz-image-region: rect(0px, 576px, 32px, 544px); +} - #fullscreen-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #fullscreen-button { - -moz-image-region: rect(0px, 1408px, 64px, 1344px); - } +#find-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #find-button { + -moz-image-region: rect(0px, 640px, 32px, 608px); +} - #developer-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #developer-button { - -moz-image-region: rect(0px, 1472px, 64px, 1408px); - } +#print-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #print-button { + -moz-image-region: rect(0px, 672px, 32px, 640px); +} - #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 1472px, 128px, 1408px); - } +#fullscreen-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #fullscreen-button { + -moz-image-region: rect(0px, 704px, 32px, 672px); +} - #preferences-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #preferences-button { - -moz-image-region: rect(0px, 1536px, 64px, 1472px); - } +#developer-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #developer-button { + -moz-image-region: rect(0px, 736px, 32px, 704px); +} - #email-link-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #email-link-button { - -moz-image-region: rect(0px, 1600px, 64px, 1536px); - } +#preferences-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #preferences-button { + -moz-image-region: rect(0px, 768px, 32px, 736px); +} - #sidebar-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sidebar-button { - -moz-image-region: rect(0px, 1728px, 64px, 1664px); - } +#email-link-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #email-link-button { + -moz-image-region: rect(0, 800px, 32px, 768px); +} - #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 1728px, 128px, 1664px); - } +#sidebar-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #sidebar-button { + -moz-image-region: rect(0, 864px, 32px, 832px); +} - #panic-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #panic-button { - -moz-image-region: rect(0, 1792px, 64px, 1728px); - } +#panic-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #panic-button { + -moz-image-region: rect(0, 896px, 32px, 864px); +} - #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 1792px, 128px, 1728px); - } +#webide-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #webide-button { + -moz-image-region: rect(0px, 960px, 32px, 928px); +} - toolbaritem[sdkstylewidget="true"] > toolbarbutton { - -moz-image-region: rect(0, 1664px, 64px, 1600px); - } +toolbaritem[sdkstylewidget="true"] > toolbarbutton { + -moz-image-region: rect(0, 832px, 32px, 800px); +} - #add-share-provider { - list-style-image: url(chrome://browser/skin/menuPanel-small@2x.png); - -moz-image-region: rect(0px, 192px, 32px, 160px); - } +/* Wide panel control icons */ - /* Footer and wide panel control icons */ - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton, - toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton { - list-style-image: var(--menupanel-small-list-style-image-2x); - } +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, +#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, +toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton, +toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton { + list-style-image: url(chrome://browser/skin/menuPanel-small.svg); +} - /* Wide items like the Cut/Copy/Paste and Zoom controls are special in that their icons - are 16x16 when in the panel, but 18x18 when in a toolbar. */ - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon, - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon, - toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon, - toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon { - width: 16px; - } +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button, +toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button { + -moz-image-region: rect(0px, 32px, 16px, 16px); +} - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button { - -moz-image-region: rect(0px, 64px, 32px, 32px); - } +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button, +toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button { + -moz-image-region: rect(0px, 48px, 16px, 32px); +} - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button { - -moz-image-region: rect(0px, 96px, 32px, 64px); - } +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button, +toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button { + -moz-image-region: rect(0px, 64px, 16px, 48px); +} - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button { - -moz-image-region: rect(0px, 128px, 32px, 96px); - } +#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button, +toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button { + -moz-image-region: rect(0px, 80px, 16px, 64px); +} - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button { - -moz-image-region: rect(0px, 160px, 32px, 128px); - } +#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button, +toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { + -moz-image-region: rect(0px, 96px, 16px, 80px); +} - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { - -moz-image-region: rect(0px, 192px, 32px, 160px); - } +#add-share-provider { + list-style-image: url(chrome://browser/skin/menuPanel-small.svg); + -moz-image-region: rect(0px, 96px, 16px, 80px); } + #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon, #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker, #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker, @@ -1830,9 +1570,54 @@ list-style-image: url("chrome://browser/skin/custom_images/toolbar-icons-active. height: 16px; } +/* ::::: URL Bar Zoom Reset Button ::::: */ +@keyframes urlbar-zoom-reset-pulse { + 0% { + transform: scale(0); + } + 75% { + transform: scale(1.5); + } + 100% { + transform: scale(1.0); + } +} + +#urlbar-zoom-button { + -moz-appearance: none; + margin: 0 3px; + font-size: .8em; + padding: 0 8px; + border-radius: 1em; + background-color: hsla(0,0%,0%,.05); + color: inherit; + border: 1px solid ThreeDLightShadow; +} + +#urlbar-zoom-button[animate="true"] { + animation-name: urlbar-zoom-reset-pulse; + animation-duration: 250ms; +} + +#urlbar-zoom-button:hover { + background-color: hsla(0,0%,0%,.1); +} + +#urlbar-zoom-button:hover:active { + background-color: hsla(0,0%,0%,.15); +} + +#urlbar-zoom-button > .toolbarbutton-text { + display: -moz-box; +} + +#urlbar-zoom-button > .toolbarbutton-icon { + display: none; +} + #urlbar-search-footer { - border-top: 1px solid hsla(210,4%,10%,.14); - background-color: hsla(210,4%,10%,.07); + border-top: 1px solid var(--panel-separator-color); + background-color: var(--arrowpanel-dimmed); } #urlbar-search-settings { @@ -1846,11 +1631,11 @@ list-style-image: url("chrome://browser/skin/custom_images/toolbar-icons-active. } #urlbar-search-settings:hover { - background-color: hsla(210,4%,10%,.07); + background-color: var(--arrowpanel-dimmed); } #urlbar-search-settings:hover:active { - background-color: hsla(210,4%,10%,.12); + background-color: var(--arrowpanel-dimmed-further); } #urlbar-search-splitter { @@ -1876,7 +1661,7 @@ list-style-image: url("chrome://browser/skin/custom_images/toolbar-icons-active. } #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] { - border-bottom: 1px solid hsla(210, 4%, 10%, 0.14); + border-bottom: 1px solid var(--panel-separator-color); background-color: hsla(210, 4%, 10%, 0.07); padding: 6px 0; padding-inline-start: 44px; @@ -1946,15 +1731,128 @@ list-style-image: url("chrome://browser/skin/custom_images/toolbar-icons-active. border-bottom-right-radius: 1.5px; } -#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; + outline-offset: -3px; +} + + + + +#identity-icon { + list-style-image: url(chrome://browser/skin/identity-icon.svg#normal); +} + +#identity-box:hover > #identity-icon:not(.no-hover), +#identity-box[open=true] > #identity-icon { + list-style-image: url(chrome://browser/skin/identity-icon.svg#hover); +} + +#identity-box.grantedPermissions > #identity-icon { + list-style-image: url(chrome://browser/skin/identity-icon.svg#notice); +} + +#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover), +#identity-box.grantedPermissions[open=true] > #identity-icon { + list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover); +} + +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon { + list-style-image: url(chrome://branding/content/identity-icons-brand.svg); +} + + +#tracking-protection-icon { + list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled); +} + +#tracking-protection-icon[state="loaded-tracking-content"] { + list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled); +} + + +#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon { + list-style-image: url(chrome://browser/skin/connection-secure.svg); + visibility: visible; +} + +#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon { + list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon); + visibility: visible; +} + +#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon { + list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon); + visibility: visible; +} + +#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon { + list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon); + visibility: visible; +} + + +#identity-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/identity-icon.svg#normal-black); +} + +#identity-box:hover > #identity-icon:not(.no-hover):-moz-lwtheme, +#identity-box[open=true] > #identity-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/identity-icon.svg#hover-black); +} + +#identity-box.grantedPermissions > #identity-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-black); +} + +#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover):-moz-lwtheme, +#identity-box.grantedPermissions[open=true] > #identity-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover-black); +} + +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon:-moz-lwtheme { + list-style-image: url(chrome://branding/content/identity-icons-brand.svg); +} + + +#tracking-protection-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled-black); +} + +#tracking-protection-icon[state="loaded-tracking-content"]:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled-black); +} + + +#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon:-moz-lwtheme, +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon:-moz-lwtheme, +#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/connection-secure.svg); + visibility: visible; +} + +#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon-black); + visibility: visible; } -#identity-box:-moz-focusring { - outline: 1px dotted #000; - outline-offset: -3px; +#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon:-moz-lwtheme, +#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon-black); + visibility: visible; } +#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon:-moz-lwtheme, +#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon:-moz-lwtheme, +#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon-black); + visibility: visible; +} #identity-box { --identity-box-verified-color: hsl(92,100%,30%); @@ -2012,37 +1910,58 @@ list-style-image: url("chrome://browser/skin/custom_images/toolbar-icons-active. #identity-icon { width: 16px; height: 16px; - list-style-image: url(chrome://browser/skin/identity-icon.svg#normal); } -#identity-box:hover > #identity-icon:not(.no-hover), -#identity-box[open=true] > #identity-icon { - list-style-image: url(chrome://browser/skin/identity-icon.svg#hover); +#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon { + opacity: .3; } -#identity-box.grantedPermissions > #identity-icon { - list-style-image: url(chrome://browser/skin/identity-icon.svg#notice); +#urlbar[actiontype="searchengine"] > #identity-box > #identity-icon { + -moz-image-region: inherit; + list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); + width: 16px; + height: 16px; } -#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover), -#identity-box.grantedPermissions[open=true] > #identity-icon { - list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover); +/* SHARING ICON */ + +#sharing-icon { + width: 16px; + height: 16px; + margin-inline-start: -16px; + position: relative; + display: none; } -#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon { - list-style-image: url(chrome://branding/content/identity-icons-brand.svg); +#identity-box[sharing="camera"] > #sharing-icon { + list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing"); } -#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon { - opacity: 0.3; +#identity-box[sharing="microphone"] > #sharing-icon { + list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing"); } -#urlbar[actiontype="searchengine"] > #identity-box > #identity-icon { - -moz-image-region: inherit; - list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); - width: 16px; - height: 16px; - opacity: 1; +#identity-box[sharing="screen"] > #sharing-icon { + list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing"); +} + +#identity-box[sharing] > #sharing-icon { + display: -moz-box; + animation-delay: -1.5s; +} + +#identity-box[sharing] > #identity-icon, +#sharing-icon { + animation: 3s linear pulse infinite; +} + +@keyframes pulse { + 0%, 16.66%, 83.33%, 100% { + opacity: 0; + } + 33.33%, 66.66% { + opacity: 1; + } } /* TRACKING PROTECTION ICON */ @@ -2052,12 +1971,6 @@ list-style-image: url("chrome://browser/skin/custom_images/toolbar-icons-active. height: 16px; margin-inline-start: 2px; margin-inline-end: 0; - list-style-image: url(chrome://browser/skin/tracking-protection-16.svg); - opacity: 1; -} - -#tracking-protection-icon[state="loaded-tracking-content"] { - list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg); } #tracking-protection-icon[animate] { @@ -2085,30 +1998,6 @@ list-style-image: url("chrome://browser/skin/custom_images/toolbar-icons-active. visibility: collapse; } -#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon, -#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon, -#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon { - list-style-image: url(chrome://browser/skin/identity-secure.svg); - visibility: visible; -} - -#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon { - list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg); - visibility: visible; -} - -#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon, -#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon { - list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg); - visibility: visible; -} - -#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon, -#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon, -#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon { - list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg); - visibility: visible; -} #notification-popup-box { @@ -2118,13 +2007,17 @@ list-style-image: url("chrome://browser/skin/custom_images/toolbar-icons-active. padding-inline-end: 5px; } +.notification-anchor-icon, +#blocked-permissions-container > .blocked-permission-icon { + width: 16px; + height: 16px; + margin-inline-start: 2px; +} + /* This class can be used alone or in combination with the class defining the type of icon displayed. This rule must be defined before the others in order for its list-style-image to be overridden. */ .notification-anchor-icon { - width: 16px; - height: 16px; - margin-inline-start: 2px; list-style-image: url(moz-icon://stock/gtk-dialog-info?size=16); } @@ -2140,56 +2033,24 @@ list-style-image: url("chrome://browser/skin/custom_images/toolbar-icons-active. margin-inline-end: 10px; } -#notification-popup-box > .notification-anchor-icon:not(.in-use):hover { - fill: #606060; -} - -/* INDIVIDUAL NOTIFICATIONS */ - -/* For the moment we apply the color filter only on the icons listed here. - The first two selectors are used by socialchat.xml (bug 1275558). */ -.webRTC-sharingDevices-notification-icon, -.webRTC-sharingMicrophone-notification-icon, -.camera-icon, -.geo-icon, -.indexedDB-icon, -.install-icon, -.login-icon, -.microphone-icon, -.plugin-icon, -.pointerLock-icon, -.popup-icon, -.screen-icon, -.desktop-notification-icon, -.popup-notification-icon[popupid="geolocation"], -.popup-notification-icon[popupid="indexedDB-permissions-prompt"], -.popup-notification-icon[popupid="password"], -.popup-notification-icon[popupid="pointerLock"], -.popup-notification-icon[popupid="webRTC-shareDevices"], -.popup-notification-icon[popupid="webRTC-shareMicrophone"], -.popup-notification-icon[popupid="webRTC-shareScreen"], -.popup-notification-icon[popupid="webRTC-sharingDevices"], -.popup-notification-icon[popupid="webRTC-sharingMicrophone"], -.popup-notification-icon[popupid="webRTC-sharingScreen"], -.popup-notification-icon[popupid="web-notifications"] { +.notification-anchor-icon:not(.plugin-blocked):-moz-lwtheme, +#blocked-permissions-container > .blocked-permission-icon:-moz-lwtheme { filter: url(chrome://browser/skin/filters.svg#fill); - fill: #999; + fill: currentColor; } -/* The first two selectors are used by socialchat.xml (bug 1275558). The - notifications in the chat window are only shown when they are in use. */ -.webRTC-sharingDevices-notification-icon, -.webRTC-sharingMicrophone-notification-icon, -.in-use { - fill: #fea01b; +.notification-anchor-icon:not(.plugin-blocked):not(:hover) { + opacity: .8; } +/* INDIVIDUAL NOTIFICATIONS */ + .popup-notification-icon[popupid="web-notifications"], .desktop-notification-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification); } -.desktop-notification-icon.blocked { +.desktop-notification-icon.blocked-permission-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked); } @@ -2197,7 +2058,7 @@ list-style-image: url("chrome://browser/skin/custom_images/toolbar-icons-active. list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-linux); } -.geo-icon.blocked { +.geo-icon.blocked-permission-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-linux-blocked); } @@ -2210,7 +2071,7 @@ list-style-image: url("chrome://browser/skin/custom_images/toolbar-icons-active. list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB); } -.indexedDB-icon.blocked { +.indexedDB-icon.blocked-permission-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked); } @@ -2222,55 +2083,46 @@ list-style-image: url("chrome://browser/skin/custom_images/toolbar-icons-active. list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed); } -#login-fill-notification-icon { - /* Temporary solution until the capture and fill doorhangers are unified. */ - transform: scaleX(-1); -} - -/* The first selector is used by socialchat.xml (bug 1275558). */ -.webRTC-sharingDevices-notification-icon, .camera-icon, -.popup-notification-icon[popupid="webRTC-shareDevices"], -.popup-notification-icon[popupid="webRTC-sharingDevices"] { +.popup-notification-icon[popupid="webRTC-shareDevices"] { list-style-image: url(chrome://browser/skin/notification-icons.svg#camera); } -.camera-icon.blocked { +.camera-icon.in-use { + list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-sharing); +} + +.camera-icon.blocked-permission-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked); } -/* The first selector is used by socialchat.xml (bug 1275558). */ -.webRTC-sharingMicrophone-notification-icon, .microphone-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone); } -.microphone-icon.blocked { +.microphone-icon.in-use { + list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-sharing); +} + +.microphone-icon.blocked-permission-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked); } -.popup-notification-icon[popupid="webRTC-shareMicrophone"], -.popup-notification-icon[popupid="webRTC-sharingMicrophone"] { +.popup-notification-icon[popupid="webRTC-shareMicrophone"] { list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed); } .popup-notification-icon[popupid="webRTC-shareScreen"], -.popup-notification-icon[popupid="webRTC-sharingScreen"], .screen-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#screen); } -.screen-icon.blocked { - list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked); -} - -.popup-notification-icon[popupid="pointerLock"], -.pointerLock-icon { - list-style-image: url(chrome://browser/skin/notification-icons.svg#pointerLock); +.screen-icon.in-use { + list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-sharing); } -.pointerLock-icon.blocked { - list-style-image: url(chrome://browser/skin/notification-icons.svg#pointerLock-blocked); +.screen-icon.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked); } /* This icon has a block sign in it, so we don't need a blocked version. */ @@ -2355,7 +2207,6 @@ list-style-image: url("chrome://browser/skin/custom_images/toolbar-icons-active. .plugin-icon.plugin-blocked { list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked); - fill: #d92215 !important; /* important! to override the default hover color */ } #notification-popup-box[hidden] { @@ -2827,6 +2678,24 @@ html|span.ac-emphasize-text-url { /* social share panel */ +#manage-share-providers { + list-style-image: url("chrome://browser/skin/Toolbar.png"); + -moz-image-region: rect(0, 468px, 18px, 450px); +} + +#manage-share-providers > .toolbarbutton-icon { + min-height: 18px; + min-width: 18px; +} + +.social-panel > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; +} +/* fixup corners for share panel */ +.social-panel > .social-panel-frame { + border-radius: inherit; +} + .social-share-frame { border-top: 1px solid #f8f8f8; width: 756px; @@ -2874,12 +2743,6 @@ html|span.ac-emphasize-text-url { max-height: 16px; } -/* social recommending panel */ - -#social-mark-button { - -moz-image-region: rect(0, 16px, 16px, 0); -} - /* bookmarks menu-button */ #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker { @@ -3090,7 +2953,7 @@ html|span.ac-emphasize-text-url { } /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */ -.tabbrowser-tab[selected=true] { +.tabbrowser-tab[visuallyselected=true] { position: relative; z-index: 2; } @@ -3157,20 +3020,15 @@ html|span.ac-emphasize-text-url { } .tab-sharing-icon-overlay[sharing="camera"] { - list-style-image: url("chrome://browser/skin/notification-icons.svg#camera"); + list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing"); } .tab-sharing-icon-overlay[sharing="microphone"] { - list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone"); + list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing"); } .tab-sharing-icon-overlay[sharing="screen"] { - list-style-image: url("chrome://browser/skin/notification-icons.svg#screen"); -} - -.tab-sharing-icon-overlay[sharing] { - filter: url("chrome://browser/skin/filters.svg#fill"); - fill: rgb(224, 41, 29); + list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing"); } .tab-icon-overlay { @@ -3203,11 +3061,13 @@ html|span.ac-emphasize-text-url { list-style-image: url("chrome://browser/skin/custom_images/#{$darker_asset_path_2}/tabs/tab-audio-small.svg#tab-audio-muted"); } -//#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) { +//#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not([selected]):not(:hover), +//.tab-icon-overlay[soundplaying][selected]:-moz-lwtheme-brighttext: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) { +//#TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not([selected]):not(:hover), +//.tab-icon-overlay[muted][selected]:-moz-lwtheme-brighttext:not(:hover) { // list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted"); //} @@ -3266,55 +3126,6 @@ html|span.ac-emphasize-text-url { list-style-image: url("chrome://browser/skin/custom_images/#{$asset_path}/tabs/tab-audio.svg#tab-audio"); } -.tab-icon-sound:hover:-moz-lwtheme, -.tab-icon-sound[selected=true][soundplaying]:hover { - list-style-image: url("chrome://browser/skin/custom_images/#{$asset_path}/tabs/tab-audio.svg#tab-audio-hover"); -} - -.tab-icon-sound:hover:active:-moz-lwtheme, -.tab-icon-sound[selected=true][soundplaying]:hover:active { - list-style-image: url("chrome://browser/skin/custom_images/#{$asset_path}/tabs/tab-audio.svg#tab-audio-pressed"); -} - -.tab-icon-sound[muted]:-moz-lwtheme, -.tab-icon-sound[selected=true][muted] { - list-style-image: url("chrome://browser/skin/custom_images/#{$asset_path}/tabs/tab-audio.svg#tab-audio-muted"); -} - -.tab-icon-sound[muted]:hover:-moz-lwtheme, -.tab-icon-sound[selected=true][muted]:hover { - list-style-image: url("chrome://browser/skin/custom_images/#{$asset_path}/tabs/tab-audio.svg#tab-audio-muted-hover"); -} - -.tab-icon-sound[muted]:hover:active:-moz-lwtheme, -.tab-icon-sound[selected=true][muted]:hover:active { - list-style-image: url("chrome://browser/skin/custom_images/#{$asset_path}/tabs/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 */ @@ -3374,7 +3185,7 @@ html|span.ac-emphasize-text-url { width: 30px; } -.tabbrowser-tab:not([selected=true]), +.tabbrowser-tab:not([visuallyselected=true]), .tabbrowser-tab:-moz-lwtheme { color: inherit; } @@ -3731,27 +3542,6 @@ html|span.ac-emphasize-text-url { list-style-image: url("chrome://global/skin/icons/loading.png"); } -.alltabs-item[tabIsVisible] { - /* box-shadow instead of background-color to work around native styling */ - box-shadow: inset -5px 0 ThreeDShadow; -} - -.alltabs-endimage[muted] { - list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-menu-muted); -} - -.alltabs-endimage[soundplaying] { - list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-menu); -} - -menuitem:hover > hbox > .alltabs-endimage[muted] { - list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-menu-muted-hover); -} - -menuitem:hover > hbox > .alltabs-endimage[soundplaying] { - list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-menu-hover); -} - /* Sidebar */ #sidebar-throbber[loading="true"] { list-style-image: url("chrome://global/skin/icons/loading.png"); @@ -3779,60 +3569,6 @@ toolbarbutton.chevron > .toolbarbutton-icon { margin: 0; } -/* Ctrl-Tab */ - -#ctrlTab-panel { - -moz-appearance: none; - background: rgba(27%,27%,27%,.7); - color: white; - border-style: none; - padding: 20px 10px 10px; - font-weight: bold; - text-shadow: 0 0 1px rgb(27%,27%,27%), 0 0 2px rgb(27%,27%,27%); -} - -.ctrlTab-favicon[src] { - background-color: white; - width: 20px; - height: 20px; - padding: 2px; -} - -.ctrlTab-preview-inner > .tabPreview-canvas { - box-shadow: 1px 1px 2px hsl(0,0%,12%); -} - -.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas { - margin-bottom: 2px; -} - -.ctrlTab-preview-inner { - padding-bottom: 10px; -} - -#ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner { - padding: 10px; - background-color: rgba(255,255,255,.2); - border-radius: .5em; -} - -.ctrlTab-preview:focus > * > .ctrlTab-preview-inner { - color: white; - background-color: rgba(0,0,0,.6); - text-shadow: none; - padding: 8px; - border: 2px solid white; - border-radius: .5em; -} - -.ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner { - margin: -10px -10px 0; -} - -#ctrlTab-showAll { - margin-top: .5em; -} - /* Status panel */ .statuspanel-label { @@ -3898,22 +3634,67 @@ html|*.pointerlockfswarning-domain { margin: 0; } -html|*.pointerlockfswarning-exit-button { - padding: 5px 30px; - font: message-box; - font-size: 14px; - font-weight: lighter; - margin: 0; - box-sizing: content-box; - background-clip: padding-box; - border: 1px solid; - border-radius: 3px; +html|*.pointerlockfswarning-exit-button { + padding: 5px 30px; + font: message-box; + font-size: 14px; + font-weight: lighter; + margin: 0; + box-sizing: content-box; +} +/* Ctrl-Tab */ + +#ctrlTab-panel { + -moz-appearance: none; + background: hsla(0,0%,33%,.85); + color: white; + border-style: none; + padding: 20px 10px 10px; + font-weight: bold; + text-shadow: 0 0 1px hsl(0,0%,12%), 0 0 2px hsl(0,0%,12%); +} + +.ctrlTab-favicon[src] { + background-color: white; + width: 20px; + height: 20px; + padding: 2px; +} + +.ctrlTab-preview-inner > .tabPreview-canvas { + box-shadow: 1px 1px 2px hsl(0,0%,12%); +} + +.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas { + margin-bottom: 2px; +} + +.ctrlTab-preview-inner { + padding: 8px; + border: 2px solid transparent; + border-radius: .5em; +} + +.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner { + margin: -10px -10px 0; +} + +#ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner { + background-color: rgba(255,255,255,.2); +} + +.ctrlTab-preview:focus > * > .ctrlTab-preview-inner { + color: white; + background-color: rgba(0,0,0,.6); + text-shadow: none; + border-color: white; +} + +#ctrlTab-showAll { + margin-top: .5em; +} - @include button(osd); - &:hover { @include button(osd-hover); } - &:active, &:checked { @include button(osd-active); } -} /* Responsive Mode */ .browserContainer[responsivemode] { @@ -4475,7 +4256,6 @@ html|*#gcli-output-frame { .gcli-in-closebrace { color: hsl(0,0%,80%); } - #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent { padding: 0px; } @@ -4504,8 +4284,8 @@ html|*#gcli-output-frame { } .click-to-play-plugins-notification-button-container { - background-color: hsla(210,4%,10%,.07); - border-top: 1px solid hsla(210,4%,10%,.12); + background-color: var(--arrowpanel-dimmed); + border-top: 1px solid var(--panel-separator-color); padding: 10px; margin-top: 5px; } @@ -4529,8 +4309,6 @@ html|*#gcli-output-frame { .messageImage[value="plugin-hidden"] { list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin); - filter: url(chrome://browser/skin/filters.svg#fill); - fill: #808080; } /* Keep any changes to this style in sync with pluginProblem.css */ @@ -4542,93 +4320,12 @@ notification.pluginVulnerable { notification.pluginVulnerable .messageImage { list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked); - filter: url(chrome://browser/skin/filters.svg#fill); - fill: #d92215; } notification.pluginVulnerable > .notification-inner > .messageCloseButton:not(:hover) { background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 80, 16, 64); } -#notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent { - /* Since we display a sliding subview that extends to the border, we cannot - * keep the default padding of arrow panels. We use the same padding in the - * individual content views instead. Since we removed the padding, we also - * have to ensure the contents are clipped to the border box. */ - padding: 0; - overflow: hidden; -} - -#login-fill-mainview, -#login-fill-details { - padding: var(--panel-arrowcontent-padding); -} - -#login-fill-doorhanger[inDetailView] > #login-fill-mainview { - transform: translateX(-14px); -} - -#login-fill-mainview, -#login-fill-details { - transition: transform 150ms; -} - -#login-fill-doorhanger:not([inDetailView]) > #login-fill-details { - transform: translateX(105%); -} - -#login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) { - transform: translateX(-105%); -} - -#login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer { - background-color: hsla(210,4%,10%,.1); -} - -#login-fill-testing { - color: #b33; - font-weight: bold; -} - -#login-fill-list { - border: 1px solid black; - max-height: 20em; -} - -.login-fill-item[disabled] { - color: #888; - background-color: #fff; -} - -.login-fill-item[disabled][selected] { - background-color: #eef; -} - -.login-hostname { - margin: 4px; - font-weight: bold; -} - -.login-fill-item.different-hostname > .login-hostname { - color: #888; - font-style: italic; -} - -.login-username { - margin: 4px; - color: #888; -} - -#login-fill-details { - padding: 4px; - background: var(--panel-arrowcontent-background); - color: var(--panel-arrowcontent-color); - background-clip: padding-box; - border-left: 1px solid hsla(210,4%,10%,.3); - box-shadow: 0 3px 5px hsla(210,4%,10%,.1), - 0 0 7px hsla(210,4%,10%,.1); - margin-inline-start: 38px; -} /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this @@ -4862,262 +4559,6 @@ toolbar[brighttext] #downloads-indicator-counter { margin-inline-end: 2px; } -/* social toolbar provider menu */ -#social-statusarea-popup { - margin-top: 0; - margin-left: -12px; - margin-right: -12px; -} - -.social-statusarea-user { - list-style-image:url("chrome://global/skin/icons/information-32.png"); -} - -.social-statusarea-user-portrait { - width: 32px; - height: 32px; - border-radius: 2px; - margin: 10px; -} - -.social-panel > .panel-arrowcontainer > .panel-arrowcontent { - padding: 0; -} - - -#social-sidebar-header { - padding: 3px; -} - -#manage-share-providers, -#social-sidebar-button { - list-style-image: url("chrome://browser/skin/Toolbar.png"); - -moz-image-region: rect(0, 468px, 18px, 450px); -} - -#social-sidebar-button { - -moz-appearance: none; - border: none; - padding: 0; - margin: 2px; -} -#manage-share-providers > .toolbarbutton-icon, -#social-sidebar-button > .toolbarbutton-icon { - min-height: 18px; - min-width: 18px; -} - -#social-sidebar-button > .toolbarbutton-menu-dropmarker { - display: none; -} - -#social-sidebar-button[loading="true"] { - list-style-image: url("chrome://global/skin/icons/loading.png"); -} - -#social-sidebar-favico { - max-height: 16px; - max-width: 16px; - padding: 0; - margin: 2px; -} - -.chat-status-icon { - max-height: 16px; - max-width: 16px; - padding: 0; -} - -.chat-toolbarbutton { - -moz-appearance: none; - border: none; - padding: 0 3px; - margin: 0; - background: none; -} - -.chat-toolbarbutton > .toolbarbutton-text { - display: none; -} - -.chat-toolbarbutton > .toolbarbutton-icon { - width: 16px; - height: 16px; -} - -.chat-close-button { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close"); -} - -.chat-close-button:hover { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-hover"); -} - -.chat-close-button:hover:active { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-active"); -} - -.chat-minimize-button { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize"); -} - -.chat-minimize-button:hover { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-hover"); -} - -.chat-minimize-button:hover:active { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-active"); -} - -.chat-swap-button { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand"); - transform: rotate(180deg); -} - -.chat-swap-button:hover { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-hover"); -} - -.chat-swap-button:hover:active { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-active"); -} - -chatbar > chatbox > .chat-titlebar > .chat-swap-button { - transform: none; -} - -.chat-title { - color: #666; - text-shadow: none; - cursor: inherit; -} - -.chat-titlebar { - height: 26px; - min-height: 26px; - width: 100%; - margin: 0; - padding: 5px 4px; - border: 1px solid #ebebeb; - border-bottom: 0; - border-top-left-radius: 4px; - border-top-right-radius: 4px; - cursor: pointer; - background-color: #ebebeb; -} - -.chat-titlebar[selected] { - background-color: #f0f0f0; -} - -.chat-titlebar > .notification-anchor-icon { - margin-left: 2px; - margin-right: 2px; -} - -.chat-titlebar[minimized="true"] { - border-bottom: none; -} - -.chat-titlebar[activity] { - background-image: radial-gradient(ellipse closest-side at center, rgb(255,255,255), transparent); - background-repeat: no-repeat; - background-size: 100% 20px; - background-position: 0 -10px; -} - -.chat-frame { - padding: 0; - margin: 0; - overflow: hidden; -} - -.chatbar-button { - list-style-image: url("chrome://browser/skin/social/services-16.png"); - margin: 0; - padding: 2px; - height: 21px; - width: 21px; - border: 1px solid #ccc; - border-bottom: none; - background-color: #d9d9d9; - background-image: linear-gradient(rgba(255,255,255,.43), transparent); - border-top-left-radius: 3px; - border-top-right-radius: 3px; -} - -@media (min-resolution: 2dppx) { - .chatbar-button { - list-style-image: url("chrome://browser/skin/social/services-16@2x.png"); - } -} - -.chatbar-button:hover, -.chatbar-button[open="true"] { - background-color: #f0f0f0; -} - -.chatbar-button[activity]:not([open]) { - background-image: radial-gradient(circle farthest-corner at center 2px, rgb(254,254,255) 3%, rgba(210,235,255,0.9) 12%, rgba(148,205,253,0.6) 30%, rgba(148,205,253,0.2) 70%); -} - -.chatbar-button > .toolbarbutton-icon { - width: 16px; -} - -.chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon { - width: auto; - height: auto; - max-height: 16px; - max-width: 16px; -} - -.chatbar-button[open="true"] { - box-shadow: inset 0 2px 5px rgba(0,0,0,0.6), 0 1px rgba(255,255,255,0.2); -} - -.chatbar-button > .toolbarbutton-text, -.chatbar-button > .toolbarbutton-menu-dropmarker { - display: none; -} - -.chatbar-button > menupopup > menuitem[activity] { - font-weight: bold; -} - -.chatbar-innerbox { - background: transparent; - overflow: hidden; -} - -chatbar { - margin-inline-end: 20px; -} - -chatbox { - margin-inline-start: 4px; - background-color: transparent; -} - -chatbar > chatbox { - /* Apply the same border-radius as the .chat-titlebar to make the box-shadow - go round nicely. */ - border-top-left-radius: 4px; - border-top-right-radius: 4px; - box-shadow: 0 0 5px rgba(0,0,0,.3); - /* Offset the chatbox the same amount as the box-shadows' spread, to make it - visible. */ - margin-inline-end: 5px; -} - -window > chatbox { - margin-inline-start: 0px; - margin: 0px; - border: none; - padding: 0px; - border-radius: 4px; -} - /* Customization mode */ /* This Source Code Form is subject to the terms of the Mozilla Public @@ -5185,7 +4626,7 @@ window > chatbox { #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before, /* nav-bar and panel outlines are always shown */ #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before { - outline-color: rgb(102,102,102); + outline-color: currentColor; } #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before { @@ -5194,7 +4635,7 @@ window > chatbox { #PanelUI-contents[showoutline=true] > .panel-customization-placeholder { transition: outline-color 250ms linear; - outline-color: #bbb; + outline-color: var(--panel-separator-color); } #PanelUI-contents > .panel-customization-placeholder { @@ -5209,8 +4650,8 @@ window > chatbox { } #customization-container { - background-color: rgb(247,247,247); - color: black; + background-color: -moz-field; + color: -moz-fieldText; text-shadow: none; } @@ -5222,11 +4663,11 @@ window > chatbox { #customization-header { font-size: 1.75em; line-height: 1.75em; - color: #666; + color: GrayText; font-weight: 200; margin: 25px 25px 12px; padding-bottom: 12px; - border-bottom: 1px solid #e5e5e5; + border-bottom: 1px solid ThreeDLightShadow; } #customization-panel-container { @@ -5236,38 +4677,14 @@ window > chatbox { #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox, #customization-footer { - background-color: rgb(236,236,236); + background-color: -moz-dialog; } #customization-footer { - border-top: 1px solid rgb(221,221,221); + border-top: 1px solid ThreeDLightShadow; padding: 10px; } -.customizationmode-button { - border: 1px solid rgb(192,192,192); - border-radius: 3px; - margin: 5px; - padding: 2px 12px; - background-color: rgb(251,251,251); - color: rgb(71,71,71); - box-shadow: 0 1px rgba(255, 255, 255, 0.5), - inset 0 1px rgba(255, 255, 255, 0.5); - -moz-appearance: none; -} - -#customization-titlebar-visibility-button[checked], -#customization-devedition-theme-button[checked] { - background-color: rgb(218, 218, 218); - border-color: rgb(168, 168, 168); - text-shadow: 0 1px rgb(236, 236, 236); - box-shadow: 0 1px rgba(255, 255, 255, 0.5), - inset 0 1px rgb(196, 196, 196); -} - -.customizationmode-button[disabled="true"] { - opacity: .5; -} .customizationmode-button > .box-inherit > .box-inherit > .button-icon, .customizationmode-button > .button-box > .button-icon { @@ -5279,11 +4696,6 @@ window > chatbox { -moz-image-region: rect(0, 24px, 24px, 0); } -#customization-lwtheme-button, -#customization-titlebar-visibility-button { - padding: 2px 7px; -} - #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text, #customization-titlebar-visibility-button > .button-box > .button-text { /* Sadly, button.css thinks its margins are perfect for everyone. */ @@ -5402,7 +4814,7 @@ toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring, toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { /* Delay adding the focusring back until after the transform transition completes. */ transition: outline-width .01s linear var(--drag-drop-transition-duration); - outline: 1px dotted rgba(0,0,0,.5); + outline: 1px dotted; -moz-outline-radius: 2.5px; } @@ -5485,13 +4897,13 @@ toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { .customization-lwtheme-menu-theme[active="true"], .customization-lwtheme-menu-theme:hover { - background-color: hsla(210,4%,10%,.08); - border-color: hsla(210,4%,10%,.11); + background-color: var(--arrowpanel-dimmed); + border-color: var(--panel-separator-color); } .customization-lwtheme-menu-theme[active="true"], .customization-lwtheme-menu-theme:hover:active { - background-color: hsla(210,4%,10%,.15); + background-color: var(--arrowpanel-dimmed-further); } .customization-lwtheme-menu-theme > .toolbarbutton-icon { @@ -5511,32 +4923,31 @@ toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { #customization-lwtheme-menu-header, #customization-lwtheme-menu-recommended, #customization-lwtheme-menu-footer { - background-color: hsla(210,4%,10%,.05); - color: hsl(0,0%,50%); + background-color: var(--arrowpanel-dimmed); margin-right: -10px; margin-left: -10px; } #customization-lwtheme-menu-header { margin-top: -10px; - border-bottom: 1px solid hsla(210,4%,10%,.05); + border-bottom: 1px solid var(--arrowpanel-dimmed); } #customization-lwtheme-menu-recommended { - border-top: 1px solid hsla(210,4%,10%,.05); - border-bottom: 1px solid hsla(210,4%,10%,.05); + border-top: 1px solid var(--arrowpanel-dimmed); + border-bottom: 1px solid var(--arrowpanel-dimmed); } #customization-lwtheme-menu-footer { - background: linear-gradient(hsla(210,4%,10%,.05) 60%, transparent) border-box; - border-top: 1px solid hsla(210,4%,10%,.05); + background: linear-gradient(var(--arrowpanel-dimmed) 60%, transparent) border-box; + border-top: 1px solid var(--arrowpanel-dimmed); margin-bottom: -10px; } .customization-lwtheme-menu-footeritem { -moz-appearance: none; -moz-box-flex: 1; - color: hsl(0,0%,50%); + color: inherit; border-style: none; padding: 10px; margin-left: 0; @@ -5544,11 +4955,11 @@ toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { } .customization-lwtheme-menu-footeritem:hover { - background: linear-gradient(hsla(210,4%,10%,.08) 40%, transparent) padding-box; + background: linear-gradient(var(--arrowpanel-dimmed) 40%, transparent) padding-box; } .customization-lwtheme-menu-footeritem:first-child { - border-inline-end: 1px solid hsla(210,4%,10%,.15); + border-inline-end: 1px solid var(--panel-separator-color); } /* This Source Code Form is subject to the terms of the Mozilla Public @@ -5696,9 +5107,11 @@ toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { #UITourHighlightContainer { -moz-appearance: none; + -moz-window-shadow: none; border: none; background-color: transparent; - /* This is a buffer to compensate for the movement in the "wobble" effect */ + /* This is a buffer to compensate for the movement in the "wobble" effect, + and for the box-shadow of #UITourHighlight. */ padding: 4px; } @@ -6006,90 +5419,44 @@ notification.heartbeat { -moz-appearance: none; } -#context-back { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back"); -} - -#context-back[_moz-menuactive=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-active"); +#context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon { + width: 16px; + height: 16px; + margin: 7px; + filter: url(chrome://browser/skin/filters.svg#fill); + fill: currentColor; } -#context-back[disabled=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-disabled"); +#context-back { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back"); } #context-forward { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward"); } -#context-forward[_moz-menuactive=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-active"); -} - -#context-forward[disabled=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-disabled"); -} - #context-reload { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload"); } -#context-reload[_moz-menuactive=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-active"); -} - -#context-reload[disabled=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-disabled"); -} - #context-stop { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop"); } -#context-stop[_moz-menuactive=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-active"); -} - -#context-stop[disabled=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-disabled"); -} - #context-bookmarkpage { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark"); } -#context-bookmarkpage[_moz-menuactive=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-active"); -} - -#context-bookmarkpage[disabled=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); -} - #context-bookmarkpage[starred=true] { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); } -#context-bookmarkpage[starred=true][_moz-menuactive=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); -} - -#context-bookmarkpage[starred=true][disabled=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); -} - #context-back:-moz-locale-dir(rtl), #context-forward:-moz-locale-dir(rtl), #context-reload:-moz-locale-dir(rtl) { transform: scaleX(-1); } -#context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon { - width: 16px; - height: 16px; - margin: 7px; -} - #context-media-eme-learnmore { list-style-image: url("chrome://browser/skin/drm-icon.svg#chains"); } diff --git a/arc-firefox-theme/chrome/browser/sass/browser-dark.css b/arc-firefox-theme/chrome/browser/sass/browser-dark.css index d9e487d..8e87e14 100644 --- a/arc-firefox-theme/chrome/browser/sass/browser-dark.css +++ b/arc-firefox-theme/chrome/browser/sass/browser-dark.css @@ -18,6 +18,9 @@ --toolbarbutton-combined-backgroundimage: linear-gradient(rgba(23, 51, 79, 0.2) 0, rgba(23, 51, 79, 0.2) 18px); --verified-identity-box-backgroundcolor: transparent; --panel-separator-color: ThreeDShadow; + --arrowpanel-dimmed: rgba(204, 204, 204, 0.3); + --arrowpanel-dimmed-further: rgba(204, 204, 204, 0.45); + --arrowpanel-dimmed-even-further: rgba(204, 204, 204, 0.8); --urlbar-separator-color: rgba(41, 41, 41, 0.2); } #menubar-items { @@ -470,9 +473,6 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { #aboutName { list-style-image: url("moz-icon://stock/gtk-about?size=menu"); } -#javascriptConsole { - list-style-image: url("chrome://global/skin/console/console.png"); } - /* Primary toolbar buttons */ :-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1 > .toolbarbutton-icon, :-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1 > :-moz-any(.toolbarbutton-menubutton-button, .toolbarbutton-badge-stack) > .toolbarbutton-icon { @@ -940,353 +940,151 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { } */ /* Menu panel and palette styles */ -:root { - --menupanel-list-style-image: url(chrome://browser/skin/menuPanel.png); - --menupanel-list-style-image-2x: url(chrome://browser/skin/menuPanel@2x.png); - --menupanel-small-list-style-image: url(chrome://browser/skin/menuPanel-small.png); - --menupanel-small-list-style-image-2x: url(chrome://browser/skin/menuPanel-small@2x.png); } - -@media not all and (min-resolution: 1.1dppx) { - toolbaritem[sdkstylewidget="true"] > toolbarbutton, - :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) { - list-style-image: var(--menupanel-list-style-image); } - - #home-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #home-button { - -moz-image-region: rect(0px, 128px, 32px, 96px); } - - #bookmarks-menu-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #bookmarks-menu-button { - -moz-image-region: rect(0px, 192px, 32px, 160px); } - - #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 192px, 64px, 160px); } - - #history-panelmenu[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #history-panelmenu { - -moz-image-region: rect(0px, 224px, 32px, 192px); } - - #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 224px, 64px, 192px); } - - #downloads-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #downloads-button { - -moz-image-region: rect(0px, 256px, 32px, 224px); } - - #add-ons-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #add-ons-button { - -moz-image-region: rect(0px, 288px, 32px, 256px); } - - #open-file-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #open-file-button { - -moz-image-region: rect(0px, 320px, 32px, 288px); } - - #save-page-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #save-page-button { - -moz-image-region: rect(0px, 352px, 32px, 320px); } - - #sync-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sync-button { - -moz-image-region: rect(0px, 1024px, 32px, 992px); } - - #sync-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 1024px, 64px, 992px); } - - #containers-panelmenu[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #containers-panelmenu { - -moz-image-region: rect(0px, 1056px, 32px, 1024px); } - - #containers-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 1056px, 64px, 1024px); } - - #feed-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #feed-button { - -moz-image-region: rect(0px, 416px, 32px, 384px); } - - #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 416px, 64px, 384px); } - - #social-share-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #social-share-button { - -moz-image-region: rect(0px, 448px, 32px, 416px); } - - #characterencoding-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #characterencoding-button { - -moz-image-region: rect(0px, 480px, 32px, 448px); } - - #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 480px, 64px, 448px); } - - #new-window-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-window-button { - -moz-image-region: rect(0px, 512px, 32px, 480px); } - - #e10s-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #e10s-button { - -moz-image-region: rect(0px, 512px, 32px, 480px); } - - #new-tab-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-tab-button { - -moz-image-region: rect(0px, 544px, 32px, 512px); } - - #privatebrowsing-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #privatebrowsing-button { - -moz-image-region: rect(0px, 576px, 32px, 544px); } - - #find-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #find-button { - -moz-image-region: rect(0px, 640px, 32px, 608px); } - - #print-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #print-button { - -moz-image-region: rect(0px, 672px, 32px, 640px); } - - #fullscreen-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #fullscreen-button { - -moz-image-region: rect(0px, 704px, 32px, 672px); } - - #developer-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #developer-button { - -moz-image-region: rect(0px, 736px, 32px, 704px); } - - #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 736px, 64px, 704px); } - - #preferences-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #preferences-button { - -moz-image-region: rect(0px, 768px, 32px, 736px); } - - #email-link-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #email-link-button { - -moz-image-region: rect(0, 800px, 32px, 768px); } - - #sidebar-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sidebar-button { - -moz-image-region: rect(0, 864px, 32px, 832px); } - - #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 864px, 64px, 832px); } - - #panic-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #panic-button { - -moz-image-region: rect(0, 896px, 32px, 864px); } - - #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 896px, 64px, 864px); } - - #webide-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #webide-button { - -moz-image-region: rect(0px, 960px, 32px, 928px); } - - toolbaritem[sdkstylewidget="true"] > toolbarbutton { - -moz-image-region: rect(0, 832px, 32px, 800px); } - - /* Wide panel control icons */ - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton, - toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton { - list-style-image: var(--menupanel-small-list-style-image); } - - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button { - -moz-image-region: rect(0px, 32px, 16px, 16px); } - - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button { - -moz-image-region: rect(0px, 48px, 16px, 32px); } - - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button { - -moz-image-region: rect(0px, 64px, 16px, 48px); } - - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button { - -moz-image-region: rect(0px, 80px, 16px, 64px); } - - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { - -moz-image-region: rect(0px, 96px, 16px, 80px); } - - #add-share-provider { - list-style-image: url(chrome://browser/skin/menuPanel-small.png); - -moz-image-region: rect(0px, 96px, 16px, 80px); } } -/* Menu panel and palette styles */ -@media (min-resolution: 1.1dppx) { - toolbaritem[sdkstylewidget="true"] > toolbarbutton, - :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) { - list-style-image: var(--menupanel-list-style-image-2x); } - - #home-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #home-button { - -moz-image-region: rect(0px, 256px, 64px, 192px); } - - #bookmarks-menu-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #bookmarks-menu-button { - -moz-image-region: rect(0px, 384px, 64px, 320px); } - - #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 384px, 128px, 320px); } - - #history-panelmenu[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #history-panelmenu { - -moz-image-region: rect(0px, 448px, 64px, 384px); } - - #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 448px, 128px, 384px); } - - #downloads-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #downloads-button { - -moz-image-region: rect(0px, 512px, 64px, 448px); } - - #add-ons-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #add-ons-button { - -moz-image-region: rect(0px, 576px, 64px, 512px); } - - #open-file-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #open-file-button { - -moz-image-region: rect(0px, 640px, 64px, 576px); } - - #save-page-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #save-page-button { - -moz-image-region: rect(0px, 704px, 64px, 640px); } +toolbaritem[sdkstylewidget="true"] > toolbarbutton, +:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) { + list-style-image: url(chrome://browser/skin/menuPanel.svg); } + +:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-icon, +:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-badge-stack > .toolbarbutton-icon, +:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon { + filter: url(chrome://browser/skin/filters.svg#fill); + fill: currentColor; } - #sync-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sync-button { - -moz-image-region: rect(0px, 2048px, 64px, 1984px); } +#home-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #home-button { + -moz-image-region: rect(0px, 128px, 32px, 96px); } - #sync-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 2048px, 128px, 1984px); } +#bookmarks-menu-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #bookmarks-menu-button { + -moz-image-region: rect(0px, 192px, 32px, 160px); } - #containers-panelmenu[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #containers-panelmenu { - -moz-image-region: rect(0px, 2112px, 64px, 2048px); } +#history-panelmenu[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #history-panelmenu { + -moz-image-region: rect(0px, 224px, 32px, 192px); } - #containers-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 2112px, 128px, 2048px); } +#downloads-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #downloads-button { + -moz-image-region: rect(0px, 256px, 32px, 224px); } - #feed-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #feed-button { - -moz-image-region: rect(0px, 832px, 64px, 768px); } +#add-ons-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #add-ons-button { + -moz-image-region: rect(0px, 288px, 32px, 256px); } - #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 832px, 128px, 768px); } +#open-file-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #open-file-button { + -moz-image-region: rect(0px, 320px, 32px, 288px); } - #social-share-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #social-share-button { - -moz-image-region: rect(0px, 896px, 64px, 832px); } +#save-page-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #save-page-button { + -moz-image-region: rect(0px, 352px, 32px, 320px); } - #characterencoding-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #characterencoding-button { - -moz-image-region: rect(0, 960px, 64px, 896px); } +#sync-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #sync-button { + -moz-image-region: rect(0px, 1024px, 32px, 992px); } - #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 960px, 128px, 896px); } +#containers-panelmenu[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #containers-panelmenu { + -moz-image-region: rect(0px, 1056px, 32px, 1024px); } - #new-window-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-window-button { - -moz-image-region: rect(0px, 1024px, 64px, 960px); } +#feed-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #feed-button { + -moz-image-region: rect(0px, 416px, 32px, 384px); } - #e10s-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #e10s-button { - -moz-image-region: rect(0px, 1024px, 64px, 960px); } +#social-share-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #social-share-button { + -moz-image-region: rect(0px, 448px, 32px, 416px); } - #webide-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #webide-button { - -moz-image-region: rect(0px, 1920px, 64px, 1856px); } +#characterencoding-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #characterencoding-button { + -moz-image-region: rect(0px, 480px, 32px, 448px); } - #new-tab-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-tab-button { - -moz-image-region: rect(0px, 1088px, 64px, 1024px); } +#new-window-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #new-window-button { + -moz-image-region: rect(0px, 512px, 32px, 480px); } - #privatebrowsing-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #privatebrowsing-button { - -moz-image-region: rect(0px, 1152px, 64px, 1088px); } +#e10s-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #e10s-button { + -moz-image-region: rect(0px, 512px, 32px, 480px); } - #find-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #find-button { - -moz-image-region: rect(0px, 1280px, 64px, 1216px); } +#new-tab-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #new-tab-button { + -moz-image-region: rect(0px, 544px, 32px, 512px); } - #print-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #print-button { - -moz-image-region: rect(0px, 1344px, 64px, 1280px); } +#privatebrowsing-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #privatebrowsing-button { + -moz-image-region: rect(0px, 576px, 32px, 544px); } - #fullscreen-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #fullscreen-button { - -moz-image-region: rect(0px, 1408px, 64px, 1344px); } +#find-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #find-button { + -moz-image-region: rect(0px, 640px, 32px, 608px); } - #developer-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #developer-button { - -moz-image-region: rect(0px, 1472px, 64px, 1408px); } +#print-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #print-button { + -moz-image-region: rect(0px, 672px, 32px, 640px); } - #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 1472px, 128px, 1408px); } +#fullscreen-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #fullscreen-button { + -moz-image-region: rect(0px, 704px, 32px, 672px); } - #preferences-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #preferences-button { - -moz-image-region: rect(0px, 1536px, 64px, 1472px); } +#developer-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #developer-button { + -moz-image-region: rect(0px, 736px, 32px, 704px); } - #email-link-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #email-link-button { - -moz-image-region: rect(0px, 1600px, 64px, 1536px); } +#preferences-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #preferences-button { + -moz-image-region: rect(0px, 768px, 32px, 736px); } - #sidebar-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sidebar-button { - -moz-image-region: rect(0px, 1728px, 64px, 1664px); } +#email-link-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #email-link-button { + -moz-image-region: rect(0, 800px, 32px, 768px); } - #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 1728px, 128px, 1664px); } +#sidebar-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #sidebar-button { + -moz-image-region: rect(0, 864px, 32px, 832px); } - #panic-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #panic-button { - -moz-image-region: rect(0, 1792px, 64px, 1728px); } +#panic-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #panic-button { + -moz-image-region: rect(0, 896px, 32px, 864px); } - #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 1792px, 128px, 1728px); } +#webide-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #webide-button { + -moz-image-region: rect(0px, 960px, 32px, 928px); } - toolbaritem[sdkstylewidget="true"] > toolbarbutton { - -moz-image-region: rect(0, 1664px, 64px, 1600px); } +toolbaritem[sdkstylewidget="true"] > toolbarbutton { + -moz-image-region: rect(0, 832px, 32px, 800px); } - #add-share-provider { - list-style-image: url(chrome://browser/skin/menuPanel-small@2x.png); - -moz-image-region: rect(0px, 192px, 32px, 160px); } +/* Wide panel control icons */ +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, +#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, +toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton, +toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton { + list-style-image: url(chrome://browser/skin/menuPanel-small.svg); } - /* Footer and wide panel control icons */ - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton, - toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton { - list-style-image: var(--menupanel-small-list-style-image-2x); } +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button, +toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button { + -moz-image-region: rect(0px, 32px, 16px, 16px); } - /* Wide items like the Cut/Copy/Paste and Zoom controls are special in that their icons - are 16x16 when in the panel, but 18x18 when in a toolbar. */ - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon, - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon, - toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon, - toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon { - width: 16px; } +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button, +toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button { + -moz-image-region: rect(0px, 48px, 16px, 32px); } - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button { - -moz-image-region: rect(0px, 64px, 32px, 32px); } +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button, +toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button { + -moz-image-region: rect(0px, 64px, 16px, 48px); } - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button { - -moz-image-region: rect(0px, 96px, 32px, 64px); } +#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button, +toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button { + -moz-image-region: rect(0px, 80px, 16px, 64px); } - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button { - -moz-image-region: rect(0px, 128px, 32px, 96px); } +#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button, +toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { + -moz-image-region: rect(0px, 96px, 16px, 80px); } - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button { - -moz-image-region: rect(0px, 160px, 32px, 128px); } +#add-share-provider { + list-style-image: url(chrome://browser/skin/menuPanel-small.svg); + -moz-image-region: rect(0px, 96px, 16px, 80px); } - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { - -moz-image-region: rect(0px, 192px, 32px, 160px); } } #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon, #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker, #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker, @@ -1386,9 +1184,43 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { width: 16px; height: 16px; } +/* ::::: URL Bar Zoom Reset Button ::::: */ +@keyframes urlbar-zoom-reset-pulse { + 0% { + transform: scale(0); } + 75% { + transform: scale(1.5); } + 100% { + transform: scale(1); } } +#urlbar-zoom-button { + -moz-appearance: none; + margin: 0 3px; + font-size: .8em; + padding: 0 8px; + border-radius: 1em; + background-color: rgba(0, 0, 0, 0.05); + color: inherit; + border: 1px solid ThreeDLightShadow; } + +#urlbar-zoom-button[animate="true"] { + animation-name: urlbar-zoom-reset-pulse; + animation-duration: 250ms; } + +#urlbar-zoom-button:hover { + background-color: rgba(0, 0, 0, 0.1); } + +#urlbar-zoom-button:hover:active { + background-color: rgba(0, 0, 0, 0.15); } + +#urlbar-zoom-button > .toolbarbutton-text { + display: -moz-box; } + +#urlbar-zoom-button > .toolbarbutton-icon { + display: none; } + #urlbar-search-footer { - border-top: 1px solid rgba(24, 26, 27, 0.14); - background-color: rgba(24, 26, 27, 0.07); } + border-top: 1px solid var(--panel-separator-color); + background-color: var(--arrowpanel-dimmed); } #urlbar-search-settings { -moz-appearance: none; @@ -1400,10 +1232,10 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { background: transparent; } #urlbar-search-settings:hover { - background-color: rgba(24, 26, 27, 0.07); } + background-color: var(--arrowpanel-dimmed); } #urlbar-search-settings:hover:active { - background-color: rgba(24, 26, 27, 0.12); } + background-color: var(--arrowpanel-dimmed-further); } #urlbar-search-splitter { -moz-appearance: none; @@ -1420,7 +1252,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { color: GrayText; } #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] { - border-bottom: 1px solid rgba(24, 26, 27, 0.14); + border-bottom: 1px solid var(--panel-separator-color); background-color: rgba(24, 26, 27, 0.07); padding: 6px 0; padding-inline-start: 44px; @@ -1477,13 +1309,98 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { border-top-right-radius: 1.5px; border-bottom-right-radius: 1.5px; } -#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: 1px dotted; outline-offset: -3px; } +#identity-icon { + list-style-image: url(chrome://browser/skin/identity-icon.svg#normal); } + +#identity-box:hover > #identity-icon:not(.no-hover), +#identity-box[open=true] > #identity-icon { + list-style-image: url(chrome://browser/skin/identity-icon.svg#hover); } + +#identity-box.grantedPermissions > #identity-icon { + list-style-image: url(chrome://browser/skin/identity-icon.svg#notice); } + +#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover), +#identity-box.grantedPermissions[open=true] > #identity-icon { + list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover); } + +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon { + list-style-image: url(chrome://branding/content/identity-icons-brand.svg); } + +#tracking-protection-icon { + list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled); } + +#tracking-protection-icon[state="loaded-tracking-content"] { + list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled); } + +#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon { + list-style-image: url(chrome://browser/skin/connection-secure.svg); + visibility: visible; } + +#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon { + list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon); + visibility: visible; } + +#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon { + list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon); + visibility: visible; } + +#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon { + list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon); + visibility: visible; } + +#identity-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/identity-icon.svg#normal-black); } + +#identity-box:hover > #identity-icon:not(.no-hover):-moz-lwtheme, +#identity-box[open=true] > #identity-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/identity-icon.svg#hover-black); } + +#identity-box.grantedPermissions > #identity-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-black); } + +#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover):-moz-lwtheme, +#identity-box.grantedPermissions[open=true] > #identity-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover-black); } + +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon:-moz-lwtheme { + list-style-image: url(chrome://branding/content/identity-icons-brand.svg); } + +#tracking-protection-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled-black); } + +#tracking-protection-icon[state="loaded-tracking-content"]:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled-black); } + +#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon:-moz-lwtheme, +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon:-moz-lwtheme, +#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/connection-secure.svg); + visibility: visible; } + +#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon-black); + visibility: visible; } + +#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon:-moz-lwtheme, +#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon-black); + visibility: visible; } + +#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon:-moz-lwtheme, +#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon:-moz-lwtheme, +#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon-black); + visibility: visible; } + #identity-box { --identity-box-verified-color: #479900; --identity-box-chrome-color: #e57300; @@ -1512,44 +1429,53 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { /* MAIN IDENTITY ICON */ #identity-icon { width: 16px; - height: 16px; - list-style-image: url(chrome://browser/skin/identity-icon.svg#normal); } - -#identity-box:hover > #identity-icon:not(.no-hover), -#identity-box[open=true] > #identity-icon { - list-style-image: url(chrome://browser/skin/identity-icon.svg#hover); } - -#identity-box.grantedPermissions > #identity-icon { - list-style-image: url(chrome://browser/skin/identity-icon.svg#notice); } - -#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover), -#identity-box.grantedPermissions[open=true] > #identity-icon { - list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover); } - -#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon { - list-style-image: url(chrome://branding/content/identity-icons-brand.svg); } + height: 16px; } #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon { - opacity: 0.3; } + opacity: .3; } #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon { -moz-image-region: inherit; list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); + width: 16px; + height: 16px; } + +/* SHARING ICON */ +#sharing-icon { width: 16px; height: 16px; - opacity: 1; } + margin-inline-start: -16px; + position: relative; + display: none; } + +#identity-box[sharing="camera"] > #sharing-icon { + list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing"); } +#identity-box[sharing="microphone"] > #sharing-icon { + list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing"); } + +#identity-box[sharing="screen"] > #sharing-icon { + list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing"); } + +#identity-box[sharing] > #sharing-icon { + display: -moz-box; + animation-delay: -1.5s; } + +#identity-box[sharing] > #identity-icon, +#sharing-icon { + animation: 3s linear pulse infinite; } + +@keyframes pulse { + 0%, 16.66%, 83.33%, 100% { + opacity: 0; } + 33.33%, 66.66% { + opacity: 1; } } /* TRACKING PROTECTION ICON */ #tracking-protection-icon { width: 16px; height: 16px; margin-inline-start: 2px; - margin-inline-end: 0; - list-style-image: url(chrome://browser/skin/tracking-protection-16.svg); - opacity: 1; } - -#tracking-protection-icon[state="loaded-tracking-content"] { - list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg); } + margin-inline-end: 0; } #tracking-protection-icon[animate] { transition: margin-left 200ms ease-out, margin-right 200ms ease-out; } @@ -1571,40 +1497,22 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { margin-inline-start: 2px; visibility: collapse; } -#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon, -#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon, -#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon { - list-style-image: url(chrome://browser/skin/identity-secure.svg); - visibility: visible; } - -#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon { - list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg); - visibility: visible; } - -#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon, -#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon { - list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg); - visibility: visible; } - -#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon, -#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon, -#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon { - list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg); - visibility: visible; } - #notification-popup-box { padding: 5px 0px; margin: -5px 0px; margin-inline-end: -5px; padding-inline-end: 5px; } +.notification-anchor-icon, +#blocked-permissions-container > .blocked-permission-icon { + width: 16px; + height: 16px; + margin-inline-start: 2px; } + /* This class can be used alone or in combination with the class defining the type of icon displayed. This rule must be defined before the others in order for its list-style-image to be overridden. */ .notification-anchor-icon { - width: 16px; - height: 16px; - margin-inline-start: 2px; list-style-image: url(moz-icon://stock/gtk-dialog-info?size=16); } @media (min-resolution: 1.1dppx) { @@ -1615,57 +1523,26 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { height: 64px; margin-inline-end: 10px; } -#notification-popup-box > .notification-anchor-icon:not(.in-use):hover { - fill: #606060; } - -/* INDIVIDUAL NOTIFICATIONS */ -/* For the moment we apply the color filter only on the icons listed here. - The first two selectors are used by socialchat.xml (bug 1275558). */ -.webRTC-sharingDevices-notification-icon, -.webRTC-sharingMicrophone-notification-icon, -.camera-icon, -.geo-icon, -.indexedDB-icon, -.install-icon, -.login-icon, -.microphone-icon, -.plugin-icon, -.pointerLock-icon, -.popup-icon, -.screen-icon, -.desktop-notification-icon, -.popup-notification-icon[popupid="geolocation"], -.popup-notification-icon[popupid="indexedDB-permissions-prompt"], -.popup-notification-icon[popupid="password"], -.popup-notification-icon[popupid="pointerLock"], -.popup-notification-icon[popupid="webRTC-shareDevices"], -.popup-notification-icon[popupid="webRTC-shareMicrophone"], -.popup-notification-icon[popupid="webRTC-shareScreen"], -.popup-notification-icon[popupid="webRTC-sharingDevices"], -.popup-notification-icon[popupid="webRTC-sharingMicrophone"], -.popup-notification-icon[popupid="webRTC-sharingScreen"], -.popup-notification-icon[popupid="web-notifications"] { +.notification-anchor-icon:not(.plugin-blocked):-moz-lwtheme, +#blocked-permissions-container > .blocked-permission-icon:-moz-lwtheme { filter: url(chrome://browser/skin/filters.svg#fill); - fill: #999; } + fill: currentColor; } -/* The first two selectors are used by socialchat.xml (bug 1275558). The - notifications in the chat window are only shown when they are in use. */ -.webRTC-sharingDevices-notification-icon, -.webRTC-sharingMicrophone-notification-icon, -.in-use { - fill: #fea01b; } +.notification-anchor-icon:not(.plugin-blocked):not(:hover) { + opacity: .8; } +/* INDIVIDUAL NOTIFICATIONS */ .popup-notification-icon[popupid="web-notifications"], .desktop-notification-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification); } -.desktop-notification-icon.blocked { +.desktop-notification-icon.blocked-permission-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked); } .geo-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-linux); } -.geo-icon.blocked { +.geo-icon.blocked-permission-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-linux-blocked); } .popup-notification-icon[popupid="geolocation"] { @@ -1675,7 +1552,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { .indexedDB-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB); } -.indexedDB-icon.blocked { +.indexedDB-icon.blocked-permission-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked); } .login-icon { @@ -1684,46 +1561,37 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { .popup-notification-icon[popupid="password"] { list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed); } -#login-fill-notification-icon { - /* Temporary solution until the capture and fill doorhangers are unified. */ - transform: scaleX(-1); } - -/* The first selector is used by socialchat.xml (bug 1275558). */ -.webRTC-sharingDevices-notification-icon, .camera-icon, -.popup-notification-icon[popupid="webRTC-shareDevices"], -.popup-notification-icon[popupid="webRTC-sharingDevices"] { +.popup-notification-icon[popupid="webRTC-shareDevices"] { list-style-image: url(chrome://browser/skin/notification-icons.svg#camera); } -.camera-icon.blocked { +.camera-icon.in-use { + list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-sharing); } + +.camera-icon.blocked-permission-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked); } -/* The first selector is used by socialchat.xml (bug 1275558). */ -.webRTC-sharingMicrophone-notification-icon, .microphone-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone); } -.microphone-icon.blocked { +.microphone-icon.in-use { + list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-sharing); } + +.microphone-icon.blocked-permission-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked); } -.popup-notification-icon[popupid="webRTC-shareMicrophone"], -.popup-notification-icon[popupid="webRTC-sharingMicrophone"] { +.popup-notification-icon[popupid="webRTC-shareMicrophone"] { list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed); } .popup-notification-icon[popupid="webRTC-shareScreen"], -.popup-notification-icon[popupid="webRTC-sharingScreen"], .screen-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#screen); } -.screen-icon.blocked { - list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked); } +.screen-icon.in-use { + list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-sharing); } -.popup-notification-icon[popupid="pointerLock"], -.pointerLock-icon { - list-style-image: url(chrome://browser/skin/notification-icons.svg#pointerLock); } - -.pointerLock-icon.blocked { - list-style-image: url(chrome://browser/skin/notification-icons.svg#pointerLock-blocked); } +.screen-icon.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked); } /* This icon has a block sign in it, so we don't need a blocked version. */ .popup-icon { @@ -1789,9 +1657,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin); } .plugin-icon.plugin-blocked { - list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked); - fill: #d92215 !important; - /* important! to override the default hover color */ } + list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked); } #notification-popup-box[hidden] { /* Override display:none to make the pluginBlockedNotification animation work @@ -2156,6 +2022,21 @@ html|span.ac-emphasize-text-url { -moz-image-region: rect(0, 48px, 16px, 32px); } /* social share panel */ +#manage-share-providers { + list-style-image: url("chrome://browser/skin/Toolbar.png"); + -moz-image-region: rect(0, 468px, 18px, 450px); } + +#manage-share-providers > .toolbarbutton-icon { + min-height: 18px; + min-width: 18px; } + +.social-panel > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; } + +/* fixup corners for share panel */ +.social-panel > .social-panel-frame { + border-radius: inherit; } + .social-share-frame { border-top: 1px solid #f8f8f8; width: 756px; @@ -2197,10 +2078,6 @@ html|span.ac-emphasize-text-url { min-height: 16px; max-height: 16px; } -/* social recommending panel */ -#social-mark-button { - -moz-image-region: rect(0, 16px, 16px, 0); } - /* bookmarks menu-button */ #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker { -moz-appearance: none !important; @@ -2353,7 +2230,7 @@ html|span.ac-emphasize-text-url { color: #D3DAE3; } /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */ -.tabbrowser-tab[selected=true] { +.tabbrowser-tab[visuallyselected=true] { position: relative; z-index: 2; } @@ -2406,17 +2283,13 @@ html|span.ac-emphasize-text-url { position: relative; } .tab-sharing-icon-overlay[sharing="camera"] { - list-style-image: url("chrome://browser/skin/notification-icons.svg#camera"); } + list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing"); } .tab-sharing-icon-overlay[sharing="microphone"] { - list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone"); } + list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing"); } .tab-sharing-icon-overlay[sharing="screen"] { - list-style-image: url("chrome://browser/skin/notification-icons.svg#screen"); } - -.tab-sharing-icon-overlay[sharing] { - filter: url("chrome://browser/skin/filters.svg#fill"); - fill: #e0291d; } + list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing"); } .tab-icon-overlay { width: 16px; @@ -2485,26 +2358,6 @@ html|span.ac-emphasize-text-url { .tab-icon-sound[selected=true][soundplaying] { list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio.svg#tab-audio"); } -.tab-icon-sound:hover:-moz-lwtheme, -.tab-icon-sound[selected=true][soundplaying]:hover { - list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio.svg#tab-audio-hover"); } - -.tab-icon-sound:hover:active:-moz-lwtheme, -.tab-icon-sound[selected=true][soundplaying]:hover:active { - list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio.svg#tab-audio-pressed"); } - -.tab-icon-sound[muted]:-moz-lwtheme, -.tab-icon-sound[selected=true][muted] { - list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio.svg#tab-audio-muted"); } - -.tab-icon-sound[muted]:hover:-moz-lwtheme, -.tab-icon-sound[selected=true][muted]:hover { - list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio.svg#tab-audio-muted-hover"); } - -.tab-icon-sound[muted]:hover:active:-moz-lwtheme, -.tab-icon-sound[selected=true][muted]:hover:active { - list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio.svg#tab-audio-muted-pressed"); } - .tab-background, .tabs-newtab-button { /* overlap the tab curves */ @@ -2556,7 +2409,7 @@ html|span.ac-emphasize-text-url { min-height: var(--tab-min-height); width: 30px; } -.tabbrowser-tab:not([selected=true]), +.tabbrowser-tab:not([visuallyselected=true]), .tabbrowser-tab:-moz-lwtheme { color: inherit; } @@ -2802,22 +2655,6 @@ lwtHeader;*/ .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon { list-style-image: url("chrome://global/skin/icons/loading.png"); } -.alltabs-item[tabIsVisible] { - /* box-shadow instead of background-color to work around native styling */ - box-shadow: inset -5px 0 ThreeDShadow; } - -.alltabs-endimage[muted] { - list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-menu-muted); } - -.alltabs-endimage[soundplaying] { - list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-menu); } - -menuitem:hover > hbox > .alltabs-endimage[muted] { - list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-menu-muted-hover); } - -menuitem:hover > hbox > .alltabs-endimage[soundplaying] { - list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-menu-hover); } - /* Sidebar */ #sidebar-throbber[loading="true"] { list-style-image: url("chrome://global/skin/icons/loading.png"); @@ -2839,50 +2676,6 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker { toolbarbutton.chevron > .toolbarbutton-icon { margin: 0; } -/* Ctrl-Tab */ -#ctrlTab-panel { - -moz-appearance: none; - background: rgba(68, 68, 68, 0.7); - color: white; - border-style: none; - padding: 20px 10px 10px; - font-weight: bold; - text-shadow: 0 0 1px #444444, 0 0 2px #444444; } - -.ctrlTab-favicon[src] { - background-color: white; - width: 20px; - height: 20px; - padding: 2px; } - -.ctrlTab-preview-inner > .tabPreview-canvas { - box-shadow: 1px 1px 2px #1f1f1f; } - -.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas { - margin-bottom: 2px; } - -.ctrlTab-preview-inner { - padding-bottom: 10px; } - -#ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner { - padding: 10px; - background-color: rgba(255, 255, 255, 0.2); - border-radius: .5em; } - -.ctrlTab-preview:focus > * > .ctrlTab-preview-inner { - color: white; - background-color: rgba(0, 0, 0, 0.6); - text-shadow: none; - padding: 8px; - border: 2px solid white; - border-radius: .5em; } - -.ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner { - margin: -10px -10px 0; } - -#ctrlTab-showAll { - margin-top: .5em; } - /* Status panel */ .statuspanel-label { margin: 0; @@ -2944,21 +2737,49 @@ html|*.pointerlockfswarning-exit-button { font-size: 14px; font-weight: lighter; margin: 0; - box-sizing: content-box; - background-clip: padding-box; - border: 1px solid; - border-radius: 3px; - color: #BAC3CF; - border-color: rgba(26, 28, 34, 0.35); - background-color: rgba(102, 109, 132, 0.35); } - html|*.pointerlockfswarning-exit-button:hover { - color: #BAC3CF; - border-color: rgba(26, 28, 34, 0.35); - background-color: rgba(119, 127, 151, 0.45); } - html|*.pointerlockfswarning-exit-button:active, html|*.pointerlockfswarning-exit-button:checked { - color: #ffffff; - border-color: rgba(26, 28, 34, 0.35); - background-color: #5294E2; } + box-sizing: content-box; } + +/* Ctrl-Tab */ +#ctrlTab-panel { + -moz-appearance: none; + background: rgba(84, 84, 84, 0.85); + color: white; + border-style: none; + padding: 20px 10px 10px; + font-weight: bold; + text-shadow: 0 0 1px #1f1f1f, 0 0 2px #1f1f1f; } + +.ctrlTab-favicon[src] { + background-color: white; + width: 20px; + height: 20px; + padding: 2px; } + +.ctrlTab-preview-inner > .tabPreview-canvas { + box-shadow: 1px 1px 2px #1f1f1f; } + +.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas { + margin-bottom: 2px; } + +.ctrlTab-preview-inner { + padding: 8px; + border: 2px solid transparent; + border-radius: .5em; } + +.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner { + margin: -10px -10px 0; } + +#ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner { + background-color: rgba(255, 255, 255, 0.2); } + +.ctrlTab-preview:focus > * > .ctrlTab-preview-inner { + color: white; + background-color: rgba(0, 0, 0, 0.6); + text-shadow: none; + border-color: white; } + +#ctrlTab-showAll { + margin-top: .5em; } /* Responsive Mode */ .browserContainer[responsivemode] { @@ -3451,8 +3272,8 @@ html|*#gcli-output-frame { margin-inline-start: 6px; } .click-to-play-plugins-notification-button-container { - background-color: rgba(24, 26, 27, 0.07); - border-top: 1px solid rgba(24, 26, 27, 0.12); + background-color: var(--arrowpanel-dimmed); + border-top: 1px solid var(--panel-separator-color); padding: 10px; margin-top: 5px; } @@ -3470,9 +3291,7 @@ html|*#gcli-output-frame { margin: 0; } .messageImage[value="plugin-hidden"] { - list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin); - filter: url(chrome://browser/skin/filters.svg#fill); - fill: #808080; } + list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin); } /* Keep any changes to this style in sync with pluginProblem.css */ notification.pluginVulnerable { @@ -3481,77 +3300,11 @@ notification.pluginVulnerable { color: white; } notification.pluginVulnerable .messageImage { - list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked); - filter: url(chrome://browser/skin/filters.svg#fill); - fill: #d92215; } + list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked); } notification.pluginVulnerable > .notification-inner > .messageCloseButton:not(:hover) { background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 80, 16, 64); } -#notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent { - /* Since we display a sliding subview that extends to the border, we cannot - * keep the default padding of arrow panels. We use the same padding in the - * individual content views instead. Since we removed the padding, we also - * have to ensure the contents are clipped to the border box. */ - padding: 0; - overflow: hidden; } - -#login-fill-mainview, -#login-fill-details { - padding: var(--panel-arrowcontent-padding); } - -#login-fill-doorhanger[inDetailView] > #login-fill-mainview { - transform: translateX(-14px); } - -#login-fill-mainview, -#login-fill-details { - transition: transform 150ms; } - -#login-fill-doorhanger:not([inDetailView]) > #login-fill-details { - transform: translateX(105%); } - -#login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) { - transform: translateX(-105%); } - -#login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer { - background-color: rgba(24, 26, 27, 0.1); } - -#login-fill-testing { - color: #b33; - font-weight: bold; } - -#login-fill-list { - border: 1px solid black; - max-height: 20em; } - -.login-fill-item[disabled] { - color: #888; - background-color: #fff; } - -.login-fill-item[disabled][selected] { - background-color: #eef; } - -.login-hostname { - margin: 4px; - font-weight: bold; } - -.login-fill-item.different-hostname > .login-hostname { - color: #888; - font-style: italic; } - -.login-username { - margin: 4px; - color: #888; } - -#login-fill-details { - padding: 4px; - background: var(--panel-arrowcontent-background); - color: var(--panel-arrowcontent-color); - background-clip: padding-box; - border-left: 1px solid rgba(24, 26, 27, 0.3); - box-shadow: 0 3px 5px rgba(24, 26, 27, 0.1), 0 0 7px rgba(24, 26, 27, 0.1); - margin-inline-start: 38px; } - /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ @@ -3740,214 +3493,6 @@ toolbar[brighttext] #downloads-indicator-counter { border-radius: 1px; margin-inline-end: 2px; } -/* social toolbar provider menu */ -#social-statusarea-popup { - margin-top: 0; - margin-left: -12px; - margin-right: -12px; } - -.social-statusarea-user { - list-style-image: url("chrome://global/skin/icons/information-32.png"); } - -.social-statusarea-user-portrait { - width: 32px; - height: 32px; - border-radius: 2px; - margin: 10px; } - -.social-panel > .panel-arrowcontainer > .panel-arrowcontent { - padding: 0; } - -#social-sidebar-header { - padding: 3px; } - -#manage-share-providers, -#social-sidebar-button { - list-style-image: url("chrome://browser/skin/Toolbar.png"); - -moz-image-region: rect(0, 468px, 18px, 450px); } - -#social-sidebar-button { - -moz-appearance: none; - border: none; - padding: 0; - margin: 2px; } - -#manage-share-providers > .toolbarbutton-icon, -#social-sidebar-button > .toolbarbutton-icon { - min-height: 18px; - min-width: 18px; } - -#social-sidebar-button > .toolbarbutton-menu-dropmarker { - display: none; } - -#social-sidebar-button[loading="true"] { - list-style-image: url("chrome://global/skin/icons/loading.png"); } - -#social-sidebar-favico { - max-height: 16px; - max-width: 16px; - padding: 0; - margin: 2px; } - -.chat-status-icon { - max-height: 16px; - max-width: 16px; - padding: 0; } - -.chat-toolbarbutton { - -moz-appearance: none; - border: none; - padding: 0 3px; - margin: 0; - background: none; } - -.chat-toolbarbutton > .toolbarbutton-text { - display: none; } - -.chat-toolbarbutton > .toolbarbutton-icon { - width: 16px; - height: 16px; } - -.chat-close-button { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close"); } - -.chat-close-button:hover { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-hover"); } - -.chat-close-button:hover:active { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-active"); } - -.chat-minimize-button { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize"); } - -.chat-minimize-button:hover { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-hover"); } - -.chat-minimize-button:hover:active { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-active"); } - -.chat-swap-button { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand"); - transform: rotate(180deg); } - -.chat-swap-button:hover { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-hover"); } - -.chat-swap-button:hover:active { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-active"); } - -chatbar > chatbox > .chat-titlebar > .chat-swap-button { - transform: none; } - -.chat-title { - color: #666; - text-shadow: none; - cursor: inherit; } - -.chat-titlebar { - height: 26px; - min-height: 26px; - width: 100%; - margin: 0; - padding: 5px 4px; - border: 1px solid #ebebeb; - border-bottom: 0; - border-top-left-radius: 4px; - border-top-right-radius: 4px; - cursor: pointer; - background-color: #ebebeb; } - -.chat-titlebar[selected] { - background-color: #f0f0f0; } - -.chat-titlebar > .notification-anchor-icon { - margin-left: 2px; - margin-right: 2px; } - -.chat-titlebar[minimized="true"] { - border-bottom: none; } - -.chat-titlebar[activity] { - background-image: radial-gradient(ellipse closest-side at center, white, transparent); - background-repeat: no-repeat; - background-size: 100% 20px; - background-position: 0 -10px; } - -.chat-frame { - padding: 0; - margin: 0; - overflow: hidden; } - -.chatbar-button { - list-style-image: url("chrome://browser/skin/social/services-16.png"); - margin: 0; - padding: 2px; - height: 21px; - width: 21px; - border: 1px solid #ccc; - border-bottom: none; - background-color: #d9d9d9; - background-image: linear-gradient(rgba(255, 255, 255, 0.43), transparent); - border-top-left-radius: 3px; - border-top-right-radius: 3px; } - -@media (min-resolution: 2dppx) { - .chatbar-button { - list-style-image: url("chrome://browser/skin/social/services-16@2x.png"); } } -.chatbar-button:hover, -.chatbar-button[open="true"] { - background-color: #f0f0f0; } - -.chatbar-button[activity]:not([open]) { - background-image: radial-gradient(circle farthest-corner at center 2px, #fefeff 3%, rgba(210, 235, 255, 0.9) 12%, rgba(148, 205, 253, 0.6) 30%, rgba(148, 205, 253, 0.2) 70%); } - -.chatbar-button > .toolbarbutton-icon { - width: 16px; } - -.chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon { - width: auto; - height: auto; - max-height: 16px; - max-width: 16px; } - -.chatbar-button[open="true"] { - box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), 0 1px rgba(255, 255, 255, 0.2); } - -.chatbar-button > .toolbarbutton-text, -.chatbar-button > .toolbarbutton-menu-dropmarker { - display: none; } - -.chatbar-button > menupopup > menuitem[activity] { - font-weight: bold; } - -.chatbar-innerbox { - background: transparent; - overflow: hidden; } - -chatbar { - margin-inline-end: 20px; } - -chatbox { - margin-inline-start: 4px; - background-color: transparent; } - -chatbar > chatbox { - /* Apply the same border-radius as the .chat-titlebar to make the box-shadow - go round nicely. */ - border-top-left-radius: 4px; - border-top-right-radius: 4px; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); - /* Offset the chatbox the same amount as the box-shadows' spread, to make it - visible. */ - margin-inline-end: 5px; } - -window > chatbox { - margin-inline-start: 0px; - margin: 0px; - border: none; - padding: 0px; - border-radius: 4px; } - /* Customization mode */ /* 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 @@ -4003,14 +3548,14 @@ window > chatbox { #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before, #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before, #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before { - outline-color: #666666; } + outline-color: currentColor; } #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before { transition: outline-color 250ms linear; } #PanelUI-contents[showoutline=true] > .panel-customization-placeholder { transition: outline-color 250ms linear; - outline-color: #bbb; } + outline-color: var(--panel-separator-color); } #PanelUI-contents > .panel-customization-placeholder { cursor: auto; @@ -4022,8 +3567,8 @@ window > chatbox { padding-right: 10px; } #customization-container { - background-color: #f7f7f7; - color: black; + background-color: -moz-field; + color: -moz-fieldText; text-shadow: none; } #customization-palette, @@ -4033,11 +3578,11 @@ window > chatbox { #customization-header { font-size: 1.75em; line-height: 1.75em; - color: #666; + color: GrayText; font-weight: 200; margin: 25px 25px 12px; padding-bottom: 12px; - border-bottom: 1px solid #e5e5e5; } + border-bottom: 1px solid ThreeDLightShadow; } #customization-panel-container { padding: 15px 25px 25px; @@ -4045,32 +3590,12 @@ window > chatbox { #main-window:-moz-any([customize-entering], [customize-entered]) #browser-bottombox, #customization-footer { - background-color: #ececec; } + background-color: -moz-dialog; } #customization-footer { - border-top: 1px solid #dddddd; + border-top: 1px solid ThreeDLightShadow; padding: 10px; } -.customizationmode-button { - border: 1px solid silver; - border-radius: 3px; - margin: 5px; - padding: 2px 12px; - background-color: #fbfbfb; - color: #474747; - box-shadow: 0 1px rgba(255, 255, 255, 0.5), inset 0 1px rgba(255, 255, 255, 0.5); - -moz-appearance: none; } - -#customization-titlebar-visibility-button[checked], -#customization-devedition-theme-button[checked] { - background-color: #dadada; - border-color: #a8a8a8; - text-shadow: 0 1px #ececec; - box-shadow: 0 1px rgba(255, 255, 255, 0.5), inset 0 1px #c4c4c4; } - -.customizationmode-button[disabled="true"] { - opacity: .5; } - .customizationmode-button > .box-inherit > .box-inherit > .button-icon, .customizationmode-button > .button-box > .button-icon { height: 24px; } @@ -4079,10 +3604,6 @@ window > chatbox { list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png"); -moz-image-region: rect(0, 24px, 24px, 0); } -#customization-lwtheme-button, -#customization-titlebar-visibility-button { - padding: 2px 7px; } - #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text, #customization-titlebar-visibility-button > .button-box > .button-text { /* Sadly, button.css thinks its margins are perfect for everyone. */ @@ -4175,7 +3696,7 @@ toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring, toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { /* Delay adding the focusring back until after the transform transition completes. */ transition: outline-width 0.01s linear var(--drag-drop-transition-duration); - outline: 1px dotted rgba(0, 0, 0, 0.5); + outline: 1px dotted; -moz-outline-radius: 2.5px; } toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { @@ -4245,12 +3766,12 @@ toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { .customization-lwtheme-menu-theme[active="true"], .customization-lwtheme-menu-theme:hover { - background-color: rgba(24, 26, 27, 0.08); - border-color: rgba(24, 26, 27, 0.11); } + background-color: var(--arrowpanel-dimmed); + border-color: var(--panel-separator-color); } .customization-lwtheme-menu-theme[active="true"], .customization-lwtheme-menu-theme:hover:active { - background-color: rgba(24, 26, 27, 0.15); } + background-color: var(--arrowpanel-dimmed-further); } .customization-lwtheme-menu-theme > .toolbarbutton-icon { margin: 5px; } @@ -4266,38 +3787,37 @@ toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { #customization-lwtheme-menu-header, #customization-lwtheme-menu-recommended, #customization-lwtheme-menu-footer { - background-color: rgba(24, 26, 27, 0.05); - color: gray; + background-color: var(--arrowpanel-dimmed); margin-right: -10px; margin-left: -10px; } #customization-lwtheme-menu-header { margin-top: -10px; - border-bottom: 1px solid rgba(24, 26, 27, 0.05); } + border-bottom: 1px solid var(--arrowpanel-dimmed); } #customization-lwtheme-menu-recommended { - border-top: 1px solid rgba(24, 26, 27, 0.05); - border-bottom: 1px solid rgba(24, 26, 27, 0.05); } + border-top: 1px solid var(--arrowpanel-dimmed); + border-bottom: 1px solid var(--arrowpanel-dimmed); } #customization-lwtheme-menu-footer { - background: linear-gradient(rgba(24, 26, 27, 0.05) 60%, transparent) border-box; - border-top: 1px solid rgba(24, 26, 27, 0.05); + background: linear-gradient(var(--arrowpanel-dimmed) 60%, transparent) border-box; + border-top: 1px solid var(--arrowpanel-dimmed); margin-bottom: -10px; } .customization-lwtheme-menu-footeritem { -moz-appearance: none; -moz-box-flex: 1; - color: gray; + color: inherit; border-style: none; padding: 10px; margin-left: 0; margin-right: 0; } .customization-lwtheme-menu-footeritem:hover { - background: linear-gradient(rgba(24, 26, 27, 0.08) 40%, transparent) padding-box; } + background: linear-gradient(var(--arrowpanel-dimmed) 40%, transparent) padding-box; } .customization-lwtheme-menu-footeritem:first-child { - border-inline-end: 1px solid rgba(24, 26, 27, 0.15); } + border-inline-end: 1px solid var(--panel-separator-color); } /* 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 @@ -4417,9 +3937,11 @@ toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { /* UI Tour */ #UITourHighlightContainer { -moz-appearance: none; + -moz-window-shadow: none; border: none; background-color: transparent; - /* This is a buffer to compensate for the movement in the "wobble" effect */ + /* This is a buffer to compensate for the movement in the "wobble" effect, + and for the box-shadow of #UITourHighlight. */ padding: 4px; } #UITourHighlight { @@ -4670,70 +4192,36 @@ notification.heartbeat { #context-navigation > .menuitem-iconic > .menu-iconic-left { -moz-appearance: none; } +#context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon { + width: 16px; + height: 16px; + margin: 7px; + filter: url(chrome://browser/skin/filters.svg#fill); + fill: currentColor; } + #context-back { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back"); } -#context-back[_moz-menuactive=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-active"); } - -#context-back[disabled=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-disabled"); } - #context-forward { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward"); } -#context-forward[_moz-menuactive=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-active"); } - -#context-forward[disabled=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-disabled"); } - #context-reload { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload"); } -#context-reload[_moz-menuactive=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-active"); } - -#context-reload[disabled=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-disabled"); } - #context-stop { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop"); } -#context-stop[_moz-menuactive=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-active"); } - -#context-stop[disabled=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-disabled"); } - #context-bookmarkpage { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark"); } -#context-bookmarkpage[_moz-menuactive=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-active"); } - -#context-bookmarkpage[disabled=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); } - #context-bookmarkpage[starred=true] { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); } -#context-bookmarkpage[starred=true][_moz-menuactive=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); } - -#context-bookmarkpage[starred=true][disabled=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); } - #context-back:-moz-locale-dir(rtl), #context-forward:-moz-locale-dir(rtl), #context-reload:-moz-locale-dir(rtl) { transform: scaleX(-1); } -#context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon { - width: 16px; - height: 16px; - margin: 7px; } - #context-media-eme-learnmore { list-style-image: url("chrome://browser/skin/drm-icon.svg#chains"); } diff --git a/arc-firefox-theme/chrome/browser/sass/browser-darker.css b/arc-firefox-theme/chrome/browser/sass/browser-darker.css index e97361a..c7127da 100644 --- a/arc-firefox-theme/chrome/browser/sass/browser-darker.css +++ b/arc-firefox-theme/chrome/browser/sass/browser-darker.css @@ -18,6 +18,9 @@ --toolbarbutton-combined-backgroundimage: linear-gradient(rgba(23, 51, 79, 0.2) 0, rgba(23, 51, 79, 0.2) 18px); --verified-identity-box-backgroundcolor: transparent; --panel-separator-color: ThreeDShadow; + --arrowpanel-dimmed: rgba(204, 204, 204, 0.3); + --arrowpanel-dimmed-further: rgba(204, 204, 204, 0.45); + --arrowpanel-dimmed-even-further: rgba(204, 204, 204, 0.8); --urlbar-separator-color: rgba(41, 41, 41, 0.2); } #menubar-items { @@ -470,9 +473,6 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { #aboutName { list-style-image: url("moz-icon://stock/gtk-about?size=menu"); } -#javascriptConsole { - list-style-image: url("chrome://global/skin/console/console.png"); } - /* Primary toolbar buttons */ :-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1 > .toolbarbutton-icon, :-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1 > :-moz-any(.toolbarbutton-menubutton-button, .toolbarbutton-badge-stack) > .toolbarbutton-icon { @@ -940,353 +940,151 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { } */ /* Menu panel and palette styles */ -:root { - --menupanel-list-style-image: url(chrome://browser/skin/menuPanel.png); - --menupanel-list-style-image-2x: url(chrome://browser/skin/menuPanel@2x.png); - --menupanel-small-list-style-image: url(chrome://browser/skin/menuPanel-small.png); - --menupanel-small-list-style-image-2x: url(chrome://browser/skin/menuPanel-small@2x.png); } - -@media not all and (min-resolution: 1.1dppx) { - toolbaritem[sdkstylewidget="true"] > toolbarbutton, - :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) { - list-style-image: var(--menupanel-list-style-image); } - - #home-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #home-button { - -moz-image-region: rect(0px, 128px, 32px, 96px); } - - #bookmarks-menu-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #bookmarks-menu-button { - -moz-image-region: rect(0px, 192px, 32px, 160px); } - - #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 192px, 64px, 160px); } - - #history-panelmenu[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #history-panelmenu { - -moz-image-region: rect(0px, 224px, 32px, 192px); } - - #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 224px, 64px, 192px); } - - #downloads-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #downloads-button { - -moz-image-region: rect(0px, 256px, 32px, 224px); } - - #add-ons-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #add-ons-button { - -moz-image-region: rect(0px, 288px, 32px, 256px); } - - #open-file-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #open-file-button { - -moz-image-region: rect(0px, 320px, 32px, 288px); } - - #save-page-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #save-page-button { - -moz-image-region: rect(0px, 352px, 32px, 320px); } - - #sync-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sync-button { - -moz-image-region: rect(0px, 1024px, 32px, 992px); } - - #sync-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 1024px, 64px, 992px); } - - #containers-panelmenu[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #containers-panelmenu { - -moz-image-region: rect(0px, 1056px, 32px, 1024px); } - - #containers-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 1056px, 64px, 1024px); } - - #feed-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #feed-button { - -moz-image-region: rect(0px, 416px, 32px, 384px); } - - #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 416px, 64px, 384px); } - - #social-share-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #social-share-button { - -moz-image-region: rect(0px, 448px, 32px, 416px); } - - #characterencoding-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #characterencoding-button { - -moz-image-region: rect(0px, 480px, 32px, 448px); } - - #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 480px, 64px, 448px); } - - #new-window-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-window-button { - -moz-image-region: rect(0px, 512px, 32px, 480px); } - - #e10s-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #e10s-button { - -moz-image-region: rect(0px, 512px, 32px, 480px); } - - #new-tab-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-tab-button { - -moz-image-region: rect(0px, 544px, 32px, 512px); } - - #privatebrowsing-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #privatebrowsing-button { - -moz-image-region: rect(0px, 576px, 32px, 544px); } - - #find-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #find-button { - -moz-image-region: rect(0px, 640px, 32px, 608px); } - - #print-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #print-button { - -moz-image-region: rect(0px, 672px, 32px, 640px); } - - #fullscreen-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #fullscreen-button { - -moz-image-region: rect(0px, 704px, 32px, 672px); } - - #developer-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #developer-button { - -moz-image-region: rect(0px, 736px, 32px, 704px); } - - #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 736px, 64px, 704px); } - - #preferences-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #preferences-button { - -moz-image-region: rect(0px, 768px, 32px, 736px); } - - #email-link-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #email-link-button { - -moz-image-region: rect(0, 800px, 32px, 768px); } - - #sidebar-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sidebar-button { - -moz-image-region: rect(0, 864px, 32px, 832px); } - - #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 864px, 64px, 832px); } - - #panic-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #panic-button { - -moz-image-region: rect(0, 896px, 32px, 864px); } - - #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 896px, 64px, 864px); } - - #webide-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #webide-button { - -moz-image-region: rect(0px, 960px, 32px, 928px); } - - toolbaritem[sdkstylewidget="true"] > toolbarbutton { - -moz-image-region: rect(0, 832px, 32px, 800px); } - - /* Wide panel control icons */ - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton, - toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton { - list-style-image: var(--menupanel-small-list-style-image); } - - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button { - -moz-image-region: rect(0px, 32px, 16px, 16px); } - - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button { - -moz-image-region: rect(0px, 48px, 16px, 32px); } - - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button { - -moz-image-region: rect(0px, 64px, 16px, 48px); } - - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button { - -moz-image-region: rect(0px, 80px, 16px, 64px); } - - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { - -moz-image-region: rect(0px, 96px, 16px, 80px); } - - #add-share-provider { - list-style-image: url(chrome://browser/skin/menuPanel-small.png); - -moz-image-region: rect(0px, 96px, 16px, 80px); } } -/* Menu panel and palette styles */ -@media (min-resolution: 1.1dppx) { - toolbaritem[sdkstylewidget="true"] > toolbarbutton, - :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) { - list-style-image: var(--menupanel-list-style-image-2x); } - - #home-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #home-button { - -moz-image-region: rect(0px, 256px, 64px, 192px); } - - #bookmarks-menu-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #bookmarks-menu-button { - -moz-image-region: rect(0px, 384px, 64px, 320px); } - - #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 384px, 128px, 320px); } - - #history-panelmenu[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #history-panelmenu { - -moz-image-region: rect(0px, 448px, 64px, 384px); } - - #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 448px, 128px, 384px); } - - #downloads-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #downloads-button { - -moz-image-region: rect(0px, 512px, 64px, 448px); } - - #add-ons-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #add-ons-button { - -moz-image-region: rect(0px, 576px, 64px, 512px); } - - #open-file-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #open-file-button { - -moz-image-region: rect(0px, 640px, 64px, 576px); } - - #save-page-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #save-page-button { - -moz-image-region: rect(0px, 704px, 64px, 640px); } +toolbaritem[sdkstylewidget="true"] > toolbarbutton, +:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) { + list-style-image: url(chrome://browser/skin/menuPanel.svg); } + +:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-icon, +:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-badge-stack > .toolbarbutton-icon, +:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon { + filter: url(chrome://browser/skin/filters.svg#fill); + fill: currentColor; } - #sync-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sync-button { - -moz-image-region: rect(0px, 2048px, 64px, 1984px); } +#home-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #home-button { + -moz-image-region: rect(0px, 128px, 32px, 96px); } - #sync-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 2048px, 128px, 1984px); } +#bookmarks-menu-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #bookmarks-menu-button { + -moz-image-region: rect(0px, 192px, 32px, 160px); } - #containers-panelmenu[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #containers-panelmenu { - -moz-image-region: rect(0px, 2112px, 64px, 2048px); } +#history-panelmenu[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #history-panelmenu { + -moz-image-region: rect(0px, 224px, 32px, 192px); } - #containers-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 2112px, 128px, 2048px); } +#downloads-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #downloads-button { + -moz-image-region: rect(0px, 256px, 32px, 224px); } - #feed-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #feed-button { - -moz-image-region: rect(0px, 832px, 64px, 768px); } +#add-ons-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #add-ons-button { + -moz-image-region: rect(0px, 288px, 32px, 256px); } - #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 832px, 128px, 768px); } +#open-file-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #open-file-button { + -moz-image-region: rect(0px, 320px, 32px, 288px); } - #social-share-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #social-share-button { - -moz-image-region: rect(0px, 896px, 64px, 832px); } +#save-page-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #save-page-button { + -moz-image-region: rect(0px, 352px, 32px, 320px); } - #characterencoding-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #characterencoding-button { - -moz-image-region: rect(0, 960px, 64px, 896px); } +#sync-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #sync-button { + -moz-image-region: rect(0px, 1024px, 32px, 992px); } - #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 960px, 128px, 896px); } +#containers-panelmenu[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #containers-panelmenu { + -moz-image-region: rect(0px, 1056px, 32px, 1024px); } - #new-window-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-window-button { - -moz-image-region: rect(0px, 1024px, 64px, 960px); } +#feed-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #feed-button { + -moz-image-region: rect(0px, 416px, 32px, 384px); } - #e10s-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #e10s-button { - -moz-image-region: rect(0px, 1024px, 64px, 960px); } +#social-share-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #social-share-button { + -moz-image-region: rect(0px, 448px, 32px, 416px); } - #webide-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #webide-button { - -moz-image-region: rect(0px, 1920px, 64px, 1856px); } +#characterencoding-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #characterencoding-button { + -moz-image-region: rect(0px, 480px, 32px, 448px); } - #new-tab-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-tab-button { - -moz-image-region: rect(0px, 1088px, 64px, 1024px); } +#new-window-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #new-window-button { + -moz-image-region: rect(0px, 512px, 32px, 480px); } - #privatebrowsing-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #privatebrowsing-button { - -moz-image-region: rect(0px, 1152px, 64px, 1088px); } +#e10s-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #e10s-button { + -moz-image-region: rect(0px, 512px, 32px, 480px); } - #find-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #find-button { - -moz-image-region: rect(0px, 1280px, 64px, 1216px); } +#new-tab-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #new-tab-button { + -moz-image-region: rect(0px, 544px, 32px, 512px); } - #print-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #print-button { - -moz-image-region: rect(0px, 1344px, 64px, 1280px); } +#privatebrowsing-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #privatebrowsing-button { + -moz-image-region: rect(0px, 576px, 32px, 544px); } - #fullscreen-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #fullscreen-button { - -moz-image-region: rect(0px, 1408px, 64px, 1344px); } +#find-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #find-button { + -moz-image-region: rect(0px, 640px, 32px, 608px); } - #developer-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #developer-button { - -moz-image-region: rect(0px, 1472px, 64px, 1408px); } +#print-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #print-button { + -moz-image-region: rect(0px, 672px, 32px, 640px); } - #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 1472px, 128px, 1408px); } +#fullscreen-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #fullscreen-button { + -moz-image-region: rect(0px, 704px, 32px, 672px); } - #preferences-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #preferences-button { - -moz-image-region: rect(0px, 1536px, 64px, 1472px); } +#developer-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #developer-button { + -moz-image-region: rect(0px, 736px, 32px, 704px); } - #email-link-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #email-link-button { - -moz-image-region: rect(0px, 1600px, 64px, 1536px); } +#preferences-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #preferences-button { + -moz-image-region: rect(0px, 768px, 32px, 736px); } - #sidebar-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sidebar-button { - -moz-image-region: rect(0px, 1728px, 64px, 1664px); } +#email-link-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #email-link-button { + -moz-image-region: rect(0, 800px, 32px, 768px); } - #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 1728px, 128px, 1664px); } +#sidebar-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #sidebar-button { + -moz-image-region: rect(0, 864px, 32px, 832px); } - #panic-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #panic-button { - -moz-image-region: rect(0, 1792px, 64px, 1728px); } +#panic-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #panic-button { + -moz-image-region: rect(0, 896px, 32px, 864px); } - #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 1792px, 128px, 1728px); } +#webide-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #webide-button { + -moz-image-region: rect(0px, 960px, 32px, 928px); } - toolbaritem[sdkstylewidget="true"] > toolbarbutton { - -moz-image-region: rect(0, 1664px, 64px, 1600px); } +toolbaritem[sdkstylewidget="true"] > toolbarbutton { + -moz-image-region: rect(0, 832px, 32px, 800px); } - #add-share-provider { - list-style-image: url(chrome://browser/skin/menuPanel-small@2x.png); - -moz-image-region: rect(0px, 192px, 32px, 160px); } +/* Wide panel control icons */ +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, +#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, +toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton, +toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton { + list-style-image: url(chrome://browser/skin/menuPanel-small.svg); } - /* Footer and wide panel control icons */ - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton, - toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton { - list-style-image: var(--menupanel-small-list-style-image-2x); } +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button, +toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button { + -moz-image-region: rect(0px, 32px, 16px, 16px); } - /* Wide items like the Cut/Copy/Paste and Zoom controls are special in that their icons - are 16x16 when in the panel, but 18x18 when in a toolbar. */ - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon, - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon, - toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon, - toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon { - width: 16px; } +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button, +toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button { + -moz-image-region: rect(0px, 48px, 16px, 32px); } - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button { - -moz-image-region: rect(0px, 64px, 32px, 32px); } +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button, +toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button { + -moz-image-region: rect(0px, 64px, 16px, 48px); } - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button { - -moz-image-region: rect(0px, 96px, 32px, 64px); } +#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button, +toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button { + -moz-image-region: rect(0px, 80px, 16px, 64px); } - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button { - -moz-image-region: rect(0px, 128px, 32px, 96px); } +#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button, +toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { + -moz-image-region: rect(0px, 96px, 16px, 80px); } - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button { - -moz-image-region: rect(0px, 160px, 32px, 128px); } +#add-share-provider { + list-style-image: url(chrome://browser/skin/menuPanel-small.svg); + -moz-image-region: rect(0px, 96px, 16px, 80px); } - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { - -moz-image-region: rect(0px, 192px, 32px, 160px); } } #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon, #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker, #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker, @@ -1385,9 +1183,43 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { width: 16px; height: 16px; } +/* ::::: URL Bar Zoom Reset Button ::::: */ +@keyframes urlbar-zoom-reset-pulse { + 0% { + transform: scale(0); } + 75% { + transform: scale(1.5); } + 100% { + transform: scale(1); } } +#urlbar-zoom-button { + -moz-appearance: none; + margin: 0 3px; + font-size: .8em; + padding: 0 8px; + border-radius: 1em; + background-color: rgba(0, 0, 0, 0.05); + color: inherit; + border: 1px solid ThreeDLightShadow; } + +#urlbar-zoom-button[animate="true"] { + animation-name: urlbar-zoom-reset-pulse; + animation-duration: 250ms; } + +#urlbar-zoom-button:hover { + background-color: rgba(0, 0, 0, 0.1); } + +#urlbar-zoom-button:hover:active { + background-color: rgba(0, 0, 0, 0.15); } + +#urlbar-zoom-button > .toolbarbutton-text { + display: -moz-box; } + +#urlbar-zoom-button > .toolbarbutton-icon { + display: none; } + #urlbar-search-footer { - border-top: 1px solid rgba(24, 26, 27, 0.14); - background-color: rgba(24, 26, 27, 0.07); } + border-top: 1px solid var(--panel-separator-color); + background-color: var(--arrowpanel-dimmed); } #urlbar-search-settings { -moz-appearance: none; @@ -1399,10 +1231,10 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { background: transparent; } #urlbar-search-settings:hover { - background-color: rgba(24, 26, 27, 0.07); } + background-color: var(--arrowpanel-dimmed); } #urlbar-search-settings:hover:active { - background-color: rgba(24, 26, 27, 0.12); } + background-color: var(--arrowpanel-dimmed-further); } #urlbar-search-splitter { -moz-appearance: none; @@ -1419,7 +1251,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { color: GrayText; } #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] { - border-bottom: 1px solid rgba(24, 26, 27, 0.14); + border-bottom: 1px solid var(--panel-separator-color); background-color: rgba(24, 26, 27, 0.07); padding: 6px 0; padding-inline-start: 44px; @@ -1476,13 +1308,98 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { border-top-right-radius: 1.5px; border-bottom-right-radius: 1.5px; } -#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: 1px dotted; outline-offset: -3px; } +#identity-icon { + list-style-image: url(chrome://browser/skin/identity-icon.svg#normal); } + +#identity-box:hover > #identity-icon:not(.no-hover), +#identity-box[open=true] > #identity-icon { + list-style-image: url(chrome://browser/skin/identity-icon.svg#hover); } + +#identity-box.grantedPermissions > #identity-icon { + list-style-image: url(chrome://browser/skin/identity-icon.svg#notice); } + +#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover), +#identity-box.grantedPermissions[open=true] > #identity-icon { + list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover); } + +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon { + list-style-image: url(chrome://branding/content/identity-icons-brand.svg); } + +#tracking-protection-icon { + list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled); } + +#tracking-protection-icon[state="loaded-tracking-content"] { + list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled); } + +#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon { + list-style-image: url(chrome://browser/skin/connection-secure.svg); + visibility: visible; } + +#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon { + list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon); + visibility: visible; } + +#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon { + list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon); + visibility: visible; } + +#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon { + list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon); + visibility: visible; } + +#identity-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/identity-icon.svg#normal-black); } + +#identity-box:hover > #identity-icon:not(.no-hover):-moz-lwtheme, +#identity-box[open=true] > #identity-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/identity-icon.svg#hover-black); } + +#identity-box.grantedPermissions > #identity-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-black); } + +#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover):-moz-lwtheme, +#identity-box.grantedPermissions[open=true] > #identity-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover-black); } + +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon:-moz-lwtheme { + list-style-image: url(chrome://branding/content/identity-icons-brand.svg); } + +#tracking-protection-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled-black); } + +#tracking-protection-icon[state="loaded-tracking-content"]:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled-black); } + +#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon:-moz-lwtheme, +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon:-moz-lwtheme, +#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/connection-secure.svg); + visibility: visible; } + +#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon-black); + visibility: visible; } + +#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon:-moz-lwtheme, +#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon-black); + visibility: visible; } + +#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon:-moz-lwtheme, +#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon:-moz-lwtheme, +#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon-black); + visibility: visible; } + #identity-box { --identity-box-verified-color: #479900; --identity-box-chrome-color: #e57300; @@ -1511,44 +1428,53 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { /* MAIN IDENTITY ICON */ #identity-icon { width: 16px; - height: 16px; - list-style-image: url(chrome://browser/skin/identity-icon.svg#normal); } - -#identity-box:hover > #identity-icon:not(.no-hover), -#identity-box[open=true] > #identity-icon { - list-style-image: url(chrome://browser/skin/identity-icon.svg#hover); } - -#identity-box.grantedPermissions > #identity-icon { - list-style-image: url(chrome://browser/skin/identity-icon.svg#notice); } - -#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover), -#identity-box.grantedPermissions[open=true] > #identity-icon { - list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover); } - -#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon { - list-style-image: url(chrome://branding/content/identity-icons-brand.svg); } + height: 16px; } #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon { - opacity: 0.3; } + opacity: .3; } #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon { -moz-image-region: inherit; list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); + width: 16px; + height: 16px; } + +/* SHARING ICON */ +#sharing-icon { width: 16px; height: 16px; - opacity: 1; } + margin-inline-start: -16px; + position: relative; + display: none; } + +#identity-box[sharing="camera"] > #sharing-icon { + list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing"); } +#identity-box[sharing="microphone"] > #sharing-icon { + list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing"); } + +#identity-box[sharing="screen"] > #sharing-icon { + list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing"); } + +#identity-box[sharing] > #sharing-icon { + display: -moz-box; + animation-delay: -1.5s; } + +#identity-box[sharing] > #identity-icon, +#sharing-icon { + animation: 3s linear pulse infinite; } + +@keyframes pulse { + 0%, 16.66%, 83.33%, 100% { + opacity: 0; } + 33.33%, 66.66% { + opacity: 1; } } /* TRACKING PROTECTION ICON */ #tracking-protection-icon { width: 16px; height: 16px; margin-inline-start: 2px; - margin-inline-end: 0; - list-style-image: url(chrome://browser/skin/tracking-protection-16.svg); - opacity: 1; } - -#tracking-protection-icon[state="loaded-tracking-content"] { - list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg); } + margin-inline-end: 0; } #tracking-protection-icon[animate] { transition: margin-left 200ms ease-out, margin-right 200ms ease-out; } @@ -1570,40 +1496,22 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { margin-inline-start: 2px; visibility: collapse; } -#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon, -#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon, -#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon { - list-style-image: url(chrome://browser/skin/identity-secure.svg); - visibility: visible; } - -#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon { - list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg); - visibility: visible; } - -#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon, -#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon { - list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg); - visibility: visible; } - -#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon, -#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon, -#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon { - list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg); - visibility: visible; } - #notification-popup-box { padding: 5px 0px; margin: -5px 0px; margin-inline-end: -5px; padding-inline-end: 5px; } +.notification-anchor-icon, +#blocked-permissions-container > .blocked-permission-icon { + width: 16px; + height: 16px; + margin-inline-start: 2px; } + /* This class can be used alone or in combination with the class defining the type of icon displayed. This rule must be defined before the others in order for its list-style-image to be overridden. */ .notification-anchor-icon { - width: 16px; - height: 16px; - margin-inline-start: 2px; list-style-image: url(moz-icon://stock/gtk-dialog-info?size=16); } @media (min-resolution: 1.1dppx) { @@ -1614,57 +1522,26 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { height: 64px; margin-inline-end: 10px; } -#notification-popup-box > .notification-anchor-icon:not(.in-use):hover { - fill: #606060; } - -/* INDIVIDUAL NOTIFICATIONS */ -/* For the moment we apply the color filter only on the icons listed here. - The first two selectors are used by socialchat.xml (bug 1275558). */ -.webRTC-sharingDevices-notification-icon, -.webRTC-sharingMicrophone-notification-icon, -.camera-icon, -.geo-icon, -.indexedDB-icon, -.install-icon, -.login-icon, -.microphone-icon, -.plugin-icon, -.pointerLock-icon, -.popup-icon, -.screen-icon, -.desktop-notification-icon, -.popup-notification-icon[popupid="geolocation"], -.popup-notification-icon[popupid="indexedDB-permissions-prompt"], -.popup-notification-icon[popupid="password"], -.popup-notification-icon[popupid="pointerLock"], -.popup-notification-icon[popupid="webRTC-shareDevices"], -.popup-notification-icon[popupid="webRTC-shareMicrophone"], -.popup-notification-icon[popupid="webRTC-shareScreen"], -.popup-notification-icon[popupid="webRTC-sharingDevices"], -.popup-notification-icon[popupid="webRTC-sharingMicrophone"], -.popup-notification-icon[popupid="webRTC-sharingScreen"], -.popup-notification-icon[popupid="web-notifications"] { +.notification-anchor-icon:not(.plugin-blocked):-moz-lwtheme, +#blocked-permissions-container > .blocked-permission-icon:-moz-lwtheme { filter: url(chrome://browser/skin/filters.svg#fill); - fill: #999; } + fill: currentColor; } -/* The first two selectors are used by socialchat.xml (bug 1275558). The - notifications in the chat window are only shown when they are in use. */ -.webRTC-sharingDevices-notification-icon, -.webRTC-sharingMicrophone-notification-icon, -.in-use { - fill: #fea01b; } +.notification-anchor-icon:not(.plugin-blocked):not(:hover) { + opacity: .8; } +/* INDIVIDUAL NOTIFICATIONS */ .popup-notification-icon[popupid="web-notifications"], .desktop-notification-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification); } -.desktop-notification-icon.blocked { +.desktop-notification-icon.blocked-permission-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked); } .geo-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-linux); } -.geo-icon.blocked { +.geo-icon.blocked-permission-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-linux-blocked); } .popup-notification-icon[popupid="geolocation"] { @@ -1674,7 +1551,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { .indexedDB-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB); } -.indexedDB-icon.blocked { +.indexedDB-icon.blocked-permission-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked); } .login-icon { @@ -1683,46 +1560,37 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { .popup-notification-icon[popupid="password"] { list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed); } -#login-fill-notification-icon { - /* Temporary solution until the capture and fill doorhangers are unified. */ - transform: scaleX(-1); } - -/* The first selector is used by socialchat.xml (bug 1275558). */ -.webRTC-sharingDevices-notification-icon, .camera-icon, -.popup-notification-icon[popupid="webRTC-shareDevices"], -.popup-notification-icon[popupid="webRTC-sharingDevices"] { +.popup-notification-icon[popupid="webRTC-shareDevices"] { list-style-image: url(chrome://browser/skin/notification-icons.svg#camera); } -.camera-icon.blocked { +.camera-icon.in-use { + list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-sharing); } + +.camera-icon.blocked-permission-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked); } -/* The first selector is used by socialchat.xml (bug 1275558). */ -.webRTC-sharingMicrophone-notification-icon, .microphone-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone); } -.microphone-icon.blocked { +.microphone-icon.in-use { + list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-sharing); } + +.microphone-icon.blocked-permission-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked); } -.popup-notification-icon[popupid="webRTC-shareMicrophone"], -.popup-notification-icon[popupid="webRTC-sharingMicrophone"] { +.popup-notification-icon[popupid="webRTC-shareMicrophone"] { list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed); } .popup-notification-icon[popupid="webRTC-shareScreen"], -.popup-notification-icon[popupid="webRTC-sharingScreen"], .screen-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#screen); } -.screen-icon.blocked { - list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked); } +.screen-icon.in-use { + list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-sharing); } -.popup-notification-icon[popupid="pointerLock"], -.pointerLock-icon { - list-style-image: url(chrome://browser/skin/notification-icons.svg#pointerLock); } - -.pointerLock-icon.blocked { - list-style-image: url(chrome://browser/skin/notification-icons.svg#pointerLock-blocked); } +.screen-icon.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked); } /* This icon has a block sign in it, so we don't need a blocked version. */ .popup-icon { @@ -1788,9 +1656,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin); } .plugin-icon.plugin-blocked { - list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked); - fill: #d92215 !important; - /* important! to override the default hover color */ } + list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked); } #notification-popup-box[hidden] { /* Override display:none to make the pluginBlockedNotification animation work @@ -2155,6 +2021,21 @@ html|span.ac-emphasize-text-url { -moz-image-region: rect(0, 48px, 16px, 32px); } /* social share panel */ +#manage-share-providers { + list-style-image: url("chrome://browser/skin/Toolbar.png"); + -moz-image-region: rect(0, 468px, 18px, 450px); } + +#manage-share-providers > .toolbarbutton-icon { + min-height: 18px; + min-width: 18px; } + +.social-panel > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; } + +/* fixup corners for share panel */ +.social-panel > .social-panel-frame { + border-radius: inherit; } + .social-share-frame { border-top: 1px solid #f8f8f8; width: 756px; @@ -2196,10 +2077,6 @@ html|span.ac-emphasize-text-url { min-height: 16px; max-height: 16px; } -/* social recommending panel */ -#social-mark-button { - -moz-image-region: rect(0, 16px, 16px, 0); } - /* bookmarks menu-button */ #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker { -moz-appearance: none !important; @@ -2353,7 +2230,7 @@ html|span.ac-emphasize-text-url { color: #5c616c; } /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */ -.tabbrowser-tab[selected=true] { +.tabbrowser-tab[visuallyselected=true] { position: relative; z-index: 2; } @@ -2406,17 +2283,13 @@ html|span.ac-emphasize-text-url { position: relative; } .tab-sharing-icon-overlay[sharing="camera"] { - list-style-image: url("chrome://browser/skin/notification-icons.svg#camera"); } + list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing"); } .tab-sharing-icon-overlay[sharing="microphone"] { - list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone"); } + list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing"); } .tab-sharing-icon-overlay[sharing="screen"] { - list-style-image: url("chrome://browser/skin/notification-icons.svg#screen"); } - -.tab-sharing-icon-overlay[sharing] { - filter: url("chrome://browser/skin/filters.svg#fill"); - fill: #e0291d; } + list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing"); } .tab-icon-overlay { width: 16px; @@ -2485,26 +2358,6 @@ html|span.ac-emphasize-text-url { .tab-icon-sound[selected=true][soundplaying] { list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio"); } -.tab-icon-sound:hover:-moz-lwtheme, -.tab-icon-sound[selected=true][soundplaying]:hover { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-hover"); } - -.tab-icon-sound:hover:active:-moz-lwtheme, -.tab-icon-sound[selected=true][soundplaying]:hover:active { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-pressed"); } - -.tab-icon-sound[muted]:-moz-lwtheme, -.tab-icon-sound[selected=true][muted] { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-muted"); } - -.tab-icon-sound[muted]:hover:-moz-lwtheme, -.tab-icon-sound[selected=true][muted]:hover { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-muted-hover"); } - -.tab-icon-sound[muted]:hover:active:-moz-lwtheme, -.tab-icon-sound[selected=true][muted]:hover:active { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-muted-pressed"); } - .tab-background, .tabs-newtab-button { /* overlap the tab curves */ @@ -2556,7 +2409,7 @@ html|span.ac-emphasize-text-url { min-height: var(--tab-min-height); width: 30px; } -.tabbrowser-tab:not([selected=true]), +.tabbrowser-tab:not([visuallyselected=true]), .tabbrowser-tab:-moz-lwtheme { color: inherit; } @@ -2802,22 +2655,6 @@ lwtHeader;*/ .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon { list-style-image: url("chrome://global/skin/icons/loading.png"); } -.alltabs-item[tabIsVisible] { - /* box-shadow instead of background-color to work around native styling */ - box-shadow: inset -5px 0 ThreeDShadow; } - -.alltabs-endimage[muted] { - list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-menu-muted); } - -.alltabs-endimage[soundplaying] { - list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-menu); } - -menuitem:hover > hbox > .alltabs-endimage[muted] { - list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-menu-muted-hover); } - -menuitem:hover > hbox > .alltabs-endimage[soundplaying] { - list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-menu-hover); } - /* Sidebar */ #sidebar-throbber[loading="true"] { list-style-image: url("chrome://global/skin/icons/loading.png"); @@ -2839,50 +2676,6 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker { toolbarbutton.chevron > .toolbarbutton-icon { margin: 0; } -/* Ctrl-Tab */ -#ctrlTab-panel { - -moz-appearance: none; - background: rgba(68, 68, 68, 0.7); - color: white; - border-style: none; - padding: 20px 10px 10px; - font-weight: bold; - text-shadow: 0 0 1px #444444, 0 0 2px #444444; } - -.ctrlTab-favicon[src] { - background-color: white; - width: 20px; - height: 20px; - padding: 2px; } - -.ctrlTab-preview-inner > .tabPreview-canvas { - box-shadow: 1px 1px 2px #1f1f1f; } - -.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas { - margin-bottom: 2px; } - -.ctrlTab-preview-inner { - padding-bottom: 10px; } - -#ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner { - padding: 10px; - background-color: rgba(255, 255, 255, 0.2); - border-radius: .5em; } - -.ctrlTab-preview:focus > * > .ctrlTab-preview-inner { - color: white; - background-color: rgba(0, 0, 0, 0.6); - text-shadow: none; - padding: 8px; - border: 2px solid white; - border-radius: .5em; } - -.ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner { - margin: -10px -10px 0; } - -#ctrlTab-showAll { - margin-top: .5em; } - /* Status panel */ .statuspanel-label { margin: 0; @@ -2944,21 +2737,49 @@ html|*.pointerlockfswarning-exit-button { font-size: 14px; font-weight: lighter; margin: 0; - box-sizing: content-box; - background-clip: padding-box; - border: 1px solid; - border-radius: 3px; - color: #BAC3CF; - border-color: rgba(26, 28, 34, 0.35); - background-color: rgba(102, 109, 132, 0.35); } - html|*.pointerlockfswarning-exit-button:hover { - color: #BAC3CF; - border-color: rgba(26, 28, 34, 0.35); - background-color: rgba(119, 127, 151, 0.45); } - html|*.pointerlockfswarning-exit-button:active, html|*.pointerlockfswarning-exit-button:checked { - color: #ffffff; - border-color: rgba(26, 28, 34, 0.35); - background-color: #5294E2; } + box-sizing: content-box; } + +/* Ctrl-Tab */ +#ctrlTab-panel { + -moz-appearance: none; + background: rgba(84, 84, 84, 0.85); + color: white; + border-style: none; + padding: 20px 10px 10px; + font-weight: bold; + text-shadow: 0 0 1px #1f1f1f, 0 0 2px #1f1f1f; } + +.ctrlTab-favicon[src] { + background-color: white; + width: 20px; + height: 20px; + padding: 2px; } + +.ctrlTab-preview-inner > .tabPreview-canvas { + box-shadow: 1px 1px 2px #1f1f1f; } + +.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas { + margin-bottom: 2px; } + +.ctrlTab-preview-inner { + padding: 8px; + border: 2px solid transparent; + border-radius: .5em; } + +.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner { + margin: -10px -10px 0; } + +#ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner { + background-color: rgba(255, 255, 255, 0.2); } + +.ctrlTab-preview:focus > * > .ctrlTab-preview-inner { + color: white; + background-color: rgba(0, 0, 0, 0.6); + text-shadow: none; + border-color: white; } + +#ctrlTab-showAll { + margin-top: .5em; } /* Responsive Mode */ .browserContainer[responsivemode] { @@ -3451,8 +3272,8 @@ html|*#gcli-output-frame { margin-inline-start: 6px; } .click-to-play-plugins-notification-button-container { - background-color: rgba(24, 26, 27, 0.07); - border-top: 1px solid rgba(24, 26, 27, 0.12); + background-color: var(--arrowpanel-dimmed); + border-top: 1px solid var(--panel-separator-color); padding: 10px; margin-top: 5px; } @@ -3470,9 +3291,7 @@ html|*#gcli-output-frame { margin: 0; } .messageImage[value="plugin-hidden"] { - list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin); - filter: url(chrome://browser/skin/filters.svg#fill); - fill: #808080; } + list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin); } /* Keep any changes to this style in sync with pluginProblem.css */ notification.pluginVulnerable { @@ -3481,77 +3300,11 @@ notification.pluginVulnerable { color: white; } notification.pluginVulnerable .messageImage { - list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked); - filter: url(chrome://browser/skin/filters.svg#fill); - fill: #d92215; } + list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked); } notification.pluginVulnerable > .notification-inner > .messageCloseButton:not(:hover) { background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 80, 16, 64); } -#notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent { - /* Since we display a sliding subview that extends to the border, we cannot - * keep the default padding of arrow panels. We use the same padding in the - * individual content views instead. Since we removed the padding, we also - * have to ensure the contents are clipped to the border box. */ - padding: 0; - overflow: hidden; } - -#login-fill-mainview, -#login-fill-details { - padding: var(--panel-arrowcontent-padding); } - -#login-fill-doorhanger[inDetailView] > #login-fill-mainview { - transform: translateX(-14px); } - -#login-fill-mainview, -#login-fill-details { - transition: transform 150ms; } - -#login-fill-doorhanger:not([inDetailView]) > #login-fill-details { - transform: translateX(105%); } - -#login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) { - transform: translateX(-105%); } - -#login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer { - background-color: rgba(24, 26, 27, 0.1); } - -#login-fill-testing { - color: #b33; - font-weight: bold; } - -#login-fill-list { - border: 1px solid black; - max-height: 20em; } - -.login-fill-item[disabled] { - color: #888; - background-color: #fff; } - -.login-fill-item[disabled][selected] { - background-color: #eef; } - -.login-hostname { - margin: 4px; - font-weight: bold; } - -.login-fill-item.different-hostname > .login-hostname { - color: #888; - font-style: italic; } - -.login-username { - margin: 4px; - color: #888; } - -#login-fill-details { - padding: 4px; - background: var(--panel-arrowcontent-background); - color: var(--panel-arrowcontent-color); - background-clip: padding-box; - border-left: 1px solid rgba(24, 26, 27, 0.3); - box-shadow: 0 3px 5px rgba(24, 26, 27, 0.1), 0 0 7px rgba(24, 26, 27, 0.1); - margin-inline-start: 38px; } - /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ @@ -3740,214 +3493,6 @@ toolbar[brighttext] #downloads-indicator-counter { border-radius: 1px; margin-inline-end: 2px; } -/* social toolbar provider menu */ -#social-statusarea-popup { - margin-top: 0; - margin-left: -12px; - margin-right: -12px; } - -.social-statusarea-user { - list-style-image: url("chrome://global/skin/icons/information-32.png"); } - -.social-statusarea-user-portrait { - width: 32px; - height: 32px; - border-radius: 2px; - margin: 10px; } - -.social-panel > .panel-arrowcontainer > .panel-arrowcontent { - padding: 0; } - -#social-sidebar-header { - padding: 3px; } - -#manage-share-providers, -#social-sidebar-button { - list-style-image: url("chrome://browser/skin/Toolbar.png"); - -moz-image-region: rect(0, 468px, 18px, 450px); } - -#social-sidebar-button { - -moz-appearance: none; - border: none; - padding: 0; - margin: 2px; } - -#manage-share-providers > .toolbarbutton-icon, -#social-sidebar-button > .toolbarbutton-icon { - min-height: 18px; - min-width: 18px; } - -#social-sidebar-button > .toolbarbutton-menu-dropmarker { - display: none; } - -#social-sidebar-button[loading="true"] { - list-style-image: url("chrome://global/skin/icons/loading.png"); } - -#social-sidebar-favico { - max-height: 16px; - max-width: 16px; - padding: 0; - margin: 2px; } - -.chat-status-icon { - max-height: 16px; - max-width: 16px; - padding: 0; } - -.chat-toolbarbutton { - -moz-appearance: none; - border: none; - padding: 0 3px; - margin: 0; - background: none; } - -.chat-toolbarbutton > .toolbarbutton-text { - display: none; } - -.chat-toolbarbutton > .toolbarbutton-icon { - width: 16px; - height: 16px; } - -.chat-close-button { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close"); } - -.chat-close-button:hover { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-hover"); } - -.chat-close-button:hover:active { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-active"); } - -.chat-minimize-button { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize"); } - -.chat-minimize-button:hover { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-hover"); } - -.chat-minimize-button:hover:active { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-active"); } - -.chat-swap-button { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand"); - transform: rotate(180deg); } - -.chat-swap-button:hover { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-hover"); } - -.chat-swap-button:hover:active { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-active"); } - -chatbar > chatbox > .chat-titlebar > .chat-swap-button { - transform: none; } - -.chat-title { - color: #666; - text-shadow: none; - cursor: inherit; } - -.chat-titlebar { - height: 26px; - min-height: 26px; - width: 100%; - margin: 0; - padding: 5px 4px; - border: 1px solid #ebebeb; - border-bottom: 0; - border-top-left-radius: 4px; - border-top-right-radius: 4px; - cursor: pointer; - background-color: #ebebeb; } - -.chat-titlebar[selected] { - background-color: #f0f0f0; } - -.chat-titlebar > .notification-anchor-icon { - margin-left: 2px; - margin-right: 2px; } - -.chat-titlebar[minimized="true"] { - border-bottom: none; } - -.chat-titlebar[activity] { - background-image: radial-gradient(ellipse closest-side at center, white, transparent); - background-repeat: no-repeat; - background-size: 100% 20px; - background-position: 0 -10px; } - -.chat-frame { - padding: 0; - margin: 0; - overflow: hidden; } - -.chatbar-button { - list-style-image: url("chrome://browser/skin/social/services-16.png"); - margin: 0; - padding: 2px; - height: 21px; - width: 21px; - border: 1px solid #ccc; - border-bottom: none; - background-color: #d9d9d9; - background-image: linear-gradient(rgba(255, 255, 255, 0.43), transparent); - border-top-left-radius: 3px; - border-top-right-radius: 3px; } - -@media (min-resolution: 2dppx) { - .chatbar-button { - list-style-image: url("chrome://browser/skin/social/services-16@2x.png"); } } -.chatbar-button:hover, -.chatbar-button[open="true"] { - background-color: #f0f0f0; } - -.chatbar-button[activity]:not([open]) { - background-image: radial-gradient(circle farthest-corner at center 2px, #fefeff 3%, rgba(210, 235, 255, 0.9) 12%, rgba(148, 205, 253, 0.6) 30%, rgba(148, 205, 253, 0.2) 70%); } - -.chatbar-button > .toolbarbutton-icon { - width: 16px; } - -.chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon { - width: auto; - height: auto; - max-height: 16px; - max-width: 16px; } - -.chatbar-button[open="true"] { - box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), 0 1px rgba(255, 255, 255, 0.2); } - -.chatbar-button > .toolbarbutton-text, -.chatbar-button > .toolbarbutton-menu-dropmarker { - display: none; } - -.chatbar-button > menupopup > menuitem[activity] { - font-weight: bold; } - -.chatbar-innerbox { - background: transparent; - overflow: hidden; } - -chatbar { - margin-inline-end: 20px; } - -chatbox { - margin-inline-start: 4px; - background-color: transparent; } - -chatbar > chatbox { - /* Apply the same border-radius as the .chat-titlebar to make the box-shadow - go round nicely. */ - border-top-left-radius: 4px; - border-top-right-radius: 4px; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); - /* Offset the chatbox the same amount as the box-shadows' spread, to make it - visible. */ - margin-inline-end: 5px; } - -window > chatbox { - margin-inline-start: 0px; - margin: 0px; - border: none; - padding: 0px; - border-radius: 4px; } - /* Customization mode */ /* 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 @@ -4003,14 +3548,14 @@ window > chatbox { #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before, #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before, #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before { - outline-color: #666666; } + outline-color: currentColor; } #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before { transition: outline-color 250ms linear; } #PanelUI-contents[showoutline=true] > .panel-customization-placeholder { transition: outline-color 250ms linear; - outline-color: #bbb; } + outline-color: var(--panel-separator-color); } #PanelUI-contents > .panel-customization-placeholder { cursor: auto; @@ -4022,8 +3567,8 @@ window > chatbox { padding-right: 10px; } #customization-container { - background-color: #f7f7f7; - color: black; + background-color: -moz-field; + color: -moz-fieldText; text-shadow: none; } #customization-palette, @@ -4033,11 +3578,11 @@ window > chatbox { #customization-header { font-size: 1.75em; line-height: 1.75em; - color: #666; + color: GrayText; font-weight: 200; margin: 25px 25px 12px; padding-bottom: 12px; - border-bottom: 1px solid #e5e5e5; } + border-bottom: 1px solid ThreeDLightShadow; } #customization-panel-container { padding: 15px 25px 25px; @@ -4045,32 +3590,12 @@ window > chatbox { #main-window:-moz-any([customize-entering], [customize-entered]) #browser-bottombox, #customization-footer { - background-color: #ececec; } + background-color: -moz-dialog; } #customization-footer { - border-top: 1px solid #dddddd; + border-top: 1px solid ThreeDLightShadow; padding: 10px; } -.customizationmode-button { - border: 1px solid silver; - border-radius: 3px; - margin: 5px; - padding: 2px 12px; - background-color: #fbfbfb; - color: #474747; - box-shadow: 0 1px rgba(255, 255, 255, 0.5), inset 0 1px rgba(255, 255, 255, 0.5); - -moz-appearance: none; } - -#customization-titlebar-visibility-button[checked], -#customization-devedition-theme-button[checked] { - background-color: #dadada; - border-color: #a8a8a8; - text-shadow: 0 1px #ececec; - box-shadow: 0 1px rgba(255, 255, 255, 0.5), inset 0 1px #c4c4c4; } - -.customizationmode-button[disabled="true"] { - opacity: .5; } - .customizationmode-button > .box-inherit > .box-inherit > .button-icon, .customizationmode-button > .button-box > .button-icon { height: 24px; } @@ -4079,10 +3604,6 @@ window > chatbox { list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png"); -moz-image-region: rect(0, 24px, 24px, 0); } -#customization-lwtheme-button, -#customization-titlebar-visibility-button { - padding: 2px 7px; } - #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text, #customization-titlebar-visibility-button > .button-box > .button-text { /* Sadly, button.css thinks its margins are perfect for everyone. */ @@ -4175,7 +3696,7 @@ toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring, toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { /* Delay adding the focusring back until after the transform transition completes. */ transition: outline-width 0.01s linear var(--drag-drop-transition-duration); - outline: 1px dotted rgba(0, 0, 0, 0.5); + outline: 1px dotted; -moz-outline-radius: 2.5px; } toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { @@ -4245,12 +3766,12 @@ toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { .customization-lwtheme-menu-theme[active="true"], .customization-lwtheme-menu-theme:hover { - background-color: rgba(24, 26, 27, 0.08); - border-color: rgba(24, 26, 27, 0.11); } + background-color: var(--arrowpanel-dimmed); + border-color: var(--panel-separator-color); } .customization-lwtheme-menu-theme[active="true"], .customization-lwtheme-menu-theme:hover:active { - background-color: rgba(24, 26, 27, 0.15); } + background-color: var(--arrowpanel-dimmed-further); } .customization-lwtheme-menu-theme > .toolbarbutton-icon { margin: 5px; } @@ -4266,38 +3787,37 @@ toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { #customization-lwtheme-menu-header, #customization-lwtheme-menu-recommended, #customization-lwtheme-menu-footer { - background-color: rgba(24, 26, 27, 0.05); - color: gray; + background-color: var(--arrowpanel-dimmed); margin-right: -10px; margin-left: -10px; } #customization-lwtheme-menu-header { margin-top: -10px; - border-bottom: 1px solid rgba(24, 26, 27, 0.05); } + border-bottom: 1px solid var(--arrowpanel-dimmed); } #customization-lwtheme-menu-recommended { - border-top: 1px solid rgba(24, 26, 27, 0.05); - border-bottom: 1px solid rgba(24, 26, 27, 0.05); } + border-top: 1px solid var(--arrowpanel-dimmed); + border-bottom: 1px solid var(--arrowpanel-dimmed); } #customization-lwtheme-menu-footer { - background: linear-gradient(rgba(24, 26, 27, 0.05) 60%, transparent) border-box; - border-top: 1px solid rgba(24, 26, 27, 0.05); + background: linear-gradient(var(--arrowpanel-dimmed) 60%, transparent) border-box; + border-top: 1px solid var(--arrowpanel-dimmed); margin-bottom: -10px; } .customization-lwtheme-menu-footeritem { -moz-appearance: none; -moz-box-flex: 1; - color: gray; + color: inherit; border-style: none; padding: 10px; margin-left: 0; margin-right: 0; } .customization-lwtheme-menu-footeritem:hover { - background: linear-gradient(rgba(24, 26, 27, 0.08) 40%, transparent) padding-box; } + background: linear-gradient(var(--arrowpanel-dimmed) 40%, transparent) padding-box; } .customization-lwtheme-menu-footeritem:first-child { - border-inline-end: 1px solid rgba(24, 26, 27, 0.15); } + border-inline-end: 1px solid var(--panel-separator-color); } /* 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 @@ -4417,9 +3937,11 @@ toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { /* UI Tour */ #UITourHighlightContainer { -moz-appearance: none; + -moz-window-shadow: none; border: none; background-color: transparent; - /* This is a buffer to compensate for the movement in the "wobble" effect */ + /* This is a buffer to compensate for the movement in the "wobble" effect, + and for the box-shadow of #UITourHighlight. */ padding: 4px; } #UITourHighlight { @@ -4670,70 +4192,36 @@ notification.heartbeat { #context-navigation > .menuitem-iconic > .menu-iconic-left { -moz-appearance: none; } +#context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon { + width: 16px; + height: 16px; + margin: 7px; + filter: url(chrome://browser/skin/filters.svg#fill); + fill: currentColor; } + #context-back { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back"); } -#context-back[_moz-menuactive=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-active"); } - -#context-back[disabled=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-disabled"); } - #context-forward { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward"); } -#context-forward[_moz-menuactive=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-active"); } - -#context-forward[disabled=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-disabled"); } - #context-reload { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload"); } -#context-reload[_moz-menuactive=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-active"); } - -#context-reload[disabled=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-disabled"); } - #context-stop { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop"); } -#context-stop[_moz-menuactive=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-active"); } - -#context-stop[disabled=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-disabled"); } - #context-bookmarkpage { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark"); } -#context-bookmarkpage[_moz-menuactive=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-active"); } - -#context-bookmarkpage[disabled=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); } - #context-bookmarkpage[starred=true] { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); } -#context-bookmarkpage[starred=true][_moz-menuactive=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); } - -#context-bookmarkpage[starred=true][disabled=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); } - #context-back:-moz-locale-dir(rtl), #context-forward:-moz-locale-dir(rtl), #context-reload:-moz-locale-dir(rtl) { transform: scaleX(-1); } -#context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon { - width: 16px; - height: 16px; - margin: 7px; } - #context-media-eme-learnmore { list-style-image: url("chrome://browser/skin/drm-icon.svg#chains"); } diff --git a/arc-firefox-theme/chrome/browser/sass/browser-light.css b/arc-firefox-theme/chrome/browser/sass/browser-light.css index be47818..2f8a0c9 100644 --- a/arc-firefox-theme/chrome/browser/sass/browser-light.css +++ b/arc-firefox-theme/chrome/browser/sass/browser-light.css @@ -18,6 +18,9 @@ --toolbarbutton-combined-backgroundimage: linear-gradient(rgba(23, 51, 79, 0.2) 0, rgba(23, 51, 79, 0.2) 18px); --verified-identity-box-backgroundcolor: transparent; --panel-separator-color: ThreeDShadow; + --arrowpanel-dimmed: rgba(204, 204, 204, 0.3); + --arrowpanel-dimmed-further: rgba(204, 204, 204, 0.45); + --arrowpanel-dimmed-even-further: rgba(204, 204, 204, 0.8); --urlbar-separator-color: rgba(41, 41, 41, 0.2); } #menubar-items { @@ -470,9 +473,6 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { #aboutName { list-style-image: url("moz-icon://stock/gtk-about?size=menu"); } -#javascriptConsole { - list-style-image: url("chrome://global/skin/console/console.png"); } - /* Primary toolbar buttons */ :-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1 > .toolbarbutton-icon, :-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1 > :-moz-any(.toolbarbutton-menubutton-button, .toolbarbutton-badge-stack) > .toolbarbutton-icon { @@ -940,353 +940,151 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { } */ /* Menu panel and palette styles */ -:root { - --menupanel-list-style-image: url(chrome://browser/skin/menuPanel.png); - --menupanel-list-style-image-2x: url(chrome://browser/skin/menuPanel@2x.png); - --menupanel-small-list-style-image: url(chrome://browser/skin/menuPanel-small.png); - --menupanel-small-list-style-image-2x: url(chrome://browser/skin/menuPanel-small@2x.png); } - -@media not all and (min-resolution: 1.1dppx) { - toolbaritem[sdkstylewidget="true"] > toolbarbutton, - :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) { - list-style-image: var(--menupanel-list-style-image); } - - #home-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #home-button { - -moz-image-region: rect(0px, 128px, 32px, 96px); } - - #bookmarks-menu-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #bookmarks-menu-button { - -moz-image-region: rect(0px, 192px, 32px, 160px); } - - #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 192px, 64px, 160px); } - - #history-panelmenu[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #history-panelmenu { - -moz-image-region: rect(0px, 224px, 32px, 192px); } - - #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 224px, 64px, 192px); } - - #downloads-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #downloads-button { - -moz-image-region: rect(0px, 256px, 32px, 224px); } - - #add-ons-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #add-ons-button { - -moz-image-region: rect(0px, 288px, 32px, 256px); } - - #open-file-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #open-file-button { - -moz-image-region: rect(0px, 320px, 32px, 288px); } - - #save-page-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #save-page-button { - -moz-image-region: rect(0px, 352px, 32px, 320px); } - - #sync-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sync-button { - -moz-image-region: rect(0px, 1024px, 32px, 992px); } - - #sync-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 1024px, 64px, 992px); } - - #containers-panelmenu[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #containers-panelmenu { - -moz-image-region: rect(0px, 1056px, 32px, 1024px); } - - #containers-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 1056px, 64px, 1024px); } - - #feed-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #feed-button { - -moz-image-region: rect(0px, 416px, 32px, 384px); } - - #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 416px, 64px, 384px); } - - #social-share-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #social-share-button { - -moz-image-region: rect(0px, 448px, 32px, 416px); } - - #characterencoding-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #characterencoding-button { - -moz-image-region: rect(0px, 480px, 32px, 448px); } - - #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 480px, 64px, 448px); } - - #new-window-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-window-button { - -moz-image-region: rect(0px, 512px, 32px, 480px); } - - #e10s-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #e10s-button { - -moz-image-region: rect(0px, 512px, 32px, 480px); } - - #new-tab-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-tab-button { - -moz-image-region: rect(0px, 544px, 32px, 512px); } - - #privatebrowsing-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #privatebrowsing-button { - -moz-image-region: rect(0px, 576px, 32px, 544px); } - - #find-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #find-button { - -moz-image-region: rect(0px, 640px, 32px, 608px); } - - #print-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #print-button { - -moz-image-region: rect(0px, 672px, 32px, 640px); } - - #fullscreen-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #fullscreen-button { - -moz-image-region: rect(0px, 704px, 32px, 672px); } - - #developer-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #developer-button { - -moz-image-region: rect(0px, 736px, 32px, 704px); } - - #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 736px, 64px, 704px); } - - #preferences-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #preferences-button { - -moz-image-region: rect(0px, 768px, 32px, 736px); } - - #email-link-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #email-link-button { - -moz-image-region: rect(0, 800px, 32px, 768px); } - - #sidebar-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sidebar-button { - -moz-image-region: rect(0, 864px, 32px, 832px); } - - #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 864px, 64px, 832px); } - - #panic-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #panic-button { - -moz-image-region: rect(0, 896px, 32px, 864px); } - - #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 896px, 64px, 864px); } - - #webide-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #webide-button { - -moz-image-region: rect(0px, 960px, 32px, 928px); } - - toolbaritem[sdkstylewidget="true"] > toolbarbutton { - -moz-image-region: rect(0, 832px, 32px, 800px); } - - /* Wide panel control icons */ - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton, - toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton { - list-style-image: var(--menupanel-small-list-style-image); } - - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button { - -moz-image-region: rect(0px, 32px, 16px, 16px); } - - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button { - -moz-image-region: rect(0px, 48px, 16px, 32px); } - - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button { - -moz-image-region: rect(0px, 64px, 16px, 48px); } - - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button { - -moz-image-region: rect(0px, 80px, 16px, 64px); } - - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { - -moz-image-region: rect(0px, 96px, 16px, 80px); } - - #add-share-provider { - list-style-image: url(chrome://browser/skin/menuPanel-small.png); - -moz-image-region: rect(0px, 96px, 16px, 80px); } } -/* Menu panel and palette styles */ -@media (min-resolution: 1.1dppx) { - toolbaritem[sdkstylewidget="true"] > toolbarbutton, - :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) { - list-style-image: var(--menupanel-list-style-image-2x); } - - #home-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #home-button { - -moz-image-region: rect(0px, 256px, 64px, 192px); } - - #bookmarks-menu-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #bookmarks-menu-button { - -moz-image-region: rect(0px, 384px, 64px, 320px); } - - #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 384px, 128px, 320px); } - - #history-panelmenu[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #history-panelmenu { - -moz-image-region: rect(0px, 448px, 64px, 384px); } - - #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 448px, 128px, 384px); } - - #downloads-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #downloads-button { - -moz-image-region: rect(0px, 512px, 64px, 448px); } - - #add-ons-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #add-ons-button { - -moz-image-region: rect(0px, 576px, 64px, 512px); } - - #open-file-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #open-file-button { - -moz-image-region: rect(0px, 640px, 64px, 576px); } - - #save-page-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #save-page-button { - -moz-image-region: rect(0px, 704px, 64px, 640px); } +toolbaritem[sdkstylewidget="true"] > toolbarbutton, +:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) { + list-style-image: url(chrome://browser/skin/menuPanel.svg); } + +:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-icon, +:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-badge-stack > .toolbarbutton-icon, +:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon { + filter: url(chrome://browser/skin/filters.svg#fill); + fill: currentColor; } - #sync-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sync-button { - -moz-image-region: rect(0px, 2048px, 64px, 1984px); } +#home-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #home-button { + -moz-image-region: rect(0px, 128px, 32px, 96px); } - #sync-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 2048px, 128px, 1984px); } +#bookmarks-menu-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #bookmarks-menu-button { + -moz-image-region: rect(0px, 192px, 32px, 160px); } - #containers-panelmenu[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #containers-panelmenu { - -moz-image-region: rect(0px, 2112px, 64px, 2048px); } +#history-panelmenu[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #history-panelmenu { + -moz-image-region: rect(0px, 224px, 32px, 192px); } - #containers-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 2112px, 128px, 2048px); } +#downloads-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #downloads-button { + -moz-image-region: rect(0px, 256px, 32px, 224px); } - #feed-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #feed-button { - -moz-image-region: rect(0px, 832px, 64px, 768px); } +#add-ons-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #add-ons-button { + -moz-image-region: rect(0px, 288px, 32px, 256px); } - #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 832px, 128px, 768px); } +#open-file-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #open-file-button { + -moz-image-region: rect(0px, 320px, 32px, 288px); } - #social-share-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #social-share-button { - -moz-image-region: rect(0px, 896px, 64px, 832px); } +#save-page-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #save-page-button { + -moz-image-region: rect(0px, 352px, 32px, 320px); } - #characterencoding-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #characterencoding-button { - -moz-image-region: rect(0, 960px, 64px, 896px); } +#sync-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #sync-button { + -moz-image-region: rect(0px, 1024px, 32px, 992px); } - #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 960px, 128px, 896px); } +#containers-panelmenu[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #containers-panelmenu { + -moz-image-region: rect(0px, 1056px, 32px, 1024px); } - #new-window-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-window-button { - -moz-image-region: rect(0px, 1024px, 64px, 960px); } +#feed-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #feed-button { + -moz-image-region: rect(0px, 416px, 32px, 384px); } - #e10s-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #e10s-button { - -moz-image-region: rect(0px, 1024px, 64px, 960px); } +#social-share-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #social-share-button { + -moz-image-region: rect(0px, 448px, 32px, 416px); } - #webide-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #webide-button { - -moz-image-region: rect(0px, 1920px, 64px, 1856px); } +#characterencoding-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #characterencoding-button { + -moz-image-region: rect(0px, 480px, 32px, 448px); } - #new-tab-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-tab-button { - -moz-image-region: rect(0px, 1088px, 64px, 1024px); } +#new-window-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #new-window-button { + -moz-image-region: rect(0px, 512px, 32px, 480px); } - #privatebrowsing-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #privatebrowsing-button { - -moz-image-region: rect(0px, 1152px, 64px, 1088px); } +#e10s-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #e10s-button { + -moz-image-region: rect(0px, 512px, 32px, 480px); } - #find-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #find-button { - -moz-image-region: rect(0px, 1280px, 64px, 1216px); } +#new-tab-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #new-tab-button { + -moz-image-region: rect(0px, 544px, 32px, 512px); } - #print-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #print-button { - -moz-image-region: rect(0px, 1344px, 64px, 1280px); } +#privatebrowsing-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #privatebrowsing-button { + -moz-image-region: rect(0px, 576px, 32px, 544px); } - #fullscreen-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #fullscreen-button { - -moz-image-region: rect(0px, 1408px, 64px, 1344px); } +#find-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #find-button { + -moz-image-region: rect(0px, 640px, 32px, 608px); } - #developer-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #developer-button { - -moz-image-region: rect(0px, 1472px, 64px, 1408px); } +#print-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #print-button { + -moz-image-region: rect(0px, 672px, 32px, 640px); } - #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 1472px, 128px, 1408px); } +#fullscreen-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #fullscreen-button { + -moz-image-region: rect(0px, 704px, 32px, 672px); } - #preferences-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #preferences-button { - -moz-image-region: rect(0px, 1536px, 64px, 1472px); } +#developer-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #developer-button { + -moz-image-region: rect(0px, 736px, 32px, 704px); } - #email-link-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #email-link-button { - -moz-image-region: rect(0px, 1600px, 64px, 1536px); } +#preferences-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #preferences-button { + -moz-image-region: rect(0px, 768px, 32px, 736px); } - #sidebar-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sidebar-button { - -moz-image-region: rect(0px, 1728px, 64px, 1664px); } +#email-link-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #email-link-button { + -moz-image-region: rect(0, 800px, 32px, 768px); } - #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 1728px, 128px, 1664px); } +#sidebar-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #sidebar-button { + -moz-image-region: rect(0, 864px, 32px, 832px); } - #panic-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #panic-button { - -moz-image-region: rect(0, 1792px, 64px, 1728px); } +#panic-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #panic-button { + -moz-image-region: rect(0, 896px, 32px, 864px); } - #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 1792px, 128px, 1728px); } +#webide-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #webide-button { + -moz-image-region: rect(0px, 960px, 32px, 928px); } - toolbaritem[sdkstylewidget="true"] > toolbarbutton { - -moz-image-region: rect(0, 1664px, 64px, 1600px); } +toolbaritem[sdkstylewidget="true"] > toolbarbutton { + -moz-image-region: rect(0, 832px, 32px, 800px); } - #add-share-provider { - list-style-image: url(chrome://browser/skin/menuPanel-small@2x.png); - -moz-image-region: rect(0px, 192px, 32px, 160px); } +/* Wide panel control icons */ +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, +#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, +toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton, +toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton { + list-style-image: url(chrome://browser/skin/menuPanel-small.svg); } - /* Footer and wide panel control icons */ - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton, - toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton { - list-style-image: var(--menupanel-small-list-style-image-2x); } +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button, +toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button { + -moz-image-region: rect(0px, 32px, 16px, 16px); } - /* Wide items like the Cut/Copy/Paste and Zoom controls are special in that their icons - are 16x16 when in the panel, but 18x18 when in a toolbar. */ - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon, - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon, - toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon, - toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon { - width: 16px; } +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button, +toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button { + -moz-image-region: rect(0px, 48px, 16px, 32px); } - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button { - -moz-image-region: rect(0px, 64px, 32px, 32px); } +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button, +toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button { + -moz-image-region: rect(0px, 64px, 16px, 48px); } - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button { - -moz-image-region: rect(0px, 96px, 32px, 64px); } +#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button, +toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button { + -moz-image-region: rect(0px, 80px, 16px, 64px); } - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button { - -moz-image-region: rect(0px, 128px, 32px, 96px); } +#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button, +toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { + -moz-image-region: rect(0px, 96px, 16px, 80px); } - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button { - -moz-image-region: rect(0px, 160px, 32px, 128px); } +#add-share-provider { + list-style-image: url(chrome://browser/skin/menuPanel-small.svg); + -moz-image-region: rect(0px, 96px, 16px, 80px); } - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { - -moz-image-region: rect(0px, 192px, 32px, 160px); } } #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon, #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker, #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker, @@ -1385,9 +1183,43 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { width: 16px; height: 16px; } +/* ::::: URL Bar Zoom Reset Button ::::: */ +@keyframes urlbar-zoom-reset-pulse { + 0% { + transform: scale(0); } + 75% { + transform: scale(1.5); } + 100% { + transform: scale(1); } } +#urlbar-zoom-button { + -moz-appearance: none; + margin: 0 3px; + font-size: .8em; + padding: 0 8px; + border-radius: 1em; + background-color: rgba(0, 0, 0, 0.05); + color: inherit; + border: 1px solid ThreeDLightShadow; } + +#urlbar-zoom-button[animate="true"] { + animation-name: urlbar-zoom-reset-pulse; + animation-duration: 250ms; } + +#urlbar-zoom-button:hover { + background-color: rgba(0, 0, 0, 0.1); } + +#urlbar-zoom-button:hover:active { + background-color: rgba(0, 0, 0, 0.15); } + +#urlbar-zoom-button > .toolbarbutton-text { + display: -moz-box; } + +#urlbar-zoom-button > .toolbarbutton-icon { + display: none; } + #urlbar-search-footer { - border-top: 1px solid rgba(24, 26, 27, 0.14); - background-color: rgba(24, 26, 27, 0.07); } + border-top: 1px solid var(--panel-separator-color); + background-color: var(--arrowpanel-dimmed); } #urlbar-search-settings { -moz-appearance: none; @@ -1399,10 +1231,10 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { background: transparent; } #urlbar-search-settings:hover { - background-color: rgba(24, 26, 27, 0.07); } + background-color: var(--arrowpanel-dimmed); } #urlbar-search-settings:hover:active { - background-color: rgba(24, 26, 27, 0.12); } + background-color: var(--arrowpanel-dimmed-further); } #urlbar-search-splitter { -moz-appearance: none; @@ -1419,7 +1251,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { color: GrayText; } #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] { - border-bottom: 1px solid rgba(24, 26, 27, 0.14); + border-bottom: 1px solid var(--panel-separator-color); background-color: rgba(24, 26, 27, 0.07); padding: 6px 0; padding-inline-start: 44px; @@ -1476,13 +1308,98 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { border-top-right-radius: 1.5px; border-bottom-right-radius: 1.5px; } -#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: 1px dotted; outline-offset: -3px; } +#identity-icon { + list-style-image: url(chrome://browser/skin/identity-icon.svg#normal); } + +#identity-box:hover > #identity-icon:not(.no-hover), +#identity-box[open=true] > #identity-icon { + list-style-image: url(chrome://browser/skin/identity-icon.svg#hover); } + +#identity-box.grantedPermissions > #identity-icon { + list-style-image: url(chrome://browser/skin/identity-icon.svg#notice); } + +#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover), +#identity-box.grantedPermissions[open=true] > #identity-icon { + list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover); } + +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon { + list-style-image: url(chrome://branding/content/identity-icons-brand.svg); } + +#tracking-protection-icon { + list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled); } + +#tracking-protection-icon[state="loaded-tracking-content"] { + list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled); } + +#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon { + list-style-image: url(chrome://browser/skin/connection-secure.svg); + visibility: visible; } + +#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon { + list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon); + visibility: visible; } + +#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon { + list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon); + visibility: visible; } + +#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon { + list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon); + visibility: visible; } + +#identity-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/identity-icon.svg#normal-black); } + +#identity-box:hover > #identity-icon:not(.no-hover):-moz-lwtheme, +#identity-box[open=true] > #identity-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/identity-icon.svg#hover-black); } + +#identity-box.grantedPermissions > #identity-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-black); } + +#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover):-moz-lwtheme, +#identity-box.grantedPermissions[open=true] > #identity-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover-black); } + +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon:-moz-lwtheme { + list-style-image: url(chrome://branding/content/identity-icons-brand.svg); } + +#tracking-protection-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled-black); } + +#tracking-protection-icon[state="loaded-tracking-content"]:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled-black); } + +#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon:-moz-lwtheme, +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon:-moz-lwtheme, +#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/connection-secure.svg); + visibility: visible; } + +#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon-black); + visibility: visible; } + +#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon:-moz-lwtheme, +#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon-black); + visibility: visible; } + +#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon:-moz-lwtheme, +#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon:-moz-lwtheme, +#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon-black); + visibility: visible; } + #identity-box { --identity-box-verified-color: #479900; --identity-box-chrome-color: #e57300; @@ -1511,44 +1428,53 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { /* MAIN IDENTITY ICON */ #identity-icon { width: 16px; - height: 16px; - list-style-image: url(chrome://browser/skin/identity-icon.svg#normal); } - -#identity-box:hover > #identity-icon:not(.no-hover), -#identity-box[open=true] > #identity-icon { - list-style-image: url(chrome://browser/skin/identity-icon.svg#hover); } - -#identity-box.grantedPermissions > #identity-icon { - list-style-image: url(chrome://browser/skin/identity-icon.svg#notice); } - -#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover), -#identity-box.grantedPermissions[open=true] > #identity-icon { - list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover); } - -#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon { - list-style-image: url(chrome://branding/content/identity-icons-brand.svg); } + height: 16px; } #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon { - opacity: 0.3; } + opacity: .3; } #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon { -moz-image-region: inherit; list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); + width: 16px; + height: 16px; } + +/* SHARING ICON */ +#sharing-icon { width: 16px; height: 16px; - opacity: 1; } + margin-inline-start: -16px; + position: relative; + display: none; } + +#identity-box[sharing="camera"] > #sharing-icon { + list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing"); } +#identity-box[sharing="microphone"] > #sharing-icon { + list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing"); } + +#identity-box[sharing="screen"] > #sharing-icon { + list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing"); } + +#identity-box[sharing] > #sharing-icon { + display: -moz-box; + animation-delay: -1.5s; } + +#identity-box[sharing] > #identity-icon, +#sharing-icon { + animation: 3s linear pulse infinite; } + +@keyframes pulse { + 0%, 16.66%, 83.33%, 100% { + opacity: 0; } + 33.33%, 66.66% { + opacity: 1; } } /* TRACKING PROTECTION ICON */ #tracking-protection-icon { width: 16px; height: 16px; margin-inline-start: 2px; - margin-inline-end: 0; - list-style-image: url(chrome://browser/skin/tracking-protection-16.svg); - opacity: 1; } - -#tracking-protection-icon[state="loaded-tracking-content"] { - list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg); } + margin-inline-end: 0; } #tracking-protection-icon[animate] { transition: margin-left 200ms ease-out, margin-right 200ms ease-out; } @@ -1570,40 +1496,22 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { margin-inline-start: 2px; visibility: collapse; } -#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon, -#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon, -#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon { - list-style-image: url(chrome://browser/skin/identity-secure.svg); - visibility: visible; } - -#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon { - list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg); - visibility: visible; } - -#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon, -#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon { - list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg); - visibility: visible; } - -#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon, -#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon, -#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon { - list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg); - visibility: visible; } - #notification-popup-box { padding: 5px 0px; margin: -5px 0px; margin-inline-end: -5px; padding-inline-end: 5px; } +.notification-anchor-icon, +#blocked-permissions-container > .blocked-permission-icon { + width: 16px; + height: 16px; + margin-inline-start: 2px; } + /* This class can be used alone or in combination with the class defining the type of icon displayed. This rule must be defined before the others in order for its list-style-image to be overridden. */ .notification-anchor-icon { - width: 16px; - height: 16px; - margin-inline-start: 2px; list-style-image: url(moz-icon://stock/gtk-dialog-info?size=16); } @media (min-resolution: 1.1dppx) { @@ -1614,57 +1522,26 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { height: 64px; margin-inline-end: 10px; } -#notification-popup-box > .notification-anchor-icon:not(.in-use):hover { - fill: #606060; } - -/* INDIVIDUAL NOTIFICATIONS */ -/* For the moment we apply the color filter only on the icons listed here. - The first two selectors are used by socialchat.xml (bug 1275558). */ -.webRTC-sharingDevices-notification-icon, -.webRTC-sharingMicrophone-notification-icon, -.camera-icon, -.geo-icon, -.indexedDB-icon, -.install-icon, -.login-icon, -.microphone-icon, -.plugin-icon, -.pointerLock-icon, -.popup-icon, -.screen-icon, -.desktop-notification-icon, -.popup-notification-icon[popupid="geolocation"], -.popup-notification-icon[popupid="indexedDB-permissions-prompt"], -.popup-notification-icon[popupid="password"], -.popup-notification-icon[popupid="pointerLock"], -.popup-notification-icon[popupid="webRTC-shareDevices"], -.popup-notification-icon[popupid="webRTC-shareMicrophone"], -.popup-notification-icon[popupid="webRTC-shareScreen"], -.popup-notification-icon[popupid="webRTC-sharingDevices"], -.popup-notification-icon[popupid="webRTC-sharingMicrophone"], -.popup-notification-icon[popupid="webRTC-sharingScreen"], -.popup-notification-icon[popupid="web-notifications"] { +.notification-anchor-icon:not(.plugin-blocked):-moz-lwtheme, +#blocked-permissions-container > .blocked-permission-icon:-moz-lwtheme { filter: url(chrome://browser/skin/filters.svg#fill); - fill: #999; } + fill: currentColor; } -/* The first two selectors are used by socialchat.xml (bug 1275558). The - notifications in the chat window are only shown when they are in use. */ -.webRTC-sharingDevices-notification-icon, -.webRTC-sharingMicrophone-notification-icon, -.in-use { - fill: #fea01b; } +.notification-anchor-icon:not(.plugin-blocked):not(:hover) { + opacity: .8; } +/* INDIVIDUAL NOTIFICATIONS */ .popup-notification-icon[popupid="web-notifications"], .desktop-notification-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification); } -.desktop-notification-icon.blocked { +.desktop-notification-icon.blocked-permission-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked); } .geo-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-linux); } -.geo-icon.blocked { +.geo-icon.blocked-permission-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-linux-blocked); } .popup-notification-icon[popupid="geolocation"] { @@ -1674,7 +1551,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { .indexedDB-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB); } -.indexedDB-icon.blocked { +.indexedDB-icon.blocked-permission-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked); } .login-icon { @@ -1683,46 +1560,37 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { .popup-notification-icon[popupid="password"] { list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed); } -#login-fill-notification-icon { - /* Temporary solution until the capture and fill doorhangers are unified. */ - transform: scaleX(-1); } - -/* The first selector is used by socialchat.xml (bug 1275558). */ -.webRTC-sharingDevices-notification-icon, .camera-icon, -.popup-notification-icon[popupid="webRTC-shareDevices"], -.popup-notification-icon[popupid="webRTC-sharingDevices"] { +.popup-notification-icon[popupid="webRTC-shareDevices"] { list-style-image: url(chrome://browser/skin/notification-icons.svg#camera); } -.camera-icon.blocked { +.camera-icon.in-use { + list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-sharing); } + +.camera-icon.blocked-permission-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked); } -/* The first selector is used by socialchat.xml (bug 1275558). */ -.webRTC-sharingMicrophone-notification-icon, .microphone-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone); } -.microphone-icon.blocked { +.microphone-icon.in-use { + list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-sharing); } + +.microphone-icon.blocked-permission-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked); } -.popup-notification-icon[popupid="webRTC-shareMicrophone"], -.popup-notification-icon[popupid="webRTC-sharingMicrophone"] { +.popup-notification-icon[popupid="webRTC-shareMicrophone"] { list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed); } .popup-notification-icon[popupid="webRTC-shareScreen"], -.popup-notification-icon[popupid="webRTC-sharingScreen"], .screen-icon { list-style-image: url(chrome://browser/skin/notification-icons.svg#screen); } -.screen-icon.blocked { - list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked); } +.screen-icon.in-use { + list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-sharing); } -.popup-notification-icon[popupid="pointerLock"], -.pointerLock-icon { - list-style-image: url(chrome://browser/skin/notification-icons.svg#pointerLock); } - -.pointerLock-icon.blocked { - list-style-image: url(chrome://browser/skin/notification-icons.svg#pointerLock-blocked); } +.screen-icon.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked); } /* This icon has a block sign in it, so we don't need a blocked version. */ .popup-icon { @@ -1788,9 +1656,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin); } .plugin-icon.plugin-blocked { - list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked); - fill: #d92215 !important; - /* important! to override the default hover color */ } + list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked); } #notification-popup-box[hidden] { /* Override display:none to make the pluginBlockedNotification animation work @@ -2155,6 +2021,21 @@ html|span.ac-emphasize-text-url { -moz-image-region: rect(0, 48px, 16px, 32px); } /* social share panel */ +#manage-share-providers { + list-style-image: url("chrome://browser/skin/Toolbar.png"); + -moz-image-region: rect(0, 468px, 18px, 450px); } + +#manage-share-providers > .toolbarbutton-icon { + min-height: 18px; + min-width: 18px; } + +.social-panel > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; } + +/* fixup corners for share panel */ +.social-panel > .social-panel-frame { + border-radius: inherit; } + .social-share-frame { border-top: 1px solid #f8f8f8; width: 756px; @@ -2196,10 +2077,6 @@ html|span.ac-emphasize-text-url { min-height: 16px; max-height: 16px; } -/* social recommending panel */ -#social-mark-button { - -moz-image-region: rect(0, 16px, 16px, 0); } - /* bookmarks menu-button */ #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker { -moz-appearance: none !important; @@ -2353,7 +2230,7 @@ html|span.ac-emphasize-text-url { color: #5c616c; } /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */ -.tabbrowser-tab[selected=true] { +.tabbrowser-tab[visuallyselected=true] { position: relative; z-index: 2; } @@ -2406,17 +2283,13 @@ html|span.ac-emphasize-text-url { position: relative; } .tab-sharing-icon-overlay[sharing="camera"] { - list-style-image: url("chrome://browser/skin/notification-icons.svg#camera"); } + list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing"); } .tab-sharing-icon-overlay[sharing="microphone"] { - list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone"); } + list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing"); } .tab-sharing-icon-overlay[sharing="screen"] { - list-style-image: url("chrome://browser/skin/notification-icons.svg#screen"); } - -.tab-sharing-icon-overlay[sharing] { - filter: url("chrome://browser/skin/filters.svg#fill"); - fill: #e0291d; } + list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing"); } .tab-icon-overlay { width: 16px; @@ -2485,26 +2358,6 @@ html|span.ac-emphasize-text-url { .tab-icon-sound[selected=true][soundplaying] { list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio"); } -.tab-icon-sound:hover:-moz-lwtheme, -.tab-icon-sound[selected=true][soundplaying]:hover { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-hover"); } - -.tab-icon-sound:hover:active:-moz-lwtheme, -.tab-icon-sound[selected=true][soundplaying]:hover:active { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-pressed"); } - -.tab-icon-sound[muted]:-moz-lwtheme, -.tab-icon-sound[selected=true][muted] { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-muted"); } - -.tab-icon-sound[muted]:hover:-moz-lwtheme, -.tab-icon-sound[selected=true][muted]:hover { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-muted-hover"); } - -.tab-icon-sound[muted]:hover:active:-moz-lwtheme, -.tab-icon-sound[selected=true][muted]:hover:active { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-muted-pressed"); } - .tab-background, .tabs-newtab-button { /* overlap the tab curves */ @@ -2556,7 +2409,7 @@ html|span.ac-emphasize-text-url { min-height: var(--tab-min-height); width: 30px; } -.tabbrowser-tab:not([selected=true]), +.tabbrowser-tab:not([visuallyselected=true]), .tabbrowser-tab:-moz-lwtheme { color: inherit; } @@ -2802,22 +2655,6 @@ lwtHeader;*/ .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon { list-style-image: url("chrome://global/skin/icons/loading.png"); } -.alltabs-item[tabIsVisible] { - /* box-shadow instead of background-color to work around native styling */ - box-shadow: inset -5px 0 ThreeDShadow; } - -.alltabs-endimage[muted] { - list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-menu-muted); } - -.alltabs-endimage[soundplaying] { - list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-menu); } - -menuitem:hover > hbox > .alltabs-endimage[muted] { - list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-menu-muted-hover); } - -menuitem:hover > hbox > .alltabs-endimage[soundplaying] { - list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-menu-hover); } - /* Sidebar */ #sidebar-throbber[loading="true"] { list-style-image: url("chrome://global/skin/icons/loading.png"); @@ -2839,50 +2676,6 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker { toolbarbutton.chevron > .toolbarbutton-icon { margin: 0; } -/* Ctrl-Tab */ -#ctrlTab-panel { - -moz-appearance: none; - background: rgba(68, 68, 68, 0.7); - color: white; - border-style: none; - padding: 20px 10px 10px; - font-weight: bold; - text-shadow: 0 0 1px #444444, 0 0 2px #444444; } - -.ctrlTab-favicon[src] { - background-color: white; - width: 20px; - height: 20px; - padding: 2px; } - -.ctrlTab-preview-inner > .tabPreview-canvas { - box-shadow: 1px 1px 2px #1f1f1f; } - -.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas { - margin-bottom: 2px; } - -.ctrlTab-preview-inner { - padding-bottom: 10px; } - -#ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner { - padding: 10px; - background-color: rgba(255, 255, 255, 0.2); - border-radius: .5em; } - -.ctrlTab-preview:focus > * > .ctrlTab-preview-inner { - color: white; - background-color: rgba(0, 0, 0, 0.6); - text-shadow: none; - padding: 8px; - border: 2px solid white; - border-radius: .5em; } - -.ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner { - margin: -10px -10px 0; } - -#ctrlTab-showAll { - margin-top: .5em; } - /* Status panel */ .statuspanel-label { margin: 0; @@ -2944,21 +2737,49 @@ html|*.pointerlockfswarning-exit-button { font-size: 14px; font-weight: lighter; margin: 0; - box-sizing: content-box; - background-clip: padding-box; - border: 1px solid; - border-radius: 3px; - color: #BAC3CF; - border-color: rgba(26, 28, 34, 0.35); - background-color: rgba(102, 109, 132, 0.35); } - html|*.pointerlockfswarning-exit-button:hover { - color: #BAC3CF; - border-color: rgba(26, 28, 34, 0.35); - background-color: rgba(119, 127, 151, 0.45); } - html|*.pointerlockfswarning-exit-button:active, html|*.pointerlockfswarning-exit-button:checked { - color: #ffffff; - border-color: rgba(26, 28, 34, 0.35); - background-color: #5294E2; } + box-sizing: content-box; } + +/* Ctrl-Tab */ +#ctrlTab-panel { + -moz-appearance: none; + background: rgba(84, 84, 84, 0.85); + color: white; + border-style: none; + padding: 20px 10px 10px; + font-weight: bold; + text-shadow: 0 0 1px #1f1f1f, 0 0 2px #1f1f1f; } + +.ctrlTab-favicon[src] { + background-color: white; + width: 20px; + height: 20px; + padding: 2px; } + +.ctrlTab-preview-inner > .tabPreview-canvas { + box-shadow: 1px 1px 2px #1f1f1f; } + +.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas { + margin-bottom: 2px; } + +.ctrlTab-preview-inner { + padding: 8px; + border: 2px solid transparent; + border-radius: .5em; } + +.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner { + margin: -10px -10px 0; } + +#ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner { + background-color: rgba(255, 255, 255, 0.2); } + +.ctrlTab-preview:focus > * > .ctrlTab-preview-inner { + color: white; + background-color: rgba(0, 0, 0, 0.6); + text-shadow: none; + border-color: white; } + +#ctrlTab-showAll { + margin-top: .5em; } /* Responsive Mode */ .browserContainer[responsivemode] { @@ -3451,8 +3272,8 @@ html|*#gcli-output-frame { margin-inline-start: 6px; } .click-to-play-plugins-notification-button-container { - background-color: rgba(24, 26, 27, 0.07); - border-top: 1px solid rgba(24, 26, 27, 0.12); + background-color: var(--arrowpanel-dimmed); + border-top: 1px solid var(--panel-separator-color); padding: 10px; margin-top: 5px; } @@ -3470,9 +3291,7 @@ html|*#gcli-output-frame { margin: 0; } .messageImage[value="plugin-hidden"] { - list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin); - filter: url(chrome://browser/skin/filters.svg#fill); - fill: #808080; } + list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin); } /* Keep any changes to this style in sync with pluginProblem.css */ notification.pluginVulnerable { @@ -3481,77 +3300,11 @@ notification.pluginVulnerable { color: white; } notification.pluginVulnerable .messageImage { - list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked); - filter: url(chrome://browser/skin/filters.svg#fill); - fill: #d92215; } + list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked); } notification.pluginVulnerable > .notification-inner > .messageCloseButton:not(:hover) { background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 80, 16, 64); } -#notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent { - /* Since we display a sliding subview that extends to the border, we cannot - * keep the default padding of arrow panels. We use the same padding in the - * individual content views instead. Since we removed the padding, we also - * have to ensure the contents are clipped to the border box. */ - padding: 0; - overflow: hidden; } - -#login-fill-mainview, -#login-fill-details { - padding: var(--panel-arrowcontent-padding); } - -#login-fill-doorhanger[inDetailView] > #login-fill-mainview { - transform: translateX(-14px); } - -#login-fill-mainview, -#login-fill-details { - transition: transform 150ms; } - -#login-fill-doorhanger:not([inDetailView]) > #login-fill-details { - transform: translateX(105%); } - -#login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) { - transform: translateX(-105%); } - -#login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer { - background-color: rgba(24, 26, 27, 0.1); } - -#login-fill-testing { - color: #b33; - font-weight: bold; } - -#login-fill-list { - border: 1px solid black; - max-height: 20em; } - -.login-fill-item[disabled] { - color: #888; - background-color: #fff; } - -.login-fill-item[disabled][selected] { - background-color: #eef; } - -.login-hostname { - margin: 4px; - font-weight: bold; } - -.login-fill-item.different-hostname > .login-hostname { - color: #888; - font-style: italic; } - -.login-username { - margin: 4px; - color: #888; } - -#login-fill-details { - padding: 4px; - background: var(--panel-arrowcontent-background); - color: var(--panel-arrowcontent-color); - background-clip: padding-box; - border-left: 1px solid rgba(24, 26, 27, 0.3); - box-shadow: 0 3px 5px rgba(24, 26, 27, 0.1), 0 0 7px rgba(24, 26, 27, 0.1); - margin-inline-start: 38px; } - /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ @@ -3740,214 +3493,6 @@ toolbar[brighttext] #downloads-indicator-counter { border-radius: 1px; margin-inline-end: 2px; } -/* social toolbar provider menu */ -#social-statusarea-popup { - margin-top: 0; - margin-left: -12px; - margin-right: -12px; } - -.social-statusarea-user { - list-style-image: url("chrome://global/skin/icons/information-32.png"); } - -.social-statusarea-user-portrait { - width: 32px; - height: 32px; - border-radius: 2px; - margin: 10px; } - -.social-panel > .panel-arrowcontainer > .panel-arrowcontent { - padding: 0; } - -#social-sidebar-header { - padding: 3px; } - -#manage-share-providers, -#social-sidebar-button { - list-style-image: url("chrome://browser/skin/Toolbar.png"); - -moz-image-region: rect(0, 468px, 18px, 450px); } - -#social-sidebar-button { - -moz-appearance: none; - border: none; - padding: 0; - margin: 2px; } - -#manage-share-providers > .toolbarbutton-icon, -#social-sidebar-button > .toolbarbutton-icon { - min-height: 18px; - min-width: 18px; } - -#social-sidebar-button > .toolbarbutton-menu-dropmarker { - display: none; } - -#social-sidebar-button[loading="true"] { - list-style-image: url("chrome://global/skin/icons/loading.png"); } - -#social-sidebar-favico { - max-height: 16px; - max-width: 16px; - padding: 0; - margin: 2px; } - -.chat-status-icon { - max-height: 16px; - max-width: 16px; - padding: 0; } - -.chat-toolbarbutton { - -moz-appearance: none; - border: none; - padding: 0 3px; - margin: 0; - background: none; } - -.chat-toolbarbutton > .toolbarbutton-text { - display: none; } - -.chat-toolbarbutton > .toolbarbutton-icon { - width: 16px; - height: 16px; } - -.chat-close-button { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close"); } - -.chat-close-button:hover { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-hover"); } - -.chat-close-button:hover:active { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-active"); } - -.chat-minimize-button { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize"); } - -.chat-minimize-button:hover { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-hover"); } - -.chat-minimize-button:hover:active { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-active"); } - -.chat-swap-button { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand"); - transform: rotate(180deg); } - -.chat-swap-button:hover { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-hover"); } - -.chat-swap-button:hover:active { - list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-active"); } - -chatbar > chatbox > .chat-titlebar > .chat-swap-button { - transform: none; } - -.chat-title { - color: #666; - text-shadow: none; - cursor: inherit; } - -.chat-titlebar { - height: 26px; - min-height: 26px; - width: 100%; - margin: 0; - padding: 5px 4px; - border: 1px solid #ebebeb; - border-bottom: 0; - border-top-left-radius: 4px; - border-top-right-radius: 4px; - cursor: pointer; - background-color: #ebebeb; } - -.chat-titlebar[selected] { - background-color: #f0f0f0; } - -.chat-titlebar > .notification-anchor-icon { - margin-left: 2px; - margin-right: 2px; } - -.chat-titlebar[minimized="true"] { - border-bottom: none; } - -.chat-titlebar[activity] { - background-image: radial-gradient(ellipse closest-side at center, white, transparent); - background-repeat: no-repeat; - background-size: 100% 20px; - background-position: 0 -10px; } - -.chat-frame { - padding: 0; - margin: 0; - overflow: hidden; } - -.chatbar-button { - list-style-image: url("chrome://browser/skin/social/services-16.png"); - margin: 0; - padding: 2px; - height: 21px; - width: 21px; - border: 1px solid #ccc; - border-bottom: none; - background-color: #d9d9d9; - background-image: linear-gradient(rgba(255, 255, 255, 0.43), transparent); - border-top-left-radius: 3px; - border-top-right-radius: 3px; } - -@media (min-resolution: 2dppx) { - .chatbar-button { - list-style-image: url("chrome://browser/skin/social/services-16@2x.png"); } } -.chatbar-button:hover, -.chatbar-button[open="true"] { - background-color: #f0f0f0; } - -.chatbar-button[activity]:not([open]) { - background-image: radial-gradient(circle farthest-corner at center 2px, #fefeff 3%, rgba(210, 235, 255, 0.9) 12%, rgba(148, 205, 253, 0.6) 30%, rgba(148, 205, 253, 0.2) 70%); } - -.chatbar-button > .toolbarbutton-icon { - width: 16px; } - -.chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon { - width: auto; - height: auto; - max-height: 16px; - max-width: 16px; } - -.chatbar-button[open="true"] { - box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), 0 1px rgba(255, 255, 255, 0.2); } - -.chatbar-button > .toolbarbutton-text, -.chatbar-button > .toolbarbutton-menu-dropmarker { - display: none; } - -.chatbar-button > menupopup > menuitem[activity] { - font-weight: bold; } - -.chatbar-innerbox { - background: transparent; - overflow: hidden; } - -chatbar { - margin-inline-end: 20px; } - -chatbox { - margin-inline-start: 4px; - background-color: transparent; } - -chatbar > chatbox { - /* Apply the same border-radius as the .chat-titlebar to make the box-shadow - go round nicely. */ - border-top-left-radius: 4px; - border-top-right-radius: 4px; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); - /* Offset the chatbox the same amount as the box-shadows' spread, to make it - visible. */ - margin-inline-end: 5px; } - -window > chatbox { - margin-inline-start: 0px; - margin: 0px; - border: none; - padding: 0px; - border-radius: 4px; } - /* Customization mode */ /* 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 @@ -4003,14 +3548,14 @@ window > chatbox { #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before, #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before, #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before { - outline-color: #666666; } + outline-color: currentColor; } #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before { transition: outline-color 250ms linear; } #PanelUI-contents[showoutline=true] > .panel-customization-placeholder { transition: outline-color 250ms linear; - outline-color: #bbb; } + outline-color: var(--panel-separator-color); } #PanelUI-contents > .panel-customization-placeholder { cursor: auto; @@ -4022,8 +3567,8 @@ window > chatbox { padding-right: 10px; } #customization-container { - background-color: #f7f7f7; - color: black; + background-color: -moz-field; + color: -moz-fieldText; text-shadow: none; } #customization-palette, @@ -4033,11 +3578,11 @@ window > chatbox { #customization-header { font-size: 1.75em; line-height: 1.75em; - color: #666; + color: GrayText; font-weight: 200; margin: 25px 25px 12px; padding-bottom: 12px; - border-bottom: 1px solid #e5e5e5; } + border-bottom: 1px solid ThreeDLightShadow; } #customization-panel-container { padding: 15px 25px 25px; @@ -4045,32 +3590,12 @@ window > chatbox { #main-window:-moz-any([customize-entering], [customize-entered]) #browser-bottombox, #customization-footer { - background-color: #ececec; } + background-color: -moz-dialog; } #customization-footer { - border-top: 1px solid #dddddd; + border-top: 1px solid ThreeDLightShadow; padding: 10px; } -.customizationmode-button { - border: 1px solid silver; - border-radius: 3px; - margin: 5px; - padding: 2px 12px; - background-color: #fbfbfb; - color: #474747; - box-shadow: 0 1px rgba(255, 255, 255, 0.5), inset 0 1px rgba(255, 255, 255, 0.5); - -moz-appearance: none; } - -#customization-titlebar-visibility-button[checked], -#customization-devedition-theme-button[checked] { - background-color: #dadada; - border-color: #a8a8a8; - text-shadow: 0 1px #ececec; - box-shadow: 0 1px rgba(255, 255, 255, 0.5), inset 0 1px #c4c4c4; } - -.customizationmode-button[disabled="true"] { - opacity: .5; } - .customizationmode-button > .box-inherit > .box-inherit > .button-icon, .customizationmode-button > .button-box > .button-icon { height: 24px; } @@ -4079,10 +3604,6 @@ window > chatbox { list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png"); -moz-image-region: rect(0, 24px, 24px, 0); } -#customization-lwtheme-button, -#customization-titlebar-visibility-button { - padding: 2px 7px; } - #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text, #customization-titlebar-visibility-button > .button-box > .button-text { /* Sadly, button.css thinks its margins are perfect for everyone. */ @@ -4175,7 +3696,7 @@ toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring, toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { /* Delay adding the focusring back until after the transform transition completes. */ transition: outline-width 0.01s linear var(--drag-drop-transition-duration); - outline: 1px dotted rgba(0, 0, 0, 0.5); + outline: 1px dotted; -moz-outline-radius: 2.5px; } toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { @@ -4245,12 +3766,12 @@ toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { .customization-lwtheme-menu-theme[active="true"], .customization-lwtheme-menu-theme:hover { - background-color: rgba(24, 26, 27, 0.08); - border-color: rgba(24, 26, 27, 0.11); } + background-color: var(--arrowpanel-dimmed); + border-color: var(--panel-separator-color); } .customization-lwtheme-menu-theme[active="true"], .customization-lwtheme-menu-theme:hover:active { - background-color: rgba(24, 26, 27, 0.15); } + background-color: var(--arrowpanel-dimmed-further); } .customization-lwtheme-menu-theme > .toolbarbutton-icon { margin: 5px; } @@ -4266,38 +3787,37 @@ toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { #customization-lwtheme-menu-header, #customization-lwtheme-menu-recommended, #customization-lwtheme-menu-footer { - background-color: rgba(24, 26, 27, 0.05); - color: gray; + background-color: var(--arrowpanel-dimmed); margin-right: -10px; margin-left: -10px; } #customization-lwtheme-menu-header { margin-top: -10px; - border-bottom: 1px solid rgba(24, 26, 27, 0.05); } + border-bottom: 1px solid var(--arrowpanel-dimmed); } #customization-lwtheme-menu-recommended { - border-top: 1px solid rgba(24, 26, 27, 0.05); - border-bottom: 1px solid rgba(24, 26, 27, 0.05); } + border-top: 1px solid var(--arrowpanel-dimmed); + border-bottom: 1px solid var(--arrowpanel-dimmed); } #customization-lwtheme-menu-footer { - background: linear-gradient(rgba(24, 26, 27, 0.05) 60%, transparent) border-box; - border-top: 1px solid rgba(24, 26, 27, 0.05); + background: linear-gradient(var(--arrowpanel-dimmed) 60%, transparent) border-box; + border-top: 1px solid var(--arrowpanel-dimmed); margin-bottom: -10px; } .customization-lwtheme-menu-footeritem { -moz-appearance: none; -moz-box-flex: 1; - color: gray; + color: inherit; border-style: none; padding: 10px; margin-left: 0; margin-right: 0; } .customization-lwtheme-menu-footeritem:hover { - background: linear-gradient(rgba(24, 26, 27, 0.08) 40%, transparent) padding-box; } + background: linear-gradient(var(--arrowpanel-dimmed) 40%, transparent) padding-box; } .customization-lwtheme-menu-footeritem:first-child { - border-inline-end: 1px solid rgba(24, 26, 27, 0.15); } + border-inline-end: 1px solid var(--panel-separator-color); } /* 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 @@ -4417,9 +3937,11 @@ toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { /* UI Tour */ #UITourHighlightContainer { -moz-appearance: none; + -moz-window-shadow: none; border: none; background-color: transparent; - /* This is a buffer to compensate for the movement in the "wobble" effect */ + /* This is a buffer to compensate for the movement in the "wobble" effect, + and for the box-shadow of #UITourHighlight. */ padding: 4px; } #UITourHighlight { @@ -4670,70 +4192,36 @@ notification.heartbeat { #context-navigation > .menuitem-iconic > .menu-iconic-left { -moz-appearance: none; } +#context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon { + width: 16px; + height: 16px; + margin: 7px; + filter: url(chrome://browser/skin/filters.svg#fill); + fill: currentColor; } + #context-back { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back"); } -#context-back[_moz-menuactive=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-active"); } - -#context-back[disabled=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-disabled"); } - #context-forward { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward"); } -#context-forward[_moz-menuactive=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-active"); } - -#context-forward[disabled=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-disabled"); } - #context-reload { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload"); } -#context-reload[_moz-menuactive=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-active"); } - -#context-reload[disabled=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-disabled"); } - #context-stop { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop"); } -#context-stop[_moz-menuactive=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-active"); } - -#context-stop[disabled=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-disabled"); } - #context-bookmarkpage { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark"); } -#context-bookmarkpage[_moz-menuactive=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-active"); } - -#context-bookmarkpage[disabled=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); } - #context-bookmarkpage[starred=true] { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); } -#context-bookmarkpage[starred=true][_moz-menuactive=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); } - -#context-bookmarkpage[starred=true][disabled=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); } - #context-back:-moz-locale-dir(rtl), #context-forward:-moz-locale-dir(rtl), #context-reload:-moz-locale-dir(rtl) { transform: scaleX(-1); } -#context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon { - width: 16px; - height: 16px; - margin: 7px; } - #context-media-eme-learnmore { list-style-image: url("chrome://browser/skin/drm-icon.svg#chains"); } diff --git a/arc-firefox-theme/chrome/browser/searchbar.css b/arc-firefox-theme/chrome/browser/searchbar.css index f1544af..130b90a 100644 --- a/arc-firefox-theme/chrome/browser/searchbar.css +++ b/arc-firefox-theme/chrome/browser/searchbar.css @@ -132,12 +132,14 @@ menuitem[cmd="cmd_clearhistory"][disabled] { } .search-panel-tree { - border-top: 1px solid #ccc !important; + border-top: 1px solid var(--panel-separator-color) !important; } .search-panel-header { font-weight: normal; - border-top: 1px solid rgba(0, 0, 0, 0.2); + background-color: var(--arrowpanel-dimmed); + border: none; + border-top: 1px solid var(--panel-separator-color); padding: 3px 5px; color: GrayText; } @@ -152,12 +154,12 @@ menuitem[cmd="cmd_clearhistory"][disabled] { } .search-panel-input-value { - color: Highlight; + color: -moz-fieldtext; } .search-panel-one-offs { margin: 0 !important; - border-top: 1px solid rgba(0, 0, 0, 0.2); + border-top: 1px solid var(--panel-separator-color); } .searchbar-engine-one-off-item { @@ -166,12 +168,13 @@ menuitem[cmd="cmd_clearhistory"][disabled] { border: none; min-width: 48px; height: 32px; - margin: 0 0; - padding: 0 0; - background: none; - background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAWCAYAAAABxvaqAAAABmJLR0QA/wD/AP+gvaeTAAAAFElEQVQI12NgYGAwZmJgYGCgBwEAHpIAXs+dj/cAAAAASUVORK5CYII='); + margin: 0; + padding: 0; + background: linear-gradient(transparent 15%, var(--panel-separator-color) 15%, var(--panel-separator-color) 85%, transparent 85%); + background-size: 1px auto; background-repeat: no-repeat; background-position: right center; + color: GrayText; } .searchbar-engine-one-off-item:-moz-locale-dir(rtl) { @@ -180,16 +183,25 @@ menuitem[cmd="cmd_clearhistory"][disabled] { .searchbar-engine-one-off-item:not(.last-row) { box-sizing: content-box; - border-bottom: 1px solid rgba(0, 0, 0, 0.2); + border-bottom: 1px solid var(--panel-separator-color); +} + +.search-setting-button-compact { + border-bottom: none !important; } -.searchbar-engine-one-off-item.last-of-row { +.search-panel-one-offs:not([compact=true]) > .searchbar-engine-one-off-item.last-of-row, +.search-panel-one-offs[compact=true] > .searchbar-engine-one-off-item.last-of-row:not(.dummy), +.search-panel-one-offs[compact=true] > .searchbar-engine-one-off-item.dummy:not(.last-of-row), +.search-panel-one-offs[compact=true] > .searchbar-engine-one-off-item.last-engine, +.search-setting-button-compact { background-image: none; } .searchbar-engine-one-off-item[selected] { background-color: Highlight; background-image: none; + color: HighlightText; } .searchbar-engine-one-off-item > .button-box { @@ -223,7 +235,7 @@ menuitem[cmd="cmd_clearhistory"][disabled] { } .addengine-item:first-of-type { - border-top: 1px solid rgba(0, 0, 0, 0.2); + border-top: 1px solid var(--panel-separator-color); } .addengine-item[selected] { @@ -286,14 +298,16 @@ menuitem[cmd="cmd_clearhistory"][disabled] { .search-setting-button { -moz-appearance: none; - border: none; - border-top: 1px solid rgba(0, 0, 0, 0.2); margin: 0; min-height: 32px; } .search-setting-button[selected] { - background-color: Highlight; - color: HighlightText; - border-top-color: #bdbebe; + background-color: var(--arrowpanel-dimmed-further); +} + +.search-setting-button-compact > .button-box > .button-icon { + list-style-image: url("chrome://browser/skin/gear.svg"); + filter: url(chrome://browser/skin/filters.svg#fill); + fill: currentColor; } diff --git a/arc-firefox-theme/chrome/browser/social/chat-icons.svg b/arc-firefox-theme/chrome/browser/social/chat-icons.svg deleted file mode 100644 index c9b3ebf..0000000 --- a/arc-firefox-theme/chrome/browser/social/chat-icons.svg +++ /dev/null @@ -1,51 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/tabbrowser/tab-audio.svg b/arc-firefox-theme/chrome/browser/tabbrowser/tab-audio.svg index aeb3e80..98866ca 100644 --- a/arc-firefox-theme/chrome/browser/tabbrowser/tab-audio.svg +++ b/arc-firefox-theme/chrome/browser/tabbrowser/tab-audio.svg @@ -2,98 +2,14 @@ - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + diff --git a/arc-firefox-theme/chrome/browser/toolbarbutton-dropdown-arrow.png b/arc-firefox-theme/chrome/browser/toolbarbutton-dropdown-arrow.png new file mode 100644 index 0000000..08d9da1 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/toolbarbutton-dropdown-arrow.png differ diff --git a/arc-firefox-theme/chrome/browser/tracking-protection-16.svg b/arc-firefox-theme/chrome/browser/tracking-protection-16.svg old mode 100755 new mode 100644 index ebe6b5f..991365b --- a/arc-firefox-theme/chrome/browser/tracking-protection-16.svg +++ b/arc-firefox-theme/chrome/browser/tracking-protection-16.svg @@ -1,21 +1,85 @@ - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/tracking-protection-disabled-16.svg b/arc-firefox-theme/chrome/browser/tracking-protection-disabled-16.svg deleted file mode 100755 index b0c68d2..0000000 --- a/arc-firefox-theme/chrome/browser/tracking-protection-disabled-16.svg +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - - - - - - - - - - - - - -- cgit v1.2.3