mirror of
https://github.com/l0ng-ai/openidea.git
synced 2026-11-06 16:08:05 +00:00
l0ng-ai
29e89f2525
The Settings window loads the same page as project windows, so it showed the launch splash with the logo. It now shows only the bar, after 400 ms. The bar's sliding animation was switched off under reduced motion, leaving a static 40% fill. It is now a fake progress that eases towards ~90% and fills to 100% before the splash fades out. Claude-Session: https://claude.ai/code/session_01B65qLEKnkeYTGdbwhLpjCu
49 lines
2.2 KiB
CSS
49 lines
2.2 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;
|
|
-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 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; }
|
|
}
|