From 798bc37fcec208c247e0730c0e37735205bb6dcf Mon Sep 17 00:00:00 2001 From: Devaev Maxim Date: Sun, 12 Aug 2018 08:30:32 +0300 Subject: refactoring --- kvmd/web/css/leds.css | 55 ++++++++++++++++++++++++++++++--------------------- 1 file changed, 33 insertions(+), 22 deletions(-) (limited to 'kvmd') diff --git a/kvmd/web/css/leds.css b/kvmd/web/css/leds.css index cd3ee508..c5c122e3 100644 --- a/kvmd/web/css/leds.css +++ b/kvmd/web/css/leds.css @@ -10,49 +10,60 @@ } } +: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: invert(0.5) sepia(1) saturate(5) hue-rotate(100deg); - filter: invert(0.5) sepia(1) saturate(5) hue-rotate(100deg); + -webkit-filter: var(--led-filter-green); + filter: var(--led-filter-green); } img.led-off { - -webkit-filter: invert(0.5); - filter: invert(0.5); + -webkit-filter: var(--led-filter-gray); + filter: var(--led-filter-gray); } img.led-hdd-busy { - -webkit-filter: invert(0.5) sepia(1) saturate(15) hue-rotate(320deg); - filter: invert(0.5) sepia(1) saturate(15) hue-rotate(320deg); + -webkit-filter: var(--led-filter-red); + filter: var(--led-filter-red); } img.led-msd-writing, img.led-pak-typing { - -webkit-filter: invert(0.5) sepia(1) saturate(5) hue-rotate(0deg); - filter: invert(0.5) sepia(1) saturate(5) hue-rotate(0deg); - -webkit-animation: spin 2s linear infinite; - animation: spin 2s linear infinite; + -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: invert(0.5) sepia(1) saturate(5) hue-rotate(0deg); - filter: invert(0.5) sepia(1) saturate(5) hue-rotate(0deg); + -webkit-filter: var(--led-filter-yellow); + filter: var(--led-filter-yellow); } img.led-fan-on { - -webkit-filter: invert(0.5) sepia(1) saturate(5) hue-rotate(100deg); - filter: invert(0.5) sepia(1) saturate(5) hue-rotate(100deg); - -webkit-animation: spin 3s linear infinite; - animation: spin 3s linear infinite; + -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: invert(0.5) sepia(1) saturate(5) hue-rotate(0deg); - filter: invert(0.5) sepia(1) saturate(5) hue-rotate(0deg); - -webkit-animation: spin 6s linear infinite; - animation: spin 6s linear infinite; + -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: invert(0.5) sepia(1) saturate(15) hue-rotate(320deg); - filter: invert(0.5) sepia(1) saturate(15) hue-rotate(320deg); + -webkit-filter: var(--led-filter-red); + filter: var(--led-filter-red); } -- cgit v1.2.3