diff options
Diffstat (limited to 'web/share/css/leds.css')
| -rw-r--r-- | web/share/css/leds.css | 63 |
1 files changed, 63 insertions, 0 deletions
diff --git a/web/share/css/leds.css b/web/share/css/leds.css new file mode 100644 index 00000000..fe23a434 --- /dev/null +++ b/web/share/css/leds.css @@ -0,0 +1,63 @@ +@-webkit-keyframes spin { + 100% { + -webkit-transform: rotate(360deg); + } +} +@keyframes spin { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +:root { + --led-filter-gray: invert(0.5); + --led-filter-green: invert(0.5) sepia(1) saturate(5) hue-rotate(100deg); + --led-filter-red: invert(0.5) sepia(1) saturate(15) hue-rotate(320deg); + --led-filter-yellow: invert(0.5) sepia(1) saturate(5) hue-rotate(0deg); + + --led-spin-slow: spin 6s linear infinite; + --led-spin-medium: spin 3s linear infinite; + --led-spin-fast: spin 2s linear infinite; +} + +img.led-gray { + -webkit-filter: var(--led-filter-gray); + filter: var(--led-filter-gray); +} + +img.led-green { + -webkit-filter: var(--led-filter-green); + filter: var(--led-filter-green); +} + +img.led-red { + -webkit-filter: var(--led-filter-red); + filter: var(--led-filter-red); +} + +img.led-yellow { + -webkit-filter: var(--led-filter-yellow); + filter: var(--led-filter-yellow); +} + +img.led-green-rotating-medium { + -webkit-filter: var(--led-filter-green); + filter: var(--led-filter-green); + -webkit-animation: var(--led-spin-medium); + animation: var(--led-spin-medium); +} + +img.led-yellow-rotating-slow { + -webkit-filter: var(--led-filter-yellow); + filter: var(--led-filter-yellow); + -webkit-animation: var(--led-spin-slow); + animation: var(--led-spin-slow); +} + +img.led-yellow-rotating-fast { + -webkit-filter: var(--led-filter-yellow); + filter: var(--led-filter-yellow); + -webkit-animation: var(--led-spin-fast); + animation: var(--led-spin-fast); +} |