mirror of
https://github.com/l0ng-ai/openidea.git
synced 2026-11-06 08:07:49 +00:00
l0ng-ai
482f391fd1
The splash set its wordmark in Inter, a web font with font-display: swap. When the font arrived late (on a cold dev start the dev server took up to seconds to serve it), the splash showed the system font first and switched to Inter just before fading, so the word grew and shifted. It is now an inline SVG of the same text in Inter 500, so it renders identically from the first frame. This replaces the previous attempt, which only moved where the font faces load.
167 lines
3.8 KiB
CSS
167 lines
3.8 KiB
CSS
@import "@fontsource-variable/inter";
|
||
@import "@fontsource-variable/jetbrains-mono";
|
||
@import "./tokens.css";
|
||
|
||
/* Monochrome icons default to the theme icon grey; callers override for selected / disabled. */
|
||
:root {
|
||
--icon-color: var(--fg-icon);
|
||
}
|
||
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html,
|
||
body,
|
||
#root {
|
||
height: 100%;
|
||
margin: 0;
|
||
}
|
||
|
||
body {
|
||
background: var(--bg-frame);
|
||
color: var(--fg);
|
||
font-family: var(--font-ui);
|
||
font-size: var(--fs-ui);
|
||
line-height: 1.4;
|
||
-webkit-font-smoothing: antialiased;
|
||
overflow: hidden;
|
||
-webkit-user-select: none;
|
||
user-select: none;
|
||
cursor: default;
|
||
}
|
||
|
||
input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"]),
|
||
textarea,
|
||
[contenteditable="true"] {
|
||
cursor: text;
|
||
}
|
||
|
||
button {
|
||
font: inherit;
|
||
color: inherit;
|
||
background: none;
|
||
border: 0;
|
||
padding: 0;
|
||
/* Desktop convention: controls keep the arrow; only links get the hand. */
|
||
cursor: default;
|
||
}
|
||
|
||
input,
|
||
textarea,
|
||
select {
|
||
font: inherit;
|
||
color: inherit;
|
||
}
|
||
|
||
/* Radio buttons drawn like the Checkbox primitive (IntelliJ Islands). */
|
||
input[type="radio"] {
|
||
appearance: none;
|
||
flex: none;
|
||
width: 16px;
|
||
height: 16px;
|
||
margin: 0;
|
||
border-radius: 50%;
|
||
background: var(--bg-checkbox, var(--bg-button));
|
||
box-shadow: inset 0 0 0 1px var(--border-checkbox, var(--control-off));
|
||
cursor: default;
|
||
transition:
|
||
background var(--dur-fast) var(--ease),
|
||
box-shadow var(--dur-fast) var(--ease);
|
||
}
|
||
input[type="radio"]:checked {
|
||
background: radial-gradient(circle, var(--fg-button-primary) 0 2.5px, transparent 3px), var(--bg-button-primary);
|
||
box-shadow: none;
|
||
}
|
||
input[type="radio"]:disabled {
|
||
background: transparent;
|
||
box-shadow: inset 0 0 0 1px var(--border);
|
||
}
|
||
input[type="radio"]:disabled:checked {
|
||
background: radial-gradient(circle, var(--fg-faint) 0 2.5px, transparent 3px), var(--border);
|
||
}
|
||
input[type="radio"]:focus-visible {
|
||
outline: 2px solid var(--focus-ring, var(--accent));
|
||
outline-offset: 1px;
|
||
}
|
||
|
||
a {
|
||
color: var(--link);
|
||
}
|
||
a:hover {
|
||
color: var(--link-hover);
|
||
}
|
||
|
||
/* Focus rings mark controls only, as in IDEA: lists, trees, tables, menus, popups and other
|
||
focusable containers show focus through their selected row instead of a frame. Text fields
|
||
aren't listed: their frame shows focus, and an outline here draws a second box inside it. */
|
||
:focus-visible {
|
||
outline: none;
|
||
}
|
||
:is(
|
||
button,
|
||
a[href],
|
||
input:is([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="button"], [type="submit"], [type="reset"]),
|
||
select,
|
||
summary,
|
||
[role="button"],
|
||
[role="link"],
|
||
[role="checkbox"],
|
||
[role="radio"],
|
||
[role="switch"],
|
||
[role="tab"],
|
||
[role="combobox"],
|
||
[role="slider"],
|
||
[role="spinbutton"]
|
||
):focus-visible {
|
||
outline: 2px solid var(--focus-ring);
|
||
outline-offset: -2px;
|
||
}
|
||
|
||
::selection {
|
||
background: var(--bg-editor-selection);
|
||
}
|
||
|
||
.mono {
|
||
font-family: var(--font-mono);
|
||
}
|
||
|
||
/* macOS-style overlay scrollbars (ScrollBar.Mac.thumbColor / hoverThumbColor) */
|
||
::-webkit-scrollbar {
|
||
width: 10px;
|
||
height: 10px;
|
||
background: transparent;
|
||
}
|
||
::-webkit-scrollbar-thumb {
|
||
background-color: var(--scrollbar-thumb);
|
||
border: 2px solid transparent;
|
||
background-clip: content-box;
|
||
border-radius: 6px;
|
||
}
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background-color: var(--scrollbar-thumb-hover);
|
||
}
|
||
::-webkit-scrollbar-track,
|
||
::-webkit-scrollbar-corner {
|
||
background: transparent;
|
||
}
|
||
|
||
/* Settings › Appearance › Antialiasing (IDE / Editor). */
|
||
:root[data-aa-ide="subpixel"] body {
|
||
-webkit-font-smoothing: subpixel-antialiased;
|
||
}
|
||
:root[data-aa-ide="none"] body {
|
||
-webkit-font-smoothing: none;
|
||
}
|
||
:root[data-aa-editor="greyscale"] .cm-editor {
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
:root[data-aa-editor="subpixel"] .cm-editor {
|
||
-webkit-font-smoothing: subpixel-antialiased;
|
||
}
|
||
:root[data-aa-editor="none"] .cm-editor {
|
||
-webkit-font-smoothing: none;
|
||
}
|