@utrecht/component-library-css 6.1.0 → 7.1.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/dist/html.css +18 -49
- package/dist/index.css +286 -460
- package/dist/prince-xml.css +285 -443
- package/package.json +97 -3
package/dist/index.css
CHANGED
|
@@ -5,78 +5,21 @@
|
|
|
5
5
|
*/
|
|
6
6
|
/**
|
|
7
7
|
* @license EUPL-1.2
|
|
8
|
-
* Copyright (c)
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* @license EUPL-1.2
|
|
12
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
13
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
14
|
-
*/
|
|
15
|
-
/**
|
|
16
|
-
* @license EUPL-1.2
|
|
17
|
-
* Copyright (c) 2022 Gemeente Utrecht
|
|
18
|
-
* Copyright (c) 2022 Robbert Broersma
|
|
19
|
-
*/
|
|
20
|
-
/**
|
|
21
|
-
* @license EUPL-1.2
|
|
22
|
-
* Copyright (c) 2022 The Knights Who Say NIH! B.V.
|
|
23
|
-
* Copyright (c) 2022 Gemeente Utrecht
|
|
24
|
-
*/
|
|
25
|
-
/**
|
|
26
|
-
* @license EUPL-1.2
|
|
27
|
-
* Copyright (c) 2022 Robbert Broersma
|
|
28
|
-
*/
|
|
29
|
-
/**
|
|
30
|
-
* @license EUPL-1.2
|
|
31
|
-
* Copyright (c) 2022 Gemeente Utrecht
|
|
32
|
-
* Copyright (c) 2022 Robbert Broersma
|
|
33
|
-
* Copyright (c) 2022 The Knights Who Say NIH! B.V.
|
|
34
|
-
*/
|
|
35
|
-
/**
|
|
36
|
-
* @license EUPL-1.2
|
|
37
|
-
* Copyright (c) 2021-2022 Frameless B.V.
|
|
38
|
-
*/
|
|
39
|
-
/**
|
|
40
|
-
* @license EUPL-1.2
|
|
41
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
42
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
43
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
8
|
+
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
9
|
+
* Copyright (c) 2020-2022 Frameless B.V.
|
|
44
10
|
*/
|
|
45
11
|
/**
|
|
46
12
|
* @license EUPL-1.2
|
|
47
13
|
* Copyright (c) 2023 Frameless B.V.
|
|
48
14
|
*/
|
|
49
|
-
/**
|
|
50
|
-
* @license EUPL-1.2
|
|
51
|
-
* Copyright (c) 2021-2022 Gemeente Utrecht
|
|
52
|
-
* Copyright (c) 2021-2022 Frameless B.V.
|
|
53
|
-
*/
|
|
54
|
-
/**
|
|
55
|
-
* @license EUPL-1.2
|
|
56
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
57
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
58
|
-
*/
|
|
59
|
-
/**
|
|
60
|
-
* @license EUPL-1.2
|
|
61
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
62
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
63
|
-
*/
|
|
64
15
|
/**
|
|
65
16
|
* @license EUPL-1.2
|
|
66
17
|
* Copyright (c) 2022 Frameless B.V.
|
|
67
18
|
*/
|
|
68
19
|
/**
|
|
69
20
|
* @license EUPL-1.2
|
|
70
|
-
* Copyright (c)
|
|
71
|
-
|
|
72
|
-
/**
|
|
73
|
-
* @license EUPL-1.2
|
|
74
|
-
* Copyright (c) 2020-2022 Gemeente Utrecht
|
|
75
|
-
* Copyright (c) 2020-2022 Frameless B.V.
|
|
76
|
-
*/
|
|
77
|
-
/**
|
|
78
|
-
* @license EUPL-1.2
|
|
79
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
21
|
+
* Copyright (c) 2020-2024 Frameless B.V.
|
|
22
|
+
* Copyright (c) 2021-2024 Gemeente Utrecht
|
|
80
23
|
*/
|
|
81
24
|
@charset "UTF-8";
|
|
82
25
|
.utrecht-accordion {
|
|
@@ -179,15 +122,19 @@
|
|
|
179
122
|
padding-block-start: var(--utrecht-alert-padding-block-start);
|
|
180
123
|
padding-inline-end: var(--utrecht-alert-padding-inline-end);
|
|
181
124
|
padding-inline-start: var(--utrecht-alert-padding-inline-start);
|
|
125
|
+
align-self: center;
|
|
182
126
|
border-color: var(--utrecht-alert-dialog-border-color);
|
|
183
127
|
border-radius: var(--utrecht-alert-dialog-border-radius, 0);
|
|
184
128
|
border-style: solid;
|
|
185
129
|
border-width: var(--utrecht-alert-dialog-border-width, 0);
|
|
186
130
|
box-shadow: var(--utrecht-alert-dialog-box-shadow);
|
|
187
|
-
|
|
188
|
-
max-
|
|
131
|
+
justify-self: center;
|
|
132
|
+
max-block-size: min(var(--utrecht-alert-dialog-max-block-size), 100%);
|
|
133
|
+
max-inline-size: min(var(--utrecht-alert-dialog-max-inline-size), 100%);
|
|
189
134
|
min-block-size: var(--utrecht-alert-dialog-min-block-size);
|
|
190
135
|
min-inline-size: var(--utrecht-alert-dialog-min-inline-size);
|
|
136
|
+
overflow-y: auto;
|
|
137
|
+
overflow-block: auto;
|
|
191
138
|
}
|
|
192
139
|
|
|
193
140
|
.utrecht-alert-dialog::backdrop {
|
|
@@ -385,35 +332,6 @@
|
|
|
385
332
|
border-width: 1px;
|
|
386
333
|
}
|
|
387
334
|
}
|
|
388
|
-
.utrecht-badge-data {
|
|
389
|
-
background-color: var(--utrecht-badge-background-color, hsl(0, 0%, 0%));
|
|
390
|
-
border-radius: var(--utrecht-badge-border-radius, 0.5ch);
|
|
391
|
-
color: var(--utrecht-badge-color, hsl(0, 0%, 100%));
|
|
392
|
-
display: inline-block;
|
|
393
|
-
font-family: var(--utrecht-document-font-family, sans-serif);
|
|
394
|
-
font-size: var(--utrecht-badge-font-size, inherit);
|
|
395
|
-
font-style: var(--utrecht-badge-font-style, normal);
|
|
396
|
-
font-weight: var(--utrecht-badge-font-weight, bold);
|
|
397
|
-
line-height: var(--utrecht-badge-line-height, 1em);
|
|
398
|
-
max-block-size: max-content;
|
|
399
|
-
max-inline-size: max-content;
|
|
400
|
-
min-block-size: 1em;
|
|
401
|
-
min-inline-size: 1em;
|
|
402
|
-
padding-block-end: var(--utrecht-badge-padding-block, 0.5ex);
|
|
403
|
-
padding-block-start: var(--utrecht-badge-padding-block, 0.5ex);
|
|
404
|
-
padding-inline-end: var(--utrecht-badge-padding-inline, 0.5ch);
|
|
405
|
-
padding-inline-start: var(--utrecht-badge-padding-inline, 0.5ch);
|
|
406
|
-
text-decoration: none;
|
|
407
|
-
letter-spacing: var(--utrecht-badge-data-letter-spacing, inherit);
|
|
408
|
-
text-transform: var(--utrecht-badge-data-text-transform, inherit);
|
|
409
|
-
}
|
|
410
|
-
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
|
|
411
|
-
.utrecht-badge-data {
|
|
412
|
-
border-color: currentColor;
|
|
413
|
-
border-style: solid;
|
|
414
|
-
border-width: 1px;
|
|
415
|
-
}
|
|
416
|
-
}
|
|
417
335
|
.utrecht-badge-list {
|
|
418
336
|
column-gap: var(--utrecht-badge-list-column-gap);
|
|
419
337
|
display: flex;
|
|
@@ -555,6 +473,27 @@
|
|
|
555
473
|
color: var(--utrecht-blockquote-content-color, inherit);
|
|
556
474
|
font-size: var(--utrecht-blockquote-content-font-size, inherit);
|
|
557
475
|
}
|
|
476
|
+
.utrecht-body {
|
|
477
|
+
block-size: 100%;
|
|
478
|
+
font-family: var(--utrecht-body-font-family, inherit);
|
|
479
|
+
font-size: var(--utrecht-body-font-size, inherit);
|
|
480
|
+
font-weight: var(--utrecht-body-font-weight, inherit);
|
|
481
|
+
line-height: var(--utrecht-body-line-height, inherit);
|
|
482
|
+
margin-block-end: 0;
|
|
483
|
+
margin-block-start: 0;
|
|
484
|
+
margin-inline-end: 0;
|
|
485
|
+
margin-inline-start: 0;
|
|
486
|
+
padding-block-end: 0;
|
|
487
|
+
padding-block-start: 0;
|
|
488
|
+
padding-inline-end: 0;
|
|
489
|
+
padding-inline-start: 0;
|
|
490
|
+
}
|
|
491
|
+
@media screen {
|
|
492
|
+
.utrecht-body {
|
|
493
|
+
min-block-size: 100vh;
|
|
494
|
+
min-block-size: 100vb;
|
|
495
|
+
}
|
|
496
|
+
}
|
|
558
497
|
.utrecht-breadcrumb-nav {
|
|
559
498
|
--utrecht-focus-background-color: var(--utrecht-breadcrumb-nav-link-focus-background-color);
|
|
560
499
|
--utrecht-link-background-color: var(--utrecht-breadcrumb-nav-link-background-color);
|
|
@@ -720,6 +659,7 @@
|
|
|
720
659
|
.utrecht-button-group {
|
|
721
660
|
align-items: baseline;
|
|
722
661
|
background-color: var(--utrecht-button-group-background-color);
|
|
662
|
+
break-inside: avoid;
|
|
723
663
|
display: flex;
|
|
724
664
|
flex-wrap: wrap;
|
|
725
665
|
gap: var(--utrecht-button-group-inline-gap, 1em);
|
|
@@ -1013,6 +953,7 @@
|
|
|
1013
953
|
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
1014
954
|
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
1015
955
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
956
|
+
z-index: 1;
|
|
1016
957
|
}
|
|
1017
958
|
|
|
1018
959
|
.utrecht-button-link--placeholder {
|
|
@@ -1036,6 +977,7 @@
|
|
|
1036
977
|
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
1037
978
|
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
1038
979
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
980
|
+
z-index: 1;
|
|
1039
981
|
}
|
|
1040
982
|
.utrecht-button-link--html-a:hover {
|
|
1041
983
|
background-color: var(--_utrecht-button-hover-background-color);
|
|
@@ -1398,6 +1340,7 @@
|
|
|
1398
1340
|
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
1399
1341
|
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
1400
1342
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
1343
|
+
z-index: 1;
|
|
1401
1344
|
}
|
|
1402
1345
|
|
|
1403
1346
|
.utrecht-button--focus:not(.utrecht-button--disabled) {
|
|
@@ -1415,6 +1358,7 @@
|
|
|
1415
1358
|
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
1416
1359
|
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
1417
1360
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
1361
|
+
z-index: 1;
|
|
1418
1362
|
}
|
|
1419
1363
|
|
|
1420
1364
|
.utrecht-button:focus:not(:disabled, [aria-disabled=true], .utrecht-button--disabled) {
|
|
@@ -1891,6 +1835,7 @@
|
|
|
1891
1835
|
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
1892
1836
|
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
1893
1837
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
1838
|
+
z-index: 1;
|
|
1894
1839
|
}
|
|
1895
1840
|
|
|
1896
1841
|
.utrecht-checkbox--html-input:disabled {
|
|
@@ -1904,6 +1849,7 @@
|
|
|
1904
1849
|
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
1905
1850
|
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
1906
1851
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
1852
|
+
z-index: 1;
|
|
1907
1853
|
}
|
|
1908
1854
|
.utrecht-code-block {
|
|
1909
1855
|
background-color: var(--utrecht-code-background-color);
|
|
@@ -2008,7 +1954,7 @@
|
|
|
2008
1954
|
inset: 0;
|
|
2009
1955
|
overflow: auto;
|
|
2010
1956
|
position: absolute;
|
|
2011
|
-
z-index: var(--utrecht-combobox-popover-z-index);
|
|
1957
|
+
z-index: var(--utrecht-combobox-popover-z-index, 1);
|
|
2012
1958
|
}
|
|
2013
1959
|
|
|
2014
1960
|
.utrecht-combobox__popover--block-end {
|
|
@@ -2087,7 +2033,6 @@
|
|
|
2087
2033
|
.utrecht-checkbox--custom.utrecht-checkbox--active,
|
|
2088
2034
|
.utrecht-custom-checkbox--active {
|
|
2089
2035
|
background-color: var(--utrecht-checkbox-active-background-color, var(--utrecht-checkbox-background-color));
|
|
2090
|
-
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
|
|
2091
2036
|
border-color: var(--utrecht-checkbox-active-border-color, var(--utrecht-checkbox-border-color));
|
|
2092
2037
|
border-width: var(--utrecht-checkbox-active-border-width, var(--utrecht-checkbox-border-width));
|
|
2093
2038
|
color: var(--utrecht-checkbox-active-color, var(--utrecht-checkbox-color));
|
|
@@ -2103,7 +2048,6 @@
|
|
|
2103
2048
|
.utrecht-checkbox--custom.utrecht-checkbox--focus,
|
|
2104
2049
|
.utrecht-custom-checkbox--focus {
|
|
2105
2050
|
background-color: var(--utrecht-checkbox-focus-background-color, var(--utrecht-checkbox-background-color));
|
|
2106
|
-
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
|
|
2107
2051
|
border-color: var(--utrecht-checkbox-focus-border-color, var(--utrecht-checkbox-border-color));
|
|
2108
2052
|
border-width: var(--utrecht-checkbox-focus-border-width, var(--utrecht-checkbox-border-width));
|
|
2109
2053
|
}
|
|
@@ -2117,6 +2061,7 @@
|
|
|
2117
2061
|
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
2118
2062
|
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
2119
2063
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
2064
|
+
z-index: 1;
|
|
2120
2065
|
}
|
|
2121
2066
|
|
|
2122
2067
|
.utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled,
|
|
@@ -2143,7 +2088,6 @@
|
|
|
2143
2088
|
.utrecht-checkbox--custom.utrecht-checkbox--html-input:focus,
|
|
2144
2089
|
.utrecht-custom-checkbox--html-input:focus {
|
|
2145
2090
|
background-color: var(--utrecht-checkbox-focus-background-color, var(--utrecht-checkbox-background-color));
|
|
2146
|
-
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
|
|
2147
2091
|
border-color: var(--utrecht-checkbox-focus-border-color, var(--utrecht-checkbox-border-color));
|
|
2148
2092
|
border-width: var(--utrecht-checkbox-focus-border-width, var(--utrecht-checkbox-border-width));
|
|
2149
2093
|
}
|
|
@@ -2156,6 +2100,7 @@
|
|
|
2156
2100
|
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
2157
2101
|
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
2158
2102
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
2103
|
+
z-index: 1;
|
|
2159
2104
|
}
|
|
2160
2105
|
.utrecht-checkbox--custom.utrecht-checkbox--html-input:invalid, .utrecht-checkbox--custom.utrecht-checkbox--html-input[aria-invalid=true],
|
|
2161
2106
|
.utrecht-custom-checkbox--html-input:invalid,
|
|
@@ -2166,7 +2111,6 @@
|
|
|
2166
2111
|
.utrecht-checkbox--custom.utrecht-checkbox--html-input:active,
|
|
2167
2112
|
.utrecht-custom-checkbox--html-input:active {
|
|
2168
2113
|
background-color: var(--utrecht-checkbox-active-background-color, var(--utrecht-checkbox-background-color));
|
|
2169
|
-
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
|
|
2170
2114
|
border-color: var(--utrecht-checkbox-active-border-color, var(--utrecht-checkbox-border-color));
|
|
2171
2115
|
border-width: var(--utrecht-checkbox-active-border-width, var(--utrecht-checkbox-border-width));
|
|
2172
2116
|
color: var(--utrecht-checkbox-active-color, var(--utrecht-checkbox-color));
|
|
@@ -2187,6 +2131,27 @@
|
|
|
2187
2131
|
border-width: var(--utrecht-checkbox-indeterminate-border-width, var(--utrecht-checkbox-border-width));
|
|
2188
2132
|
color: var(--utrecht-checkbox-indeterminate-color, var(--utrecht-checkbox-color));
|
|
2189
2133
|
}
|
|
2134
|
+
.utrecht-badge-data,
|
|
2135
|
+
.utrecht-data-badge {
|
|
2136
|
+
background-color: var(--utrecht-data-badge-background-color, var(--utrecht-badge-background-color, hsl(0, 0%, 0%)));
|
|
2137
|
+
border-radius: var(--utrecht-data-badge-border-radius, var(--utrecht-badge-border-radius, 0.5ch));
|
|
2138
|
+
border-width: var(--utrecht-data-badge-border-width, 0);
|
|
2139
|
+
color: var(--utrecht-data-badge-color, var(--utrecht-badge-color, hsl(0, 0%, 100%)));
|
|
2140
|
+
display: inline-block;
|
|
2141
|
+
font-family: var(--utrecht-data-badge-font-family, var(--utrecht-document-font-family, sans-serif));
|
|
2142
|
+
font-size: var(--utrecht-data-badge-font-size, var(--utrecht-badge-font-size, inherit));
|
|
2143
|
+
font-weight: var(--utrecht-data-badge-font-weight, var(--utrecht-badge-font-weight, bold));
|
|
2144
|
+
line-height: var(--utrecht-data-badge-line-height, var(--utrecht-badge-line-height, 1em));
|
|
2145
|
+
max-block-size: max-content;
|
|
2146
|
+
max-inline-size: max-content;
|
|
2147
|
+
min-block-size: var(--utrecht-data-badge-min-block-size, 1em);
|
|
2148
|
+
min-inline-size: var(--utrecht-data-badge-min-inline-size, 1em);
|
|
2149
|
+
padding-block-end: var(--utrecht-data-badge-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
|
|
2150
|
+
padding-block-start: var(--utrecht-data-badge-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
|
|
2151
|
+
padding-inline-end: var(--utrecht-data-badge-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
|
|
2152
|
+
padding-inline-start: var(--utrecht-data-badge-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
|
|
2153
|
+
text-decoration: none;
|
|
2154
|
+
}
|
|
2190
2155
|
.utrecht-data-list {
|
|
2191
2156
|
display: block;
|
|
2192
2157
|
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-data-list-margin-block-end, 0));
|
|
@@ -2702,6 +2667,7 @@
|
|
|
2702
2667
|
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
2703
2668
|
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
2704
2669
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
2670
|
+
z-index: 1;
|
|
2705
2671
|
}
|
|
2706
2672
|
|
|
2707
2673
|
.utrecht-form-toggle--hover {
|
|
@@ -2770,6 +2736,7 @@
|
|
|
2770
2736
|
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
2771
2737
|
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
2772
2738
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
2739
|
+
z-index: 1;
|
|
2773
2740
|
}
|
|
2774
2741
|
|
|
2775
2742
|
.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox {
|
|
@@ -2793,6 +2760,7 @@
|
|
|
2793
2760
|
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
2794
2761
|
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
2795
2762
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
2763
|
+
z-index: 1;
|
|
2796
2764
|
}
|
|
2797
2765
|
.utrecht-form {
|
|
2798
2766
|
display: block;
|
|
@@ -2923,8 +2891,10 @@
|
|
|
2923
2891
|
pointer-events: none;
|
|
2924
2892
|
width: 100%;
|
|
2925
2893
|
}
|
|
2926
|
-
.utrecht-img {
|
|
2894
|
+
.utrecht-img:not(img[height]) {
|
|
2927
2895
|
height: auto;
|
|
2896
|
+
}
|
|
2897
|
+
.utrecht-img:not(img[width]) {
|
|
2928
2898
|
width: auto;
|
|
2929
2899
|
}
|
|
2930
2900
|
|
|
@@ -2966,6 +2936,7 @@
|
|
|
2966
2936
|
text-underline-offset: var(--utrecht-link-text-underline-offset);
|
|
2967
2937
|
--utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
|
|
2968
2938
|
align-items: center;
|
|
2939
|
+
border-radius: var(--utrecht-button-border-radius, 0);
|
|
2969
2940
|
cursor: pointer;
|
|
2970
2941
|
display: inline-flex;
|
|
2971
2942
|
font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
|
|
@@ -3018,6 +2989,7 @@
|
|
|
3018
2989
|
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
3019
2990
|
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
3020
2991
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
2992
|
+
z-index: 1;
|
|
3021
2993
|
--_utrecht-link-state-text-decoration: var(
|
|
3022
2994
|
--utrecht-link-focus-visible-text-decoration,
|
|
3023
2995
|
var(--utrecht-link-focus-text-decoration)
|
|
@@ -3118,6 +3090,7 @@
|
|
|
3118
3090
|
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
3119
3091
|
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
3120
3092
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
3093
|
+
z-index: 1;
|
|
3121
3094
|
}
|
|
3122
3095
|
|
|
3123
3096
|
.utrecht-link-social--distanced {
|
|
@@ -3166,6 +3139,7 @@
|
|
|
3166
3139
|
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
3167
3140
|
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
3168
3141
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
3142
|
+
z-index: 1;
|
|
3169
3143
|
--_utrecht-link-state-text-decoration: var(
|
|
3170
3144
|
--utrecht-link-focus-visible-text-decoration,
|
|
3171
3145
|
var(--utrecht-link-focus-text-decoration)
|
|
@@ -3185,6 +3159,7 @@
|
|
|
3185
3159
|
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
3186
3160
|
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
3187
3161
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
3162
|
+
z-index: 1;
|
|
3188
3163
|
--_utrecht-link-state-text-decoration: var(
|
|
3189
3164
|
--utrecht-link-focus-visible-text-decoration,
|
|
3190
3165
|
var(--utrecht-link-focus-text-decoration)
|
|
@@ -3262,18 +3237,20 @@
|
|
|
3262
3237
|
}
|
|
3263
3238
|
.utrecht-listbox {
|
|
3264
3239
|
--utrecht-listbox-max-block-size: 300px;
|
|
3265
|
-
background-color: var(--utrecht-listbox-background-color);
|
|
3266
|
-
border-color: var(--utrecht-listbox-border-color);
|
|
3240
|
+
background-color: var(--_utrecht-listbox-disabled-background-color, var(--_utrecht-listbox-interactive-background-color, var(--utrecht-listbox-background-color)));
|
|
3241
|
+
border-color: var(--_utrecht-listbox-disabled-border-color, var(--_utrecht-listbox-interactive-border-color, var(--utrecht-listbox-border-color)));
|
|
3267
3242
|
border-radius: var(--utrecht-listbox-border-radius);
|
|
3268
3243
|
border-style: solid;
|
|
3269
3244
|
border-width: var(--utrecht-listbox-border-width);
|
|
3270
3245
|
box-sizing: border-box;
|
|
3246
|
+
color: var(--_utrecht-listbox-disabled-color, var(--_utrecht-listbox-interactive-color, var(--utrecht-listbox-color)));
|
|
3271
3247
|
cursor: default;
|
|
3272
3248
|
display: flex;
|
|
3273
3249
|
flex-direction: column;
|
|
3274
3250
|
font-weight: var(--utrecht-listbox-font-weight, var(--utrecht-form-control-font-weight, initial));
|
|
3275
3251
|
inline-size: var(--utrecht-listbox-inline-size, var(--utrecht-form-control-max-inline-size));
|
|
3276
3252
|
max-block-size: var(--utrecht-listbox-max-block-size);
|
|
3253
|
+
max-inline-size: 100%;
|
|
3277
3254
|
min-block-size: 1em;
|
|
3278
3255
|
overflow-block: auto;
|
|
3279
3256
|
overflow-y: auto;
|
|
@@ -3286,16 +3263,32 @@
|
|
|
3286
3263
|
}
|
|
3287
3264
|
@media (forced-colors: active) {
|
|
3288
3265
|
.utrecht-listbox {
|
|
3289
|
-
--utrecht-listbox-
|
|
3290
|
-
--utrecht-listbox-
|
|
3266
|
+
--utrecht-listbox-background-color: field;
|
|
3267
|
+
--utrecht-listbox-border-color: fieldtext;
|
|
3268
|
+
--utrecht-listbox-hover-background-color: field;
|
|
3269
|
+
--utrecht-listbox-hover-border-color: fieldtext;
|
|
3270
|
+
--utrecht-listbox-hover-color: fieldtext;
|
|
3271
|
+
--utrecht-listbox-focus-border-color: Highlight;
|
|
3272
|
+
--utrecht-listbox-disabled-border-color: GrayText;
|
|
3273
|
+
--utrecht-listbox-option-background-color: field;
|
|
3274
|
+
--utrecht-listbox-option-color: fieldtext;
|
|
3275
|
+
--utrecht-listbox-option-hover-background-color: Highlight;
|
|
3276
|
+
--utrecht-listbox-option-hover-color: HighlightText;
|
|
3277
|
+
--utrecht-listbox-option-active-background-color: Highlight;
|
|
3278
|
+
--utrecht-listbox-option-active-color: HighlightText;
|
|
3291
3279
|
--utrecht-listbox-option-disabled-background-color: field;
|
|
3292
3280
|
--utrecht-listbox-option-disabled-color: GrayText;
|
|
3293
|
-
background-color:
|
|
3294
|
-
color:
|
|
3281
|
+
--utrecht-listbox-option-selected-background-color: Highlight;
|
|
3282
|
+
--utrecht-listbox-option-selected-color: HighlightText;
|
|
3283
|
+
--utrecht-listbox-option-selected-hover-background-color: Highlight;
|
|
3284
|
+
--utrecht-listbox-option-selected-hover-color: HighlightText;
|
|
3285
|
+
--utrecht-listbox-option-selected-disabled-background-color: GrayText;
|
|
3286
|
+
--utrecht-listbox-option-selected-disabled-color: field;
|
|
3295
3287
|
}
|
|
3296
3288
|
}
|
|
3297
3289
|
|
|
3298
3290
|
.utrecht-listbox--focus {
|
|
3291
|
+
--_utrecht-listbox-interactive-border-color: var(--utrecht-listbox-focus-border-color);
|
|
3299
3292
|
}
|
|
3300
3293
|
|
|
3301
3294
|
.utrecht-listbox--focus-visible {
|
|
@@ -3306,14 +3299,12 @@
|
|
|
3306
3299
|
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
3307
3300
|
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
3308
3301
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
3302
|
+
z-index: 1;
|
|
3309
3303
|
}
|
|
3310
3304
|
|
|
3311
3305
|
.utrecht-listbox--invalid {
|
|
3312
3306
|
}
|
|
3313
3307
|
|
|
3314
|
-
.utrecht-listbox--read-only {
|
|
3315
|
-
}
|
|
3316
|
-
|
|
3317
3308
|
.utrecht-listbox__list {
|
|
3318
3309
|
margin-block-end: 0;
|
|
3319
3310
|
margin-block-start: 0;
|
|
@@ -3347,11 +3338,24 @@
|
|
|
3347
3338
|
|
|
3348
3339
|
.utrecht-listbox__option {
|
|
3349
3340
|
list-style: none;
|
|
3350
|
-
--
|
|
3341
|
+
--_utrecht-listbox-option-background-color: var(
|
|
3342
|
+
--_utrecht-listbox-option-disabled-background-color,
|
|
3343
|
+
var(
|
|
3344
|
+
--_utrecht-listbox-option-interactive-background-color,
|
|
3345
|
+
var(--_utrecht-listbox-option-state-background-color, var(--utrecht-listbox-option-background-color))
|
|
3346
|
+
)
|
|
3347
|
+
);
|
|
3348
|
+
--_utrecht-listbox-option-color: var(
|
|
3349
|
+
--_utrecht-listbox-option-disabled-color,
|
|
3350
|
+
var(
|
|
3351
|
+
--_utrecht-listbox-option-interactive-color,
|
|
3352
|
+
var(--_utrecht-listbox-option-state-color, var(--utrecht-listbox-option-color))
|
|
3353
|
+
)
|
|
3354
|
+
);
|
|
3351
3355
|
align-items: center;
|
|
3352
|
-
background-color: var(--
|
|
3356
|
+
background-color: var(--_utrecht-listbox-option-background-color);
|
|
3353
3357
|
box-sizing: border-box;
|
|
3354
|
-
color: var(--
|
|
3358
|
+
color: var(--_utrecht-listbox-option-color);
|
|
3355
3359
|
display: flex;
|
|
3356
3360
|
min-block-size: var(--utrecht-listbox-option-min-block-size, var(--utrecht-pointer-target-min-size, 24px));
|
|
3357
3361
|
padding-block-end: var(--utrecht-listbox-option-padding-block-end);
|
|
@@ -3365,19 +3369,14 @@
|
|
|
3365
3369
|
}
|
|
3366
3370
|
}
|
|
3367
3371
|
|
|
3368
|
-
.utrecht-listbox__option--disabled {
|
|
3369
|
-
background-color: var(--utrecht-listbox-option-disabled-background-color);
|
|
3370
|
-
color: var(--utrecht-listbox-option-disabled-color);
|
|
3371
|
-
}
|
|
3372
|
-
|
|
3373
3372
|
.utrecht-listbox__option--hover {
|
|
3374
|
-
|
|
3375
|
-
|
|
3373
|
+
--_utrecht-listbox-option-interactive-background-color: var(--utrecht-listbox-option-hover-background-color);
|
|
3374
|
+
--_utrecht-listbox-option-interactive-color: var(--utrecht-listbox-option-hover-color);
|
|
3376
3375
|
}
|
|
3377
3376
|
|
|
3378
3377
|
.utrecht-listbox__option--focus {
|
|
3379
|
-
|
|
3380
|
-
|
|
3378
|
+
--_utrecht-listbox-option-state-background-color: var(--utrecht-listbox-option-focus-background-color);
|
|
3379
|
+
--_utrecht-listbox-option-state-color: var(--utrecht-listbox-option-focus-color);
|
|
3381
3380
|
}
|
|
3382
3381
|
|
|
3383
3382
|
.utrecht-listbox__option--focus-visible {
|
|
@@ -3388,47 +3387,55 @@
|
|
|
3388
3387
|
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
3389
3388
|
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
3390
3389
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
3390
|
+
z-index: 1;
|
|
3391
3391
|
--utrecht-focus-outline-offset: calc(var(--utrecht-focus-outline-width) * -1);
|
|
3392
3392
|
}
|
|
3393
3393
|
|
|
3394
3394
|
.utrecht-listbox__option--active {
|
|
3395
|
-
background-color: var(--utrecht-listbox-option-
|
|
3396
|
-
color: var(--utrecht-listbox-option-
|
|
3395
|
+
--_utrecht-listbox-option-state-background-color: var(--utrecht-listbox-option-active-background-color);
|
|
3396
|
+
--_utrecht-listbox-option-state-color: var(--utrecht-listbox-option-active-color);
|
|
3397
3397
|
font-weight: var(--utrecht-listbox-option-is-active-font-weight);
|
|
3398
3398
|
}
|
|
3399
3399
|
|
|
3400
3400
|
.utrecht-listbox__option--selected {
|
|
3401
|
-
background-color: var(--utrecht-listbox-option-selected-background-color);
|
|
3402
|
-
color: var(--utrecht-listbox-option-selected-color);
|
|
3401
|
+
--_utrecht-listbox-option-disabled-background-color: var(--utrecht-listbox-option-selected-disabled-background-color);
|
|
3402
|
+
--_utrecht-listbox-option-disabled-color: var(--utrecht-listbox-option-selected-disabled-color);
|
|
3403
|
+
--_utrecht-listbox-option-interactive-background-color: var(--utrecht-listbox-option-selected-hover-background-color);
|
|
3404
|
+
--_utrecht-listbox-option-interactive-color: var(--utrecht-listbox-option-selected-hover-color);
|
|
3405
|
+
--_utrecht-listbox-option-state-background-color: var(--utrecht-listbox-option-selected-background-color);
|
|
3406
|
+
--_utrecht-listbox-option-state-color: var(--utrecht-listbox-option-selected-color);
|
|
3403
3407
|
}
|
|
3404
3408
|
|
|
3405
3409
|
.utrecht-listbox__option--html-li {
|
|
3406
3410
|
list-style: none;
|
|
3407
3411
|
}
|
|
3408
3412
|
.utrecht-listbox__option--html-li:hover {
|
|
3409
|
-
|
|
3410
|
-
|
|
3413
|
+
--_utrecht-listbox-option-interactive-background-color: var(--utrecht-listbox-option-hover-background-color);
|
|
3414
|
+
--_utrecht-listbox-option-interactive-color: var(--utrecht-listbox-option-hover-color);
|
|
3411
3415
|
}
|
|
3412
3416
|
.utrecht-listbox__option--html-li:focus {
|
|
3413
|
-
|
|
3414
|
-
|
|
3417
|
+
--_utrecht-listbox-option-state-background-color: var(--utrecht-listbox-option-focus-background-color);
|
|
3418
|
+
--_utrecht-listbox-option-state-color: var(--utrecht-listbox-option-focus-color);
|
|
3419
|
+
}
|
|
3420
|
+
.utrecht-listbox__option--disabled {
|
|
3421
|
+
--utrecht-listbox-option-hover-background-color: var(--utrecht-listbox-option-disabled-background-color);
|
|
3422
|
+
--utrecht-listbox-option-hover-color: var(--utrecht-listbox-option-disabled-color);
|
|
3423
|
+
--_utrecht-listbox-option-interactive-background-color: var(--utrecht-listbox-option-disabled-background-color);
|
|
3424
|
+
--_utrecht-listbox-option-interactive-color: var(--utrecht-listbox-option-disabled-color);
|
|
3425
|
+
cursor: var(--utrecht-action-disabled-cursor, not-allowed);
|
|
3415
3426
|
}
|
|
3416
3427
|
|
|
3417
3428
|
.utrecht-listbox--disabled {
|
|
3429
|
+
--_utrecht-listbox-option-disabled-background-color: var(--utrecht-listbox-option-disabled-background-color);
|
|
3430
|
+
--_utrecht-listbox-option-disabled-color: var(--utrecht-listbox-option-disabled-color);
|
|
3431
|
+
--_utrecht-listbox-disabled-background-color: var(--utrecht-listbox-disabled-background-color);
|
|
3432
|
+
--_utrecht-listbox-disabled-border-color: var(--utrecht-listbox-disabled-border-color);
|
|
3433
|
+
--_utrecht-listbox-disabled-color: var(--utrecht-listbox-disabled-color);
|
|
3418
3434
|
cursor: var(--utrecht-action-disabled-cursor, not-allowed);
|
|
3419
3435
|
}
|
|
3420
|
-
@media (forced-colors: active) {
|
|
3421
|
-
.utrecht-listbox--disabled {
|
|
3422
|
-
--utrecht-listbox-option-selected-background-color: GrayText;
|
|
3423
|
-
--utrecht-listbox-option-selected-color: field;
|
|
3424
|
-
--utrecht-listbox-option-background-color: field;
|
|
3425
|
-
--utrecht-listbox-option-color: GrayText;
|
|
3426
|
-
--utrecht-listbox-background-color: field;
|
|
3427
|
-
--utrecht-listbox-color: GrayText;
|
|
3428
|
-
}
|
|
3429
|
-
}
|
|
3430
3436
|
|
|
3431
3437
|
.utrecht-listbox--html-div:focus {
|
|
3438
|
+
--_utrecht-listbox-interactive-border-color: var(--utrecht-listbox-focus-border-color);
|
|
3432
3439
|
}
|
|
3433
3440
|
.utrecht-listbox--html-div:focus-visible {
|
|
3434
3441
|
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
@@ -3438,6 +3445,31 @@
|
|
|
3438
3445
|
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
3439
3446
|
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
3440
3447
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
3448
|
+
z-index: 1;
|
|
3449
|
+
}
|
|
3450
|
+
|
|
3451
|
+
.utrecht-listbox--forced-colors {
|
|
3452
|
+
--utrecht-listbox-background-color: field;
|
|
3453
|
+
--utrecht-listbox-border-color: fieldtext;
|
|
3454
|
+
--utrecht-listbox-hover-background-color: field;
|
|
3455
|
+
--utrecht-listbox-hover-border-color: fieldtext;
|
|
3456
|
+
--utrecht-listbox-hover-color: fieldtext;
|
|
3457
|
+
--utrecht-listbox-focus-border-color: Highlight;
|
|
3458
|
+
--utrecht-listbox-disabled-border-color: GrayText;
|
|
3459
|
+
--utrecht-listbox-option-background-color: field;
|
|
3460
|
+
--utrecht-listbox-option-color: fieldtext;
|
|
3461
|
+
--utrecht-listbox-option-hover-background-color: Highlight;
|
|
3462
|
+
--utrecht-listbox-option-hover-color: HighlightText;
|
|
3463
|
+
--utrecht-listbox-option-active-background-color: Highlight;
|
|
3464
|
+
--utrecht-listbox-option-active-color: HighlightText;
|
|
3465
|
+
--utrecht-listbox-option-disabled-background-color: field;
|
|
3466
|
+
--utrecht-listbox-option-disabled-color: GrayText;
|
|
3467
|
+
--utrecht-listbox-option-selected-background-color: Highlight;
|
|
3468
|
+
--utrecht-listbox-option-selected-color: HighlightText;
|
|
3469
|
+
--utrecht-listbox-option-selected-hover-background-color: Highlight;
|
|
3470
|
+
--utrecht-listbox-option-selected-hover-color: HighlightText;
|
|
3471
|
+
--utrecht-listbox-option-selected-disabled-background-color: GrayText;
|
|
3472
|
+
--utrecht-listbox-option-selected-disabled-color: field;
|
|
3441
3473
|
}
|
|
3442
3474
|
.utrecht-logo-button {
|
|
3443
3475
|
--utrecht-icon-size: var(--utrecht-logo-button-icon, 50px);
|
|
@@ -3492,59 +3524,6 @@
|
|
|
3492
3524
|
inline-size: var(--utrecht-map-marker-size);
|
|
3493
3525
|
justify-content: center;
|
|
3494
3526
|
}
|
|
3495
|
-
.utrecht-mapcontrolbutton {
|
|
3496
|
-
--utrecht-icon-size: var(--utrecht-mapcontrolbutton-min-block-size);
|
|
3497
|
-
--utrecht-icon-color: var(--utrecht-mapcontrolbutton-color);
|
|
3498
|
-
align-items: center;
|
|
3499
|
-
background-color: var(--utrecht-mapcontrolbutton-background-color);
|
|
3500
|
-
border-color: var(--utrecht-mapcontrolbutton-border-color);
|
|
3501
|
-
border-radius: var(--utrecht-mapcontrolbutton-border-radius);
|
|
3502
|
-
border-style: var(--utrecht-mapcontrolbutton-border-style);
|
|
3503
|
-
border-width: var(--utrecht-mapcontrolbutton-border-width);
|
|
3504
|
-
color: var(--utrecht-mapcontrolbutton-color);
|
|
3505
|
-
display: flex;
|
|
3506
|
-
flex-direction: row;
|
|
3507
|
-
justify-content: center;
|
|
3508
|
-
min-block-size: var(--utrecht-mapcontrolbutton-min-block-size);
|
|
3509
|
-
min-inline-size: var(--utrecht-mapcontrolbutton-min-inline-size);
|
|
3510
|
-
padding-block-end: 0;
|
|
3511
|
-
padding-block-start: 0;
|
|
3512
|
-
padding-inline-end: 0;
|
|
3513
|
-
padding-inline-start: 0;
|
|
3514
|
-
}
|
|
3515
|
-
|
|
3516
|
-
.utrecht-mapcontrolbutton:disabled,
|
|
3517
|
-
.utrecht-mapcontrolbutton--disabled {
|
|
3518
|
-
--utrecht-icon-color: var(--utrecht-mapcontrolbutton-disabled-color, var(--utrecht-mapcontrolbutton-color));
|
|
3519
|
-
background-color: var(--utrecht-mapcontrolbutton-disabled-background-color);
|
|
3520
|
-
border-color: var(--utrecht-mapcontrolbutton-disabled-border-color);
|
|
3521
|
-
color: var(--utrecht-mapcontrolbutton-disabled-color);
|
|
3522
|
-
}
|
|
3523
|
-
|
|
3524
|
-
.utrecht-mapcontrolbutton--focus-visible, .utrecht-mapcontrolbutton:focus-visible {
|
|
3525
|
-
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
3526
|
-
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
3527
|
-
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
3528
|
-
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
3529
|
-
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
3530
|
-
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
3531
|
-
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
3532
|
-
}
|
|
3533
|
-
|
|
3534
|
-
.utrecht-mapcontrolbutton--focus, .utrecht-mapcontrolbutton:focus:not(:disabled, [aria-disabled=true], .utrecht-mapcontrolbutton--disabled) {
|
|
3535
|
-
--utrecht-icon-color: var(--utrecht-mapcontrolbutton-focus-color, var(--utrecht-mapcontrolbutton-color));
|
|
3536
|
-
}
|
|
3537
|
-
.utrecht-mapcontrolbutton--hover:not(:disabled),
|
|
3538
|
-
.utrecht-mapcontrolbutton:hover:not(:disabled, .utrecht-mapcontrolbutton--disabled) {
|
|
3539
|
-
background-color: var(--utrecht-mapcontrolbutton-hover-background-color);
|
|
3540
|
-
color: var(--utrecht-mapcontrolbutton-color);
|
|
3541
|
-
}
|
|
3542
|
-
|
|
3543
|
-
.utrecht-mapcontrolbutton__label {
|
|
3544
|
-
display: block;
|
|
3545
|
-
padding-inline-end: var(--utrecht-mapcontrolbutton-label-margin-inline-end);
|
|
3546
|
-
padding-inline-start: var(--utrecht-mapcontrolbutton-label-margin-inline-start);
|
|
3547
|
-
}
|
|
3548
3527
|
.utrecht-mark {
|
|
3549
3528
|
background-color: var(--utrecht-mark-background-color, revert);
|
|
3550
3529
|
color: var(--utrecht-mark-color, revert);
|
|
@@ -3571,45 +3550,6 @@
|
|
|
3571
3550
|
background-color: Highlight;
|
|
3572
3551
|
color: HighlightText;
|
|
3573
3552
|
}
|
|
3574
|
-
.utrecht-menulijst {
|
|
3575
|
-
border-block-end: var(--utrecht-border-width-md) solid var(--utrecht-color-grey-90);
|
|
3576
|
-
border-block-start: var(--utrecht-border-width-md) solid var(--utrecht-color-grey-90);
|
|
3577
|
-
font-family: var(--utrecht-document-font-family);
|
|
3578
|
-
padding-block-end: var(--utrecht-space-block-sm);
|
|
3579
|
-
padding-block-start: var(--utrecht-space-block-sm);
|
|
3580
|
-
padding-inline-start: 0;
|
|
3581
|
-
}
|
|
3582
|
-
|
|
3583
|
-
.utrecht-menulijst__item {
|
|
3584
|
-
list-style: none;
|
|
3585
|
-
margin-block-end: var(--utrecht-space-block-sm);
|
|
3586
|
-
margin-block-start: var(--utrecht-space-block-sm);
|
|
3587
|
-
}
|
|
3588
|
-
|
|
3589
|
-
.utrecht-menulijst__item a {
|
|
3590
|
-
background-image: var(--utrecht-menulijst-item-background-image, none);
|
|
3591
|
-
background-position: 0 0.25em;
|
|
3592
|
-
background-repeat: no-repeat;
|
|
3593
|
-
color: var(--utrecht-menulijst-item-color, var(--utrecht-link-color, blue));
|
|
3594
|
-
display: block;
|
|
3595
|
-
font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
|
|
3596
|
-
padding-inline-start: var(--utrecht-space-block-md);
|
|
3597
|
-
text-decoration: none;
|
|
3598
|
-
}
|
|
3599
|
-
|
|
3600
|
-
.utrecht-menulijst__item a:hover {
|
|
3601
|
-
color: var(--utrecht-menulijst-item-hover-color, var(--utrecht-link-hover-color, red));
|
|
3602
|
-
}
|
|
3603
|
-
|
|
3604
|
-
.utrecht-menulijst__link--focus-visible, .utrecht-menulijst__link:focus-visible {
|
|
3605
|
-
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
3606
|
-
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
3607
|
-
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
3608
|
-
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
3609
|
-
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
3610
|
-
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
3611
|
-
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
3612
|
-
}
|
|
3613
3553
|
.utrecht-multiline-data {
|
|
3614
3554
|
white-space: pre-line;
|
|
3615
3555
|
white-space-collapse: preserve-breaks;
|
|
@@ -3623,8 +3563,8 @@
|
|
|
3623
3563
|
.utrecht-nav-bar {
|
|
3624
3564
|
background-color: var(--utrecht-nav-bar-background-color);
|
|
3625
3565
|
color: var(--utrecht-nav-bar-color);
|
|
3626
|
-
display:
|
|
3627
|
-
|
|
3566
|
+
display: grid;
|
|
3567
|
+
inline-size: 100%;
|
|
3628
3568
|
}
|
|
3629
3569
|
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
|
|
3630
3570
|
.utrecht-nav-bar {
|
|
@@ -3641,11 +3581,14 @@
|
|
|
3641
3581
|
|
|
3642
3582
|
.utrecht-nav-bar__content {
|
|
3643
3583
|
align-items: stretch;
|
|
3584
|
+
background-color: var(--utrecht-nav-bar-content-background-color);
|
|
3585
|
+
color: var(--utrecht-nav-bar-content-color);
|
|
3644
3586
|
display: flex;
|
|
3645
3587
|
flex-direction: row;
|
|
3646
3588
|
flex-wrap: wrap;
|
|
3647
3589
|
inline-size: 100%;
|
|
3648
3590
|
justify-content: space-between;
|
|
3591
|
+
justify-self: center;
|
|
3649
3592
|
max-inline-size: var(--utrecht-nav-bar-content-max-inline-size);
|
|
3650
3593
|
}
|
|
3651
3594
|
.utrecht-nav-list {
|
|
@@ -3680,226 +3623,6 @@
|
|
|
3680
3623
|
padding-inline-start: var(--utrecht-nav-bar-link-padding-inline-start);
|
|
3681
3624
|
text-decoration: none;
|
|
3682
3625
|
}
|
|
3683
|
-
.utrecht-sidenav {
|
|
3684
|
-
--utrecht-sidenav-connection-color: var(--utrecht-sidenav-item-marker-color);
|
|
3685
|
-
--utrecht-sidenav-connection-inline-size: 2px;
|
|
3686
|
-
--utrecht-sidenav-marker-current-color: var(--utrecht-sidenav-link-hover-color);
|
|
3687
|
-
--utrecht-sidenav-marker-offset: 26px;
|
|
3688
|
-
--utrecht-sidenav-connection-block-size: 100%;
|
|
3689
|
-
--utrecht-sidenav-marker-height: 8px;
|
|
3690
|
-
--utrecht-sidenav-marker-outline-width: 2px;
|
|
3691
|
-
border-block-end: 1px solid var(--utrecht-color-grey-80);
|
|
3692
|
-
border-block-start: 1px solid var(--utrecht-color-grey-80);
|
|
3693
|
-
inline-size: 19rem;
|
|
3694
|
-
margin-block-end: 0;
|
|
3695
|
-
margin-block-start: 0;
|
|
3696
|
-
padding-block-end: 0;
|
|
3697
|
-
padding-block-start: 0;
|
|
3698
|
-
}
|
|
3699
|
-
|
|
3700
|
-
.utrecht-sidenav__list {
|
|
3701
|
-
margin-block-end: 0;
|
|
3702
|
-
margin-block-start: 0.2rem;
|
|
3703
|
-
padding-block-end: 0;
|
|
3704
|
-
padding-block-start: 0;
|
|
3705
|
-
padding-inline-start: 0;
|
|
3706
|
-
}
|
|
3707
|
-
|
|
3708
|
-
.utrecht-sidenav__list--child {
|
|
3709
|
-
margin-block-start: 0;
|
|
3710
|
-
padding-inline-end: 0;
|
|
3711
|
-
padding-inline-start: 1.4rem;
|
|
3712
|
-
}
|
|
3713
|
-
|
|
3714
|
-
.utrecht-sidenav__item {
|
|
3715
|
-
list-style: none;
|
|
3716
|
-
margin-inline-start: 0;
|
|
3717
|
-
position: relative;
|
|
3718
|
-
}
|
|
3719
|
-
|
|
3720
|
-
.utrecht-sidenav__item--current {
|
|
3721
|
-
color: var(--utrecht-sidenav-item-hover-color, var(--utrecht-link-hover-color, red));
|
|
3722
|
-
}
|
|
3723
|
-
|
|
3724
|
-
.utrecht-sidenav__item--last {
|
|
3725
|
-
border-block-end: none;
|
|
3726
|
-
}
|
|
3727
|
-
.utrecht-sidenav__item-separator:not(.utrecht-sidenav__item--last .utrecht-sidenav__item-separator) {
|
|
3728
|
-
border-block-end: 1px solid var(--utrecht-color-grey-80);
|
|
3729
|
-
display: block;
|
|
3730
|
-
margin-inline-start: var(--utrecht-space-inline-lg);
|
|
3731
|
-
}
|
|
3732
|
-
|
|
3733
|
-
.utrecht-sidenav__link {
|
|
3734
|
-
color: var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));
|
|
3735
|
-
display: block;
|
|
3736
|
-
margin-inline-start: 0;
|
|
3737
|
-
padding-block-end: var(--utrecht-space-block-xs);
|
|
3738
|
-
padding-block-start: var(--utrecht-space-block-xs);
|
|
3739
|
-
padding-inline-end: var(--utrecht-space-inline-3xs);
|
|
3740
|
-
padding-inline-start: var(--utrecht-space-inline-lg);
|
|
3741
|
-
text-decoration: none;
|
|
3742
|
-
}
|
|
3743
|
-
|
|
3744
|
-
.utrecht-sidenav__link:hover {
|
|
3745
|
-
color: var(--utrecht-sidenav-link-hover-color, var(--utrecht-link-hover-color, red));
|
|
3746
|
-
text-decoration: underline;
|
|
3747
|
-
}
|
|
3748
|
-
|
|
3749
|
-
.utrecht-sidenav__link--focus-visible, .utrecht-sidenav__link:focus-visible {
|
|
3750
|
-
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
3751
|
-
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
3752
|
-
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
3753
|
-
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
3754
|
-
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
3755
|
-
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
3756
|
-
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
3757
|
-
}
|
|
3758
|
-
.utrecht-sidenav__link--parent {
|
|
3759
|
-
padding-block-end: 0;
|
|
3760
|
-
}
|
|
3761
|
-
.utrecht-sidenav__connection, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:not(.utrecht-sidenav__link--sibling,
|
|
3762
|
-
.utrecht-sidenav__link--parent,
|
|
3763
|
-
.utrecht-sidenav__link--child)::after {
|
|
3764
|
-
background: var(--utrecht-sidenav-connection-color);
|
|
3765
|
-
block-size: calc(var(--utrecht-sidenav-connection-block-size) - var(--utrecht-sidenav-marker-height) - 2 * var(--utrecht-sidenav-marker-outline-width));
|
|
3766
|
-
content: "";
|
|
3767
|
-
display: block;
|
|
3768
|
-
inline-size: var(--utrecht-sidenav-connection-inline-size);
|
|
3769
|
-
inset-block-end: 0;
|
|
3770
|
-
inset-block-start: calc(var(--utrecht-sidenav-marker-offset));
|
|
3771
|
-
inset-inline-start: 3px;
|
|
3772
|
-
overflow: hidden;
|
|
3773
|
-
position: absolute;
|
|
3774
|
-
z-index: 5;
|
|
3775
|
-
}
|
|
3776
|
-
|
|
3777
|
-
.utrecht-sidenav__connection--last,
|
|
3778
|
-
.utrecht-sidenav__connection--parent,
|
|
3779
|
-
.utrecht-sidenav__connection--sibling {
|
|
3780
|
-
display: none;
|
|
3781
|
-
}
|
|
3782
|
-
.utrecht-sidenav__marker, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before {
|
|
3783
|
-
background-color: var(--utrecht-sidenav-item-marker-color);
|
|
3784
|
-
block-size: var(--utrecht-sidenav-marker-height);
|
|
3785
|
-
border-radius: 100%;
|
|
3786
|
-
content: "";
|
|
3787
|
-
inline-size: 8px;
|
|
3788
|
-
inset-block-start: 20px;
|
|
3789
|
-
inset-inline-start: var(--utrecht-sidenav-marker-offset);
|
|
3790
|
-
overflow: hidden;
|
|
3791
|
-
position: absolute;
|
|
3792
|
-
transform: translateY(-50%) translateX(calc(-1 * var(--utrecht-sidenav-marker-offset)));
|
|
3793
|
-
z-index: 10;
|
|
3794
|
-
}
|
|
3795
|
-
.utrecht-sidenav__marker--child, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::before {
|
|
3796
|
-
background-color: transparent;
|
|
3797
|
-
block-size: 4px;
|
|
3798
|
-
border: 2px solid var(--utrecht-sidenav-link-color);
|
|
3799
|
-
inline-size: 4px;
|
|
3800
|
-
inset-block-start: 16px;
|
|
3801
|
-
inset-inline-start: 1.2rem;
|
|
3802
|
-
transform: translateY(-50%) translateX(-19.5px);
|
|
3803
|
-
}
|
|
3804
|
-
.utrecht-sidenav__marker--current, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--current::before,
|
|
3805
|
-
.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--current-child::before {
|
|
3806
|
-
background-color: var(--utrecht-sidenav-marker-current-color);
|
|
3807
|
-
}
|
|
3808
|
-
|
|
3809
|
-
.utrecht-sidenav__link--child,
|
|
3810
|
-
.utrecht-sidenav__link--current-child {
|
|
3811
|
-
color: var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));
|
|
3812
|
-
margin-block-end: 0;
|
|
3813
|
-
margin-block-start: 0;
|
|
3814
|
-
padding-block-end: var(--utrecht-space-block-2xs);
|
|
3815
|
-
padding-block-start: var(--utrecht-space-block-2xs);
|
|
3816
|
-
padding-inline-end: var(--utrecht-space-inline-3xs);
|
|
3817
|
-
padding-inline-start: var(--utrecht-space-inline-lg);
|
|
3818
|
-
text-decoration: none;
|
|
3819
|
-
}
|
|
3820
|
-
|
|
3821
|
-
.utrecht-sidenav__link--current,
|
|
3822
|
-
.utrecht-sidenav__link--current-child {
|
|
3823
|
-
font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
|
|
3824
|
-
}
|
|
3825
|
-
.utrecht-sidenav__marker--hover, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover::before, .utrecht-sidenav__link:hover .utrecht-sidenav__marker, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__link::before {
|
|
3826
|
-
background-color: var(--utrecht-sidenav-link-hover-color);
|
|
3827
|
-
}
|
|
3828
|
-
.utrecht-sidenav__marker--child.utrecht-sidenav__marker--hover, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--child.utrecht-sidenav__link:hover::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--hover.utrecht-sidenav__link--child::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child.utrecht-sidenav__link:hover::before, .utrecht-sidenav__link:hover .utrecht-sidenav__marker--child.utrecht-sidenav__marker, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker.utrecht-sidenav__link--child::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__marker.utrecht-sidenav__link--child::before, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--child.utrecht-sidenav__link::before, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link.utrecht-sidenav__link--child::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__marker--child.utrecht-sidenav__link::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__link.utrecht-sidenav__link--child::before {
|
|
3829
|
-
background-color: var(--utrecht-sidenav-link-hover-color);
|
|
3830
|
-
border: 2px solid var(--utrecht-sidenav-link-hover-color);
|
|
3831
|
-
}
|
|
3832
|
-
|
|
3833
|
-
.utrecht-sidenav--pseudo-elements {
|
|
3834
|
-
}
|
|
3835
|
-
.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::after {
|
|
3836
|
-
display: none;
|
|
3837
|
-
}
|
|
3838
|
-
.utrecht-navhtml {
|
|
3839
|
-
font-family: var(--utrecht-document-font-family);
|
|
3840
|
-
}
|
|
3841
|
-
|
|
3842
|
-
.utrecht-topnav__list {
|
|
3843
|
-
background-color: var(--utrecht-topnav-list-background-color);
|
|
3844
|
-
display: flex;
|
|
3845
|
-
justify-content: space-between;
|
|
3846
|
-
list-style: none;
|
|
3847
|
-
list-style-image: none;
|
|
3848
|
-
margin-block-end: 0;
|
|
3849
|
-
margin-block-start: 0;
|
|
3850
|
-
overflow: visible;
|
|
3851
|
-
padding-block-end: 0;
|
|
3852
|
-
padding-block-start: 0;
|
|
3853
|
-
padding-inline-end: 0;
|
|
3854
|
-
padding-inline-start: 0;
|
|
3855
|
-
}
|
|
3856
|
-
|
|
3857
|
-
.utrecht-topnav__item {
|
|
3858
|
-
border-inline-end: 1px solid var(--utrecht-topnav-list-border-color);
|
|
3859
|
-
flex: 1 0 auto;
|
|
3860
|
-
margin-inline-start: 0;
|
|
3861
|
-
text-align: center;
|
|
3862
|
-
}
|
|
3863
|
-
|
|
3864
|
-
.utrecht-topnav__item li:first-child {
|
|
3865
|
-
border-inline-start: 1px solid var(--utrecht-topnav-list-border-color);
|
|
3866
|
-
padding-inline-start: 0;
|
|
3867
|
-
}
|
|
3868
|
-
|
|
3869
|
-
.utrecht-topnav__link {
|
|
3870
|
-
color: var(--utrecht-topnav-link-color);
|
|
3871
|
-
display: block;
|
|
3872
|
-
padding-block-end: 1rem;
|
|
3873
|
-
padding-block-start: 1rem;
|
|
3874
|
-
text-decoration: none;
|
|
3875
|
-
}
|
|
3876
|
-
|
|
3877
|
-
.utrecht-topnav__link--hover,
|
|
3878
|
-
.utrecht-topnav__link:hover {
|
|
3879
|
-
background-color: var(--utrecht-topnav-link-hover-background-color);
|
|
3880
|
-
color: var(--utrecht-topnav-link-color);
|
|
3881
|
-
text-decoration: underline;
|
|
3882
|
-
}
|
|
3883
|
-
|
|
3884
|
-
.utrecht-topnav__link--current {
|
|
3885
|
-
background-color: var(--utrecht-topnav-list-background-active);
|
|
3886
|
-
text-decoration: underline;
|
|
3887
|
-
}
|
|
3888
|
-
|
|
3889
|
-
.utrecht-topnav__link--focus, .utrecht-topnav__link:focus {
|
|
3890
|
-
background-color: var(--utrecht-topnav-link-focus-background-color, var(--utrecht-topnav-link-background-color));
|
|
3891
|
-
color: var(--utrecht-topnav-link-focus-color, var(--utrecht-topnav-link-color));
|
|
3892
|
-
}
|
|
3893
|
-
|
|
3894
|
-
.utrecht-topnav__link--focus-visible, .utrecht-topnav__link:focus-visible {
|
|
3895
|
-
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
3896
|
-
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
3897
|
-
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
3898
|
-
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
3899
|
-
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
3900
|
-
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
3901
|
-
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
3902
|
-
}
|
|
3903
3626
|
.utrecht-number-badge {
|
|
3904
3627
|
background-color: var(--utrecht-number-badge-background-color, var(--utrecht-badge-background-color, hsl(0, 0%, 0%)));
|
|
3905
3628
|
border-color: var(--utrecht-number-badge-border-color, var(--utrecht-badge-border-color));
|
|
@@ -3976,6 +3699,27 @@
|
|
|
3976
3699
|
margin-block-start: var(--utrecht-ordered-list-item-margin-block-start, var(--utrecht-unordered-list-item-margin-block-start));
|
|
3977
3700
|
padding-inline-start: var(--utrecht-ordered-list-item-padding-inline-start, var(--utrecht-unordered-list-item-padding-inline-start, 1ch));
|
|
3978
3701
|
}
|
|
3702
|
+
.utrecht-page-body {
|
|
3703
|
+
background-color: var(--utrecht-page-body-background-color);
|
|
3704
|
+
box-sizing: border-box;
|
|
3705
|
+
color: var(--utrecht-page-body-color);
|
|
3706
|
+
display: grid;
|
|
3707
|
+
flex-grow: 1;
|
|
3708
|
+
inline-size: 100%;
|
|
3709
|
+
}
|
|
3710
|
+
|
|
3711
|
+
.utrecht-page-body__content {
|
|
3712
|
+
background-color: var(--utrecht-page-body-content-background-color);
|
|
3713
|
+
box-sizing: border-box;
|
|
3714
|
+
color: var(--utrecht-page-body-content-color);
|
|
3715
|
+
inline-size: 100%;
|
|
3716
|
+
justify-self: center;
|
|
3717
|
+
max-inline-size: var(--utrecht-page-body-content-max-inline-size);
|
|
3718
|
+
padding-block-end: var(--utrecht-page-body-content-padding-block-end);
|
|
3719
|
+
padding-block-start: var(--utrecht-page-body-content-padding-block-start);
|
|
3720
|
+
padding-inline-end: var(--utrecht-page-body-content-padding-inline-end);
|
|
3721
|
+
padding-inline-start: var(--utrecht-page-body-content-padding-inline-start);
|
|
3722
|
+
}
|
|
3979
3723
|
.utrecht-page-content {
|
|
3980
3724
|
padding-block-end: var(--utrecht-page-content-padding-block-end);
|
|
3981
3725
|
padding-block-start: var(--utrecht-page-content-padding-block-start);
|
|
@@ -4000,15 +3744,30 @@
|
|
|
4000
3744
|
--utrecht-link-visited-color: currentColor;
|
|
4001
3745
|
background-color: var(--utrecht-page-footer-background-color);
|
|
4002
3746
|
background-image: var(--utrecht-page-footer-background-image);
|
|
3747
|
+
box-sizing: border-box;
|
|
4003
3748
|
color: var(--utrecht-page-footer-color);
|
|
3749
|
+
display: grid;
|
|
4004
3750
|
font-family: var(--utrecht-document-font-family);
|
|
4005
3751
|
font-size: var(--utrecht-document-font-size);
|
|
3752
|
+
inline-size: 100%;
|
|
4006
3753
|
padding-block-end: var(--utrecht-page-footer-padding-block-end);
|
|
4007
3754
|
padding-block-start: var(--utrecht-page-footer-padding-block-start);
|
|
4008
3755
|
padding-inline-end: var(--utrecht-page-footer-padding-inline-end);
|
|
4009
3756
|
padding-inline-start: var(--utrecht-page-footer-padding-inline-start);
|
|
4010
3757
|
}
|
|
4011
3758
|
|
|
3759
|
+
.utrecht-page-footer__content {
|
|
3760
|
+
background-color: var(--utrecht-page-footer-content-background-color);
|
|
3761
|
+
box-sizing: border-box;
|
|
3762
|
+
color: var(--utrecht-page-footer-content-color);
|
|
3763
|
+
inline-size: 100%;
|
|
3764
|
+
justify-self: center;
|
|
3765
|
+
max-inline-size: var(--utrecht-page-footer-content-max-inline-size);
|
|
3766
|
+
padding-block-end: var(--utrecht-page-footer-content-padding-block-end);
|
|
3767
|
+
padding-block-start: var(--utrecht-page-footer-content-padding-block-start);
|
|
3768
|
+
padding-inline: var(--utrecht-page-footer-content-padding-inline);
|
|
3769
|
+
}
|
|
3770
|
+
|
|
4012
3771
|
.utrecht-page-footer__address--reset-address {
|
|
4013
3772
|
font-style: inherit;
|
|
4014
3773
|
margin-block-end: 0;
|
|
@@ -4016,8 +3775,14 @@
|
|
|
4016
3775
|
}
|
|
4017
3776
|
.utrecht-page-header {
|
|
4018
3777
|
background-color: var(--utrecht-page-header-background-color);
|
|
3778
|
+
border-block-end-color: var(--utrecht-page-header-border-block-end-color, currentColor);
|
|
3779
|
+
border-block-end-style: solid;
|
|
3780
|
+
border-block-end-width: var(--utrecht-page-header-border-block-end-width, 0);
|
|
3781
|
+
box-sizing: border-box;
|
|
4019
3782
|
color: var(--utrecht-page-header-color);
|
|
3783
|
+
display: grid;
|
|
4020
3784
|
grid-area: "utrecht-header";
|
|
3785
|
+
inline-size: 100%;
|
|
4021
3786
|
padding-block-end: var(--utrecht-page-header-padding-block-end);
|
|
4022
3787
|
padding-block-start: var(--utrecht-page-header-padding-block-start);
|
|
4023
3788
|
padding-inline-end: var(--utrecht-page-padding-inline-end);
|
|
@@ -4025,7 +3790,23 @@
|
|
|
4025
3790
|
}
|
|
4026
3791
|
|
|
4027
3792
|
.utrecht-page-header__content {
|
|
4028
|
-
|
|
3793
|
+
background-color: var(--utrecht-page-header-content-background-color);
|
|
3794
|
+
box-sizing: border-box;
|
|
3795
|
+
color: var(--utrecht-page-header-content-color);
|
|
3796
|
+
inline-size: 100%;
|
|
3797
|
+
justify-self: center;
|
|
3798
|
+
max-inline-size: var(--utrecht-page-header-content-max-inline-size);
|
|
3799
|
+
padding-block-end: var(--utrecht-page-header-content-padding-block-end);
|
|
3800
|
+
padding-block-start: var(--utrecht-page-header-content-padding-block-start);
|
|
3801
|
+
padding-inline: var(--utrecht-page-header-content-padding-inline);
|
|
3802
|
+
}
|
|
3803
|
+
.utrecht-page-layout {
|
|
3804
|
+
align-items: flex-start;
|
|
3805
|
+
block-size: 100%;
|
|
3806
|
+
display: flex;
|
|
3807
|
+
flex-direction: column;
|
|
3808
|
+
inline-size: 100%;
|
|
3809
|
+
justify-content: flex-start;
|
|
4029
3810
|
}
|
|
4030
3811
|
.utrecht-page {
|
|
4031
3812
|
margin-inline-end: auto;
|
|
@@ -4131,6 +3912,7 @@
|
|
|
4131
3912
|
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
4132
3913
|
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
4133
3914
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
3915
|
+
z-index: 1;
|
|
4134
3916
|
}
|
|
4135
3917
|
.utrecht-paragraph {
|
|
4136
3918
|
color: var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit));
|
|
@@ -4273,19 +4055,19 @@
|
|
|
4273
4055
|
|
|
4274
4056
|
.utrecht-radio-button--focus {
|
|
4275
4057
|
--_utrecht-radio-button-interactive-background-color: var(
|
|
4276
|
-
--
|
|
4058
|
+
--_utrecht-radio-button-state-focus-background-color,
|
|
4277
4059
|
var(--utrecht-radio-button-focus-background-color)
|
|
4278
4060
|
);
|
|
4279
4061
|
--_utrecht-radio-button-interactive-border-color: var(
|
|
4280
|
-
--
|
|
4062
|
+
--_utrecht-radio-button-state-focus-border-color,
|
|
4281
4063
|
var(--utrecht-radio-button-focus-border-color)
|
|
4282
4064
|
);
|
|
4283
4065
|
--_utrecht-radio-button-interactive-border-width: var(
|
|
4284
|
-
--
|
|
4066
|
+
--_utrecht-radio-button-state-focus-border-width,
|
|
4285
4067
|
var(--utrecht-radio-button-focus-border-width)
|
|
4286
4068
|
);
|
|
4287
4069
|
--_utrecht-radio-button-interactive-color: var(
|
|
4288
|
-
--
|
|
4070
|
+
--_utrecht-radio-button-state-focus-color,
|
|
4289
4071
|
var(--utrecht-radio-button-focus-color)
|
|
4290
4072
|
);
|
|
4291
4073
|
}
|
|
@@ -4298,6 +4080,7 @@
|
|
|
4298
4080
|
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
4299
4081
|
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
4300
4082
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
4083
|
+
z-index: 1;
|
|
4301
4084
|
}
|
|
4302
4085
|
|
|
4303
4086
|
.utrecht-radio-button--active {
|
|
@@ -4410,19 +4193,19 @@
|
|
|
4410
4193
|
}
|
|
4411
4194
|
.utrecht-radio-button--html-input:focus:not([aria-disabled=true], :disabled) {
|
|
4412
4195
|
--_utrecht-radio-button-interactive-background-color: var(
|
|
4413
|
-
--
|
|
4196
|
+
--_utrecht-radio-button-state-focus-background-color,
|
|
4414
4197
|
var(--utrecht-radio-button-focus-background-color)
|
|
4415
4198
|
);
|
|
4416
4199
|
--_utrecht-radio-button-interactive-border-color: var(
|
|
4417
|
-
--
|
|
4200
|
+
--_utrecht-radio-button-state-focus-border-color,
|
|
4418
4201
|
var(--utrecht-radio-button-focus-border-color)
|
|
4419
4202
|
);
|
|
4420
4203
|
--_utrecht-radio-button-interactive-border-width: var(
|
|
4421
|
-
--
|
|
4204
|
+
--_utrecht-radio-button-state-focus-border-width,
|
|
4422
4205
|
var(--utrecht-radio-button-focus-border-width)
|
|
4423
4206
|
);
|
|
4424
4207
|
--_utrecht-radio-button-interactive-color: var(
|
|
4425
|
-
--
|
|
4208
|
+
--_utrecht-radio-button-state-focus-color,
|
|
4426
4209
|
var(--utrecht-radio-button-focus-color)
|
|
4427
4210
|
);
|
|
4428
4211
|
}
|
|
@@ -4434,6 +4217,7 @@
|
|
|
4434
4217
|
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
4435
4218
|
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
4436
4219
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
4220
|
+
z-index: 1;
|
|
4437
4221
|
}
|
|
4438
4222
|
.utrecht-radio-button--html-input:hover:not([aria-disabled=true], :disabled) {
|
|
4439
4223
|
--_utrecht-radio-button-interactive-background-color: var(
|
|
@@ -6229,6 +6013,27 @@
|
|
|
6229
6013
|
.utrecht-rich-text .utrecht-unordered-list:has(+ .utrecht-unordered-list) {
|
|
6230
6014
|
--utrecht-unordered-list-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
|
|
6231
6015
|
}
|
|
6016
|
+
.utrecht-root {
|
|
6017
|
+
-webkit-font-smoothing: auto !important;
|
|
6018
|
+
-moz-osx-font-smoothing: auto !important;
|
|
6019
|
+
background-color: var(--utrecht-root-background-color);
|
|
6020
|
+
block-size: 100%;
|
|
6021
|
+
color: var(--utrecht-root-color);
|
|
6022
|
+
font-family: var(--utrecht-root-font-family);
|
|
6023
|
+
-webkit-hyphens: auto;
|
|
6024
|
+
-moz-hyphens: auto;
|
|
6025
|
+
-ms-hyphens: auto;
|
|
6026
|
+
hyphens: auto;
|
|
6027
|
+
inline-size: 100%;
|
|
6028
|
+
overflow-block: auto;
|
|
6029
|
+
overflow-inline: auto;
|
|
6030
|
+
position: relative;
|
|
6031
|
+
text-rendering: optimizeLegibility;
|
|
6032
|
+
-moz-text-size-adjust: none;
|
|
6033
|
+
-webkit-text-size-adjust: none;
|
|
6034
|
+
text-size-adjust: none;
|
|
6035
|
+
word-break: break-word;
|
|
6036
|
+
}
|
|
6232
6037
|
.utrecht-search-bar {
|
|
6233
6038
|
--utrecht-button-border-color: var(--utrecht-search-bar-button-border-color);
|
|
6234
6039
|
--utrecht-button-hover-scale: var(--utrecht-search-bar-hover-scale);
|
|
@@ -6323,6 +6128,12 @@
|
|
|
6323
6128
|
cursor: var(--utrecht-action-disabled-cursor, not-allowed);
|
|
6324
6129
|
}
|
|
6325
6130
|
|
|
6131
|
+
.utrecht-select--hover {
|
|
6132
|
+
background-color: var(--utrecht-select-hover-background-color, var(--utrecht-form-control-hover-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
|
|
6133
|
+
border-color: var(--utrecht-select-hover-border-color, var(--utrecht-form-control-hover-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
|
|
6134
|
+
color: var(--utrecht-select-hover-color, var(--utrecht-form-control-hover-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
|
|
6135
|
+
}
|
|
6136
|
+
|
|
6326
6137
|
.utrecht-select--focus {
|
|
6327
6138
|
background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
|
|
6328
6139
|
border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
|
|
@@ -6337,6 +6148,7 @@
|
|
|
6337
6148
|
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
6338
6149
|
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
6339
6150
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
6151
|
+
z-index: 1;
|
|
6340
6152
|
}
|
|
6341
6153
|
|
|
6342
6154
|
.utrecht-select--busy {
|
|
@@ -6358,6 +6170,11 @@
|
|
|
6358
6170
|
}
|
|
6359
6171
|
.utrecht-select--html-select {
|
|
6360
6172
|
}
|
|
6173
|
+
.utrecht-select--html-select:hover {
|
|
6174
|
+
background-color: var(--utrecht-select-hover-background-color, var(--utrecht-form-control-hover-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
|
|
6175
|
+
border-color: var(--utrecht-select-hover-border-color, var(--utrecht-form-control-hover-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
|
|
6176
|
+
color: var(--utrecht-select-hover-color, var(--utrecht-form-control-hover-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
|
|
6177
|
+
}
|
|
6361
6178
|
.utrecht-select--html-select:focus {
|
|
6362
6179
|
background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
|
|
6363
6180
|
border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
|
|
@@ -6371,6 +6188,7 @@
|
|
|
6371
6188
|
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
6372
6189
|
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
6373
6190
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
6191
|
+
z-index: 1;
|
|
6374
6192
|
}
|
|
6375
6193
|
.utrecht-select--html-select:disabled {
|
|
6376
6194
|
background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
|
|
@@ -6448,6 +6266,7 @@
|
|
|
6448
6266
|
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
6449
6267
|
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
6450
6268
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
6269
|
+
z-index: 1;
|
|
6451
6270
|
text-decoration: var(--utrecht-skip-link-focus-visible-text-decoration, var(--utrecht-skip-link-focus-text-decoration));
|
|
6452
6271
|
}
|
|
6453
6272
|
|
|
@@ -6460,11 +6279,13 @@
|
|
|
6460
6279
|
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
6461
6280
|
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
6462
6281
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
6282
|
+
z-index: 1;
|
|
6463
6283
|
text-decoration: var(--utrecht-skip-link-focus-visible-text-decoration, var(--utrecht-skip-link-focus-text-decoration));
|
|
6464
6284
|
}
|
|
6465
6285
|
.utrecht-spotlight-section {
|
|
6466
6286
|
background-color: var(--_utrecht-spotlight-section-background-color, var(--utrecht-spotlight-section-background-color));
|
|
6467
6287
|
border-color: var(--_utrecht-spotlight-section-border-color, var(--utrecht-spotlight-section-border-color));
|
|
6288
|
+
border-radius: var(--utrecht-spotlight-section-border-radius, 0);
|
|
6468
6289
|
border-style: solid;
|
|
6469
6290
|
border-width: var(--_utrecht-spotlight-section-border-width, var(--utrecht-spotlight-section-border-width, 0));
|
|
6470
6291
|
color: var(--_utrecht-spotlight-section-color, var(--utrecht-spotlight-section-color));
|
|
@@ -6904,6 +6725,7 @@
|
|
|
6904
6725
|
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
6905
6726
|
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
6906
6727
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
6728
|
+
z-index: 1;
|
|
6907
6729
|
}
|
|
6908
6730
|
|
|
6909
6731
|
.utrecht-textarea--read-only {
|
|
@@ -6933,6 +6755,7 @@
|
|
|
6933
6755
|
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
6934
6756
|
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
6935
6757
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
6758
|
+
z-index: 1;
|
|
6936
6759
|
}
|
|
6937
6760
|
.utrecht-textarea--html-textarea:invalid, .utrecht-textarea--html-textarea[aria-invalid=true] {
|
|
6938
6761
|
--_utrecht-textarea-border-width: var(
|
|
@@ -7032,6 +6855,7 @@
|
|
|
7032
6855
|
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
7033
6856
|
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
7034
6857
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
6858
|
+
z-index: 1;
|
|
7035
6859
|
}
|
|
7036
6860
|
|
|
7037
6861
|
.utrecht-textbox--read-only {
|
|
@@ -7117,6 +6941,7 @@
|
|
|
7117
6941
|
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
7118
6942
|
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
7119
6943
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
6944
|
+
z-index: 1;
|
|
7120
6945
|
}
|
|
7121
6946
|
.utrecht-textbox--html-input:invalid, .utrecht-textbox--html-input[aria-invalid=true] {
|
|
7122
6947
|
--_utrecht-textbox-border-width: var(
|
|
@@ -7193,6 +7018,7 @@
|
|
|
7193
7018
|
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
7194
7019
|
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
7195
7020
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
7021
|
+
z-index: 1;
|
|
7196
7022
|
}
|
|
7197
7023
|
|
|
7198
7024
|
.utrecht-toptask-link--focus, .utrecht-toptask-link:focus {
|