дзеркало
https://github.com/l0ng-ai/openidea.git
синхронізовано 2026-11-09 03:05:40 +02:00
l0ng-ai
2c576418cb
The splash named Inter, but the font faces and antialiasing came with the app CSS, which the dev server injects only once the bundle runs: the wordmark switched from the system font to Inter, moving up and changing weight, just before the fade. The font faces are now linked from index.html and the splash sets its own smoothing. The splash also stays on one compositing layer, so the fade-out doesn't re-snap the centred text.
54 рядки
2.6 KiB
CSS
54 рядки
2.6 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;
|
|
font: 500 15px/1.2 "Inter Variable", Inter, system-ui, -apple-system, sans-serif;
|
|
color: #6c707e;
|
|
/* As on body: picking it up when the app CSS arrives would change the wordmark's weight. */
|
|
-webkit-font-smoothing: antialiased;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
cursor: default;
|
|
animation: splash-in 240ms ease-out 120ms both;
|
|
transition: opacity 160ms ease-out;
|
|
/* One compositing layer for its whole life: WebKit layers it only while the opacity animates,
|
|
and the fade-out's fresh layer re-snaps the centred text, which then jumps up half a pixel. */
|
|
will-change: opacity;
|
|
}
|
|
.splash.splash-out { opacity: 0; pointer-events: none; }
|
|
:root[data-theme^="dark"] .splash { color: #8c8f95; }
|
|
.splash svg { width: 56px; height: 56px; }
|
|
.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; }
|
|
}
|