diff --git a/css/index.css b/css/index.css index f5561bd..7009641 100644 --- a/css/index.css +++ b/css/index.css @@ -1649,11 +1649,80 @@ body { } } +/* Export Data Modal */ +#export-data-modal { + position: fixed; + inset: 0; + z-index: 9998; + display: none; + align-items: center; + justify-content: center; + background-color: rgba(0, 0, 0, 0.55) !important; +} + +#export-data-modal .modal-card { + width: 100%; + max-width: 360px; + background-color: var(--color-background-primary); + border-radius: 14px; + padding: 20px 20px 16px; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1); + color: var(--color-text-primary); + box-sizing: border-box; + border: 1px solid var(--color-border-tertiary); + animation: export-modal-in 0.16s ease-out; +} + +#export-data-modal .modal-card h3 { + margin: 0 0 8px; + font-size: 18px; + font-weight: 600; + letter-spacing: 0.01em; + color: var(--color-text-primary); +} + +#export-data-modal .modal-card p { + margin: 0 0 16px; + font-size: 14px; + line-height: 1.5; + color: var(--color-text-secondary); +} + +#export-data-modal .modal-card > div { + display: flex; + justify-content: flex-end; + gap: 8px; +} + +#export-data-modal .btn { + font-size: 13px; + padding: 8px 16px; + border-radius: 6px; + transition: all 0.2s ease; +} + +#export-data-modal .btn:disabled { + opacity: 0.6; + cursor: not-allowed; +} + +@keyframes export-modal-in { + from { + opacity: 0; + transform: translateY(6px) scale(0.97); + } + + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} @media (max-width: 480px) { #new-task-modal .modal-card, - #new-subject-modal .modal-card { + #new-subject-modal .modal-card, + #export-data-modal .modal-card { max-width: 90vw; padding: 16px 14px 12px; } diff --git a/index.html b/index.html index 3333d17..97274b6 100644 --- a/index.html +++ b/index.html @@ -511,5 +511,17 @@