gsadmin/KoalaSync
1
0
Fork 0
mirror of https://github.com/Shik3i/KoalaSync.git synced 2026-07-26 12:08:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix Getting Started light theme

Browse Source
This commit is contained in:
KoalaDev
2026-07-12 03:37:07 +02:00
parent c7c124dac7
commit 17c9da292c
2 changed files with 139 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scripts/test-website-theme.mjs
+17
View File
@@ -9,6 +9,7 @@ const template = fs.readFileSync(path.join(repoRoot, 'website', 'template.html')
const app = fs.readFileSync(path.join(repoRoot, 'website', 'app.js'), 'utf8');
const langInit = fs.readFileSync(path.join(repoRoot, 'website', 'lang-init.js'), 'utf8');
const demoCss = fs.readFileSync(path.join(repoRoot, 'website', 'styles', 'demo.css'), 'utf8');
const landingPrimaryCss = fs.readFileSync(path.join(repoRoot, 'website', 'styles', 'landing-primary.css'), 'utf8');
const mockupStart = template.indexOf('<div class="extension-mockup">');
const mockupEnd = template.indexOf('<div class="demo-invite-fly"', mockupStart);
@@ -65,6 +66,22 @@ if (!/\.film-hero-bird-drift\s*\{[^}]*animation:\s*filmBirdGlide/s.test(demoCss)
throw new Error('Foreground film birds must glide and flap without waiting for video playback');
}
const gettingStartedLightSurfaces = [
'step-illustration-1',
'step-illustration-2',
'step-illustration-3',
'illus-popup-card',
'illus-player-card',
'popup-select-mock'
];
for (const className of gettingStartedLightSurfaces) {
const pattern = new RegExp(`html\\.theme-light[^{]*\\.${className}[^}]*\\{`);
if (!pattern.test(landingPrimaryCss)) {
throw new Error(`Getting Started .${className} must define an explicit light-theme surface`);
}
}
console.log('Extension mockup theme-sensitive text uses theme-aware colors');
console.log('Landing CSS is render-blocking, single-request, and cascade-stable');
console.log('Foreground film birds use complete, always-on wing and glide animations');
console.log('All Getting Started mockups define explicit light-theme surfaces');
website/styles/landing-primary.css
+122 -2
View File
@@ -1001,6 +1001,128 @@
100% { box-shadow: 0 0 8px oklch(0.68 0.13 150 / 0.4); }
}
/* Getting Started uses real theme surfaces. Only the video canvases remain
dark in light mode, because they represent video content rather than UI. */
html.theme-light .step-illustration-1,
html.theme-light .step-illustration-2,
html.theme-light .step-illustration-3 {
color: var(--text);
background:
radial-gradient(circle at 15% 10%, oklch(0.995 0.006 100), transparent 52%),
linear-gradient(145deg, oklch(0.965 0.014 105), oklch(0.925 0.025 115));
border-color: oklch(0.28 0.035 140 / 0.13);
box-shadow:
0 18px 38px oklch(0.20 0.025 140 / 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
html.theme-light .step-illustration-1:hover,
html.theme-light .step-illustration-2:hover,
html.theme-light .step-illustration-3:hover {
border-color: oklch(0.56 0.13 150 / 0.28);
box-shadow:
0 22px 44px oklch(0.20 0.025 140 / 0.15),
0 0 22px oklch(0.56 0.13 150 / 0.10),
inset 0 1px 0 #ffffff;
}
html.theme-light .step-illustration-1 .illus-popup-card,
html.theme-light .step-illustration-2 .illus-popup-card,
html.theme-light .step-illustration-3 .illus-player-card {
--bg: oklch(0.965 0.014 105) !important;
--card: #ffffff !important;
--accent: oklch(0.56 0.13 150) !important;
--accent-glow: oklch(0.56 0.13 150 / 0.20) !important;
--text: oklch(0.20 0.025 140) !important;
--text-muted: oklch(0.43 0.03 135) !important;
--success: oklch(0.56 0.13 150) !important;
--glass-border: oklch(0.28 0.035 140 / 0.10) !important;
}
html.theme-light .illus-popup-card,
html.theme-light .illus-player-card {
background: rgba(255, 255, 255, 0.91);
border-color: oklch(0.28 0.035 140 / 0.14);
box-shadow:
0 14px 30px oklch(0.20 0.025 140 / 0.16),
inset 0 1px 0 #ffffff;
}
html.theme-light .illus-popup-header {
border-bottom-color: oklch(0.28 0.035 140 / 0.10);
}
html.theme-light .illus-popup-brand,
html.theme-light .player-user {
color: var(--text);
}
html.theme-light .illus-popup-tabs,
html.theme-light .illus-collapsed-details {
background: oklch(0.92 0.02 112 / 0.72);
border-color: oklch(0.28 0.035 140 / 0.10);
}
html.theme-light .illus-popup-tab.active {
color: oklch(0.36 0.105 150);
background: #ffffff;
border: 1px solid oklch(0.56 0.13 150 / 0.18);
box-shadow: 0 2px 7px oklch(0.20 0.025 140 / 0.10);
}
html.theme-light .popup-form-label,
html.theme-light .illus-popup-version,
html.theme-light .illus-popup-tab,
html.theme-light .illus-collapsed-details,
html.theme-light .details-arrow,
html.theme-light .control-time {
color: var(--text-muted);
}
html.theme-light .popup-select-mock {
color: var(--text);
background: #ffffff;
border-color: oklch(0.28 0.035 140 / 0.16);
box-shadow: inset 0 1px 2px oklch(0.20 0.025 140 / 0.06);
}
html.theme-light .illus-floating-success {
color: var(--text);
background: rgba(255, 255, 255, 0.96);
border-color: oklch(0.56 0.13 150 / 0.30);
box-shadow:
0 7px 16px oklch(0.20 0.025 140 / 0.14),
0 0 12px oklch(0.56 0.13 150 / 0.10);
}
html.theme-light .player-header,
html.theme-light .player-controls {
color: var(--text);
}
html.theme-light .player-video-canvas {
border-color: oklch(0.28 0.035 140 / 0.18);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
html.theme-light .player-timeline,
html.theme-light .illus-sync-bridge .sync-line {
background: oklch(0.28 0.035 140 / 0.14);
}
html.theme-light .timeline-knob {
background: #ffffff;
border: 1px solid oklch(0.56 0.13 150 / 0.45);
box-shadow: 0 1px 4px oklch(0.20 0.025 140 / 0.22);
}
html.theme-light .sync-status-badge,
html.theme-light .player-badge.active {
color: oklch(0.36 0.105 150);
background: oklch(0.60 0.12 150 / 0.12);
border-color: oklch(0.56 0.13 150 / 0.26);
}
/* --- Self Hosters Terminal --- */
.terminal-container {
max-width: 850px;
@@ -1211,5 +1333,3 @@ section:target[data-reveal] {
opacity: 1;
transform: translateY(0);
}