diff --git a/src/styles/components/settings.css b/src/styles/components/settings.css index cfac8187..8838a7e7 100644 --- a/src/styles/components/settings.css +++ b/src/styles/components/settings.css @@ -12,4 +12,88 @@ .settings-footer .btn-primary:hover:not(:disabled) { background: rgb(79 70 229); /* indigo-600 */ } .settings-footer .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; } +/* Setting groups */ +.setting-group { margin-bottom: 1.5rem; } +.setting-label { display: block; margin-bottom: 0.75rem; font-size: 0.9rem; font-weight: 500; color: rgb(212 212 216); /* zinc-300 */ } + +/* Zap splits preset buttons */ +.zap-preset-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; } +.zap-preset-btn { + padding: 0.625rem 1.25rem; + background: rgb(39 39 42); /* zinc-800 */ + border: 1px solid rgb(82 82 91); /* zinc-600 */ + border-radius: 6px; + color: rgb(212 212 216); /* zinc-300 */ + font-size: 0.9rem; + cursor: pointer; + transition: all 0.2s ease; + font-weight: 500; +} +.zap-preset-btn:hover { + background: rgb(63 63 70); /* zinc-700 */ + border-color: rgb(99 102 241); /* indigo-500 */ + color: rgb(255 255 255); /* white */ +} +.zap-preset-btn.active { + background: rgb(99 102 241); /* indigo-500 */ + border-color: rgb(99 102 241); /* indigo-500 */ + color: rgb(255 255 255); /* white */ +} + +/* Zap split sliders */ +.zap-split-container { width: 100%; } +.zap-split-labels { + display: flex; + justify-content: space-between; + margin-bottom: 0.5rem; + font-size: 0.85rem; + color: rgb(161 161 170); /* zinc-400 */ +} +.zap-split-label { font-weight: 500; } +.zap-split-slider { + width: 100%; + height: 8px; + border-radius: 4px; + background: rgb(39 39 42); /* zinc-800 */ + outline: none; + -webkit-appearance: none; +} +.zap-split-slider::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 20px; + height: 20px; + border-radius: 50%; + background: rgb(99 102 241); /* indigo-500 */ + cursor: pointer; + transition: all 0.2s ease; +} +.zap-split-slider::-webkit-slider-thumb:hover { + background: rgb(79 70 229); /* indigo-600 */ + transform: scale(1.1); +} +.zap-split-slider::-moz-range-thumb { + width: 20px; + height: 20px; + border-radius: 50%; + background: rgb(99 102 241); /* indigo-500 */ + cursor: pointer; + border: none; + transition: all 0.2s ease; +} +.zap-split-slider::-moz-range-thumb:hover { + background: rgb(79 70 229); /* indigo-600 */ + transform: scale(1.1); +} +.zap-split-description { + margin-top: 1.5rem; + padding: 1rem; + background: rgb(39 39 42); /* zinc-800 */ + border: 1px solid rgb(63 63 70); /* zinc-700 */ + border-radius: 6px; + font-size: 0.875rem; + line-height: 1.5; + color: rgb(161 161 170); /* zinc-400 */ +} +