@loidolt/theme-styles 0.3.0 → 0.5.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/README.md +18 -0
- package/package.json +2 -5
- package/src/accessibility.css +40 -1
- package/src/components/actions.css +134 -0
- package/src/components/data.css +198 -0
- package/src/components/feedback.css +177 -0
- package/src/components/forms.css +201 -0
- package/src/components/layout.css +334 -0
- package/src/components/overlays.css +313 -0
- package/src/components/prose.css +233 -0
- package/src/components/selection.css +239 -0
- package/src/components/surfaces.css +173 -0
- package/src/components.css +9 -1316
- package/src/utilities.css +12 -0
|
@@ -0,0 +1,313 @@
|
|
|
1
|
+
.ldt-overlay {
|
|
2
|
+
position: fixed;
|
|
3
|
+
z-index: var(--loidolt-z-overlay);
|
|
4
|
+
inset: 0;
|
|
5
|
+
background: var(--loidolt-scrim);
|
|
6
|
+
}
|
|
7
|
+
.ldt-dialog {
|
|
8
|
+
position: fixed;
|
|
9
|
+
z-index: var(--loidolt-z-dialog);
|
|
10
|
+
top: 50%;
|
|
11
|
+
left: 50%;
|
|
12
|
+
display: grid;
|
|
13
|
+
width: min(var(--ldt-dialog-width, 34rem), calc(100vw - 2rem));
|
|
14
|
+
max-height: min(48rem, calc(100dvh - 2rem));
|
|
15
|
+
overflow: hidden;
|
|
16
|
+
border: var(--loidolt-border-width) solid var(--loidolt-border-strong);
|
|
17
|
+
color: var(--loidolt-text);
|
|
18
|
+
background: var(--loidolt-surface);
|
|
19
|
+
box-shadow: var(--loidolt-shadow-modal);
|
|
20
|
+
transform: translate(-50%, -50%);
|
|
21
|
+
}
|
|
22
|
+
.ldt-dialog--sm {
|
|
23
|
+
--ldt-dialog-width: 24rem;
|
|
24
|
+
}
|
|
25
|
+
.ldt-dialog--md {
|
|
26
|
+
--ldt-dialog-width: 34rem;
|
|
27
|
+
}
|
|
28
|
+
.ldt-dialog--lg {
|
|
29
|
+
--ldt-dialog-width: 46rem;
|
|
30
|
+
}
|
|
31
|
+
.ldt-dialog--xl {
|
|
32
|
+
--ldt-dialog-width: 60rem;
|
|
33
|
+
}
|
|
34
|
+
.ldt-dialog__header,
|
|
35
|
+
.ldt-dialog__body,
|
|
36
|
+
.ldt-dialog__footer {
|
|
37
|
+
padding: 1rem 1.25rem;
|
|
38
|
+
}
|
|
39
|
+
.ldt-dialog__header {
|
|
40
|
+
display: flex;
|
|
41
|
+
align-items: start;
|
|
42
|
+
justify-content: space-between;
|
|
43
|
+
gap: 1rem;
|
|
44
|
+
border-bottom: var(--loidolt-border-width) solid var(--loidolt-border);
|
|
45
|
+
}
|
|
46
|
+
.ldt-dialog__header > :first-child,
|
|
47
|
+
.ldt-drawer__header > :first-child {
|
|
48
|
+
min-width: 0;
|
|
49
|
+
}
|
|
50
|
+
.ldt-dialog__body {
|
|
51
|
+
overflow-y: auto;
|
|
52
|
+
}
|
|
53
|
+
.ldt-dialog__footer {
|
|
54
|
+
display: flex;
|
|
55
|
+
flex-wrap: wrap;
|
|
56
|
+
justify-content: flex-end;
|
|
57
|
+
gap: 0.5rem;
|
|
58
|
+
border-top: var(--loidolt-border-width) solid var(--loidolt-border);
|
|
59
|
+
}
|
|
60
|
+
.ldt-dialog__footer .ldt-button,
|
|
61
|
+
.ldt-drawer__footer .ldt-button {
|
|
62
|
+
max-width: 100%;
|
|
63
|
+
overflow-wrap: anywhere;
|
|
64
|
+
white-space: normal;
|
|
65
|
+
}
|
|
66
|
+
.ldt-dialog__title {
|
|
67
|
+
margin: 0;
|
|
68
|
+
font-size: var(--loidolt-font-size-lg);
|
|
69
|
+
overflow-wrap: anywhere;
|
|
70
|
+
}
|
|
71
|
+
.ldt-dialog__description {
|
|
72
|
+
margin: 0.25rem 0 0;
|
|
73
|
+
color: var(--loidolt-text-muted);
|
|
74
|
+
overflow-wrap: anywhere;
|
|
75
|
+
}
|
|
76
|
+
/*
|
|
77
|
+
* Drawer: a dialog anchored to an edge. `--ldt-drawer-size` is the measure across that edge —
|
|
78
|
+
* width for left/right, height for top/bottom — always capped so the scrim stays reachable and
|
|
79
|
+
* the panel never becomes a full-screen trap with no visible way out.
|
|
80
|
+
*/
|
|
81
|
+
.ldt-drawer {
|
|
82
|
+
position: fixed;
|
|
83
|
+
z-index: var(--loidolt-z-dialog);
|
|
84
|
+
display: grid;
|
|
85
|
+
grid-template-rows: auto minmax(0, 1fr) auto;
|
|
86
|
+
overflow: hidden;
|
|
87
|
+
border: 0 solid var(--loidolt-border-strong);
|
|
88
|
+
color: var(--loidolt-text);
|
|
89
|
+
background: var(--loidolt-surface);
|
|
90
|
+
box-shadow: var(--loidolt-shadow-modal);
|
|
91
|
+
}
|
|
92
|
+
.ldt-drawer--left,
|
|
93
|
+
.ldt-drawer--right {
|
|
94
|
+
inset-block: 0;
|
|
95
|
+
width: min(var(--ldt-drawer-size, 20rem), calc(100vw - 3rem));
|
|
96
|
+
}
|
|
97
|
+
.ldt-drawer--left {
|
|
98
|
+
left: 0;
|
|
99
|
+
border-right-width: var(--loidolt-border-width);
|
|
100
|
+
animation: ldt-drawer-in-left var(--loidolt-motion-slow) var(--loidolt-motion-easing);
|
|
101
|
+
}
|
|
102
|
+
.ldt-drawer--right {
|
|
103
|
+
right: 0;
|
|
104
|
+
border-left-width: var(--loidolt-border-width);
|
|
105
|
+
animation: ldt-drawer-in-right var(--loidolt-motion-slow) var(--loidolt-motion-easing);
|
|
106
|
+
}
|
|
107
|
+
.ldt-drawer--top,
|
|
108
|
+
.ldt-drawer--bottom {
|
|
109
|
+
inset-inline: 0;
|
|
110
|
+
height: min(var(--ldt-drawer-size, 20rem), calc(100dvh - 3rem));
|
|
111
|
+
}
|
|
112
|
+
.ldt-drawer--top {
|
|
113
|
+
top: 0;
|
|
114
|
+
border-bottom-width: var(--loidolt-border-width);
|
|
115
|
+
animation: ldt-drawer-in-top var(--loidolt-motion-slow) var(--loidolt-motion-easing);
|
|
116
|
+
}
|
|
117
|
+
.ldt-drawer--bottom {
|
|
118
|
+
bottom: 0;
|
|
119
|
+
border-top-width: var(--loidolt-border-width);
|
|
120
|
+
animation: ldt-drawer-in-bottom var(--loidolt-motion-slow) var(--loidolt-motion-easing);
|
|
121
|
+
}
|
|
122
|
+
@keyframes ldt-drawer-in-left {
|
|
123
|
+
from {
|
|
124
|
+
transform: translateX(-100%);
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
@keyframes ldt-drawer-in-right {
|
|
128
|
+
from {
|
|
129
|
+
transform: translateX(100%);
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
@keyframes ldt-drawer-in-top {
|
|
133
|
+
from {
|
|
134
|
+
transform: translateY(-100%);
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
@keyframes ldt-drawer-in-bottom {
|
|
138
|
+
from {
|
|
139
|
+
transform: translateY(100%);
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
.ldt-drawer__header,
|
|
143
|
+
.ldt-drawer__body,
|
|
144
|
+
.ldt-drawer__footer {
|
|
145
|
+
padding: 1rem 1.25rem;
|
|
146
|
+
}
|
|
147
|
+
.ldt-drawer__header {
|
|
148
|
+
display: flex;
|
|
149
|
+
align-items: start;
|
|
150
|
+
justify-content: space-between;
|
|
151
|
+
gap: 1rem;
|
|
152
|
+
border-bottom: var(--loidolt-border-width) solid var(--loidolt-border);
|
|
153
|
+
}
|
|
154
|
+
.ldt-drawer__body {
|
|
155
|
+
overflow-y: auto;
|
|
156
|
+
}
|
|
157
|
+
.ldt-drawer__footer {
|
|
158
|
+
display: flex;
|
|
159
|
+
flex-wrap: wrap;
|
|
160
|
+
justify-content: flex-end;
|
|
161
|
+
gap: 0.5rem;
|
|
162
|
+
border-top: var(--loidolt-border-width) solid var(--loidolt-border);
|
|
163
|
+
}
|
|
164
|
+
.ldt-drawer__title {
|
|
165
|
+
margin: 0;
|
|
166
|
+
font-size: var(--loidolt-font-size-lg);
|
|
167
|
+
overflow-wrap: anywhere;
|
|
168
|
+
}
|
|
169
|
+
.ldt-drawer__description {
|
|
170
|
+
margin: 0.25rem 0 0;
|
|
171
|
+
color: var(--loidolt-text-muted);
|
|
172
|
+
overflow-wrap: anywhere;
|
|
173
|
+
}
|
|
174
|
+
.ldt-popover,
|
|
175
|
+
.ldt-menu {
|
|
176
|
+
z-index: var(--loidolt-z-menu);
|
|
177
|
+
min-width: 13rem;
|
|
178
|
+
max-width: min(22rem, calc(100vw - 2rem));
|
|
179
|
+
padding: 0.45rem;
|
|
180
|
+
border: var(--loidolt-border-width) solid var(--loidolt-border-strong);
|
|
181
|
+
color: var(--loidolt-text);
|
|
182
|
+
background: var(--loidolt-surface);
|
|
183
|
+
box-shadow: var(--loidolt-shadow-popover);
|
|
184
|
+
}
|
|
185
|
+
.ldt-menu {
|
|
186
|
+
display: grid;
|
|
187
|
+
gap: 0.1rem;
|
|
188
|
+
}
|
|
189
|
+
.ldt-menu__label {
|
|
190
|
+
padding: 0.45rem 0.55rem 0.3rem;
|
|
191
|
+
color: var(--loidolt-text-accent);
|
|
192
|
+
font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
|
|
193
|
+
letter-spacing: 0.09em;
|
|
194
|
+
text-transform: uppercase;
|
|
195
|
+
}
|
|
196
|
+
.ldt-menu__item {
|
|
197
|
+
width: 100%;
|
|
198
|
+
display: flex;
|
|
199
|
+
align-items: center;
|
|
200
|
+
justify-content: space-between;
|
|
201
|
+
gap: 1rem;
|
|
202
|
+
border: 0;
|
|
203
|
+
padding: 0.65rem 0.55rem;
|
|
204
|
+
color: var(--loidolt-text);
|
|
205
|
+
background: transparent;
|
|
206
|
+
text-align: left;
|
|
207
|
+
text-decoration: none;
|
|
208
|
+
}
|
|
209
|
+
.ldt-menu__item:hover:not(:disabled, [data-disabled]),
|
|
210
|
+
.ldt-menu__item[data-highlighted] {
|
|
211
|
+
color: var(--loidolt-text-inverse);
|
|
212
|
+
background: var(--loidolt-surface-inverse);
|
|
213
|
+
}
|
|
214
|
+
/* Exposed to assistive tech (no aria-hidden): a shortcut nobody can hear may as well
|
|
215
|
+
not exist. Muted normally; inherits the inverse ink while highlighted. */
|
|
216
|
+
.ldt-menu__hint {
|
|
217
|
+
color: var(--loidolt-text-muted);
|
|
218
|
+
font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
|
|
219
|
+
letter-spacing: 0.08em;
|
|
220
|
+
}
|
|
221
|
+
.ldt-menu__item:hover:not(:disabled, [data-disabled]) .ldt-menu__hint,
|
|
222
|
+
.ldt-menu__item[data-highlighted] .ldt-menu__hint {
|
|
223
|
+
color: inherit;
|
|
224
|
+
}
|
|
225
|
+
.ldt-menu__item[data-disabled],
|
|
226
|
+
.ldt-menu__item:disabled {
|
|
227
|
+
opacity: 0.4;
|
|
228
|
+
cursor: not-allowed;
|
|
229
|
+
}
|
|
230
|
+
.ldt-menu__separator {
|
|
231
|
+
height: var(--loidolt-border-width);
|
|
232
|
+
margin: 0.25rem 0;
|
|
233
|
+
border: 0;
|
|
234
|
+
background: var(--loidolt-border-soft);
|
|
235
|
+
}
|
|
236
|
+
.ldt-tooltip {
|
|
237
|
+
z-index: var(--loidolt-z-tooltip);
|
|
238
|
+
max-width: 18rem;
|
|
239
|
+
padding: 0.4rem 0.55rem;
|
|
240
|
+
color: var(--loidolt-text-inverse);
|
|
241
|
+
background: var(--loidolt-surface-inverse);
|
|
242
|
+
font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
|
|
243
|
+
box-shadow: var(--loidolt-shadow-popover);
|
|
244
|
+
}
|
|
245
|
+
/*
|
|
246
|
+
* Bits UI stamps `data-orientation` on the root, list, triggers and panels, so the vertical
|
|
247
|
+
* layout keys off that rather than needing a second class.
|
|
248
|
+
*/
|
|
249
|
+
.ldt-tabs {
|
|
250
|
+
min-width: 0;
|
|
251
|
+
}
|
|
252
|
+
.ldt-tabs[data-orientation='vertical'] {
|
|
253
|
+
display: grid;
|
|
254
|
+
grid-template-columns: minmax(0, auto) minmax(0, 1fr);
|
|
255
|
+
gap: var(--loidolt-space-4);
|
|
256
|
+
}
|
|
257
|
+
.ldt-tabs__list {
|
|
258
|
+
max-width: 100%;
|
|
259
|
+
display: flex;
|
|
260
|
+
gap: 2px;
|
|
261
|
+
overflow-x: auto;
|
|
262
|
+
border-bottom: var(--loidolt-border-width) solid var(--loidolt-border);
|
|
263
|
+
overscroll-behavior-inline: contain;
|
|
264
|
+
scrollbar-width: thin;
|
|
265
|
+
}
|
|
266
|
+
.ldt-tabs__list[data-orientation='vertical'] {
|
|
267
|
+
flex-direction: column;
|
|
268
|
+
align-items: stretch;
|
|
269
|
+
overflow: visible;
|
|
270
|
+
border-bottom: 0;
|
|
271
|
+
border-right: var(--loidolt-border-width) solid var(--loidolt-border);
|
|
272
|
+
}
|
|
273
|
+
.ldt-tabs__trigger {
|
|
274
|
+
min-height: var(--loidolt-size-control);
|
|
275
|
+
border: 0;
|
|
276
|
+
border-bottom: 2px solid transparent;
|
|
277
|
+
padding: 0 0.85rem;
|
|
278
|
+
color: var(--loidolt-text-muted);
|
|
279
|
+
background: transparent;
|
|
280
|
+
font: var(--loidolt-font-size-sm) var(--loidolt-font-utility);
|
|
281
|
+
letter-spacing: 0.08em;
|
|
282
|
+
text-transform: uppercase;
|
|
283
|
+
}
|
|
284
|
+
.ldt-tabs__trigger[data-orientation='vertical'] {
|
|
285
|
+
border-bottom: 0;
|
|
286
|
+
border-right: 2px solid transparent;
|
|
287
|
+
padding: 0 0.85rem;
|
|
288
|
+
text-align: left;
|
|
289
|
+
}
|
|
290
|
+
.ldt-tabs__trigger[data-state='active'],
|
|
291
|
+
.ldt-tabs__trigger[aria-selected='true'] {
|
|
292
|
+
color: var(--loidolt-text);
|
|
293
|
+
border-color: var(--loidolt-accent);
|
|
294
|
+
}
|
|
295
|
+
.ldt-tabs__content[data-orientation='vertical'] {
|
|
296
|
+
padding-block: 0;
|
|
297
|
+
}
|
|
298
|
+
.ldt-tabs__content {
|
|
299
|
+
padding-block: 1rem;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
@media (max-width: 760px) {
|
|
303
|
+
.ldt-tabs[data-orientation='vertical'] {
|
|
304
|
+
display: block;
|
|
305
|
+
}
|
|
306
|
+
.ldt-tabs__list[data-orientation='vertical'] {
|
|
307
|
+
border-right: 0;
|
|
308
|
+
border-bottom: var(--loidolt-border-width) solid var(--loidolt-border);
|
|
309
|
+
}
|
|
310
|
+
.ldt-tabs__content[data-orientation='vertical'] {
|
|
311
|
+
padding-block: 1rem;
|
|
312
|
+
}
|
|
313
|
+
}
|
|
@@ -0,0 +1,233 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Long-form content: rendered Markdown, documentation, help text — any HTML the application does
|
|
3
|
+
* not author element by element. Wrap it in `.ldt-prose`; mark islands of ordinary UI inside it
|
|
4
|
+
* with `.ldt-not-prose`.
|
|
5
|
+
*
|
|
6
|
+
* Every descendant selector is wrapped in `:where()` and filtered with `:not(:where(...))`, so the
|
|
7
|
+
* whole rule weighs (0,0,0). A component class placed inside prose (`.ldt-button`, `.ldt-table`,
|
|
8
|
+
* `.ldt-card`) therefore always beats these element styles by specificity alone, and the opt-out
|
|
9
|
+
* class is only needed for bare elements that should look like UI rather than content.
|
|
10
|
+
*
|
|
11
|
+
* `--ldt-prose-size` scales the body text; everything else is relative to it.
|
|
12
|
+
*/
|
|
13
|
+
.ldt-prose {
|
|
14
|
+
max-width: var(--ldt-prose-width, none);
|
|
15
|
+
color: var(--loidolt-text);
|
|
16
|
+
font-size: var(--ldt-prose-size, var(--loidolt-font-size-md));
|
|
17
|
+
line-height: var(--loidolt-font-line-height-relaxed);
|
|
18
|
+
overflow-wrap: break-word;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/* --- Flow ---------------------------------------------------------------------------------- */
|
|
22
|
+
|
|
23
|
+
:where(.ldt-prose :is(p, ul, ol, dl, blockquote, pre, table, figure, hr, details)):not(
|
|
24
|
+
:where(.ldt-not-prose, .ldt-not-prose *)
|
|
25
|
+
) {
|
|
26
|
+
margin-block: 0 1.1em;
|
|
27
|
+
}
|
|
28
|
+
:where(.ldt-prose > :first-child) {
|
|
29
|
+
margin-block-start: 0;
|
|
30
|
+
}
|
|
31
|
+
:where(.ldt-prose > :last-child) {
|
|
32
|
+
margin-block-end: 0;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/* --- Headings ------------------------------------------------------------------------------ */
|
|
36
|
+
|
|
37
|
+
:where(.ldt-prose :is(h1, h2, h3, h4, h5, h6)):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
|
|
38
|
+
margin-block: 1.8em 0.6em;
|
|
39
|
+
color: var(--loidolt-text);
|
|
40
|
+
font-family: var(--loidolt-font-display);
|
|
41
|
+
font-weight: 500;
|
|
42
|
+
line-height: var(--loidolt-font-line-height-tight);
|
|
43
|
+
/* Clears a sticky top bar when a heading is the target of an in-page link. */
|
|
44
|
+
scroll-margin-top: calc(var(--loidolt-size-topbar) + var(--loidolt-space-4));
|
|
45
|
+
}
|
|
46
|
+
:where(.ldt-prose h1):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
|
|
47
|
+
margin-block-start: 0;
|
|
48
|
+
font-size: 2em;
|
|
49
|
+
}
|
|
50
|
+
:where(.ldt-prose h2):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
|
|
51
|
+
padding-block-end: 0.3em;
|
|
52
|
+
border-bottom: var(--loidolt-border-width) solid var(--loidolt-border-soft);
|
|
53
|
+
font-size: 1.5em;
|
|
54
|
+
}
|
|
55
|
+
:where(.ldt-prose h3):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
|
|
56
|
+
font-size: 1.25em;
|
|
57
|
+
}
|
|
58
|
+
:where(.ldt-prose h4):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
|
|
59
|
+
font-size: 1.05em;
|
|
60
|
+
}
|
|
61
|
+
/* The two smallest levels switch to the utility face so they stay distinct from body text. */
|
|
62
|
+
:where(.ldt-prose :is(h5, h6)):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
|
|
63
|
+
color: var(--loidolt-text-muted);
|
|
64
|
+
font-family: var(--loidolt-font-utility);
|
|
65
|
+
font-size: 0.8em;
|
|
66
|
+
letter-spacing: var(--loidolt-font-tracking-utility);
|
|
67
|
+
text-transform: uppercase;
|
|
68
|
+
}
|
|
69
|
+
/* A heading directly after another heading sits closer to it. */
|
|
70
|
+
:where(.ldt-prose :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6)):not(
|
|
71
|
+
:where(.ldt-not-prose, .ldt-not-prose *)
|
|
72
|
+
) {
|
|
73
|
+
margin-block-start: 0.6em;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/* --- Inline -------------------------------------------------------------------------------- */
|
|
77
|
+
|
|
78
|
+
:where(.ldt-prose a):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
|
|
79
|
+
color: var(--loidolt-text-accent);
|
|
80
|
+
text-decoration-thickness: 1px;
|
|
81
|
+
text-underline-offset: 0.18em;
|
|
82
|
+
}
|
|
83
|
+
:where(.ldt-prose a:hover):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
|
|
84
|
+
text-decoration-thickness: 2px;
|
|
85
|
+
}
|
|
86
|
+
/* Only one weight per family ships, so bold is synthesized; colour keeps it legible. */
|
|
87
|
+
:where(.ldt-prose :is(strong, b)):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
|
|
88
|
+
color: var(--loidolt-text);
|
|
89
|
+
font-weight: 700;
|
|
90
|
+
}
|
|
91
|
+
:where(.ldt-prose :not(pre) > code):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
|
|
92
|
+
padding: 0.12em 0.35em;
|
|
93
|
+
border: var(--loidolt-border-width) solid var(--loidolt-border-soft);
|
|
94
|
+
color: var(--loidolt-text);
|
|
95
|
+
background: var(--loidolt-surface-sunken);
|
|
96
|
+
font-size: 0.875em;
|
|
97
|
+
}
|
|
98
|
+
:where(.ldt-prose kbd):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
|
|
99
|
+
padding: 0.05em 0.4em;
|
|
100
|
+
border: var(--loidolt-border-width) solid var(--loidolt-border-strong);
|
|
101
|
+
border-bottom-width: 2px;
|
|
102
|
+
background: var(--loidolt-surface);
|
|
103
|
+
font-size: 0.85em;
|
|
104
|
+
}
|
|
105
|
+
:where(.ldt-prose mark):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
|
|
106
|
+
color: var(--loidolt-text);
|
|
107
|
+
background: color-mix(in srgb, var(--loidolt-accent) 22%, transparent);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
/* --- Lists --------------------------------------------------------------------------------- */
|
|
111
|
+
|
|
112
|
+
:where(.ldt-prose :is(ul, ol)):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
|
|
113
|
+
padding-inline-start: 1.5em;
|
|
114
|
+
}
|
|
115
|
+
:where(.ldt-prose li):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
|
|
116
|
+
margin-block: 0.3em;
|
|
117
|
+
}
|
|
118
|
+
:where(.ldt-prose li)::marker {
|
|
119
|
+
color: var(--loidolt-text-muted);
|
|
120
|
+
}
|
|
121
|
+
:where(.ldt-prose li > :is(ul, ol)):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
|
|
122
|
+
margin-block: 0.3em 0;
|
|
123
|
+
}
|
|
124
|
+
/* GFM task lists: the checkbox is the marker. */
|
|
125
|
+
:where(.ldt-prose li:has(> input[type='checkbox'])):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
|
|
126
|
+
list-style: none;
|
|
127
|
+
}
|
|
128
|
+
:where(.ldt-prose li > input[type='checkbox']):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
|
|
129
|
+
margin: 0 0.5em 0 -1.4em;
|
|
130
|
+
vertical-align: -0.1em;
|
|
131
|
+
accent-color: var(--loidolt-accent);
|
|
132
|
+
}
|
|
133
|
+
:where(.ldt-prose dt):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
|
|
134
|
+
font-weight: 700;
|
|
135
|
+
}
|
|
136
|
+
:where(.ldt-prose dd):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
|
|
137
|
+
margin: 0 0 0.6em 1.5em;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
/* --- Blocks -------------------------------------------------------------------------------- */
|
|
141
|
+
|
|
142
|
+
:where(.ldt-prose blockquote):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
|
|
143
|
+
margin-inline: 0;
|
|
144
|
+
padding: 0.7em 1em;
|
|
145
|
+
border-inline-start: 3px solid var(--loidolt-accent);
|
|
146
|
+
color: var(--loidolt-text);
|
|
147
|
+
background: var(--loidolt-surface-alt);
|
|
148
|
+
}
|
|
149
|
+
:where(.ldt-prose blockquote > :last-child):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
|
|
150
|
+
margin-block-end: 0;
|
|
151
|
+
}
|
|
152
|
+
:where(.ldt-prose hr):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
|
|
153
|
+
margin-block: 2em;
|
|
154
|
+
border: 0;
|
|
155
|
+
border-top: var(--loidolt-border-width) solid var(--loidolt-border);
|
|
156
|
+
}
|
|
157
|
+
:where(.ldt-prose :is(img, video)):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
|
|
158
|
+
height: auto;
|
|
159
|
+
}
|
|
160
|
+
:where(.ldt-prose figcaption):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
|
|
161
|
+
margin-block-start: 0.5em;
|
|
162
|
+
color: var(--loidolt-text-muted);
|
|
163
|
+
font-size: 0.875em;
|
|
164
|
+
}
|
|
165
|
+
/*
|
|
166
|
+
* Code blocks. The background is set without `!important`: syntax highlighters that write an
|
|
167
|
+
* inline background (Shiki, Prism themes) keep their own, and plain `<pre>` gets the inverse
|
|
168
|
+
* surface so it reads as code in both colour schemes.
|
|
169
|
+
*/
|
|
170
|
+
:where(.ldt-prose pre):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
|
|
171
|
+
padding: 0.9em 1.1em;
|
|
172
|
+
overflow-x: auto;
|
|
173
|
+
border: var(--loidolt-border-width) solid var(--loidolt-border);
|
|
174
|
+
color: var(--loidolt-text-inverse);
|
|
175
|
+
background: var(--loidolt-surface-inverse);
|
|
176
|
+
font-size: 0.85em;
|
|
177
|
+
line-height: var(--loidolt-font-line-height-normal);
|
|
178
|
+
tab-size: 2;
|
|
179
|
+
}
|
|
180
|
+
:where(.ldt-prose pre code):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
|
|
181
|
+
padding: 0;
|
|
182
|
+
border: 0;
|
|
183
|
+
color: inherit;
|
|
184
|
+
background: transparent;
|
|
185
|
+
font-size: inherit;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
/* --- Tables -------------------------------------------------------------------------------- */
|
|
189
|
+
|
|
190
|
+
/*
|
|
191
|
+
* `display: block` + `overflow-x: auto` lets a wide Markdown table scroll on its own instead of
|
|
192
|
+
* widening the page; there is no wrapper element to hang the overflow on.
|
|
193
|
+
*/
|
|
194
|
+
:where(.ldt-prose table):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
|
|
195
|
+
display: block;
|
|
196
|
+
max-width: 100%;
|
|
197
|
+
overflow-x: auto;
|
|
198
|
+
border-collapse: collapse;
|
|
199
|
+
font-size: 0.9em;
|
|
200
|
+
}
|
|
201
|
+
:where(.ldt-prose :is(th, td)):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
|
|
202
|
+
padding: 0.5em 0.8em;
|
|
203
|
+
border: var(--loidolt-border-width) solid var(--loidolt-border);
|
|
204
|
+
text-align: start;
|
|
205
|
+
vertical-align: top;
|
|
206
|
+
}
|
|
207
|
+
:where(.ldt-prose th):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
|
|
208
|
+
background: var(--loidolt-surface-alt);
|
|
209
|
+
font-weight: 700;
|
|
210
|
+
}
|
|
211
|
+
:where(.ldt-prose td):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
|
|
212
|
+
background: var(--loidolt-surface);
|
|
213
|
+
}
|
|
214
|
+
:where(.ldt-prose :is(th, td)[align='center']):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
|
|
215
|
+
text-align: center;
|
|
216
|
+
}
|
|
217
|
+
:where(.ldt-prose :is(th, td)[align='right']):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
|
|
218
|
+
text-align: end;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
/* --- Disclosure ---------------------------------------------------------------------------- */
|
|
222
|
+
|
|
223
|
+
:where(.ldt-prose details):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
|
|
224
|
+
padding: 0.5em 0.9em;
|
|
225
|
+
border: var(--loidolt-border-width) solid var(--loidolt-border);
|
|
226
|
+
background: var(--loidolt-surface);
|
|
227
|
+
}
|
|
228
|
+
:where(.ldt-prose summary):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
|
|
229
|
+
font-weight: 700;
|
|
230
|
+
}
|
|
231
|
+
:where(.ldt-prose details[open] > summary):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
|
|
232
|
+
margin-block-end: 0.5em;
|
|
233
|
+
}
|