Skip to content

Commit b2b8a9c

Browse files
jonas-eschmannjonas-eschmann
committed
not bad but needs improvement
1 parent 0f04317 commit b2b8a9c

File tree

3 files changed

+141
-2
lines changed

3 files changed

+141
-2
lines changed

‎index.css‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
html { font-size: 16px; }
2-
:root { --ui-scale: 1; }
1+
@import url("thumb.css");
32

43
body {
54
display: flex;
@@ -66,6 +65,7 @@ body {
6665
}
6766
#controls-box{
6867
background-color: #c5c5c5;
68+
overflow:auto;
6969
}
7070
.controls-container {
7171
display: flex;
@@ -74,6 +74,7 @@ body {
7474
gap: 10px;
7575
padding: 0.3rem;
7676
background-color: rgb(224, 224, 224);
77+
flex-wrap: wrap;
7778
}
7879
#controller-options-container{
7980
flex-direction: row;

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<html>
22
<head>
33
<meta charset="utf-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
45
<title>L2F Playground</title>
56
<template id="perturbation-group-template" >
67
<div class="perturbation-group">

‎thumb.css‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
/* Desktop: Completely stock browser elements - no custom styling at all */
2+
:root {
3+
--ui-scale: 1;
4+
}
5+
6+
/* Desktop uses 100% stock browser styling for everything including sliders */
7+
8+
/* Touch device optimizations - larger touch targets for better usability */
9+
@media (hover: none) and (pointer: coarse) {
10+
:root {
11+
--ctl-scale: 0.5; /* Larger controls on mobile/tablet for better touch */
12+
13+
/* Slider styling tokens - enhanced for mobile */
14+
--thumb: calc(1.25rem * var(--ctl-scale)); /* knob size (20px at 16px base) */
15+
--track: calc(0.5rem * var(--ctl-scale)); /* bar thickness (8px at 16px base) */
16+
--hit: calc(2.75rem * var(--ctl-scale)); /* minimum tap height (44px at 16px base) */
17+
18+
--track-bg: #e5e7eb;
19+
--thumb-bg: #ffffff;
20+
--thumb-border: calc(0.125rem * var(--ctl-scale)) solid #111827; /* 2px at 16px base */
21+
--focus-ring: 0 0 0 calc(0.25rem * var(--ctl-scale)) rgba(59,130,246,.35); /* 4px at 16px base */
22+
}
23+
24+
/* Enhanced slider styling for mobile - better touch targets */
25+
input[type="range"]{
26+
-webkit-appearance: none;
27+
appearance: none;
28+
width: 100%;
29+
background: transparent; /* keep parent bg */
30+
block-size: var(--hit); /* big tap target */
31+
padding: 0; margin: 0; /* contain layout */
32+
cursor: pointer;
33+
}
34+
35+
/* WebKit (iOS Safari/Chrome) */
36+
input[type="range"]::-webkit-slider-runnable-track{
37+
height: var(--track);
38+
background: var(--track-bg);
39+
border-radius: var(--track);
40+
}
41+
input[type="range"]::-webkit-slider-thumb{
42+
-webkit-appearance: none;
43+
width: var(--thumb);
44+
height: var(--thumb);
45+
background: var(--thumb-bg);
46+
border: var(--thumb-border);
47+
border-radius: 50%;
48+
margin-top: calc((var(--track) - var(--thumb)) / 2); /* center on track */
49+
box-shadow: 0 1px 3px rgba(0,0,0,.2);
50+
}
51+
52+
/* Firefox */
53+
input[type="range"]::-moz-range-track{
54+
height: var(--track);
55+
background: var(--track-bg);
56+
border-radius: var(--track);
57+
}
58+
input[type="range"]::-moz-range-thumb{
59+
width: var(--thumb);
60+
height: var(--thumb);
61+
background: var(--thumb-bg);
62+
border: var(--thumb-border);
63+
border-radius: 50%;
64+
box-shadow: 0 1px 3px rgba(0,0,0,.2);
65+
}
66+
67+
/* Focus (keyboard/VoiceOver) */
68+
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring); }
69+
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: var(--focus-ring); }
70+
71+
/* Button enhancements - all sizes controlled by --ctl-scale */
72+
button {
73+
min-height: calc(3rem * var(--ctl-scale)); /* Base: 48px, scales with --ctl-scale */
74+
padding: calc(0.75rem * var(--ctl-scale)) calc(1rem * var(--ctl-scale));
75+
font-size: calc(1.1rem * var(--ctl-scale));
76+
border-radius: calc(0.5rem * var(--ctl-scale));
77+
border: calc(0.125rem * var(--ctl-scale)) solid #ccc;
78+
background: #f8f9fa;
79+
transition: all 0.2s ease;
80+
cursor: pointer;
81+
}
82+
83+
button:hover {
84+
background: #e9ecef;
85+
}
86+
87+
button:active {
88+
background: #dee2e6;
89+
transform: translateY(calc(1px * var(--ctl-scale)));
90+
}
91+
92+
/* Select dropdown enhancements - all sizes controlled by --ctl-scale */
93+
select {
94+
min-height: calc(3rem * var(--ctl-scale));
95+
padding: calc(0.75rem * var(--ctl-scale));
96+
font-size: calc(1.1rem * var(--ctl-scale));
97+
border-radius: calc(0.5rem * var(--ctl-scale));
98+
border: calc(0.125rem * var(--ctl-scale)) solid #ccc;
99+
background: white;
100+
cursor: pointer;
101+
}
102+
103+
/* Text input enhancements - all sizes controlled by --ctl-scale */
104+
input[type="text"],
105+
input[type="number"],
106+
textarea {
107+
min-height: calc(3rem * var(--ctl-scale));
108+
padding: calc(0.75rem * var(--ctl-scale));
109+
font-size: calc(1.1rem * var(--ctl-scale));
110+
border-radius: calc(0.5rem * var(--ctl-scale));
111+
border: calc(0.125rem * var(--ctl-scale)) solid #ccc;
112+
}
113+
114+
/* Checkboxes and radio buttons - sizes controlled by --ctl-scale */
115+
input[type="checkbox"],
116+
input[type="radio"] {
117+
width: calc(1.5rem * var(--ctl-scale)); /* Base: 24px, scales with --ctl-scale */
118+
height: calc(1.5rem * var(--ctl-scale));
119+
cursor: pointer;
120+
}
121+
122+
/* Enhanced labels - all sizes controlled by --ctl-scale */
123+
label {
124+
min-height: calc(3rem * var(--ctl-scale));
125+
display: flex;
126+
align-items: center;
127+
gap: calc(0.75rem * var(--ctl-scale));
128+
cursor: pointer;
129+
padding: calc(0.5rem * var(--ctl-scale));
130+
}
131+
132+
/* File input enhancements - sizes controlled by --ctl-scale */
133+
input[type="file"] {
134+
font-size: calc(1.1rem * var(--ctl-scale));
135+
padding: calc(0.5rem * var(--ctl-scale));
136+
}
137+
}

0 commit comments

Comments
 (0)