Files
pi-multifx-pedal/ui/src/index.css
T
shawn 214f3c13d7 feat: Footswitch Modes — Stomp/Preset/Snapshot/Combo with scribble strips
Implements multi-mode footswitch system for the Helix Stadium-inspired pedal UI:

- Footswitch mode context provider with 4 modes: stomp, preset, snapshot, combo
- ModeSelector in status bar (collapsed cycling mode for mobile)
- Stomp mode: footswitches toggle individual blocks on/off, scribble strips show block name + status
- Preset mode: footswitches show Bank Up/Down + preset selection, scribble strips show preset name + number
- Snapshot mode: footswitches recall 8 snapshots, scribble strips show snapshot name
- Combo mode: first 4 stomp + bank nav + preset select + global bypass
- ScribbleStrip LCD component with LED indicator and double-tap support
- Double-tap gesture hook for secondary actions (tuner, snapshot save, etc.)
- FootswitchBar container with 8 capacitive-touch footswitch buttons and LED rings
- usePedalState hook (WebSocket + API polling, ported from frontend-react/App.jsx)
- Dark pedal theme CSS (Helix-inspired) with responsive mobile layout
- Full App.tsx rewrite with status bar, footswitch bar, tab bar, and all screens
2026-06-12 19:22:50 -04:00

32 lines
889 B
CSS

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@300;400;500;600&display=swap');
@import "tailwindcss";
@custom-variant dark (&:is(.dark *));
:root {
--background: #0A0A0C;
--foreground: #F0EDE6;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--radius-sm: calc(0.625rem - 4px);
--radius-md: calc(0.625rem - 2px);
--radius-lg: 0.625rem;
--radius-xl: calc(0.625rem + 4px);
}
@layer base {
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body {
background: var(--background);
color: var(--foreground);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
user-select: none;
-webkit-user-select: none;
overflow: hidden;
}
input, textarea, select { font-family: inherit; }
}