overflow: hidden;
}
+@media (orientation: landscape) {
+ body {
+ padding-top: env(safe-area-inset-top);
+ padding-left: env(safe-area-inset-left);
+ padding-right: env(safe-area-inset-right);
+ padding-bottom: env(safe-area-inset-bottom);
+ }
+}
+
+a {
+ color: #fff;
+}
+
+footer {
+ position: fixed;
+ padding: 2px 8px;
+ bottom: 0;
+ min-height: 16px;
+ max-height: 32px;
+}
+
#settings {
+ overflow-y: auto;
+ max-height: 100%;
position: absolute;
top: 5px;
right: 5px;
}
input[type="range"]::-moz-range-thumb {
+ -webkit-appearance: none;
height: 16px;
width: 16px;
background-color: #80FFCC;
border-radius: 50%;
}
+input.shifted[type="range"]::-moz-range-thumb {
+ background-color: #FFB4F0;
+}
+
+input.shifted[type="range"]::-webkit-slider-thumb {
+ background-color: #FFB4F0;
+}
+
+input[type="range"]:focus::-moz-range-thumb {
+ background-color: #FF616B;
+}
+
+input[type="range"]:focus::-webkit-slider-thumb {
+ background-color: #FF616B;
+}
.slider::before,
.slider::after {
display: inline-block;
}
+.slider::before {
+ position: relative;
+ left: 16px;
+}
+
.slider {
margin: 4px 0;
position: relative;
label {
display: inline-block;
+ width: 16px;
position: relative;
- width: 0;
- height: 16px;
- right: 32px;
- top: -5px;
+ left: -16px;
+ top: -2px;
}
.slider.lineLength::before {
.slider.amplitude::after {
mask-image: url('/images/ha.svg');
}
+
+.slider.phase::before {
+ mask-image: url('/images/unphased.svg');
+}
+
+.slider.phase::after {
+ mask-image: url('/images/phased.svg');
+}