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

Add wheel segment colors and hover labels
All checks were successful
Deploy Sokko G / deploy (push) Successful in 18s
Details

Browse source
This commit is contained in:
Shinuwa 2026-09-15 19:19:09 +02:00
parent a4268dac54
commit 418921934b
3 changed files with 87 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

42
website/src/styles/toolboxes/randomizer/_wheel.scss
View file

@ -38,6 +38,34 @@
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.42));
}
.randomizer-wheel-tooltip {
position: absolute;
top: 0;
left: 50%;
z-index: 3;
max-width: min(100%, 210px);
overflow: hidden;
padding: 5px 10px;
border: 1px solid rgba(246, 196, 83, 0.34);
border-radius: var(--radius-pill);
background: rgba(7, 10, 24, 0.94);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
color: var(--color-text-primary);
font-size: var(--font-size-xs);
font-weight: 900;
line-height: 1.2;
opacity: 0;
pointer-events: none;
text-overflow: ellipsis;
transform: translate(-50%, -82%);
transition: opacity var(--duration-fast) var(--ease-standard);
white-space: nowrap;
}
.randomizer-wheel-tooltip.is-visible {
opacity: 1;
}
.randomizer-wheel {
width: min(100%, 190px);
aspect-ratio: 1;
@ -110,6 +138,20 @@
stroke-width: 0.8;
}
.randomizer-wheel-segment {
cursor: help;
outline: none;
transition:
filter var(--duration-fast) var(--ease-standard),
opacity var(--duration-fast) var(--ease-standard);
}
.randomizer-wheel-segment:hover,
.randomizer-wheel-segment:focus-visible {
filter: brightness(1.16);
opacity: 0.94;
}
.randomizer-wheel-form .randomizer-entry-form {
padding: 0;
}