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

More css clean up

Browse source
This commit is contained in:
Andras Schmelczer 2026-05-16 15:41:36 +01:00
parent 1fe5015056
commit ce383ce34c
6 changed files with 13 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/style/_app-shell.scss
View file

@ -1,7 +1,5 @@
html>body {
html > body {
width: 100%;
min-height: 100vh;
min-height: 100dvh;
height: 100vh;
height: 100dvh;
overflow: hidden;
@ -9,22 +7,20 @@ html>body {
position: relative;
background: var(--garden-background, #10151f);
>.canvas-container {
min-height: 100vh;
min-height: 100dvh;
> .canvas-container {
height: 100%;
width: 100%;
display: flex;
position: relative;
overflow: hidden;
>canvas {
> canvas {
height: 100%;
width: 100%;
touch-action: none;
}
>.eraser-preview {
> .eraser-preview {
position: absolute;
top: 0;
left: 0;
@ -51,7 +47,7 @@ html>body {
}
}
>.dev-stats-overlay {
> .dev-stats-overlay {
position: absolute;
top: max(10px, env(safe-area-inset-top, 0px));
left: max(10px, env(safe-area-inset-left, 0px));
@ -70,13 +66,9 @@ html>body {
pointer-events: none;
user-select: none;
white-space: pre;
&[hidden] {
display: none;
}
}
>.errors-container {
> .errors-container {
position: absolute;
top: 0;
left: 0;
@ -89,4 +81,4 @@ html>body {
}
}
}
}
}

7
src/style/_config-pane.scss
View file

@ -18,12 +18,15 @@
min-height: 28px;
align-items: center;
justify-content: center;
gap: 5px;
color: rgb(255 255 255 / 76%);
font-size: 11px;
line-height: 1;
}
.color-reaction-matrix__header {
gap: 5px;
}
.color-reaction-matrix__corner {
justify-content: flex-start;
padding-left: 2px;
@ -40,7 +43,6 @@
}
.color-reaction-matrix__cell {
display: block;
min-width: 0;
}
@ -51,7 +53,6 @@
border: 1px solid rgb(255 255 255 / 16%);
border-radius: 4px;
padding: 0 4px;
appearance: auto;
background: rgb(255 255 255 / 8%);
color: white;
font: inherit;

11
src/style/_garden-prompt.scss
View file

@ -3,14 +3,8 @@
html > body > .canvas-container > .garden-prompt {
position: absolute;
left: 50%;
bottom: calc(7.25rem + env(safe-area-inset-bottom));
transform: translateX(-50%);
max-width: min(92vw, 780px);
color: white;
text-align: center;
font-size: 46px;
line-height: 1.15;
text-shadow: 0 2px 18px rgb(0 0 0 / 60%);
pointer-events: none;
z-index: 2;
@ -22,7 +16,6 @@ html > body > .canvas-container > .garden-prompt {
display: flex;
align-items: center;
top: calc(1.25rem + env(safe-area-inset-top));
bottom: auto;
gap: 16px;
width: max-content;
min-height: 78px;
@ -84,12 +77,8 @@ html > body > .canvas-container > .garden-prompt {
}
@include on-small-screen {
bottom: calc(10rem + env(safe-area-inset-bottom));
font-size: 24px;
&.draw-hint {
top: calc(0.75rem + env(safe-area-inset-top));
bottom: auto;
gap: 10px;
min-height: 58px;
max-width: min(92vw, 340px);

15
src/style/_motion.scss
View file

@ -1,22 +1,7 @@
@media (prefers-reduced-motion: reduce) {
html > body {
> .canvas-container > .garden-prompt {
.draw-hint-stroke {
stroke-dashoffset: 0;
}
.draw-hint-end {
opacity: 1;
transform: none;
}
}
> aside.control-dock {
transform: translateY(0);
> .toolbar-row {
button:hover,
button:active,
> .toolbar-shell > .garden-controls > .swatches > .eraser-size-control:hover,
> .toolbar-shell > .garden-controls > .swatches > .mirror-segment-control:hover {
transform: none;

21
src/style/_toolbar.scss
View file

@ -127,13 +127,7 @@ html > body > aside.control-dock > .toolbar-row {
}
&:hover {
background: transparent;
color: color-mix(in srgb, var(--accent-color) 70%, white);
box-shadow: none;
}
&:active {
transform: translateX(0);
}
&.previous-vibe:hover {
@ -190,8 +184,7 @@ html > body > aside.control-dock > .toolbar-row {
transform var(--transition-time);
}
&:hover,
&.active {
&:hover {
border-color: rgb(255 255 255 / 10%);
background: rgb(255 255 255 / 9%);
}
@ -257,7 +250,6 @@ html > body > aside.control-dock > .toolbar-row {
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px;
min-width: 0;
padding: 0 4px;
@ -295,14 +287,9 @@ html > body > aside.control-dock > .toolbar-row {
> .eraser-size-control,
> .mirror-segment-control {
--control-progress: 0%;
--control-rgb: 255 255 255;
--thumb-background: rgb(var(--control-rgb));
--thumb-height: 28px;
--thumb-hover-transform: scale(1.03);
--thumb-radius: 50%;
--thumb-transform: none;
--thumb-width: 28px;
position: relative;
display: grid;
@ -445,9 +432,7 @@ html > body > aside.control-dock > .toolbar-row {
}
> .toolbar-shell {
min-width: 0;
flex: 1 1 auto;
gap: 8px;
padding: 4px 8px;
> nav.buttons {
@ -455,7 +440,6 @@ html > body > aside.control-dock > .toolbar-row {
padding-top: 3px;
> button {
width: 44px;
height: 38px;
min-height: 38px;
@ -473,13 +457,11 @@ html > body > aside.control-dock > .toolbar-row {
}
> .garden-controls {
gap: 8px;
padding: 2px 4px;
> .swatches {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
align-items: center;
justify-items: center;
justify-content: stretch;
width: 100%;
@ -500,7 +482,6 @@ html > body > aside.control-dock > .toolbar-row {
width: 100%;
min-width: 0;
height: 42px;
flex-basis: auto;
padding: 0 8px;
}

8
src/style/common.scss
View file

@ -14,14 +14,8 @@
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
h1 {
font-family: 'Open Sans', sans-serif;
margin-bottom: var(--small-margin);
}
p {