diff --git a/src/style/_app-shell.scss b/src/style/_app-shell.scss index 1a6fa85..fc816f2 100644 --- a/src/style/_app-shell.scss +++ b/src/style/_app-shell.scss @@ -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 { } } } -} \ No newline at end of file +} diff --git a/src/style/_config-pane.scss b/src/style/_config-pane.scss index 6fafa4b..cdd9781 100644 --- a/src/style/_config-pane.scss +++ b/src/style/_config-pane.scss @@ -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; diff --git a/src/style/_garden-prompt.scss b/src/style/_garden-prompt.scss index 1ba7945..b7cb7d2 100644 --- a/src/style/_garden-prompt.scss +++ b/src/style/_garden-prompt.scss @@ -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); diff --git a/src/style/_motion.scss b/src/style/_motion.scss index b12cc37..3211dd0 100644 --- a/src/style/_motion.scss +++ b/src/style/_motion.scss @@ -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; diff --git a/src/style/_toolbar.scss b/src/style/_toolbar.scss index 1d4f7b8..2c0a8be 100644 --- a/src/style/_toolbar.scss +++ b/src/style/_toolbar.scss @@ -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; } diff --git a/src/style/common.scss b/src/style/common.scss index f048023..6275681 100644 --- a/src/style/common.scss +++ b/src/style/common.scss @@ -14,14 +14,8 @@ } } -h1, -h2, -h3, -h4, -h5, -h6 { +h1 { font-family: 'Open Sans', sans-serif; - margin-bottom: var(--small-margin); } p {