diff --git a/css/main.css b/css/main.css index f5b8cd7..fa2d372 100644 --- a/css/main.css +++ b/css/main.css @@ -1184,4 +1184,71 @@ h2:has(+ #exam-list:empty), h2:has(+ #packet-list:empty){ .title-bar-button:hover { background-color: darkgray; +} + +/* Sync Status Styles */ +#sync-status { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.85rem; + font-weight: 500; + color: rgba(255, 255, 255, 0.85); + margin: auto 0.8rem; + padding: 0.3rem 0.6rem; + border-radius: 4px; + background-color: rgba(255, 255, 255, 0.05); + transition: background-color 0.3s ease; +} + +.sync-dot { + width: 8px; + height: 8px; + border-radius: 50%; + display: inline-block; +} + +.sync-dot.saved { + background-color: #4CAF50; + box-shadow: 0 0 8px #4CAF50; +} + +.sync-dot.syncing { + background-color: #FFC107; + box-shadow: 0 0 8px #FFC107; + animation: pulse-syncing 1.2s infinite ease-in-out; +} + +.sync-dot.failed { + background-color: #F44336; + box-shadow: 0 0 8px #F44336; + animation: pulse-failed 1s infinite alternate; +} + +.sync-text { + letter-spacing: 0.2px; +} + +@keyframes pulse-syncing { + 0% { + transform: scale(0.85); + opacity: 0.6; + } + 50% { + transform: scale(1.15); + opacity: 1; + } + 100% { + transform: scale(0.85); + opacity: 0.6; + } +} + +@keyframes pulse-failed { + from { + box-shadow: 0 0 4px #F44336; + } + to { + box-shadow: 0 0 12px #F44336; + } } \ No newline at end of file diff --git a/index.html b/index.html index 63001e2..6a43c25 100644 --- a/index.html +++ b/index.html @@ -48,6 +48,7 @@ fullscreen +