Hugging Face's logo

turtle89431
/
Moxie-Multimedia

Text-to-Speech
comfyui
text-to-video
video-generation
multi-track
audio
Model card Files
xet
 Community
Moxie-Multimedia / frontend /src /styles /globals.css
turtle89431's picture
turtle89431
Upload folder using huggingface_hub
7312c42 verified
Raw History Blame Contribute Delete
10.7 kB
@config "../../tailwind.config.ts";
@import "tailwindcss/theme";
@import "tailwindcss/utilities";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
/*---break---
*/
@custom-variant dark (&:is(.dark *));
/**
* Define CSS variables for light and dark themes, scoped under a custom class to avoid global conflicts.
*/
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-highlight: var(--highlight);
--color-prompt-semantic: var(--prompt-semantic);
--color-prompt-dialogue: var(--prompt-dialogue);
--color-panorama-axis-z: var(--panorama-axis-z);
--color-image-tile-foreground: var(--image-tile-foreground);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--font-sans: var(--font-sans);
--font-heading: var(--font-heading);
--text-\[8px\]: 8px;
--height-30: calc(var(--spacing) * 30);
--color-surface-1: var(--surface-1);
--color-surface-2: var(--surface-2);
--color-surface-3: var(--surface-3);
--color-surface-4: var(--surface-4);
--color-surface-5: var(--surface-5);
--color-surface-6: var(--surface-6);
--color-surface-7: var(--surface-7);
--color-surface-8: var(--surface-8);
--shadow-surface-1: var(--shadow-1);
--shadow-surface-2: var(--shadow-2);
--shadow-surface-3: var(--shadow-3);
--shadow-surface-4: var(--shadow-4);
--shadow-surface-5: var(--shadow-5);
--shadow-surface-6: var(--shadow-6);
--shadow-surface-7: var(--shadow-7);
--shadow-surface-8: var(--shadow-8);
--color-dm-drop: var(--dm-drop);
--color-dm-ring-high: var(--dm-ring-high);
--color-dm-ring-mid: var(--dm-ring-mid);
--color-dm-ring-base: var(--dm-ring-base);
--color-dm-hi-peak: var(--dm-hi-peak);
--color-dm-hi-high: var(--dm-hi-high);
--color-dm-hi-mid: var(--dm-hi-mid);
--color-dm-hi-base: var(--dm-hi-base);
--shadow-8: var(--shadow-8);
--shadow-7: var(--shadow-7);
--shadow-6: var(--shadow-6);
--shadow-5: var(--shadow-5);
--shadow-4: var(--shadow-4);
--shadow-3: var(--shadow-3);
--shadow-2: var(--shadow-2);
--shadow-1: var(--shadow-1);
--color-shadow-color: var(--shadow-color);
}
/* All styles scoped under .__CUSTOM_NODE_CLASS__ to avoid global conflicts.
* The placeholder is replaced with the lowercased project name by build.ts
* after the Tailwind CSS build step. */
@layer base {
.__CUSTOM_NODE_CLASS__ {
/* Standard Tailwind-compatible variables - Light theme */
--checker-a: oklch(1 0 0);
--checker-b: oklch(1 0 0);
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: var(--comfy-input-bg);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--destructive-foreground: oklch(0.985 0 0);
--highlight: oklch(73.286% 0.16689 115.634);
--prompt-semantic: oklch(0.62 0.19 48);
--prompt-dialogue: #cf3976;
--panorama-axis-z: oklch(0.58 0.2 255);
--image-tile-foreground: oklch(0.985 0 0);
--warning: oklch(0.922 0.191 90);
--multitrack-video-bg: oklch(0.42 0.08 195);
--multitrack-video-bg-strong: oklch(0.34 0.09 195);
--multitrack-video-border: oklch(0.82 0.08 195);
--multitrack-video-text: oklch(0.96 0.02 195);
--multitrack-video-waveform: #0A777E;
--multitrack-audio-bg: #0E3058;
--multitrack-audio-bg-strong: #0E3058;
--multitrack-audio-title-bg: #274569;
--multitrack-audio-waveform: #1581B3;
--multitrack-audio-border: oklch(0.7 0.1 220);
--multitrack-audio-text: oklch(0.96 0.02 245);
--multitrack-task-bg: #744A82;
--multitrack-task-bg-strong: #5F3B6A;
--multitrack-task-border: #A783B2;
--multitrack-task-text: oklch(0.96 0.01 260);
--multitrack-subtitle-bg: #9D4937;
--multitrack-subtitle-bg-strong: #7D3A2C;
--multitrack-subtitle-border: #C9705A;
--multitrack-subtitle-text: #ffffff;
--multitrack-waveform: oklch(0.55 0.09 185);
--border: var(--border-color);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--radius: 0.5rem;
.nodeNew{
--muted:var(--component-node-widget-background);
}
@import "tailwindcss/preflight.css";
* {
border-color: var(--border);
}
}
/* Dark theme - active when body has dark-theme class */
.dark-theme .__CUSTOM_NODE_CLASS__{
--checker-a: oklch(0.145 0 0);
--checker-b: oklch(0.205 0 0);
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: var(--comfy-input-bg);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--destructive-foreground: oklch(0.985 0 0);
--prompt-semantic: oklch(0.78 0.17 65);
--prompt-dialogue: #cf3976;
--panorama-axis-z: oklch(0.72 0.16 250);
--multitrack-video-bg: oklch(0.42 0.08 195);
--multitrack-video-bg-strong: oklch(0.34 0.09 195);
--multitrack-video-border: oklch(0.82 0.08 195);
--multitrack-video-text: oklch(0.96 0.02 195);
--multitrack-video-waveform: #0A777E;
--multitrack-audio-bg: #0E3058;
--multitrack-audio-bg-strong: #0E3058;
--multitrack-audio-title-bg: #274569;
--multitrack-audio-waveform: #1581B3;
--multitrack-audio-border: oklch(0.7 0.1 220);
--multitrack-audio-text: oklch(0.96 0.02 245);
--multitrack-task-bg: #744A82;
--multitrack-task-bg-strong: #5F3B6A;
--multitrack-task-border: #A783B2;
--multitrack-task-text: oklch(0.96 0.01 260);
--multitrack-subtitle-bg: #9D4937;
--multitrack-subtitle-bg-strong: #7D3A2C;
--multitrack-subtitle-border: #C9705A;
--multitrack-subtitle-text: #ffffff;
--multitrack-waveform: oklch(0.55 0.09 185);
--border: var(--border-color);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--highlight: oklch(96.109% 0.18336 113.683);
}
}
/* Radix UI state attributes - needed because Tailwind arbitrary values don't work with data-* attributes */
@layer components {
.__CUSTOM_NODE_CLASS__ [data-state="active"] {
background-color: var(--background);
color: var(--foreground);
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}
.__CUSTOM_NODE_CLASS__ [data-state="open"] {
color: var(--foreground);
}
.__CUSTOM_NODE_CLASS__ [data-state="closed"] {
color: var(--muted-foreground);
}
.__CUSTOM_NODE_CLASS__ [data-disabled="true"] {
pointer-events: none;
opacity: 0.5;
}
.__CUSTOM_NODE_CLASS__ .no-scrollbar {
scrollbar-width: none;
-ms-overflow-style: none;
}
.__CUSTOM_NODE_CLASS__ .no-scrollbar::-webkit-scrollbar {
display: none;
}
.__CUSTOM_NODE_CLASS__ .text-gradient{
background: linear-gradient(90deg, var(--primary), var(--highlight));
-webkit-text-fill-color: #0000;
-webkit-background-clip: text;
background-clip: text;
}
.__CUSTOM_NODE_CLASS__ .task-image-grid-item,
.__CUSTOM_NODE_CLASS__ .task-image-grid-add {
transition: opacity 180ms ease;
}
.__CUSTOM_NODE_CLASS__ .task-segment-editor {
container-type: inline-size;
}
@container (max-width: 40rem) {
.__CUSTOM_NODE_CLASS__ .task-segment-editor .task-image-drop-zone {
aspect-ratio: auto;
width: clamp(10rem, 40%, 20rem);
}
.__CUSTOM_NODE_CLASS__ .task-segment-editor .task-image-picker-empty {
aspect-ratio: auto;
width: 100%;
min-width: 0;
padding-inline: 0.5rem;
}
.__CUSTOM_NODE_CLASS__ .task-segment-editor .task-image-grid {
grid-template-columns: minmax(0, 1fr);
}
}
}
/* React DOM widgets are the containing block for every widget root. In Vue
* node mode the slot itself may be auto-sized, so keep the container pinned to
* its allocated node height instead of letting long prompt/content grow it. */
.comfyui-react-widget.__CUSTOM_NODE_CLASS__ {
position: relative;
display: block;
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
max-height: 100%;
box-sizing: border-box;
overflow: hidden;
contain: size layout paint;
}
/* Timeline's segment editor intentionally extends below the widget slot. */
.comfyui-react-widget.__CUSTOM_NODE_CLASS__.__CUSTOM_NODE_CLASS__-timeline-editor-open {
overflow: visible;
contain: size layout;
z-index: 9999;
}
/* ── Overlay management ─────────────────────────────────────────────────────
* When a Popover or ContextMenu is open, the widget container is elevated so
* it stays interactive above the dismiss backdrop (z-9997).
* The backdrop is a full-screen fixed div that intercepts clicks before they
* reach the LiteGraph canvas — the only reliable dismiss approach in ComfyUI. */
.comfyui-react-widget.__CUSTOM_NODE_CLASS__-overlay-active {
position: relative !important;
z-index: 9999 !important;
}
/* Radix portal wrapper divs rendered into document.body.
* pointer-events:none on the wrapper avoids capturing clicks in areas
* where there is no actual popup content. */
body > .__CUSTOM_NODE_CLASS__ {
display: block;
visibility: visible;
pointer-events: none;
}
body > .__CUSTOM_NODE_CLASS__ > * {
pointer-events: auto;
}