From a5bdec9a680e926d8b9e828fe748fb50a57ed914 Mon Sep 17 00:00:00 2001 From: wolfbeast Date: Mon, 19 Nov 2018 01:47:32 +0100 Subject: Replace toolbar PNG bitmaps with SVG vectors. This makes the main toolbar icon set use SVG vector images, so they are prepared for HiDPI use. The download indicator "attention" state (green arrow) has been folded into the main toolbar image. This is a direct replacement of the previous images (and not separate icon files) to have a direct drop-in replacement for the previously used files. Tag #576 --- .../palemoon/themes/windows/Toolbar-glass.svg | 2304 ++++++++++++++++++++ .../palemoon/themes/windows/Toolbar-inverted.svg | 376 ++++ application/palemoon/themes/windows/Toolbar.svg | 1486 +++++++++++++ application/palemoon/themes/windows/browser.css | 6 +- .../themes/windows/downloads/downloads.css | 19 +- application/palemoon/themes/windows/jar.mn | 7 +- 6 files changed, 4185 insertions(+), 13 deletions(-) create mode 100644 application/palemoon/themes/windows/Toolbar-glass.svg create mode 100644 application/palemoon/themes/windows/Toolbar-inverted.svg create mode 100644 application/palemoon/themes/windows/Toolbar.svg (limited to 'application/palemoon/themes') diff --git a/application/palemoon/themes/windows/Toolbar-glass.svg b/application/palemoon/themes/windows/Toolbar-glass.svg new file mode 100644 index 000000000..49f21470f --- /dev/null +++ b/application/palemoon/themes/windows/Toolbar-glass.svg @@ -0,0 +1,2304 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/application/palemoon/themes/windows/Toolbar-inverted.svg b/application/palemoon/themes/windows/Toolbar-inverted.svg new file mode 100644 index 000000000..69526caf3 --- /dev/null +++ b/application/palemoon/themes/windows/Toolbar-inverted.svg @@ -0,0 +1,376 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/application/palemoon/themes/windows/Toolbar.svg b/application/palemoon/themes/windows/Toolbar.svg new file mode 100644 index 000000000..5831fce37 --- /dev/null +++ b/application/palemoon/themes/windows/Toolbar.svg @@ -0,0 +1,1486 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/application/palemoon/themes/windows/browser.css b/application/palemoon/themes/windows/browser.css index 45f0e066c..e4f5f679f 100644 --- a/application/palemoon/themes/windows/browser.css +++ b/application/palemoon/themes/windows/browser.css @@ -39,9 +39,9 @@ --toolbarbutton-border-radius: 2.5px; --toolbarbutton-border-color: hsla(210,54%,20%,.2); - --toolbarbutton-image: url("chrome://browser/skin/Toolbar.png"); - --toolbarbutton-glass-image: url("chrome://browser/skin/Toolbar-glass.png"); - --toolbarbutton-inverted-image: url("chrome://browser/skin/Toolbar-inverted.png"); + --toolbarbutton-image: url("chrome://browser/skin/Toolbar.svg"); + --toolbarbutton-glass-image: url("chrome://browser/skin/Toolbar-glass.svg"); + --toolbarbutton-inverted-image: url("chrome://browser/skin/Toolbar-inverted.svg"); --tab-background: linear-gradient(transparent, hsla(0,0%,45%,.1) 1px, hsla(0,0%,32%,.2) 80%, hsla(0,0%,0%,.2)); --tab-background-hover: linear-gradient(hsla(0,0%,100%,.3) 1px, hsla(0,0%,75%,.2) 80%, hsla(0,0%,60%,.2)); diff --git a/application/palemoon/themes/windows/downloads/downloads.css b/application/palemoon/themes/windows/downloads/downloads.css index 91ea652ed..f16989655 100644 --- a/application/palemoon/themes/windows/downloads/downloads.css +++ b/application/palemoon/themes/windows/downloads/downloads.css @@ -326,6 +326,11 @@ toolbar[brighttext] #downloads-indicator-icon { 0, 108, 18, 90) center no-repeat; } +#downloads-indicator[attention] > #downloads-indicator-anchor > #downloads-indicator-icon { + background: -moz-image-rect(var(--toolbarbutton-image), + 19, 108, 36, 90) center no-repeat; +} + @media (-moz-windows-compositor) { :-moz-any(#toolbar-menubar, #nav-bar[tabsontop=false]) #downloads-indicator-icon:not(:-moz-lwtheme), #TabsToolbar[tabsontop=true] #downloads-indicator-icon:not(:-moz-lwtheme), @@ -333,10 +338,12 @@ toolbar[brighttext] #downloads-indicator-icon { background: -moz-image-rect(var(--toolbarbutton-glass-image), 0, 108, 18, 90) center no-repeat; } + #downloads-indicator[attention] > #downloads-indicator-anchor > #downloads-indicator-icon { + background: -moz-image-rect(var(--toolbarbutton-glass-image), + 19, 108, 36, 90) center no-repeat; } -#downloads-indicator[attention] > #downloads-indicator-anchor > #downloads-indicator-icon { - background-image: url("chrome://browser/skin/downloads/download-glow.png"); + } /* In the next few rules, we use :not([counter]) as a shortcut that is @@ -360,10 +367,10 @@ toolbar[brighttext] #downloads-indicator:not([counter]) > #downloads-indicator-a background: -moz-image-rect(var(--toolbarbutton-glass-image), 0, 108, 18, 90) center no-repeat; } -} - -#downloads-indicator:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { - background-image: url("chrome://browser/skin/downloads/download-glow.png"); + #downloads-indicator:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { + background: -moz-image-rect(var(--toolbarbutton-glass-image), + 19, 108, 36, 90) center no-repeat; + } } /*** Download notifications ***/ diff --git a/application/palemoon/themes/windows/jar.mn b/application/palemoon/themes/windows/jar.mn index 0a4342d40..eb5edb3c1 100644 --- a/application/palemoon/themes/windows/jar.mn +++ b/application/palemoon/themes/windows/jar.mn @@ -60,9 +60,9 @@ browser.jar: skin/classic/browser/Secure24.png skin/classic/browser/setDesktopBackground.css skin/classic/browser/slowStartup-16.png - skin/classic/browser/Toolbar.png - skin/classic/browser/Toolbar-glass.png - skin/classic/browser/Toolbar-inverted.png + skin/classic/browser/Toolbar.svg + skin/classic/browser/Toolbar-glass.svg + skin/classic/browser/Toolbar-inverted.svg skin/classic/browser/toolbarbutton-dropdown-arrow.png skin/classic/browser/toolbarbutton-dropdown-arrow-inverted.png skin/classic/browser/urlbar-arrow.png @@ -79,7 +79,6 @@ browser.jar: skin/classic/browser/webRTC-sharingDevice-16.png #endif skin/classic/browser/downloads/buttons.png (downloads/buttons.png) - skin/classic/browser/downloads/download-glow.png (downloads/download-glow.png) skin/classic/browser/downloads/download-notification-finish.png (downloads/download-notification-finish.png) skin/classic/browser/downloads/download-notification-start.png (downloads/download-notification-start.png) skin/classic/browser/downloads/download-summary.png (downloads/download-summary.png) -- cgit v1.2.3