116 lines
3.7 KiB
CSS
116 lines
3.7 KiB
CSS
/* Root-Container Positionierung */
|
|
.tg-root{ position:fixed; inset:0; pointer-events:none; z-index:99999; padding:16px; }
|
|
.tg-top{ align-items:flex-start; }
|
|
.tg-bottom{ align-items:flex-end; }
|
|
.tg-center{ display:flex; justify-content:center; }
|
|
.tg-left{ display:flex; justify-content:flex-start; }
|
|
.tg-right{ display:flex; justify-content:flex-end; }
|
|
|
|
/* Toast-Karte */
|
|
.tg-toast{
|
|
pointer-events:auto;
|
|
width:min(520px, calc(100vw - 32px));
|
|
background: rgba(17,24,39,.55);
|
|
border:1px solid rgba(255,255,255,.08);
|
|
backdrop-filter: blur(10px);
|
|
border-radius:16px;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,.28);
|
|
position:relative;
|
|
overflow:hidden;
|
|
margin:10px;
|
|
transform: translateY(10px);
|
|
opacity:.0;
|
|
}
|
|
.tg-in{ animation: tgIn .36s ease forwards; }
|
|
.tg-out{ animation: tgOut .28s ease forwards; }
|
|
|
|
@keyframes tgIn { to { opacity:1; transform: translateY(0);} }
|
|
@keyframes tgOut { to { opacity:0; transform: translateY(8px);} }
|
|
|
|
/* Akzent links */
|
|
.tg-stripe{
|
|
position:absolute; left:10px; top:10px; bottom:10px; width:3px; border-radius:2px; opacity:.95;
|
|
}
|
|
|
|
/* Grid-Layout */
|
|
.tg-grid{
|
|
display:grid;
|
|
grid-template-columns: 48px 1fr auto;
|
|
grid-template-rows: auto auto auto;
|
|
grid-template-areas:
|
|
"icon head close"
|
|
"icon domain close"
|
|
"icon msg close";
|
|
gap:12px 16px;
|
|
padding:16px 18px 18px 18px;
|
|
}
|
|
|
|
/* Icon */
|
|
.tg-icon{
|
|
grid-area: icon;
|
|
width:48px; height:48px;
|
|
display:grid; place-items:center;
|
|
border-radius:12px;
|
|
background: rgba(255,255,255,.05);
|
|
border:1px solid rgba(255,255,255,.06);
|
|
box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
|
|
}
|
|
.tg-spin{ animation: tgSpin 1s linear infinite; }
|
|
@keyframes tgSpin{ to { transform: rotate(360deg);} }
|
|
|
|
/* Header */
|
|
.tg-head{ grid-area: head; display:flex; align-items:center; gap:10px; color:#e5e7eb; }
|
|
.tg-badge{
|
|
display:inline-flex; align-items:center; gap:.25rem;
|
|
font-size:11px; font-weight:700; letter-spacing:.6px;
|
|
padding:5px 8px; border-radius:999px;
|
|
background: rgba(31,41,55,.55);
|
|
border:1px solid rgba(255,255,255,.12);
|
|
color:#d1d5db;
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 14px rgba(0,0,0,.25);
|
|
}
|
|
.tg-title{ font-size:18px; letter-spacing:.2px; font-weight:800; }
|
|
|
|
/* Domain + Message */
|
|
.tg-domain{ grid-area: domain; font-size:20px; font-weight:800; color:#e5e7eb; }
|
|
.tg-msg { grid-area: msg; font-size:14px; color:#cbd5e1; }
|
|
|
|
/* Close */
|
|
.tg-close{
|
|
grid-area: close;
|
|
align-self:start;
|
|
background: rgba(255,255,255,.06);
|
|
border:1px solid rgba(255,255,255,.12);
|
|
border-radius:10px;
|
|
padding:6px; display:grid; place-items:center;
|
|
box-shadow: 0 0 10px rgba(0,0,0,.25);
|
|
}
|
|
.tg-close:hover{ background: rgba(255,255,255,.12); }
|
|
.tg-close.tg-spacer{ opacity:0; pointer-events:none; }
|
|
|
|
/* Kleine Status-Akzent-Farbton-Anpassung im Iconrahmen */
|
|
.tg-toast.tg-update .tg-icon{ border-color: rgba(6,182,212,.25); }
|
|
.tg-toast.tg-success .tg-icon{ border-color: rgba(34,197,94,.25); }
|
|
.tg-toast.tg-warning .tg-icon{ border-color: rgba(245,158,11,.25); }
|
|
.tg-toast.tg-error .tg-icon{ border-color: rgba(239,68,68,.25); }
|
|
|
|
.tg-card{ transform: translateY(8px); opacity:0; }
|
|
.tg-card.tg-in{ animation: tgIn .28s ease forwards; }
|
|
.tg-out .tg-card{ animation: tgOut .25s ease forwards; }
|
|
@keyframes tgIn { to { opacity:1; transform: translateY(0); } }
|
|
@keyframes tgOut { to { opacity:0; transform: translateY(6px); } }
|
|
|
|
.notification-badge {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: .5px;
|
|
padding: 3px 7px;
|
|
border-radius: 6px;
|
|
background: rgba(255,255,255,.08);
|
|
color: #cbd5e1;
|
|
}
|
|
|
|
.notification-container .text-base {
|
|
margin-top: 1px; /* etwas optische Höhe ausgleichen */
|
|
}
|