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

Add guided onboarding tour for first toolbox creation
All checks were successful
Deploy Sokko G / deploy (push) Successful in 14s
Details

Browse source
This commit is contained in:
Shinuwa 2026-08-14 13:20:47 +02:00
parent 3007aa1389
commit 4f73e0068b
20 changed files with 470 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

119
website/src/styles/toolboxes/_layout.scss
View file

@ -178,6 +178,125 @@
outline-offset: 3px;
}
.toolbox-tutorial-tooltip {
position: fixed;
z-index: 640;
display: grid;
gap: var(--space-3);
padding: var(--space-4);
border: 1px solid rgba(246, 196, 83, 0.34);
border-radius: var(--radius-md);
background:
radial-gradient(circle at 12% 0%, rgba(246, 196, 83, 0.12), transparent 36%),
rgba(7, 10, 24, 0.98);
box-shadow:
var(--shadow-lg),
0 0 24px rgba(139, 92, 246, 0.18);
}
.toolbox-tutorial-tooltip::before {
content: "";
position: absolute;
top: -6px;
left: var(--tutorial-arrow-left, 50%);
width: 10px;
height: 10px;
border-top: 1px solid rgba(246, 196, 83, 0.34);
border-left: 1px solid rgba(246, 196, 83, 0.34);
background: rgba(7, 10, 24, 0.98);
transform: translateX(-50%) rotate(45deg);
}
.toolbox-tutorial-tooltip[data-placement="above"]::before {
top: auto;
bottom: -6px;
border-top: 0;
border-left: 0;
border-right: 1px solid rgba(246, 196, 83, 0.34);
border-bottom: 1px solid rgba(246, 196, 83, 0.34);
}
.toolbox-tutorial-tooltip[data-placement="right"]::before {
top: var(--tutorial-arrow-top, 50%);
left: -6px;
border-top: 0;
border-left: 1px solid rgba(246, 196, 83, 0.34);
border-right: 0;
border-bottom: 1px solid rgba(246, 196, 83, 0.34);
transform: translateY(-50%) rotate(45deg);
}
.toolbox-tutorial-heading {
display: flex;
align-items: center;
gap: var(--space-2);
padding-right: var(--space-6);
}
.toolbox-tutorial-heading .ui-icon {
width: 20px;
height: 20px;
color: var(--color-accent-gold);
}
.toolbox-tutorial-heading strong {
color: var(--color-text-primary);
line-height: 1.25;
}
.toolbox-tutorial-tooltip p {
margin: 0;
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
line-height: 1.5;
}
.toolbox-tutorial-count {
width: fit-content;
padding: 2px 7px;
border: 1px solid rgba(246, 196, 83, 0.22);
border-radius: var(--radius-pill);
color: var(--color-accent-gold);
font-size: var(--font-size-xs);
font-weight: 900;
}
.toolbox-tutorial-close {
position: absolute;
top: var(--space-3);
right: var(--space-3);
width: 30px;
min-width: 30px;
min-height: 30px;
justify-content: center;
padding: 0;
border-color: transparent;
background: transparent;
color: var(--color-text-muted);
}
.toolbox-tutorial-close:hover {
border-color: rgba(150, 165, 205, 0.18);
background: rgba(21, 26, 48, 0.62);
color: var(--color-text-primary);
box-shadow: none;
}
.toolbox-tutorial-close .ui-icon {
width: 16px;
height: 16px;
}
.toolbox-tutorial-tooltip footer {
display: flex;
justify-content: flex-end;
}
.toolbox-tutorial-tooltip footer button {
min-height: 36px;
padding-inline: var(--space-3);
}
.tool-add-controls {
position: relative;
z-index: 280;