diff options
| author | Devaev Maxim <[email protected]> | 2018-07-16 10:25:17 +0300 |
|---|---|---|
| committer | Devaev Maxim <[email protected]> | 2018-07-16 10:25:17 +0300 |
| commit | eda29498097b05afab38b7f8a586597b40563039 (patch) | |
| tree | 7f4a50445683d763c18596f571fd784700c318e5 | |
| parent | bbb92e0a208acef8a700c7a3c62687473c77e210 (diff) | |
improved css, animated led-msd-writing
| -rw-r--r-- | kvmd/web/css/main.css | 16 | ||||
| -rw-r--r-- | kvmd/web/js/atx.js | 2 |
2 files changed, 15 insertions, 3 deletions
diff --git a/kvmd/web/css/main.css b/kvmd/web/css/main.css index 70e34f2c..7090ce5a 100644 --- a/kvmd/web/css/main.css +++ b/kvmd/web/css/main.css @@ -30,15 +30,27 @@ img#hid-keyboard-led { height: 24px; } img.led-on { + -webkit-filter: invert(.5) sepia(1) saturate(5) hue-rotate(100deg); filter: invert(.5) sepia(1) saturate(5) hue-rotate(100deg); } img.led-off { + -webkit-filter: invert(.5); filter: invert(.5); } -img.led-busy { - /*color: #ff373a;*/ +img.led-hdd-busy { + -webkit-filter: invert(.5) sepia(1) saturate(15) hue-rotate(320deg); filter: invert(.5) sepia(1) saturate(15) hue-rotate(320deg); } +img.led-msd-writing { + -webkit-filter: invert(.5) sepia(1) saturate(5) hue-rotate(0deg); + filter: invert(.5) sepia(1) saturate(5) hue-rotate(0deg); + -webkit-animation:spin 2s linear infinite; + -moz-animation:spin 2s linear infinite; + animation:spin 2s linear infinite; +} +@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } +@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } +@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } button#stream-reset-button, button#atx-power-button, diff --git a/kvmd/web/js/atx.js b/kvmd/web/js/atx.js index d0c8f3af..0779f584 100644 --- a/kvmd/web/js/atx.js +++ b/kvmd/web/js/atx.js @@ -1,7 +1,7 @@ var atx = new function() { this.setLedsState = function(leds) { $("atx-power-led").className = (leds.power ? "led-on" : "led-off"); - $("atx-hdd-led").className = (leds.hdd ? "led-busy" : "led-off"); + $("atx-hdd-led").className = (leds.hdd ? "led-hdd-busy" : "led-off"); }; this.clearLeds = function() { |