88 lines
1.5 KiB
CSS
88 lines
1.5 KiB
CSS
@property --assistant-dot-matrix-hi {
|
|
syntax: "<number>";
|
|
inherits: false;
|
|
initial-value: 1;
|
|
}
|
|
|
|
@property --assistant-dot-matrix-lo {
|
|
syntax: "<number>";
|
|
inherits: false;
|
|
initial-value: 0.15;
|
|
}
|
|
|
|
.root {
|
|
display: inline-block;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
flex: 0 0 auto;
|
|
color: currentColor;
|
|
}
|
|
|
|
.root[data-state="idle"],
|
|
.root[data-state="paused"],
|
|
.root[data-state="stopped"],
|
|
.root[data-state="offline"] {
|
|
color: var(--mantine-color-dimmed);
|
|
}
|
|
|
|
.root[data-state="recording"],
|
|
.root[data-state="error"] {
|
|
color: var(--mantine-color-red-filled);
|
|
}
|
|
|
|
.root[data-state="success"] {
|
|
color: var(--mantine-color-green-filled);
|
|
}
|
|
|
|
.root[data-state="warning"] {
|
|
color: var(--mantine-color-yellow-filled);
|
|
}
|
|
|
|
.root[data-state="info"] {
|
|
color: var(--mantine-color-blue-filled);
|
|
}
|
|
|
|
.grid {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.dot {
|
|
transition-duration: 300ms;
|
|
transition-property: --assistant-dot-matrix-hi, --assistant-dot-matrix-lo, opacity;
|
|
animation-name: assistant-dot-matrix-blink;
|
|
animation-timing-function: ease-in-out;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
.visuallyHidden {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
border: 0;
|
|
margin: -1px;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@keyframes assistant-dot-matrix-blink {
|
|
0%,
|
|
100% {
|
|
opacity: var(--assistant-dot-matrix-hi, 1);
|
|
}
|
|
|
|
50% {
|
|
opacity: var(--assistant-dot-matrix-lo, 0.15);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.dot {
|
|
transition-duration: 0ms;
|
|
animation-name: none;
|
|
}
|
|
}
|