/* * /public/css/components/alerts.css * Unified styling for all flash messages (server and client-side). */ /* Container for all flash messages */ #flash-container { position: fixed; /* Position below the member header. --header-offset is set on by recalculateHeaderOffsets() in main.js and carries the combined height of any fixed banner stacked ABOVE the header (email-verification hellobar, impersonation banner). Without it the flash stayed at a hardcoded 80px while the header was pushed down underneath it, covering the header's controls (back arrow, avatar) for the full 10s auto-dismiss. Falls back to 0px on pages with no banner, which is the previous behaviour. */ top: calc(var(--header-offset, 0px) + 80px); right: 20px; z-index: 12000; width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 1rem; } /* Thumbnail Maker full-app view, wide desktop only. This page hides the site header and supplies its own bar, so the flash clears the chrome correctly but lands on the right-hand thumbnail rail, covering its "New thumbnail" button for the full auto-dismiss. Moving the flash DOWN would only trade that button for the thumbnail cards beneath it, so it moves sideways instead, onto the empty stage. The rail is 300px and flush to the right edge at every width above its 1200px breakpoint (.tmk-ws__rail in pages/thumbnail-maker-workspace.css), so 320px clears it with a 20px gap. Below 1200px the rail stacks underneath and nothing overlaps, which is why this is not applied there. */ @media (min-width: 1200px) { body.tmk-fullapp #flash-container { right: 320px; } } /* Base style for a single alert */ .flash-alert { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem; border-radius: var(--radius-lg); border: 1px solid transparent; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); animation: slideInRight 0.4s ease-out forwards; opacity: 0; transform: translateX(20px); } .flash-alert.fade-out { animation: fadeOutRight 0.5s ease-in forwards; } /* Alert icon */ .flash-alert__icon { flex-shrink: 0; font-size: 1.25rem; margin-top: 2px; } /* Alert message */ .flash-alert__message { flex-grow: 1; font-size: 0.95rem; line-height: 1.5; } .flash-alert__message strong { font-weight: var(--font-weight-semibold); } /* Close button. The hit area is a full 44x44px per our minimum touch-target standard. Negative margins pull that box back inside the alert's own padding so the larger target does NOT inflate the alert or move the glyph: the box bleeds to the alert's right edge and its effective vertical footprint stays 20px, leaving the message line to govern the alert's height as it did before. */ .flash-alert__close { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -12px -16px -12px -8px; background: none; border: none; color: inherit; font-size: 1.5rem; line-height: 1; opacity: 0.6; cursor: pointer; padding: 0; transition: opacity 0.2s ease; } .flash-alert__close:hover { opacity: 1; } /* Color Variants */ .flash-alert[data-type="success"] { background-color: var(--color-success-light); border-color: rgba(16, 185, 129, 0.3); color: var(--color-success-dark); } .flash-alert[data-type="danger"] { background-color: var(--color-danger-light); border-color: rgba(239, 68, 68, 0.3); color: var(--color-danger-dark); } .flash-alert[data-type="warning"] { background-color: var(--color-warning-light); border-color: rgba(245, 158, 11, 0.3); color: var(--color-warning-dark); } .flash-alert[data-type="info"] { background-color: var(--color-info-light); border-color: rgba(59, 130, 246, 0.3); color: var(--color-info-dark); } /* Animations */ @keyframes slideInRight { to { opacity: 1; transform: translateX(0); } } @keyframes fadeOutRight { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(20px); } } /* Responsive adjustments */ @media (max-width: 767px) { #flash-container { /* Same banner-aware offset as desktop; the mobile header is 60px and fixed, so a visible hellobar pushes it straight under this container. */ top: calc(var(--header-offset, 0px) + 70px); left: 15px; /* Increased spacing from the left edge */ right: 15px; /* Increased spacing from the right edge */ width: auto; /* This is the key change to prevent overflow */ max-width: none; } .flash-alert { /* Slightly reduce padding on very small screens for better text flow */ padding: 0.875rem 1rem; } .flash-alert__message { /* Improve font size for readability on mobile */ font-size: 0.9rem; } } /* Styling for links inside flash alerts to make them more visible */ .flash-alert__link { color: #fff; font-weight: 700; text-decoration: none; background-color: rgba(0, 0, 0, 0.25); padding: 0.2em 0.5em; border-radius: 4px; transition: background-color 0.2s ease; } .flash-alert__link:hover, .flash-alert__link:focus { background-color: rgba(0, 0, 0, 0.4); /* Darker still on hover */ color: #fff; /* Explicitly keep text white on hover */ text-decoration: none; /* Ensure no underline appears on hover */ }