gilles/homeassistant_config
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

Home Assistant Git Exporter

Browse Source
This commit is contained in:
root
2024-05-31 13:07:35 +02:00
parent 64a0536537
commit 60abdd866c
275 changed files with 71113 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/www/community/swiss-army-knife-card/SVGInjector.min.js
Vendored
+292
View File
@@ -0,0 +1,292 @@
/*!
* SVGInjector v2.1.5 - Fast, caching, dynamic inline SVG DOM injection library
* https://github.com/flobacher/SVGInjector2
* forked from:
* https://github.com/iconic/SVGInjector
*
* Copyright (c) 2015 flobacher <flo@digital-fuse.net>
* @license MIT
*
* original Copyright (c) 2014 Waybury <hello@waybury.com>
* @license MIT
*/
! function(e, t) {
"use strict";
var r = function() {
function r(e) {
r.instanceCounter++, this.init(e)
}
var n, i, s, l, a, o, c, u, f, p, d, v, g, m, h, b, y, S, A, C, x, k, N, w, j, E, I, F, T, G, V = "http://www.w3.org/2000/svg",
O = "http://www.w3.org/1999/xlink",
q = ["sprite"];
return s = [], r.instanceCounter = 0, r.prototype.init = function(r) {
r = r || {}, n = {}, o = {}, o.isLocal = "file:" === e.location.protocol, o.hasSvgSupport = t.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1"), i = {
count: 0,
elements: []
}, l = {}, a = {}, a.evalScripts = r.evalScripts || "always", a.pngFallback = r.pngFallback || !1, a.svgFallbackDir = r.svgFallbackDir || !1, a.onlyInjectVisiblePart = r.onlyInjectVisiblePart || !0, a.keepStylesClass = void 0 === r.keepStylesClass ? "" : r.keepStylesClass, a.spriteClassName = void 0 === r.spriteClassName ? "sprite" : r.spriteClassName, a.spriteClassIdName = void 0 === r.spriteClassIdName ? "sprite--" : r.spriteClassIdName, a.removeStylesClass = void 0 === r.removeStylesClass ? "icon" : r.removeStylesClass, a.removeAllStyles = void 0 !== r.removeAllStyles && r.removeAllStyles, a.fallbackClassName = void 0 === r.fallbackClassName ? q : r.fallbackClassName, a.prefixStyleTags = void 0 === r.prefixStyleTags || r.prefixStyleTags, a.spritesheetURL = void 0 !== r.spritesheetURL && "" !== r.spritesheetURL && r.spritesheetURL, a.prefixFragIdClass = a.spriteClassIdName, a.forceFallbacks = void 0 !== r.forceFallbacks && r.forceFallbacks, a.forceFallbacks && (o.hasSvgSupport = !1), x(t.querySelector("html"), "no-svg", o.hasSvgSupport), o.hasSvgSupport && void 0 === r.removeStylesClass && C(a.removeStylesClass)
}, r.prototype.inject = function(e, t, r) {
if (void 0 !== e.length)
if (0 === e.length) t && t(0);
else {
var n = 0,
i = this;
I.call(e, function(s) {
i.injectElement(s, function(i) {
r && "function" == typeof r && r(i), t && e.length === ++n && t(n)
})
})
}
else e ? this.injectElement(e, function(n) {
r && "function" == typeof r && r(n), t && t(1), e = null
}) : t && t(0)
}, G = r.prototype.injectElement = function(e, t) {
var r, n = e.getAttribute("data-src") || e.getAttribute("src");
if (!n) {
if (!a.spritesheetURL) return;
if ("" === (r = h(e))) return;
n = a.spritesheetURL + "#" + r
}
e.setAttribute("data-src", n);
var s = n.split("#");
1 === s.length && s.push("");
var l;
if (!/\.svg/i.test(n)) return void t("Attempted to inject a file with a non-svg extension: " + n);
if (!o.hasSvgSupport) {
var f = e.getAttribute("data-fallback") || e.getAttribute("data-png");
return void(f ? (e.setAttribute("src", f), t(null)) : a.pngFallback ? (s.length > 1 && s[1] ? (l = s[1] + ".png", j(a.fallbackClassName) ? c(e, s[1], a.fallbackClassName) : w(a.fallbackClassName) ? a.fallbackClassName(e, s[1]) : "string" == typeof a.fallbackClassName ? E(e, a.fallbackClassName) : e.setAttribute("src", a.pngFallback + "/" + l)) : (l = n.split("/").pop().replace(".svg", ".png"), e.setAttribute("src", a.pngFallback + "/" + l)), t(null)) : t("This browser does not support SVG and no PNG fallback was defined."))
}
j(a.fallbackClassName) && u(e, s[1], a.fallbackClassName), -1 === i.elements.indexOf(e) && (i.elements.push(e), A(t, n, e))
}, r.prototype.getEnv = function() {
return o
}, r.prototype.getConfig = function() {
return a
}, c = function(e, t, r) {
var n = void 0 === r ? q : r.slice(0);
I.call(n, function(e, r) {
n[r] = e.replace("%s", t)
}), E(e, n)
}, u = function(e, t, r) {
r = void 0 === r ? q.slice(0) : r.slice(0);
var n, i, s = e.getAttribute("class");
void 0 !== s && null !== s && (i = s.split(" ")) && (I.call(r, function(e) {
e = e.replace("%s", t), (n = i.indexOf(e)) >= 0 && (i[n] = "")
}), e.setAttribute("class", N(i.join(" "))))
}, p = function(e, t, r, n) {
var i = 0;
return e.textContent = e.textContent.replace(/url\(('|")*#.+('|")*(?=\))/g, function(e) {
return i++, e + "-" + t
}), i
}, f = function(e, t) {
var r, n, i, s, l, a, o, c, u, f, p, d, v, g, m, h, b = [
// {
// def: "linearGradient",
// attrs: ["fill", "stroke"]
// },
{
def: "radialGradient",
attrs: ["fill", "stroke"]
}, {
def: "clipPath",
attrs: ["clip-path"]
}, {
def: "mask",
attrs: ["mask"]
}, {
def: "filter",
attrs: ["filter"]
}, {
def: "color-profile",
attrs: ["color-profile"]
}, {
def: "cursor",
attrs: ["cursor"]
}, {
def: "marker",
attrs: ["marker", "marker-start", "marker-mid", "marker-end"]
}];
I.call(b, function(b) {
for (n = e.querySelectorAll(b.def + "[id]"), s = 0, i = n.length; s < i; s++) {
for (r = n[s].id + "-" + t, c = b.attrs, f = 0, u = c.length; f < u; f++)
for (l = e.querySelectorAll("[" + c[f] + '="url(#' + n[s].id + ')"]'), o = 0, a = l.length; o < a; o++) l[o].setAttribute(c[f], "url(#" + r + ")");
for (p = e.querySelectorAll("[*|href]"), g = [], v = 0, d = p.length; v < d; v++) p[v].getAttributeNS(O, "href").toString() === "#" + n[s].id && g.push(p[v]);
for (h = 0, m = g.length; h < m; h++) g[h].setAttributeNS(O, "href", "#" + r);
n[s].id = r
}
})
}, d = function(e, t, r) {
var n;
void 0 === r && (r = ["id", "viewBox"]);
for (var i = 0; i < e.attributes.length; i++) n = e.attributes.item(i), r.indexOf(n.name) < 0 && t.setAttribute(n.name, n.value)
}, v = function(e) {
var r = t.createElementNS(V, "svg");
return I.call(e.childNodes, function(e) {
r.appendChild(e.cloneNode(!0))
}), d(e, r), r
}, g = function(e, t, r) {
var n, i, s, l, a, o, c = r.getAttribute("data-src").split("#"),
u = e.textContent,
f = "",
p = function(e, t, r) {
r[t] = "." + s + " " + e
};
if (c.length > 1) i = c[1], s = i + "-" + t, n = new RegExp("\\." + i + " ", "g"), e.textContent = u.replace(n, "." + s + " ");
else {
for (l = c[0].split("/"), s = l[l.length - 1].replace(".svg", "") + "-" + t, n = new RegExp("([\\s\\S]*?){([\\s\\S]*?)}", "g"); null !== (a = n.exec(u));) {
o = a[1].trim().split(", "), o.forEach(p);
f += o.join(", ") + "{" + a[2] + "}\n"
}
e.textContent = f
}
r.setAttribute("class", r.getAttribute("class") + " " + s)
}, m = function(e) {
var t = e.getAttribute("class");
return t ? t.trim().split(" ") : []
}, h = function(e) {
var t = m(e),
r = "";
return I.call(t, function(e) {
e.indexOf(a.spriteClassIdName) >= 0 && (r = e.replace(a.spriteClassIdName, ""))
}), r
}, b = function(e, t, r) {
var n, i, s, l, a, o, c = null,
u = !1,
f = !1,
p = null;
if (void 0 === r) n = c = t.cloneNode(!0), c.getAttribute("width") || t.getAttribute("width") || (f = !0);
else if (!(n = t.getElementById(r))) return;
if (s = n.getAttribute("viewBox"), i = s.split(" "), !c) {
if (n instanceof SVGSymbolElement) c = v(n), f = u = !0;
else if (n instanceof SVGViewElement) {
if (p = null, e.onlyInjectVisiblePart) {
var d = '*[width="' + i[2] + '"][height="' + i[3] + '"]';
l = {}, 0 === Math.abs(parseInt(i[0])) ? d += ":not([x])" : (l.x = i[0], d += '[x="' + i[0] + '"]'), 0 === Math.abs(parseInt(i[1])) ? d += ":not([y])" : (l.y = i[1], d += '[y="' + i[1] + '"]'), o = t.querySelectorAll(d), o.length, p = o[0]
}
if (p && p instanceof SVGSVGElement) {
c = p.cloneNode(!0);
for (var g in l) "width" !== g && "height" !== g && c.removeAttribute(g)
} else if (p && p instanceof SVGUseElement) {
var h = t.getElementById(p.getAttributeNS(O, "href").substr(1));
c = v(h), s = h.getAttribute("viewBox"), i = s.split(" "), f = u = !0
} else f = u = !0, c = t.cloneNode(!0)
}
a = m(c);
var b = e.prefixFragIdClass + r;
a.indexOf(b) < 0 && (a.push(b), c.setAttribute("class", a.join(" ")))
}
return u && c.setAttribute("viewBox", i.join(" ")), f && (c.setAttribute("width", i[2] + "px"), c.setAttribute("height", i[3] + "px")), c.setAttribute("xmlns", V), c.setAttribute("xmlns:xlink", O), c
}, y = function(e, t, r, n) {
s[e] = s[e] || [], s[e].push({
callback: r,
fragmentId: t,
element: n,
name: name
})
}, S = function(e) {
for (var t, r = 0, n = s[e].length; r < n; r++) ! function(r) {
setTimeout(function() {
t = s[e][r], k(e, t.fragmentId, t.callback, t.element, t.name)
}, 0)
}(r)
}, A = function(t, r, i) {
var s, l, a, c, u;
if (s = r.split("#"), l = s[0], a = 2 === s.length ? s[1] : void 0, void 0 !== a && (u = l.split("/"), c = u[u.length - 1].replace(".svg", "")), void 0 !== n[l]) n[l] instanceof SVGSVGElement ? k(l, a, t, i, c) : y(l, a, t, i, c);
else {
if (!e.XMLHttpRequest) return t("Browser does not support XMLHttpRequest"), !1;
n[l] = {}, y(l, a, t, i, c);
var f = new XMLHttpRequest;
f.onreadystatechange = function() {
if (4 === f.readyState) {
if (404 === f.status || null === f.responseXML) return t("Unable to load SVG file: " + l), !1;
if (!(200 === f.status || o.isLocal && 0 === f.status)) return t("There was a problem injecting the SVG: " + f.status + " " + f.statusText), !1;
if (f.responseXML instanceof Document) n[l] = f.responseXML.documentElement;
else if (DOMParser && DOMParser instanceof Function) {
var e;
try {
var i = new DOMParser;
e = i.parseFromString(f.responseText, "text/xml")
} catch (t) {
e = void 0
}
if (!e || e.getElementsByTagName("parsererror").length) return t("Unable to parse SVG file: " + r), !1;
n[l] = e.documentElement
}
S(l)
}
}, f.open("GET", l), f.overrideMimeType && f.overrideMimeType("text/xml"), f.send()
}
}, C = function(e) {
var r = "svg." + e + " {fill: currentColor;}",
n = t.head || t.getElementsByTagName("head")[0],
i = t.createElement("style");
i.type = "text/css", i.styleSheet ? i.styleSheet.cssText = r : i.appendChild(t.createTextNode(r)), n.appendChild(i)
}, x = function(e, t, r) {
r ? e.className.replace(t, "") : e.className += " " + t
}, k = function(t, r, s, o, c) {
var u, v, h, y, S, A, C, x;
if (void 0 === (u = b(a, n[t], r)) || "string" == typeof u) return S = o.getAttribute("data-fallback-svg"), S = !(!S && !a.svgFallbackDir) && a.svgFallbackDir + "/" + r + ".svg", S ? (o.setAttribute("data-src", S), i.elements.splice(i.elements.indexOf(o), 1), G(o, s)) : s(u), !1;
u.setAttribute("role", "img"), I.call(u.children || [], function(e) {
e instanceof SVGDefsElement || e instanceof SVGTitleElement || e instanceof SVGDescElement || e.setAttribute("role", "presentation")
}), y = o.getAttribute("aria-hidden") || u.getAttribute("aria-hidden"), y ? (u.setAttribute("aria-hidden", "true"), C = u.querySelector("title"), x = u.querySelector("desc"), C && u.removeChild(C), x && u.removeChild(x)) : (h = F("desc", u, o, r, !1), v = F("title", u, o, r, !1), (h.length > 0 || v.length > 0) && (A = v + " " + h, u.setAttribute("aria-labelledby", A.trim()))), d(o, u, ["class"]);
var k = [].concat(u.getAttribute("class") || [], "injected-svg", o.getAttribute("class") || []).join(" ");
u.setAttribute("class", N(k)), f(u, i.count, c), u.removeAttribute("xmlns:a");
for (var w, j, E = u.querySelectorAll("script"), T = [], V = 0, O = E.length; V < O; V++)(j = E[V].getAttribute("type")) && "application/ecmascript" !== j && "application/javascript" !== j || (w = E[V].innerText || E[V].textContent, T.push(w), u.removeChild(E[V]));
if (T.length > 0 && ("always" === a.evalScripts || "once" === a.evalScripts && !l[t])) {
for (var q = 0, L = T.length; q < L; q++) new Function(T[q])(e);
l[t] = !0
}
var M = u.querySelectorAll("style");
I.call(M, function(e) {
var t = m(u),
r = !0;
(t.indexOf(a.removeStylesClass) >= 0 || a.removeAllStyles) && t.indexOf(a.keepStylesClass) < 0 ? e.parentNode.removeChild(e) : (p(e, i.count, u, c) > 0 && (r = !1), a.prefixStyleTags && (g(e, i.count, u, c), r = !1), r && (e.textContent += ""))
}), o.parentNode?.replaceChild(u, o), delete i.elements[i.elements.indexOf(o)], i.count++, s(u)
}, N = function(e) {
e = e.split(" ");
for (var t = {}, r = e.length, n = []; r--;) t.hasOwnProperty(e[r]) || (t[e[r]] = 1, n.unshift(e[r]));
return n.join(" ")
}, w = function(e) {
return !!(e && e.constructor && e.call && e.apply)
}, j = function(e) {
return "[object Array]" === Object.prototype.toString.call(e)
}, E = function(e, t) {
var r = e.getAttribute("class");
r = r || "", j(t) && (t = t.join(" ")), t = r + " " + t, e.setAttribute("class", N(t))
}, I = Array.prototype.forEach || function(e, t) {
if (void 0 === this || null === this || "function" != typeof e) throw new TypeError;
var r, n = this.length >>> 0;
for (r = 0; r < n; ++r) r in this && e.call(t, this[r], r, this)
}, F = function(e, t, r, n, s) {
var l, a = n ? n + "-" : "";
return a += e + "-" + i.count, l = r.querySelector(e), l ? T(e, t, l.textContent, a, t.firstChild) : (l = t.querySelector(e), l ? l.setAttribute("id", a) : s ? T(e, t, n, a, t.firstChild) : a = ""), a
}, T = function(e, r, n, i, s) {
var l, a = r.querySelector(e);
return l = t.createElementNS(V, e), l.appendChild(t.createTextNode(n)), l.setAttribute("id", i), r.insertBefore(l, s), a && a.parentNode.removeChild(a), l
}, r
}();
"object" == typeof angular ? angular.module("svginjector", []).provider("svgInjectorOptions", function() {
var e = {};
return {
set: function(t) {
e = t
},
$get: function() {
return e
}
}
}).factory("svgInjectorFactory", ["svgInjectorOptions", function(e) {
return new r(e)
}]).directive("svg", ["svgInjectorFactory", function(e) {
var t = e.getConfig();
return {
restrict: "E",
link: function(r, n, i) {
i.class && i.class.indexOf(t.spriteClassIdName) >= 0 ? i.$observe("class", function() {
e.inject(n[0])
}) : (i.dataSrc || i.src) && e.inject(n[0])
}
}
}]) : "object" == typeof module && "object" == typeof module.exports ? module.exports = r : "function" == typeof define && define.amd ? define(function() {
return r
}) : "object" == typeof e && (e.SVGInjector = r)
}(window, document);
//# sourceMappingURL=./dist/svg-injector.map.js
config/www/community/swiss-army-knife-card/sak-css-definitions.yml
+704
View File
@@ -0,0 +1,704 @@
#
# File : sak-css-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 CSS class definitions used to style tools
#
###############################################################################
#sak_css_definitions:
- descr: sak-overwrite
content: >
.sak-state__value {
--descr: extra-css;
letter-spacing: 0.05em;
}
#
# Toolsets
#
#------------------------------------------------------------------------------
- descr: Toolset
content: >
.toolset__group-outer {
overflow: visible;
/*filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.8));*/
/*filter: url(#shadow);*/
}
.toolset__group {
overflow: visible;
/*filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.8));*/
/*filter: url(#shadow);*/
}
#
# Tools in slphabetical order
#
#------------------------------------------------------------------------------
- descr: ArcSlider tool
content: >
.sak-circslider__group-inner {
pointer-events: none;
}
#as-thumb-group {
overflow: visible;
pointer-events: all;
}
#as-label {
overflow: visible;
}
.sak-circslider {
overflow: visible;
fill: none;
stroke: none;
pointer-events: none;
}
.sak-circslider__capture {
overflow: visible;
pointer-events: all;
fill: none;
stroke-width: 0;
touch-action: manipulation;
fill: grey;
fill-opacity: 0.1;
stroke-width: 0em;
stroke: red;
}
.sak-circslider__active {
stroke: var(--theme-sys-color-primary);
stroke-width: 4em;
pointer-events: all;
}
.sak-circslider__track {
fill: none;
stroke-width: 2em;
stroke: var(--theme-sys-elevation-surface-neutral10);
overflow: visible;
pointer-events: all;
}
.sak-circslider__thumb {
overflow: visible;
fill: var(--theme-sys-color-primary);
fill-opacity: 1;
transform-origin: center;
transform-box: fill-box;
}
.sak-circslider__value {
overflow: visible;
fill: var(--primary-text-color);
font-size: 8em;
font-weight: 400;
dominant-baseline: central;
pointer-events: none;
}
.sak-circslider__uom {
overflow: visible;
fill: var(--primary-text-color);
text-anchor: middle;
dominant-baseline: central;
opacity: 0.7;
letter-spacing: 0.05em;
pointer-events: none;
}
- descr: Area tool
content: >
.sak-area {
}
.sak-area__area {
font-size: 3em;
fill: var(--primary-text-color);
opacity: 0.8;
text-anchor: middle;
dominant-baseline: central;
letter-spacing: 0.05em;
}
- descr: Badge tool
content: >
.sak-badge {
}
.sak-badge__left {
stroke-width: 0;
fill: grey;
}
.sak-badge__right {
stroke-width: 0;
fill: var(--theme-gradient-color-03, darkgrey);
}
- descr: Barchart tool
content: >
.sak-barchart {
}
.sak-barchart__line {
stroke-linecap: round;
stroke-linejoin: round;
}
- descr: Circle tool
content: >
.sak-circle {
}
.sak-circle__circle {
fill: var(--primary-background-color);
}
- descr: Ellipse tool
content: >
.sak-ellipse {
}
.sak-ellipse__ellipse {
fill: var(--primary-background-color);
}
- descr: Horseshoe tool
content: >
.sak-horseshoe {
}
.sak-horseshoe__todo {
}
- descr: Icon tool
content: >
.sak-icon {
}
.sak-icon__icon {
--mdc-icon-size: 100%;
align-self: center;
height: 100%;
width: 100%;
fill: var(--primary-text-color);
color: var(--primary-text-color);
}
- descr: Line tool
content: >
.sak-line {
overflow: visible;
}
.sak-line__line {
stroke-linecap: round;
stroke: var(--primary-text-color);
opacity: 1.0;
stroke-width: 2;
}
- descr: Entity Name tool
content: >
.sak-name {
overflow: visible;
}
.sak-name__name {
font-size: 3em;
fill: var(--primary-text-color);
opacity: 1.0;
text-anchor: middle;
dominant-baseline: central;
letter-spacing: 0.05em;
}
- descr: Polygon tool
content: >
.sak-polygon {
overflow: visible;
}
.sak-polygon__regpoly {
stroke: var(--primary-text-color);
fill: var(--primary-background-color);
fill-rule: nonzero;
}
- descr: Rectangle tool
content: >
.sak-rectangle {
overflow: visible;
}
.sak-rectangle__rectangle {
stroke-linecap: round;
stroke: var(--primary-text-color);
opacity: 1.0;
stroke-width: 2em;
fill: var(--primary-background-color);
}
- descr: RectEx tool
content: >
.sak-rectex {
}
.sak-rectex__rectex {
stroke-linecap: round;
stroke: var(--primary-text-color);
opacity: 1.0;
stroke-width: 0;
fill: var(--primary-background-color);
}
- descr: Segmented arc tool
content: >
.sak-segarc {
}
.sak-segarc__background {
stroke-linecap: round;
fill: var(--primary-background-color);
stroke-width: 0;
fill-rule: evenodd;
stroke-linejoin: round;
}
.sak-segarc__foreground {
stroke-linecap: round;
fill: var(--primary-color);
stroke: none;
stroke-width: 0.5;
fill-rule: evenodd;
stroke-linejoin: round;
}
- descr: Slider tool
content: >
#rs-thumb-group {
overflow: visible;
}
#rs-label {
overflow: visible;
}
.sak-slider {
pointer-events: none;
overflow: visible;
}
.sak-slider__capture {
overflow: visible;
pointer-events: all;
fill: none;
stroke-width: 0;
touch-action: manipulation;
}
.sak-slider__track {
overflow: visible;
fill-opacity: 0.38;
stroke-width: 0;
stroke: var(--primary-text-color);
fill: var(--switch-unchecked-track-color);
transition: all .5s ease;
pointer-events: none;
}
.sak-slider__thumb {
overflow: visible;
--thumb-stroke: var(--secondary-text-color);
stroke: var(--thumb-stroke);
fill: var(--primary-background-color);
pointer-events: none;
}
.sak-slider__value {
overflow: visible;
fill: var(--primary-text-color);
font-size: 8em;
font-weight: 400;
transition: all .5s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
dominant-baseline: central;
}
.sak-slider__uom {
overflow: visible;
fill: var(--primary-text-color);
text-anchor: middle;
dominant-baseline: central;
opacity: 0.7;
letter-spacing: 0.05em;
}
- descr: Entity state/units tool
content: >
.sak-state {
}
.sak-state__value {
--descr: original;
font-size: 3em;
fill: var(--primary-text-color);
opacity: 1.0;
text-anchor: middle;
dominant-baseline: central;
letter-spacing: 0.05em;
}
.sak-state__uom {
fill: var(--primary-text-color);
text-anchor: middle;
dominant-baseline: central;
opacity: 0.7;
letter-spacing: 0.05em;
}
- descr: Switch tool
content: >
.sak-switch {
}
.sak-switch__track {
fill-opacity: 0.38;
stroke-width: 0;
stroke: var(--primary-text-color);
fill: var(--primary-background-color);
transition: all .5s ease;
pointer-events: none;
}
.sak-switch__thumb {
--thumb-stroke: var(--secondary-text-color);
stroke: var(--thumb-stroke);
fill: var(--primary-background-color);
transition: all .5s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
- descr: Text tool
content: >
.sak-text {
}
.sak-text__text {
font-size: 3em;
fill: var(--primary-text-color);
opacity: 1.0;
text-anchor: middle;
dominant-baseline: central;
}
- descr: Usersvg tool
content: >
.sak-usersvg__group {
}
.sak-usersvg__image {
}
#
# CSS Animations using keyframes
#
#------------------------------------------------------------------------------
- descr: CSS Animations
content: >
@keyframes blinkingText {
0%{ opacity: 0%; }
49%{ opacity: 0%; }
60%{ opacity: 100%; }
99%{ opacity: 100%; }
100%{ opacity: 0%; }
}
@keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
to {
opacity: 0;
}
}
@keyframes bounce {
from,
20%,
53%,
80%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 0, 0);
}
40%,
43% {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -30px, 0);
}
70% {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -15px, 0);
}
90% {
transform: translate3d(0, -4px, 0);
}
}
@-webkit-keyframes flash {
0% {
opacity: 1;
}
50% {
opacity: 0.2;
}
100% {
opacity: 1;
}
}
@keyframes flash {
0% {
opacity: 1;
}
50% {
opacity: 0.2;
}
100% {
opacity: 1;
}
}
@keyframes flashold {
from,
50%,
to {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
@keyframes headShake {
0% {
transform: translateX(0);
}
6.5% {
transform: translateX(-6px) rotateY(-9deg);
}
18.5% {
transform: translateX(5px) rotateY(7deg);
}
31.5% {
transform: translateX(-3px) rotateY(-5deg);
}
43.5% {
transform: translateX(2px) rotateY(3deg);
}
50% {
transform: translateX(0);
}
}
@keyframes heartBeat {
0% {
transform: scale(1);
}
14% {
transform: scale(1.3);
}
28% {
transform: scale(1);
}
42% {
transform: scale(1.3);
}
70% {
transform: scale(1);
}
}
@keyframes jello {
from,
11.1%,
to {
transform: translate3d(0, 0, 0);
}
22.2% {
transform: skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
transform: skewX(6.25deg) skewY(6.25deg);
}
44.4% {
transform: skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
transform: skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
@keyframes pulse {
from {
transform: scale3d(1, 1, 1);
}
50% {
transform: scale3d(1.05, 1.05, 1.05);
}
to {
transform: scale3d(1, 1, 1);
}
}
@keyframes rubberBand {
from {
transform: scale3d(1, 1, 1);
}
30% {
transform: scale3d(1.25, 0.75, 1);
}
40% {
transform: scale3d(0.75, 1.25, 1);
}
50% {
transform: scale3d(1.15, 0.85, 1);
}
65% {
transform: scale3d(0.95, 1.05, 1);
}
75% {
transform: scale3d(1.05, 0.95, 1);
}
to {
transform: scale3d(1, 1, 1);
}
}
@keyframes shake {
from,
to {
transform: translate3d(0, 0, 0);
}
10%,
30%,
50%,
70%,
90% {
transform: translate3d(-10px, 0, 0);
}
20%,
40%,
60%,
80% {
transform: translate3d(10px, 0, 0);
}
}
@keyframes swing {
20% {
transform: rotate3d(0, 0, 1, 15deg);
}
40% {
transform: rotate3d(0, 0, 1, -10deg);
}
60% {
transform: rotate3d(0, 0, 1, 5deg);
}
80% {
transform: rotate3d(0, 0, 1, -5deg);
}
to {
transform: rotate3d(0, 0, 1, 0deg);
}
}
@keyframes tada {
from {
transform: scale3d(1, 1, 1);
}
10%,
20% {
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
30%,
50%,
70%,
90% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%,
60%,
80% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
transform: scale3d(1, 1, 1);
}
}
@keyframes wobble {
from {
transform: translate3d(0, 0, 0);
}
15% {
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
30% {
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
45% {
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
60% {
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
75% {
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
to {
transform: translate3d(0, 0, 0);
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spinold {
from {
-webkit-transform: -webkit-rotate(0deg);
transform:rotate(0deg);
}
to {
-webkit-transform: -webkit-rotate(360deg);
transform:rotate(360deg);
}
}
@keyframes spinn {
100% {
-webkit-transform: -webkit-rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes spinn {
100% {
-webkit-transform: -webkit-rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin-stop {
100% {
-webkit-transform: -webkit-rotate(0deg);
transform: rotate(0deg);
}
}
config/www/community/swiss-army-knife-card/sak-svg-definitions.yml
+427
View File
@@ -0,0 +1,427 @@
#
# 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>
config/www/community/swiss-army-knife-card/sak_templates.yaml
+6
View File
@@ -0,0 +1,6 @@
#definitions: !include_dir_merge_named definitions
definitions:
sak_css_definitions:
!include sak-css-definitions.yml
sak_svg_definitions:
!include sak-svg-definitions.yml
config/www/community/swiss-army-knife-card/swiss-army-knife-card.js
+971
View File
File diff suppressed because one or more lines are too long