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  -webkit-appearance: none;
  70  height: 16px;
  71  width: 16px;
  72  background-color: #80FFCC;
  73  margin-top: -8px;
  74  border-radius: 50%;
  75 }
  76
  77 input.shifted[type="range"]::-moz-range-thumb {
  78   background-color: #FFB4F0;
  79 }
  80
  81 input.shifted[type="range"]::-webkit-slider-thumb {
  82   background-color: #FFB4F0;
  83 }
  84
  85 input[type="range"]:focus::-moz-range-thumb {
  86   background-color: #FF616B;
  87 }
  88
  89 input[type="range"]:focus::-webkit-slider-thumb {
  90   background-color: #FF616B;
  91 }
  92
  93 .slider::before,
  94 .slider::after {
  95   content: '';
  96   background-color: #80FFCC;
  97   height: 16px;
  98   width: 16px;
  99   display: inline-block;
 100 }
 101
 102 .slider {
 103   margin: 4px 0;
 104   position: relative;
 105 }
 106
 107 label {
 108   display: inline-block;
 109   position: relative;
 110   width: 0;
 111   height: 16px;
 112   right: 32px;
 113   top: -5px;
 114 }
 115
 116 .slider.lineLength::before {
 117   mask-image: url('/images/short.svg');
 118 }
 119
 120 .slider.lineLength::after {
 121   mask-image: url('/images/long.svg');
 122 }
 123
 124 .slider.radius::before {
 125   mask-image: url('/images/near.svg');
 126 }
 127
 128 .slider.radius::after {
 129   mask-image: url('/images/far.svg');
 130 }
 131
 132 .slider.rotation-x::before {
 133   mask-image: url('/images/no-pitch.svg');
 134 }
 135
 136 .slider.rotation-x::after {
 137   mask-image: url('/images/fast-pitch.svg');
 138 }
 139
 140 .slider.rotation-y::before {
 141   mask-image: url('/images/no-yaw.svg');
 142 }
 143
 144 .slider.rotation-y::after {
 145   mask-image: url('/images/fast-yaw.svg');
 146 }
 147
 148 .slider.rotation-z::before {
 149   mask-image: url('/images/no-roll.svg');
 150 }
 151
 152 .slider.rotation-z::after {
 153   mask-image: url('/images/fast-roll.svg');
 154 }
 155
 156 .slider.frequency::before {
 157   mask-image: url('/images/lf.svg');
 158 }
 159
 160 .slider.frequency::after {
 161   mask-image: url('/images/hf.svg');
 162 }
 163
 164 .slider.amplitude::before {
 165   mask-image: url('/images/la.svg');
 166 }
 167
 168 .slider.amplitude::after {
 169   mask-image: url('/images/ha.svg');
 170 }