diff options
| author | Maxim Devaev <[email protected]> | 2024-11-26 19:11:59 +0200 |
|---|---|---|
| committer | Maxim Devaev <[email protected]> | 2024-11-26 19:11:59 +0200 |
| commit | 7fd4dae3c6e8007fdc6a6bf1d127271288650cf8 (patch) | |
| tree | 13ce286466db075ce0197015d5250c846e4acbb6 /web | |
| parent | 0cf5f8de9e1ef67cfe6b00dd35204665fbd4e54c (diff) | |
pikvm/pikvm#1408: Additional colors for GPIO
Diffstat (limited to 'web')
| -rw-r--r-- | web/share/css/led.css | 38 |
1 files changed, 34 insertions, 4 deletions
diff --git a/web/share/css/led.css b/web/share/css/led.css index b7e00116..4f5a437e 100644 --- a/web/share/css/led.css +++ b/web/share/css/led.css @@ -41,6 +41,13 @@ --led-spin-slow: spin 6s linear infinite; --led-spin-medium: spin 3s linear infinite; --led-spin-fast: spin 2s linear infinite; + + /* Additional colors for GPIO */ + --led-filter-blue: invert(0.5) sepia(1) saturate(5) hue-rotate(170deg); + --led-filter-cyan: invert(0.5) sepia(1) saturate(5) hue-rotate(130deg); + --led-filter-magenta: invert(0.5) sepia(1) saturate(5) hue-rotate(200deg); + --led-filter-pink: invert(0.5) sepia(1) saturate(5) hue-rotate(300deg); + --led-filter-white: invert(1) sepia(1); } img.led-gray { @@ -48,19 +55,16 @@ img.led-gray { -webkit-filter: var(--led-filter-gray); filter: var(--led-filter-gray); } - img.led-green { -webkit-transform: translateZ(0); -webkit-filter: var(--led-filter-green); filter: var(--led-filter-green); } - img.led-red { -webkit-transform: translateZ(0); -webkit-filter: var(--led-filter-red); filter: var(--led-filter-red); } - img.led-yellow { -webkit-transform: translateZ(0); -webkit-filter: var(--led-filter-yellow); @@ -73,10 +77,36 @@ img.led-red-rotating-fast { -webkit-animation: var(--led-spin-fast); animation: var(--led-spin-fast); } - 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); } + +/* Additional colors for GPIO */ +img.led-blue { + -webkit-transform: translateZ(0); + -webkit-filter: var(--led-filter-blue); + filter: var(--led-filter-blue); +} +img.led-cyan { + -webkit-transform: translateZ(0); + -webkit-filter: var(--led-filter-cyan); + filter: var(--led-filter-cyan); +} +img.led-magenta { + -webkit-transform: translateZ(0); + -webkit-filter: var(--led-filter-magenta); + filter: var(--led-filter-magenta); +} +img.led-pink { + -webkit-transform: translateZ(0); + -webkit-filter: var(--led-filter-pink); + filter: var(--led-filter-pink); +} +img.led-white { + -webkit-transform: translateZ(0); + -webkit-filter: var(--led-filter-white); + filter: var(--led-filter-white); +} |