Spaces:
Runtime error
Runtime error
| @import "tailwindcss"; | |
| /* | |
| YuE2 Studio design tokens. | |
| Theme lock: the console is dark only. There is no light variant, and no | |
| section inverts. | |
| Accent lock: one accent (citron) across every surface. Red appears only for | |
| real failure state, never as decoration. | |
| Shape lock: 4px radius on every panel, input and button. The documented | |
| exception is play buttons, which are circular: the transport in the dock and | |
| the smaller reference preview. | |
| */ | |
| @theme { | |
| --color-void: #0b0b0c; | |
| --color-panel: #121215; | |
| --color-raised: #17171b; | |
| --color-line: #232329; | |
| --color-line-strong: #33333b; | |
| --color-ink: #ebebe8; | |
| --color-ink-dim: #9d9d99; | |
| --color-ink-faint: #6b6b68; | |
| --color-citron: #c7e84f; | |
| --color-citron-dim: #96b02f; | |
| --color-alarm: #e2574c; | |
| --radius-console: 4px; | |
| --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif; | |
| --font-mono: var(--font-geist-mono), ui-monospace, monospace; | |
| } | |
| @layer base { | |
| html { | |
| color-scheme: dark; | |
| } | |
| body { | |
| background-color: var(--color-void); | |
| color: var(--color-ink); | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| ::selection { | |
| background-color: var(--color-citron); | |
| color: var(--color-void); | |
| } | |
| /* One focus treatment for the whole console. */ | |
| :where(button, a, input, textarea, select, [tabindex]):focus-visible { | |
| outline: 2px solid var(--color-citron); | |
| outline-offset: 2px; | |
| border-radius: var(--radius-console); | |
| } | |
| textarea, | |
| input, | |
| select { | |
| font-family: inherit; | |
| } | |
| } | |
| @layer utilities { | |
| .console-scroll { | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--color-line-strong) transparent; | |
| } | |
| .console-scroll::-webkit-scrollbar { | |
| width: 10px; | |
| height: 10px; | |
| } | |
| .console-scroll::-webkit-scrollbar-thumb { | |
| background-color: var(--color-line-strong); | |
| border: 3px solid var(--color-void); | |
| border-radius: 999px; | |
| } | |
| /* Faint horizontal rule of the kind found on a mixing desk faceplate. */ | |
| .faceplate { | |
| background-image: repeating-linear-gradient( | |
| 90deg, | |
| var(--color-line) 0px, | |
| var(--color-line) 1px, | |
| transparent 1px, | |
| transparent 7px | |
| ); | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| *, | |
| *::before, | |
| *::after { | |
| animation-duration: 0.01ms ; | |
| animation-iteration-count: 1 ; | |
| transition-duration: 0.01ms ; | |
| } | |
| } | |