ben/HowDoYouConvert
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Polish palette controls and add power conversions

Browse Source
This commit is contained in:
Codex
2026-03-07 20:40:15 +00:00
parent 0586b35fe7
commit fbab62f6f6
3 changed files with 89 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
hdyc-svelte/src/app.css
View File

@@ -328,6 +328,9 @@ a:hover {
.palette-dots {
display: flex;
gap: 0.25rem;
overflow: hidden;
max-width: 38px;
transition: max-width 0.2s ease, gap 0.2s ease;
}
.palette-dot {
width: 30px;
@@ -338,13 +341,18 @@ a:hover {
background-size: 160%;
background-position: center;
cursor: pointer;
transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
overflow: hidden;
flex-shrink: 0;
order: 0;
}
.palette-dot:hover {
transform: translateY(-1px);
}
.palette-dot.active {
order: -1;
}
.palette-dot.active,
.palette-dot:focus-visible {
border-color: var(--accent);
@@ -353,6 +361,23 @@ a:hover {
.palette-dot:focus-visible {
outline: none;
}
.floating-palette-controls:not(:hover):not(:focus-within) .palette-dots {
gap: 0;
}
.floating-palette-controls:not(:hover):not(:focus-within) .palette-dot:not(.active) {
opacity: 0;
pointer-events: none;
}
.floating-palette-controls:hover .palette-dots,
.floating-palette-controls:focus-within .palette-dots {
max-width: 360px;
gap: 0.25rem;
}
.floating-palette-controls:hover .palette-dot:not(.active),
.floating-palette-controls:focus-within .palette-dot:not(.active) {
opacity: 1;
pointer-events: auto;
}
@media (max-width: 520px) {
.floating-palette-controls {