gsadmin/KoalaSync
1
0
Fork 0
mirror of https://github.com/Shik3i/KoalaSync.git synced 2026-08-23 01:16:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove film birds; fix language pill highlight

Browse Source 
Strip every bird from the demo mockups: both hero video tabs and both
step-3 player scenes lose the background flock (.film-birds) and the
foreground flapping bird (.film-hero-bird), plus all related CSS in
styles/demo.css and the dead style.legacy.css.

Language selector: the <select> was 30px narrower than its pill, so in
appearance:base-select the click/focus highlight covered only the inner
~110px ("half the box"). Move the padding from the container onto the
control so it fills the pill edge-to-edge; mirror the fix in the mobile
legal.css override.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
KoalaDev
2026-07-12 03:57:18 +02:00
parent 17c9da292c
commit 16cb138eeb
5 changed files with 14 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/style.legacy.css
+1 -40
View File
@@ -5623,10 +5623,6 @@ html.theme-light .hero-demo-scene .demo-video::after {
.hero-demo-scene .film-mid-scroll > * { fill: var(--demo-midground) !important; }
.hero-demo-scene .film-fore-scroll > * { fill: var(--demo-foreground) !important; }
/* By day the birds read as silhouettes, not chalk marks */
html.theme-light .hero-demo-scene .film-birds { stroke: oklch(0.32 0.06 145 / 0.65); }
html.theme-light :is(.hero-demo-scene, .step-illustration-3) .film-hero-bird { stroke: oklch(0.32 0.06 145 / 0.75); }
/* Stars: staggered twinkle so the sky feels alive */
.film-star {
transform-box: fill-box;
@@ -5690,24 +5686,6 @@ html.theme-light :is(.hero-demo-scene, .step-illustration-3) .film-hero-bird { s
.film-fore-scroll {
transform: translateX(var(--scroll-fore, 0px));
}
/* A single gliding bird carries the scene: the outer group rides the
JS-driven drift vars, the inner group flaps its wings via scaleY. */
.film-hero-bird-drift {
transform: translate(var(--lantern-x, 0px), var(--bounce-y, 0px));
}
.film-hero-bird {
transform-box: fill-box;
transform-origin: center;
animation: filmWingFlap 0.85s ease-in-out infinite alternate;
animation-play-state: paused;
}
@keyframes filmWingFlap {
from { transform: scaleY(1); }
to { transform: scaleY(0.5); }
}
/* Twinkle & Glow play state bindings */
.film-star {
transform-box: fill-box;
@@ -5715,7 +5693,7 @@ html.theme-light :is(.hero-demo-scene, .step-illustration-3) .film-hero-bird { s
animation: filmTwinkle 2.8s ease-in-out infinite;
animation-play-state: paused;
}
.demo-tab-card.playing :is(.film-star, .film-moon, .film-moon-g, .film-cloud, .film-shooting-star, .film-birds, .film-hero-bird) {
.demo-tab-card.playing :is(.film-star, .film-moon, .film-moon-g, .film-cloud, .film-shooting-star) {
animation-play-state: running;
}
@@ -5749,19 +5727,6 @@ html.theme-light :is(.hero-demo-scene, .step-illustration-3) .film-hero-bird { s
95%, 100% { opacity: 0; transform: translate(-46px, 20px); }
}
/* A distant flock crosses the valley, fading out mid-flight */
.film-birds {
animation: filmBirds 16s linear infinite;
animation-play-state: paused;
}
@keyframes filmBirds {
0% { transform: translate(0, 0); opacity: 0; }
4% { opacity: 0.75; }
42% { opacity: 0.75; }
48%, 100% { transform: translate(185px, -12px); opacity: 0; }
}
/* Valley mist rides the slow background parallax between tree layers */
.film-mist-scroll {
transform: translateX(var(--scroll-back, 0px));
@@ -6119,10 +6084,6 @@ html.theme-light :is(.hero-demo-scene, .step-illustration-3) .film-hero-bird { s
.step-illustration-3 .film-fore-scroll {
animation: scrollFore 3s linear infinite !important;
}
.step-illustration-3 .film-hero-bird {
animation: filmWingFlap 0.85s ease-in-out infinite !important;
animation-direction: alternate !important;
}
@keyframes scrollBack {
0% { transform: translateX(0); }