Fix: Toast kompakter + kein Umbruch bei Titel
- max-width 350→300px, padding/gap reduziert - Icon 34→28px, Close-Btn 30→22px - Titel-Span fix: notification-title-text statt notification-title (kein verschachtelter Flex mehr) - Font-sizes: title 11.5px, text 10.5px, badge 9px - Akzentfarben für success/warning/error/info angepasst Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>main v1.1.380
parent
597773123f
commit
c276a17a98
|
|
@ -27,7 +27,7 @@
|
|||
.notification {
|
||||
position: fixed;
|
||||
z-index: 999999;
|
||||
max-width: 350px;
|
||||
max-width: 300px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -64,11 +64,11 @@
|
|||
}
|
||||
|
||||
.notification-title {
|
||||
padding-right: 30px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
.notification-icon {
|
||||
min-width: 1.7rem;
|
||||
min-width: 1.4rem;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
padding: 2px;
|
||||
|
|
@ -77,8 +77,8 @@
|
|||
|
||||
.notification-dismiss-btn {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 6px -2px black;
|
||||
|
|
@ -90,7 +90,7 @@
|
|||
}
|
||||
|
||||
.notification-dismiss-btn svg {
|
||||
width: 1.5rem;
|
||||
width: 1.1rem;
|
||||
}
|
||||
|
||||
/*.default-mode {*/
|
||||
|
|
@ -272,11 +272,10 @@
|
|||
position: relative;
|
||||
margin: 5px;
|
||||
width: fit-content;
|
||||
border-radius: 10px;
|
||||
opacity: 0.95;
|
||||
border-radius: 13px;
|
||||
opacity: 0.98;
|
||||
overflow: hidden;
|
||||
transition: opacity 500ms ease-in-out,
|
||||
transform 500ms;
|
||||
transition: opacity 500ms ease-in-out, transform 500ms;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -293,7 +292,7 @@
|
|||
}
|
||||
|
||||
.notification-message {
|
||||
font-size: 13px;
|
||||
font-size: 11.5px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
|
|
@ -305,8 +304,8 @@
|
|||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px 15px;
|
||||
gap: 10px;
|
||||
padding: 11px 12px;
|
||||
gap: 9px;
|
||||
}
|
||||
|
||||
.notification-block b {
|
||||
|
|
@ -613,66 +612,82 @@
|
|||
}
|
||||
|
||||
.notification.glass-mode .notification-block {
|
||||
padding: 14px 16px 16px 16px;
|
||||
gap: 12px;
|
||||
padding: 10px 12px 11px 12px;
|
||||
gap: 9px;
|
||||
}
|
||||
|
||||
/* Icon als soft pill */
|
||||
.notification.glass-mode .notification-icon {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
flex-shrink: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 10px;
|
||||
border-radius: 8px;
|
||||
background: rgba(255,255,255,.06);
|
||||
border: 1px solid rgba(255,255,255,.08);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
|
||||
}
|
||||
|
||||
.notification.glass-mode .notification-icon svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
/* Headline-Zeile: Badge + Title */
|
||||
.notification.glass-mode .notification-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding-right: 36px;
|
||||
font-weight: 700;
|
||||
letter-spacing: .2px;
|
||||
gap: 6px;
|
||||
padding-right: 24px;
|
||||
font-size: 11.5px;
|
||||
font-weight: 600;
|
||||
letter-spacing: .1px;
|
||||
color: var(--mw-t1, #edf0fc);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* Badge aus data-badge rendern */
|
||||
.notification.glass-mode .notification-container[data-badge] .notification-title::before {
|
||||
content: attr(data-badge);
|
||||
font-size: 10px;
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
letter-spacing: .6px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 9px;
|
||||
letter-spacing: .5px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 7px;
|
||||
border: 1px solid var(--mw-b2, #242840);
|
||||
background: var(--mw-bg4, #161a28);
|
||||
color: var(--mw-t3, #737b96);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Subtext */
|
||||
.notification.glass-mode .notification-message {
|
||||
margin-top: 6px;
|
||||
line-height: 1.35;
|
||||
margin-top: 4px;
|
||||
font-size: 10.5px;
|
||||
line-height: 1.4;
|
||||
color: var(--mw-t2, #9aa3be);
|
||||
}
|
||||
|
||||
/* Close-Button dezenter */
|
||||
.notification.glass-mode .notification-dismiss-btn {
|
||||
top: 10px; right: 10px;
|
||||
width: 30px; height: 30px;
|
||||
top: 7px; right: 7px;
|
||||
width: 22px; height: 22px;
|
||||
display: grid; place-items: center;
|
||||
background: var(--mw-bg4, #161a28);
|
||||
border: 1px solid var(--mw-b2, #242840);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,.30);
|
||||
box-shadow: none;
|
||||
}
|
||||
.notification.glass-mode .notification-dismiss-btn:hover {
|
||||
background: var(--mw-b1, #1c2035);
|
||||
}
|
||||
.notification.glass-mode .notification-dismiss-btn svg {
|
||||
width: 11px; height: 11px;
|
||||
stroke: var(--mw-t3, #737b96);
|
||||
}
|
||||
|
||||
/* Progressbar dünn & soft */
|
||||
.notification.glass-mode .notification-progressbar {
|
||||
|
|
@ -705,9 +720,21 @@
|
|||
background: rgba(var(--toast-accent-green), .10);
|
||||
border-color: rgba(var(--toast-accent-green), .25);
|
||||
}
|
||||
.notification-toast-success .notification-title { color: #bbf7d0; } /* green-200 */
|
||||
.notification-toast-success .notification-title { color: #86efac; } /* green-300 */
|
||||
.notification-toast-success .notification-title-text { color: #86efac; }
|
||||
.notification-toast-success .notification-progressbar {
|
||||
background: rgba(var(--toast-accent-green), .9);
|
||||
background: rgba(var(--toast-accent-green), .8);
|
||||
}
|
||||
|
||||
/* Warning */
|
||||
.notification-toast-warning .notification-icon {
|
||||
background: rgba(var(--toast-accent-amber), .10);
|
||||
border-color: rgba(var(--toast-accent-amber), .25);
|
||||
}
|
||||
.notification-toast-warning .notification-title { color: #fcd34d; } /* amber-300 */
|
||||
.notification-toast-warning .notification-title-text { color: #fcd34d; }
|
||||
.notification-toast-warning .notification-progressbar {
|
||||
background: rgba(var(--toast-accent-amber), .8);
|
||||
}
|
||||
|
||||
/* Error */
|
||||
|
|
@ -715,9 +742,10 @@
|
|||
background: rgba(var(--toast-accent-red), .10);
|
||||
border-color: rgba(var(--toast-accent-red), .28);
|
||||
}
|
||||
.notification-toast-error .notification-title { color: #fecaca; } /* red-200 */
|
||||
.notification-toast-error .notification-title { color: #fca5a5; } /* red-300 */
|
||||
.notification-toast-error .notification-title-text { color: #fca5a5; }
|
||||
.notification-toast-error .notification-progressbar {
|
||||
background: rgba(var(--toast-accent-red), .9);
|
||||
background: rgba(var(--toast-accent-red), .8);
|
||||
}
|
||||
|
||||
/* Info */
|
||||
|
|
@ -725,9 +753,10 @@
|
|||
background: rgba(var(--toast-accent-gray), .10);
|
||||
border-color: rgba(var(--toast-accent-gray), .25);
|
||||
}
|
||||
.notification-toast-info .notification-title { color:#e5e7eb; }
|
||||
.notification-toast-info .notification-title { color: var(--mw-t2, #9aa3be); }
|
||||
.notification-toast-info .notification-title-text { color: var(--mw-t2, #9aa3be); }
|
||||
.notification-toast-info .notification-progressbar {
|
||||
background: rgba(var(--toast-accent-gray), .85);
|
||||
background: rgba(var(--toast-accent-gray), .7);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -735,36 +764,44 @@
|
|||
.notification-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .5rem; /* Space between badge and title */
|
||||
gap: 5px;
|
||||
line-height: 1.2;
|
||||
margin-bottom: .15rem;
|
||||
margin-bottom: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* The badge itself (glass-styled) */
|
||||
.notification-badge {
|
||||
font-size: 10px;
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
letter-spacing: .6px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 9px;
|
||||
letter-spacing: .5px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 7px;
|
||||
border: 1px solid var(--mw-b2, #242840);
|
||||
background: var(--mw-bg4, #161a28);
|
||||
color: var(--mw-t3, #737b96);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* keep your bold style on the title text itself */
|
||||
.notification-title-text b {
|
||||
/* title text */
|
||||
.notification-title-text {
|
||||
font-size: 11.5px;
|
||||
font-weight: 600;
|
||||
color: var(--mw-t1, #edf0fc);
|
||||
font-weight: 800;
|
||||
letter-spacing: .3px;
|
||||
letter-spacing: .1px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Subtitle (domain) on its own line, slightly larger and brighter */
|
||||
/* Subtitle */
|
||||
.notification-subtitle {
|
||||
margin-top: .25rem;
|
||||
font-weight: 700;
|
||||
color: var(--mw-t1, #edf0fc);
|
||||
margin-top: 2px;
|
||||
font-size: 10.5px;
|
||||
font-weight: 500;
|
||||
color: var(--mw-t2, #9aa3be);
|
||||
}
|
||||
|
||||
/* Glass container duplicate removed – see above */
|
||||
|
|
|
|||
|
|
@ -96,11 +96,11 @@ function Toastra() {
|
|||
notificationTitle.appendChild(badgeEl);
|
||||
}
|
||||
|
||||
// Title text (keep your current behavior)
|
||||
// Title text
|
||||
if (options.title && options.title.length) {
|
||||
const titleText = document.createElement("span");
|
||||
titleText.className = "notification-title";
|
||||
titleText.innerHTML = "<b>" + options.title + "</b>";
|
||||
titleText.className = "notification-title-text";
|
||||
titleText.innerHTML = options.title;
|
||||
notificationTitle.appendChild(titleText);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue