diff --git a/gui/app.css b/gui/app.css index 898f678..a3713b6 100644 --- a/gui/app.css +++ b/gui/app.css @@ -217,10 +217,15 @@ header { background: rgba(0,255,145,.07); } .dbtn.active { - border-color: rgba(0,255,145,.7); - background: rgba(0,255,145,.1); - color: #00ff91; - box-shadow: 0 0 20px rgba(0,255,145,.25), inset 0 0 14px rgba(0,255,145,.06); + border-color: rgba(220,50,50,.75); + background: rgba(200,30,30,.12); + color: #ff6060; + box-shadow: 0 0 16px rgba(220,50,50,.25), inset 0 0 10px rgba(200,30,30,.07); + animation: active-pulse 2.8s ease-in-out infinite; +} +@keyframes active-pulse { + 0%,100% { box-shadow: 0 0 10px rgba(220,50,50,.18), inset 0 0 8px rgba(200,30,30,.05); } + 50% { box-shadow: 0 0 22px rgba(220,50,50,.45), inset 0 0 14px rgba(200,30,30,.12); } } @keyframes mode-flash { 0% { box-shadow: 0 0 0px rgba(0,255,145,0), background-color: var(--pri); } @@ -544,7 +549,13 @@ body.page-connection-degraded .admin-shell{ transition: all .15s; text-transform: uppercase; } -.mtbtn.active { background: rgba(0,255,145,.1); color: #00ff91; border-color: rgba(0,255,145,.5); box-shadow: 0 0 12px rgba(0,255,145,.2); } +.mtbtn.active { + background: rgba(200,30,30,.12); + color: #ff6060; + border-color: rgba(220,50,50,.75); + box-shadow: 0 0 14px rgba(220,50,50,.25); + animation: active-pulse 2.8s ease-in-out infinite; +} .drive-inline { display: flex;