@loidolt/theme-styles 0.6.0 → 0.7.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/package.json +2 -2
- package/src/accessibility.css +24 -3
- package/src/components/charts.css +39 -0
- package/src/components/docs.css +298 -0
- package/src/components/maps.css +323 -0
- package/src/components.css +3 -0
- package/src/index.css +7 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@loidolt/theme-styles",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
4
4
|
"description": "Base styles, fonts, accessibility helpers, and utilities for Loidolt applications",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"build": "node -e \"console.log('theme-styles: source CSS is publish-ready')\""
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@loidolt/theme-tokens": "^0.
|
|
31
|
+
"@loidolt/theme-tokens": "^0.7.0"
|
|
32
32
|
},
|
|
33
33
|
"publishConfig": {
|
|
34
34
|
"access": "public",
|
package/src/accessibility.css
CHANGED
|
@@ -22,7 +22,13 @@
|
|
|
22
22
|
.ldt-tabs__list,
|
|
23
23
|
.ldt-toggle-group,
|
|
24
24
|
.ldt-listbox,
|
|
25
|
-
.ldt-media-grid
|
|
25
|
+
.ldt-media-grid,
|
|
26
|
+
.ldt-map,
|
|
27
|
+
.ldt-map-features__list,
|
|
28
|
+
.ldt-layer-manager,
|
|
29
|
+
.ldt-code__pre,
|
|
30
|
+
.ldt-toc-panel__wide,
|
|
31
|
+
.ldt-mermaid
|
|
26
32
|
)
|
|
27
33
|
:where(:focus-visible) {
|
|
28
34
|
outline-offset: -2px;
|
|
@@ -113,7 +119,12 @@
|
|
|
113
119
|
.ldt-media-controls__speed,
|
|
114
120
|
.ldt-media-controls__range,
|
|
115
121
|
.ldt-lightbox__control,
|
|
116
|
-
.ldt-media-carousel__control
|
|
122
|
+
.ldt-media-carousel__control,
|
|
123
|
+
.ldt-map-features__item,
|
|
124
|
+
.ldt-map .maplibregl-ctrl-group button,
|
|
125
|
+
.ldt-layer-manager__toggle,
|
|
126
|
+
.ldt-code__copy,
|
|
127
|
+
.ldt-toc__link
|
|
117
128
|
) {
|
|
118
129
|
min-height: 44px;
|
|
119
130
|
}
|
|
@@ -125,10 +136,20 @@
|
|
|
125
136
|
.ldt-chip__remove,
|
|
126
137
|
.ldt-media-controls__button,
|
|
127
138
|
.ldt-lightbox__control,
|
|
128
|
-
.ldt-media-carousel__control
|
|
139
|
+
.ldt-media-carousel__control,
|
|
140
|
+
.ldt-map .maplibregl-ctrl-group button
|
|
129
141
|
) {
|
|
130
142
|
min-width: 44px;
|
|
131
143
|
}
|
|
144
|
+
/* A map marker keeps its drawn size — it points at a spot — and takes a 44px touch. */
|
|
145
|
+
.ldt-map-marker::after {
|
|
146
|
+
content: '';
|
|
147
|
+
position: absolute;
|
|
148
|
+
inset: 50% auto auto 50%;
|
|
149
|
+
width: 44px;
|
|
150
|
+
height: 44px;
|
|
151
|
+
transform: translate(-50%, -50%);
|
|
152
|
+
}
|
|
132
153
|
/* The thumb keeps its drawn size; an invisible 44px square around it takes the touch. */
|
|
133
154
|
.ldt-slider__thumb {
|
|
134
155
|
position: relative;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/* @loidolt/theme-charts. The chart itself is painted by ECharts from the same tokens (read at
|
|
2
|
+
runtime through `createTokenColors`); this file styles everything around the canvas. */
|
|
3
|
+
.ldt-chart {
|
|
4
|
+
display: grid;
|
|
5
|
+
gap: 0.5rem;
|
|
6
|
+
min-width: 0;
|
|
7
|
+
margin: 0;
|
|
8
|
+
}
|
|
9
|
+
/* The label voice, as a stat's label: a chart caption names data, it is not a heading. */
|
|
10
|
+
.ldt-chart__title {
|
|
11
|
+
color: var(--loidolt-text-muted);
|
|
12
|
+
font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
|
|
13
|
+
letter-spacing: var(--loidolt-font-tracking-utility);
|
|
14
|
+
text-transform: uppercase;
|
|
15
|
+
}
|
|
16
|
+
.ldt-chart__canvas,
|
|
17
|
+
.ldt-chart__state {
|
|
18
|
+
position: relative;
|
|
19
|
+
width: 100%;
|
|
20
|
+
min-width: 0;
|
|
21
|
+
height: var(--ldt-chart-height, 20rem);
|
|
22
|
+
}
|
|
23
|
+
.ldt-chart__canvas[hidden] {
|
|
24
|
+
display: none;
|
|
25
|
+
}
|
|
26
|
+
.ldt-chart__state.ldt-empty-state {
|
|
27
|
+
height: auto;
|
|
28
|
+
min-height: var(--ldt-chart-height, 20rem);
|
|
29
|
+
align-content: center;
|
|
30
|
+
}
|
|
31
|
+
.ldt-chart__alert :where(p) {
|
|
32
|
+
margin: 0 0 0.5rem;
|
|
33
|
+
}
|
|
34
|
+
.ldt-chart__table-toggle {
|
|
35
|
+
justify-self: start;
|
|
36
|
+
}
|
|
37
|
+
.ldt-chart__table[hidden] {
|
|
38
|
+
display: none;
|
|
39
|
+
}
|
|
@@ -0,0 +1,298 @@
|
|
|
1
|
+
/* @loidolt/theme-docs. Rendered markdown takes `.ldt-prose` for its typography; this file adds
|
|
2
|
+
what markdown documentation needs beyond it — code frames and highlighting, admonitions,
|
|
3
|
+
footnotes, diagrams, the table of contents, and the page around them. */
|
|
4
|
+
|
|
5
|
+
/* --- Headings that link to themselves ------------------------------------------------------- */
|
|
6
|
+
.ldt-heading-anchor {
|
|
7
|
+
color: inherit;
|
|
8
|
+
text-decoration: none;
|
|
9
|
+
}
|
|
10
|
+
.ldt-heading-anchor:hover {
|
|
11
|
+
text-decoration: underline;
|
|
12
|
+
text-decoration-color: var(--loidolt-accent);
|
|
13
|
+
text-underline-offset: 0.2em;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
/* --- Code ------------------------------------------------------------------------------------ */
|
|
17
|
+
/* Shiki's CSS-variables theme reads `--ldt-syntax-*`; mapping them to the syntax tokens makes
|
|
18
|
+
highlighted code follow the light and dark themes with no second render. */
|
|
19
|
+
.ldt-code {
|
|
20
|
+
--ldt-syntax-foreground: var(--loidolt-text-inverse);
|
|
21
|
+
--ldt-syntax-background: var(--loidolt-surface-inverse);
|
|
22
|
+
--ldt-syntax-token-keyword: var(--loidolt-syntax-keyword);
|
|
23
|
+
--ldt-syntax-token-string: var(--loidolt-syntax-string);
|
|
24
|
+
--ldt-syntax-token-string-expression: var(--loidolt-syntax-string);
|
|
25
|
+
--ldt-syntax-token-comment: var(--loidolt-syntax-comment);
|
|
26
|
+
--ldt-syntax-token-constant: var(--loidolt-syntax-constant);
|
|
27
|
+
--ldt-syntax-token-function: var(--loidolt-syntax-function);
|
|
28
|
+
--ldt-syntax-token-parameter: var(--loidolt-syntax-parameter);
|
|
29
|
+
--ldt-syntax-token-punctuation: var(--loidolt-syntax-punctuation);
|
|
30
|
+
--ldt-syntax-token-link: var(--loidolt-syntax-function);
|
|
31
|
+
margin: 0 0 1.1em;
|
|
32
|
+
min-width: 0;
|
|
33
|
+
}
|
|
34
|
+
.ldt-code__header {
|
|
35
|
+
display: flex;
|
|
36
|
+
gap: 0.75rem;
|
|
37
|
+
align-items: center;
|
|
38
|
+
justify-content: space-between;
|
|
39
|
+
min-height: 2rem;
|
|
40
|
+
padding: 0 0 0 0.75rem;
|
|
41
|
+
border: var(--loidolt-border-width) solid var(--loidolt-border);
|
|
42
|
+
border-bottom: 0;
|
|
43
|
+
color: var(--loidolt-text-muted);
|
|
44
|
+
background: var(--loidolt-surface-alt);
|
|
45
|
+
font: var(--loidolt-font-size-xs) var(--loidolt-font-mono);
|
|
46
|
+
}
|
|
47
|
+
.ldt-code__filename {
|
|
48
|
+
overflow: hidden;
|
|
49
|
+
text-overflow: ellipsis;
|
|
50
|
+
white-space: nowrap;
|
|
51
|
+
}
|
|
52
|
+
.ldt-code__copy {
|
|
53
|
+
flex: none;
|
|
54
|
+
margin-inline-start: auto;
|
|
55
|
+
min-height: 2rem;
|
|
56
|
+
padding: 0 0.75rem;
|
|
57
|
+
border: 0;
|
|
58
|
+
border-inline-start: var(--loidolt-border-width) solid var(--loidolt-border);
|
|
59
|
+
color: var(--loidolt-text);
|
|
60
|
+
background: none;
|
|
61
|
+
font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
|
|
62
|
+
letter-spacing: var(--loidolt-font-tracking-utility);
|
|
63
|
+
text-transform: uppercase;
|
|
64
|
+
cursor: pointer;
|
|
65
|
+
}
|
|
66
|
+
.ldt-code__copy:hover {
|
|
67
|
+
background: var(--loidolt-surface);
|
|
68
|
+
}
|
|
69
|
+
.ldt-code__pre {
|
|
70
|
+
margin: 0;
|
|
71
|
+
padding: 0.9em 1.1em;
|
|
72
|
+
overflow-x: auto;
|
|
73
|
+
border: var(--loidolt-border-width) solid var(--loidolt-border);
|
|
74
|
+
color: var(--ldt-syntax-foreground);
|
|
75
|
+
background: var(--ldt-syntax-background);
|
|
76
|
+
font: 0.85em / var(--loidolt-font-line-height-normal) var(--loidolt-font-mono);
|
|
77
|
+
tab-size: 2;
|
|
78
|
+
}
|
|
79
|
+
.ldt-code__pre code {
|
|
80
|
+
padding: 0;
|
|
81
|
+
border: 0;
|
|
82
|
+
color: inherit;
|
|
83
|
+
background: transparent;
|
|
84
|
+
font: inherit;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
/* --- Admonitions ----------------------------------------------------------------------------- */
|
|
88
|
+
.ldt-admonition {
|
|
89
|
+
margin: 0 0 1.1em;
|
|
90
|
+
}
|
|
91
|
+
.ldt-admonition .ldt-alert__title {
|
|
92
|
+
margin: 0 0 0.25rem;
|
|
93
|
+
}
|
|
94
|
+
.ldt-admonition .ldt-alert__description > :last-child {
|
|
95
|
+
margin-bottom: 0;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/* --- Footnotes ------------------------------------------------------------------------------- */
|
|
99
|
+
.ldt-footnote-ref a {
|
|
100
|
+
padding-inline: 0.1em;
|
|
101
|
+
text-decoration: none;
|
|
102
|
+
}
|
|
103
|
+
.ldt-footnotes {
|
|
104
|
+
margin-top: 2em;
|
|
105
|
+
padding-top: 1em;
|
|
106
|
+
border-top: var(--loidolt-border-width) solid var(--loidolt-border);
|
|
107
|
+
color: var(--loidolt-text-muted);
|
|
108
|
+
font-size: 0.9em;
|
|
109
|
+
}
|
|
110
|
+
.ldt-unsafe-link {
|
|
111
|
+
text-decoration: underline dotted;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/* --- Diagrams -------------------------------------------------------------------------------- */
|
|
115
|
+
.ldt-mermaid {
|
|
116
|
+
display: grid;
|
|
117
|
+
gap: 0.5rem;
|
|
118
|
+
margin: 0 0 1.1em;
|
|
119
|
+
padding: 1rem;
|
|
120
|
+
overflow-x: auto;
|
|
121
|
+
border: var(--loidolt-border-width) solid var(--loidolt-border);
|
|
122
|
+
background: var(--loidolt-background);
|
|
123
|
+
}
|
|
124
|
+
.ldt-mermaid__diagram[hidden] {
|
|
125
|
+
display: none;
|
|
126
|
+
}
|
|
127
|
+
.ldt-mermaid__diagram svg {
|
|
128
|
+
display: block;
|
|
129
|
+
max-width: 100%;
|
|
130
|
+
height: auto;
|
|
131
|
+
margin-inline: auto;
|
|
132
|
+
}
|
|
133
|
+
.ldt-mermaid__caption {
|
|
134
|
+
color: var(--loidolt-text-muted);
|
|
135
|
+
font-size: var(--loidolt-font-size-sm);
|
|
136
|
+
}
|
|
137
|
+
.ldt-mermaid__source summary {
|
|
138
|
+
color: var(--loidolt-text-muted);
|
|
139
|
+
font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
|
|
140
|
+
letter-spacing: var(--loidolt-font-tracking-utility);
|
|
141
|
+
text-transform: uppercase;
|
|
142
|
+
cursor: pointer;
|
|
143
|
+
}
|
|
144
|
+
.ldt-mermaid__source pre,
|
|
145
|
+
.ldt-mermaid__fallback,
|
|
146
|
+
pre.ldt-mermaid {
|
|
147
|
+
margin: 0.5rem 0 0;
|
|
148
|
+
white-space: pre-wrap;
|
|
149
|
+
font: var(--loidolt-font-size-sm) var(--loidolt-font-mono);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
/* --- Table of contents ----------------------------------------------------------------------- */
|
|
153
|
+
.ldt-toc {
|
|
154
|
+
font: var(--loidolt-font-size-sm) var(--loidolt-font-utility);
|
|
155
|
+
}
|
|
156
|
+
.ldt-toc__title {
|
|
157
|
+
margin: 0 0 0.5rem;
|
|
158
|
+
color: var(--loidolt-text-muted);
|
|
159
|
+
font-size: var(--loidolt-font-size-xs);
|
|
160
|
+
letter-spacing: var(--loidolt-font-tracking-utility);
|
|
161
|
+
text-transform: uppercase;
|
|
162
|
+
}
|
|
163
|
+
.ldt-toc__list {
|
|
164
|
+
margin: 0;
|
|
165
|
+
padding: 0;
|
|
166
|
+
list-style: none;
|
|
167
|
+
}
|
|
168
|
+
.ldt-toc__item {
|
|
169
|
+
padding-inline-start: calc(var(--ldt-toc-level, 0) * 0.85rem);
|
|
170
|
+
}
|
|
171
|
+
.ldt-toc__link {
|
|
172
|
+
display: flex;
|
|
173
|
+
align-items: center;
|
|
174
|
+
min-block-size: 1.5rem;
|
|
175
|
+
padding: 0.2rem 0 0.2rem 0.65rem;
|
|
176
|
+
border-inline-start: 2px solid var(--loidolt-border-soft);
|
|
177
|
+
color: var(--loidolt-text-muted);
|
|
178
|
+
text-decoration: none;
|
|
179
|
+
}
|
|
180
|
+
.ldt-toc__link:hover {
|
|
181
|
+
color: var(--loidolt-text);
|
|
182
|
+
}
|
|
183
|
+
.ldt-toc__link[aria-current='location'] {
|
|
184
|
+
border-inline-start-color: var(--loidolt-accent);
|
|
185
|
+
color: var(--loidolt-text);
|
|
186
|
+
}
|
|
187
|
+
.ldt-toc-panel__wide {
|
|
188
|
+
position: sticky;
|
|
189
|
+
top: var(--ldt-docs-top, calc(var(--loidolt-size-topbar) + 1rem));
|
|
190
|
+
max-height: calc(100vh - var(--ldt-docs-top, calc(var(--loidolt-size-topbar) + 1rem)) - 1rem);
|
|
191
|
+
overflow-y: auto;
|
|
192
|
+
}
|
|
193
|
+
.ldt-toc-panel__compact {
|
|
194
|
+
display: none;
|
|
195
|
+
}
|
|
196
|
+
/* The contents go behind a button where there is no room beside the page for them. */
|
|
197
|
+
@media (max-width: 1023.98px) {
|
|
198
|
+
.ldt-toc-panel__wide {
|
|
199
|
+
display: none;
|
|
200
|
+
}
|
|
201
|
+
.ldt-toc-panel__compact {
|
|
202
|
+
display: block;
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
/* --- The page -------------------------------------------------------------------------------- */
|
|
207
|
+
.ldt-markdown-page {
|
|
208
|
+
display: grid;
|
|
209
|
+
gap: 1.5rem;
|
|
210
|
+
min-width: 0;
|
|
211
|
+
}
|
|
212
|
+
.ldt-markdown-page__main {
|
|
213
|
+
min-width: 0;
|
|
214
|
+
}
|
|
215
|
+
@media (min-width: 1024px) {
|
|
216
|
+
.ldt-markdown-page--toc {
|
|
217
|
+
grid-template-columns: minmax(0, 1fr) 14rem;
|
|
218
|
+
gap: 2.5rem;
|
|
219
|
+
align-items: start;
|
|
220
|
+
}
|
|
221
|
+
.ldt-markdown-page--toc .ldt-markdown-page__toc {
|
|
222
|
+
grid-column: 2;
|
|
223
|
+
grid-row: 1;
|
|
224
|
+
}
|
|
225
|
+
.ldt-markdown-page--toc .ldt-markdown-page__main {
|
|
226
|
+
grid-column: 1;
|
|
227
|
+
grid-row: 1;
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
.ldt-markdown-page__pager {
|
|
231
|
+
display: flex;
|
|
232
|
+
flex-wrap: wrap;
|
|
233
|
+
gap: 0.75rem;
|
|
234
|
+
justify-content: space-between;
|
|
235
|
+
margin-top: 2.5rem;
|
|
236
|
+
padding-top: 1.25rem;
|
|
237
|
+
border-top: var(--loidolt-border-width) solid var(--loidolt-border);
|
|
238
|
+
}
|
|
239
|
+
.ldt-markdown-page__pager a {
|
|
240
|
+
display: grid;
|
|
241
|
+
gap: 0.15rem;
|
|
242
|
+
min-width: min(14rem, 100%);
|
|
243
|
+
padding: 0.65rem 0.9rem;
|
|
244
|
+
border: var(--loidolt-border-width) solid var(--loidolt-border);
|
|
245
|
+
color: var(--loidolt-text);
|
|
246
|
+
text-decoration: none;
|
|
247
|
+
}
|
|
248
|
+
.ldt-markdown-page__pager a:hover {
|
|
249
|
+
border-color: var(--loidolt-border-strong);
|
|
250
|
+
}
|
|
251
|
+
.ldt-markdown-page__next {
|
|
252
|
+
margin-inline-start: auto;
|
|
253
|
+
text-align: end;
|
|
254
|
+
}
|
|
255
|
+
.ldt-markdown-page__direction {
|
|
256
|
+
color: var(--loidolt-text-muted);
|
|
257
|
+
font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
|
|
258
|
+
letter-spacing: var(--loidolt-font-tracking-utility);
|
|
259
|
+
text-transform: uppercase;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
/* --- Docs index ------------------------------------------------------------------------------ */
|
|
263
|
+
.ldt-docs-hub {
|
|
264
|
+
display: grid;
|
|
265
|
+
gap: 2.25rem;
|
|
266
|
+
}
|
|
267
|
+
.ldt-docs-hub__title {
|
|
268
|
+
margin: 0;
|
|
269
|
+
}
|
|
270
|
+
.ldt-docs-hub__description {
|
|
271
|
+
margin: 0.35rem 0 0;
|
|
272
|
+
color: var(--loidolt-text-muted);
|
|
273
|
+
}
|
|
274
|
+
.ldt-docs-hub__grid {
|
|
275
|
+
display: grid;
|
|
276
|
+
grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
|
|
277
|
+
gap: 1rem;
|
|
278
|
+
margin: 1rem 0 0;
|
|
279
|
+
padding: 0;
|
|
280
|
+
list-style: none;
|
|
281
|
+
}
|
|
282
|
+
.ldt-docs-hub__grid > li {
|
|
283
|
+
display: grid;
|
|
284
|
+
}
|
|
285
|
+
/* A docs card is often only a heading and a line; drop the empty body and its rule. */
|
|
286
|
+
.ldt-docs-card .ldt-card__content:empty {
|
|
287
|
+
display: none;
|
|
288
|
+
}
|
|
289
|
+
.ldt-docs-card .ldt-card__header:has(+ .ldt-card__content:empty) {
|
|
290
|
+
border-bottom: 0;
|
|
291
|
+
}
|
|
292
|
+
.ldt-docs-card__eyebrow {
|
|
293
|
+
margin: 0 0 0.35rem;
|
|
294
|
+
color: var(--loidolt-text-accent);
|
|
295
|
+
font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
|
|
296
|
+
letter-spacing: var(--loidolt-font-tracking-wide);
|
|
297
|
+
text-transform: uppercase;
|
|
298
|
+
}
|
|
@@ -0,0 +1,323 @@
|
|
|
1
|
+
/* @loidolt/theme-maps. The map itself is painted by MapLibre from the same tokens (read at
|
|
2
|
+
runtime through `createTokenColors`); this file dresses MapLibre's controls, popups and
|
|
3
|
+
attribution, and the loidolt pieces placed on the map. It sits in `loidolt.components`, after
|
|
4
|
+
the `loidolt.vendor` layer MapLibre's own stylesheet goes in, so it wins without `!important`. */
|
|
5
|
+
.ldt-map {
|
|
6
|
+
position: relative;
|
|
7
|
+
min-width: 0;
|
|
8
|
+
height: var(--ldt-map-height, 25rem);
|
|
9
|
+
overflow: hidden;
|
|
10
|
+
border: var(--loidolt-border-width) solid var(--loidolt-border);
|
|
11
|
+
background: var(--loidolt-map-land);
|
|
12
|
+
}
|
|
13
|
+
.ldt-map__canvas {
|
|
14
|
+
position: absolute;
|
|
15
|
+
inset: 0;
|
|
16
|
+
}
|
|
17
|
+
.ldt-map__canvas[hidden],
|
|
18
|
+
.ldt-map__children[hidden] {
|
|
19
|
+
display: none;
|
|
20
|
+
}
|
|
21
|
+
.ldt-map__alert {
|
|
22
|
+
margin: 0.75rem;
|
|
23
|
+
}
|
|
24
|
+
.ldt-map :where(.maplibregl-map) {
|
|
25
|
+
color: var(--loidolt-text);
|
|
26
|
+
font: var(--loidolt-font-size-sm) / var(--loidolt-font-line-height-normal)
|
|
27
|
+
var(--loidolt-font-utility);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/* Controls stay above markers, which can be placed anywhere — including under a corner. */
|
|
31
|
+
.ldt-map
|
|
32
|
+
:where(
|
|
33
|
+
.maplibregl-ctrl-top-left,
|
|
34
|
+
.maplibregl-ctrl-top-right,
|
|
35
|
+
.maplibregl-ctrl-bottom-left,
|
|
36
|
+
.maplibregl-ctrl-bottom-right
|
|
37
|
+
) {
|
|
38
|
+
z-index: var(--loidolt-z-raised);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/* Control groups: square, hairline-bordered, on the surface — the toolbar look. */
|
|
42
|
+
.ldt-map .maplibregl-ctrl-group {
|
|
43
|
+
border: var(--loidolt-border-width) solid var(--loidolt-border-strong);
|
|
44
|
+
border-radius: 0;
|
|
45
|
+
background: var(--loidolt-surface);
|
|
46
|
+
box-shadow: none;
|
|
47
|
+
}
|
|
48
|
+
.ldt-map .maplibregl-ctrl-group button {
|
|
49
|
+
width: 2rem;
|
|
50
|
+
height: 2rem;
|
|
51
|
+
color: var(--loidolt-text);
|
|
52
|
+
}
|
|
53
|
+
.ldt-map .maplibregl-ctrl-group button + button {
|
|
54
|
+
border-top: var(--loidolt-border-width) solid var(--loidolt-border);
|
|
55
|
+
}
|
|
56
|
+
.ldt-map .maplibregl-ctrl-group button:not(:disabled):hover {
|
|
57
|
+
background: var(--loidolt-surface-alt);
|
|
58
|
+
}
|
|
59
|
+
.ldt-map .maplibregl-ctrl-group button:focus-visible {
|
|
60
|
+
box-shadow: none;
|
|
61
|
+
}
|
|
62
|
+
/* MapLibre's icons are dark images, invisible on a dark surface. Masks of our own glyphs, filled
|
|
63
|
+
with the text colour, follow every theme. */
|
|
64
|
+
.ldt-map .maplibregl-ctrl button .maplibregl-ctrl-icon {
|
|
65
|
+
background-image: none;
|
|
66
|
+
background-color: currentColor;
|
|
67
|
+
mask: var(--ldt-map-icon) center / 1rem 1rem no-repeat;
|
|
68
|
+
}
|
|
69
|
+
.ldt-map .maplibregl-ctrl-zoom-in {
|
|
70
|
+
--ldt-map-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
|
|
71
|
+
}
|
|
72
|
+
.ldt-map .maplibregl-ctrl-zoom-out {
|
|
73
|
+
--ldt-map-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
|
|
74
|
+
}
|
|
75
|
+
.ldt-map .maplibregl-ctrl-compass {
|
|
76
|
+
--ldt-map-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2 11 8H5z'/%3E%3Cpath d='M5 8h6L8 14z' fill-opacity='.35'/%3E%3C/svg%3E");
|
|
77
|
+
}
|
|
78
|
+
.ldt-map .maplibregl-ctrl-fullscreen,
|
|
79
|
+
.ldt-map .maplibregl-ctrl-shrink {
|
|
80
|
+
--ldt-map-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M2 6V2h4M10 2h4v4M14 10v4h-4M6 14H2v-4'/%3E%3C/svg%3E");
|
|
81
|
+
}
|
|
82
|
+
.ldt-map .maplibregl-ctrl-geolocate {
|
|
83
|
+
--ldt-map-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M8 1v3M8 12v3M1 8h3M12 8h3'/%3E%3Crect x='4.5' y='4.5' width='7' height='7'/%3E%3C/svg%3E");
|
|
84
|
+
}
|
|
85
|
+
.ldt-map .maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active {
|
|
86
|
+
color: var(--loidolt-accent);
|
|
87
|
+
}
|
|
88
|
+
.ldt-map .maplibregl-ctrl-attrib-button {
|
|
89
|
+
--ldt-map-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 7h2v6H7zM7 3h2v2H7z'/%3E%3C/svg%3E");
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
/* Attribution: required by the tile licence, so readable — just quiet. */
|
|
93
|
+
.ldt-map .maplibregl-ctrl-attrib,
|
|
94
|
+
.ldt-map .maplibregl-ctrl-attrib.maplibregl-compact {
|
|
95
|
+
border-radius: 0;
|
|
96
|
+
color: var(--loidolt-text-muted);
|
|
97
|
+
background: var(--loidolt-surface);
|
|
98
|
+
font-size: var(--loidolt-font-size-xs);
|
|
99
|
+
}
|
|
100
|
+
.ldt-map .maplibregl-ctrl-attrib a {
|
|
101
|
+
display: inline-block;
|
|
102
|
+
padding-block: 0.35rem;
|
|
103
|
+
color: var(--loidolt-text);
|
|
104
|
+
line-height: 1.5;
|
|
105
|
+
}
|
|
106
|
+
.ldt-map .maplibregl-ctrl-attrib-button {
|
|
107
|
+
border-radius: 0;
|
|
108
|
+
background-color: transparent;
|
|
109
|
+
}
|
|
110
|
+
.ldt-map .maplibregl-ctrl-scale {
|
|
111
|
+
border-color: var(--loidolt-text-muted);
|
|
112
|
+
color: var(--loidolt-text);
|
|
113
|
+
background: var(--loidolt-surface);
|
|
114
|
+
font-size: var(--loidolt-font-size-xs);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
/* Controls of our own: legends, coordinates, the basemap switcher. */
|
|
118
|
+
.ldt-map-control {
|
|
119
|
+
padding: 0.5rem 0.65rem;
|
|
120
|
+
border: var(--loidolt-border-width) solid var(--loidolt-border-strong);
|
|
121
|
+
color: var(--loidolt-text);
|
|
122
|
+
background: var(--loidolt-surface);
|
|
123
|
+
}
|
|
124
|
+
.ldt-map-control.ldt-basemap-switcher {
|
|
125
|
+
padding: 0;
|
|
126
|
+
border: 0;
|
|
127
|
+
background: transparent;
|
|
128
|
+
}
|
|
129
|
+
.ldt-map-legend {
|
|
130
|
+
display: grid;
|
|
131
|
+
gap: 0.4rem;
|
|
132
|
+
min-width: 9rem;
|
|
133
|
+
max-width: 16rem;
|
|
134
|
+
font: var(--loidolt-font-size-sm) var(--loidolt-font-utility);
|
|
135
|
+
}
|
|
136
|
+
.ldt-map-legend__title,
|
|
137
|
+
.ldt-map-legend__summary {
|
|
138
|
+
margin: 0;
|
|
139
|
+
color: var(--loidolt-text-muted);
|
|
140
|
+
font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
|
|
141
|
+
letter-spacing: var(--loidolt-font-tracking-utility);
|
|
142
|
+
text-transform: uppercase;
|
|
143
|
+
}
|
|
144
|
+
.ldt-map-legend__summary {
|
|
145
|
+
cursor: pointer;
|
|
146
|
+
}
|
|
147
|
+
.ldt-map-legend__section {
|
|
148
|
+
display: grid;
|
|
149
|
+
gap: 0.35rem;
|
|
150
|
+
}
|
|
151
|
+
.ldt-map-legend__items {
|
|
152
|
+
display: grid;
|
|
153
|
+
gap: 0.25rem;
|
|
154
|
+
margin: 0;
|
|
155
|
+
padding: 0;
|
|
156
|
+
list-style: none;
|
|
157
|
+
}
|
|
158
|
+
.ldt-map-legend__item {
|
|
159
|
+
display: flex;
|
|
160
|
+
gap: 0.5rem;
|
|
161
|
+
align-items: center;
|
|
162
|
+
}
|
|
163
|
+
.ldt-map-legend__key {
|
|
164
|
+
flex: none;
|
|
165
|
+
width: 0.75rem;
|
|
166
|
+
height: 0.75rem;
|
|
167
|
+
background: var(--ldt-legend-color);
|
|
168
|
+
}
|
|
169
|
+
.ldt-map-legend__key--line {
|
|
170
|
+
height: 0.2rem;
|
|
171
|
+
}
|
|
172
|
+
.ldt-map-legend__key--dot {
|
|
173
|
+
border-radius: var(--loidolt-border-radius-pill);
|
|
174
|
+
}
|
|
175
|
+
.ldt-map-legend__ramp {
|
|
176
|
+
height: 0.6rem;
|
|
177
|
+
}
|
|
178
|
+
.ldt-map-legend__ends {
|
|
179
|
+
display: flex;
|
|
180
|
+
justify-content: space-between;
|
|
181
|
+
margin: 0;
|
|
182
|
+
color: var(--loidolt-text-muted);
|
|
183
|
+
font-size: var(--loidolt-font-size-xs);
|
|
184
|
+
}
|
|
185
|
+
.ldt-map-coordinates {
|
|
186
|
+
display: flex;
|
|
187
|
+
gap: 0.75rem;
|
|
188
|
+
margin: 0;
|
|
189
|
+
font: var(--loidolt-font-size-xs) var(--loidolt-font-mono);
|
|
190
|
+
font-variant-numeric: tabular-nums;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
/* The layer manager: a titled list of switches, sliders and move buttons. */
|
|
194
|
+
.ldt-layer-manager {
|
|
195
|
+
min-width: 13rem;
|
|
196
|
+
max-width: min(18rem, calc(100vw - 4rem));
|
|
197
|
+
/* Never taller than the map, so it cannot run into the controls in the corner below it. */
|
|
198
|
+
max-height: calc(var(--ldt-map-height, 25rem) - 4.5rem);
|
|
199
|
+
overflow-y: auto;
|
|
200
|
+
}
|
|
201
|
+
.ldt-layer-manager__title {
|
|
202
|
+
margin: 0;
|
|
203
|
+
}
|
|
204
|
+
.ldt-layer-manager__toggle {
|
|
205
|
+
width: 100%;
|
|
206
|
+
padding: 0.15rem 0;
|
|
207
|
+
border: 0;
|
|
208
|
+
color: var(--loidolt-text-muted);
|
|
209
|
+
background: none;
|
|
210
|
+
font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
|
|
211
|
+
letter-spacing: var(--loidolt-font-tracking-utility);
|
|
212
|
+
text-align: start;
|
|
213
|
+
text-transform: uppercase;
|
|
214
|
+
cursor: pointer;
|
|
215
|
+
}
|
|
216
|
+
.ldt-layer-manager__list {
|
|
217
|
+
display: grid;
|
|
218
|
+
gap: 0.5rem;
|
|
219
|
+
margin: 0.4rem 0 0;
|
|
220
|
+
padding: 0;
|
|
221
|
+
list-style: none;
|
|
222
|
+
}
|
|
223
|
+
.ldt-layer-manager__list[hidden] {
|
|
224
|
+
display: none;
|
|
225
|
+
}
|
|
226
|
+
.ldt-layer-manager__row {
|
|
227
|
+
display: grid;
|
|
228
|
+
grid-template-columns: minmax(0, 1fr) auto;
|
|
229
|
+
gap: 0.35rem 0.5rem;
|
|
230
|
+
align-items: center;
|
|
231
|
+
padding-top: 0.5rem;
|
|
232
|
+
border-top: var(--loidolt-border-width) solid var(--loidolt-border-soft);
|
|
233
|
+
}
|
|
234
|
+
.ldt-layer-manager__row:first-child {
|
|
235
|
+
padding-top: 0;
|
|
236
|
+
border-top: 0;
|
|
237
|
+
}
|
|
238
|
+
.ldt-layer-manager__move {
|
|
239
|
+
display: flex;
|
|
240
|
+
gap: 0.15rem;
|
|
241
|
+
}
|
|
242
|
+
.ldt-layer-manager__opacity {
|
|
243
|
+
grid-column: 1 / -1;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
/* Markers: the loidolt pin or dot, in a button that takes focus. */
|
|
247
|
+
.ldt-map-marker {
|
|
248
|
+
display: block;
|
|
249
|
+
padding: 0;
|
|
250
|
+
border: 0;
|
|
251
|
+
color: inherit;
|
|
252
|
+
background: none;
|
|
253
|
+
cursor: pointer;
|
|
254
|
+
}
|
|
255
|
+
span.ldt-map-marker {
|
|
256
|
+
cursor: default;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
/* Popups: square, on the surface, no tip — the same frame as a popover. */
|
|
260
|
+
.ldt-map-popup .maplibregl-popup-content {
|
|
261
|
+
padding: 0;
|
|
262
|
+
border: var(--loidolt-border-width) solid var(--loidolt-border-strong);
|
|
263
|
+
border-radius: 0;
|
|
264
|
+
color: var(--loidolt-text);
|
|
265
|
+
background: var(--loidolt-surface);
|
|
266
|
+
box-shadow: var(--loidolt-shadow-popover);
|
|
267
|
+
}
|
|
268
|
+
.ldt-map-popup .maplibregl-popup-tip {
|
|
269
|
+
display: none;
|
|
270
|
+
}
|
|
271
|
+
.ldt-map-popup__content {
|
|
272
|
+
display: grid;
|
|
273
|
+
grid-template-columns: minmax(0, 1fr) auto;
|
|
274
|
+
align-items: start;
|
|
275
|
+
gap: 0.25rem;
|
|
276
|
+
max-width: min(18rem, 80vw);
|
|
277
|
+
padding: 0.5rem 0.35rem 0.6rem 0.75rem;
|
|
278
|
+
}
|
|
279
|
+
.ldt-map-popup__body > :first-child {
|
|
280
|
+
margin-top: 0.3rem;
|
|
281
|
+
}
|
|
282
|
+
.ldt-map-popup__body > :last-child {
|
|
283
|
+
margin-bottom: 0;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
/* The feature list: every place on the map, as rows. */
|
|
287
|
+
.ldt-map-features__list {
|
|
288
|
+
margin: 0;
|
|
289
|
+
padding: 0;
|
|
290
|
+
border-top: var(--loidolt-border-width) solid var(--loidolt-border-soft);
|
|
291
|
+
list-style: none;
|
|
292
|
+
}
|
|
293
|
+
.ldt-map-features__item {
|
|
294
|
+
display: grid;
|
|
295
|
+
gap: 0.1rem;
|
|
296
|
+
width: 100%;
|
|
297
|
+
padding: 0.55rem 0.75rem;
|
|
298
|
+
border: 0;
|
|
299
|
+
border-bottom: var(--loidolt-border-width) solid var(--loidolt-border-soft);
|
|
300
|
+
border-left: 3px solid transparent;
|
|
301
|
+
color: var(--loidolt-text);
|
|
302
|
+
background: none;
|
|
303
|
+
font: inherit;
|
|
304
|
+
text-align: start;
|
|
305
|
+
cursor: pointer;
|
|
306
|
+
}
|
|
307
|
+
.ldt-map-features__item:hover {
|
|
308
|
+
background: var(--loidolt-surface-alt);
|
|
309
|
+
}
|
|
310
|
+
.ldt-map-features__item[aria-current='true'] {
|
|
311
|
+
border-left-color: var(--loidolt-accent);
|
|
312
|
+
background: var(--loidolt-surface-alt);
|
|
313
|
+
}
|
|
314
|
+
.ldt-map-features__description {
|
|
315
|
+
color: var(--loidolt-text-muted);
|
|
316
|
+
font-size: var(--loidolt-font-size-sm);
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
@media (forced-colors: active) {
|
|
320
|
+
.ldt-map .maplibregl-ctrl button .maplibregl-ctrl-icon {
|
|
321
|
+
background-color: ButtonText;
|
|
322
|
+
}
|
|
323
|
+
}
|
package/src/components.css
CHANGED
package/src/index.css
CHANGED
|
@@ -8,9 +8,14 @@
|
|
|
8
8
|
* `loidolt.a11y` is last so the focus ring and the reduced-motion overrides beat component
|
|
9
9
|
* styles by layer order alone — no `!important` needed, which keeps app CSS able to override
|
|
10
10
|
* them (unlayered styles outrank every layer for normal declarations).
|
|
11
|
+
*
|
|
12
|
+
* `loidolt.vendor` holds third-party stylesheets a loidolt package ships with — MapLibre's, for
|
|
13
|
+
* `@loidolt/theme-maps`. Vendor CSS left unlayered would outrank every layer here; slotted after
|
|
14
|
+
* `base` and before `components`, our resets cannot break it and our component styles can
|
|
15
|
+
* restyle it, whichever order the two stylesheets are imported in.
|
|
11
16
|
*/
|
|
12
|
-
@layer loidolt.tokens, loidolt.reset, loidolt.base, loidolt.
|
|
13
|
-
loidolt.a11y;
|
|
17
|
+
@layer loidolt.tokens, loidolt.reset, loidolt.base, loidolt.vendor, loidolt.components,
|
|
18
|
+
loidolt.utilities, loidolt.a11y;
|
|
14
19
|
|
|
15
20
|
@import '@loidolt/theme-tokens/css' layer(loidolt.tokens);
|
|
16
21
|
@import './fonts.css' layer(loidolt.base);
|