Add a few comments

[rbdr/lissajous] / style.css

diff --git a/style.css b/style.css
index c389fd83422290b11da00954d19a70c77e53636a..2cda519ee74dbf857411684ed42cace5470ecc13 100644 (file)
--- a/style.css
+++ b/style.css
@@ -3,6 +3,203 @@
   margin: 0;
 }
 
-canvas, body {
+body {
+  color: #80FFCC;
   background-color: #0F261F;
+  font-family: 'IBM 3270 Narrow', 'IBM 3270', 'Andale Mono', Courier, monospace;
+  font-size: 12px;
+  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;
+}
+
+h1, h2, h3 {
+  font-weight: normal;
+}
+
+h1 {
+  font-size: 18px;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+h3 {
+  font-size: 14px;
+}
+
+input[type="range"] {
+  -webkit-appearance: none;
+  background-color: transparent;
+  height: 16px;
+  display: inline-block;
+  margin: 0 4px;
+  width: 128px;
+}
+
+input[type="range"]:focus {
+ outline: none;
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+ background: #fff;
+ height: 2px;
+}
+
+input[type="range"]::-moz-range-track {
+ background: #fff;
+ height: 2px;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ height: 16px;
+ width: 16px;
+ background-color: #80FFCC;
+ margin-top: -8px;
+ border-radius: 50%;
+}
+
+input[type="range"]::-moz-range-thumb {
+ -webkit-appearance: none;
+ height: 16px;
+ width: 16px;
+ background-color: #80FFCC;
+ margin-top: -8px;
+ 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 {
+  content: '';
+  background-color: #80FFCC;
+  height: 16px;
+  width: 16px;
+  display: inline-block;
+}
+
+.slider::before {
+  position: relative;
+  left: 16px;
+}
+
+.slider {
+  margin: 4px 0;
+  position: relative;
+}
+
+label {
+  display: inline-block;
+  width: 16px;
+  position: relative;
+  left: -16px;
+  top: -2px;
+}
+
+.slider.lineLength::before {
+  mask-image: url('/images/short.svg');
+}
+
+.slider.lineLength::after {
+  mask-image: url('/images/long.svg');
+}
+
+.slider.radius::before {
+  mask-image: url('/images/near.svg');
+}
+
+.slider.radius::after {
+  mask-image: url('/images/far.svg');
+}
+
+.slider.rotation-x::before {
+  mask-image: url('/images/no-pitch.svg');
+}
+
+.slider.rotation-x::after {
+  mask-image: url('/images/fast-pitch.svg');
+}
+
+.slider.rotation-y::before {
+  mask-image: url('/images/no-yaw.svg');
+}
+
+.slider.rotation-y::after {
+  mask-image: url('/images/fast-yaw.svg');
+}
+
+.slider.rotation-z::before {
+  mask-image: url('/images/no-roll.svg');
+}
+
+.slider.rotation-z::after {
+  mask-image: url('/images/fast-roll.svg');
+}
+
+.slider.frequency::before {
+  mask-image: url('/images/lf.svg');
+}
+
+.slider.frequency::after {
+  mask-image: url('/images/hf.svg');
+}
+
+.slider.amplitude::before {
+  mask-image: url('/images/la.svg');
+}
+
+.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');
 }