/
format-text.shadow.css
310 lines (256 loc) · 9.26 KB
/
format-text.shadow.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
SFormatText {
color: var(--intergalactic-text-primary, #191b23);
& abbr {
color: var(--intergalactic-text-secondary, #6c6e79);
text-decoration: underline dashed var(--intergalactic-text-hint, #6c6e79);
&:active,
&:hover,
&:focus {
outline: none;
color: var(--intergalactic-text-hint-hover-active, #484a54);
text-decoration: underline dashed var(--intergalactic-text-hint-hover-active, #484a54);
}
}
& a {
display: inline;
background: none;
outline: none;
text-decoration: none;
color: var(--intergalactic-text-link, #006dca);
border-bottom-width: 1px;
border-bottom-style: solid;
border-color: transparent;
&:active,
&:hover,
&:focus {
outline: none;
text-decoration: none;
}
&:not([data-ui-name='Link']):hover {
color: var(--intergalactic-text-link-hover-active, #044792);
border-color: var(--intergalactic-text-link-hover-active, #044792);
}
&:focus {
outline-color: var(--intergalactic-keyboard-focus-outline, rgba(0, 143, 248, 0.5));
outline-style: solid;
outline-width: 3px;
}
}
& code,
& pre {
font-family: Consolas, 'Roboto Mono', Menlo, Courier, monospace;
}
& blockquote {
position: relative;
/* disable-tokens-validator */
padding-left: 51px;
font-size: var(--intergalactic-fs-400, 20px);
line-height: var(--intergalactic-lh-400, 120%);
font-style: italic;
&:before {
content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNyIgaGVpZ2h0PSIxOSIgdmlld0JveD0iMCAwIDI3IDE5IiBmaWxsPSJub25lIj4KPHBhdGggZD0iTTguODI0MjIgMC45NDcyNjZWMi4zMDg1OUM2Ljg3NjMgMy4zMjY4MiA1LjQ4MTc3IDQuMzg5MzIgNC42NDA2MiA1LjQ5NjA5QzMuNzk5NDggNi42MDI4NiAzLjM3ODkxIDcuODA5MjQgMy4zNzg5MSA5LjExNTIzQzMuMzc4OTEgOS44ODk5NyAzLjQ4OTU4IDEwLjQyMTIgMy43MTA5NCAxMC43MDlDMy45MTAxNiAxMS4wMTg5IDQuMTUzNjUgMTEuMTczOCA0LjQ0MTQxIDExLjE3MzhDNC43MjkxNyAxMS4xNzM4IDUuMTE2NTQgMTEuMDk2NCA1LjYwMzUyIDEwLjk0MTRDNi4wOTA0OSAxMC43NjQzIDYuNTMzMiAxMC42NzU4IDYuOTMxNjQgMTAuNjc1OEM3LjgzOTE5IDEwLjY3NTggOC42MjUgMTEuMDE4OSA5LjI4OTA2IDExLjcwNTFDOS45NzUyNiAxMi4zNjkxIDEwLjMxODQgMTMuMTg4MiAxMC4zMTg0IDE0LjE2MjFDMTAuMzE4NCAxNS4yMjQ2IDkuOTA4ODUgMTYuMTQzMiA5LjA4OTg0IDE2LjkxOEM4LjI3MDgzIDE3LjY3MDYgNy4yNTI2IDE4LjA0NjkgNi4wMzUxNiAxOC4wNDY5QzQuNTUyMDggMTguMDQ2OSAzLjIxMjg5IDE3LjQwNDkgMi4wMTc1OCAxNi4xMjExQzAuODIyMjY2IDE0LjgzNzIgMC4yMjQ2MDkgMTMuMjU0NiAwLjIyNDYwOSAxMS4zNzNDMC4yMjQ2MDkgOS4xNTk1MSAwLjk1NTA3OCA3LjEwMDkxIDIuNDE2MDIgNS4xOTcyN0MzLjg5OTA5IDMuMjcxNDggNi4wMzUxNiAxLjg1NDgyIDguODI0MjIgMC45NDcyNjZaTTI0LjY2MjEgMS4wNDY4OFYyLjMwODU5QzIyLjQyNjQgMy41OTI0NSAyMC45NTQ0IDQuNzQzNDkgMjAuMjQ2MSA1Ljc2MTcyQzE5LjUzNzggNi43Nzk5NSAxOS4xODM2IDcuOTc1MjYgMTkuMTgzNiA5LjM0NzY2QzE5LjE4MzYgOS45Njc0NSAxOS4zMDUzIDEwLjQzMjMgMTkuNTQ4OCAxMC43NDIyQzE5Ljc5MjMgMTEuMDUyMSAyMC4wNDY5IDExLjIwNyAyMC4zMTI1IDExLjIwN0MyMC41NTYgMTEuMjA3IDIwLjkyMTIgMTEuMTE4NSAyMS40MDgyIDEwLjk0MTRDMjEuODk1MiAxMC43NjQzIDIyLjM4MjIgMTAuNjc1OCAyMi44NjkxIDEwLjY3NThDMjMuNzc2NyAxMC42NzU4IDI0LjU2MjUgMTEuMDA3OCAyNS4yMjY2IDExLjY3MTlDMjUuOTEyOCAxMi4zMTM4IDI2LjI1NTkgMTMuMTEwNyAyNi4yNTU5IDE0LjA2MjVDMjYuMjU1OSAxNS4xNDcxIDI1LjgyNDIgMTYuMDg3OSAyNC45NjA5IDE2Ljg4NDhDMjQuMTE5OCAxNy42ODE2IDIzLjA3OTQgMTguMDgwMSAyMS44Mzk4IDE4LjA4MDFDMjAuMzc4OSAxOC4wODAxIDE5LjA2MTggMTcuNDQ5MiAxNy44ODg3IDE2LjE4NzVDMTYuNzE1NSAxNC45MjU4IDE2LjEyODkgMTMuMzU0MiAxNi4xMjg5IDExLjQ3MjdDMTYuMTI4OSA5LjE0ODQ0IDE2Ljg3MDQgNy4wMzQ1MSAxOC4zNTM1IDUuMTMwODZDMTkuODM2NiAzLjIwNTA4IDIxLjkzOTUgMS44NDM3NSAyNC42NjIxIDEuMDQ2ODhaIiBmaWxsPSIjQTlBQkI2Ii8+Cjwvc3ZnPg==);
display: inline-block;
position: absolute;
left: 0;
color: var(--intergalactic-icon-secondary-neutral, #a9abb6);
font-family: Georgia, Times, 'Times New Roman', serif;
}
& cite {
display: block;
font-style: normal;
margin-top: var(--intergalactic-spacing-4x, 16px);
color: var(--intergalactic-text-secondary, #6c6e79);
font-size: var(--intergalactic-fs-300, 16px);
line-height: var(--intergalactic-lh-300, 150%);
}
}
& ol:not(ol[start], ol[reversed], ol[type]),
& ul:not(ul[start], ul[reversed], ul[type]) {
margin: var(--intergalactic-spacing-2x, 8px) 0;
padding: 0;
list-style: none;
position: relative;
& li {
&:before {
position: absolute;
left: 0;
color: var(--intergalactic-text-secondary, #6c6e79);
}
}
& li+li {
margin: var(--intergalactic-spacing-2x, 8px) 0 0 0;
}
}
& ol:not(ol[start], ol[reversed], ol[type]) {
counter-reset: item 0;
& li:before {
counter-increment: item;
content: counters(item, '.');
}
}
& ul:not(ul[start], ul[reversed], ul[type]) li:before {
content: '';
background-color: var(--intergalactic-icon-primary-neutral, #6c6e79);
}
& h1 {
font-size: var(--intergalactic-fs-800, 48px);
line-height: var(--intergalactic-lh-800, 117%);
font-weight: var(--intergalactic-bold, 700);
margin: 0 0 var(--intergalactic-spacing-6x, 24px) 0;
&:only-child {
margin-bottom: 0;
}
}
& h2 {
font-size: var(--intergalactic-fs-700, 36px);
line-height: var(--intergalactic-lh-700, 110%);
font-weight: var(--intergalactic-bold, 700);
margin: 0 0 var(--intergalactic-spacing-4x, 16px) 0;
&:only-child {
margin-bottom: 0;
}
}
& h3 {
font-size: var(--intergalactic-fs-600, 32px);
line-height: var(--intergalactic-lh-600, 125%);
font-weight: var(--intergalactic-medium, 500);
margin: 0 0 var(--intergalactic-spacing-4x, 16px) 0;
&:only-child {
margin-bottom: 0;
}
}
& h4 {
font-size: var(--intergalactic-fs-500, 24px);
line-height: var(--intergalactic-lh-500, 117%);
font-weight: var(--intergalactic-medium, 500);
margin: 0 0 var(--intergalactic-spacing-3x, 12px) 0;
&:only-child {
margin-bottom: 0;
}
}
& h5 {
font-size: var(--intergalactic-fs-400, 20px);
line-height: var(--intergalactic-lh-400, 120%);
font-weight: var(--intergalactic-medium, 500);
margin: 0 0 var(--intergalactic-spacing-2x, 8px) 0;
&:only-child {
margin-bottom: 0;
}
}
& h6 {
font-size: var(--intergalactic-fs-300, 16px);
line-height: var(--intergalactic-lh-300, 150%);
font-weight: var(--intergalactic-bold, 700);
margin: 0 0 var(--intergalactic-spacing-1x, 4px) 0;
&:only-child {
margin-bottom: 0;
}
}
& h1,
& h2,
& h3,
& h4,
& h5,
& h6 {
& small {
color: var(--intergalactic-text-secondary, #6c6e79);
font-weight: 300;
font-size: 100%;
}
}
}
SFormatText[size='s'] {
& p,
& li {
font-size: var(--intergalactic-fs-100, 12px);
line-height: var(--intergalactic-lh-100, 133%);
}
& p {
margin: 0 0 calc(var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-05x, 2px)) 0;
&:last-child {
margin-bottom: 0;
}
}
& li {
padding-left: calc(var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-05x, 2px));
}
& ol ol li {
padding-left: calc(var(--intergalactic-spacing-6x, 24px) + var(--intergalactic-spacing-05x, 2px));
}
& ol ol ol li {
padding-left: calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px));
}
& ul li:before {
width: 3px;
height: 3px;
border-radius: 50%;
margin-top: var(--intergalactic-spacing-2x, 8px);
margin-left: var(--intergalactic-spacing-05x, 2px);
}
}
SFormatText[size='m'] {
& p,
& li {
font-size: var(--intergalactic-fs-200, 14px);
line-height: var(--intergalactic-lh-200, 142%);
}
& p {
margin: 0 0 var(--intergalactic-spacing-5x, 20px) 0;
&:last-child {
margin-bottom: 0;
}
}
& li {
padding-left: calc(var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-05x, 2px));
}
& ol ol li {
padding-left: calc(var(--intergalactic-spacing-6x, 24px) + var(--intergalactic-spacing-05x, 2px));
}
& ol ol ol li {
padding-left: calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px));
}
& ul li:before {
width: 4px;
height: 4px;
border-radius: 50%;
/* disable-tokens-validator */
margin-top: calc(var(--intergalactic-spacing-2x, 8px) - 1px);
margin-left: var(--intergalactic-spacing-05x, 2px);
}
}
SFormatText[size='l'] {
& p,
& li {
font-size: var(--intergalactic-fs-300, 16px);
line-height: var(--intergalactic-lh-300, 150%);
}
& p {
margin: 0 0 var(--intergalactic-spacing-6x, 24px) 0;
&:last-child {
margin-bottom: 0;
}
}
& li {
padding-left: calc(var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-05x, 2px));
}
& ol ol li {
padding-left: calc(var(--intergalactic-spacing-6x, 24px) + var(--intergalactic-spacing-05x, 2px));
}
& ol ol ol li {
padding-left: calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px));
}
& ul li:before {
width: 5px;
height: 5px;
border-radius: 50%;
margin-top: calc(var(--intergalactic-spacing-2x, 8px) + var(--intergalactic-spacing-05x, 2px));
margin-left: var(--intergalactic-spacing-05x, 2px);
}
}
@media (prefers-reduced-motion) {
SFormatText {
& a {
transition: none;
}
}
}