1 files changed, 23 insertions, 13 deletions

diff --git a/styles/widgets.css b/styles/widgets.css
index feeeb73..987c857 100644
--- a/styles/widgets.css
+++ b/styles/widgets.css
@@ -34,7 +34,7 @@ input {
     background-color: var(--w-bg-hover);
 }
 
-.widget:active {
+.widget:active, .widget.touch {
     background-color: var(--w-bg-active);
 }
 
@@ -65,7 +65,7 @@ input {
     background-color: var(--w-bg);
 }
 
-.widget.inactive:active, .widget:disabled:active {
+.widget.inactive:active, .widget:disabled:active, .widget.inactive.touch, .widget.touch:disabled {
     background-color: var(--w-bg);
 }
 
@@ -81,13 +81,13 @@ input {
     -webkit-user-select: none;
 }
 
-.button:active {
+.button:active, .button.touch {
     transform:translate(5px, 5px);
     box-shadow: none !important;
     border:none;
 }
 
-.button.inactive:active, .button:disabled:active {
+.button.inactive:active, .button.inactive.touch, .button:disabled:active, .button.touch:disabled {
     transform: none;
     box-shadow: 1px 1px var(--w-shadow-inactive), 3px 3px var(--w-shadow-inactive), 5px 5px var(--w-shadow-inactive) !important;
     border: inherit;
@@ -160,7 +160,7 @@ input {
     background-color: var(--w-sl-fill-hover);
 }
 
-.slider:active > .fill::before {
+.slider:active > .fill::before, .slider.touch > .fill::before {
     background-color: var(--w-sl-fill-active);
     transition-duration: 0s;
 }
@@ -218,13 +218,18 @@ input {
     left: calc(-1.2 * var(--base-unit) / 2 + 100% * var(--percent));
 }
 
-.slider:active > .detail {
+.slider:active > .detail, .slider.touch > .detail {
     background-color: rgba(0, 132, 255, 1);
     color: rgba(255, 255, 255, 1);
     transition-duration: 0s;
 }
 
-.color-light:active > .detail, .color-temp:active > .detail, .color-wheel:active > .detail {
+.color-light:active > .detail,
+.color-temp:active > .detail,
+.color-wheel:active > .detail,
+.color-light.touch > .detail,
+.color-temp.touch > .detail,
+.color-wheel.touch > .detail {
     background-color: var(--detail);
     transition-duration: 0s;
 }
@@ -256,7 +261,7 @@ input {
     border-color: var(--w-cb-inactive-outline-hover);
 }
 
-.checkbox:active {
+.checkbox:active, .checkbox.touch {
     border: 7px solid var(--w-cb-inactive-outline-active);
 }
 
@@ -275,7 +280,7 @@ input {
     border-color: var(--w-cb-inactive-outline);
 }
 
-.checkbox.inactive:active, .checkbox:disabled:active {
+.checkbox.inactive:active, .checkbox:disabled:active, .checkbox.inactive.touch, .checkbox.touch:disabled {
     border: 7px solid var(--w-cb-inactive-outline);
     box-shadow: 5px 5px inset var(--w-shadow-inactive), 1px 1px var(--w-shadow-inactive), 3px 3px var(--w-shadow-inactive), 5px 5px var(--w-shadow-inactive) !important;
 }
@@ -323,7 +328,12 @@ input {
     box-shadow: 1px 1px var(--w-shadow-inactive), 3px 3px var(--w-shadow-inactive), 5px 5px var(--w-shadow-inactive);
 }
 
-.checkbox.inactive:checked:active, .checkbox.active.inactive:active, .checkbox:disabled:checked:active {
+.checkbox.inactive:checked:active,
+.checkbox.active.inactive:active,
+.checkbox:disabled:checked:active,
+.checkbox.inactive.touch:checked,
+.checkbox.active.inactive.touch,
+.checkbox:disabled.touch:checked {
     border: none;
     box-shadow: 1px 1px var(--w-shadow-inactive), 3px 3px var(--w-shadow-inactive), 5px 5px var(--w-shadow-inactive) !important;
 }
@@ -362,7 +372,7 @@ input {
     box-sizing: border-box;
 }
 
-.color-wheel:active::after {
+.color-wheel:active::after, .color-wheel.touch::after {
     transition-duration: 0s;
 }
 
@@ -387,7 +397,7 @@ input {
     left: calc(100% + 7px);
 }
 
-.color-wheel:active > .detail {
+.color-wheel:active > .detail, .color-wheel.touch > .detail {
     box-shadow: 1px 1px var(--w-shadow), 3px 3px var(--w-shadow), 5px 5px var(--w-shadow);
 }
 
@@ -423,7 +433,7 @@ input {
     transition-duration: 0.15s;
 }
 
-.color-temp:active::after, .color-light:active::after {
+.color-temp:active::after, .color-light:active::after, .color-temp.touch::after, .color-light.touch::after {
     transition-duration: 0s;
 }