git.r.bdr.sh - rbdr/lissajous/blob - style.css

   1 * {
   2   padding: 0;
   3   margin: 0;
   4 }
   5
   6 body {
   7   color: #80FFCC;
   8   background-color: #0F261F;
   9   font-family: 'IBM 3270 Narrow', 'IBM 3270', 'Andale Mono', Courier, monospace;
  10   font-size: 12px;
  11   overflow: hidden;
  12 }
  13
  14 @media (orientation: landscape) {
  15   body {
  16     padding-top: env(safe-area-inset-top);
  17     padding-left: env(safe-area-inset-left);
  18     padding-right: env(safe-area-inset-right);
  19     padding-bottom: env(safe-area-inset-bottom);
  20   }
  21 }
  22
  23 a {
  24   color: #fff;
  25 }
  26
  27 footer {
  28   position: fixed;
  29   padding: 2px 8px;
  30   bottom: 0;
  31   min-height: 16px;
  32   max-height: 32px;
  33 }
  34
  35 #settings {
  36   overflow-y: auto;
  37   max-height: 100%;
  38   position: absolute;
  39   top: 5px;
  40   right: 5px;
  41 }
  42
  43 h1, h2, h3 {
  44   font-weight: normal;
  45 }
  46
  47 h1 {
  48   font-size: 18px;
  49 }
  50
  51 h2 {
  52   font-size: 16px;
  53 }
  54
  55 h3 {
  56   font-size: 14px;
  57 }
  58
  59 input[type="range"] {
  60   -webkit-appearance: none;
  61   background-color: transparent;
  62   height: 16px;
  63   display: inline-block;
  64   margin: 0 4px;
  65   width: 128px;
  66 }
  67
  68 input[type="range"]:focus {
  69  outline: none;
  70 }
  71
  72 input[type="range"]::-webkit-slider-runnable-track {
  73  background: #fff;
  74  height: 2px;
  75 }
  76
  77 input[type="range"]::-moz-range-track {
  78  background: #fff;
  79  height: 2px;
  80 }
  81
  82 input[type="range"]::-webkit-slider-thumb {
  83  -webkit-appearance: none;
  84  height: 16px;
  85  width: 16px;
  86  background-color: #80FFCC;
  87  margin-top: -8px;
  88  border-radius: 50%;
  89 }
  90
  91 input[type="range"]::-moz-range-thumb {
  92  -webkit-appearance: none;
  93  height: 16px;
  94  width: 16px;
  95  background-color: #80FFCC;
  96  margin-top: -8px;
  97  border-radius: 50%;
  98 }
  99
 100 input.shifted[type="range"]::-moz-range-thumb {
 101   background-color: #FFB4F0;
 102 }
 103
 104 input.shifted[type="range"]::-webkit-slider-thumb {
 105   background-color: #FFB4F0;
 106 }
 107
 108 input[type="range"]:focus::-moz-range-thumb {
 109   background-color: #FF616B;
 110 }
 111
 112 input[type="range"]:focus::-webkit-slider-thumb {
 113   background-color: #FF616B;
 114 }
 115
 116 .slider::before,
 117 .slider::after {
 118   content: '';
 119   background-color: #80FFCC;
 120   height: 16px;
 121   width: 16px;
 122   display: inline-block;
 123 }
 124
 125 .slider {
 126   margin: 4px 0;
 127   position: relative;
 128 }
 129
 130 label {
 131   display: inline-block;
 132   position: relative;
 133   width: 0;
 134   height: 16px;
 135   right: 32px;
 136   top: -5px;
 137 }
 138
 139 .slider.lineLength::before {
 140   mask-image: url('/images/short.svg');
 141 }
 142
 143 .slider.lineLength::after {
 144   mask-image: url('/images/long.svg');
 145 }
 146
 147 .slider.radius::before {
 148   mask-image: url('/images/near.svg');
 149 }
 150
 151 .slider.radius::after {
 152   mask-image: url('/images/far.svg');
 153 }
 154
 155 .slider.rotation-x::before {
 156   mask-image: url('/images/no-pitch.svg');
 157 }
 158
 159 .slider.rotation-x::after {
 160   mask-image: url('/images/fast-pitch.svg');
 161 }
 162
 163 .slider.rotation-y::before {
 164   mask-image: url('/images/no-yaw.svg');
 165 }
 166
 167 .slider.rotation-y::after {
 168   mask-image: url('/images/fast-yaw.svg');
 169 }
 170
 171 .slider.rotation-z::before {
 172   mask-image: url('/images/no-roll.svg');
 173 }
 174
 175 .slider.rotation-z::after {
 176   mask-image: url('/images/fast-roll.svg');
 177 }
 178
 179 .slider.frequency::before {
 180   mask-image: url('/images/lf.svg');
 181 }
 182
 183 .slider.frequency::after {
 184   mask-image: url('/images/hf.svg');
 185 }
 186
 187 .slider.amplitude::before {
 188   mask-image: url('/images/la.svg');
 189 }
 190
 191 .slider.amplitude::after {
 192   mask-image: url('/images/ha.svg');
 193 }