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