diff --git a/styles/launcher.css b/styles/launcher.css index 9728485..8a58328 100644 --- a/styles/launcher.css +++ b/styles/launcher.css @@ -192,21 +192,13 @@ } #wallpaper-icons:selected { - background-color: var(--surface-bright); - border-radius: 0px; -} - -#wallpaper-icons:hover { - background-color: var(--surface-bright); + background-color: var(--outline); border-radius: 0px; } #scheme-dropdown { - background-color: var(--surface-container); + background-color: var(--surface); padding: 8px; - border-radius: 11px; - margin-top: 12px; - margin-bottom: 12px; } #scheme-dropdown > * > * { @@ -222,18 +214,24 @@ background-color: var(--surface-bright); } +#search-entry-walls { + min-width: 512px; +} + /* Customize the overall switch appearance */ -#matugen-switcher { +#matugen-switcher, +#dnd-switch { min-width: 40px; min-height: 20px; - background-color: var(--surface-variant); + background-color: var(--surface); border-radius: 15px; padding: 2px; transition: background-color 0.3s ease; } /* Style the switch's slider */ -#matugen-switcher slider { +#matugen-switcher slider, +#dnd-switch slider { background-color: var(--primary); border-radius: 16px; min-width: 20px; @@ -244,17 +242,20 @@ } /* When the switch is active (checked) */ -#matugen-switcher:checked { +#matugen-switcher:checked, +#dnd-switch:checked { background-color: var(--primary); } /* Optional: additional styling for the slider when active */ -#matugen-switcher:checked slider { - background-color: var(--surface); +#matugen-switcher:checked slider, +#dnd-switch:checked slider { + background-color: var(--shadow); } -#matugen-switcher:checked image { - color: var(--surface); +#matugen-switcher:checked image, +#dnd-switch:checked image { + color: var(--shadow); } #mat-label { @@ -262,6 +263,63 @@ margin-left: 4px; } +#custom-color-selector-box { + background-color: var(--surface); + border-radius: 20px; + padding: 8px; +} + +#hue-slider { + margin: 0 24px; +} + +#hue-slider trough { + background-image: linear-gradient( + to right, + #ff0000, + #ffff00, + #00ff00, + #00ffff, + #0000ff, + #ff00ff, + #ff0000 + ); + border-radius: 8px; + min-height: 8px; +} + +#hue-slider slider { + min-height: 16px; + min-width: 8px; + margin: -10px 0; + background-color: var(--primary); + box-shadow: 0 0 4px alpha(var(--shadow), 0.5); +} + +#apply-color-button { + background-color: var(--primary); + color: var(--shadow); + border-radius: 20px; + padding: 8px; + box-shadow: 0 0 4px alpha(var(--shadow), 0.5); +} + +#apply-color-button:hover { + background-color: var(--foreground); +} + +#apply-color-button:active { + background-color: var(--shadow); +} + +#apply-color-label { + font-size: 16px; + color: var(--shadow); +} + +#apply-color-button:active #apply-color-label { + color: var(--foreground); +} /* * ── emoji ───────────────────────────────────────────────────────────── */