mirror of
https://github.com/l0ng-ai/openidea.git
synced 2026-11-06 08:07:49 +00:00
l0ng-ai
482f391fd1
The splash set its wordmark in Inter, a web font with font-display: swap. When the font arrived late (on a cold dev start the dev server took up to seconds to serve it), the splash showed the system font first and switched to Inter just before fading, so the word grew and shifted. It is now an inline SVG of the same text in Inter 500, so it renders identically from the first frame. This replaces the previous attempt, which only moved where the font faces load.
50 lines
2.3 KiB
CSS
50 lines
2.3 KiB
CSS
/* Linked, not inlined in index.html: release builds hash inline <style> blocks into the CSP,
|
|
which voids style-src 'unsafe-inline' and blocks the editor's runtime-injected styles. */
|
|
/* Start-up splash over the page until the window's launch project is open (platform/splash.ts).
|
|
Tokens aren't loaded yet, so the colours mirror --bg-frame / --fg-muted / --accent. */
|
|
/* Not on html: the canvas then takes body's (themed) background, which a fast resize shows before relayout. */
|
|
body, .splash { background: #e9eaee; }
|
|
:root[data-theme="dark"] :is(body, .splash) { background: #26282c; }
|
|
:root:is([data-theme="dark-hc"], [data-theme="dark"][data-contrast="high"]) :is(body, .splash) { background: #1a1b1e; }
|
|
.splash {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 2147483647;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 14px;
|
|
padding-bottom: 38px;
|
|
box-sizing: border-box;
|
|
color: #6c707e;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
cursor: default;
|
|
animation: splash-in 240ms ease-out 120ms both;
|
|
transition: opacity 160ms ease-out;
|
|
}
|
|
.splash.splash-out { opacity: 0; pointer-events: none; }
|
|
:root[data-theme^="dark"] .splash { color: #8c8f95; }
|
|
.splash-logo { width: 56px; height: 56px; }
|
|
/* 15px Inter: 2048 units per em, the line box from ascender to descender. */
|
|
.splash-wordmark { width: 73.2px; height: 18.15px; }
|
|
.splash-bar { width: 120px; height: 2px; border-radius: 1px; overflow: hidden; background: rgb(127 127 127 / 0.18); }
|
|
/* Fake progress: eases towards ~90% over the 4 s cap; hideSplash() fills it before fading out. */
|
|
.splash-bar > i {
|
|
display: block;
|
|
height: 100%;
|
|
background: #3871e1;
|
|
transform-origin: left;
|
|
animation: splash-fill 4s cubic-bezier(0.1, 0.7, 0.3, 1) both;
|
|
}
|
|
/* Settings window: a dialog, not a launch. Only the bar, and only if loading takes a while. */
|
|
:root[data-window="settings"] .splash { animation-delay: 400ms; }
|
|
:root[data-window="settings"] .splash > :not(.splash-bar) { display: none; }
|
|
@keyframes splash-in { from { opacity: 0; } }
|
|
@keyframes splash-fill { from { transform: scaleX(0.04); } to { transform: scaleX(0.92); } }
|
|
/* The fill stays: it grows in place, which reduced motion allows. */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.splash { animation: none; }
|
|
}
|