@hackersheet/react-document-content-styles 0.1.0-alpha.1 → 0.1.0-alpha.11

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.
Files changed (2) hide show
  1. package/dist/basic.module.css +329 -85
  2. package/package.json +1 -1
@@ -1,5 +1,9 @@
1
- .main :first-child {
2
- margin-top: 0;
1
+ @charset "UTF-8";
2
+ .main > :first-child {
3
+ margin-top: 0 !important;
4
+ }
5
+ .main > :last-child {
6
+ margin-bottom: 0 !important;
3
7
  }
4
8
  .main * {
5
9
  word-break: break-word;
@@ -16,15 +20,6 @@
16
20
  font-weight: 700;
17
21
  border-bottom: 1px solid hsl(var(--hsdc-border));
18
22
  }
19
- .main p {
20
- margin: 1.8rem 0;
21
- }
22
- .main strong {
23
- font-weight: 700;
24
- }
25
- .main hr {
26
- margin: 4rem 0;
27
- }
28
23
  .main h1 {
29
24
  font-size: 2rem;
30
25
  }
@@ -43,19 +38,28 @@
43
38
  .main h6 {
44
39
  font-size: 0.7rem;
45
40
  }
41
+ .main p {
42
+ margin: 1.8rem 0;
43
+ }
44
+ .main strong {
45
+ font-weight: 700;
46
+ }
47
+ .main hr {
48
+ margin: 4rem 0;
49
+ }
46
50
  .main p {
47
51
  line-height: 2.2;
48
52
  letter-spacing: 0.04em;
49
53
  }
50
54
  .main ol,
51
55
  .main ul {
52
- padding-left: 1.5em;
56
+ padding-left: 1.5rem;
53
57
  }
54
58
  .main ol ol,
55
59
  .main ol ul,
56
60
  .main ul ol,
57
61
  .main ul ul {
58
- padding-left: 1em;
62
+ padding-left: 1rem;
59
63
  }
60
64
  .main ol li,
61
65
  .main ul li {
@@ -80,60 +84,70 @@
80
84
  .main ol ul ul {
81
85
  list-style-type: square;
82
86
  }
83
- .main table {
87
+ .main table:not(:global .gist-block table) {
88
+ margin: 1.5rem 0;
84
89
  width: 100%;
85
90
  table-layout: fixed;
86
91
  border-collapse: separate;
87
- border-radius: 8px;
92
+ border-radius: 0.25rem;
88
93
  border-spacing: 0;
89
94
  border: 1px solid hsl(var(--hsdc-border));
90
95
  overflow: hidden;
91
96
  }
92
- .main table thead {
97
+ .main table:not(:global .gist-block table) thead {
93
98
  background-color: hsl(var(--hsdc-muted));
94
99
  }
95
- .main table tbody td {
100
+ .main table:not(:global .gist-block table) tbody td {
96
101
  border-top: 1px solid hsl(var(--hsdc-border));
97
102
  }
98
- .main table tbody tr:hover {
103
+ .main table:not(:global .gist-block table) tbody tr:hover {
99
104
  background-color: hsl(var(--hsdc-muted)/0.5);
100
105
  }
101
- .main table th,
102
- .main table td {
103
- padding: 8px;
106
+ .main table:not(:global .gist-block table) th,
107
+ .main table:not(:global .gist-block table) td {
108
+ padding: 0.5rem;
104
109
  font-size: 0.875rem;
105
110
  text-align: left;
106
111
  }
107
- .main table th :global(&.left),
108
- .main table td :global(&.left) {
112
+ .main table:not(:global .gist-block table) th :global(&.left),
113
+ .main table:not(:global .gist-block table) td :global(&.left) {
109
114
  text-align: left;
110
115
  }
111
- .main table th :global(&.center),
112
- .main table td :global(&.center) {
116
+ .main table:not(:global .gist-block table) th :global(&.center),
117
+ .main table:not(:global .gist-block table) td :global(&.center) {
113
118
  text-align: center;
114
119
  }
115
- .main table th :global(&.right),
116
- .main table td :global(&.right) {
120
+ .main table:not(:global .gist-block table) th :global(&.right),
121
+ .main table:not(:global .gist-block table) td :global(&.right) {
117
122
  text-align: right;
118
123
  }
124
+ .main del {
125
+ text-decoration: line-through;
126
+ }
119
127
  .main code:not(pre code) {
120
- border-radius: 4px;
121
- display: inline-block;
128
+ border-radius: 0.25rem;
122
129
  box-sizing: border-box;
123
- padding: 2px 8px;
130
+ padding: 0.125rem 0.25rem;
124
131
  font-family: var(--hsdc-font-code);
132
+ font-size: 0.875em;
125
133
  line-height: 1.5;
126
134
  border: 1px solid hsl(var(--hsdc-border));
127
135
  background-color: hsl(var(--hsdc-muted));
128
136
  }
129
137
  .main blockquote {
130
- border-left: 12px solid hsl(var(--hsdc-border));
138
+ margin: 1.8rem 0;
139
+ padding: 0.5rem 1rem;
140
+ border-left: 0.25em solid hsl(var(--hsdc-border));
131
141
  color: hsl(var(--hsdc-muted-foreground));
132
- margin: 0;
133
- padding: 0 16px;
142
+ }
143
+ .main blockquote > :first-child {
144
+ margin-top: 0;
145
+ }
146
+ .main blockquote > :last-child {
147
+ margin-bottom: 0;
134
148
  }
135
149
  .main blockquote blockquote {
136
- margin: 0 12px;
150
+ margin: 0 0.75em;
137
151
  }
138
152
  .main a:not(article a) {
139
153
  color: hsl(var(--hsdc-link));
@@ -144,163 +158,393 @@
144
158
  .main summary {
145
159
  cursor: pointer;
146
160
  }
147
- .main :global(.footnotes) {
148
- margin: 4rem 0 1.5rem 0;
161
+ .main summary:hover {
162
+ background-color: hsl(var(--hsdc-muted)/0.5);
163
+ }
164
+
165
+ .main :global .heading:has(a) {
166
+ padding: 0;
167
+ }
168
+ .main :global .heading a {
169
+ display: block;
170
+ padding: 0.5rem 0;
171
+ color: inherit;
172
+ }
173
+ .main :global .heading a .heading-link-icon {
174
+ margin-left: 0.5rem;
175
+ display: none;
176
+ line-height: 1.1;
177
+ width: 1em;
178
+ height: 1em;
179
+ vertical-align: middle;
180
+ color: hsl(var(--hsdc-muted-foreground));
181
+ }
182
+ .main :global .heading:hover .heading-link-icon {
183
+ display: inline-block;
184
+ }
185
+ .main :global .footnotes {
186
+ margin-top: 4rem;
187
+ padding-top: 2rem;
188
+ border-top: 1px solid hsl(var(--hsdc-border));
149
189
  color: hsl(var(--hsdc-muted-foreground));
150
190
  }
151
- .main :global(.footnotes) p {
191
+ .main :global .footnotes p {
152
192
  margin: 0;
153
193
  }
154
- .main :global(.contains-task-list) {
194
+ .main :global .footnotes .sr-only {
195
+ position: absolute;
196
+ width: 1px;
197
+ height: 1px;
198
+ padding: 0;
199
+ margin: -1px;
200
+ overflow: hidden;
201
+ clip: rect(0, 0, 0, 0);
202
+ white-space: nowrap;
203
+ border-width: 0;
204
+ }
205
+ .main :global .contains-task-list {
155
206
  list-style-type: none;
156
207
  padding-left: 0;
157
208
  }
158
- .main :global(.contains-task-list) input {
209
+ .main :global .contains-task-list input {
159
210
  margin-right: 0.5rem;
160
211
  }
161
-
162
- .main :global(.react-tweet-theme) p {
212
+ .main :global .contains-task-list li:has(input:checked) {
213
+ text-decoration: line-through;
214
+ }
215
+ .main :global .react-tweet-theme {
216
+ margin-left: auto;
217
+ margin-right: auto;
218
+ }
219
+ .main :global .react-tweet-theme p {
163
220
  margin: 0;
164
221
  line-height: 1.5;
165
- font-size: 17px;
222
+ font-size: 1rem;
166
223
  }
167
- .main :global(.code-block) {
224
+ .main :global .code-block {
168
225
  margin: 1.5rem 0;
169
226
  border: 1px solid hsl(var(--hsdc-border));
170
- border-radius: 8px;
227
+ border-radius: 0.25rem;
171
228
  overflow: hidden;
172
229
  }
173
- .main :global(.code-block) pre {
230
+ .main :global .code-block pre {
174
231
  font-family: var(--hsdc-font-code);
175
- font-size: 14px;
176
- padding: 16px;
232
+ font-size: 0.875rem;
233
+ padding: 1rem;
177
234
  overflow: auto;
178
235
  background-color: hsl(var(--hsdc-code-block));
179
236
  }
180
- .main :global(.code-block) :global(.code-block-header) {
237
+ .main :global .code-block .code-block-header {
181
238
  display: flex;
182
239
  flex-direction: row;
183
240
  align-items: center;
184
- gap: 8px;
185
- font-size: 14px;
186
- padding: 8px 16px;
241
+ justify-items: center;
242
+ gap: 0.5rem;
243
+ font-size: 0.875rem;
244
+ padding: 0.5rem 1rem;
187
245
  background-color: hsl(var(--hsdc-muted));
188
246
  border-bottom: 1px solid hsl(var(--hsdc-border));
189
247
  }
190
- .main :global(.code-block) :global(.code-block-filename) {
248
+ .main :global .code-block .code-block-header > div {
249
+ display: flex;
250
+ align-items: center;
251
+ justify-items: center;
252
+ }
253
+ .main :global .code-block .code-block-filename {
191
254
  flex: 1 1 auto;
192
255
  }
193
- .main :global(.shiki) code {
194
- min-width: max-content;
195
- display: flex;
196
- flex-direction: column;
197
- margin: 0 -16px;
256
+ .main :global .shiki code {
257
+ display: block;
258
+ width: fit-content;
259
+ min-width: 100%;
198
260
  }
199
- .main :global(.shiki) :global(span.line) {
261
+ .main :global .shiki span.line {
262
+ display: inline-block;
200
263
  position: relative;
201
- width: 100%;
202
- padding: 0 16px;
264
+ width: fit-content;
265
+ min-width: calc(100% + 2rem);
266
+ margin: 0 -1rem;
267
+ padding: 0 1rem;
203
268
  }
204
- .main :global(.shiki) :global(span.line.diff.add) {
269
+ .main :global .shiki span.line.highlighted {
270
+ background-color: hsl(var(--hsdc-shiki-highlighted-word)/0.1) !important;
271
+ }
272
+ .main :global .shiki span.line.diff.add {
205
273
  background-color: hsl(var(--hsdc-shiki-diff-add)/0.1) !important;
206
274
  }
207
- .main :global(.shiki) :global(span.line.diff.add)::before {
275
+ .main :global .shiki span.line.diff.add::before {
208
276
  position: absolute;
209
277
  left: 2px;
210
278
  content: "+";
211
279
  color: hsl(var(--hsdc-shiki-diff-add));
212
280
  }
213
- .main :global(.shiki) :global(span.line.diff.remove) {
281
+ .main :global .shiki span.line.diff.remove {
214
282
  background-color: hsl(var(--hsdc-shiki-diff-remove)/0.1) !important;
215
283
  }
216
- .main :global(.shiki) :global(span.line.diff.remove)::before {
284
+ .main :global .shiki span.line.diff.remove::before {
217
285
  position: absolute;
218
286
  left: 2px;
219
287
  content: "-";
220
288
  color: hsl(var(--hsdc-shiki-diff-remove));
221
289
  }
222
- .main :global(.shiki) :global(.highlighted-word) {
290
+ .main :global .shiki .highlighted-word {
223
291
  background-color: hsl(var(--hsdc-shiki-highlighted-word)/0.2);
224
- padding: 2px 0;
225
- margin: -2px 0;
292
+ padding: 0.125rem 0;
293
+ margin: -0.125rem 0;
294
+ }
295
+ .main :global .shiki .tab,
296
+ .main :global .shiki .space {
297
+ position: relative;
298
+ }
299
+ .main :global .shiki .tab::before {
300
+ content: "⇥";
301
+ position: absolute;
302
+ opacity: 0.3;
226
303
  }
227
- .main :global(.link-card) {
304
+ .main :global .shiki .space::before {
305
+ content: "·";
306
+ position: absolute;
307
+ opacity: 0.3;
308
+ }
309
+ .main :global .link-card {
228
310
  display: flex;
229
311
  flex-direction: row;
230
312
  border: 1px solid hsl(var(--hsdc-border));
231
- border-radius: 8px;
313
+ border-radius: 0.5rem;
232
314
  overflow: hidden;
233
315
  color: inherit;
234
316
  width: 100%;
235
317
  max-height: 144px;
236
318
  margin: 1.8rem 0;
237
319
  }
238
- .main :global(.link-card):hover {
320
+ .main :global .link-card:hover {
239
321
  text-decoration: none;
240
322
  background-color: hsl(var(--hsdc-muted)/0.5);
241
323
  }
242
- .main :global(.link-card) :global(.link-card-main) {
324
+ .main :global .link-card .link-card-main {
243
325
  flex: 1;
244
326
  display: flex;
245
327
  flex-direction: column;
246
- padding: 12px 16px;
328
+ padding: 0.75rem 1rem;
247
329
  overflow: hidden;
248
- gap: 8px;
330
+ gap: 0.5rem;
249
331
  }
250
- .main :global(.link-card) :global(.link-card-main) > div {
332
+ .main :global .link-card .link-card-main .link-card-title,
333
+ .main :global .link-card .link-card-main .link-card-description,
334
+ .main :global .link-card .link-card-main .link-card-domain {
251
335
  overflow: hidden;
252
336
  display: -webkit-box;
253
337
  -webkit-box-orient: vertical;
254
338
  -webkit-line-clamp: 2;
255
339
  line-clamp: 2;
256
340
  }
257
- .main :global(.link-card) :global(.link-card-main) :global(.link-card-title-container) {
341
+ .main :global .link-card .link-card-main .link-card-title-container {
258
342
  flex: 1 1 auto;
259
343
  }
260
- .main :global(.link-card) :global(.link-card-main) :global(.link-card-title-container) :global(.link-card-title) {
344
+ .main :global .link-card .link-card-main .link-card-title-container .link-card-title {
261
345
  font-size: 0.875rem;
262
346
  -webkit-line-clamp: 4;
263
347
  line-clamp: 4;
264
348
  }
265
349
  @media (min-width: 640px) {
266
- .main :global(.link-card) :global(.link-card-main) :global(.link-card-title-container) :global(.link-card-title) {
350
+ .main :global .link-card .link-card-main .link-card-title-container .link-card-title {
267
351
  font-size: 1rem;
268
352
  -webkit-line-clamp: 2;
269
353
  line-clamp: 2;
270
354
  }
271
355
  }
272
- .main :global(.link-card) :global(.link-card-main) :global(.link-card-description) {
356
+ .main :global .link-card .link-card-main .link-card-description {
273
357
  font-size: 0.75rem;
274
358
  display: none;
275
359
  color: hsl(var(--hsdc-muted-foreground));
276
360
  }
277
361
  @media (min-width: 640px) {
278
- .main :global(.link-card) :global(.link-card-main) :global(.link-card-description) {
362
+ .main :global .link-card .link-card-main .link-card-description {
279
363
  display: -webkit-box;
280
364
  }
281
365
  }
282
- .main :global(.link-card) :global(.link-card-main) :global(.link-card-domain) {
366
+ .main :global .link-card .link-card-main .link-card-domain {
283
367
  display: flex;
284
368
  flex-direction: row;
285
369
  align-items: center;
286
- gap: 8px;
370
+ gap: 0.5rem;
287
371
  font-size: 0.75rem;
288
372
  color: hsl(var(--hsdc-muted-foreground));
289
373
  }
290
- .main :global(.link-card) :global(.link-card-image) {
374
+ .main :global .link-card .link-card-main .link-card-domain > div {
375
+ text-wrap: nowrap;
376
+ text-overflow: ellipsis;
377
+ overflow: hidden;
378
+ }
379
+ .main :global .link-card .link-card-image {
291
380
  width: 35%;
292
381
  }
293
- .main :global(.link-card) :global(.link-card-image) img {
382
+ .main :global .link-card .link-card-image img {
294
383
  object-fit: contain;
295
384
  object-position: top;
296
- padding: 8px;
385
+ padding: 0.5rem;
297
386
  width: 100%;
298
387
  height: 100%;
299
388
  }
300
389
  @media (min-width: 640px) {
301
- .main :global(.link-card) :global(.link-card-image) img {
390
+ .main :global .link-card .link-card-image img {
302
391
  object-fit: cover;
303
392
  object-position: center;
304
393
  padding: 0;
305
394
  }
306
395
  }
396
+ .main :global .markdown-alert {
397
+ padding: 0.5rem 1rem;
398
+ margin-bottom: 1.8rem;
399
+ border-left: 0.25em solid var(--github-alert-default-color);
400
+ }
401
+ .main :global .markdown-alert > :first-child {
402
+ margin-top: 0;
403
+ }
404
+ .main :global .markdown-alert > :nth-child(2) {
405
+ margin-top: 0.25rem;
406
+ }
407
+ .main :global .markdown-alert > :last-child {
408
+ margin-bottom: 0;
409
+ }
410
+ .main :global .markdown-alert .markdown-alert-title {
411
+ display: flex;
412
+ margin-bottom: 0.25rem;
413
+ align-items: center;
414
+ }
415
+ .main :global .markdown-alert .markdown-alert-title > svg {
416
+ margin-right: 0.5rem;
417
+ }
418
+ .main :global .markdown-alert.markdown-alert-note {
419
+ border-left-color: var(--github-alert-note-color);
420
+ }
421
+ .main :global .markdown-alert.markdown-alert-note .markdown-alert-title {
422
+ color: var(--github-alert-note-color);
423
+ }
424
+ .main :global .markdown-alert.markdown-alert-tip {
425
+ border-left-color: var(--github-alert-tip-color);
426
+ }
427
+ .main :global .markdown-alert.markdown-alert-tip .markdown-alert-title {
428
+ color: var(--github-alert-tip-color);
429
+ }
430
+ .main :global .markdown-alert.markdown-alert-important {
431
+ border-left-color: var(--github-alert-important-color);
432
+ }
433
+ .main :global .markdown-alert.markdown-alert-important .markdown-alert-title {
434
+ color: var(--github-alert-important-color);
435
+ }
436
+ .main :global .markdown-alert.markdown-alert-warning {
437
+ border-left-color: var(--github-alert-warning-color);
438
+ }
439
+ .main :global .markdown-alert.markdown-alert-warning .markdown-alert-title {
440
+ color: var(--github-alert-warning-color);
441
+ }
442
+ .main :global .markdown-alert.markdown-alert-caution {
443
+ border-left-color: var(--github-alert-caution-color);
444
+ }
445
+ .main :global .markdown-alert.markdown-alert-caution .markdown-alert-title {
446
+ color: var(--github-alert-caution-color);
447
+ }
448
+ .main :global .mermaid-block {
449
+ margin: 1.5rem 0;
450
+ }
451
+ .main :global .mermaid-block svg {
452
+ margin-right: auto;
453
+ margin-left: auto;
454
+ }
455
+ .main :global .mermaid-block.mermaid-loading {
456
+ width: 100%;
457
+ height: 8em;
458
+ display: flex;
459
+ justify-items: center;
460
+ align-items: center;
461
+ }
462
+ .main :global .mermaid-block.mermaid-loading > div {
463
+ margin-left: auto;
464
+ margin-right: auto;
465
+ }
466
+ .main :global .youtube-block {
467
+ margin: 1.5rem 0;
468
+ }
469
+ .main :global .youtube-block div > lite-youtube {
470
+ margin-right: auto;
471
+ margin-left: auto;
472
+ }
473
+ .main :global .kifu-block {
474
+ margin: 1.5rem 0;
475
+ }
476
+ .main :global .kifu-block svg {
477
+ margin-right: auto;
478
+ margin-left: auto;
479
+ }
480
+ .main :global .gist-block {
481
+ margin: 1.5rem 0;
482
+ }
483
+ .main :global .gist-block .gist-file {
484
+ border-radius: 0.25rem;
485
+ overflow: hidden;
486
+ border: 1px solid hsl(var(--hsdc-border));
487
+ }
488
+ .main :global .gist-block .gist-file:last-child {
489
+ margin-bottom: 0;
490
+ }
491
+ .main :global .directory-tree {
492
+ font-family: var(--hsdc-font-code);
493
+ position: relative;
494
+ margin: 0;
495
+ padding: 0.5rem 1rem;
496
+ font-size: 0.85rem;
497
+ font-weight: 400;
498
+ line-height: 1.5rem;
499
+ list-style: none;
500
+ }
501
+ .main :global .directory-tree .directory-tree-node-content {
502
+ display: flex;
503
+ flex-direction: row;
504
+ align-items: center;
505
+ gap: 0.5rem;
506
+ }
507
+ .main :global .directory-tree .directory-tree-directory > .directory-tree-node-content {
508
+ font-weight: 800;
509
+ color: hsl(var(--hsdc-muted-foreground));
510
+ }
511
+ .main :global .directory-tree ul {
512
+ padding-left: 5px;
513
+ list-style: none;
514
+ line-height: 1.5rem;
515
+ }
516
+ .main :global .directory-tree li {
517
+ line-height: 1.5rem;
518
+ }
519
+ .main :global .directory-tree ul li {
520
+ position: relative;
521
+ padding-top: 5px;
522
+ padding-bottom: 5px;
523
+ padding-left: 15px;
524
+ -webkit-box-sizing: border-box;
525
+ -moz-box-sizing: border-box;
526
+ box-sizing: border-box;
527
+ }
528
+ .main :global .directory-tree ul li:before {
529
+ position: absolute;
530
+ top: 15px;
531
+ left: 0;
532
+ width: 10px;
533
+ height: 1px;
534
+ margin: auto;
535
+ content: "";
536
+ background-color: #666;
537
+ }
538
+ .main :global .directory-tree ul li:after {
539
+ position: absolute;
540
+ top: 0;
541
+ bottom: 0;
542
+ left: 0;
543
+ width: 1px;
544
+ height: 100%;
545
+ content: "";
546
+ background-color: #666;
547
+ }
548
+ .main :global .directory-tree ul li:last-child:after {
549
+ height: 15px;
550
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hackersheet/react-document-content-styles",
3
- "version": "0.1.0-alpha.1",
3
+ "version": "0.1.0-alpha.11",
4
4
  "description": "Hacker Sheet document content styles.",
5
5
  "keywords": [],
6
6
  "repository": {