82 lines
1.3 KiB
CSS
82 lines
1.3 KiB
CSS
#osd {
|
|
padding: 0.4rem;
|
|
border-radius: 1.8rem;
|
|
background-color: var(--shadow);
|
|
}
|
|
|
|
#osd-container {
|
|
border-radius: 1.5rem;
|
|
background-color: var(--surface);
|
|
padding-left: 1rem;
|
|
padding: 0.4rem;
|
|
}
|
|
|
|
#osd-container * {
|
|
transition: all 0.4s cubic-bezier(0.15, 0.70, 0, 1);
|
|
}
|
|
|
|
scale {
|
|
min-height: 2rem;
|
|
min-width: 18rem;
|
|
}
|
|
|
|
trough {
|
|
min-height: 2rem;
|
|
min-width: inherit;
|
|
border-radius: 1rem;
|
|
background-color: var(--shadow);
|
|
}
|
|
|
|
highlight {
|
|
margin: 0.4rem;
|
|
background-color: var(--primary);
|
|
border-radius: 0.8rem;
|
|
}
|
|
|
|
/* Muted state: soften the scale visuals */
|
|
scale.muted trough {
|
|
background-color: var(--surface-bright);
|
|
}
|
|
|
|
scale.muted highlight {
|
|
background-color: var(--surface);
|
|
}
|
|
|
|
scale:hover,
|
|
#osd-container.focused scale {
|
|
min-width: 21rem;
|
|
min-height: inherit;
|
|
}
|
|
|
|
scale:hover trough,
|
|
#osd-container.focused scale trough {
|
|
border-radius: 1.2rem;
|
|
min-width: 21rem;
|
|
min-height: 3rem;
|
|
}
|
|
|
|
.capslock-on {
|
|
color: var(--foreground);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.capslock-off {
|
|
opacity: 0.2;
|
|
}
|
|
|
|
#osd-container label {
|
|
font-size: 1.2rem;
|
|
font-weight: 600;
|
|
margin-left: 0.1rem;
|
|
}
|
|
|
|
.mic-muted {
|
|
opacity: 0.5;
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.mic-unmuted {
|
|
color: var(--primary);
|
|
font-weight: bold;
|
|
}
|