a lightweight, interval-based utility to combat digital strain through "Ma" (intentional pauses) for the eyes and body.
fix(ui): scale all layout valuies with font-size across settings UI
+171
-171
+3
-3
ui/components/atoms.slint
+3
-3
ui/components/atoms.slint
···
10
10
in property <string> description: "";
11
11
12
12
alignment: center;
13
-
spacing: 3px;
13
+
spacing: 3px * Theme.font-scale;
14
14
15
15
Text {
16
16
text: root.title;
···
30
30
in property <string> title;
31
31
in property <string> description: "";
32
32
33
-
spacing: 4px;
33
+
spacing: 4px * Theme.font-scale;
34
34
35
35
HorizontalLayout {
36
-
spacing: 12px;
36
+
spacing: 12px * Theme.font-scale;
37
37
38
38
Text {
39
39
text: root.title;
+9
-9
ui/components/chips.slint
+9
-9
ui/components/chips.slint
···
6
6
in-out property <int> selected-index: 0;
7
7
callback selection-changed(int);
8
8
9
-
spacing: 6px;
9
+
spacing: 6px * Theme.font-scale;
10
10
alignment: center;
11
11
12
12
for label[i] in root.labels: chip-root := Rectangle {
···
40
40
}
41
41
42
42
Rectangle {
43
-
border-radius: 6px;
43
+
border-radius: 6px * Theme.font-scale;
44
44
background: i == root.selected-index
45
45
? Theme.btn-bg
46
46
: (chip-ta.has-hover ? Theme.surface-hov : Theme.surface);
···
48
48
border-color: chip-fs.has-focus
49
49
? Theme.accent-muted
50
50
: (i == root.selected-index ? transparent : Theme.line);
51
-
min-width: 48px;
51
+
min-width: 48px * Theme.font-scale;
52
52
animate background { duration: 120ms; }
53
53
animate border-color { duration: 120ms; }
54
54
55
55
HorizontalLayout {
56
-
padding-left: 12px;
57
-
padding-right: 12px;
56
+
padding-left: 12px * Theme.font-scale;
57
+
padding-right: 12px * Theme.font-scale;
58
58
alignment: center;
59
59
60
60
chipText := Text {
···
77
77
in-out property <string> active-profile: "";
78
78
callback selection-changed(string);
79
79
80
-
spacing: 6px;
80
+
spacing: 6px * Theme.font-scale;
81
81
alignment: center;
82
82
83
83
for name[i] in root.profile-names: chip-root := Rectangle {
···
111
111
}
112
112
113
113
Rectangle {
114
-
border-radius: 6px;
114
+
border-radius: 6px * Theme.font-scale;
115
115
background: name == root.active-profile
116
116
? Theme.btn-bg
117
117
: (chip-ta.has-hover ? Theme.surface-hov : Theme.surface);
···
125
125
animate border-color { duration: 120ms; }
126
126
127
127
HorizontalLayout {
128
-
padding-left: 12px;
129
-
padding-right: 12px;
128
+
padding-left: 12px * Theme.font-scale;
129
+
padding-right: 12px * Theme.font-scale;
130
130
alignment: center;
131
131
132
132
chipText := Text {
+4
-4
ui/components/header.slint
+4
-4
ui/components/header.slint
···
1
1
import { Theme } from "../theme.slint";
2
2
3
3
export component AppHeader inherits HorizontalLayout {
4
-
padding-left: 28px;
5
-
padding-right: 28px;
6
-
padding-top: 18px;
4
+
padding-left: 28px * Theme.font-scale;
5
+
padding-right: 28px * Theme.font-scale;
6
+
padding-top: 18px * Theme.font-scale;
7
7
padding-bottom: 0px;
8
8
spacing: 0px;
9
9
10
10
HorizontalLayout {
11
-
spacing: 10px;
11
+
spacing: 10px * Theme.font-scale;
12
12
alignment: center;
13
13
14
14
Text {
+28
-28
ui/components/inputs.slint
+28
-28
ui/components/inputs.slint
···
39
39
}
40
40
41
41
Rectangle {
42
-
border-radius: 6px;
42
+
border-radius: 6px * Theme.font-scale;
43
43
background: Theme.surface;
44
44
border-width: 1px;
45
45
border-color: Theme.line;
···
139
139
accessible-value: root.text;
140
140
141
141
Rectangle {
142
-
border-radius: 6px;
142
+
border-radius: 6px * Theme.font-scale;
143
143
background: ti.has-focus ? Theme.tint-soft : Theme.surface-inp;
144
144
border-width: 1px;
145
145
border-color: ti.has-focus ? Theme.accent-muted : Theme.line;
···
149
149
150
150
// Placeholder text when empty and unfocused
151
151
if root.text == "" && !ti.has-focus: Text {
152
-
x: 10px;
152
+
x: 10px * Theme.font-scale;
153
153
text: root.placeholder-text;
154
154
font-size: Theme.font_label;
155
155
color: Theme.ink-dim;
···
157
157
}
158
158
159
159
HorizontalLayout {
160
-
padding-left: 10px;
161
-
padding-right: 10px;
160
+
padding-left: 10px * Theme.font-scale;
161
+
padding-right: 10px * Theme.font-scale;
162
162
163
163
ti := TextInput {
164
164
horizontal-stretch: 1;
···
182
182
export component VolumeSlider {
183
183
in-out property <float> value: 0.5;
184
184
185
-
min-width: 120px;
185
+
min-width: 120px * Theme.font-scale;
186
186
height: 44px * Theme.font-scale;
187
187
188
188
ta := TouchArea {
···
205
205
}
206
206
207
207
Rectangle {
208
-
border-radius: 6px;
208
+
border-radius: 6px * Theme.font-scale;
209
209
background: ta.has-hover ? Theme.tint-soft : transparent;
210
210
border-width: 1px;
211
211
border-color: fs.has-focus ? Theme.accent-muted : transparent;
···
233
233
}
234
234
235
235
Rectangle {
236
-
x: parent.width * root.value - 6px;
237
-
y: (parent.height - 12px) / 2;
238
-
width: 12px;
239
-
height: 12px;
240
-
border-radius: 6px;
236
+
x: parent.width * root.value - 6px * Theme.font-scale;
237
+
y: (parent.height - 12px * Theme.font-scale) / 2;
238
+
width: 12px * Theme.font-scale;
239
+
height: 12px * Theme.font-scale;
240
+
border-radius: 6px * Theme.font-scale;
241
241
background: Theme.thumb;
242
242
border-width: 1.5px;
243
243
border-color: Theme.accent;
244
-
drop-shadow-blur: 2px;
244
+
drop-shadow-blur: 2px * Theme.font-scale;
245
245
drop-shadow-color: Theme.shadow;
246
246
animate x { duration: 80ms; }
247
247
}
···
268
268
callback selection-changed(int);
269
269
270
270
height: 32px * Theme.font-scale;
271
-
min-width: 80px;
271
+
min-width: 80px * Theme.font-scale;
272
272
273
273
accessible-role: combobox;
274
274
accessible-label: root.field-label;
···
293
293
}
294
294
295
295
outer := Rectangle {
296
-
border-radius: 6px;
296
+
border-radius: 6px * Theme.font-scale;
297
297
background: ta.has-hover ? Theme.surface-hov : Theme.surface;
298
298
border-width: 1px;
299
299
border-color: fs.has-focus ? Theme.accent-muted : Theme.line;
···
308
308
}
309
309
310
310
HorizontalLayout {
311
-
padding-left: 10px;
312
-
padding-right: 8px;
311
+
padding-left: 10px * Theme.font-scale;
312
+
padding-right: 8px * Theme.font-scale;
313
313
314
314
Text {
315
315
text: root.model[root.selected-index];
···
322
322
323
323
Text {
324
324
text: "▾";
325
-
font-size: 10px;
325
+
font-size: 10px * Theme.font-scale;
326
326
color: Theme.ink-lo;
327
327
vertical-alignment: center;
328
328
}
329
329
}
330
330
331
331
popup := PopupWindow {
332
-
y: parent.height + 2px;
332
+
y: parent.height + 2px * Theme.font-scale;
333
333
width: parent.width;
334
-
height: root.model.length * (34px * Theme.font-scale) + 6px;
334
+
height: root.model.length * (34px * Theme.font-scale) + 6px * Theme.font-scale;
335
335
336
336
Rectangle {
337
337
background: Theme.bg;
338
-
border-radius: 7px;
338
+
border-radius: 7px * Theme.font-scale;
339
339
border-width: 1px;
340
340
border-color: Theme.line-med;
341
-
drop-shadow-blur: 12px;
342
-
drop-shadow-offset-y: 4px;
341
+
drop-shadow-blur: 12px * Theme.font-scale;
342
+
drop-shadow-offset-y: 4px * Theme.font-scale;
343
343
drop-shadow-color: Theme.shadow;
344
344
clip: true;
345
345
346
346
VerticalLayout {
347
-
padding: 3px;
348
-
spacing: 1px;
347
+
padding: 3px * Theme.font-scale;
348
+
spacing: 1px * Theme.font-scale;
349
349
350
350
for item[i] in root.model: item-ta := TouchArea {
351
351
height: 34px * Theme.font-scale;
···
357
357
Rectangle {
358
358
background: i == root.selected-index ? Theme.btn-bg :
359
359
(item-ta.has-hover ? Theme.surface-hov : transparent);
360
-
border-radius: 4px;
360
+
border-radius: 4px * Theme.font-scale;
361
361
animate background { duration: 80ms; }
362
362
363
363
HorizontalLayout {
364
-
padding-left: 10px;
365
-
padding-right: 10px;
364
+
padding-left: 10px * Theme.font-scale;
365
+
padding-right: 10px * Theme.font-scale;
366
366
367
367
Text {
368
368
text: item;
+10
-10
ui/components/toggles.slint
+10
-10
ui/components/toggles.slint
···
5
5
in property <string> label: "";
6
6
callback toggled(bool);
7
7
8
-
width: 38px;
9
-
height: 22px;
8
+
width: 38px * Theme.font-scale;
9
+
height: 22px * Theme.font-scale;
10
10
11
11
accessible-role: AccessibleRole.checkbox;
12
12
accessible-label: root.label;
···
36
36
}
37
37
38
38
Rectangle {
39
-
border-radius: 11px;
39
+
border-radius: 11px * Theme.font-scale;
40
40
background: root.checked ? Theme.accent : Theme.toggle-off;
41
41
animate background { duration: 180ms; }
42
42
43
43
Rectangle {
44
-
x: root.checked ? 18px : 2px;
45
-
y: 2px;
46
-
width: 18px;
47
-
height: 18px;
48
-
border-radius: 9px;
44
+
x: root.checked ? 18px * Theme.font-scale : 2px * Theme.font-scale;
45
+
y: 2px * Theme.font-scale;
46
+
width: 18px * Theme.font-scale;
47
+
height: 18px * Theme.font-scale;
48
+
border-radius: 9px * Theme.font-scale;
49
49
background: Theme.thumb;
50
50
drop-shadow-color: Theme.shadow;
51
-
drop-shadow-blur: 3px;
52
-
drop-shadow-offset-y: 1px;
51
+
drop-shadow-blur: 3px * Theme.font-scale;
52
+
drop-shadow-offset-y: 1px * Theme.font-scale;
53
53
animate x {
54
54
duration: 180ms;
55
55
easing: ease-out;
+10
-10
ui/overlay.slint
+10
-10
ui/overlay.slint
···
37
37
38
38
VerticalLayout {
39
39
alignment: center;
40
-
spacing: 24px;
41
-
padding: 48px;
40
+
spacing: 24px * Theme.font-scale;
41
+
padding: 48px * Theme.font-scale;
42
42
43
43
Text {
44
44
text: break-label;
···
62
62
alignment: center;
63
63
64
64
Rectangle {
65
-
height: 8px;
66
-
width: 320px;
65
+
height: 8px * Theme.font-scale;
66
+
width: 320px * Theme.font-scale;
67
67
background: Theme.progress-track;
68
-
border-radius: 4px;
68
+
border-radius: 4px * Theme.font-scale;
69
69
70
70
Rectangle {
71
71
x: 0;
72
72
width: parent.width * progress;
73
73
height: parent.height;
74
74
background: Theme.accent;
75
-
border-radius: 4px;
75
+
border-radius: 4px * Theme.font-scale;
76
76
}
77
77
}
78
78
}
79
79
80
80
HorizontalLayout {
81
81
alignment: center;
82
-
spacing: 16px;
82
+
spacing: 16px * Theme.font-scale;
83
83
84
84
if snooze-visible : Button {
85
85
text: "Snooze once";
···
95
95
VerticalLayout {
96
96
visible: unlock-input-visible;
97
97
alignment: center;
98
-
spacing: 8px;
98
+
spacing: 8px * Theme.font-scale;
99
99
100
100
HorizontalLayout {
101
101
alignment: center;
102
102
pw-field := LineEdit {
103
-
width: 260px;
103
+
width: 260px * Theme.font-scale;
104
104
placeholder-text: "Emergency password";
105
105
input-type: password;
106
106
accepted => { root.unlock-submit-clicked(self.text); }
···
116
116
117
117
HorizontalLayout {
118
118
alignment: center;
119
-
spacing: 8px;
119
+
spacing: 8px * Theme.font-scale;
120
120
121
121
Button {
122
122
text: "Cancel";
+3
-3
ui/password.slint
+3
-3
ui/password.slint
···
19
19
20
20
VerticalLayout {
21
21
alignment: start;
22
-
padding: 24px;
23
-
spacing: 12px;
22
+
padding: 24px * Theme.font-scale;
23
+
spacing: 12px * Theme.font-scale;
24
24
25
25
Text {
26
26
text: root.verify-mode
···
50
50
51
51
HorizontalLayout {
52
52
alignment: end;
53
-
spacing: 8px;
53
+
spacing: 8px * Theme.font-scale;
54
54
55
55
Button {
56
56
text: "Cancel";
+4
-4
ui/settings.slint
+4
-4
ui/settings.slint
···
70
70
AppHeader { }
71
71
72
72
HorizontalLayout {
73
-
padding-left: 28px;
74
-
padding-right: 28px;
75
-
padding-top: 14px;
76
-
spacing: 28px;
73
+
padding-left: 28px * Theme.font-scale;
74
+
padding-right: 28px * Theme.font-scale;
75
+
padding-top: 14px * Theme.font-scale;
76
+
spacing: 28px * Theme.font-scale;
77
77
78
78
TabButton {
79
79
text: "Rhythm";
+31
-31
ui/views/about_tab.slint
+31
-31
ui/views/about_tab.slint
···
2
2
3
3
export component AboutTab inherits VerticalLayout {
4
4
alignment: center;
5
-
padding: 40px;
5
+
padding: 40px * Theme.font-scale;
6
6
spacing: 0px;
7
7
vertical-stretch: 1;
8
8
···
10
10
alignment: center;
11
11
12
12
Rectangle {
13
-
width: 56px;
14
-
height: 56px;
13
+
width: 56px * Theme.font-scale;
14
+
height: 56px * Theme.font-scale;
15
15
16
16
Rectangle {
17
-
x: (9px - 5px) * 56 / 64;
18
-
y: (32px - 5px) * 56 / 64;
19
-
width: 10px * 56 / 64;
20
-
height: 10px * 56 / 64;
21
-
border-radius: 5px * 56 / 64;
17
+
x: (9px - 5px) * 56 / 64 * Theme.font-scale;
18
+
y: (32px - 5px) * 56 / 64 * Theme.font-scale;
19
+
width: 10px * 56 / 64 * Theme.font-scale;
20
+
height: 10px * 56 / 64 * Theme.font-scale;
21
+
border-radius: 5px * 56 / 64 * Theme.font-scale;
22
22
background: Theme.ink;
23
23
}
24
24
25
25
Rectangle {
26
-
x: (32px - 8px) * 56 / 64;
27
-
y: (32px - 8px) * 56 / 64;
28
-
width: 16px * 56 / 64;
29
-
height: 16px * 56 / 64;
30
-
border-radius: 8px * 56 / 64;
26
+
x: (32px - 8px) * 56 / 64 * Theme.font-scale;
27
+
y: (32px - 8px) * 56 / 64 * Theme.font-scale;
28
+
width: 16px * 56 / 64 * Theme.font-scale;
29
+
height: 16px * 56 / 64 * Theme.font-scale;
30
+
border-radius: 8px * 56 / 64 * Theme.font-scale;
31
31
background: Theme.ink;
32
32
}
33
33
34
34
Rectangle {
35
-
x: (55px - 5px) * 56 / 64;
36
-
y: (32px - 5px) * 56 / 64;
37
-
width: 10px * 56 / 64;
38
-
height: 10px * 56 / 64;
39
-
border-radius: 5px * 56 / 64;
35
+
x: (55px - 5px) * 56 / 64 * Theme.font-scale;
36
+
y: (32px - 5px) * 56 / 64 * Theme.font-scale;
37
+
width: 10px * 56 / 64 * Theme.font-scale;
38
+
height: 10px * 56 / 64 * Theme.font-scale;
39
+
border-radius: 5px * 56 / 64 * Theme.font-scale;
40
40
background: Theme.ink;
41
41
}
42
42
43
43
Rectangle {
44
-
x: 17px * 56 / 64;
45
-
y: (32px - 1px) * 56 / 64;
46
-
width: 6px * 56 / 64;
47
-
height: 2px * 56 / 64;
48
-
border-radius: 1px;
44
+
x: 17px * 56 / 64 * Theme.font-scale;
45
+
y: (32px - 1px) * 56 / 64 * Theme.font-scale;
46
+
width: 6px * 56 / 64 * Theme.font-scale;
47
+
height: 2px * 56 / 64 * Theme.font-scale;
48
+
border-radius: 1px * Theme.font-scale;
49
49
background: Theme.ink;
50
50
}
51
51
52
52
Rectangle {
53
-
x: 41px * 56 / 64;
54
-
y: (32px - 1px) * 56 / 64;
55
-
width: 6px * 56 / 64;
56
-
height: 2px * 56 / 64;
57
-
border-radius: 1px;
53
+
x: 41px * 56 / 64 * Theme.font-scale;
54
+
y: (32px - 1px) * 56 / 64 * Theme.font-scale;
55
+
width: 6px * 56 / 64 * Theme.font-scale;
56
+
height: 2px * 56 / 64 * Theme.font-scale;
57
+
border-radius: 1px * Theme.font-scale;
58
58
background: Theme.ink;
59
59
}
60
60
}
61
61
}
62
62
63
-
Rectangle { height: 12px; }
63
+
Rectangle { height: 12px * Theme.font-scale; }
64
64
65
65
Text {
66
66
text: "ioma";
···
70
70
horizontal-alignment: center;
71
71
}
72
72
73
-
Rectangle { height: 4px; }
73
+
Rectangle { height: 4px * Theme.font-scale; }
74
74
75
75
Text {
76
76
text: "v0.4.2 · the space between";
···
79
79
horizontal-alignment: center;
80
80
}
81
81
82
-
Rectangle { height: 28px; }
82
+
Rectangle { height: 28px * Theme.font-scale; }
83
83
84
84
Text {
85
85
text: "間 (ma) is the Japanese notion of the pause between —\nthe rest in music, the silence between words.\nioma gives that pause back to your eyes and body.";
+27
-27
ui/views/profile_tab.slint
+27
-27
ui/views/profile_tab.slint
···
21
21
vertical-stretch: 1;
22
22
23
23
VerticalLayout {
24
-
padding-left: 28px;
25
-
padding-right: 28px;
26
-
padding-top: 24px;
27
-
padding-bottom: 16px;
24
+
padding-left: 28px * Theme.font-scale;
25
+
padding-right: 28px * Theme.font-scale;
26
+
padding-top: 24px * Theme.font-scale;
27
+
padding-bottom: 16px * Theme.font-scale;
28
28
spacing: 0px;
29
29
30
30
HorizontalLayout {
31
-
padding-top: 12px;
32
-
padding-bottom: 4px;
33
-
spacing: 24px;
31
+
padding-top: 12px * Theme.font-scale;
32
+
padding-bottom: 4px * Theme.font-scale;
33
+
spacing: 24px * Theme.font-scale;
34
34
35
35
SettingLabel {
36
36
title: "Chime on break start";
···
45
45
}
46
46
47
47
if root.sound-enabled: HorizontalLayout {
48
-
padding-bottom: 12px;
49
-
spacing: 12px;
48
+
padding-bottom: 12px * Theme.font-scale;
49
+
spacing: 12px * Theme.font-scale;
50
50
alignment: center;
51
51
52
52
Text {
···
63
63
64
64
Text {
65
65
text: "\{Math.round(root.sound-volume * 100)}%";
66
-
min-width: 44px;
66
+
min-width: 44px * Theme.font-scale;
67
67
font-size: Theme.font_label;
68
68
font-weight: 600;
69
69
color: Theme.ink;
···
73
73
}
74
74
75
75
HorizontalLayout {
76
-
padding-top: 12px;
77
-
padding-bottom: 10px;
78
-
spacing: 24px;
76
+
padding-top: 12px * Theme.font-scale;
77
+
padding-bottom: 10px * Theme.font-scale;
78
+
spacing: 24px * Theme.font-scale;
79
79
80
80
SettingLabel {
81
81
title: "Appearance";
···
94
94
}
95
95
96
96
HorizontalLayout {
97
-
padding-top: 12px;
98
-
padding-bottom: 10px;
99
-
spacing: 24px;
97
+
padding-top: 12px * Theme.font-scale;
98
+
padding-bottom: 10px * Theme.font-scale;
99
+
spacing: 24px * Theme.font-scale;
100
100
101
101
SettingLabel {
102
102
title: "Text size";
···
105
105
Rectangle { horizontal-stretch: 1; }
106
106
107
107
PaperComboBox {
108
-
width: 140px;
108
+
width: 140px * Theme.font-scale;
109
109
model: ["Compact", "Small", "Default", "Large", "Extra Large"];
110
110
selected-index: root.text-size-mode;
111
111
field-label: "Text size";
···
116
116
}
117
117
}
118
118
119
-
Rectangle { height: 28px; }
119
+
Rectangle { height: 28px * Theme.font-scale; }
120
120
121
121
HorizontalLayout {
122
-
padding-top: 12px;
123
-
padding-bottom: 10px;
124
-
spacing: 24px;
122
+
padding-top: 12px * Theme.font-scale;
123
+
padding-bottom: 10px * Theme.font-scale;
124
+
spacing: 24px * Theme.font-scale;
125
125
126
126
SettingLabel {
127
127
title: "Launch with system";
···
136
136
}
137
137
138
138
HorizontalLayout {
139
-
padding-top: 12px;
140
-
padding-bottom: 4px;
141
-
spacing: 24px;
139
+
padding-top: 12px * Theme.font-scale;
140
+
padding-bottom: 4px * Theme.font-scale;
141
+
spacing: 24px * Theme.font-scale;
142
142
143
143
SettingLabel {
144
144
title: "Reset after";
···
148
148
Rectangle { horizontal-stretch: 1; }
149
149
150
150
HorizontalLayout {
151
-
spacing: 8px;
151
+
spacing: 8px * Theme.font-scale;
152
152
alignment: start;
153
153
154
154
NumberField {
155
-
width: 80px;
155
+
width: 80px * Theme.font-scale;
156
156
value <=> root.long-break-gap-mins;
157
157
minimum: 1;
158
158
maximum: 120;
···
169
169
}
170
170
171
171
HorizontalLayout {
172
-
padding-bottom: 12px;
172
+
padding-bottom: 12px * Theme.font-scale;
173
173
174
174
PaperButton {
175
175
text: "Open config file location";
+24
-24
ui/views/rhythm_tab.slint
+24
-24
ui/views/rhythm_tab.slint
···
40
40
vertical-stretch: 1;
41
41
42
42
VerticalLayout {
43
-
padding-left: 28px;
44
-
padding-right: 28px;
45
-
padding-top: 24px;
46
-
padding-bottom: 16px;
43
+
padding-left: 28px * Theme.font-scale;
44
+
padding-right: 28px * Theme.font-scale;
45
+
padding-top: 24px * Theme.font-scale;
46
+
padding-bottom: 16px * Theme.font-scale;
47
47
spacing: 0px;
48
48
49
49
HorizontalLayout {
50
-
padding-bottom: 14px;
51
-
spacing: 24px;
50
+
padding-bottom: 14px * Theme.font-scale;
51
+
spacing: 24px * Theme.font-scale;
52
52
53
53
SettingLabel {
54
54
title: "Active profile";
···
57
57
Rectangle { horizontal-stretch: 1; }
58
58
59
59
PaperComboBox {
60
-
width: 140px;
60
+
width: 140px * Theme.font-scale;
61
61
model: root.profile-names;
62
62
selected-index: root.profile-index;
63
63
field-label: "Active profile";
···
68
68
}
69
69
}
70
70
71
-
Rectangle { height: 16px; }
71
+
Rectangle { height: 16px * Theme.font-scale; }
72
72
73
73
Text {
74
74
text: "Break cadence";
···
77
77
color: Theme.ink;
78
78
}
79
79
80
-
Rectangle { height: 14px; }
80
+
Rectangle { height: 14px * Theme.font-scale; }
81
81
82
82
for level[i] in root.levels: VerticalLayout {
83
83
spacing: 0px;
···
123
123
}
124
124
}
125
125
126
-
Rectangle { height: 10px; }
126
+
Rectangle { height: 10px * Theme.font-scale; }
127
127
}
128
128
129
129
LongRestCard {
···
134
134
label <=> root.long-break-label;
135
135
}
136
136
137
-
Rectangle { height: 10px; }
137
+
Rectangle { height: 10px * Theme.font-scale; }
138
138
139
139
add-ta := TouchArea {
140
140
height: 44px * Theme.font-scale;
···
144
144
clicked => { root.level-added(); }
145
145
146
146
Rectangle {
147
-
border-radius: 8px;
147
+
border-radius: 8px * Theme.font-scale;
148
148
background: add-ta.has-hover ? Theme.surface-hov : transparent;
149
149
border-width: 1px;
150
150
border-color: Theme.line-med;
···
160
160
}
161
161
}
162
162
163
-
Rectangle { height: 28px; }
163
+
Rectangle { height: 28px * Theme.font-scale; }
164
164
165
165
SectionHeading {
166
166
title: "Break behavior";
167
167
}
168
168
169
-
Rectangle { height: 12px; }
169
+
Rectangle { height: 12px * Theme.font-scale; }
170
170
171
171
VerticalLayout {
172
172
spacing: 0px;
173
173
174
174
HorizontalLayout {
175
-
padding-top: 12px;
176
-
padding-bottom: 4px;
177
-
spacing: 24px;
175
+
padding-top: 12px * Theme.font-scale;
176
+
padding-bottom: 4px * Theme.font-scale;
177
+
spacing: 24px * Theme.font-scale;
178
178
179
179
SettingLabel {
180
180
title: "Enforced mode";
···
197
197
}
198
198
199
199
if root.enforced-mode: HorizontalLayout {
200
-
padding-bottom: 12px;
200
+
padding-bottom: 12px * Theme.font-scale;
201
201
202
202
PaperButton {
203
203
text: root.password-is-set ? "Change emergency password…" : "Set emergency unlock password…";
···
206
206
}
207
207
208
208
HorizontalLayout {
209
-
padding-top: 12px;
210
-
padding-bottom: 4px;
211
-
spacing: 24px;
209
+
padding-top: 12px * Theme.font-scale;
210
+
padding-bottom: 4px * Theme.font-scale;
211
+
spacing: 24px * Theme.font-scale;
212
212
213
213
SettingLabel {
214
214
title: "Pause on idle";
···
224
224
}
225
225
226
226
if root.idle-detection-enabled: HorizontalLayout {
227
-
padding-bottom: 12px;
228
-
spacing: 10px;
227
+
padding-bottom: 12px * Theme.font-scale;
228
+
spacing: 10px * Theme.font-scale;
229
229
alignment: start;
230
230
231
231
Text {
···
236
236
}
237
237
238
238
NumberField {
239
-
width: 80px;
239
+
width: 80px * Theme.font-scale;
240
240
value <=> root.idle-threshold-mins;
241
241
minimum: 1;
242
242
maximum: 60;