778 lines
20 KiB
CSS
778 lines
20 KiB
CSS
* {
|
||
--toast-white: 255,255,255;
|
||
--toast-black: 0,0,0;
|
||
--toast-green: 102, 187, 106;
|
||
--toast-red: 239, 83, 80;
|
||
--toast-nutral: 189, 189, 189;
|
||
--toast-orange: 255, 165, 0;
|
||
--toast-yellow: 212 194 129;
|
||
--toast-gray: 238, 238, 238;
|
||
--toast-dark-gray: 140, 140, 140;
|
||
|
||
--white: 255, 255, 255;
|
||
|
||
--box-shaddow-inset: inset 10px -10px 15px -15px;
|
||
--box-shaddow-outset: 0px 10px 10px -4px rgb(0 0 0 / 0.4);
|
||
--toast-lightmode: #ffffff;
|
||
--toast-darkmode: #1b1b1e;
|
||
--toast-progressbar: #8f8f8f;
|
||
|
||
--glass-bg: rgba(17, 24, 39, 0.55); /* #111827 @ ~55% */
|
||
--glass-bg-light: rgba(31, 41, 55, 0.40); /* #1F2937 */
|
||
--glass-border: rgba(255, 255, 255, 0.08);
|
||
--glass-ring: rgba(34, 197, 94, 0.35); /* soft green glow */
|
||
|
||
}
|
||
|
||
.notification {
|
||
position: fixed;
|
||
z-index: 999999;
|
||
max-width: 350px;
|
||
width: 100%;
|
||
}
|
||
|
||
.top-right {
|
||
top: 20px;
|
||
right: 20px;
|
||
}
|
||
|
||
.top-center {
|
||
top: 20px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.bottom-left {
|
||
bottom: 20px;
|
||
left: 20px;
|
||
}
|
||
|
||
.bottom-right {
|
||
bottom: 20px;
|
||
right: 20px;
|
||
}
|
||
|
||
.bottom-center {
|
||
bottom: 20px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.top-left {
|
||
top: 20px;
|
||
left: 20px;
|
||
}
|
||
|
||
.notification-title {
|
||
padding-right: 30px;
|
||
}
|
||
|
||
.notification-icon {
|
||
min-width: 1.7rem;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
padding: 2px;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.notification-dismiss-btn {
|
||
position: absolute;
|
||
top: 12px;
|
||
right: 12px;
|
||
backdrop-filter: blur(10px);
|
||
border-radius: 5px;
|
||
box-shadow: 0 0 6px -2px black;
|
||
transition: background 200ms;
|
||
}
|
||
|
||
.notification-dismiss-btn:hover {
|
||
background: rgba(255, 255, 255, 0.44);
|
||
}
|
||
|
||
.notification-dismiss-btn svg {
|
||
width: 1.5rem;
|
||
}
|
||
|
||
/*.default-mode {*/
|
||
.notification-toast-default {
|
||
background: var(--toast-white);
|
||
color: rgba(var(--toast-black));
|
||
/*box-shadow: var(--box-shaddow-inset) rgba(var(--black-300)), var(--box-shaddow-outset);*/
|
||
}
|
||
|
||
.notification-toast-update {
|
||
color: var(--toast-white);
|
||
svg :nth-child(1) {
|
||
stroke: rgba(var(--toast-white));
|
||
}
|
||
}
|
||
|
||
|
||
.notification-toast-success {
|
||
color: rgba(var(--toast-black));
|
||
svg path {
|
||
stroke: rgba(var(--toast-green));
|
||
}
|
||
.notification-icon {
|
||
background: rgba(var(--toast-green),.1);
|
||
box-shadow: var(--box-shaddow-inset) rgba(var(--toast-green),.5);
|
||
}
|
||
.notification-title {
|
||
color: rgba(var(--toast-green));
|
||
}
|
||
.notification-dismiss-btn {
|
||
background: rgba(var(--toast-green),.1);
|
||
}
|
||
}
|
||
|
||
.notification-toast-success:before {
|
||
background: rgba(var(--toast-green));
|
||
}
|
||
|
||
.notification-toast-warning {
|
||
color: rgba(var(--toast-black));
|
||
svg path {
|
||
stroke: rgba(var(--toast-orange));
|
||
}
|
||
.notification-icon {
|
||
background: rgba(var(--toast-orange),.1);
|
||
box-shadow: var(--box-shaddow-inset) rgba(var(--toast-orange),.5);
|
||
}
|
||
.notification-title {
|
||
color: rgba(var(--toast-orange));
|
||
}
|
||
.notification-dismiss-btn {
|
||
background: rgba(var(--toast-orange),.1);
|
||
}
|
||
}
|
||
|
||
.notification-toast-warning:before {
|
||
background: rgba(var(--toast-orange));
|
||
}
|
||
|
||
.notification-toast-info {
|
||
color: rgba(var(--toast-black));
|
||
svg path {
|
||
stroke: rgba(var(--toast-gray));
|
||
}
|
||
.notification-icon {
|
||
background: rgba(var(--toast-dark-gray),.1);
|
||
box-shadow: var(--box-shaddow-inset) rgba(var(--toast-dark-gray),.5);
|
||
}
|
||
.notification-title {
|
||
color: rgba(var(--toast-gray));
|
||
}
|
||
.notification-dismiss-btn {
|
||
background: rgba(var(--toast-gray),.1);
|
||
}
|
||
}
|
||
|
||
.notification-toast-info:before {
|
||
background: rgba(var(--toast-dark-gray));
|
||
}
|
||
|
||
.notification-toast-error {
|
||
color: rgba(var(--toast-black));
|
||
svg path {
|
||
stroke: rgba(var(--toast-red));
|
||
}
|
||
.notification-icon {
|
||
background: rgba(var(--toast-red),.1);
|
||
box-shadow: var(--box-shaddow-inset) rgba(var(--toast-red),.5);
|
||
}
|
||
.notification-title {
|
||
color: rgba(var(--toast-red));
|
||
}
|
||
.notification-dismiss-btn {
|
||
background: rgba(var(--toast-red),.1);
|
||
}
|
||
}
|
||
|
||
.notification-toast-error:before {
|
||
background: rgba(var(--toast-red));
|
||
}
|
||
|
||
/*}*/
|
||
|
||
.light-mode {
|
||
.notification-toast-default,
|
||
.notification-toast-success,
|
||
.notification-toast-update,
|
||
.notification-toast-warning,
|
||
.notification-toast-info,
|
||
.notification-toast-error {
|
||
background: var(--toast-lightmode);
|
||
color: rgba(var(--toast-black));
|
||
}
|
||
}
|
||
|
||
.dark-mode {
|
||
.notification-toast-default,
|
||
.notification-toast-success,
|
||
.notification-toast-update,
|
||
.notification-toast-warning,
|
||
.notification-toast-info,
|
||
.notification-toast-error {
|
||
background: var(--toast-darkmode);
|
||
color: var(--toast-white);
|
||
}
|
||
}
|
||
|
||
.notification-toast-default .notification-progressbar {
|
||
background: var(--toast-progressbar);
|
||
}
|
||
|
||
.notification-toast-success .notification-progressbar {
|
||
background: rgba(var(--toast-green));
|
||
}
|
||
|
||
.notification-toast-info .notification-progressbar {
|
||
background: var(--toast-progressbar);
|
||
}
|
||
|
||
.notification-toast-warning .notification-progressbar {
|
||
background: rgba(var(--toast-orange));
|
||
}
|
||
|
||
.notification-toast-error .notification-progressbar {
|
||
background: rgba(var(--toast-red));
|
||
}
|
||
|
||
.notification-toast-update .notification-progressbar {
|
||
background: var(--toast-progressbar);
|
||
}
|
||
|
||
.top-right .notification-container,
|
||
.bottom-right .notification-container {
|
||
margin-left: auto;
|
||
}
|
||
|
||
.top-left .notification-container,
|
||
.bottom-left .notification-container {
|
||
margin-right: auto;
|
||
}
|
||
|
||
.top-center .notification-container,
|
||
.bottom-center .notification-container {
|
||
margin-right: auto;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.notification-progressbar {
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
height: 3px;
|
||
width: 0;
|
||
transition: width attr(data-duration ms) linear;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.notification-container {
|
||
position: relative;
|
||
margin: 5px;
|
||
width: fit-content;
|
||
border-radius: 10px;
|
||
opacity: 0.95;
|
||
overflow: hidden;
|
||
transition: opacity 500ms ease-in-out,
|
||
transform 500ms;
|
||
}
|
||
|
||
|
||
.notification-container:before {
|
||
content: "";
|
||
position: absolute;
|
||
width: 30px;
|
||
height: 30px;
|
||
filter: blur(15px);
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
left: -20px;
|
||
border-radius: 100%;
|
||
}
|
||
|
||
.notification-message {
|
||
font-size: 13px;
|
||
line-height: 1;
|
||
}
|
||
|
||
.notification-active {
|
||
right: 5px;
|
||
}
|
||
|
||
.notification-block {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 15px 15px;
|
||
gap: 10px;
|
||
}
|
||
|
||
.notification-block b {
|
||
line-height: 2;
|
||
}
|
||
|
||
.notification-animation {
|
||
padding: 0.125rem;
|
||
animation: update 1s linear infinite;
|
||
}
|
||
|
||
@keyframes update {
|
||
from {
|
||
transform: rotate(0deg);
|
||
}
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
.slide-in.slide-down {
|
||
animation: slideInDown 600ms;
|
||
}
|
||
|
||
.slide-out.slide-down {
|
||
animation: slideOutDown 600ms;
|
||
}
|
||
|
||
@keyframes slideInDown {
|
||
from {
|
||
transform: translateY(-100vh);
|
||
}
|
||
to {
|
||
transform: unset;
|
||
}
|
||
}
|
||
|
||
@keyframes slideOutDown {
|
||
from {
|
||
transform: unset;
|
||
}
|
||
to {
|
||
transform: translateY(-100vh);
|
||
}
|
||
}
|
||
|
||
.slide-in.slide-up {
|
||
animation: slideInUp 600ms;
|
||
}
|
||
|
||
.slide-out.slide-up {
|
||
animation: slideOutUp 600ms;
|
||
}
|
||
|
||
@keyframes slideInUp {
|
||
from {
|
||
transform: translateY(100vh);
|
||
}
|
||
to {
|
||
transform: unset;
|
||
}
|
||
}
|
||
|
||
@keyframes slideOutUp {
|
||
from {
|
||
transform: unset;
|
||
}
|
||
to {
|
||
transform: translateY(100vh);
|
||
}
|
||
}
|
||
|
||
.slide-in.slide-right {
|
||
animation: slideInRight 600ms;
|
||
}
|
||
|
||
.slide-out.slide-right {
|
||
animation: slideOutRight 600ms;
|
||
}
|
||
|
||
@keyframes slideInRight {
|
||
from {
|
||
transform: translateX(100vh);
|
||
}
|
||
to {
|
||
transform: unset;
|
||
}
|
||
}
|
||
|
||
@keyframes slideOutRight {
|
||
from {
|
||
transform: unset;
|
||
}
|
||
to {
|
||
transform: translateX(100vh);
|
||
}
|
||
}
|
||
|
||
.slide-in.slide-left {
|
||
animation: slideInLeft 600ms;
|
||
}
|
||
|
||
.slide-out.slide-left {
|
||
animation: slideOutLeft 600ms;
|
||
}
|
||
|
||
@keyframes slideInLeft {
|
||
from {
|
||
transform: translateX(-100vh);
|
||
}
|
||
to {
|
||
transform: unset;
|
||
}
|
||
}
|
||
|
||
@keyframes slideOutLeft {
|
||
from {
|
||
transform: unset;
|
||
}
|
||
to {
|
||
transform: translateX(-100vh);
|
||
}
|
||
}
|
||
|
||
|
||
|
||
/*.notification.glass-mode .notification-container {*/
|
||
/* backdrop-filter: blur(10px);*/
|
||
/* background: rgba(31,41,55,.45);*/
|
||
/* border: 1px solid rgba(255,255,255,.08);*/
|
||
/* border-radius: 14px;*/
|
||
/* box-shadow: 0 8px 30px rgba(0,0,0,.25);*/
|
||
/*}*/
|
||
/*.notification-title { color: #e5e7eb; } !* text-gray-200 *!*/
|
||
/*.notification-text { color: #cbd5e1; } !* text-gray-300 *!*/
|
||
|
||
|
||
/*!* Root container gets .glass-mode in addition to .notification *!*/
|
||
/*.notification.glass-mode {*/
|
||
/* !* Positions bleiben wie gehabt *!*/
|
||
/*}*/
|
||
|
||
/*!* Ein einzelner Toast *!*/
|
||
/*.notification.glass-mode .notification-container {*/
|
||
/* background: var(--glass-bg);*/
|
||
/* backdrop-filter: blur(10px);*/
|
||
/* -webkit-backdrop-filter: blur(10px);*/
|
||
/* border: 1px solid var(--glass-border);*/
|
||
/* border-radius: 14px;*/
|
||
/* box-shadow: 0 8px 30px rgba(0,0,0,.25);*/
|
||
/* color: rgba(var(--toast-white), .95);*/
|
||
/*}*/
|
||
|
||
/*!* Innerer Block *!*/
|
||
/*.notification.glass-mode .notification-block {*/
|
||
/* background: linear-gradient(*/
|
||
/* 180deg,*/
|
||
/* rgba(255,255,255,0.02) 0%,*/
|
||
/* rgba(0,0,0,0.05) 100%*/
|
||
/* );*/
|
||
/* border-radius: 12px;*/
|
||
/*}*/
|
||
|
||
/*!* Titel/Copy *!*/
|
||
/*.notification.glass-mode .notification-title {*/
|
||
/* color: rgba(229,231,235,.95); !* gray-200 *!*/
|
||
/* font-weight: 600;*/
|
||
/*}*/
|
||
/*.notification.glass-mode .notification-message {*/
|
||
/* color: rgba(203,213,225,.95); !* gray-300 *!*/
|
||
/*}*/
|
||
|
||
/*!* Dismiss *!*/
|
||
/*.notification.glass-mode .notification-dismiss-btn {*/
|
||
/* background: rgba(255,255,255,0.06);*/
|
||
/* border: 1px solid var(--glass-border);*/
|
||
/* box-shadow: 0 4px 16px rgba(0,0,0,.2);*/
|
||
/*}*/
|
||
/*.notification.glass-mode .notification-dismiss-btn:hover {*/
|
||
/* background: rgba(255,255,255,0.12);*/
|
||
/*}*/
|
||
|
||
/*!* Icon-Kapsel *!*/
|
||
/*.notification.glass-mode .notification-icon {*/
|
||
/* background: var(--glass-bg-light);*/
|
||
/* border: 1px solid var(--glass-border);*/
|
||
/* box-shadow: inset 0 1px 0 rgba(255,255,255,.04);*/
|
||
/*}*/
|
||
|
||
/*!* Progressbar (fein, halbtransparent) *!*/
|
||
/*.notification.glass-mode .notification-progressbar {*/
|
||
/* height: 2px;*/
|
||
/* border-radius: 1px;*/
|
||
/* opacity: .9;*/
|
||
/*}*/
|
||
|
||
/*!* Variants – dezente Akzentfarbe + linkes Accent-Bar *!*/
|
||
/*.notification.glass-mode .notification-container { position: relative; }*/
|
||
/*.notification.glass-mode .notification-container::before {*/
|
||
/* content: "";*/
|
||
/* position: absolute;*/
|
||
/* inset: 0 0 0 auto; !* deaktiviert — wir nutzen unten per Variant *!*/
|
||
/*}*/
|
||
|
||
/*!* SUCCESS *!*/
|
||
/*.notification.glass-mode .notification-toast-success {*/
|
||
/* --accent: rgba(var(--toast-green), 1);*/
|
||
/*}*/
|
||
/*.notification.glass-mode .notification-toast-success .notification-icon {*/
|
||
/* background: rgba(var(--toast-green), .12);*/
|
||
/* border-color: rgba(var(--toast-green), .25);*/
|
||
/*}*/
|
||
/*.notification.glass-mode .notification-toast-success .notification-title {*/
|
||
/* color: rgba(var(--toast-green), .95);*/
|
||
/*}*/
|
||
/*.notification.glass-mode .notification-toast-success .notification-progressbar {*/
|
||
/* background: var(--accent);*/
|
||
/*}*/
|
||
/*.notification.glass-mode .notification-toast-success::before {*/
|
||
/* content: "";*/
|
||
/* position: absolute;*/
|
||
/* left: 0; top: 0; bottom: 0; width: 3px;*/
|
||
/* background: linear-gradient(180deg, var(--accent), rgba(var(--toast-green), .6));*/
|
||
/* border-radius: 3px 0 0 3px;*/
|
||
/*}*/
|
||
|
||
/*!* INFO / UPDATE (neutral) *!*/
|
||
/*.notification.glass-mode .notification-toast-info,*/
|
||
/*.notification.glass-mode .notification-toast-update {*/
|
||
/* --accent: rgba(var(--toast-dark-gray), 1);*/
|
||
/*}*/
|
||
/*.notification.glass-mode .notification-toast-info .notification-icon,*/
|
||
/*.notification.glass-mode .notification-toast-update .notification-icon {*/
|
||
/* background: rgba(var(--toast-dark-gray), .12);*/
|
||
/* border-color: rgba(var(--toast-dark-gray), .25);*/
|
||
/*}*/
|
||
/*.notification.glass-mode .notification-toast-info .notification-title,*/
|
||
/*.notification.glass-mode .notification-toast-update .notification-title {*/
|
||
/* color: rgba(var(--toast-gray), .95);*/
|
||
/*}*/
|
||
/*.notification.glass-mode .notification-toast-info .notification-progressbar,*/
|
||
/*.notification.glass-mode .notification-toast-update .notification-progressbar {*/
|
||
/* background: var(--accent);*/
|
||
/*}*/
|
||
/*.notification.glass-mode .notification-toast-info::before,*/
|
||
/*.notification.glass-mode .notification-toast-update::before {*/
|
||
/* content: "";*/
|
||
/* position: absolute;*/
|
||
/* left: 0; top: 0; bottom: 0; width: 3px;*/
|
||
/* background: linear-gradient(180deg, var(--accent), rgba(var(--toast-dark-gray), .6));*/
|
||
/* border-radius: 3px 0 0 3px;*/
|
||
/*}*/
|
||
|
||
/*!* WARNING *!*/
|
||
/*.notification.glass-mode .notification-toast-warning {*/
|
||
/* --accent: rgba(var(--toast-orange), 1);*/
|
||
/*}*/
|
||
/*.notification.glass-mode .notification-toast-warning .notification-icon {*/
|
||
/* background: rgba(var(--toast-orange), .12);*/
|
||
/* border-color: rgba(var(--toast-orange), .25);*/
|
||
/*}*/
|
||
/*.notification.glass-mode .notification-toast-warning .notification-title {*/
|
||
/* color: rgba(var(--toast-orange), .95);*/
|
||
/*}*/
|
||
/*.notification.glass-mode .notification-toast-warning .notification-progressbar {*/
|
||
/* background: var(--accent);*/
|
||
/*}*/
|
||
/*.notification.glass-mode .notification-toast-warning::before {*/
|
||
/* content: "";*/
|
||
/* position: absolute;*/
|
||
/* left: 0; top: 0; bottom: 0; width: 3px;*/
|
||
/* background: linear-gradient(180deg, var(--accent), rgba(var(--toast-orange), .6));*/
|
||
/* border-radius: 3px 0 0 3px;*/
|
||
/*}*/
|
||
|
||
/*!* ERROR *!*/
|
||
/*.notification.glass-mode .notification-toast-error {*/
|
||
/* --accent: rgba(var(--toast-red), 1);*/
|
||
/*}*/
|
||
/*.notification.glass-mode .notification-toast-error .notification-icon {*/
|
||
/* background: rgba(var(--toast-red), .12);*/
|
||
/* border-color: rgba(var(--toast-red), .25);*/
|
||
/*}*/
|
||
/*.notification.glass-mode .notification-toast-error .notification-title {*/
|
||
/* color: rgba(var(--toast-red), .95);*/
|
||
/*}*/
|
||
/*.notification.glass-mode .notification-toast-error .notification-progressbar {*/
|
||
/* background: var(--accent);*/
|
||
/*}*/
|
||
/*.notification.glass-mode .notification-toast-error::before {*/
|
||
/* content: "";*/
|
||
/* position: absolute;*/
|
||
/* left: 0; top: 0; bottom: 0; width: 3px;*/
|
||
/* background: linear-gradient(180deg, var(--accent), rgba(var(--toast-red), .6));*/
|
||
/* border-radius: 3px 0 0 3px;*/
|
||
/*}*/
|
||
/* ===== Toast · Glass v2 (Badge) ===== */
|
||
.notification.glass-mode .notification-container {
|
||
backdrop-filter: blur(14px);
|
||
background: rgba(17, 24, 39, .52); /* dunkleres Glas */
|
||
border: 1px solid rgba(255,255,255,.09);
|
||
border-radius: 16px;
|
||
box-shadow: 0 12px 40px rgba(0,0,0,.28);
|
||
}
|
||
|
||
.notification.glass-mode .notification-block {
|
||
padding: 14px 16px 16px 16px;
|
||
gap: 12px;
|
||
}
|
||
|
||
/* Icon als soft pill */
|
||
.notification.glass-mode .notification-icon {
|
||
width: 34px;
|
||
height: 34px;
|
||
display: grid;
|
||
place-items: center;
|
||
border-radius: 10px;
|
||
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);
|
||
}
|
||
|
||
/* Headline-Zeile: Badge + Title */
|
||
.notification.glass-mode .notification-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding-right: 36px; /* Platz für Close */
|
||
font-weight: 700;
|
||
letter-spacing: .2px;
|
||
color: #e5e7eb; /* text-gray-200 */
|
||
}
|
||
|
||
/* Badge aus data-badge rendern */
|
||
.notification.glass-mode .notification-container[data-badge] .notification-title::before {
|
||
content: attr(data-badge);
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
letter-spacing: .6px;
|
||
padding: 4px 8px;
|
||
border-radius: 9px;
|
||
border: 1px solid rgba(255,255,255,.10);
|
||
background: rgba(31,41,55,.55); /* dunkles Glas */
|
||
color: #cbd5e1; /* text-gray-300 */
|
||
box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
|
||
}
|
||
|
||
/* Subtext */
|
||
.notification.glass-mode .notification-message {
|
||
margin-top: 6px;
|
||
line-height: 1.35;
|
||
color: #cbd5e1; /* text-gray-300 */
|
||
}
|
||
|
||
/* Close-Button dezenter */
|
||
.notification.glass-mode .notification-dismiss-btn {
|
||
top: 10px; right: 10px;
|
||
width: 30px; height: 30px;
|
||
display: grid; place-items: center;
|
||
background: rgba(255,255,255,.06);
|
||
border: 1px solid rgba(255,255,255,.10);
|
||
box-shadow: 0 6px 20px rgba(0,0,0,.25);
|
||
}
|
||
.notification.glass-mode .notification-dismiss-btn:hover {
|
||
background: rgba(255,255,255,.12);
|
||
}
|
||
|
||
/* Progressbar dünn & soft */
|
||
.notification.glass-mode .notification-progressbar {
|
||
height: 2px;
|
||
border-radius: 2px;
|
||
opacity: .9;
|
||
}
|
||
|
||
/* --- State-Akzente -------------------------------------------------- */
|
||
:root {
|
||
--toast-accent-cyan: 14,116,144; /* cyan-700 */
|
||
--toast-accent-green: 34,197, 94; /* green-500 */
|
||
--toast-accent-red: 239, 68, 68; /* red-500 */
|
||
--toast-accent-amber:245,158, 11; /* amber-500 */
|
||
--toast-accent-gray: 148,163,184; /* slate-400 */
|
||
}
|
||
|
||
/* Update / running */
|
||
.notification-toast-update .notification-icon {
|
||
background: rgba(var(--toast-accent-cyan), .12);
|
||
border-color: rgba(var(--toast-accent-cyan), .28);
|
||
}
|
||
.notification-toast-update .notification-title { color:#e6fbff; }
|
||
.notification-toast-update .notification-progressbar {
|
||
background: rgba(var(--toast-accent-cyan), .85);
|
||
}
|
||
|
||
/* Success */
|
||
.notification-toast-success .notification-icon {
|
||
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-progressbar {
|
||
background: rgba(var(--toast-accent-green), .9);
|
||
}
|
||
|
||
/* Error */
|
||
.notification-toast-error .notification-icon {
|
||
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-progressbar {
|
||
background: rgba(var(--toast-accent-red), .9);
|
||
}
|
||
|
||
/* Info */
|
||
.notification-toast-info .notification-icon {
|
||
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-progressbar {
|
||
background: rgba(var(--toast-accent-gray), .85);
|
||
}
|
||
|
||
|
||
/* Title row with inline badge */
|
||
.notification-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: .5rem; /* Space between badge and title */
|
||
line-height: 1.2;
|
||
margin-bottom: .15rem;
|
||
}
|
||
|
||
/* The badge itself (glass-styled) */
|
||
.notification-badge {
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
letter-spacing: .6px;
|
||
padding: 4px 8px;
|
||
border-radius: 9px;
|
||
border: 1px solid rgba(255,255,255,.10);
|
||
background: rgba(31,41,55,.55);
|
||
color: #cbd5e1; /* gray-300 */
|
||
box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
|
||
}
|
||
|
||
/* keep your bold style on the title text itself */
|
||
.notification-title-text b {
|
||
color: #e5e7eb; /* gray-200 */
|
||
font-weight: 800;
|
||
letter-spacing: .3px;
|
||
}
|
||
|
||
/* Subtitle (domain) on its own line, slightly larger and brighter */
|
||
.notification-subtitle {
|
||
margin-top: .25rem;
|
||
font-weight: 700;
|
||
color: #e5e7eb; /* gray-200 */
|
||
}
|
||
|
||
/* Glass container (you already had this, listing again for completeness) */
|
||
.notification.glass-mode .notification-container {
|
||
backdrop-filter: blur(10px);
|
||
background: rgba(31,41,55,.45);
|
||
border: 1px solid rgba(255,255,255,.08);
|
||
border-radius: 14px;
|
||
box-shadow: 0 8px 30px rgba(0,0,0,.25);
|
||
}
|