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