add dark background fade to icons to make them visible on light backgrounds

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
This commit is contained in:
Jan-Christoph Borchardt 2016-11-15 17:40:07 +01:00
parent 46a6cbadfc
commit 9789d4985a
4 changed files with 25 additions and 7 deletions

View File

@ -118,7 +118,7 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading-
background-image: url('../img/actions/audio.svg?v=1');
}
.icon-audio-white {
background-image: url('../img/actions/audio-white.svg?v=1');
background-image: url('../img/actions/audio-white.svg?v=2');
}
.icon-caret {
@ -196,7 +196,7 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading-
background-image: url('../img/actions/fullscreen.svg?v=1');
}
.icon-fullscreen-white {
background-image: url('../img/actions/fullscreen-white.svg?v=1');
background-image: url('../img/actions/fullscreen-white.svg?v=2');
}
.icon-history {
@ -334,7 +334,7 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading-
background-image: url('../img/actions/video.svg?v=1');
}
.icon-video-white {
background-image: url('../img/actions/video-white.svg?v=1');
background-image: url('../img/actions/video-white.svg?v=2');
}
.icon-view-close {

View File

@ -1,4 +1,10 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1">
<path d="m8 1c-1.108 0-2 0.892-2 2v4c0 1.108 0.892 2 2 2s2-0.892 2-2v-4c0-1.108-0.892-2-2-2zm-4 4c-0.554 0-1 0.446-1 1v1c0 2.4272 1.7126 4.439 4 4.9v1.1h-2v2h6v-2h-2v-1.1c2.287-0.461 4-2.4728 4-4.9v-1c0-0.554-0.446-1-1-1s-1 0.446-1 1v1c0 1.662-1.338 3-3 3s-3-1.338-3-3v-1c0-0.554-0.446-1-1-1z" fill-rule="evenodd" fill="#fff"/>
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" viewBox="0 0 16 16">
<defs>
<filter id="a" style="color-interpolation-filters:sRGB" height="1.3086" width="1.432" y="-.15429" x="-0.216">
<feGaussianBlur stdDeviation="0.90000044"/>
</filter>
</defs>
<path opacity=".5" d="m8 1c-1.108 0-2 0.892-2 2v4c0 1.108 0.892 2 2 2s2-0.892 2-2v-4c0-1.108-0.892-2-2-2zm-4 4c-0.554 0-1 0.446-1 1v1a4.988 4.988 0 0 0 4 4.9v1.1h-2v2h6v-2h-2v-1.1c2.287-0.46 4-2.473 4-4.9v-1c0-0.554-0.446-1-1-1s-1 0.446-1 1v1c0 1.662-1.338 3-3 3s-3-1.338-3-3v-1c0-0.554-0.446-1-1-1z" fill-rule="evenodd" filter="url(#a)"/>
<path fill="#fff" d="m8 1c-1.108 0-2 0.892-2 2v4c0 1.108 0.892 2 2 2s2-0.892 2-2v-4c0-1.108-0.892-2-2-2zm-4 4c-0.554 0-1 0.446-1 1v1a4.988 4.988 0 0 0 4 4.9v1.1h-2v2h6v-2h-2v-1.1c2.287-0.46 4-2.473 4-4.9v-1c0-0.554-0.446-1-1-1s-1 0.446-1 1v1c0 1.662-1.338 3-3 3s-3-1.338-3-3v-1c0-0.554-0.446-1-1-1z" fill-rule="evenodd"/>
</svg>

Before

Width:  |  Height:  |  Size: 469 B

After

Width:  |  Height:  |  Size: 1012 B

View File

@ -1,4 +1,10 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" viewBox="0 0 16 16">
<path d="m8 1c-0.554 0-1 0.446-1 1s0.446 1 1 1h5v5c0 0.554 0.446 1 1 1s1-0.446 1-1v-6c0-0.554-0.446-1-1-1h-6zm-6 6c-0.554 0-1 0.446-1 1v6c0 0.554 0.446 1 1 1h6c0.554 0 1-0.446 1-1s-0.446-1-1-1h-5v-5c0-0.554-0.446-1-1-1z" fill-rule="evenodd" fill="#fff"/>
<defs>
<filter id="a" style="color-interpolation-filters:sRGB" height="1.36" width="1.36" y="-.18" x="-.18">
<feGaussianBlur stdDeviation="1.05"/>
</filter>
</defs>
<path opacity=".5" d="m8 1c-0.554 0-1 0.446-1 1s0.446 1 1 1h5v5c0 0.554 0.446 1 1 1s1-0.446 1-1v-6c0-0.554-0.446-1-1-1h-6zm-6 6c-0.554 0-1 0.446-1 1v6c0 0.554 0.446 1 1 1h6c0.554 0 1-0.446 1-1s-0.446-1-1-1h-5v-5c0-0.554-0.446-1-1-1z" fill-rule="evenodd" filter="url(#a)"/>
<path fill-rule="evenodd" fill="#fff" d="m8 1c-0.554 0-1 0.446-1 1s0.446 1 1 1h5v5c0 0.554 0.446 1 1 1s1-0.446 1-1v-6c0-0.554-0.446-1-1-1h-6zm-6 6c-0.554 0-1 0.446-1 1v6c0 0.554 0.446 1 1 1h6c0.554 0 1-0.446 1-1s-0.446-1-1-1h-5v-5c0-0.554-0.446-1-1-1z"/>
</svg>

Before

Width:  |  Height:  |  Size: 416 B

After

Width:  |  Height:  |  Size: 864 B

View File

@ -1,4 +1,10 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1">
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" viewBox="0 0 16 16">
<defs>
<filter id="a" style="color-interpolation-filters:sRGB" height="1.432" width="1.3086" y="-.216" x="-.15429">
<feGaussianBlur stdDeviation="0.9"/>
</filter>
</defs>
<path opacity=".5" d="m3 3c-1.108 0-2 0.892-2 2v6c0 1.108 0.892 2 2 2h6c1.108 0 2-0.892 2-2v-1.334l4 3.334v-10l-4 3.334v-1.334c0-1.108-0.892-2-2-2z" filter="url(#a)"/>
<path d="m3 3c-1.108 0-2 0.892-2 2v6c0 1.108 0.892 2 2 2h6c1.108 0 2-0.892 2-2v-1.334l4 3.334v-10l-4 3.334v-1.334c0-1.108-0.892-2-2-2z" fill="#fff"/>
</svg>

Before

Width:  |  Height:  |  Size: 291 B

After

Width:  |  Height:  |  Size: 660 B