e9b2934ef7
- ArtifactGateWidget: gate modal 90%→70% of viewport, larger heading, more padding. - ArtifactView StructuredValue: depth-aware hierarchy (top-level hairline dividers, warm bg-muted card surfaces + shadow for object-array items). - index.css: .thot-label micro-labels switched to the mono register (SF Mono) with tightened tracking, distinguishing labels/meta from sans body prose. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
224 lines
7.2 KiB
CSS
224 lines
7.2 KiB
CSS
@import "tw-animate-css";
|
|
@import "shadcn/tailwind.css";
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/*
|
|
* GSD theme — mirrors the Omics Portal design system (Manrope + Fraunces, warm
|
|
* off-white surfaces, #cb333b red). Tokens are RAW OKLCH triplets (L C H) so the
|
|
* Tailwind v3 config can wrap them as `oklch(var(--token) / <alpha-value>)` and
|
|
* opacity utilities (bg-primary/80, …) keep working. Dark tokens follow either a
|
|
* `.dark` class or the portal's `[data-bs-theme="dark"]`, ready for embedding.
|
|
*/
|
|
@layer base {
|
|
:root {
|
|
--font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Arial, sans-serif;
|
|
--font-heading: "Fraunces", "Source Serif Pro", Georgia, "Times New Roman", serif;
|
|
--font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
|
|
|
|
/* Layered elevation, tinted with the foreground hue so depth reads warm on
|
|
warm surfaces. Borders mark structure; shadows mark elevation. */
|
|
--shadow-tint: 0.2678 0.0097 355.6;
|
|
--shadow-xs: 0 1px 2px oklch(var(--shadow-tint) / 0.05);
|
|
--shadow-sm: 0 1px 2px oklch(var(--shadow-tint) / 0.05), 0 2px 6px -1px oklch(var(--shadow-tint) / 0.05);
|
|
--shadow-md: 0 2px 4px -2px oklch(var(--shadow-tint) / 0.06), 0 12px 32px -8px oklch(var(--shadow-tint) / 0.1);
|
|
|
|
--background: 0.9918 0.0011 17.2; /* surface */
|
|
--foreground: 0.2678 0.0097 355.6; /* text */
|
|
--card: 0.9985 0.0006 17.2;
|
|
--card-foreground: 0.2678 0.0097 355.6;
|
|
--popover: 0.9985 0.0006 17.2;
|
|
--popover-foreground: 0.2678 0.0097 355.6;
|
|
--primary: 0.5587 0.1881 23.2; /* gsd red */
|
|
--primary-foreground: 0.9918 0.0011 17.2;
|
|
--primary-hover: 0.5095 0.1812 24.1;
|
|
--secondary: 0.9709 0.0011 17.2; /* surface-alt */
|
|
--secondary-foreground: 0.2678 0.0097 355.6;
|
|
--muted: 0.9709 0.0011 17.2;
|
|
--muted-foreground: 0.5133 0.0088 345.6;
|
|
--accent: 0.9408 0.0011 17.2; /* sunken */
|
|
--accent-foreground: 0.2678 0.0097 355.6;
|
|
--destructive: 0.5587 0.1881 23.2;
|
|
--destructive-foreground: 0.9918 0.0011 17.2;
|
|
--border: 0.9093 0.0035 354.7;
|
|
--input: 0.9093 0.0035 354.7;
|
|
--ring: 0.5587 0.1881 23.2;
|
|
--success: 0.7577 0.1581 165.0;
|
|
--warning: 0.8523 0.1386 78.9;
|
|
--info: 0.7035 0.1128 221.3;
|
|
--radius: 0.5rem;
|
|
--sidebar: 0.9709 0.0011 17.2;
|
|
--sidebar-foreground: 0.2678 0.0097 355.6;
|
|
--sidebar-primary: 0.5587 0.1881 23.2;
|
|
--sidebar-primary-foreground: 0.9918 0.0011 17.2;
|
|
--sidebar-accent: 0.9408 0.0011 17.2;
|
|
--sidebar-accent-foreground: 0.2678 0.0097 355.6;
|
|
--sidebar-border: 0.9093 0.0035 354.7;
|
|
--sidebar-ring: 0.5587 0.1881 23.2;
|
|
}
|
|
|
|
.dark,
|
|
[data-bs-theme="dark"] {
|
|
--shadow-tint: 0 0 0;
|
|
--background: 0.2178 0 90;
|
|
--foreground: 0.9310 0 90;
|
|
--card: 0.2350 0 90;
|
|
--card-foreground: 0.9310 0 90;
|
|
--popover: 0.2350 0 90;
|
|
--popover-foreground: 0.9310 0 90;
|
|
--primary: 0.6023 0.1848 20.3;
|
|
--primary-foreground: 0.9310 0 90;
|
|
--primary-hover: 0.6897 0.1779 16.9;
|
|
--secondary: 0.2972 0 90;
|
|
--secondary-foreground: 0.9310 0 90;
|
|
--muted: 0.2972 0 90;
|
|
--muted-foreground: 0.7826 0 90;
|
|
--accent: 0.3485 0 90;
|
|
--accent-foreground: 0.9310 0 90;
|
|
--destructive: 0.6023 0.1848 20.3;
|
|
--destructive-foreground: 0.9310 0 90;
|
|
--border: 0.3715 0 90;
|
|
--input: 0.3715 0 90;
|
|
--ring: 0.6897 0.1779 16.9;
|
|
--sidebar: 0.2350 0 90;
|
|
--sidebar-foreground: 0.9310 0 90;
|
|
--sidebar-primary: 0.6023 0.1848 20.3;
|
|
--sidebar-primary-foreground: 0.9310 0 90;
|
|
--sidebar-accent: 0.3485 0 90;
|
|
--sidebar-accent-foreground: 0.9310 0 90;
|
|
--sidebar-border: 0.3715 0 90;
|
|
--sidebar-ring: 0.6897 0.1779 16.9;
|
|
}
|
|
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
|
|
html {
|
|
@apply font-sans;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground antialiased;
|
|
font-feature-settings: "ss01", "cv11";
|
|
}
|
|
|
|
h1, h2, h3, h4 {
|
|
font-family: var(--font-heading);
|
|
font-optical-sizing: auto;
|
|
letter-spacing: -0.015em;
|
|
}
|
|
|
|
code, pre, kbd, samp {
|
|
font-family: var(--font-mono);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
::selection {
|
|
background: oklch(var(--primary) / 0.16);
|
|
}
|
|
|
|
/* Thin, brand-tinted scrollbars */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: oklch(var(--border)) transparent;
|
|
}
|
|
*::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
*::-webkit-scrollbar-thumb {
|
|
background: oklch(var(--border));
|
|
border-radius: 9999px;
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
*::-webkit-scrollbar-thumb:hover {
|
|
background: oklch(var(--muted-foreground) / 0.5);
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Minimal markdown prose for assistant turns (no typography plugin installed).
|
|
* Scoped so it never leaks into widgets.
|
|
*/
|
|
@layer components {
|
|
/* Standard micro-label: panel headers, nav sections, meta rows. Set in the
|
|
mono register so labels/meta read as a distinct typographic layer from the
|
|
sans body prose (mono needs less tracking than the sans did). */
|
|
.thot-label {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: oklch(var(--muted-foreground));
|
|
}
|
|
|
|
.thot-prose {
|
|
color: oklch(var(--foreground));
|
|
font-size: 0.9375rem;
|
|
line-height: 1.65;
|
|
}
|
|
.thot-prose > :first-child { margin-top: 0; }
|
|
.thot-prose > :last-child { margin-bottom: 0; }
|
|
.thot-prose p { margin: 0.6em 0; }
|
|
.thot-prose h1, .thot-prose h2, .thot-prose h3 {
|
|
font-family: var(--font-heading);
|
|
font-weight: 600;
|
|
line-height: 1.25;
|
|
margin: 1.1em 0 0.5em;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.thot-prose h1 { font-size: 1.45rem; }
|
|
.thot-prose h2 { font-size: 1.2rem; }
|
|
.thot-prose h3 { font-size: 1.02rem; }
|
|
.thot-prose ul, .thot-prose ol { margin: 0.6em 0; padding-left: 1.3em; }
|
|
.thot-prose li { margin: 0.25em 0; }
|
|
.thot-prose a { color: oklch(var(--primary)); text-decoration: underline; text-underline-offset: 2px; }
|
|
.thot-prose code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.85em;
|
|
background: oklch(var(--muted));
|
|
padding: 0.12em 0.4em;
|
|
border-radius: 0.3rem;
|
|
border: 1px solid oklch(var(--border) / 0.6);
|
|
}
|
|
.thot-prose pre {
|
|
background: oklch(var(--muted));
|
|
padding: 0.9rem 1rem;
|
|
border-radius: calc(var(--radius) + 2px);
|
|
overflow-x: auto;
|
|
border: 1px solid oklch(var(--border) / 0.7);
|
|
box-shadow: var(--shadow-xs);
|
|
}
|
|
.thot-prose pre code { background: transparent; padding: 0; }
|
|
.thot-prose blockquote {
|
|
border-left: 2px solid oklch(var(--border));
|
|
padding-left: 0.9em;
|
|
color: oklch(var(--muted-foreground));
|
|
margin: 0.7em 0;
|
|
}
|
|
.thot-prose table {
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
width: 100%;
|
|
margin: 0.7em 0;
|
|
font-size: 0.875rem;
|
|
border: 1px solid oklch(var(--border) / 0.8);
|
|
border-radius: calc(var(--radius) + 2px);
|
|
overflow: hidden;
|
|
}
|
|
.thot-prose th, .thot-prose td { padding: 0.45em 0.7em; text-align: left; }
|
|
.thot-prose td { border-top: 1px solid oklch(var(--border) / 0.6); font-variant-numeric: tabular-nums; }
|
|
.thot-prose th {
|
|
background: oklch(var(--muted));
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: oklch(var(--muted-foreground));
|
|
}
|
|
}
|