Animate progress circle and show complete status in blue for 10s

This commit is contained in:
schlagmichdoch 2024-02-06 04:38:37 +01:00
parent 1d62a9ff49
commit c33d49702e
2 changed files with 60 additions and 26 deletions

View file

@ -188,12 +188,12 @@ x-peer:not(.type-public-id) .highlight-room-public-id {
display: none;
}
x-peer:not([status]):hover,
x-peer:not([status]):focus {
x-peer:not([status].blink):hover,
x-peer:not([status].blink):focus {
transform: scale(1.05);
}
x-peer[status] x-icon {
x-peer[status].blink x-icon {
box-shadow: none;
}
@ -249,7 +249,7 @@ x-peer[status] .device-name {
display: none;
}
x-peer[status] {
x-peer[status].blink {
pointer-events: none;
}
@ -257,6 +257,10 @@ x-peer {
animation: pop 600ms ease-out 1;
}
x-peer[status]:not(.blink) .status {
color: var(--primary-color);
}
@keyframes pop {
0% {
transform: scale(0.7);
@ -747,7 +751,6 @@ x-dialog .dialog-subheader {
top: -8px;
clip: rect(0px, 80px, 80px, 40px);
--progress: rotate(0deg);
transition: transform 200ms;
}
.circle {
@ -761,6 +764,10 @@ x-dialog .dialog-subheader {
transform: var(--progress);
}
.animate .circle {
transition: transform 200ms;
}
.over50 {
clip: rect(auto, auto, auto, auto);
}