This commit is contained in:
vinceliuice 2020-12-29 11:15:37 +08:00
parent 067b426eac
commit 696acdda00
10 changed files with 62 additions and 77 deletions

View File

@ -0,0 +1,21 @@
<svg width="40" height="24" version="1.1" viewBox="0 0 40 24" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="filter1038" x="-.0216" y="-.070497" width="1.0432" height="1.141" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation="0.36"/>
</filter>
<filter id="filter1034" x="-.037565" y="-.037565" width="1.0751" height="1.0751" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation="0.36"/>
</filter>
<linearGradient id="linearGradient1254" x1="22" x2="22" y1="1052.4" y2="1028.4" gradientUnits="userSpaceOnUse">
<stop stop-color="#ffffff" stop-opacity=".25" offset="0"/>
<stop stop-color="#ffffff" stop-opacity=".35" offset="1"/>
</linearGradient>
</defs>
<g transform="translate(0 -1028.4)">
<rect x="-3.8809e-8" y="1028.4" width="40" height="24" rx="12" ry="12" fill="url(#linearGradient1254)" stroke-linecap="round" stroke-linejoin="round" stroke-width=".495" style="paint-order:markers stroke fill"/>
<rect x="-3.8809e-8" y="1028.3" width="40" height="24" opacity="0" stroke-width=".87706"/>
<circle cx="12" cy="1040.9" r="11.5" fill="#000000" filter="url(#filter1034)" opacity=".1" stroke-width="1.2778"/>
<circle cx="12" cy="1040.4" r="11" fill="#ffffff" stroke-width="1.2222"/>
<path d="m12 1028.4c-6.648 0-12 5.352-12 12 0 0.086 0.011872 0.1699 0.013672 0.2559 0.13601-6.2563 5.4243-11.256 11.986-11.256h16c6.562 0 11.85 4.9996 11.986 11.256 0.0018-0.086 0.01367-0.1695 0.01367-0.2559 0-6.648-5.352-12-12-12z" fill="#000000" filter="url(#filter1038)" opacity=".1" stroke-linecap="round" stroke-linejoin="round" stroke-width=".495" style="paint-order:markers stroke fill"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -0,0 +1,21 @@
<svg width="40" height="24" version="1.1" viewBox="0 0 40 24" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="filter1038" x="-.0216" y="-.070497" width="1.0432" height="1.141" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation="0.36"/>
</filter>
<filter id="filter1034" x="-.037565" y="-.037565" width="1.0751" height="1.0751" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation="0.36"/>
</filter>
<linearGradient id="linearGradient1254" x1="22" x2="22" y1="1052.4" y2="1028.4" gradientUnits="userSpaceOnUse">
<stop stop-color="#000000" stop-opacity=".25" offset="0"/>
<stop stop-color="#010101" stop-opacity=".35" offset="1"/>
</linearGradient>
</defs>
<g transform="translate(0 -1028.4)">
<rect x="-3.8809e-8" y="1028.4" width="40" height="24" rx="12" ry="12" fill="url(#linearGradient1254)" stroke-linecap="round" stroke-linejoin="round" stroke-width=".495" style="paint-order:markers stroke fill"/>
<rect x="-3.8809e-8" y="1028.3" width="40" height="24" opacity="0" stroke-width=".87706"/>
<circle cx="12" cy="1040.9" r="11.5" fill="#000000" filter="url(#filter1034)" opacity=".1" stroke-width="1.2778"/>
<circle cx="12" cy="1040.4" r="11" fill="#ffffff" stroke-width="1.2222"/>
<path d="m12 1028.4c-6.648 0-12 5.352-12 12 0 0.086 0.011872 0.1699 0.013672 0.2559 0.13601-6.2563 5.4243-11.256 11.986-11.256h16c6.562 0 11.85 4.9996 11.986 11.256 0.0018-0.086 0.01367-0.1695 0.01367-0.2559 0-6.648-5.352-12-12-12z" fill="#000000" filter="url(#filter1038)" opacity=".1" stroke-linecap="round" stroke-linejoin="round" stroke-width=".495" style="paint-order:markers stroke fill"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -1,13 +0,0 @@
<svg width="40" height="24" version="1.1" viewBox="0 0 40 24" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="m" x="-.17328" y="-.17328" width="1.3466" height="1.3466" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation="1.2996"/>
</filter>
<linearGradient id="a" x1="41" x2="41" y1="1032.4" y2="1050.4" gradientTransform="matrix(.88889 0 0 .88889 -25.444 -913.65)" gradientUnits="userSpaceOnUse">
<stop stop-color="#ffffff" offset="0"/>
</linearGradient>
</defs>
<rect x="1" y="2" width="38" height="20" rx="10" ry="10" fill="#000000" opacity=".25" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="paint-order:markers stroke fill"/>
<circle transform="matrix(.93214 0 0 .93214 -195.25 113.81)" cx="221.26" cy="-108.14" r="9" filter="url(#m)" opacity=".25"/>
<circle cx="11" cy="12" r="8" fill="url(#a)" stroke-width=".88889"/>
</svg>

