134 lines
4.8 KiB
CSS
134 lines
4.8 KiB
CSS
/* ================================================================
|
|
assets/styles/partials/flash.css
|
|
Flash messages — thème clair & sombre
|
|
================================================================ */
|
|
|
|
/* ── CONTENEUR ─────────────────────────────────────────────────── */
|
|
.flash-container {
|
|
position: fixed;
|
|
top: calc(72px + 1.25rem);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 200;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.6rem;
|
|
width: 440px;
|
|
max-width: calc(100vw - 2rem);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* ── FLASH DE BASE ─────────────────────────────────────────────── */
|
|
.flash {
|
|
pointer-events: all;
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
|
|
padding: 0.9rem 0.9rem 0.9rem 1.1rem;
|
|
border-radius: 16px;
|
|
border: 1px solid transparent;
|
|
backdrop-filter: blur(6px) saturate(1.8);
|
|
-webkit-backdrop-filter: blur(6px) saturate(1.8);
|
|
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-size: 0.875rem;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
|
|
animation: flash-in 0.5s cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
|
|
/* ── COULEURS PAR TYPE — light ──────────────────────────────────── */
|
|
.flash-success {
|
|
background: rgba(16, 185, 129, 0.20);
|
|
border-color: rgba(16, 185, 129, 0.50);
|
|
color: #064e3b;
|
|
box-shadow: 0 2px 0 rgba(255,255,255,0.50) inset, 0 8px 32px rgba(16,185,129,0.20);
|
|
}
|
|
.flash-danger {
|
|
background: rgba(239, 68, 68, 0.20);
|
|
border-color: rgba(239, 68, 68, 0.50);
|
|
color: #7f1d1d;
|
|
box-shadow: 0 2px 0 rgba(255,255,255,0.50) inset, 0 8px 32px rgba(239,68,68,0.20);
|
|
}
|
|
.flash-warning {
|
|
background: rgba(245, 158, 11, 0.20);
|
|
border-color: rgba(245, 158, 11, 0.50);
|
|
color: #78350f;
|
|
box-shadow: 0 2px 0 rgba(255,255,255,0.50) inset, 0 8px 32px rgba(245,158,11,0.20);
|
|
}
|
|
.flash-info {
|
|
background: rgba(124, 58, 237, 0.18);
|
|
border-color: rgba(124, 58, 237, 0.50);
|
|
color: #2e1065;
|
|
box-shadow: 0 2px 0 rgba(255,255,255,0.50) inset, 0 8px 32px rgba(124,58,237,0.20);
|
|
}
|
|
|
|
/* ── COULEURS PAR TYPE — dark ───────────────────────────────────── */
|
|
[data-theme="dark"] .flash-success {
|
|
background: rgba(16, 185, 129, 0.18);
|
|
border-color: rgba(16, 185, 129, 0.45);
|
|
color: #6ee7b7;
|
|
box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 8px 32px rgba(16,185,129,0.18);
|
|
}
|
|
[data-theme="dark"] .flash-danger {
|
|
background: rgba(239, 68, 68, 0.18);
|
|
border-color: rgba(239, 68, 68, 0.45);
|
|
color: #fca5a5;
|
|
box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 8px 32px rgba(239,68,68,0.18);
|
|
}
|
|
[data-theme="dark"] .flash-warning {
|
|
background: rgba(245, 158, 11, 0.18);
|
|
border-color: rgba(245, 158, 11, 0.45);
|
|
color: #fcd34d;
|
|
box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 8px 32px rgba(245,158,11,0.18);
|
|
}
|
|
[data-theme="dark"] .flash-info {
|
|
background: rgba(124, 58, 237, 0.20);
|
|
border-color: rgba(167, 139, 250, 0.45);
|
|
color: #c4b5fd;
|
|
box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 8px 32px rgba(124,58,237,0.20);
|
|
}
|
|
|
|
/* ── ANIMATION ─────────────────────────────────────────────────── */
|
|
@keyframes flash-in {
|
|
from { opacity: 0; transform: translateY(-40px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* ── TEXTE ─────────────────────────────────────────────────────── */
|
|
.flash-body {
|
|
min-width: 0;
|
|
}
|
|
|
|
/* ── BOUTON FERMER ─────────────────────────────────────────────── */
|
|
.flash-close {
|
|
flex-shrink: 0;
|
|
width: 26px;
|
|
height: 26px;
|
|
min-width: 26px;
|
|
padding: 0;
|
|
margin: 0;
|
|
background: rgba(255, 255, 255, 0.10);
|
|
border: none;
|
|
border-radius: 7px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: currentColor;
|
|
font-size: 0.7rem;
|
|
opacity: 0.6;
|
|
transition: opacity var(--duration-fast), background var(--duration-fast);
|
|
}
|
|
.flash-close:hover {
|
|
opacity: 1;
|
|
background: rgba(255, 255, 255, 0.20);
|
|
}
|
|
|
|
/* ── MOBILE ────────────────────────────────────────────────────── */
|
|
@media (max-width: 640px) {
|
|
.flash-container { width: calc(100vw - 2rem); }
|
|
}
|