mirror of
https://github.com/l0ng-ai/openidea.git
synced 2026-11-06 08:07:49 +00:00
95 lines
3.0 KiB
CSS
95 lines
3.0 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).
|
|
Until tokens load, the colours are the last theme's --bg-frame / --fg-muted that boot.js
|
|
restored as --boot-*, else these built-in ones; the bar keeps the last --accent throughout. */
|
|
/* Not on html: the canvas then takes body's (themed) background, which a fast resize shows before relayout. */
|
|
body,
|
|
.splash {
|
|
background: var(--bg-frame, var(--boot-frame, #e9eaee));
|
|
}
|
|
:root[data-theme="dark"] :is(body, .splash) {
|
|
background: var(--bg-frame, var(--boot-frame, #26282c));
|
|
}
|
|
:root:is([data-theme="dark-hc"], [data-theme="dark"][data-contrast="high"]) :is(body, .splash) {
|
|
background: var(--bg-frame, var(--boot-frame, #1a1b1e));
|
|
}
|
|
.splash {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 2147483647;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--splash-gap, 14px);
|
|
padding-bottom: var(--splash-offset, 38px);
|
|
box-sizing: border-box;
|
|
color: var(--fg-muted, var(--boot-fg, #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: var(--fg-muted, var(--boot-fg, #8c8f95));
|
|
}
|
|
.splash-logo {
|
|
width: var(--splash-logo-size, 56px);
|
|
height: var(--splash-logo-size, 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: var(--splash-bar-width, 120px);
|
|
height: var(--splash-bar-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.
|
|
The remembered accent comes first: tokens.css brings the theme's default --accent before
|
|
settings restore a custom one, which would flash the default mid-load. */
|
|
.splash-bar > i {
|
|
display: block;
|
|
height: 100%;
|
|
background: var(--boot-accent, var(--accent, #3871e1));
|
|
transform-origin: left;
|
|
animation: splash-fill var(--splash-progress-duration, 4s)
|
|
var(--splash-progress-easing, 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;
|
|
}
|
|
}
|