60 lines
1.1 KiB
CSS
60 lines
1.1 KiB
CSS
/* ---------- LED status dot ---------- */
|
|
|
|
.led {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
/* remove flex: 1 and align-self: stretch entirely */
|
|
}
|
|
|
|
.led-dot {
|
|
width: 80%;
|
|
height: 80%;
|
|
|
|
border-radius: 50%;
|
|
|
|
background: var(--accent-down);
|
|
|
|
transition:
|
|
width var(--dur-base) var(--ease-standard),
|
|
height var(--dur-base) var(--ease-standard),
|
|
background var(--dur-base) var(--ease-standard),
|
|
box-shadow var(--dur-base) var(--ease-standard);
|
|
}
|
|
|
|
.led-dot--connected {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
background: var(--accent-live);
|
|
box-shadow: 0 0 6px 1px var(--accent-live);
|
|
}
|
|
|
|
.led-dot--connecting {
|
|
background: var(--accent-connecting);
|
|
box-shadow: 0 0 6px 1px var(--accent-connecting);
|
|
|
|
animation: pulse 1s var(--ease-standard) infinite;
|
|
}
|
|
|
|
.led-dot--disconnected {
|
|
background: var(--accent-down);
|
|
box-shadow: 0 0 4px 0 var(--accent-down);
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%,
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
transform: scale(1.25);
|
|
opacity: 0.7;
|
|
}
|
|
}
|