66e99136c2
Migrate all shadcn components into apps/web/components/ui/ so the web app is fully independent from packages/ui for its UI layer. Update to the latest shadcn base-nova style. Add missing semantic color variables (success, warning, info, canvas), font-mono mapping, scrollbar styling, and wrap Select items in SelectGroup for proper padding. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
130 lines
3 KiB
CSS
130 lines
3 KiB
CSS
/**
|
|
* Multica-specific design tokens and utilities.
|
|
* Extends the base shadcn theme with project-level customizations.
|
|
*/
|
|
|
|
@theme inline {
|
|
--font-mono: var(--font-mono);
|
|
--color-canvas: var(--canvas);
|
|
--color-success: var(--success);
|
|
--color-warning: var(--warning);
|
|
--color-info: var(--info);
|
|
}
|
|
|
|
:root {
|
|
--canvas: oklch(0.95 0.002 286);
|
|
|
|
/* Scrollbar */
|
|
--scrollbar-thumb: oklch(0.82 0.003 286);
|
|
--scrollbar-thumb-hover: oklch(0.705 0.015 286.067);
|
|
--scrollbar-track: transparent;
|
|
|
|
/* Tool execution states */
|
|
--tool-running: oklch(0.6 0.18 250);
|
|
--tool-success: oklch(0.72 0.12 145);
|
|
--tool-error: oklch(0.65 0.2 25);
|
|
|
|
/* Semantic status colors */
|
|
--success: oklch(0.55 0.16 145);
|
|
--warning: oklch(0.75 0.16 85);
|
|
--info: oklch(0.55 0.18 250);
|
|
}
|
|
|
|
.dark {
|
|
--canvas: oklch(0.2 0.005 286);
|
|
|
|
--scrollbar-thumb: oklch(1 0 0 / 15%);
|
|
--scrollbar-thumb-hover: oklch(1 0 0 / 30%);
|
|
--scrollbar-track: transparent;
|
|
|
|
--tool-running: oklch(0.65 0.2 250);
|
|
--tool-success: oklch(0.65 0.15 145);
|
|
--tool-error: oklch(0.7 0.2 22);
|
|
|
|
--success: oklch(0.65 0.15 145);
|
|
--warning: oklch(0.70 0.16 85);
|
|
--info: oklch(0.65 0.18 250);
|
|
}
|
|
|
|
/* Scrollbar styling */
|
|
@layer base {
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
|
}
|
|
*::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
*::-webkit-scrollbar-track {
|
|
background: var(--scrollbar-track);
|
|
}
|
|
*::-webkit-scrollbar-thumb {
|
|
background: var(--scrollbar-thumb);
|
|
border-radius: 3px;
|
|
}
|
|
*::-webkit-scrollbar-thumb:hover {
|
|
background: var(--scrollbar-thumb-hover);
|
|
}
|
|
}
|
|
|
|
/* Shiki dual themes: CSS-only light/dark switching */
|
|
.shiki,
|
|
.shiki span {
|
|
color: var(--shiki-light);
|
|
}
|
|
|
|
.dark .shiki,
|
|
.dark .shiki span {
|
|
color: var(--shiki-dark) !important;
|
|
}
|
|
|
|
/* KaTeX math rendering */
|
|
.katex {
|
|
color: inherit;
|
|
font-size: 1em;
|
|
}
|
|
|
|
.katex-display {
|
|
margin: 1em 0;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
padding: 0.5em 0;
|
|
}
|
|
|
|
/* Scroll fade mask utilities */
|
|
.mask-fade-y {
|
|
mask-image: linear-gradient(to bottom, transparent 0%, black 32px, black calc(100% - 32px), transparent 100%);
|
|
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 32px, black calc(100% - 32px), transparent 100%);
|
|
}
|
|
|
|
.mask-fade-bottom {
|
|
mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 32px), transparent 100%);
|
|
-webkit-mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 32px), transparent 100%);
|
|
}
|
|
|
|
@utility container {
|
|
@apply w-full max-w-4xl mx-auto;
|
|
}
|
|
|
|
/* Sidebar: remove default padding from inset container */
|
|
[data-slot="sidebar-container"] {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
/* Tool status: running glow pulse */
|
|
@keyframes glow-pulse {
|
|
0%, 100% { box-shadow: 0 0 0 0 var(--tool-running); }
|
|
50% { box-shadow: 0 0 0 3px oklch(0.6 0.2 250 / 0); }
|
|
}
|
|
|
|
/* Multica icon: entrance spin */
|
|
@keyframes entrance-spin {
|
|
0% { transform: rotate(0deg); opacity: 0; }
|
|
50% { opacity: 1; }
|
|
100% { transform: rotate(360deg); opacity: 1; }
|
|
}
|
|
|
|
.animate-entrance-spin {
|
|
animation: entrance-spin 0.6s ease-out forwards;
|
|
}
|