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

12
website/src/styles/_home.scss
View file

@ -231,6 +231,18 @@ span {
font-size: var(--font-size-lg);
}
.home-onboarding-create-button {
min-height: 40px;
padding-inline: var(--space-4);
}
.home-onboarding-steps-action {
display: flex;
justify-content: flex-start;
padding-top: var(--space-2);
padding-left: calc(28px + var(--space-3));
}
.home-onboarding-preview {
display: grid;
align-content: start;

10
website/src/styles/_icons.scss
View file

@ -62,6 +62,16 @@
-webkit-mask-image: url("/static/icons/link.svg");
}
.ui-icon-picture {
mask-image: url("/static/icons/picture.svg");
-webkit-mask-image: url("/static/icons/picture.svg");
}
.ui-icon-toolbox {
mask-image: url("/static/icons/toolbox.svg");
-webkit-mask-image: url("/static/icons/toolbox.svg");
}
.ui-icon-settings {
mask-image: url("/static/icons/settings.svg");
-webkit-mask-image: url("/static/icons/settings.svg");

8
website/src/styles/_responsive.scss
View file

@ -83,6 +83,14 @@
width: 100%;
}
.home-onboarding-steps-action {
padding-left: 0;
}
.home-onboarding-create-button {
width: 100%;
}
.hero,
.game-hero,
.page-hero,

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;