mirror of
https://github.com/simstudioai/sim.git
synced 2026-01-09 15:07:55 -05:00
1c626dfcae
* improvement(globals): light colors * improvement(ui): logs, templates, kb, light globals * improvement(subflows): start node and ui/ux
731 lines
18 KiB
CSS
731 lines
18 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/**
|
|
* CSS-based sidebar and panel widths to prevent SSR hydration mismatches.
|
|
* Default widths are set here and updated via blocking script before React hydrates.
|
|
*/
|
|
:root {
|
|
--sidebar-width: 232px;
|
|
--panel-width: 260px;
|
|
--toolbar-triggers-height: 300px;
|
|
--editor-connections-height: 200px;
|
|
--terminal-height: 196px;
|
|
}
|
|
|
|
.sidebar-container {
|
|
width: var(--sidebar-width);
|
|
}
|
|
|
|
.panel-container {
|
|
width: var(--panel-width);
|
|
}
|
|
|
|
.terminal-container {
|
|
height: var(--terminal-height);
|
|
}
|
|
|
|
/**
|
|
* Landing loop animation styles (keyframes defined in tailwind.config.ts)
|
|
*/
|
|
.landing-loop-animated-dash {
|
|
animation: dash-animation 1.5s linear infinite;
|
|
will-change: stroke-dashoffset;
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
.react-flow__node-landingLoop svg rect.landing-loop-animated-dash {
|
|
animation: dash-animation 1.5s linear infinite !important;
|
|
}
|
|
|
|
/**
|
|
* Color tokens - single source of truth for all colors
|
|
* Light mode: Warm theme
|
|
* Dark mode: Dark neutral theme
|
|
*/
|
|
@layer base {
|
|
:root,
|
|
.light {
|
|
--bg: #fdfdfd; /* main canvas - neutral near-white */
|
|
--surface-1: #fcfcfc; /* sidebar, panels */
|
|
--surface-2: #ffffff; /* blocks, cards, modals - pure white */
|
|
--surface-3: #f7f7f7; /* popovers, headers */
|
|
--surface-4: #f5f5f5; /* buttons base */
|
|
--border: #e0e0e0; /* primary border */
|
|
--surface-5: #f3f3f3; /* inputs, form elements */
|
|
--border-1: #e0e0e0; /* stronger border */
|
|
--surface-6: #f0f0f0; /* popovers, elevated surfaces */
|
|
--surface-7: #ececec;
|
|
|
|
--workflow-edge: #e0e0e0; /* workflow handles/edges - matches border-1 */
|
|
|
|
/* Text - neutral */
|
|
--text-primary: #2d2d2d;
|
|
--text-secondary: #404040;
|
|
--text-tertiary: #5c5c5c;
|
|
--text-muted: #737373;
|
|
--text-subtle: #8c8c8c;
|
|
--text-inverse: #ffffff;
|
|
--text-error: #ef4444;
|
|
|
|
/* Borders / dividers */
|
|
--divider: #ededed;
|
|
--border-muted: #e4e4e4;
|
|
--border-success: #e0e0e0;
|
|
|
|
/* Brand & state */
|
|
--brand-400: #8e4cfb;
|
|
--brand-secondary: #33b4ff;
|
|
--brand-tertiary: #22c55e;
|
|
--brand-tertiary-2: #32bd7e;
|
|
--warning: #ea580c;
|
|
|
|
/* Utility */
|
|
--white: #ffffff;
|
|
|
|
/* Font weights - lighter for light mode */
|
|
--font-weight-base: 430;
|
|
--font-weight-medium: 450;
|
|
--font-weight-semibold: 500;
|
|
|
|
/* Extended palette */
|
|
--c-0D0D0D: #0d0d0d;
|
|
--c-1A1A1A: #1a1a1a;
|
|
--c-1F1F1F: #1f1f1f;
|
|
--c-2A2A2A: #2a2a2a;
|
|
--c-383838: #383838;
|
|
--c-414141: #414141;
|
|
--c-442929: #442929;
|
|
--c-491515: #491515;
|
|
--c-575757: #575757;
|
|
--c-686868: #686868;
|
|
--c-707070: #707070;
|
|
--c-727272: #727272;
|
|
--c-737373: #737373;
|
|
--c-808080: #808080;
|
|
--c-858585: #858585;
|
|
--c-868686: #868686;
|
|
--c-8D8D8D: #8d8d8d;
|
|
--c-939393: #939393;
|
|
--c-A8A8A8: #a8a8a8;
|
|
--c-B8B8B8: #b8b8b8;
|
|
--c-C0C0C0: #c0c0c0;
|
|
--c-CDCDCD: #cdcdcd;
|
|
--c-D0D0D0: #d0d0d0;
|
|
--c-D2D2D2: #d2d2d2;
|
|
--c-E0E0E0: #e0e0e0;
|
|
--c-E5E5E5: #e5e5e5;
|
|
--c-E8E8E8: #e8e8e8;
|
|
--c-EEEEEE: #eeeeee;
|
|
--c-F0F0F0: #f0f0f0;
|
|
--c-F4F4F4: #f4f4f4;
|
|
--c-F5F5F5: #f5f5f5;
|
|
|
|
/* Blues and cyans */
|
|
--c-00B0B0: #00b0b0;
|
|
--c-264F78: #264f78;
|
|
--c-2F55FF: #2f55ff;
|
|
--c-2FA1FF: #2fa1ff;
|
|
--c-336699: #336699;
|
|
--c-34B5FF: #34b5ff;
|
|
--c-601EE0: #601ee0;
|
|
--c-611F69: #611f69;
|
|
--c-802FFF: #802fff;
|
|
--c-8357FF: #8357ff;
|
|
--c-8C10FF: #8c10ff;
|
|
|
|
/* Greens */
|
|
--c-4CAF50: #22c55e;
|
|
|
|
/* Oranges / Ambers */
|
|
--c-F59E0B: #f59e0b;
|
|
--c-F97316: #ea580c;
|
|
--c-FF972F: #f97316;
|
|
|
|
/* Reds */
|
|
--c-DC2626: #dc2626;
|
|
--c-F6D2D2: #fecaca;
|
|
--c-F87171: #f87171;
|
|
--c-FF402F: #ef4444;
|
|
--c-B91C1C: #b91c1c;
|
|
--c-883827: #7c2d12;
|
|
|
|
/* Terminal status badges */
|
|
--terminal-status-error-bg: #fef2f2;
|
|
--terminal-status-error-border: #f87171;
|
|
--terminal-status-info-bg: #f7f7f7;
|
|
--terminal-status-info-border: #a3a3a3;
|
|
--terminal-status-info-color: #525252;
|
|
--terminal-status-warning-bg: #fefce8;
|
|
--terminal-status-warning-border: #facc15;
|
|
--terminal-status-warning-color: #a16207;
|
|
}
|
|
.dark {
|
|
/* Surface */
|
|
--bg: #1b1b1b;
|
|
--surface-1: #1e1e1e;
|
|
--surface-2: #232323;
|
|
--surface-3: #242424;
|
|
--surface-4: #292929;
|
|
--border: #2c2c2c;
|
|
--surface-5: #363636;
|
|
--border-1: #3d3d3d;
|
|
--surface-6: #454545;
|
|
--surface-7: #454545;
|
|
|
|
--workflow-edge: #454545; /* workflow handles/edges - same as surface-6 in dark */
|
|
|
|
/* Text */
|
|
--text-primary: #e6e6e6;
|
|
--text-secondary: #cccccc;
|
|
--text-tertiary: #b3b3b3;
|
|
--text-muted: #787878;
|
|
--text-subtle: #7d7d7d;
|
|
--text-inverse: #1b1b1b;
|
|
--text-error: #ef4444;
|
|
|
|
/* --border-strong: #303030; */
|
|
--divider: #393939;
|
|
--border-muted: #424242;
|
|
--border-success: #575757;
|
|
|
|
/* Brand & state */
|
|
--brand-400: #8e4cfb;
|
|
--brand-secondary: #33b4ff;
|
|
--brand-tertiary: #22c55e;
|
|
--brand-tertiary-2: #32bd7e;
|
|
--warning: #ff6600;
|
|
|
|
/* Utility */
|
|
--white: #ffffff;
|
|
|
|
/* Font weights - standard weights for dark mode */
|
|
--font-weight-base: 440;
|
|
--font-weight-medium: 480;
|
|
--font-weight-semibold: 550;
|
|
|
|
/* Extended palette (exhaustive from code usage via -[#...]) */
|
|
/* Neutral deep shades */
|
|
--c-0D0D0D: #0d0d0d;
|
|
--c-1A1A1A: #1a1a1a;
|
|
--c-1F1F1F: #1f1f1f;
|
|
--c-2A2A2A: #2a2a2a;
|
|
--c-383838: #383838;
|
|
--c-414141: #414141;
|
|
--c-442929: #442929;
|
|
--c-491515: #491515;
|
|
--c-575757: #575757;
|
|
--c-686868: #686868;
|
|
--c-707070: #707070;
|
|
--c-727272: #727272;
|
|
--c-737373: #737373;
|
|
--c-808080: #808080;
|
|
--c-858585: #858585;
|
|
--c-868686: #868686;
|
|
--c-8D8D8D: #8d8d8d;
|
|
--c-939393: #939393;
|
|
--c-A8A8A8: #a8a8a8;
|
|
--c-B8B8B8: #b8b8b8;
|
|
--c-C0C0C0: #c0c0c0;
|
|
--c-CDCDCD: #cdcdcd;
|
|
--c-D0D0D0: #d0d0d0;
|
|
--c-D2D2D2: #d2d2d2;
|
|
--c-E0E0E0: #e0e0e0;
|
|
--c-E5E5E5: #e5e5e5;
|
|
--c-E8E8E8: #e8e8e8;
|
|
--c-EEEEEE: #eeeeee;
|
|
--c-F0F0F0: #f0f0f0;
|
|
--c-F4F4F4: #f4f4f4;
|
|
--c-F5F5F5: #f5f5f5;
|
|
|
|
--c-CFCFCF: #cfcfcf;
|
|
|
|
/* Blues and cyans */
|
|
--c-00B0B0: #00b0b0;
|
|
--c-264F78: #264f78;
|
|
--c-2F55FF: #2f55ff;
|
|
--c-2FA1FF: #2fa1ff;
|
|
--c-336699: #336699;
|
|
--c-34B5FF: #34b5ff;
|
|
--c-601EE0: #601ee0;
|
|
--c-611F69: #611f69;
|
|
--c-802FFF: #802fff;
|
|
--c-8357FF: #8357ff;
|
|
--c-8C10FF: #8c10ff;
|
|
|
|
/* Greens */
|
|
--c-4CAF50: #4caf50;
|
|
|
|
/* Oranges / Ambers */
|
|
--c-F59E0B: #f59e0b;
|
|
--c-F97316: #f97316;
|
|
--c-FF972F: #ff972f;
|
|
|
|
/* Reds */
|
|
--c-DC2626: #dc2626;
|
|
--c-F6D2D2: #f6d2d2;
|
|
--c-F87171: #f87171;
|
|
--c-FF402F: #ff402f;
|
|
--c-B91C1C: #b91c1c;
|
|
--c-883827: #883827;
|
|
|
|
/* Terminal status badges */
|
|
--terminal-status-error-bg: #491515;
|
|
--terminal-status-error-border: #883827;
|
|
--terminal-status-info-bg: #383838;
|
|
--terminal-status-info-border: #686868;
|
|
--terminal-status-info-color: #b7b7b7;
|
|
--terminal-status-warning-bg: #3d3520;
|
|
--terminal-status-warning-border: #5c4d1f;
|
|
--terminal-status-warning-color: #d4a72c;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Base styles for body, scrollbars, and global elements
|
|
*/
|
|
@layer base {
|
|
* {
|
|
border-color: var(--border);
|
|
overscroll-behavior-x: none;
|
|
}
|
|
|
|
*:focus {
|
|
outline: none;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg);
|
|
color: var(--text-primary);
|
|
overscroll-behavior-x: none;
|
|
overscroll-behavior-y: none;
|
|
min-height: 100vh;
|
|
scrollbar-gutter: stable;
|
|
text-rendering: optimizeSpeed;
|
|
letter-spacing: 0.28px;
|
|
}
|
|
|
|
/* Ensure visible text caret across inputs and editors */
|
|
input,
|
|
textarea,
|
|
[contenteditable="true"] {
|
|
caret-color: var(--text-primary);
|
|
}
|
|
|
|
.dark input,
|
|
.dark textarea,
|
|
.dark [contenteditable="true"] {
|
|
caret-color: var(--text-primary);
|
|
}
|
|
|
|
.dark body {
|
|
@apply antialiased;
|
|
}
|
|
::-webkit-scrollbar {
|
|
width: var(--scrollbar-size);
|
|
height: var(--scrollbar-size);
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--surface-1);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: var(--surface-7);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--surface-7);
|
|
}
|
|
|
|
/* Dark Mode Global Scrollbar */
|
|
.dark ::-webkit-scrollbar-track {
|
|
background: var(--surface-4);
|
|
}
|
|
|
|
.dark ::-webkit-scrollbar-thumb {
|
|
background-color: var(--surface-7);
|
|
}
|
|
|
|
.dark ::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--surface-7);
|
|
}
|
|
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--surface-7) var(--surface-1);
|
|
}
|
|
|
|
.dark * {
|
|
scrollbar-color: var(--surface-7) var(--surface-4);
|
|
}
|
|
|
|
.copilot-scrollable {
|
|
scrollbar-gutter: stable;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Panel tab styles
|
|
*/
|
|
.panel-tab-base {
|
|
color: var(--base-muted-foreground);
|
|
}
|
|
|
|
.panel-tab-active {
|
|
background-color: var(--surface-5);
|
|
color: var(--text-primary);
|
|
border-color: var(--border-muted);
|
|
}
|
|
|
|
.dark .panel-tab-active {
|
|
background-color: var(--surface-1);
|
|
color: var(--white);
|
|
border-color: var(--border-muted);
|
|
}
|
|
|
|
.panel-tab-inactive:hover {
|
|
background-color: var(--surface-5);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/**
|
|
* Subblock divider visibility
|
|
* Hides dividers when adjacent subblocks render empty content (e.g., schedule-info without data).
|
|
* Uses CSS :has() to detect empty .subblock-content elements and hide associated dividers.
|
|
* Selectors ordered by ascending specificity: (0,4,0) then (0,5,0)
|
|
*/
|
|
.subblock-row:has(> .subblock-content:empty) > .subblock-divider,
|
|
.subblock-row:has(+ .subblock-row > .subblock-content:empty) > .subblock-divider {
|
|
display: none;
|
|
}
|
|
|
|
/**
|
|
* Dark mode specific overrides
|
|
*/
|
|
.dark .bg-red-500 {
|
|
@apply bg-red-700;
|
|
}
|
|
|
|
/**
|
|
* Browser input overrides
|
|
*/
|
|
input[type="search"]::-webkit-search-cancel-button {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
}
|
|
|
|
input[type="search"]::-moz-search-cancel-button {
|
|
display: none;
|
|
}
|
|
|
|
input[type="search"]::-ms-clear {
|
|
display: none;
|
|
}
|
|
|
|
/**
|
|
* Utilities and special effects
|
|
* Animation keyframes are defined in tailwind.config.ts
|
|
*/
|
|
@layer utilities {
|
|
.scrollbar-none {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.scrollbar-none::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.scrollbar-hide {
|
|
-webkit-scrollbar: none;
|
|
-webkit-scrollbar-width: none;
|
|
-webkit-scrollbar-track: transparent;
|
|
-webkit-scrollbar-thumb: transparent;
|
|
scrollbar-width: none;
|
|
scrollbar-color: transparent transparent;
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
width: 0;
|
|
height: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.scrollbar-hide::-webkit-scrollbar-track {
|
|
display: none;
|
|
background: transparent;
|
|
}
|
|
|
|
.scrollbar-hide::-webkit-scrollbar-thumb {
|
|
display: none;
|
|
background: transparent;
|
|
}
|
|
|
|
.gradient-text {
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.bg-input-background {
|
|
background-color: hsl(var(--input-background));
|
|
}
|
|
|
|
.auth-card {
|
|
background-color: var(--white) !important;
|
|
border-color: var(--border-muted) !important;
|
|
}
|
|
|
|
.dark .auth-card {
|
|
background-color: var(--surface-1) !important;
|
|
border-color: var(--border-muted) !important;
|
|
}
|
|
|
|
.auth-text-primary {
|
|
color: var(--text-inverse) !important;
|
|
}
|
|
|
|
.auth-text-secondary {
|
|
color: var(--text-secondary) !important;
|
|
}
|
|
|
|
.auth-text-muted {
|
|
color: var(--text-muted) !important;
|
|
}
|
|
|
|
.auth-divider {
|
|
border-color: var(--border-muted) !important;
|
|
}
|
|
|
|
.auth-card-shadow {
|
|
box-shadow:
|
|
0 10px 15px -3px rgba(0, 0, 0, 0.05),
|
|
0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
|
|
}
|
|
|
|
.auth-link {
|
|
color: var(--text-muted) !important;
|
|
}
|
|
|
|
.transition-ring {
|
|
transition-property: box-shadow, transform;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-duration: 300ms;
|
|
}
|
|
|
|
.streaming-effect {
|
|
@apply relative overflow-hidden;
|
|
}
|
|
|
|
.streaming-effect::after {
|
|
content: "";
|
|
@apply pointer-events-none absolute left-0 top-0 h-full w-full;
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(128, 128, 128, 0) 0%,
|
|
rgba(128, 128, 128, 0.1) 50%,
|
|
rgba(128, 128, 128, 0) 100%
|
|
);
|
|
animation: code-shimmer 1.5s infinite;
|
|
z-index: 10;
|
|
}
|
|
|
|
.dark .streaming-effect::after {
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(180, 180, 180, 0) 0%,
|
|
rgba(180, 180, 180, 0.1) 50%,
|
|
rgba(180, 180, 180, 0) 100%
|
|
);
|
|
}
|
|
|
|
.loading-placeholder::placeholder {
|
|
animation: placeholder-pulse 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
.auth-button-gradient {
|
|
background: linear-gradient(to bottom, var(--brand-primary-hex), var(--brand-400)) !important;
|
|
border-color: var(--brand-400) !important;
|
|
box-shadow: inset 0 2px 4px 0 var(--brand-400) !important;
|
|
}
|
|
|
|
.auth-button-gradient:hover {
|
|
background: linear-gradient(to bottom, var(--brand-primary-hex), var(--brand-400)) !important;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.auth-button-custom {
|
|
background: var(--brand-primary-hex) !important;
|
|
border-color: var(--brand-primary-hex) !important;
|
|
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1) !important;
|
|
}
|
|
|
|
.auth-button-custom:hover {
|
|
background: var(--brand-primary-hover-hex) !important;
|
|
border-color: var(--brand-primary-hover-hex) !important;
|
|
opacity: 1;
|
|
}
|
|
|
|
/**
|
|
* Panel tab visibility and styling to prevent hydration flash
|
|
*/
|
|
html[data-panel-active-tab="copilot"] .panel-container [data-tab-content="toolbar"],
|
|
html[data-panel-active-tab="copilot"] .panel-container [data-tab-content="editor"] {
|
|
display: none !important;
|
|
}
|
|
|
|
html[data-panel-active-tab="toolbar"] .panel-container [data-tab-content="copilot"],
|
|
html[data-panel-active-tab="toolbar"] .panel-container [data-tab-content="editor"] {
|
|
display: none !important;
|
|
}
|
|
|
|
html[data-panel-active-tab="editor"] .panel-container [data-tab-content="copilot"],
|
|
html[data-panel-active-tab="editor"] .panel-container [data-tab-content="toolbar"] {
|
|
display: none !important;
|
|
}
|
|
|
|
html[data-panel-active-tab="copilot"] .panel-container [data-tab-button="copilot"] {
|
|
background-color: var(--border-1) !important;
|
|
color: var(--text-primary) !important;
|
|
}
|
|
html[data-panel-active-tab="copilot"] .panel-container [data-tab-button="toolbar"],
|
|
html[data-panel-active-tab="copilot"] .panel-container [data-tab-button="editor"] {
|
|
background-color: transparent !important;
|
|
color: var(--text-tertiary) !important;
|
|
}
|
|
|
|
html[data-panel-active-tab="toolbar"] .panel-container [data-tab-button="toolbar"] {
|
|
background-color: var(--border-1) !important;
|
|
color: var(--text-primary) !important;
|
|
}
|
|
html[data-panel-active-tab="toolbar"] .panel-container [data-tab-button="copilot"],
|
|
html[data-panel-active-tab="toolbar"] .panel-container [data-tab-button="editor"] {
|
|
background-color: transparent !important;
|
|
color: var(--text-tertiary) !important;
|
|
}
|
|
|
|
html[data-panel-active-tab="editor"] .panel-container [data-tab-button="editor"] {
|
|
background-color: var(--border-1) !important;
|
|
color: var(--text-primary) !important;
|
|
}
|
|
html[data-panel-active-tab="editor"] .panel-container [data-tab-button="copilot"],
|
|
html[data-panel-active-tab="editor"] .panel-container [data-tab-button="toolbar"] {
|
|
background-color: transparent !important;
|
|
color: var(--text-tertiary) !important;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @depricated
|
|
* Legacy globals (light/dark) kept for backward-compat with old classes.
|
|
* Do not modify; remove after migration.
|
|
*/
|
|
@layer base {
|
|
:root,
|
|
.light {
|
|
--background: 0 0% 100%;
|
|
--foreground: 0 0% 3.9%;
|
|
--card: 0 0% 99.2%;
|
|
--card-foreground: 0 0% 3.9%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 0 0% 3.9%;
|
|
--primary: 0 0% 11.2%;
|
|
--primary-foreground: 0 0% 98%;
|
|
--secondary: 0 0% 96.1%;
|
|
--secondary-foreground: 0 0% 11.2%;
|
|
--muted: 0 0% 96.1%;
|
|
--muted-foreground: 0 0% 46.9%;
|
|
--accent: 0 0% 92.5%;
|
|
--accent-foreground: 0 0% 11.2%;
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
--input: 0 0% 89.8%;
|
|
--input-background: 0 0% 100%;
|
|
--ring: 0 0% 3.9%;
|
|
--radius: 0.5rem;
|
|
--scrollbar-track: 0 0% 85%;
|
|
--scrollbar-thumb: 0 0% 65%;
|
|
--scrollbar-thumb-hover: 0 0% 55%;
|
|
--scrollbar-size: 8px;
|
|
--workflow-background: 0 0% 100%;
|
|
--card-background: 0 0% 99.2%;
|
|
--card-border: 0 0% 89.8%;
|
|
--card-text: 0 0% 3.9%;
|
|
--card-hover: 0 0% 96.1%;
|
|
--base-muted-foreground: #737373;
|
|
--gradient-primary: 263 85% 70%;
|
|
--gradient-secondary: 336 95% 65%;
|
|
--brand-primary-hex: #6f3dfa;
|
|
--brand-primary-hover-hex: #6338d9;
|
|
--brand-accent-hex: #6f3dfa;
|
|
--brand-accent-hover-hex: #6f3dfa;
|
|
--brand-background-hex: #ffffff;
|
|
--surface-elevated: #202020;
|
|
}
|
|
|
|
.dark {
|
|
--background: 0 0% 10.59%;
|
|
--foreground: 0 0% 98%;
|
|
--card: 0 0% 9.0%;
|
|
--card-foreground: 0 0% 98%;
|
|
--popover: 0 0% 9.0%;
|
|
--popover-foreground: 0 0% 98%;
|
|
--primary: 0 0% 11.2%;
|
|
--primary-foreground: 0 0% 98%;
|
|
--secondary: 0 0% 12.0%;
|
|
--secondary-foreground: 0 0% 98%;
|
|
--muted: 0 0% 17.5%;
|
|
/* --muted-foreground: 0 0% 65.1%; */
|
|
--accent: 0 0% 17.5%;
|
|
--accent-foreground: 0 0% 98%;
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
--input: 0 0% 16.1%;
|
|
--input-background: 0 0% 20.78%;
|
|
--ring: 0 0% 83.9%;
|
|
--scrollbar-track: 0 0% 17.5%;
|
|
--scrollbar-thumb: 0 0% 30%;
|
|
--scrollbar-thumb-hover: 0 0% 40%;
|
|
--workflow-background: 0 0% 10.59%;
|
|
--card-background: 0 0% 9.0%;
|
|
--card-border: 0 0% 22.7%;
|
|
--card-text: 0 0% 98%;
|
|
--card-hover: 0 0% 12.0%;
|
|
--base-muted-foreground: #a3a3a3;
|
|
--gradient-primary: 263 90% 75%;
|
|
--gradient-secondary: 336 100% 72%;
|
|
--brand-primary-hex: #701ffc;
|
|
--brand-primary-hover-hex: #802fff;
|
|
--brand-accent-hex: #9d54ff;
|
|
--brand-accent-hover-hex: #a66fff;
|
|
--brand-background-hex: #0c0c0c;
|
|
--surface-elevated: #202020;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Remove backticks from inline code in prose (Tailwind Typography default)
|
|
*/
|
|
.prose code::before,
|
|
.prose code::after {
|
|
content: none !important;
|
|
}
|
|
|
|
/**
|
|
* Remove underlines from heading anchor links in prose
|
|
*/
|
|
.prose h1 a,
|
|
.prose h2 a,
|
|
.prose h3 a,
|
|
.prose h4 a,
|
|
.prose h5 a,
|
|
.prose h6 a {
|
|
text-decoration: none !important;
|
|
color: inherit !important;
|
|
}
|