diff options
| author | Devaev Maxim <[email protected]> | 2018-09-26 02:57:24 +0300 |
|---|---|---|
| committer | Devaev Maxim <[email protected]> | 2018-09-26 02:57:24 +0300 |
| commit | 81a5311349564a1016c4af2bf18ae872b650e85b (patch) | |
| tree | d01fd027948494e22ae2c14334b98c1515e5e8a4 /web/css/leds.css | |
| parent | f3946f102fc167efdc53c73412b2c0d6ac6c72c5 (diff) | |
moved kvmd to the root
Diffstat (limited to 'web/css/leds.css')
| -rw-r--r-- | web/css/leds.css | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/web/css/leds.css b/web/css/leds.css new file mode 100644 index 00000000..c5c122e3 --- /dev/null +++ b/web/css/leds.css @@ -0,0 +1,69 @@ +@-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-on { + -webkit-filter: var(--led-filter-green); + filter: var(--led-filter-green); +} + +img.led-off { + -webkit-filter: var(--led-filter-gray); + filter: var(--led-filter-gray); +} + +img.led-hdd-busy { + -webkit-filter: var(--led-filter-red); + filter: var(--led-filter-red); +} + +img.led-msd-writing, +img.led-pak-typing { + -webkit-filter: var(--led-filter-yellow); + filter: var(--led-filter-yellow); + -webkit-animation: var(--led-spin-fast); + animation: var(--led-spin-fast); +} + +img.led-link-connecting { + -webkit-filter: var(--led-filter-yellow); + filter: var(--led-filter-yellow); +} + +img.led-fan-on { + -webkit-filter: var(--led-filter-green); + filter: var(--led-filter-green); + -webkit-animation: var(--led-spin-medium); + animation: var(--led-spin-medium); +} + +img.led-fan-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-fan-fail { + -webkit-filter: var(--led-filter-red); + filter: var(--led-filter-red); +} |