Blomios
48b8853214
Lots 1 et 2 du ticket #69 : rendre le client web (#13) utilisable sur un téléphone. Le client web n'a jamais eu de docks ni de fenêtres flottantes — il est déjà une colonne verticale unique — donc le lot 2 se réduit aux rangées qui débordaient réellement à 360px. - `100dvh` sur html/body/#root : `height: 100%` se résout sur le *large* viewport, donc la barre d'URL rétractable d'un navigateur mobile masquait le bas de l'app. Desktop inchangé (dynamic == large viewport). - `viewport-fit=cover` + padding `env(safe-area-inset-*)` sur le header et le workspace : l'app peut peindre sous une encoche sans perdre ses contrôles. Le zoom reste libre (accessibilité). - Padding responsive (`p-4 sm:p-6`) : 48px de gouttière sur 360px, c'était 13% de la largeur. - `AgentLiveRow` et la rangée de tâche de fond empilent leurs contrôles sur téléphone (nom / badges / actions) et retrouvent leur ligne unique dès `sm` — à 360px les boutons Cancel+Retry ne tenaient pas. - Code d'appairage : `inputMode="numeric"`, pas d'autocapitalisation. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
104 lines
3.1 KiB
CSS
104 lines
3.1 KiB
CSS
/*
|
|
* IdeA design system — global theme (LD).
|
|
*
|
|
* Tailwind v4, CSS-first: semantic tokens declared under `@theme` become
|
|
* utilities (e.g. `--color-surface` → `bg-surface text-surface border-surface`).
|
|
* The palette is a **dark IDE** theme by default — IdeA is an IDE, not a website.
|
|
* Features should consume these tokens + the `shared/ui` components rather than
|
|
* hard-coding colours.
|
|
*/
|
|
|
|
@import "tailwindcss";
|
|
|
|
@theme {
|
|
/* Surfaces (back-to-front) */
|
|
--color-canvas: #0e1116; /* app background */
|
|
--color-surface: #161b22; /* panels, cards */
|
|
--color-raised: #1c2430; /* inputs, hovered rows */
|
|
--color-overlay: #222c3a; /* popovers, menus */
|
|
|
|
/* Lines & text */
|
|
--color-border: #2b3440;
|
|
--color-border-strong: #3b4757;
|
|
--color-content: #e6edf3; /* primary text */
|
|
--color-muted: #9aa7b4; /* secondary text */
|
|
--color-faint: #6b7785; /* disabled / placeholder */
|
|
|
|
/* Accent & status */
|
|
--color-primary: #4c8dff;
|
|
--color-primary-hover: #3b7bf0;
|
|
--color-on-primary: #ffffff;
|
|
--color-danger: #f85149;
|
|
--color-success: #3fb950;
|
|
--color-warning: #d29922;
|
|
|
|
/* Typography */
|
|
--font-sans:
|
|
ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
|
|
Arial, sans-serif;
|
|
--font-mono:
|
|
"JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo,
|
|
Consolas, monospace;
|
|
|
|
/* Radii */
|
|
--radius-md: 0.375rem;
|
|
--radius-lg: 0.5rem;
|
|
}
|
|
|
|
@layer base {
|
|
/* Tell the engine (incl. the Tauri WebKitGTK webview) to render native form
|
|
controls — <select> popups, <option>, checkboxes, scrollbars — in dark mode.
|
|
Without this, WebKitGTK paints them with the light system GTK theme, which is
|
|
why dropdowns looked white in the packaged app but not in a dark browser. */
|
|
:root {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#root {
|
|
height: 100%;
|
|
}
|
|
|
|
/* #69 — phone viewports. `height: 100%` resolves against the *large* viewport,
|
|
so a mobile browser's collapsing URL bar leaves the last ~60px of the app
|
|
under the toolbar and makes xterm's fit() overshoot. `100dvh` tracks the
|
|
*dynamic* viewport instead. Desktop is unaffected: there the dynamic and
|
|
large viewports are identical, so this resolves to the same height. */
|
|
@supports (height: 100dvh) {
|
|
html,
|
|
body,
|
|
#root {
|
|
height: 100dvh;
|
|
}
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background-color: var(--color-canvas);
|
|
color: var(--color-content);
|
|
font-family: var(--font-sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
/* Phones: never rubber-band the whole document — the app owns its own
|
|
scroll containers, and an overscrolling body detaches the fixed shell. */
|
|
overscroll-behavior-y: none;
|
|
}
|
|
|
|
/* A consistent focus ring across the kit (keyboard accessibility). */
|
|
:focus-visible {
|
|
outline: 2px solid var(--color-primary);
|
|
outline-offset: 1px;
|
|
}
|
|
}
|
|
|
|
/* Indeterminate progress sliver (ticket #54 F2): a model download whose total
|
|
size is unknown slides a sliver back and forth instead of showing a fake %. */
|
|
@keyframes model-server-indeterminate {
|
|
0% {
|
|
left: -40%;
|
|
}
|
|
100% {
|
|
left: 100%;
|
|
}
|
|
}
|