.filter-group {
display: grid;
grid-template-columns: 80px 1fr 40px;
align-items: center;
gap: 8px;
padding: 6px 0;
border-bottom: 1px solid #2a2a4a;
}
.filter-group label {
font-size: 12px;
color: #a0a0b0;
}
.filter-group span {
text-align: right;
font-size: 12px;
font-variant-numeric: tabular-nums;
/* Fixed-width numbers so "100" and "8"
take the same width — no jittering */
}
Strip the browser default and rebuild:
input[type="range"] {
-webkit-appearance: none;
appearance: none;
background: #2a2a4a;
height: 4px;
border-radius: 2px;
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--accent-color, #00b4d8);
cursor: pointer;
}
Define the entire color system in :root:
:root {
--bg-primary: #0a0a1a;
--bg-secondary: #1a1a2e;
--bg-tertiary: #16213e;
--text-primary: #e0e0e0;
--text-secondary: #a0a0b0;
--accent: #00b4d8;
--border: #2a2a4a;
--radius: 6px;
}
Then use everywhere:
background-color: var(--bg-secondary);
Create a specificity conflict and resolve it:
/* Rule 1: class selector — specificity 0,0,1,0 */
.tool-btn { color: red; }
/* Rule 2: id selector — specificity 0,1,0,0 */
#upload-btn { color: blue; }
/* Rule 3: element selector — specificity 0,0,0,1 */
button { color: green; }
/* Which color wins for #upload-btn? → BLUE (highest specificity) */
| Selector | Score | Example |
|---|---|---|
| Element | 0,0,0,1 | button |
| Class | 0,0,1,0 | .tool-btn |
| ID | 0,1,0,0 | #upload-btn |
| Inline | 1,0,0,0 | style="..." |
Style it with an accent color and hover state:
.reset-btn {
width: 100%;
padding: 8px;
margin-top: 16px;
background-color: transparent;
color: var(--accent);
border: 1px solid var(--accent);
border-radius: var(--radius);
cursor: pointer;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.2s ease;
}
.reset-btn:hover {
background-color: var(--accent);
color: var(--bg-primary);
}
git switch -c design/PIXELCRAFT-005-settings-controls
git add src/styles/
git commit -m "Style settings controls and implement CSS variables (PIXELCRAFT-005)"
git push origin design/PIXELCRAFT-005-settings-controls
# PR → Review → Merge → Close ticket ✅
CSS Custom Properties are a form of indirection.
Instead of hardcoding a value, you reference a name that resolves to a value. Indirection is perhaps THE most powerful concept in CS.