дзеркало
https://github.com/l0ng-ai/openidea.git
синхронізовано 2026-11-09 11:15:40 +02:00
l0ng-ai
b1bb4a69cd
splash.css painted html light and only switched body to dark, so the page canvas showed the light colour wherever a live resize outran relayout. Leave html unpainted so the canvas takes body's themed background. Also set the webview's background (not just the native window's) on a theme change; it otherwise kept the colour the window was created with.
45 рядки
1.8 KiB
CSS
45 рядки
1.8 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); }
|
|
.splash-bar::after {
|
|
content: "";
|
|
display: block;
|
|
width: 40%;
|
|
height: 100%;
|
|
background: #3871e1;
|
|
animation: splash-bar 1.1s ease-in-out infinite;
|
|
}
|
|
@keyframes splash-in { from { opacity: 0; } }
|
|
@keyframes splash-bar { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.splash, .splash-bar::after { animation: none; }
|
|
}
|