andras/fleeting-garden
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WIP

Browse source
This commit is contained in:
Andras Schmelczer 2026-05-13 21:07:10 +01:00
parent 34ac200437
commit 39b0160064
136 changed files with 7144 additions and 1965 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/style/_control-dock.scss
View file

@ -1,7 +1,7 @@
html > body > aside.control-dock {
position: absolute;
left: 50%;
bottom: calc(0.75rem + env(safe-area-inset-bottom));
bottom: env(safe-area-inset-bottom);
z-index: 4;
width: min(calc(100vw - 1rem), 980px);
transform: translateX(-50%);

113
src/style/_toolbar.scss
View file

@ -45,13 +45,11 @@ html > body > aside.control-dock > .toolbar-row {
min-width: 0;
min-height: 86px;
padding: 8px 9px;
border: 1px solid rgb(255 255 255 / 10%);
border: 1px solid transparent;
border-radius: 10px;
background: rgb(12 14 16 / 74%);
backdrop-filter: blur(16px);
box-shadow:
0 10px 30px rgb(0 0 0 / 22%),
0 1px 3px rgb(0 0 0 / 18%);
background: transparent;
backdrop-filter: none;
box-shadow: none;
}
> .vibe-button {
@ -582,18 +580,19 @@ html > body > aside.control-dock > .toolbar-row {
flex: 1 1 auto;
min-width: 0;
gap: 8px;
padding: 8px;
padding: 4px 8px;
> nav.buttons {
grid-area: nav;
justify-content: center;
gap: 2px;
padding-top: 7px;
padding-top: 3px;
border-top: 1px solid rgb(255 255 255 / 12%);
> button {
width: 44px;
height: 44px;
height: 38px;
min-height: 38px;
&::after {
width: 17px;
@ -616,34 +615,102 @@ html > body > aside.control-dock > .toolbar-row {
padding: 2px 4px;
> .swatches {
flex-wrap: wrap;
justify-content: center;
gap: 9px;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
flex: 1 1 100%;
align-items: center;
justify-items: center;
justify-content: stretch;
column-gap: 7px;
row-gap: 8px;
width: 100%;
min-width: 0;
min-height: 54px;
padding: 7px 8px;
padding: 4px 6px;
> .color-swatch {
grid-column: span 2;
width: 44px;
height: 44px;
}
> .eraser-size-control {
width: clamp(104px, 31vw, 138px);
height: 44px;
flex-basis: clamp(104px, 31vw, 138px);
padding: 0 9px;
grid-column: 1 / span 3;
justify-self: stretch;
width: 100%;
min-width: 0;
height: 42px;
flex-basis: auto;
padding: 0 8px;
&::before {
right: 8px;
left: 8px;
}
}
> .mirror-segment-control {
width: clamp(104px, 31vw, 138px);
height: 44px;
flex-basis: clamp(104px, 31vw, 138px);
padding: 0 9px;
grid-column: 4 / span 3;
justify-self: stretch;
width: 100%;
min-width: 0;
height: 42px;
flex-basis: auto;
padding: 0 8px;
&::before {
right: 9px;
left: 9px;
right: 8px;
left: 8px;
}
input[type='range'] {
&::-webkit-slider-thumb {
@include range-thumb-base(
38px,
38px,
2px solid rgb(240 255 251 / 94%),
50%
);
margin-top: -15.5px;
background:
radial-gradient(circle, white 0 2.5px, rgb(9 20 18 / 78%) 3px 7px),
repeating-conic-gradient(
from -90deg,
rgb(218 255 241) 0 8deg,
rgb(8 22 19 / 94%) 8deg var(--mirror-angle)
);
box-shadow:
inset 0 0 0 6px rgb(0 0 0 / 18%),
0 0 0 3px rgb(92 206 177 / 16%),
0 4px 10px rgb(0 0 0 / 28%);
}
&::-webkit-slider-thumb:hover {
box-shadow:
inset 0 0 0 6px rgb(0 0 0 / 18%),
0 0 0 4px rgb(92 206 177 / 24%),
0 5px 12px rgb(0 0 0 / 32%);
}
&::-moz-range-thumb {
@include range-thumb-base(
38px,
38px,
2px solid rgb(240 255 251 / 94%),
50%
);
background:
radial-gradient(circle, white 0 2.5px, rgb(9 20 18 / 78%) 3px 7px),
repeating-conic-gradient(
from -90deg,
rgb(218 255 241) 0 8deg,
rgb(8 22 19 / 94%) 8deg var(--mirror-angle)
);
box-shadow:
inset 0 0 0 6px rgb(0 0 0 / 18%),
0 0 0 3px rgb(92 206 177 / 16%),
0 4px 10px rgb(0 0 0 / 28%);
}
}
}
}