/* --- SUBTLE DARK MODE THEME COLORS (TEAL/GREEN ACCENT) --- */ :root { --dark-bg: #1e1e1e; /* Almost black */ --dark-card: #282828; /* Dark gray panel background */ --dark-inner: #363636; /* Medium dark gray for recessed sections */ --light-text: #e0e0e0; /* Light gray text */ --subtle-text: #a0a0a0; /* Subtle gray text */ /* Subtle Accents: Teal (Primary), Lime (Secondary), Yellow (Tertiary) */ --accent-3: #10b981; /* Teal-500/Emerald (Primary Click/Main Accents) */ --accent-2: #84cc16; /* Lime-500 (Secondary Click/Highlight) */ --accent-1: #fbbf24; /* Amber-400 (Tertiary Click/Weak Accent) */ --main-highlight: #0d9488; /* Teal-700 (BPM/Title Accent) */ --start-btn-stop: #dc2626; /* Red-600 for the STOP button */ /* Font */ --main-font: 'IBM Plex Mono', monospace; } /* --- FIX FOR SMOOTH SCROLLING --- */ body { /* CORE FIX: Remove fixed height and hidden overflow to allow native scrolling on the body */ /* Remove 'flex items-center justify-center' class from the tag in index.html for this to work */ min-height: 100vh; overflow-y: scroll; /* NEW FIX: Explicitly hide horizontal overflow to prevent metronome panel from being pushed off center */ overflow-x: hidden; display: block; /* Ensures natural flow from the top */ font-family: var(--main-font); background-color: var(--dark-bg); color: var(--light-text); transition: all 0.2s ease-in-out; -webkit-user-select: none; -moz-user-select: none; user-select: none; touch-action: manipulation; font-size: 0.9rem; } /* --- END FIX FOR SMOOTH SCROLLING --- */ /* Ensure elements use the specified font */ h1, h2, h3, button, input { font-family: var(--main-font); } /* Style for the main metronome control card */ #metronome-panel { /* Base styles applied to all screen sizes (Mobile First) */ color: var(--light-text); /* MODIFIED: Reduced padding for mobile */ padding-top: 0.5rem; padding-bottom: 0.5rem; margin-left: auto; margin-right: auto; /* NEW: Default to full-screen, background-less, border-less, shadow-less look (Mobile First) */ background-color: var(--dark-bg); box-shadow: none; border: none; } /* Re-apply the wrapper styles for larger screens (sm breakpoint and up, matching Tailwind's default) */ @media (min-width: 640px) { #metronome-panel { /* FIXED: Restored original top/bottom padding for larger screens */ padding-top: 1.5rem; padding-bottom: 1.5rem; background-color: var(--dark-card); /* Re-apply dark card background */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); /* Re-apply shadow */ border: 1px solid #444; /* Re-apply border */ } } /* Adjust title to the new highlight color */ #metronome-panel h1 { color: var(--main-highlight); } /* NEW: Session Timer Styling (Matches h1) */ #session-timer { font-family: var(--main-font); color: var(--main-highlight); font-size: 1.25rem; font-weight: 400; white-space: nowrap; } /* --- FIX: New selector for inner recessed sections (BPM area, Grid, Bar Drop area) --- */ .inner-panel-section { background-color: var(--dark-inner); box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5); border: 1px solid #444; /* FIX: Added margin bottom for spacing below section */ margin-bottom: 1rem; } /* --- END FIX --- */ /* BPM Display Value (KEEPING GLOW) */ #bpm-display-value, #bpm-manual-input { color: var(--accent-3); /* GLOW RESTORED: 5px blur radius */ text-shadow: 0 0 5px rgba(16, 185, 129, 0.4); } /* Bar Display Elements (REMOVING GLOW) */ #a-bar-display, #b-bar-display { color: var(--accent-3); /* Base color is accent-3, overridden by accent-2 for B */ text-shadow: none; /* Explicitly kill the glow */ } /* Manual BPM Input */ #bpm-manual-input { background-color: #000; border-color: var(--accent-3); color: var(--accent-3); -webkit-appearance: none; -moz-appearance: textfield; appearance: none; margin: 0; } /* --- ADDED BACK: ORIGINAL STYLING FOR SMALLER BUTTONS (USED BY INFO BUTTON) --- */ .settings-btn { font-size: 0.75rem; /* The small font size */ font-weight: 700; border-radius: 0.5rem; transition-property: all; transition-duration: 150ms; background-color: #3d3d3d; color: var(--light-text); border: 1px solid #444; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); touch-action: manipulation; height: auto; /* Crucially allows height to be set by padding/content */ box-sizing: border-box; /* The specific padding (py-1 px-3) is applied in index.html */ } .settings-btn:hover { background-color: #555; } .settings-btn:active { background-color: #666; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5); } /* --- END ADDED BACK --- */ /* --- MODIFIED: General Button Styles (Standardized 3rem height) --- */ /* Targeting by ID/Class *excluding* the generic .settings-btn to keep Info small */ #clear-btn, #default-btn, #bar-drop-reset-btn, #count-in-btn, #settings-btn, /* <--- Target the main Settings button ID */ .mode-btn, .preset-btn { /* Standardized Size: REDUCED TO 2.5rem height (40px) */ height: 2.5rem; padding-top: 0.3rem; /* Adjusted padding for visual balance */ padding-bottom: 0.3rem; /* Adjusted padding for visual balance */ font-size: 0.875rem; /* text-sm, matching .preset-btn */ font-weight: 700; /* Standardized Look */ border-radius: 0.5rem; transition-property: all; transition-duration: 150ms; background-color: #3d3d3d; color: var(--light-text); border: 1px solid #444; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); touch-action: manipulation; box-sizing: border-box; /* Include border/padding in height calculation */ } /* Hover/Active states for the standardized group */ #clear-btn:hover, #default-btn:hover, #count-in-btn:hover, #settings-btn:hover, .mode-btn:hover, .preset-btn:hover { background-color: #555; } #clear-btn:active, #default-btn:active, #count-in-btn:active, #settings-btn:active, .mode-btn:active, .preset-btn:active { background-color: #666; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5); } /* --- END MODIFIED: General Button Styles --- */ /* --- ENHANCEMENT: Larger Tempo Buttons for Touch Displays (Applied to .tempo-btn) --- */ .tempo-btn { font-size: 1.1rem; /* Increased font size for better visibility */ padding-top: 0.75rem; /* Increased vertical padding */ padding-bottom: 0.75rem;/* Increased vertical padding */ height: auto; /* Inherit general button styles */ font-weight: 700; border-radius: 0.5rem; transition-property: all; transition-duration: 150ms; background-color: #3d3d3d; color: var(--light-text); border: 1px solid #444; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); touch-action: manipulation; } .tempo-btn:hover { background-color: #555; } .tempo-btn:active { background-color: #666; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5); } /* --- END ENHANCEMENT --- */ /* Accent Buttons: Default Pattern, +1 Bar Drop, Count-In (using the main highlight) */ #default-btn, #bar-drop-increase-btn, #count-in-btn { background-color: var(--main-highlight); /* Uses Teal-700 highlight */ color: var(--dark-bg); } #default-btn:hover, #bar-drop-increase-btn:hover, #count-in-btn:hover { background-color: #17a297; } /* --- NEW STYLES FOR MODE BUTTONS & PATTERN BUTTONS (FIXED INACTIVE VISIBILITY) --- */ /* 1. Base/Inactive State for Mode and Pattern Buttons (Matches Clear/Tempo) */ .mode-btn { background-color: #3d3d3d !important; color: var(--light-text) !important; font-size: 0.875rem; /* Ensure consistency with new size */ font-weight: 700; border: 1px solid #444; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .mode-btn:hover { background-color: #555 !important; } /* 2. Mode Button Active State (Retained logic using main-highlight) */ .mode-btn.mode-btn-active { background-color: var(--main-highlight) !important; /* Teal-700 */ color: var(--dark-bg) !important; /* Dark text */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .mode-btn.mode-btn-active:hover { background-color: #17a297 !important; } /* --- REFACTORED START/STOP Button --- */ #start-stop-btn { font-size: 1.1rem; } #start-stop-btn.is-stopped { background-color: var(--accent-3); color: var(--dark-bg); } #start-stop-btn.is-stopped:hover { background-color: #20c997; } #start-stop-btn.is-playing { background-color: var(--start-btn-stop) !important; color: var(--light-text) !important; } #start-stop-btn.is-playing:hover { filter: brightness(1.1); } /* --- END REFACTOR --- */ /* Rhythm Grid & Square Styling */ #rhythm-grid { box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7); } .grid-square { box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); transition: background-color 0.1s ease-out, transform 0.05s; cursor: pointer; border: 1px solid #3d3d3d; } /* State Mapping (0=Off, 1=Tertiary, 2=Secondary, 3=Primary) */ .square-accent-3 { background-color: var(--accent-3); /* Teal */ } .square-accent-2 { background-color: var(--accent-2); /* Lime */ } .square-accent-1 { background-color: var(--accent-1); /* Amber */ } .square-accent-0 { /* Off/Muted - Darkest state */ background-color: #1a1a1a; } /* --- OPTIMIZED: Visual indicator for the currently playing step --- */ .is-playing { /* REPLACED box-shadow with outline for better render performance */ outline: 3px solid var(--accent-3); outline-offset: 2px; border-color: #fff; transform: scale(1.05); } /* Visual indicator for the currently playing step during a SILENT bar */ .is-silent-playing { /* box-shadow is fine here as it's less "glowy" */ box-shadow: 0 0 10px 3px #555, inset 0 0 3px #333; border-color: #777; } /* Status Message and Info Button Area */ .flex.justify-between.items-center.p-3.rounded-lg.border { background-color: var(--dark-inner); border-color: #444; } #status-message { color: var(--accent-3); font-size: 0.8rem; } /* Modal Styling */ #settings-modal > div, #info-modal > div { background-color: var(--dark-card); color: var(--light-text); border: 1px solid var(--accent-3); } #settings-modal h2, #info-modal h2 { color: var(--main-highlight); } #settings-modal #close-modal-btn, #info-modal #close-info-modal-btn { color: #999; } #settings-controls .bg-gray-100 { background-color: #3d3d3d !important; /* Panel background */ } /* --- FIX FOR LEGIBILITY IN SETTINGS MODAL (Requested fix) --- */ /* Ensure ALL text/labels within the settings controls are bright and visible */ #settings-controls .text-gray-800, #settings-controls .text-gray-700, #settings-controls .text-gray-300 { color: var(--light-text) !important; } /* Ensure the H3 title (Primary, Secondary, Tertiary) is bright */ #settings-controls h3 { color: white !important; } /* Also fix the text color in the volume/frequency value spans */ #settings-controls span[id$="-val"] { color: var(--accent-3) !important; } #settings-controls .border-l-4 { border-left-color: var(--accent-3) !important; /* Use Primary accent for ALL borders */ } /* Custom slider track and thumb */ input[type=range] { background: var(--dark-inner); /* Darker track */ } input[type=range]::-webkit-slider-thumb { background: var(--accent-3); } input[type=range]::-moz-range-thumb { background: var(--accent-3); } /* Select inputs for dark mode */ #settings-controls select { /* FIX: Use dark background and light text for legibility in dropdowns */ background-color: var(--dark-inner); border-color: #555; color: var(--light-text); font-family: var(--main-font); } /* Accent text in info modal */ #info-content strong { color: var(--light-text); } .text-primary-accent { color: var(--accent-3); } .text-secondary-accent { color: var(--accent-2); } .text-tertiary-accent { color: var(--accent-1); } .text-off-accent { color: var(--subtle-text); } /* --- RHYTHM CYCLE BUTTON STYLING (MODIFIED FOR A/B) --- */ /* --- Primary Accent Buttons (Increase Play Bars A) --- */ #a-bar-increase-btn { /* Teal/Emerald Background (Primary Accent) */ background-color: var(--accent-3); color: var(--dark-bg); /* Use dark text for contrast on bright background */ font-size: 1.1rem !important; } #a-bar-increase-btn:hover { filter: brightness(1.1); } #a-bar-increase-btn:active { filter: brightness(0.9); } /* --- Secondary Accent Buttons (Increase Play Bars B) --- */ #b-bar-increase-btn { /* Lime Background (Secondary Accent) */ background-color: var(--accent-2); color: var(--dark-bg); /* Use dark text for contrast on bright background */ font-size: 1.1rem !important; } #b-bar-increase-btn:hover { filter: brightness(1.1); } #b-bar-increase-btn:active { filter: brightness(0.9); } /* --- Reset Buttons (Subdued/Secondary Action) --- */ #a-bar-reset-btn, #b-bar-reset-btn { /* Darker, Subdued Background */ background-color: var(--dark-inner); color: var(--subtle-text); border: 1px solid #444; /* Subtle border for definition */ } #a-bar-reset-btn:hover, #b-bar-reset-btn:hover { background-color: #444; /* Slightly lighter on hover */ color: var(--light-text); } /* --- Display Text Colors (MODIFIED to act as Pattern Buttons) --- */ /* Play Bar A Count (Primary Accent) */ #a-bar-display { color: var(--accent-3); /* NEW: Button/Border Styling */ cursor: pointer; /* 1. REMOVED PERMANENT BORDER: Let .editor-active handle the double lines */ border-left: none; border-right: none; border-top: none; border-bottom: none; padding: 0.25rem 0; transition: all 0.15s ease-in-out; background-color: transparent; } /* Play Bar B Count (Secondary Accent) */ #b-bar-display { color: var(--accent-2); /* NEW: Button/Border Styling */ cursor: pointer; /* 1. REMOVED PERMANENT BORDER: Let .editor-active handle the double lines */ border-left: none; border-right: none; border-top: none; border-bottom: none; padding: 0.25rem 0; transition: all 0.15s ease-in-out; background-color: transparent; } /* NEW: Inactive (Greyed Out) state for B-Bar Button (Kept as is) */ #b-bar-display.is-inactive { color: var(--subtle-text) !important; border-left-color: var(--subtle-text) !important; border-right-color: var(--subtle-text) !important; text-shadow: none !important; } /* NEW: Active Editor Styling (MODIFIED to add double border and remove glow) */ #a-bar-display.editor-active { background-color: transparent; box-shadow: none; text-shadow: none !important; filter: none !important; /* 2. RE-ADDED DOUBLE LINES to denote activity */ border-left: 6px double var(--accent-3); border-right: 6px double var(--accent-3); } #b-bar-display.editor-active { background-color: transparent; box-shadow: none; text-shadow: none !important; filter: none !important; /* 2. RE-ADDED DOUBLE LINES to denote activity */ border-left: 6px double var(--accent-2); border-right: 6px double var(--accent-2); } /* NEW: Hover (when not active) */ #a-bar-display:not(.editor-active):hover, #b-bar-display:not(.editor-active):hover { background-color: rgba(255, 255, 255, 0.05); } /* --- Count-In Button Default Style (Count: 0) --- */ #count-in-btn { /* Base dark color, similar to Clear/Default/Mode Inactive buttons */ background-color: var(--dark-inner); color: var(--subtle-text); /* Set a transparent 2px border for size consistency */ border: 2px solid transparent; } #count-in-btn:hover { background-color: #444; /* Slightly lighter on hover */ color: var(--light-text); } /* --- Active/Engaged Count-In Button Style (Count: 1 or 2) --- */ .count-in-active { /* FULFILLS REQUEST: Background same as Default button (dark-inner) */ background-color: var(--dark-inner) !important; /* Use primary accent for text and border for engagement feedback */ color: var(--accent-3) !important; border: 2px solid var(--accent-3) !important; /* Add a subtle glow to make the engaged state pop */ box-shadow: 0 0 8px rgba(16, 185, 129, 0.5); } .count-in-active:hover { background-color: #444 !important; /* Slightly lighter dark background on hover */ box-shadow: 0 0 12px rgba(16, 185, 129, 0.7); } .count-in-active:active { background-color: var(--dark-inner) !important; box-shadow: none; } /* --- NEW STYLE FOR TAP TEMPO BUTTON (Square, simplified style) --- */ #tap-tempo-btn { /* FULFILLED REQUEST: Square, No Shadow, Darker Style */ background-color: #3d3d3d; /* Dark Gray (Matches tempo-btn) */ color: var(--light-text); /* Overrides the w-16 h-16 classes from index.html, keeping size */ width: 4rem; height: 4rem; border-radius: 0.5rem; /* Subtle roundness */ box-shadow: none; /* No shadow */ border: 1px solid #444; touch-action: manipulation; transition-property: all; transition-duration: 150ms; } #tap-tempo-btn:hover { background-color: #555; /* Match general button hover */ } #tap-tempo-btn:active { background-color: #666; /* Match general button active */ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5); transform: none; } /* --- NEW STYLE: Visually Grey Out Accent Buttons (e.g., +1 Bar B when count is 0) --- */ .is-disabled-accent { /* Base Inactive Look */ background-color: var(--dark-inner) !important; color: var(--subtle-text) !important; /* MODIFIED: Add a visible, subtle border to define the button shape */ border: 1px solid var(--subtle-text); /* Ensure no accent color shadows conflict */ box-shadow: none !important; cursor: default; } /* Hover state for the inactive button */ .is-disabled-accent:hover { filter: none !important; /* Slightly lighter dark background on hover */ background-color: #444 !important; /* Keep the text subtle */ color: var(--subtle-text) !important; } /* Pressed state for the inactive button (MODIFIED) */ .is-disabled-accent:active { /* Lighter background gray (like the standard button active state) */ background-color: #666 !important; /* Dark text color for contrast against the lighter gray background */ color: var(--dark-bg) !important; /* Give it an inset shadow to look "pressed" */ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5) !important; /* Ensure no filter */ filter: none !important; } /* --- NEW PRESET BUTTON STYLES (Source of standardization) --- */ .preset-btn { font-size: 0.875rem; /* text-sm */ font-weight: 700; /* font-bold */ border-radius: 0.5rem; /* rounded-lg */ transition-property: all; transition-duration: 150ms; /* REDUCED PADDING to match new standardized group */ padding-top: 0.3rem; padding-bottom: 0.3rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); touch-action: manipulation; /* The height that all other buttons are now standardized against */ height: 2.5rem; /* REDUCED HEIGHT */ box-sizing: border-box; /* Include border in height */ } /* Style for the "active" button we are working on (Preset 1) */ .preset-btn.preset-btn-active { background-color: var(--dark-inner); color: var(--light-text); border: 1px solid #444; } .preset-btn.preset-btn-active:hover { background-color: #444; } .preset-btn.preset-btn-active:active { background-color: #555; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5); } /* Style for the grey "placeholder" slots (Presets 2, 3, 4) */ .preset-btn.preset-btn-placeholder { background-color: transparent; border: 1px dashed var(--subtle-text); color: var(--subtle-text); box-shadow: none; } .preset-btn.preset-btn-placeholder:hover { background-color: rgba(255, 255, 255, 0.05); color: var(--light-text); border-style: solid; } .preset-btn.preset-btn-placeholder:active { background-color: var(--dark-inner); border-style: solid; }