Add a few comments

[rbdr/lissajous] / style.css

* {
  padding: 0;
  margin: 0;
}

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');
}