this repo has no description
Make settings page work for very small viewports or super large text sizes
+32
-3
+31
-3
src/pages/settings.css
+31
-3
src/pages/settings.css
···
66
66
67
67
#settings-container section select {
68
68
padding: 4px;
69
+
width: 100%;
69
70
}
70
71
71
72
#settings-container .radio-group {
72
73
display: inline-flex;
73
74
align-items: center;
74
-
border-radius: 999px;
75
+
border-radius: 1.1em;
75
76
border: 1px solid var(--button-bg-color);
76
77
overflow: hidden;
77
78
padding: 1px;
79
+
flex-wrap: wrap;
78
80
}
79
81
#settings-container .radio-group input[type='radio'] {
80
82
opacity: 0;
···
85
87
display: inline-block;
86
88
padding: 6px 12px;
87
89
cursor: pointer;
90
+
flex-grow: 1;
91
+
text-align: center;
88
92
}
89
93
#settings-container .radio-group label input:checked + span {
90
94
color: var(--link-color);
···
94
98
color: var(--button-bg-color);
95
99
}
96
100
#settings-container .radio-group label:has(input:checked) {
97
-
border-radius: 999px;
101
+
border-radius: 1.1em;
98
102
color: var(--button-text-color);
99
103
background-color: var(--button-bg-color);
100
104
}
···
105
109
#settings-container .range-group {
106
110
display: flex;
107
111
align-items: center;
108
-
gap: 8px;
112
+
gap: 4px;
113
+
114
+
@media (width < 320px) {
115
+
display: grid;
116
+
gap: 0;
117
+
column-gap: 4px;
118
+
grid-template-areas:
119
+
'label1 label2'
120
+
'input input';
121
+
grid-template-columns: 1fr 1fr;
122
+
grid-template-rows: 1fr 1fr;
123
+
124
+
> span:first-child {
125
+
text-align: left;
126
+
}
127
+
128
+
> span:last-child {
129
+
text-align: right;
130
+
}
131
+
}
109
132
}
110
133
#settings-container .range-group input[type='range'] {
111
134
flex-grow: 1;
135
+
width: 100%;
136
+
137
+
@media (width < 320px) {
138
+
grid-area: input;
139
+
}
112
140
}
113
141
114
142
#settings-container .checkbox-fields {