@foblex/m-render 3.0.2 → 4.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/styles/_alert.scss +9 -4
- package/assets/styles/_badge.scss +6 -5
- package/assets/styles/_button.scss +13 -4
- package/assets/styles/_code-group.scss +47 -0
- package/assets/styles/_code-highlight.scss +15 -34
- package/assets/styles/_code-view.scss +51 -33
- package/assets/styles/_doc-text.scss +27 -23
- package/assets/styles/_icons.scss +3 -3
- package/assets/styles/_preview-group.scss +9 -0
- package/assets/styles/_table.scss +32 -11
- package/assets/styles/_variables.scss +225 -140
- package/assets/styles/styles.scss +5 -0
- package/fesm2022/foblex-m-render.mjs +141 -38
- package/fesm2022/foblex-m-render.mjs.map +1 -1
- package/package.json +1 -1
- package/types/foblex-m-render.d.ts +26 -5
|
@@ -11,105 +11,169 @@
|
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
:root {
|
|
14
|
-
--
|
|
15
|
-
--
|
|
16
|
-
--
|
|
17
|
-
|
|
18
|
-
--
|
|
19
|
-
--
|
|
20
|
-
--
|
|
21
|
-
--
|
|
22
|
-
|
|
23
|
-
--gray-
|
|
24
|
-
--gray-
|
|
25
|
-
--gray-
|
|
26
|
-
--gray-
|
|
27
|
-
|
|
28
|
-
--
|
|
29
|
-
--
|
|
30
|
-
--
|
|
31
|
-
--
|
|
32
|
-
|
|
33
|
-
--
|
|
34
|
-
--
|
|
35
|
-
--
|
|
36
|
-
--
|
|
37
|
-
|
|
38
|
-
--
|
|
39
|
-
|
|
40
|
-
--
|
|
41
|
-
--
|
|
42
|
-
|
|
43
|
-
--
|
|
44
|
-
--
|
|
45
|
-
--
|
|
46
|
-
--
|
|
47
|
-
|
|
48
|
-
--
|
|
49
|
-
--
|
|
50
|
-
--
|
|
51
|
-
--
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
--
|
|
56
|
-
|
|
57
|
-
--
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
--
|
|
61
|
-
|
|
62
|
-
--
|
|
14
|
+
--gray-0: #ffffff;
|
|
15
|
+
--gray-25: #fcfcfc;
|
|
16
|
+
--gray-50: #f9f9f9;
|
|
17
|
+
--gray-75: #f3f3f3;
|
|
18
|
+
--gray-100: #ededed;
|
|
19
|
+
--gray-150: #dfdfdf;
|
|
20
|
+
--gray-200: #c4c4c4;
|
|
21
|
+
--gray-250: #b9b9b9;
|
|
22
|
+
--gray-300: #afafaf;
|
|
23
|
+
--gray-350: #9f9f9f;
|
|
24
|
+
--gray-400: #8f8f8f;
|
|
25
|
+
--gray-450: #767676;
|
|
26
|
+
--gray-500: #5d5d5d;
|
|
27
|
+
--gray-550: #4f4f4f;
|
|
28
|
+
--gray-600: #414141;
|
|
29
|
+
--gray-650: #393939;
|
|
30
|
+
--gray-700: #303030;
|
|
31
|
+
--gray-750: #292929;
|
|
32
|
+
--gray-800: #212121;
|
|
33
|
+
--gray-850: #1c1c1c;
|
|
34
|
+
--gray-900: #181818;
|
|
35
|
+
--gray-925: #161616;
|
|
36
|
+
--gray-950: #131313;
|
|
37
|
+
--gray-975: #101010;
|
|
38
|
+
--gray-1000: #0d0d0d;
|
|
39
|
+
|
|
40
|
+
--alpha-02: rgba(13, 13, 13, 0.02);
|
|
41
|
+
--alpha-04: rgba(13, 13, 13, 0.04);
|
|
42
|
+
--alpha-06: rgba(13, 13, 13, 0.06);
|
|
43
|
+
--alpha-08: rgba(13, 13, 13, 0.08);
|
|
44
|
+
--alpha-10: rgba(13, 13, 13, 0.1);
|
|
45
|
+
--alpha-12: rgba(13, 13, 13, 0.12);
|
|
46
|
+
--alpha-15: rgba(13, 13, 13, 0.15);
|
|
47
|
+
--alpha-20: rgba(13, 13, 13, 0.2);
|
|
48
|
+
--alpha-25: rgba(13, 13, 13, 0.25);
|
|
49
|
+
--alpha-30: rgba(13, 13, 13, 0.3);
|
|
50
|
+
--alpha-40: rgba(13, 13, 13, 0.4);
|
|
51
|
+
--alpha-50: rgba(13, 13, 13, 0.5);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
:root {
|
|
55
|
+
--primary-text: var(--gray-850);
|
|
56
|
+
--secondary-text: var(--gray-550);
|
|
57
|
+
--tertiary-text: var(--gray-400);
|
|
58
|
+
|
|
59
|
+
--backdrop-color: rgba(0, 0, 0, 0.48);
|
|
60
|
+
--background-color: var(--gray-25);
|
|
61
|
+
--alt-background: var(--gray-50);
|
|
62
|
+
--soft-background: var(--gray-75);
|
|
63
|
+
--surface-glass: rgba(255, 255, 255, 0.78);
|
|
64
|
+
--surface-glass-strong: rgba(255, 255, 255, 0.92);
|
|
65
|
+
--page-background-image:
|
|
66
|
+
radial-gradient(circle at top center, rgba(13, 13, 13, 0.05) 0%, rgba(13, 13, 13, 0) 36%),
|
|
67
|
+
linear-gradient(180deg, rgba(13, 13, 13, 0.018) 0%, rgba(13, 13, 13, 0) 28%);
|
|
68
|
+
|
|
69
|
+
--gray-1: var(--gray-150);
|
|
70
|
+
--gray-2: var(--gray-100);
|
|
71
|
+
--gray-3: var(--gray-75);
|
|
72
|
+
--gray-soft: rgba(13, 13, 13, 0.05);
|
|
73
|
+
|
|
74
|
+
--indigo-1: var(--gray-900);
|
|
75
|
+
--indigo-2: var(--gray-950);
|
|
76
|
+
--indigo-3: var(--gray-1000);
|
|
77
|
+
--indigo-soft: rgba(13, 13, 13, 0.06);
|
|
78
|
+
|
|
79
|
+
--purple-1: #73581f;
|
|
80
|
+
--purple-2: #8e6a21;
|
|
81
|
+
--purple-3: #a67c26;
|
|
82
|
+
--purple-soft: rgba(166, 124, 38, 0.12);
|
|
83
|
+
|
|
84
|
+
--green-1: #0f7a5d;
|
|
85
|
+
--green-2: #0a906d;
|
|
86
|
+
--green-3: #08a17b;
|
|
87
|
+
--green-soft: rgba(8, 161, 123, 0.12);
|
|
88
|
+
|
|
89
|
+
--yellow-1: #8e5d0b;
|
|
90
|
+
--yellow-2: #a56a00;
|
|
91
|
+
--yellow-3: #be7a06;
|
|
92
|
+
--yellow-soft: rgba(190, 122, 6, 0.12);
|
|
93
|
+
|
|
94
|
+
--red-1: #a53c3c;
|
|
95
|
+
--red-2: #be4a4a;
|
|
96
|
+
--red-3: #d25b5b;
|
|
97
|
+
--red-soft: rgba(210, 91, 91, 0.12);
|
|
98
|
+
|
|
99
|
+
--divider-color: var(--gray-100);
|
|
100
|
+
--dark-divider-color: var(--gray-150);
|
|
101
|
+
--gutter-color: var(--gray-100);
|
|
102
|
+
|
|
103
|
+
--neutral: var(--gray-1000);
|
|
104
|
+
--neutral-inverse: var(--gray-0);
|
|
105
|
+
|
|
106
|
+
--barely-visible: var(--gray-25);
|
|
107
|
+
--sponsor: var(--gray-700);
|
|
63
108
|
}
|
|
64
109
|
|
|
65
110
|
.dark {
|
|
66
|
-
--
|
|
67
|
-
--
|
|
68
|
-
--
|
|
69
|
-
|
|
70
|
-
--
|
|
71
|
-
--
|
|
72
|
-
--
|
|
73
|
-
--
|
|
74
|
-
|
|
75
|
-
--
|
|
76
|
-
--
|
|
77
|
-
--
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
--
|
|
81
|
-
--
|
|
82
|
-
|
|
83
|
-
--
|
|
84
|
-
|
|
85
|
-
--
|
|
86
|
-
--
|
|
87
|
-
--
|
|
88
|
-
--
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
--
|
|
94
|
-
|
|
95
|
-
--
|
|
96
|
-
--
|
|
97
|
-
|
|
98
|
-
--
|
|
99
|
-
|
|
100
|
-
--
|
|
101
|
-
--
|
|
102
|
-
|
|
103
|
-
--
|
|
104
|
-
|
|
105
|
-
--
|
|
106
|
-
--
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
--
|
|
110
|
-
--
|
|
111
|
-
|
|
112
|
-
|
|
111
|
+
--alpha-02: rgba(255, 255, 255, 0.02);
|
|
112
|
+
--alpha-04: rgba(255, 255, 255, 0.04);
|
|
113
|
+
--alpha-06: rgba(255, 255, 255, 0.06);
|
|
114
|
+
--alpha-08: rgba(255, 255, 255, 0.08);
|
|
115
|
+
--alpha-10: rgba(255, 255, 255, 0.1);
|
|
116
|
+
--alpha-12: rgba(255, 255, 255, 0.12);
|
|
117
|
+
--alpha-15: rgba(255, 255, 255, 0.15);
|
|
118
|
+
--alpha-20: rgba(255, 255, 255, 0.2);
|
|
119
|
+
--alpha-25: rgba(255, 255, 255, 0.25);
|
|
120
|
+
--alpha-30: rgba(255, 255, 255, 0.3);
|
|
121
|
+
--alpha-40: rgba(255, 255, 255, 0.4);
|
|
122
|
+
--alpha-50: rgba(255, 255, 255, 0.5);
|
|
123
|
+
|
|
124
|
+
--primary-text: var(--gray-100);
|
|
125
|
+
--secondary-text: var(--gray-300);
|
|
126
|
+
--tertiary-text: var(--gray-450);
|
|
127
|
+
|
|
128
|
+
--backdrop-color: rgba(0, 0, 0, 0.58);
|
|
129
|
+
--background-color: var(--gray-1000);
|
|
130
|
+
--alt-background: var(--gray-975);
|
|
131
|
+
--soft-background: var(--gray-950);
|
|
132
|
+
--surface-glass: rgba(13, 13, 13, 0.78);
|
|
133
|
+
--surface-glass-strong: rgba(13, 13, 13, 0.92);
|
|
134
|
+
--page-background-image:
|
|
135
|
+
radial-gradient(circle at top center, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 36%),
|
|
136
|
+
linear-gradient(180deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0) 28%);
|
|
137
|
+
|
|
138
|
+
--gray-1: var(--gray-800);
|
|
139
|
+
--gray-2: var(--gray-900);
|
|
140
|
+
--gray-3: var(--gray-950);
|
|
141
|
+
--gray-soft: rgba(255, 255, 255, 0.06);
|
|
142
|
+
|
|
143
|
+
--indigo-1: var(--gray-100);
|
|
144
|
+
--indigo-2: var(--gray-25);
|
|
145
|
+
--indigo-3: var(--gray-0);
|
|
146
|
+
--indigo-soft: rgba(255, 255, 255, 0.08);
|
|
147
|
+
|
|
148
|
+
--purple-1: #f0d48d;
|
|
149
|
+
--purple-2: #d9b15a;
|
|
150
|
+
--purple-3: #936f2b;
|
|
151
|
+
--purple-soft: rgba(240, 212, 141, 0.14);
|
|
152
|
+
|
|
153
|
+
--green-1: #88dfc2;
|
|
154
|
+
--green-2: #54c6a0;
|
|
155
|
+
--green-3: #1a8f6c;
|
|
156
|
+
--green-soft: rgba(136, 223, 194, 0.14);
|
|
157
|
+
|
|
158
|
+
--yellow-1: #f3c97a;
|
|
159
|
+
--yellow-2: #d39831;
|
|
160
|
+
--yellow-3: #8f6012;
|
|
161
|
+
--yellow-soft: rgba(243, 201, 122, 0.14);
|
|
162
|
+
|
|
163
|
+
--red-1: #f0aaaa;
|
|
164
|
+
--red-2: #d77a7a;
|
|
165
|
+
--red-3: #8f3f3f;
|
|
166
|
+
--red-soft: rgba(240, 170, 170, 0.14);
|
|
167
|
+
|
|
168
|
+
--divider-color: var(--gray-800);
|
|
169
|
+
--dark-divider-color: var(--gray-700);
|
|
170
|
+
--gutter-color: var(--gray-700);
|
|
171
|
+
|
|
172
|
+
--neutral: var(--gray-0);
|
|
173
|
+
--neutral-inverse: var(--gray-1000);
|
|
174
|
+
|
|
175
|
+
--barely-visible: var(--gray-975);
|
|
176
|
+
--sponsor: var(--gray-250);
|
|
113
177
|
}
|
|
114
178
|
|
|
115
179
|
:root {
|
|
@@ -146,46 +210,46 @@
|
|
|
146
210
|
:root {
|
|
147
211
|
--font-family-base: 'Inter', ui-sans-serif, system-ui, sans-serif,
|
|
148
212
|
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
149
|
-
--font-family-mono: ui-monospace, 'Menlo', 'Monaco', 'Consolas',
|
|
213
|
+
--font-family-mono: ui-monospace, 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas',
|
|
150
214
|
'Liberation Mono', 'Courier New', monospace;
|
|
151
215
|
font-optical-sizing: auto;
|
|
152
216
|
}
|
|
153
217
|
|
|
154
218
|
:root {
|
|
155
|
-
--shadow-1: 0 1px 2px rgba(
|
|
156
|
-
--shadow-2: 0
|
|
157
|
-
--shadow-3: 0
|
|
158
|
-
--shadow-4: 0
|
|
159
|
-
--shadow-5: 0
|
|
219
|
+
--shadow-1: 0 1px 2px rgba(13, 13, 13, 0.04), 0 6px 16px rgba(13, 13, 13, 0.04);
|
|
220
|
+
--shadow-2: 0 8px 24px rgba(13, 13, 13, 0.06), 0 2px 6px rgba(13, 13, 13, 0.04);
|
|
221
|
+
--shadow-3: 0 18px 48px rgba(13, 13, 13, 0.12), 0 6px 18px rgba(13, 13, 13, 0.08);
|
|
222
|
+
--shadow-4: 0 28px 72px rgba(13, 13, 13, 0.16), 0 10px 28px rgba(13, 13, 13, 0.1);
|
|
223
|
+
--shadow-5: 0 34px 96px rgba(13, 13, 13, 0.18), 0 14px 36px rgba(13, 13, 13, 0.12);
|
|
160
224
|
}
|
|
161
225
|
|
|
162
226
|
:root {
|
|
163
|
-
--header-height:
|
|
164
|
-
--layout-max-width:
|
|
165
|
-
--border-radius:
|
|
227
|
+
--header-height: 68px;
|
|
228
|
+
--layout-max-width: 1480px;
|
|
229
|
+
--border-radius: 14px;
|
|
166
230
|
}
|
|
167
231
|
|
|
168
232
|
:root {
|
|
169
|
-
--navigation-panel-padding:
|
|
170
|
-
--navigation-panel-width:
|
|
171
|
-
--navigation-panel-background: var(--
|
|
233
|
+
--navigation-panel-padding: 20px;
|
|
234
|
+
--navigation-panel-width: clamp(236px, 24vw, 252px);
|
|
235
|
+
--navigation-panel-background: var(--surface-glass-strong);
|
|
172
236
|
}
|
|
173
237
|
|
|
174
238
|
:root {
|
|
175
|
-
--not-pre-code-background: var(--
|
|
239
|
+
--not-pre-code-background: var(--soft-background);
|
|
176
240
|
--not-pre-code-font-size: 0.875em;
|
|
177
|
-
--not-pre-code-color: var(--primary-
|
|
241
|
+
--not-pre-code-color: var(--primary-text);
|
|
178
242
|
}
|
|
179
243
|
|
|
180
244
|
:root {
|
|
181
|
-
--on-page-navigation-width:
|
|
182
|
-
--page-padding:
|
|
245
|
+
--on-page-navigation-width: 236px;
|
|
246
|
+
--page-padding: 24px;
|
|
183
247
|
}
|
|
184
248
|
|
|
185
249
|
:root {
|
|
186
|
-
--f-alert-tip-background: var(--
|
|
250
|
+
--f-alert-tip-background: var(--soft-background);
|
|
187
251
|
--f-alert-tip-color: var(--primary-text);
|
|
188
|
-
--f-alert-tip-border-color: var(--
|
|
252
|
+
--f-alert-tip-border-color: var(--divider-color);
|
|
189
253
|
|
|
190
254
|
--f-alert-info-background: var(--primary-soft);
|
|
191
255
|
--f-alert-info-color: var(--primary-text);
|
|
@@ -203,15 +267,14 @@
|
|
|
203
267
|
--f-alert-success-color: var(--primary-text);
|
|
204
268
|
--f-alert-success-border-color: var(--success-1);
|
|
205
269
|
|
|
206
|
-
--f-alert-border-radius: var(--border-radius);
|
|
270
|
+
--f-alert-border-radius: calc(var(--border-radius) - 2px);
|
|
207
271
|
}
|
|
208
272
|
|
|
209
273
|
:root {
|
|
210
|
-
|
|
211
274
|
--f-badge-tip-color: var(--secondary-text);
|
|
212
|
-
--f-badge-tip-background: var(--
|
|
275
|
+
--f-badge-tip-background: var(--soft-background);
|
|
213
276
|
|
|
214
|
-
--f-badge-info-color: var(--primary-
|
|
277
|
+
--f-badge-info-color: var(--primary-text);
|
|
215
278
|
--f-badge-info-background: var(--primary-soft);
|
|
216
279
|
|
|
217
280
|
--f-badge-warning-color: var(--warning-1);
|
|
@@ -225,59 +288,81 @@
|
|
|
225
288
|
}
|
|
226
289
|
|
|
227
290
|
:root {
|
|
228
|
-
--code-view-not-focused-opacity: 0.
|
|
229
|
-
--code-view-background: var(--
|
|
230
|
-
--code-view-border-
|
|
291
|
+
--code-view-not-focused-opacity: 0.45;
|
|
292
|
+
--code-view-background: var(--surface-glass-strong);
|
|
293
|
+
--code-view-border-color: var(--divider-color);
|
|
294
|
+
--code-view-border-radius: calc(var(--border-radius) + 2px);
|
|
231
295
|
|
|
232
|
-
--code-view-text-color: var(--
|
|
296
|
+
--code-view-text-color: var(--primary-text);
|
|
233
297
|
--code-view-line-height: 1.7;
|
|
234
298
|
--code-view-font-size: 0.875em;
|
|
235
299
|
|
|
236
300
|
--code-view-lang-color: var(--tertiary-text);
|
|
237
301
|
|
|
238
|
-
--code-view-copy-button-background: var(--
|
|
239
|
-
--code-view-copy-button-hover-background: var(--
|
|
302
|
+
--code-view-copy-button-background: var(--background-color);
|
|
303
|
+
--code-view-copy-button-hover-background: var(--gray-0);
|
|
240
304
|
--code-view-copy-button-border-color: var(--divider-color);
|
|
241
305
|
}
|
|
242
306
|
|
|
307
|
+
.dark {
|
|
308
|
+
--code-view-copy-button-hover-background: var(--gray-925);
|
|
309
|
+
}
|
|
310
|
+
|
|
243
311
|
:root {
|
|
244
|
-
--code-group-tabs-background: var(--
|
|
245
|
-
--code-group-border-radius: var(--border-radius);
|
|
312
|
+
--code-group-tabs-background: var(--surface-glass-strong);
|
|
313
|
+
--code-group-border-radius: calc(var(--border-radius) + 2px);
|
|
246
314
|
--code-group-tabs-border-color: var(--gutter-color);
|
|
247
315
|
|
|
248
316
|
--code-group-tab-button-text-color: var(--secondary-text);
|
|
249
317
|
--code-group-tab-button-active-text-color: var(--primary-text);
|
|
250
|
-
--code-group-tab-button-active-border-color: var(--primary-
|
|
318
|
+
--code-group-tab-button-active-border-color: var(--primary-text);
|
|
251
319
|
--code-group-line-height: 1.7;
|
|
252
320
|
--code-group-tab-button-font-size: 14px;
|
|
253
321
|
}
|
|
254
322
|
|
|
255
323
|
:root {
|
|
256
|
-
--theme-button-background: var(--
|
|
324
|
+
--theme-button-background: var(--soft-background);
|
|
257
325
|
--theme-button-border-color: var(--divider-color);
|
|
258
326
|
--theme-button-hovered-border-color: var(--dark-divider-color);
|
|
259
|
-
--theme-button-icon-background: var(--
|
|
327
|
+
--theme-button-icon-background: var(--background-color);
|
|
328
|
+
--theme-button-icon-border-color: var(--divider-color);
|
|
260
329
|
}
|
|
261
330
|
|
|
262
331
|
:root {
|
|
263
|
-
--button-primary-text: var(--
|
|
264
|
-
--button-primary-bg: var(--
|
|
265
|
-
--button-primary-
|
|
266
|
-
--button-primary-hover-
|
|
267
|
-
--button-primary-
|
|
268
|
-
--button-primary-
|
|
332
|
+
--button-primary-text: var(--neutral-inverse);
|
|
333
|
+
--button-primary-bg: var(--neutral);
|
|
334
|
+
--button-primary-border: var(--neutral);
|
|
335
|
+
--button-primary-hover-text: var(--neutral-inverse);
|
|
336
|
+
--button-primary-hover-bg: var(--gray-850);
|
|
337
|
+
--button-primary-hover-border: var(--gray-850);
|
|
338
|
+
--button-primary-active-text: var(--neutral-inverse);
|
|
339
|
+
--button-primary-active-bg: var(--gray-800);
|
|
340
|
+
--button-primary-active-border: var(--gray-800);
|
|
269
341
|
|
|
270
342
|
--button-default-text: var(--primary-text);
|
|
271
|
-
--button-default-bg: var(--
|
|
343
|
+
--button-default-bg: var(--surface-glass-strong);
|
|
344
|
+
--button-default-border: var(--divider-color);
|
|
272
345
|
--button-default-hover-text: var(--primary-text);
|
|
273
|
-
--button-default-hover-bg: var(--
|
|
346
|
+
--button-default-hover-bg: var(--gray-0);
|
|
347
|
+
--button-default-hover-border: var(--dark-divider-color);
|
|
274
348
|
--button-default-active-text: var(--primary-text);
|
|
275
|
-
--button-default-active-bg: var(--
|
|
349
|
+
--button-default-active-bg: var(--soft-background);
|
|
350
|
+
--button-default-active-border: var(--dark-divider-color);
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
.dark {
|
|
354
|
+
--button-primary-hover-bg: var(--gray-25);
|
|
355
|
+
--button-primary-hover-border: var(--gray-25);
|
|
356
|
+
--button-primary-active-bg: var(--gray-50);
|
|
357
|
+
--button-primary-active-border: var(--gray-50);
|
|
358
|
+
|
|
359
|
+
--button-default-hover-bg: var(--gray-925);
|
|
360
|
+
--button-default-active-bg: var(--gray-900);
|
|
276
361
|
}
|
|
277
362
|
|
|
278
363
|
:root {
|
|
279
364
|
--checkbox-size: 16px;
|
|
280
|
-
--checkbox-border-radius:
|
|
365
|
+
--checkbox-border-radius: 6px;
|
|
281
366
|
--checkbox-text: var(--primary-text);
|
|
282
367
|
|
|
283
368
|
--checkbox-container-background: var(--default-3);
|
|
@@ -290,7 +375,7 @@
|
|
|
290
375
|
|
|
291
376
|
:root {
|
|
292
377
|
--radio-button-size: 16px;
|
|
293
|
-
--radio-button-container-border-radius:
|
|
378
|
+
--radio-button-container-border-radius: 999px;
|
|
294
379
|
--radio-button-text: var(--primary-text);
|
|
295
380
|
--radio-button-container-background: var(--default-3);
|
|
296
381
|
|
|
@@ -16,6 +16,7 @@ html {
|
|
|
16
16
|
line-height: 1.4;
|
|
17
17
|
font-size: 16px;
|
|
18
18
|
-webkit-text-size-adjust: 100%;
|
|
19
|
+
background-color: var(--background-color);
|
|
19
20
|
|
|
20
21
|
&.dark {
|
|
21
22
|
color-scheme: dark;
|
|
@@ -37,6 +38,8 @@ body {
|
|
|
37
38
|
text-rendering: optimizeLegibility;
|
|
38
39
|
-webkit-font-smoothing: antialiased;
|
|
39
40
|
-moz-osx-font-smoothing: grayscale;
|
|
41
|
+
background-image: var(--page-background-image);
|
|
42
|
+
background-attachment: fixed;
|
|
40
43
|
}
|
|
41
44
|
|
|
42
45
|
p {
|
|
@@ -53,6 +56,8 @@ a {
|
|
|
53
56
|
|
|
54
57
|
* {
|
|
55
58
|
box-sizing: border-box;
|
|
59
|
+
scrollbar-color: var(--alpha-25) transparent;
|
|
60
|
+
scrollbar-width: thin;
|
|
56
61
|
}
|
|
57
62
|
|
|
58
63
|
.flex-space {
|