Instruction file imported from JoJo275/simple-python-boilerplate (.github/instructions/dashboard-css.instructions.md). Copyright stays with the author.

Dashboard CSS Conventions

Variable System

All colors use CSS custom properties in :root. Never hardcode colors.

Theme Support

• 7 accent themes set via [data-accent="<name>"] selectors
• Light/dark mode via [data-theme="dark"] selector
• Always test both modes when changing styles

Section Organization

CSS is organized in labeled sections with /* ========== Name ========== */ headers. Add new styles in the appropriate section or create a new labeled section.

Key Layout Values

• --sidebar-width: 200px (collapses to 0 on mobile)
• --topbar-height: 44px (fixed positioning)
• --gap-sm/md/lg: spacing scale (0.35rem / 0.75rem / 1.25rem)

Responsive

• Breakpoint: 768px — sidebar hides, layout goes single-column
• Terminal panel goes full-width bottom sheet on mobile

Browser Target

• Primary development browser: Opera GX (Chromium-based)
• Avoid ::details-content pseudo-element — not reliably supported in Opera GX
• Don't replace working @keyframes animations with custom ones for specific sections — the browser may not replay them on subsequent toggles
• Use !important on padding/margin to lock values that base keyframes try to animate