mirror of
https://github.com/DRYTRIX/TimeTracker.git
synced 2026-05-19 12:50:11 -05:00
Dries Peeters
463704f054
Unify buttons, cards, headers, toasts, and form treatments across the app so screens feel consistent and are easier to scan on desktop and mobile. Update the broader template set to use the shared UI primitives and responsive spacing patterns introduced in this refresh.
156 lines
4.3 KiB
CSS
156 lines
4.3 KiB
CSS
/* Toast Notifications - styled to match TimeTracker UI (light + dark) */
|
|
|
|
#toast-notification-container {
|
|
position: fixed !important;
|
|
top: 5rem !important;
|
|
right: 1rem !important;
|
|
left: auto !important;
|
|
bottom: auto !important;
|
|
transform: none !important;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
gap: 0.75rem;
|
|
width: auto !important;
|
|
max-width: calc(100vw - 1rem);
|
|
z-index: 9999;
|
|
pointer-events: none; /* clicks pass through except inside toasts */
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
#toast-notification-container {
|
|
top: 0.75rem !important;
|
|
right: 0.75rem !important;
|
|
left: auto !important;
|
|
max-width: calc(100vw - 1.5rem);
|
|
align-items: flex-end;
|
|
}
|
|
}
|
|
|
|
.toast-notification {
|
|
display: block;
|
|
width: min(20rem, calc(100vw - 1.5rem)) !important;
|
|
max-width: calc(100vw - 1.5rem);
|
|
margin-left: auto;
|
|
background: #FFFFFF; /* card-light */
|
|
color: #2D3748; /* text-light */
|
|
border: 1px solid #E2E8F0; /* border-light */
|
|
border-left-width: 4px;
|
|
border-radius: 0.875rem;
|
|
padding: 0.875rem 0.95rem;
|
|
box-shadow: 0 14px 32px rgba(15,23,42,0.16), 0 4px 10px rgba(15,23,42,0.08);
|
|
opacity: 0;
|
|
transform: translateY(-8px) scale(0.98);
|
|
transition: opacity 180ms ease, transform 180ms ease;
|
|
pointer-events: auto; /* clickable */
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dark .toast-notification {
|
|
background: #2D3748; /* card-dark */
|
|
color: #E2E8F0; /* text-dark */
|
|
border-color: #4A5568; /* border-dark */
|
|
}
|
|
|
|
.toast-notification.hiding {
|
|
opacity: 0;
|
|
transform: translateY(-8px) scale(0.98);
|
|
}
|
|
|
|
.tt-toast-body { display: grid !important; grid-template-columns: 1.9rem minmax(0,1fr) 1.9rem; align-items: flex-start; gap: 0.75rem; }
|
|
|
|
/* Icons */
|
|
.tt-toast-icon {
|
|
line-height: 1;
|
|
font-size: 0.95rem;
|
|
width: 1.9rem;
|
|
height: 1.9rem;
|
|
border-radius: 9999px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
background: rgba(148, 163, 184, 0.12);
|
|
margin-top: 0.05rem;
|
|
}
|
|
.tt-toast-content {
|
|
min-width: 0;
|
|
padding-right: 0;
|
|
}
|
|
.tt-toast-title { font-weight: 700; margin-bottom: 0.2rem; line-height: 1.2; font-size: 0.95rem; }
|
|
.tt-toast-message { font-size: 0.915rem; line-height: 1.4; color: inherit; opacity: 0.9; overflow-wrap: anywhere; }
|
|
|
|
/* Close button */
|
|
.tt-toast-close {
|
|
position: static;
|
|
margin-left: 0;
|
|
background: transparent;
|
|
border: 0;
|
|
color: inherit;
|
|
opacity: 0.7;
|
|
cursor: pointer;
|
|
width: 1.9rem;
|
|
height: 1.9rem;
|
|
border-radius: 0.5rem;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
.tt-toast-close:hover { opacity: 1; background: rgba(148, 163, 184, 0.12); }
|
|
|
|
/* Progress bar */
|
|
.tt-toast-progress {
|
|
position: relative;
|
|
height: 3px;
|
|
overflow: hidden;
|
|
border-radius: 9999px;
|
|
margin-top: 0.7rem;
|
|
background: rgba(148, 163, 184, 0.18);
|
|
}
|
|
.tt-toast-progress-bar {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
animation-name: toast-progress-shrink;
|
|
animation-timing-function: linear;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
@keyframes toast-progress-shrink { from { width: 100%; } to { width: 0%; } }
|
|
|
|
/* Variants */
|
|
.toast-notification.toast-success { border-left-color: #10B981; }
|
|
.toast-notification.toast-error { border-left-color: #EF4444; }
|
|
.toast-notification.toast-warning { border-left-color: #F59E0B; }
|
|
.toast-notification.toast-info { border-left-color: #3B82F6; }
|
|
|
|
.toast-notification.toast-success .tt-toast-icon { color: #10B981; }
|
|
.toast-notification.toast-error .tt-toast-icon { color: #EF4444; }
|
|
.toast-notification.toast-warning .tt-toast-icon { color: #F59E0B; }
|
|
.toast-notification.toast-info .tt-toast-icon { color: #3B82F6; }
|
|
|
|
.toast-notification.toast-success .tt-toast-progress-bar { background: #10B981; }
|
|
.toast-notification.toast-error .tt-toast-progress-bar { background: #EF4444; }
|
|
.toast-notification.toast-warning .tt-toast-progress-bar { background: #F59E0B; }
|
|
.toast-notification.toast-info .tt-toast-progress-bar { background: #3B82F6; }
|
|
|
|
/* Reduced motion - instant appearance, no progress animation */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.toast-notification {
|
|
transition: none;
|
|
}
|
|
.tt-toast-progress-bar {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
/* High contrast mode */
|
|
@media (prefers-contrast: high) {
|
|
.toast-notification {
|
|
border-width: 2px !important;
|
|
}
|
|
}
|