mirror of
https://github.com/dergigi/boris.git
synced 2026-02-16 20:45:01 +01:00
58 lines
1.6 KiB
CSS
58 lines
1.6 KiB
CSS
/* Reusable keyframes */
|
|
@keyframes pulse-glow {
|
|
0%, 100% { opacity: 0.8; transform: scale(1); }
|
|
50% { opacity: 1; transform: scale(1.1); }
|
|
}
|
|
|
|
@keyframes toast-slide-in {
|
|
from { transform: translateX(400px); opacity: 0; }
|
|
to { transform: translateX(0); opacity: 1; }
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 0.4; transform: scale(1); }
|
|
50% { opacity: 1; transform: scale(1.1); }
|
|
}
|
|
|
|
/* Subtle success burst used for archive action */
|
|
@keyframes success-burst {
|
|
0% {
|
|
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45), 0 0 0 0 rgba(16, 185, 129, 0.25);
|
|
transform: scale(1);
|
|
}
|
|
60% {
|
|
box-shadow: 0 0 0 10px rgba(16, 185, 129, 0), 0 0 0 0 rgba(16, 185, 129, 0);
|
|
transform: scale(1.05);
|
|
}
|
|
100% {
|
|
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0), 0 0 0 0 rgba(16, 185, 129, 0);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
/* Apply archive animation when button enters animating state */
|
|
.mark-as-read-btn.animating {
|
|
animation: success-burst 600ms ease-out 1;
|
|
}
|
|
|
|
.mark-as-read-btn.animating svg {
|
|
animation: pulse 600ms ease-in-out 1;
|
|
}
|
|
|
|
@keyframes highlight-pulse-animation {
|
|
0%, 100% { box-shadow: 0 0 8px rgba(var(--highlight-rgb, 255, 255, 0), 0.2); transform: scale(1); }
|
|
25% { box-shadow: 0 0 20px rgba(var(--highlight-rgb, 255, 255, 0), 0.6); transform: scale(1.02); }
|
|
50% { box-shadow: 0 0 8px rgba(var(--highlight-rgb, 255, 255, 0), 0.2); transform: scale(1); }
|
|
75% { box-shadow: 0 0 20px rgba(var(--highlight-rgb, 255, 255, 0), 0.6); transform: scale(1.02); }
|
|
}
|
|
|
|
/* Reading progress bar positioning */
|
|
@media (min-width: 769px) {
|
|
.reading-progress-bar {
|
|
left: var(--left-offset) !important;
|
|
right: var(--right-offset) !important;
|
|
}
|
|
}
|
|
|
|
|