Before

Width:  |  Height:  |  Size: 896 B

View File

@ -1,13 +1,20 @@
<svg width="40" height="24" version="1.1" viewBox="0 0 40 24" xmlns="http://www.w3.org/2000/svg">
<svg width="40" height="24" version="1.1" viewBox="0 0 40 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="m" x="-.17328" y="-.17328" width="1.3466" height="1.3466" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation="1.2996"/>
<filter id="filter1034" x="-.037565" y="-.037565" width="1.0751" height="1.0751" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation="0.36"/>
</filter>
<linearGradient id="a" x1="41" x2="41" y1="1032.4" y2="1050.4" gradientTransform="matrix(.88889 0 0 .88889 -7.4444 -913.65)" gradientUnits="userSpaceOnUse">
<filter id="filter1038" x="-.0216" y="-.070497" width="1.0432" height="1.141" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation="0.36"/>
</filter>
<linearGradient id="linearGradient862" x1="19" x2="19" y1="24" gradientUnits="userSpaceOnUse">
<stop stop-color="#ffffff" offset="0"/>
<stop stop-color="#ffffff" stop-opacity="0" offset="1"/>
</linearGradient>
</defs>
<rect x="1" y="2" width="38" height="20" rx="10" ry="10" fill="#0860f2" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="paint-order:markers stroke fill"/>
<circle transform="matrix(.93214 0 0 .93214 -177.25 113.81)" cx="221.26" cy="-108.14" r="9" filter="url(#m)" opacity=".25"/>
<circle cx="29" cy="12" r="8" fill="url(#a)" stroke-width=".88889"/>
<rect width="40" height="24" rx="12" ry="12" fill="#0860f2" stroke-linecap="round" stroke-linejoin="round" stroke-width=".495" style="paint-order:markers stroke fill"/>
<rect width="40" height="24" rx="12" ry="12" fill="url(#linearGradient862)" opacity=".3" stroke-linecap="round" stroke-linejoin="round" stroke-width=".495" style="paint-order:markers stroke fill"/>
<rect y="-.038" width="40" height="24" opacity="0" stroke-width=".87706"/>
<circle cx="28" cy="12.5" r="11.5" fill="#000000" filter="url(#filter1034)" opacity=".1" stroke-width="1.2778"/>
<circle cx="28" cy="12" r="11" fill="#ffffff" stroke-width="1.2222"/>
<path d="m12 0c-6.648 0-12 5.352-12 12 0 0.086409 0.011872 0.1699 0.013672 0.25586 0.13601-6.2562 5.4243-11.256 11.986-11.256h16c6.562 0 11.85 4.9996 11.986 11.256 0.0018-0.085962 0.013672-0.16945 0.013672-0.25586 0-6.648-5.352-12-12-12h-16z" fill="#000000" filter="url(#filter1038)" opacity=".1" stroke-linecap="round" stroke-linejoin="round" stroke-width=".495" style="paint-order:markers stroke fill"/>
</svg>

