8534929a4c
The stamp's border was a plain double-stroked circle; per feedback it's now the word COMPLETED repeated around a full loop and slowly spinning, so the border IS the label rather than a decoration next to it. The spin uses a plain CSS @keyframes (frontend/src/index.css) instead of SVG's animateTransform: SMIL animation on the ring silently went invisible once mounted in a list that re-renders on live SSE cost updates — a plain CSS animation on the <g> sidesteps whatever that interaction was. Both card components (the home rail/drawer's ConversationListElement and the browsable Conversations.tsx list) had the stamp anchored outside the card via negative insets (-top-3 -right-3), which got clipped by ancestor scroll containers. It now sits inside the card at bottom-2 right-2. ConversationListElement's cost/time column was vertically centered in the title row (reads as 'right middle'); given self-start it now pins to the row's top instead, freeing the bottom-right corner for the stamp.
115 lines
2.7 KiB
CSS
115 lines
2.7 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
--background: 0 0% 100%;
|
|
--foreground: 0 0% 9%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 0 0% 9%;
|
|
--primary: 24 95% 53%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 0 0% 96%;
|
|
--secondary-foreground: 0 0% 9%;
|
|
--muted: 0 0% 96%;
|
|
--muted-foreground: 0 0% 45%;
|
|
--accent: 0 0% 94%;
|
|
--accent-foreground: 0 0% 9%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 0 0% 9%;
|
|
--destructive: 0 84% 60%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 0 0% 89%;
|
|
--input: 0 0% 89%;
|
|
--ring: 24 95% 53%;
|
|
--radius: 0.65rem;
|
|
|
|
/* syntax tokens for @gabvdl/ui FileEditor/CodeArea (raw colors, not HSL triplets) */
|
|
--code-foreground: #171717;
|
|
--code-comment: #737373;
|
|
--code-keyword: #7c3aed;
|
|
--code-string: #15803d;
|
|
--code-number: #b45309;
|
|
--code-function: #1d4ed8;
|
|
--code-tag: #be185d;
|
|
--code-variable: #0e7490;
|
|
--code-punctuation: #737373;
|
|
--code-regex: #b45309;
|
|
--code-gutter: #a3a3a3;
|
|
--code-caret: #f97316;
|
|
--code-selection: rgba(249, 115, 22, 0.25);
|
|
}
|
|
|
|
.dark {
|
|
--background: 0 0% 4%;
|
|
--foreground: 0 0% 95%;
|
|
--card: 0 0% 7%;
|
|
--card-foreground: 0 0% 95%;
|
|
--primary: 24 95% 55%;
|
|
--primary-foreground: 0 0% 4%;
|
|
--secondary: 0 0% 13%;
|
|
--secondary-foreground: 0 0% 95%;
|
|
--muted: 0 0% 13%;
|
|
--muted-foreground: 0 0% 60%;
|
|
--accent: 0 0% 16%;
|
|
--accent-foreground: 0 0% 95%;
|
|
--popover: 0 0% 9%;
|
|
--popover-foreground: 0 0% 95%;
|
|
--destructive: 0 72% 51%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 0 0% 18%;
|
|
--input: 0 0% 18%;
|
|
--ring: 24 95% 55%;
|
|
|
|
--code-foreground: #f2f2f2;
|
|
--code-comment: #999999;
|
|
--code-keyword: #c4b5fd;
|
|
--code-string: #86efac;
|
|
--code-number: #fcd34d;
|
|
--code-function: #93c5fd;
|
|
--code-tag: #f9a8d4;
|
|
--code-variable: #67e8f9;
|
|
--code-punctuation: #999999;
|
|
--code-regex: #fcd34d;
|
|
--code-gutter: #525252;
|
|
--code-caret: #fb923c;
|
|
--code-selection: rgba(251, 146, 60, 0.3);
|
|
}
|
|
|
|
* {
|
|
border-color: hsl(var(--border));
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#root {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: hsl(var(--background));
|
|
color: hsl(var(--foreground));
|
|
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
textarea {
|
|
font-family: theme("fontFamily.mono");
|
|
}
|
|
|
|
/* CompletionStamp's rotating text ring. Plain CSS, not SVG SMIL
|
|
(animateTransform): SMIL animations go silently invisible on this
|
|
component when it sits in a list that re-renders often (SSE-driven cost
|
|
updates), so this is the reliable way to spin it. */
|
|
@keyframes stamp-spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
.animate-stamp-spin {
|
|
animation: stamp-spin 9s linear infinite;
|
|
transform-origin: 50px 50px;
|
|
}
|