gsadmin/KoalaSync
1
0
Fork 0
mirror of https://github.com/Shik3i/KoalaSync.git synced 2026-08-10 11:38:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(website): apply day/night sky palette variables to sync theater illustration and video canvas

Browse Source
This commit is contained in:
KoalaDev
2026-07-12 05:48:27 +02:00
parent af4ac943a9
commit e27319908d
3 changed files with 22 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/styles/demo.css
+10 -5
View File
@@ -687,17 +687,22 @@ html.theme-light .hero-demo-scene .demo-video::after {
height: 100%;
}
.hero-demo-scene .film-stars { fill: var(--demo-stars) !important; }
.hero-demo-scene .film-stars,
.illus-sync-theater .film-stars { fill: var(--demo-stars) !important; }
.hero-demo-scene .film-clouds { fill: var(--demo-stars) !important; }
.hero-demo-scene .film-mist-scroll { fill: var(--demo-stars) !important; }
.hero-demo-scene .film-shooting-star { stroke: var(--demo-stars) !important; }
.hero-demo-scene .film-moon {
.hero-demo-scene .film-moon,
.illus-sync-theater .film-moon {
fill: var(--demo-moon) !important;
filter: drop-shadow(0 0 6px var(--demo-moon));
}
.hero-demo-scene .film-mtn-scroll { fill: var(--demo-mountain) !important; }
.hero-demo-scene .film-mid-scroll > * { fill: var(--demo-midground) !important; }
.hero-demo-scene .film-fore-scroll > * { fill: var(--demo-foreground) !important; }
.hero-demo-scene .film-mtn-scroll,
.illus-sync-theater .film-mtn-scroll { fill: var(--demo-mountain) !important; }
.hero-demo-scene .film-mid-scroll > *,
.illus-sync-theater .film-mid-scroll > * { fill: var(--demo-midground) !important; }
.hero-demo-scene .film-fore-scroll > *,
.illus-sync-theater .film-fore-scroll > * { fill: var(--demo-foreground) !important; }
/* Stars: staggered twinkle so the sky feels alive */
.film-star {
website/styles/hero.css
+9
View File
@@ -712,6 +712,12 @@ html.theme-light .koala-speech-bubble::after {
put white text on a colour get a darker shade (these beat inline styles). */
.hero-demo-scene {
--accent: oklch(0.80 0.10 150);
}
/* The step-3 sync theater reuses the film SVG and must follow the same
day/night palette; --accent stays hero-only (its cards sit on the page
surface, not on the demo sky). */
.hero-demo-scene,
.illus-sync-theater {
--demo-sky-top: oklch(0.22 0.055 152);
--demo-sky-mid: oklch(0.145 0.035 150);
--demo-sky-bottom: oklch(0.075 0.018 145);
@@ -746,6 +752,9 @@ html.theme-light .koala-speech-bubble::after {
html.theme-light .hero-demo-scene {
--accent: oklch(0.60 0.12 150);
}
html.theme-light .hero-demo-scene,
html.theme-light .illus-sync-theater {
--demo-sky-top: oklch(0.86 0.085 78);
--demo-sky-mid: oklch(0.76 0.095 112);
--demo-sky-bottom: oklch(0.54 0.10 150);
website/styles/landing-primary.css
+3 -1
View File
@@ -847,7 +847,9 @@
.player-video-canvas {
height: 70px;
border-radius: 8px;
background: linear-gradient(135deg, oklch(0.20 0.04 145), oklch(0.22 0.05 45));
/* Sky behind the film SVG — --demo-* flips day/night with the theme
(defined on .illus-sync-theater in hero.css) */
background: linear-gradient(160deg, var(--demo-sky-top) 0%, var(--demo-sky-mid) 52%, var(--demo-sky-bottom) 100%);
position: relative;
overflow: hidden;
display: flex;