Before

Width:  |  Height:  |  Size: 882 B

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -1,17 +1,18 @@
<svg width="40" height="24" version="1.1" viewBox="0 0 40 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="linearGradient907" x1="20" x2="20" y1="23.962" gradientUnits="userSpaceOnUse">
<stop stop-color="#397df5" offset="0"/>
<stop stop-color="#256bf5" offset="1"/>
</linearGradient>
<filter id="filter1034" x="-.037565" y="-.037565" width="1.0751" height="1.0751" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation="0.36"/>
</filter>
<filter id="filter1038" x="-.0216" y="-.070497" width="1.0432" height="1.141" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation="0.36"/>
</filter>
<linearGradient id="linearGradient862" x1="19" x2="19" y1="24" gradientUnits="userSpaceOnUse">
<stop stop-color="#ffffff" offset="0"/>
<stop stop-color="#ffffff" stop-opacity="0" offset="1"/>
</linearGradient>
</defs>
<rect width="40" height="24" rx="12" ry="12" fill="url(#linearGradient907)" stroke-linecap="round" stroke-linejoin="round" stroke-width=".495" style="paint-order:markers stroke fill"/>
<rect width="40" height="24" rx="12" ry="12" fill="#0860f2" stroke-linecap="round" stroke-linejoin="round" stroke-width=".495" style="paint-order:markers stroke fill"/>
<rect width="40" height="24" rx="12" ry="12" fill="url(#linearGradient862)" opacity=".3" stroke-linecap="round" stroke-linejoin="round" stroke-width=".495" style="paint-order:markers stroke fill"/>
<rect y="-.038" width="40" height="24" opacity="0" stroke-width=".87706"/>
<circle cx="28" cy="12.5" r="11.5" fill="#000000" filter="url(#filter1034)" opacity=".1" stroke-width="1.2778"/>
<circle cx="28" cy="12" r="11" fill="#ffffff" stroke-width="1.2222"/>

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -1,12 +1,3 @@
@keyframes header_ripple_effect {
from {
background-image: radial-gradient(circle farthest-corner at center, #373737 0%, transparent 0%);
}
to {
background-image: radial-gradient(circle farthest-corner at center, #373737 100%, transparent 0%);
}
}
* {
padding: 0;
background-clip: padding-box;

View File

@ -1,12 +1,3 @@
@keyframes header_ripple_effect {
from {
background-image: radial-gradient(circle farthest-corner at center, #373737 0%, transparent 0%);
}
to {
background-image: radial-gradient(circle farthest-corner at center, #373737 100%, transparent 0%);
}
}
* {
padding: 0;
background-clip: padding-box;

View File

@ -1,12 +1,3 @@
@keyframes header_ripple_effect {
from {
background-image: radial-gradient(circle farthest-corner at center, #ffffff 0%, transparent 0%);
}
to {
background-image: radial-gradient(circle farthest-corner at center, #ffffff 100%, transparent 0%);
}
}
* {
padding: 0;
background-clip: padding-box;

View File

@ -1,12 +1,3 @@
@keyframes header_ripple_effect {
from {
background-image: radial-gradient(circle farthest-corner at center, #ffffff 0%, transparent 0%);
}
to {
background-image: radial-gradient(circle farthest-corner at center, #ffffff 100%, transparent 0%);
}
}
* {
padding: 0;
background-clip: padding-box;

View File

@ -1,19 +1,3 @@
// Animations
@keyframes header_ripple_effect {
from {
background-image: radial-gradient(circle farthest-corner at center,
$header_bg 0%,
transparent 0%);
}
to {
background-image: radial-gradient(circle farthest-corner at center,
$header_bg 100%,
transparent 0%);
}
}
// Drawing mixins
// Solid color image
@function _solid($c) {