X-Git-Url: https://git.r.bdr.sh/rbdr/lissajous/blobdiff_plain/6a87c2530865b5e18f70b71b456f43e72702c1c6..32e2eed2a003c9be98f344ae70248139162b6969:/style.css

diff --git a/style.css b/style.css
index 17fa12e..2cda519 100644
--- 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;
@@ -99,6 +122,11 @@ input[type="range"]:focus::-webkit-slider-thumb {
   display: inline-block;
 }
 
+.slider::before {
+  position: relative;
+  left: 16px;
+}
+
 .slider {
   margin: 4px 0;
   position: relative;
@@ -106,11 +134,10 @@ input[type="range"]:focus::-webkit-slider-thumb {
 
 label {
   display: inline-block;
+  width: 16px;
   position: relative;
-  width: 0;
-  height: 16px;
-  right: 32px;
-  top: -5px;
+  left: -16px;
+  top: -2px;
 }
 
 .slider.lineLength::before {
@@ -168,3 +195,11 @@ label {
 .slider.amplitude::after {
   mask-image: url('/images/ha.svg');
 }
+
+.slider.phase::before {
+  mask-image: url('/images/unphased.svg');
+}
+
+.slider.phase::after {
+  mask-image: url('/images/phased.svg');
+}