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 #settings {
  15   position: absolute;
  16   top: 5px;
  17   right: 5px;
  18 }
  19
  20 h1, h2, h3 {
  21   font-weight: normal;
  22 }
  23
  24 h1 {
  25   font-size: 18px;
  26 }
  27
  28 h2 {
  29   font-size: 16px;
  30 }
  31
  32 h3 {
  33   font-size: 14px;
  34 }
  35
  36 input[type="range"] {
  37   -webkit-appearance: none;
  38   background-color: transparent;
  39   height: 16px;
  40   display: inline-block;
  41   margin: 0 4px;
  42   width: 128px;
  43 }
  44
  45 input[type="range"]:focus {
  46  outline: none;
  47 }
  48
  49 input[type="range"]::-webkit-slider-runnable-track {
  50  background: #fff;
  51  height: 2px;
  52 }
  53
  54 input[type="range"]::-moz-range-track {
  55  background: #fff;
  56  height: 2px;
  57 }
  58
  59 input[type="range"]::-webkit-slider-thumb {
  60  -webkit-appearance: none;
  61  height: 16px;
  62  width: 16px;
  63  background-color: #80FFCC;
  64  margin-top: -8px;
  65  border-radius: 50%;
  66 }
  67
  68 input[type="range"]::-moz-range-thumb {
  69  height: 16px;
  70  width: 16px;
  71  background-color: #80FFCC;
  72  margin-top: -8px;
  73  border-radius: 50%;
  74 }
  75
  76
  77 .slider::before,
  78 .slider::after {
  79   content: '';
  80   background-color: #80FFCC;
  81   height: 16px;
  82   width: 16px;
  83   display: inline-block;
  84 }
  85
  86 .slider {
  87   margin: 4px 0;
  88   position: relative;
  89 }
  90
  91 label {
  92   display: inline-block;
  93   position: relative;
  94   width: 0;
  95   height: 16px;
  96   right: 32px;
  97   top: -5px;
  98 }
  99
 100 .slider.lineLength::before {
 101   mask-image: url('/images/short.svg');
 102 }
 103
 104 .slider.lineLength::after {
 105   mask-image: url('/images/long.svg');
 106 }
 107
 108 .slider.radius::before {
 109   mask-image: url('/images/near.svg');
 110 }
 111
 112 .slider.radius::after {
 113   mask-image: url('/images/far.svg');
 114 }
 115
 116 .slider.rotation-x::before {
 117   mask-image: url('/images/no-pitch.svg');
 118 }
 119
 120 .slider.rotation-x::after {
 121   mask-image: url('/images/fast-pitch.svg');
 122 }
 123
 124 .slider.rotation-y::before {
 125   mask-image: url('/images/no-yaw.svg');
 126 }
 127
 128 .slider.rotation-y::after {
 129   mask-image: url('/images/fast-yaw.svg');
 130 }
 131
 132 .slider.rotation-z::before {
 133   mask-image: url('/images/no-roll.svg');
 134 }
 135
 136 .slider.rotation-z::after {
 137   mask-image: url('/images/fast-roll.svg');
 138 }
 139
 140 .slider.frequency::before {
 141   mask-image: url('/images/lf.svg');
 142 }
 143
 144 .slider.frequency::after {
 145   mask-image: url('/images/hf.svg');
 146 }
 147
 148 .slider.amplitude::before {
 149   mask-image: url('/images/la.svg');
 150 }
 151
 152 .slider.amplitude::after {
 153   mask-image: url('/images/ha.svg');
 154 }