style(next): add a warning animation for the sync status indicator when the sync fails

This commit is contained in:
Adorian Doran 2024-12-04 22:22:01 +02:00
parent 0cc1fb5bc8
commit 7a9cb953bf

View File

@ -144,6 +144,8 @@
--launcher-pane-button-hover-background: white;
--launcher-pane-button-hover-shadow: 4px 4px 4px rgba(0, 0, 0, .075);
--sync-status-error-pulse-color: #ff5528;
--root-background: var(--left-pane-background-color);
--gutter-color: transparent;
@ -287,6 +289,8 @@
--launcher-pane-button-hover-background: #ffffff1c;
--launcher-pane-button-hover-shadow: 4px 4px 4px rgba(0, 0, 0, .2);
--sync-status-error-pulse-color: #f47871;
--root-background: var(--left-pane-background-color);
--gutter-color: transparent;
@ -455,6 +459,19 @@
background: unset;
}
@keyframes sync-status-pulse {
from {
color: currentColor
} to {
color: var(--pulse-color);
}
}
#launcher-pane .sync-status-disconnected-with-changes {
--pulse-color: var(--sync-status-error-pulse-color);
animation: sync-status-pulse 1s ease-in-out alternate-reverse infinite;
}
#launcher-pane.horizontal .launcher-button {
font-size: var(--launcher-pane-horizontal-icon-size);
}