]> git.r.bdr.sh - rbdr/lissajous/blob - style.css
d961e981fec36dfea4426a09f9c1d2c3b56a9782
[rbdr/lissajous] / 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 }