Add keyboard markers, shiftable sliders

[rbdr/lissajous] / style.css

diff --git a/style.css b/style.css
index d961e981fec36dfea4426a09f9c1d2c3b56a9782..17fa12e314b0c2f399c75dfb566ca09fac9d0497 100644 (file)
--- a/style.css
+++ b/style.css
@@ -66,6 +66,7 @@ input[type="range"]::-webkit-slider-thumb {
 }
 
 input[type="range"]::-moz-range-thumb {
 }
 
 input[type="range"]::-moz-range-thumb {

+ -webkit-appearance: none;

  height: 16px;
  width: 16px;
  background-color: #80FFCC;
  height: 16px;
  width: 16px;
  background-color: #80FFCC;


@@ -73,6 +74,21 @@ input[type="range"]::-moz-range-thumb {
  border-radius: 50%;
 }
 
  border-radius: 50%;
 }
 

+input.shifted[type="range"]::-moz-range-thumb {
+  background-color: #FFB4F0;
+}
+
+input.shifted[type="range"]::-webkit-slider-thumb {
+  background-color: #FFB4F0;
+}
+
+input[type="range"]:focus::-moz-range-thumb {
+  background-color: #FF616B;
+}
+
+input[type="range"]:focus::-webkit-slider-thumb {
+  background-color: #FF616B;
+}

 
 .slider::before,
 .slider::after {
 
 .slider::before,
 .slider::after {