root
427 lines
20 KiB
YAML
427 lines
20 KiB
YAML
#
|
|
# File : sak-svg-definitions.yaml
|
|
# Project : Home Assistant
|
|
# Repository: https://github.com/AmoebeLabs/Home-Assistant-Config
|
|
#
|
|
# Author: Mars @ AmoebeLabs.com
|
|
#
|
|
# License: CC BY-SA, https://creativecommons.org/licenses/by/4.0/
|
|
#
|
|
# -----
|
|
# Description:
|
|
# Swiss Army Knife SVG <def> definitions
|
|
#
|
|
###############################################################################
|
|
#sak_svg_definitions:
|
|
# Light color temperature gradient
|
|
# HA uses: linear-gradient( right, rgb(255, 160, 0) 0%, white 50%, rgb(166, 209, 255) 100% );
|
|
# Then converted to SVG using https://www.kmhcreative.com/downloads/CSS2SVG.htm gives:
|
|
|
|
# ===== Inset shadow filters =====
|
|
|
|
# SVG inner shadow on rgba fill: https://codepen.io/salsita/pen/qBbmYMw
|
|
# Damien Jurado Poster Rebound: https://codepen.io/dylanbaumann/pen/wevMwB
|
|
- descr: sak-inset-1 filter
|
|
content: |
|
|
<filter id="sak-inset-1" x="-50%" y="-50%" width="400%" height="400%">
|
|
<feComponentTransfer in=SourceAlpha>
|
|
<feFuncA type="table" tableValues="1 0" />
|
|
</feComponentTransfer>
|
|
<feGaussianBlur stdDeviation="1"/>
|
|
<feOffset dx="0" dy="1" result="offsetblur"/>
|
|
<feFlood flood-color="rgba(0, 0, 0, 0.3)" result="color"/>
|
|
<feComposite in2="offsetblur" operator="in"/>
|
|
<feComposite in2="SourceAlpha" operator="in" />
|
|
<feMerge>
|
|
<feMergeNode in="SourceGraphic" />
|
|
<feMergeNode />
|
|
</feMerge>
|
|
</filter>
|
|
|
|
# SVG Inset Shadow: https://codepen.io/mattrosno/pen/zxpNwd
|
|
- descr: sak-inset-2 filter
|
|
content: |
|
|
<filter id="sak-inset-2">
|
|
<!-- Shadow Offset -->
|
|
<feOffset
|
|
dx='1'
|
|
dy='1'
|
|
/>
|
|
<!-- Shadow Blur -->
|
|
<feGaussianBlur
|
|
stdDeviation='0.5'
|
|
result='offset-blur'
|
|
/>
|
|
<!-- Invert the drop shadow
|
|
to create an inner shadow -->
|
|
<feComposite
|
|
operator='out'
|
|
in='SourceGraphic'
|
|
in2='offset-blur'
|
|
result='inverse'
|
|
/>
|
|
<!-- Color & Opacity -->
|
|
<feFlood
|
|
flood-color='black'
|
|
flood-opacity='0.4'
|
|
result='color'
|
|
/>
|
|
<!-- Clip color inside shadow -->
|
|
<feComposite
|
|
operator='in'
|
|
in='color'
|
|
in2='inverse'
|
|
result='shadow'
|
|
/>
|
|
<!-- Put shadow over original object -->
|
|
<feComposite
|
|
operator='over'
|
|
in='shadow'
|
|
in2='SourceGraphic'
|
|
/>
|
|
</filter>
|
|
|
|
# ===== Neumorphic filters =====
|
|
- descr: sak-neumorphic filters
|
|
content: |
|
|
<!-- Neumorphic filter -->
|
|
<!-- -->
|
|
<!-- Light Shadow, #FFFFFF at 50%, x:-6, Y:-6, Blur:16 -->
|
|
<!-- Dark Shadow: #d1cdc7 at 50%, x:6, y:6, Blur:16 -->
|
|
<!-- Main Background: #efeeee -->
|
|
<!-- Shape Background: #efeeee -->
|
|
<!-- Optional Border: #fff at 20% Alpha -->
|
|
<!-- Dark Shadow was: 0d2750 -->
|
|
|
|
<!-- 2021.11.17 -->
|
|
<!-- Performance with inset shadow and width/height=150% seems to be optimal setting -->
|
|
<!-- Smaller settings give clipping, and larger settings performance hits -->
|
|
<!-- Absolute settings (userSpaceOnUse) seem to be difficult to find right settings -->
|
|
<filter id="is-1" x="-25%" y="-25%" width="150%" height="150%">
|
|
<feComponentTransfer in=SourceAlpha>
|
|
<feFuncA type="table" tableValues="1 0" />
|
|
</feComponentTransfer>
|
|
<feGaussianBlur stdDeviation="1"/>
|
|
<feOffset dx="2" dy="2" result="offsetblur"/>
|
|
<feFlood flood-color="#0d2750" flood-opacity="0.5" result="color"/>
|
|
<feComposite in2="offsetblur" operator="in"/>
|
|
<feComposite in2="SourceAlpha" operator="in" />
|
|
<feMerge>
|
|
<feMergeNode in="SourceGraphic" />
|
|
<feMergeNode />
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<filter id="is-1b" filterUnits="userSpaceOnUse" x="-200" y="-200" width="1000" height="1000">
|
|
<feComponentTransfer in=SourceAlpha>
|
|
<feFuncA type="table" tableValues="1 0" />
|
|
</feComponentTransfer>
|
|
<feGaussianBlur stdDeviation="1"/>
|
|
<feOffset dx="2" dy="2" result="offsetblur"/>
|
|
<feFlood flood-color="#0d2750" flood-opacity="0.5" result="color"/>
|
|
<feComposite in2="offsetblur" operator="in"/>
|
|
<feComposite in2="SourceAlpha" operator="in" />
|
|
<feMerge>
|
|
<feMergeNode in="SourceGraphic" />
|
|
<feMergeNode />
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<!-- Using feComposite in="offsetblur" operator="in" instead of in2 gives a -->
|
|
<!-- much larger shadow area, much deeper! WHY?? -->
|
|
|
|
<filter id="nm-2" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feComponentTransfer in=SourceAlpha out=transfer>
|
|
<feFuncA type="table" tableValues="1 0" />
|
|
</feComponentTransfer>
|
|
|
|
<feGaussianBlur input="transfer" stdDeviation="5" result="blurdark"/>
|
|
<feOffset input="blurdark" dx="12" dy="12" result="offsetblurdark"/>
|
|
<feFlood input="offsetblurdark" flood-color="#d1cdc7" flood-opacity="0.4" result="colordark"/>
|
|
|
|
<feGaussianBlur input="transfer" stdDeviation="5" result="blurlight"/>
|
|
<feOffset input="blurlight" dx="-12" dy="-12" result="offsetblurlight"/>
|
|
<feFlood input="offsetblurlight" flood-color="white" flood-opacity="0.9" result="colorlight"/>
|
|
|
|
<feComposite in="offsetblurdark" operator="in"/>
|
|
<feComposite in="SourceAlpha" operator="in" />
|
|
|
|
<feMerge>
|
|
<feMergeNode in="SourceGraphic" />
|
|
<feMergeNode />
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<filter id="filter-yoksel" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
|
|
<feFlood flood-color="#eeebe7" flood-opacity="0.7" x="0%" y="0%" width="100%" height="100%" result="flood2"/>
|
|
<feComposite in="flood2" in2="SourceAlpha" operator="out" x="0%" y="0%" width="100%" height="100%" result="composite5"/>
|
|
<feOffset dx="-9" dy="-7" x="0%" y="0%" width="100%" height="100%" in="composite5" result="offset1"/>
|
|
<feGaussianBlur stdDeviation="3 10" x="0%" y="0%" width="100%" height="100%" in="offset1" edgeMode="none" result="blur2"/>
|
|
<feComposite in="merge3" in2="SourceAlpha" operator="in" x="0%" y="0%" width="100%" height="100%" result="composite7"/>
|
|
<feFlood flood-color="#0f0f0f" flood-opacity="1" x="0%" y="0%" width="100%" height="100%" result="flood4"/>
|
|
<feComposite in="flood4" in2="SourceAlpha" operator="out" x="0%" y="0%" width="100%" height="100%" result="composite8"/>
|
|
<feOffset dx="6" dy="6" x="0%" y="0%" width="100%" height="100%" in="merge3" result="offset2"/>
|
|
<feGaussianBlur stdDeviation="3 10" x="0%" y="0%" width="100%" height="100%" in="offset2" edgeMode="none" result="blur3"/>
|
|
<feComposite in="blur3" in2="SourceAlpha" operator="in" x="0%" y="0%" width="100%" height="100%" result="composite9"/>
|
|
<feMerge x="0%" y="0%" width="100%" height="100%" result="merge3">
|
|
<feMergeNode in="SourceGraphic"/>
|
|
<feMergeNode in="composite7"/>
|
|
<feMergeNode in="composite9"/>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<!-- 2021.11.15 -->
|
|
<!-- For some reason, changing the filter width/height from 160% to 600% improves performance on iOS 15 -->
|
|
|
|
<!-- second try... -->
|
|
<filter id="filter" x="-50%" y="-50%" width="300%" height="300%">
|
|
<feFlood flood-color="var(--cs-theme-shadow-lighter)" flood-opacity="1" result="flood2"/>
|
|
<feComposite in="flood2" in2="SourceAlpha" operator="out" result="composite5"/>
|
|
<feOffset dx="-6" dy="-6" in="composite5" result="offset1"/>
|
|
<feGaussianBlur stdDeviation="5" in="offset1" edgeMode="none" result="blur2"/>
|
|
<feComposite in="blur2" in2="SourceAlpha" operator="in" result="composite7"/>
|
|
|
|
<!-- flood-color="#777777" -->
|
|
<feFlood flood-color="var(--cs-theme-shadow-darker)" flood-opacity="1" result="flood4"/>
|
|
<feComposite in="flood4" in2="SourceAlpha" operator="out" result="composite8"/>
|
|
<feOffset dx="6" dy="6" in="composite8" result="offset2"/>
|
|
<feGaussianBlur stdDeviation="15" in="offset2" edgeMode="none" result="blur3"/>
|
|
<feComposite in="blur3" in2="SourceAlpha" operator="in" result="composite9"/>
|
|
|
|
<feMerge result="merge3">
|
|
<feMergeNode in="SourceGraphic"/>
|
|
<feMergeNode in="composite7"/>
|
|
<feMergeNode in="composite9"/>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<filter id="filterb" filterUnits="userSpaceOnUse" x="-200" y="-200" width="1000" height="1000">
|
|
<feFlood flood-color="var(--cs-theme-shadow-lighter)" flood-opacity="1" result="flood2"/>
|
|
<feComposite in="flood2" in2="SourceAlpha" operator="out" result="composite5"/>
|
|
<feOffset dx="-6" dy="-6" in="composite5" result="offset1"/>
|
|
<feGaussianBlur stdDeviation="5" in="offset1" edgeMode="none" result="blur2"/>
|
|
<feComposite in="blur2" in2="SourceAlpha" operator="in" result="composite7"/>
|
|
|
|
<!-- flood-color="#777777" -->
|
|
<feFlood flood-color="var(--cs-theme-shadow-darker)" flood-opacity="1" result="flood4"/>
|
|
<feComposite in="flood4" in2="SourceAlpha" operator="out" result="composite8"/>
|
|
<feOffset dx="6" dy="6" in="composite8" result="offset2"/>
|
|
<feGaussianBlur stdDeviation="15" in="offset2" edgeMode="none" result="blur3"/>
|
|
<feComposite in="blur3" in2="SourceAlpha" operator="in" result="composite9"/>
|
|
|
|
<feMerge result="merge3">
|
|
<feMergeNode in="SourceGraphic"/>
|
|
<feMergeNode in="composite7"/>
|
|
<feMergeNode in="composite9"/>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<filter id="bold" x="-50%" y="-50%" width="240%" height="240%">
|
|
<feFlood flood-color="#FFFFFF" flood-opacity="0.8" result="flood2"/>
|
|
<feComposite in="flood2" in2="SourceAlpha" operator="out" result="composite5"/>
|
|
<feOffset dx="12" dy="12" in="composite5" result="offset1"/>
|
|
<feGaussianBlur stdDeviation="5" in="offset1" edgeMode="none" result="blur2"/>
|
|
<feComposite in="blur2" in2="SourceAlpha" operator="in" result="composite7"/>
|
|
|
|
<feFlood flood-color="#777777" flood-opacity="0.6" result="flood4"/>
|
|
<feComposite in="flood4" in2="SourceAlpha" operator="out" result="composite8"/>
|
|
<feOffset dx="-12" dy="-12" in="composite8" result="offset2"/>
|
|
<feGaussianBlur stdDeviation="15" in="offset2" edgeMode="none" result="blur3"/>
|
|
<feComposite in="blur3" in2="SourceAlpha" operator="in" result="composite9"/>
|
|
|
|
<feMerge result="merge3">
|
|
<feMergeNode in="SourceGraphic"/>
|
|
<feMergeNode in="composite7"/>
|
|
<feMergeNode in="composite9"/>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<filter id="filterss" x="-20%" y="-20%" width="140%" height="140%">
|
|
<feFlood flood-color="#eeebe7" flood-opacity="0.9" result="flood2"/>
|
|
<feComposite in="flood2" in2="SourceAlpha" operator="out" result="composite5"/>
|
|
<feOffset dx="-15" dy="-15" in="composite5" result="offset1"/>
|
|
<feGaussianBlur stdDeviation="5" in="offset1" edgeMode="none" result="blur2"/>
|
|
<feComposite in="blur2" in2="SourceAlpha" operator="in" result="composite7"/>
|
|
|
|
<feFlood flood-color="#0f0f0f" flood-opacity="1" result="flood4"/>
|
|
<feComposite in="flood4" in2="SourceAlpha" operator="out" result="composite8"/>
|
|
<feOffset dx="6" dy="6" in="composite8" result="offset2"/>
|
|
<feGaussianBlur stdDeviation="5" in="offset2" edgeMode="none" result="blur3"/>
|
|
<feComposite in="blur3" in2="SourceAlpha" operator="in" result="composite9"/>
|
|
|
|
<feMerge result="merge3">
|
|
<feMergeNode in="SourceGraphic"/>
|
|
<feMergeNode in="composite7"/>
|
|
<feMergeNode in="composite9"/>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<!-- flood-color="#d1cdc7" -->
|
|
<!-- flood-color="#FFFFFF" -->
|
|
<filter id="nm-11" x="-50%" y="-50%" width="300%" height="300%">
|
|
<feDropShadow stdDeviation="5" in="SourceGraphic"
|
|
dx="6" dy="6" flood-color="var(--cs-theme-shadow-darker)" flood-opacity="0.5" result="dropShadow"
|
|
</feDropShadow>
|
|
<feDropShadow stdDeviation="4.5" in="SourceGraphic"
|
|
dx="-6" dy="-6" flood-color="var(--cs-theme-shadow-lighter)" flood-opacity="1" result="dropShadow1"/>
|
|
<feMerge result="merge">
|
|
<feMergeNode in="dropShadow1"/>
|
|
<feMergeNode in="dropShadow"/>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<!-- 2021.11.15 -->
|
|
<!-- For some reason, changing the filter width/height from 300% to 600% improves performance on iOS 15 -->
|
|
<!-- Changing this value to 3000% improves performance also, but pixelates some of the views, so unusable! -->
|
|
<!-- A value of 1000% seems to be a good value too! Switching views is now instant again for some reason! -->
|
|
<!-- However, some views (sake5) becomes very, very, very slow. Views sake4 and sake6 are very fast. -->
|
|
<!-- 2021.11.17 -->
|
|
<!-- Let's settle for now with x/y=-10% and width/height=120%. This is actually the default for svg filters... -->
|
|
|
|
<filter id="sak-nm-default" x="-10%" y="-10%" width="120%" height="120%">
|
|
<feDropShadow stdDeviation="5" in="SourceGraphic" dx="6" dy="6" flood-color="var(--cs-theme-shadow-darker)" flood-opacity="0.5" result="dropShadow"/>
|
|
<feDropShadow stdDeviation="4.5" in="SourceGraphic" dx="-6" dy="-6" flood-color="var(--cs-theme-shadow-lighter)" flood-opacity="1" result="dropShadow1"/>
|
|
<feMerge result="merge">
|
|
<feMergeNode in="dropShadow1"/>
|
|
<feMergeNode in="dropShadow"/>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<filter id="nm-1" x="-10%" y="-10%" width="120%" height="120%">
|
|
<feDropShadow stdDeviation="5" in="SourceGraphic" dx="6" dy="6" flood-color="var(--cs-theme-shadow-darker)" flood-opacity="0.5" result="dropShadow"/>
|
|
<feDropShadow stdDeviation="4.5" in="SourceGraphic" dx="-6" dy="-6" flood-color="var(--cs-theme-shadow-lighter)" flood-opacity="1" result="dropShadow1"/>
|
|
<feMerge result="merge">
|
|
<feMergeNode in="dropShadow1"/>
|
|
<feMergeNode in="dropShadow"/>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<filter id="sak-nm-default-b" filterUnits="userSpaceOnUse" x="-100" y="-100" width="5000" height="800">
|
|
<feDropShadow stdDeviation="5" in="SourceGraphic" dx="6" dy="6" flood-color="var(--cs-theme-shadow-darker)" flood-opacity="0.5" result="dropShadow"/>
|
|
<feDropShadow stdDeviation="4.5" in="SourceGraphic" dx="-6" dy="-6" flood-color="var(--cs-theme-shadow-lighter)" flood-opacity="1" result="dropShadow1"/>
|
|
<feMerge result="merge">
|
|
<feMergeNode in="dropShadow1"/>
|
|
<feMergeNode in="dropShadow"/>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<filter id="nm-1b" filterUnits="userSpaceOnUse" x="-200" y="-200" width="2000" height="2000">
|
|
<feDropShadow stdDeviation="5" in="SourceGraphic" dx="6" dy="6" flood-color="var(--cs-theme-shadow-darker)" flood-opacity="0.5" result="dropShadow"/>
|
|
<feDropShadow stdDeviation="4.5" in="SourceGraphic" dx="-6" dy="-6" flood-color="var(--cs-theme-shadow-lighter)" flood-opacity="1" result="dropShadow1"/>
|
|
<feMerge result="merge">
|
|
<feMergeNode in="dropShadow1"/>
|
|
<feMergeNode in="dropShadow"/>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<filter id="nm-1-reverse" x="-10%" y="-10%" width="120%" height="120%">
|
|
<feDropShadow stdDeviation="4.5" in="SourceGraphic" dx="-6" dy="-6" flood-color="var(--cs-theme-shadow-darker)" flood-opacity="0.5" result="dropShadow"/>
|
|
<feDropShadow stdDeviation="5" in="SourceGraphic" dx="6" dy="6" flood-color="var(--cs-theme-shadow-lighter)" flood-opacity="1" result="dropShadow1"/>
|
|
<feMerge result="merge">
|
|
<feMergeNode in="dropShadow1"/>
|
|
<feMergeNode in="dropShadow"/>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<filter id="nm-1b-reverse" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse" x="0" y="0" width="1000" height="1000">
|
|
<feDropShadow stdDeviation="4.5" in="SourceGraphic" dx="-6" dy="-6" flood-color="var(--cs-theme-shadow-darker)" flood-opacity="0.5" result="dropShadow"/>
|
|
<feDropShadow stdDeviation="5" in="SourceGraphic" dx="6" dy="6" flood-color="var(--cs-theme-shadow-lighter)" flood-opacity="1" result="dropShadow1"/>
|
|
<feMerge result="merge">
|
|
<feMergeNode in="dropShadow1"/>
|
|
<feMergeNode in="dropShadow"/>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
# ===== Drop shadow filters =====
|
|
|
|
- descr: shadow from https://css-tricks.com/adding-shadows-to-svg-icons-with-css-and-svg-filters/
|
|
content: |
|
|
<filter id='shadow' color-interpolation-filters="sRGB">
|
|
<feDropShadow dx="2" dy="2" stdDeviation="3" flood-color="var(--cs-theme-shadow-darker)" flood-opacity="0.5"/>
|
|
</filter>
|
|
|
|
- descr: sak-drop-shadow filters
|
|
content: |
|
|
<filter id="sak-drop-1" y="-50%" x="-50%" width="200%" height="400%">
|
|
<feDropShadow dx="0" dy="1.5" flood-color="var(--cs-theme-shadow-darker)" stdDeviation=".3"/>
|
|
</filter>
|
|
|
|
<filter id="sak-drop-1a" y="-50%" x="-50%" width="200%" height="400%">
|
|
<feDropShadow dx="1" dy="2" flood-color="var(--cs-theme-shadow-darker)" stdDeviation=".5"/>
|
|
</filter>
|
|
|
|
<filter id="sak-drop-1b" y="-50%" x="-50%" width="200%" height="400%">
|
|
<feDropShadow dx="2" dy="4" flood-color="var(--cs-theme-shadow-darker)" stdDeviation="6"/>
|
|
</filter>
|
|
|
|
<filter id="sak-drop-2" width="10" height="10">
|
|
<feDropShadow dx="2" dy="3" flood-color="var(--cs-theme-shadow-darker)" stdDeviation="0.5"/>
|
|
</filter>
|
|
|
|
<filter id="sak-drop-3" x="0" y="0" width="200%" height="200%">
|
|
<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
|
|
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
|
|
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
|
|
</filter>
|
|
|
|
<filter id="sak-drop-4" x="0" y="0" width="200%" height="200%">
|
|
<feGaussianBlur stdDeviation="1" />
|
|
</filter>
|
|
|
|
# ===== Markers (testing segmented arc) =====
|
|
|
|
- descr: sak-markers
|
|
content: |
|
|
<marker viewBox="0 0 200 200" id="markerCircle" markerWidth="8" markerHeight="8" refX="5" refY="5">
|
|
<circle cx="5" cy="5" r="3" style="stroke: none; fill:currentColor;"/>
|
|
</marker>
|
|
|
|
<marker viewBox="0 0 200 200" id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6"
|
|
orient="auto">
|
|
<path d="M2,2 L2,11 L10,6 L2,2" style="fill: currentColor;" />
|
|
</marker>
|
|
|
|
# ===== Clip path test =====
|
|
|
|
- descr: sak-clip-path tests
|
|
content: |
|
|
<rect id="cliprect" width="100%" height="100%" fill="none" stroke="none" rx="3" />
|
|
<clipPath id="clip">
|
|
<use xlink:href="#cliprect"/>
|
|
</clipPath>
|
|
|
|
# ===== Gradients =====
|
|
|
|
- descr: sak-gradients
|
|
content: |
|
|
<linearGradient id="sak-light-brightness-gradient" x1="1" x2="0">
|
|
<stop stop-color="#eeeeee"/>
|
|
<stop offset="1" stop-color="#555555"/>
|
|
</linearGradient>
|
|
|
|
<linearGradient id="sak-light-brightness-gradient--orange" x1="1" x2="0">
|
|
<stop stop-color="white"/>
|
|
<stop offset="1" stop-color="darkorange"/>
|
|
</linearGradient>
|
|
|
|
<linearGradient id="sak-light-brightness-gradient--reverse" x1="1" x2="0">
|
|
<stop stop-color="#555555"/>
|
|
<stop offset="1" stop-color="#eeeeee"/>
|
|
</linearGradient>
|
|
|
|
<linearGradient id="sak-light-color-temperature-gradient" x1="1" x2="0">
|
|
<stop stop-color="#ffa000"/>
|
|
<stop offset=".5" stop-color="#fff"/>
|
|
<stop offset="1" stop-color="#a6d1ff"/>
|
|
</linearGradient>
|
|
|
|
<linearGradient id="sak-boiler-setpoint-blue-orange-gradient" x1="1" x2="0">
|
|
<stop stop-color="#ff8c00"/>
|
|
<stop offset="1" stop-color="#0094ff"/>
|
|
</linearGradient>
|
|
|
|
<radialGradient id="sak-mask-radial-gradient">
|
|
<stop offset="0" stop-color="white" stop-opacity="1"/>
|
|
<stop offset="0.8" stop-color="white" stop-opacity="0.8"/>
|
|
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
|
</radialGradient> |