diff --git a/styles.css b/styles.css index 2df3acc..8516c39 100644 --- a/styles.css +++ b/styles.css @@ -301,6 +301,97 @@ } +/* ========================================================================== + Slider + ========================================================================== */ + +.ff-slider-wrapper { + display: flex; + align-items: center; + gap: 12px; +} + +.ff-slider { + flex: 1; + height: 6px; + -webkit-appearance: none; + appearance: none; + background: var(--background-modifier-border); + border-radius: 3px; + outline: none; + cursor: pointer; +} + +.ff-slider::-webkit-slider-thumb { + -webkit-appearance: none; + width: 18px; + height: 18px; + border-radius: 50%; + background: var(--interactive-accent); + cursor: pointer; + transition: box-shadow 0.15s ease; +} + +.ff-slider::-webkit-slider-thumb:hover { + box-shadow: 0 0 0 4px color-mix(in srgb, var(--interactive-accent) 20%, transparent); +} + +.ff-slider::-moz-range-thumb { + width: 18px; + height: 18px; + border: none; + border-radius: 50%; + background: var(--interactive-accent); + cursor: pointer; +} + +.ff-slider-value { + min-width: 36px; + text-align: right; + font-size: 0.85rem; + font-weight: 500; + color: var(--text-normal); + font-variant-numeric: tabular-nums; +} + + +/* ========================================================================== + Color Picker + ========================================================================== */ + +.ff-color-wrapper { + display: flex; + align-items: center; + gap: 10px; +} + +.ff-color-input { + width: 40px; + height: 32px; + padding: 2px; + border: 1px solid var(--background-modifier-border); + border-radius: 4px; + background: var(--background-primary); + cursor: pointer; +} + +.ff-color-input::-webkit-color-swatch-wrapper { + padding: 2px; +} + +.ff-color-input::-webkit-color-swatch { + border: none; + border-radius: 2px; +} + +.ff-color-hex { + font-size: 0.85rem; + font-family: var(--font-monospace); + color: var(--text-muted); + letter-spacing: 0.03em; +} + + /* ========================================================================== Form Modal ========================================================================== */