shinuwa/sokko-g
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

new tool timer & alert revamp
All checks were successful
Deploy Sokko G / deploy (push) Successful in 6s
Details

Browse source
This commit is contained in:
Shinuwa 2026-07-26 11:41:42 +02:00
parent 0c7ae46b4d
commit 68005ef918
38 changed files with 2048 additions and 111 deletions
Download patch file Download diff file Expand all files Collapse all files

134
website/src/styles/_overlays.scss
View file

@ -321,25 +321,135 @@ body.is-resizing-drawer * {
gap: 10px;
}
@property --notification-toast-angle {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
.notification-toast {
--notification-toast-angle: 0deg;
position: fixed;
right: var(--space-5);
bottom: var(--space-5);
z-index: 360;
max-width: min(360px, calc(100vw - 32px));
padding: 11px 14px;
border: 1px solid rgba(246, 196, 83, 0.34);
border-radius: var(--radius-md);
display: grid;
grid-template-columns: minmax(0, 1fr) 34px;
align-items: center;
gap: var(--space-3);
max-width: min(460px, calc(100vw - 32px));
min-width: min(360px, calc(100vw - 32px));
padding: 14px 14px 14px 18px;
border: 2px solid transparent;
border-radius: var(--radius-lg);
background:
linear-gradient(135deg, rgba(16, 20, 38, 0.94), rgba(24, 20, 42, 0.94)) padding-box,
linear-gradient(135deg, rgba(246, 196, 83, 0.48), rgba(139, 92, 246, 0.28)) border-box;
radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.12), transparent 38%) padding-box,
linear-gradient(135deg, rgba(16, 20, 38, 0.98), rgba(24, 20, 42, 0.98)) padding-box,
conic-gradient(
from var(--notification-toast-angle),
rgba(246, 196, 83, 0.95),
rgba(139, 92, 246, 0.8),
rgba(56, 189, 248, 0.62),
rgba(246, 196, 83, 0.95)
) border-box;
color: var(--color-text-primary);
box-shadow:
var(--shadow-sm),
0 0 18px rgba(139, 92, 246, 0.16);
font-size: var(--font-size-sm);
font-weight: 800;
pointer-events: none;
var(--shadow-md),
0 0 24px rgba(139, 92, 246, 0.22),
0 0 18px rgba(246, 196, 83, 0.1);
font-size: var(--font-size-md);
font-weight: 900;
pointer-events: auto;
animation:
notification-toast-border-spin 2.4s linear infinite,
notification-toast-pulse 1.8s ease-in-out infinite;
}
.notification-toast.is-right {
right: var(--space-5);
animation:
notification-toast-enter-right 320ms var(--ease-standard),
notification-toast-border-spin 2.4s linear infinite,
notification-toast-pulse 1.8s ease-in-out infinite;
}
.notification-toast.is-left {
left: var(--space-5);
animation:
notification-toast-enter-left 320ms var(--ease-standard),
notification-toast-border-spin 2.4s linear infinite,
notification-toast-pulse 1.8s ease-in-out infinite;
}
.notification-toast span {
min-width: 0;
}
.notification-toast button {
display: inline-grid;
width: 34px;
min-width: 34px;
min-height: 34px;
place-items: center;
padding: 0;
border-color: rgba(165, 180, 252, 0.12);
background: rgba(5, 7, 17, 0.28);
color: var(--color-text-secondary);
}
.notification-toast button:hover {
border-color: rgba(196, 181, 253, 0.26);
background: rgba(21, 26, 48, 0.72);
color: var(--color-text-primary);
}
.notification-toast button .ui-icon {
width: 16px;
height: 16px;
}
@keyframes notification-toast-border-spin {
to { --notification-toast-angle: 360deg; }
}
@keyframes notification-toast-enter-right {
from {
opacity: 0;
transform: translateX(calc(100% + var(--space-5)));
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes notification-toast-enter-left {
from {
opacity: 0;
transform: translateX(calc(-100% - var(--space-5)));
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes notification-toast-pulse {
0%,
100% {
box-shadow:
var(--shadow-md),
0 0 24px rgba(139, 92, 246, 0.22),
0 0 18px rgba(246, 196, 83, 0.1);
}
50% {
box-shadow:
var(--shadow-md),
0 0 34px rgba(139, 92, 246, 0.3),
0 0 26px rgba(246, 196, 83, 0.18);
}
}
.tool-add-modal {