Adjust the frequency

[rbdr/lissajous] / style.css

diff --git a/style.css b/style.css
index d961e981fec36dfea4426a09f9c1d2c3b56a9782..6871f4c9a7c6aaf0b3bcba70c8d69731e785ba08 100644 (file)
--- a/style.css
+++ b/style.css
@@ -11,7 +11,30 @@ body {
   overflow: hidden;
 }
 
+@media (orientation: landscape) {
+  body {
+    padding-top: env(safe-area-inset-top);
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}
+
+a {
+  color: #fff;
+}
+
+footer {
+  position: fixed;
+  padding: 2px 8px;
+  bottom: 0;
+  min-height: 16px;
+  max-height: 32px;
+}
+
 #settings {
+  overflow-y: auto;
+  max-height: 100%;
   position: absolute;
   top: 5px;
   right: 5px;
@@ -66,6 +89,7 @@ input[type="range"]::-webkit-slider-thumb {
 }
 
 input[type="range"]::-moz-range-thumb {
+ -webkit-appearance: none;
  height: 16px;
  width: 16px;
  background-color: #80FFCC;
@@ -73,6 +97,21 @@ input[type="range"]::-moz-range-thumb {
  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 {