Home Assistant Git Exporter
This commit is contained in:
root
@@ -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);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user