@loidolt/theme-styles 0.4.0 → 0.6.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 +67 -4
- package/src/components/actions.css +19 -2
- package/src/components/data.css +111 -0
- package/src/components/feedback.css +93 -0
- package/src/components/forms.css +316 -0
- package/src/components/layout.css +71 -3
- package/src/components/media.css +478 -0
- package/src/components/overlays.css +138 -0
- package/src/components/prose.css +233 -0
- package/src/components/selection.css +37 -1
- package/src/components/surfaces.css +63 -0
- package/src/components.css +2 -0
- package/src/utilities.css +16 -0
|
@@ -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
|
+
}
|
|
@@ -187,7 +187,6 @@
|
|
|
187
187
|
}
|
|
188
188
|
.ldt-segmented-nav__hint {
|
|
189
189
|
color: inherit;
|
|
190
|
-
opacity: 0.7;
|
|
191
190
|
font-size: var(--loidolt-font-size-xs);
|
|
192
191
|
}
|
|
193
192
|
/* A selectable rail of thumbnails: listbox semantics, scroll-into-view, compact flip. */
|
|
@@ -238,3 +237,40 @@
|
|
|
238
237
|
width: 4.5rem;
|
|
239
238
|
}
|
|
240
239
|
}
|
|
240
|
+
/*
|
|
241
|
+
* A removable value — a chosen option, an active filter. Square, because it is pressable; the
|
|
242
|
+
* pill silhouette is reserved for badges, which are not.
|
|
243
|
+
*/
|
|
244
|
+
.ldt-chip {
|
|
245
|
+
display: inline-flex;
|
|
246
|
+
align-items: center;
|
|
247
|
+
gap: 0.2rem;
|
|
248
|
+
min-height: 1.5rem;
|
|
249
|
+
max-width: 100%;
|
|
250
|
+
border: var(--loidolt-border-width) solid var(--loidolt-border-control);
|
|
251
|
+
padding-inline-start: 0.45rem;
|
|
252
|
+
color: var(--loidolt-text);
|
|
253
|
+
background: var(--loidolt-surface-alt);
|
|
254
|
+
font: var(--loidolt-font-size-sm) var(--loidolt-font-utility);
|
|
255
|
+
letter-spacing: 0.04em;
|
|
256
|
+
}
|
|
257
|
+
.ldt-chip > span {
|
|
258
|
+
overflow: hidden;
|
|
259
|
+
text-overflow: ellipsis;
|
|
260
|
+
white-space: nowrap;
|
|
261
|
+
}
|
|
262
|
+
.ldt-chip__remove {
|
|
263
|
+
display: inline-grid;
|
|
264
|
+
flex: none;
|
|
265
|
+
place-items: center;
|
|
266
|
+
width: 1.5rem;
|
|
267
|
+
min-height: 1.5rem;
|
|
268
|
+
border: 0;
|
|
269
|
+
padding: 0;
|
|
270
|
+
color: var(--loidolt-text-muted);
|
|
271
|
+
background: transparent;
|
|
272
|
+
}
|
|
273
|
+
.ldt-chip__remove:hover:not(:disabled) {
|
|
274
|
+
color: var(--loidolt-text-inverse);
|
|
275
|
+
background: var(--loidolt-surface-inverse);
|
|
276
|
+
}
|
|
@@ -72,6 +72,15 @@
|
|
|
72
72
|
* size class the badge keeps its compact inline metrics, which is what table cells and running
|
|
73
73
|
* copy want.
|
|
74
74
|
*/
|
|
75
|
+
/* Same colour as the text, so the variant's ink carries it without a second colour rule. */
|
|
76
|
+
.ldt-badge__dot {
|
|
77
|
+
width: 0.45rem;
|
|
78
|
+
height: 0.45rem;
|
|
79
|
+
flex: none;
|
|
80
|
+
margin-inline-end: 0.35rem;
|
|
81
|
+
border-radius: var(--loidolt-border-radius-pill);
|
|
82
|
+
background: currentColor;
|
|
83
|
+
}
|
|
75
84
|
.ldt-badge--sm {
|
|
76
85
|
min-height: var(--loidolt-size-control-sm);
|
|
77
86
|
padding: 0.38rem 0.7rem;
|
|
@@ -114,6 +123,7 @@
|
|
|
114
123
|
}
|
|
115
124
|
/* A framed media box: fixed ratio, sunken or paper surface, contained content. */
|
|
116
125
|
.ldt-thumbnail {
|
|
126
|
+
position: relative;
|
|
117
127
|
display: grid;
|
|
118
128
|
place-items: center;
|
|
119
129
|
margin: 0;
|
|
@@ -133,6 +143,29 @@
|
|
|
133
143
|
.ldt-thumbnail--cover .ldt-thumbnail__image {
|
|
134
144
|
object-fit: cover;
|
|
135
145
|
}
|
|
146
|
+
/* While loading, the recessed surface shimmers so the frame reads as pending, not empty. */
|
|
147
|
+
.ldt-thumbnail[data-status='loading'] {
|
|
148
|
+
background: linear-gradient(
|
|
149
|
+
90deg,
|
|
150
|
+
var(--loidolt-surface-sunken),
|
|
151
|
+
var(--loidolt-surface-alt),
|
|
152
|
+
var(--loidolt-surface-sunken)
|
|
153
|
+
)
|
|
154
|
+
0 0 / 200% 100%;
|
|
155
|
+
animation: ldt-shimmer 1.5s linear infinite;
|
|
156
|
+
}
|
|
157
|
+
.ldt-thumbnail__overlay {
|
|
158
|
+
position: absolute;
|
|
159
|
+
inset: 0;
|
|
160
|
+
display: flex;
|
|
161
|
+
align-items: flex-end;
|
|
162
|
+
justify-content: flex-end;
|
|
163
|
+
padding: var(--loidolt-space-2);
|
|
164
|
+
pointer-events: none;
|
|
165
|
+
}
|
|
166
|
+
.ldt-thumbnail__overlay > * {
|
|
167
|
+
pointer-events: auto;
|
|
168
|
+
}
|
|
136
169
|
/* A dashboard tile: one hero number over a utility label; the link form invites a click. */
|
|
137
170
|
.ldt-stat {
|
|
138
171
|
display: block;
|
|
@@ -171,3 +204,33 @@ a.ldt-stat:hover {
|
|
|
171
204
|
min-height: 1em;
|
|
172
205
|
align-self: stretch;
|
|
173
206
|
}
|
|
207
|
+
/* A person or account, as a photo or initials. Square, like every other surface. */
|
|
208
|
+
.ldt-avatar {
|
|
209
|
+
position: relative;
|
|
210
|
+
width: var(--loidolt-size-control);
|
|
211
|
+
height: var(--loidolt-size-control);
|
|
212
|
+
display: inline-grid;
|
|
213
|
+
flex: none;
|
|
214
|
+
place-items: center;
|
|
215
|
+
overflow: hidden;
|
|
216
|
+
border: var(--loidolt-border-width) solid var(--loidolt-border);
|
|
217
|
+
color: var(--loidolt-text-muted);
|
|
218
|
+
background: var(--loidolt-surface-sunken);
|
|
219
|
+
font: var(--loidolt-font-size-sm) var(--loidolt-font-utility);
|
|
220
|
+
letter-spacing: 0.06em;
|
|
221
|
+
}
|
|
222
|
+
.ldt-avatar--sm {
|
|
223
|
+
width: var(--loidolt-size-control-sm);
|
|
224
|
+
height: var(--loidolt-size-control-sm);
|
|
225
|
+
font-size: var(--loidolt-font-size-xs);
|
|
226
|
+
}
|
|
227
|
+
.ldt-avatar--lg {
|
|
228
|
+
width: var(--loidolt-size-control-lg);
|
|
229
|
+
height: var(--loidolt-size-control-lg);
|
|
230
|
+
font-size: var(--loidolt-font-size-base);
|
|
231
|
+
}
|
|
232
|
+
.ldt-avatar__image {
|
|
233
|
+
width: 100%;
|
|
234
|
+
height: 100%;
|
|
235
|
+
object-fit: cover;
|
|
236
|
+
}
|
package/src/components.css
CHANGED
package/src/utilities.css
CHANGED
|
@@ -48,6 +48,14 @@
|
|
|
48
48
|
text-overflow: ellipsis;
|
|
49
49
|
white-space: nowrap;
|
|
50
50
|
}
|
|
51
|
+
/* Truncates after `--ldt-lines` lines (default 2) with an ellipsis. */
|
|
52
|
+
.ldt-line-clamp {
|
|
53
|
+
display: -webkit-box;
|
|
54
|
+
overflow: hidden;
|
|
55
|
+
-webkit-box-orient: vertical;
|
|
56
|
+
-webkit-line-clamp: var(--ldt-lines, 2);
|
|
57
|
+
line-clamp: var(--ldt-lines, 2);
|
|
58
|
+
}
|
|
51
59
|
.ldt-scrollbar {
|
|
52
60
|
scrollbar-width: thin;
|
|
53
61
|
scrollbar-color: var(--loidolt-border) transparent;
|
|
@@ -66,8 +74,16 @@
|
|
|
66
74
|
text-transform: uppercase;
|
|
67
75
|
}
|
|
68
76
|
|
|
77
|
+
/* Print-only content — a URL written out after a link, a signature line. The counterpart to
|
|
78
|
+
`.ldt-print-hidden`. */
|
|
79
|
+
.ldt-print-visible {
|
|
80
|
+
display: none !important;
|
|
81
|
+
}
|
|
69
82
|
@media print {
|
|
70
83
|
.ldt-print-hidden {
|
|
71
84
|
display: none !important;
|
|
72
85
|
}
|
|
86
|
+
.ldt-print-visible {
|
|
87
|
+
display: revert !important;
|
|
88
|
+
}
|
|
73
89
|
}
|