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 571c5aac5e
commit fd3a32836e
5 changed files with 31 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 {
@ -199,7 +199,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 {
@ -341,7 +341,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 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M8 1c-1.108 0-2 .892-2 2v4c0 1.108.892 2 2 2s2-.892 2-2V3c0-1.108-.892-2-2-2zM4 5c-.554 0-1 .446-1 1v1a4.988 4.988 0 0 0 4 4.9V13H5v2h6v-2H9v-1.1c2.287-.46 4-2.473 4-4.9V6c0-.554-.446-1-1-1s-1 .446-1 1v1c0 1.662-1.338 3-3 3S5 8.662 5 7V6c0-.554-.446-1-1-1z" fill-rule="evenodd" fill="#fff"/></svg>
<?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">
<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: 369 B

After

Width:  |  Height:  |  Size: 1012 B

View File

@ -1,4 +1,4 @@
<?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">
<path d="m8.6328 0.63477c-0.2556 0-0.5112 0.0971-0.707 0.29296-0.3918 0.39177-0.3918 1.0224 0 1.4141l4.6582 4.6582h-11.584c-0.554 0-1 0.446-1 1s0.446 1 1 1h11.586l-4.6583 4.658c-0.3917 0.392-0.3917 1.023 0 1.414 0.3918 0.392 1.0224 0.392 1.4141 0l6.3632-6.363v-0.002h0.002c0.093-0.093 0.166-0.2041 0.217-0.3281l0.002-0.0019v-0.002c0.02-0.0508 0.019-0.1053 0.031-0.1582 0.016-0.0718 0.043-0.14 0.043-0.2168 0-0.0714-0.027-0.1341-0.041-0.2012-0.012-0.0578-0.012-0.1202-0.033-0.1738v-0.002c-0.001-0.0013-0.002-0.0026-0.002-0.0039-0.051-0.1233-0.124-0.2335-0.217-0.3261-0.001-0.0007-0.001-0.0013-0.002-0.002l-6.3632-6.3633c-0.1959-0.19583-0.4534-0.29293-0.709-0.29293z" fill-rule="evenodd"/>
</svg>

Before

Width:  |  Height:  |  Size: 829 B

After

Width:  |  Height:  |  Size: 849 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 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M3 3c-1.108 0-2 .892-2 2v6c0 1.108.892 2 2 2h6c1.108 0 2-.892 2-2V9.666L15 13V3l-4 3.334V5c0-1.108-.892-2-2-2z" fill="#fff"/></svg>
<?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">
<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: 203 B

After

Width:  |  Height:  |  Size: 660 B