160 lines
3.8 KiB
CSS
160 lines
3.8 KiB
CSS
.toast-host {
|
|
--toast-bg: rgba(22, 18, 32, 0.88);
|
|
--toast-border: rgba(255, 255, 255, 0.08);
|
|
--toast-text: #F3EFFA;
|
|
--toast-muted: #B7AEC8;
|
|
--toast-shadow: 0 12px 40px rgba(0, 0, 0, 0.42), 0 2px 8px rgba(0, 0, 0, 0.28);
|
|
position: fixed;
|
|
top: 72px;
|
|
left: 50%;
|
|
z-index: 1200;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 12px;
|
|
width: max-content;
|
|
max-width: calc(100vw - 32px);
|
|
transform: translateX(-50%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.toast-item {
|
|
position: relative;
|
|
min-width: 180px;
|
|
max-width: min(380px, calc(100vw - 32px));
|
|
padding: 13px 18px 13px 14px;
|
|
background: var(--toast-bg);
|
|
backdrop-filter: blur(18px) saturate(1.2);
|
|
-webkit-backdrop-filter: blur(18px) saturate(1.2);
|
|
box-shadow: var(--toast-shadow);
|
|
border: 1px solid var(--toast-border);
|
|
border-radius: 16px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: 12px;
|
|
box-sizing: border-box;
|
|
color: var(--toast-text);
|
|
font-size: 14px;
|
|
font-family: "PingFang SC", "Noto Sans SC", sans-serif;
|
|
font-weight: 500;
|
|
letter-spacing: 0.01em;
|
|
line-height: 1.45;
|
|
word-break: break-word;
|
|
opacity: 0;
|
|
transform: translateY(-10px) scale(0.96);
|
|
transition:
|
|
opacity 0.26s cubic-bezier(0.22, 1, 0.36, 1),
|
|
transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.toast-item::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0 auto 0 0;
|
|
width: 3px;
|
|
border-radius: 16px 0 0 16px;
|
|
background: var(--toast-accent, rgba(255, 255, 255, 0.28));
|
|
}
|
|
|
|
.toast-item.is-visible {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
|
|
.toast-item.is-leaving {
|
|
opacity: 0;
|
|
transform: translateY(-8px) scale(0.97);
|
|
}
|
|
|
|
.toast-icon {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--toast-icon-bg, rgba(255, 255, 255, 0.08));
|
|
color: var(--toast-accent, var(--toast-muted));
|
|
box-shadow: inset 0 0 0 1px var(--toast-icon-ring, rgba(255, 255, 255, 0.06));
|
|
}
|
|
|
|
.toast-icon svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
display: block;
|
|
}
|
|
|
|
.toast-text {
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding-right: 2px;
|
|
}
|
|
|
|
.toast-item--info {
|
|
--toast-accent: #A99BC4;
|
|
--toast-icon-bg: rgba(169, 155, 196, 0.14);
|
|
--toast-icon-ring: rgba(169, 155, 196, 0.22);
|
|
}
|
|
|
|
.toast-item--success {
|
|
--toast-accent: #EC237F;
|
|
--toast-icon-bg: rgba(241, 43, 158, 0.16);
|
|
--toast-icon-ring: rgba(241, 43, 158, 0.28);
|
|
box-shadow:
|
|
var(--toast-shadow),
|
|
0 0 0 1px rgba(241, 43, 158, 0.08),
|
|
0 10px 28px rgba(241, 43, 158, 0.12);
|
|
}
|
|
|
|
.toast-item--error {
|
|
--toast-accent: #FF6B7A;
|
|
--toast-icon-bg: rgba(255, 107, 122, 0.14);
|
|
--toast-icon-ring: rgba(255, 107, 122, 0.26);
|
|
box-shadow:
|
|
var(--toast-shadow),
|
|
0 0 0 1px rgba(255, 107, 122, 0.08),
|
|
0 10px 28px rgba(255, 107, 122, 0.1);
|
|
}
|
|
|
|
.toast-item--warning {
|
|
--toast-accent: #FFB84D;
|
|
--toast-icon-bg: rgba(255, 184, 77, 0.14);
|
|
--toast-icon-ring: rgba(255, 184, 77, 0.26);
|
|
box-shadow:
|
|
var(--toast-shadow),
|
|
0 0 0 1px rgba(255, 184, 77, 0.08),
|
|
0 10px 28px rgba(255, 184, 77, 0.1);
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.toast-host {
|
|
top: 56px;
|
|
gap: 10px;
|
|
max-width: calc(100vw - 24px);
|
|
}
|
|
|
|
.toast-item {
|
|
min-width: 0;
|
|
width: max-content;
|
|
max-width: calc(100vw - 24px);
|
|
padding: 12px 14px 12px 12px;
|
|
border-radius: 14px;
|
|
font-size: 13px;
|
|
gap: 10px;
|
|
}
|
|
|
|
.toast-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.toast-icon svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
}
|