дзеркало
https://github.com/l0ng-ai/openidea.git
синхронізовано 2026-11-08 19:02:17 +02:00
l0ng-aiтаbghtyu
b424cb32a8
Add two contribution-only theme plugins, each with a light and a dark theme that sets every UI token plus an editor colour scheme with syntax, editor and terminal ANSI colours: - plugins/theme-solarized: Solarized Light, Solarized Dark - plugins/theme-one: One Light, One Dark (Atom One, original HSL values) They replace the partial theme-solarized-dark sample. Each package ships the MIT notice of its palette in LICENSE, which is now copied on install with the files the manifest references. scripts/theme checks every theme plugin in plugins/ against the token list of tokens.css. Theme handling that any theme benefits from: - Start-up: boot.js restores the selected plugin theme's stylesheet and the last resolved frame, text and accent colours before any CSS loads, so the splash and workbench no longer show the built-in theme until the plugin host answers. The UI keeps the boot theme until the first plugin list, and the list now waits for the initial plugin load. - Native windows: the UI reports the plugin theme's resolved frame colour, which the plugin host persists and new project windows open in. - hsl(), color-mix() and var() tokens are resolved to RGB for Tauri's window background, the native Settings window (hex) and Mermaid diagrams. - Mermaid, the terminal and the editor colour scheme follow switches between plugin themes of the same light / dark base; an explicit editor scheme now replaces a plugin theme's editor colours. Supersedes #85. Co-authored-by: bghtyu <[email protected]> Claude-Session: https://claude.ai/code/session_01VUYsdXA2nkF5v6zsC93dpn
57 рядки
2.8 KiB
CSS
57 рядки
2.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).
|
|
Until tokens load, the colours are the last theme's --bg-frame / --fg-muted / --accent that
|
|
boot.js restored as --boot-*, else these built-in ones. */
|
|
/* 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: 14px;
|
|
padding-bottom: 38px;
|
|
box-sizing: border-box;
|
|
font: 500 15px/1.2 "Inter Variable", Inter, system-ui, -apple-system, sans-serif;
|
|
color: var(--fg-muted, var(--boot-fg, #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: var(--fg-muted, var(--boot-fg, #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: var(--accent, var(--boot-accent, #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; }
|
|
}
|