/** * Toggle Track Skin — Circuit Board * * Exposed PCB aesthetic. Solder traces, component outlines, * copper connections, green soldermask, silkscreen labels. * Think DIY electronics, garage-built gear. * * @package ToggleTrack * @since 1.0.0 */ /* ---------- Color Palette ---------- */ .tt-skin-circuit-board { --tt-bg: #1a4d2e; --tt-text: #d4a574; --tt-active: #ffffff; --tt-controls: #164428; --tt-progress: #123820; --tt-accent: #00ff44; } /* ---------- Container — Green Soldermask ---------- */ .tt-skin-circuit-board { border-radius: 3px; border: 2px solid #0d3018; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(0, 255, 68, 0.05); /* Soldermask texture with subtle grid */ background: repeating-linear-gradient( 0deg, transparent 0px, transparent 19px, rgba(0, 255, 68, 0.03) 19px, rgba(0, 255, 68, 0.03) 20px ), repeating-linear-gradient( 90deg, transparent 0px, transparent 19px, rgba(0, 255, 68, 0.03) 19px, rgba(0, 255, 68, 0.03) 20px ), linear-gradient( 180deg, #1e5a34 0%, #1a4d2e 30%, #164428 100% ); font-family: "Courier New", "Lucida Console", Monaco, monospace; } /* Copper trace lines — top and bottom borders */ .tt-skin-circuit-board::before { content: ""; position: absolute; top: 6px; left: 20px; right: 20px; height: 1px; background: repeating-linear-gradient( 90deg, #d4a574 0px, #d4a574 15px, transparent 15px, transparent 20px ); opacity: 0.3; z-index: 1; pointer-events: none; } .tt-skin-circuit-board::after { content: ""; position: absolute; bottom: 6px; left: 20px; right: 20px; height: 1px; background: repeating-linear-gradient( 90deg, #d4a574 0px, #d4a574 10px, transparent 10px, transparent 18px ); opacity: 0.3; z-index: 1; pointer-events: none; } .tt-skin-circuit-board .tt-wrapper { position: relative; z-index: 2; padding: 18px; } /* ---------- Track Buttons — Component Footprints ---------- */ .tt-skin-circuit-board .tt-track-btn { border-radius: 1px; font-weight: 400; text-transform: uppercase; font-size: 0.75em; letter-spacing: 0.08em; /* Silkscreen component outline */ border: 1px solid rgba(255, 255, 255, 0.2); /* Solder points at corners */ box-shadow: -3px -3px 0 -2px rgba(212, 165, 116, 0.4), 3px -3px 0 -2px rgba(212, 165, 116, 0.4), -3px 3px 0 -2px rgba(212, 165, 116, 0.4), 3px 3px 0 -2px rgba(212, 165, 116, 0.4); } .tt-skin-circuit-board .tt-track-btn:hover { background: #1e5a34; border-color: rgba(255, 255, 255, 0.3); } .tt-skin-circuit-board .tt-track-btn.tt-active { border-color: rgba(0, 255, 68, 0.5); box-shadow: 0 0 4px rgba(0, 255, 68, 0.2), -3px -3px 0 -2px rgba(212, 165, 116, 0.5), 3px -3px 0 -2px rgba(212, 165, 116, 0.5), -3px 3px 0 -2px rgba(212, 165, 116, 0.5), 3px 3px 0 -2px rgba(212, 165, 116, 0.5); } /* ---------- Play Button — IC Chip ---------- */ .tt-skin-circuit-board .tt-play-btn { border-radius: 1px; border: 1px solid rgba(255, 255, 255, 0.25); background: #0d3018; /* IC chip notch */ box-shadow: inset 0 -2px 0 rgba(0, 255, 68, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3); } .tt-skin-circuit-board .tt-play-btn:hover { border-color: rgba(0, 255, 68, 0.4); } .tt-skin-circuit-board .tt-play-btn:active { box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.4); } /* ---------- Progress Bar — Copper Trace ---------- */ .tt-skin-circuit-board .tt-progress-bar { height: 6px; border-radius: 0; border: 1px solid rgba(212, 165, 116, 0.25); background: #0d3018; } .tt-skin-circuit-board .tt-progress-fill { border-radius: 0; background: linear-gradient( 180deg, #33ff66 0%, #00ff44 50%, #00cc33 100% ); box-shadow: 0 0 4px rgba(0, 255, 68, 0.3); } /* ---------- Time Display — Silkscreen Print ---------- */ .tt-skin-circuit-board .tt-time { font-size: 0.75em; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.6); } /* ---------- Control Buttons — SMD Components ---------- */ .tt-skin-circuit-board .tt-loop-btn, .tt-skin-circuit-board .tt-loudness-btn, .tt-skin-circuit-board .tt-ab-btn { border-radius: 1px; font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.08em; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: -2px -2px 0 -1px rgba(212, 165, 116, 0.3), 2px -2px 0 -1px rgba(212, 165, 116, 0.3), -2px 2px 0 -1px rgba(212, 165, 116, 0.3), 2px 2px 0 -1px rgba(212, 165, 116, 0.3); } .tt-skin-circuit-board .tt-loop-btn:hover, .tt-skin-circuit-board .tt-loudness-btn:hover, .tt-skin-circuit-board .tt-ab-btn:hover { background: #1e5a34; } .tt-skin-circuit-board .tt-loop-btn.tt-active, .tt-skin-circuit-board .tt-loudness-btn.tt-active, .tt-skin-circuit-board .tt-ab-btn.tt-active { border-color: rgba(0, 255, 68, 0.5); box-shadow: 0 0 4px rgba(0, 255, 68, 0.2), -2px -2px 0 -1px rgba(212, 165, 116, 0.4), 2px -2px 0 -1px rgba(212, 165, 116, 0.4), -2px 2px 0 -1px rgba(212, 165, 116, 0.4), 2px 2px 0 -1px rgba(212, 165, 116, 0.4); } /* ---------- Volume / Speed — Potentiometer Labels ---------- */ .tt-skin-circuit-board .tt-volume-label, .tt-skin-circuit-board .tt-speed-label { text-transform: uppercase; font-size: 0.6em; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.45); } /* ---------- Meter — LED Display ---------- */ .tt-skin-circuit-board .tt-meter { border: 1px solid rgba(212, 165, 116, 0.2); background: #0a2816; } .tt-skin-circuit-board .tt-meter-label { text-transform: uppercase; font-size: 0.55em; letter-spacing: 0.08em; color: rgba(0, 255, 68, 0.5); } /* ---------- Copper Trace Connections ---------- */ .tt-skin-circuit-board .tt-track-selector { border-bottom: 1px dashed rgba(212, 165, 116, 0.2); padding-bottom: 12px; } .tt-skin-circuit-board .tt-extras { border-top: 1px dashed rgba(212, 165, 116, 0.2); padding-top: 12px; } /* ---------- Loading Overlay ---------- */ .tt-skin-circuit-board .tt-loading { background: rgba(13, 48, 24, 0.95); } .tt-skin-circuit-board .tt-loading-text { color: #00ff44; text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.75em; } .tt-skin-circuit-board .tt-loading-fill { box-shadow: 0 0 6px rgba(0, 255, 68, 0.4); } /* ---------- Loop Markers ---------- */ .tt-skin-circuit-board .tt-loop-marker { box-shadow: 0 0 3px rgba(0, 255, 68, 0.5); } /* ---------- Focus Styles ---------- */ .tt-skin-circuit-board *:focus-visible { outline-color: #00ff44; }