@hackersheet/react-document-content-styles 0.1.0-alpha.13 → 0.1.0-alpha.15
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/dist/basic.module.css +171 -42
- package/package.json +5 -5
package/dist/basic.module.css
CHANGED
|
@@ -15,12 +15,13 @@
|
|
|
15
15
|
.main h4,
|
|
16
16
|
.main h5,
|
|
17
17
|
.main h6 {
|
|
18
|
-
margin:
|
|
19
|
-
padding: 0.5rem 0;
|
|
18
|
+
margin: 4.5rem 0 1.5rem 0;
|
|
20
19
|
font-weight: 700;
|
|
21
|
-
|
|
20
|
+
line-height: 1.4;
|
|
22
21
|
}
|
|
23
22
|
.main h1 {
|
|
23
|
+
padding-bottom: 0.5rem;
|
|
24
|
+
border-bottom: 1px solid var(--hsdc-border);
|
|
24
25
|
font-size: 2rem;
|
|
25
26
|
}
|
|
26
27
|
.main h2 {
|
|
@@ -38,33 +39,70 @@
|
|
|
38
39
|
.main h6 {
|
|
39
40
|
font-size: 0.7rem;
|
|
40
41
|
}
|
|
42
|
+
.main h2 a:before,
|
|
43
|
+
.main h3 a:before,
|
|
44
|
+
.main h4 a:before,
|
|
45
|
+
.main h5 a:before,
|
|
46
|
+
.main h6 a:before {
|
|
47
|
+
margin-right: 0.5rem;
|
|
48
|
+
color: var(--hsdc-muted-foreground);
|
|
49
|
+
font-weight: 400;
|
|
50
|
+
font-size: 0.8em;
|
|
51
|
+
vertical-align: baseline;
|
|
52
|
+
transition: color 0.15s;
|
|
53
|
+
}
|
|
54
|
+
.main h2 a:hover:before,
|
|
55
|
+
.main h3 a:hover:before,
|
|
56
|
+
.main h4 a:hover:before,
|
|
57
|
+
.main h5 a:hover:before,
|
|
58
|
+
.main h6 a:hover:before {
|
|
59
|
+
color: var(--hsdc-link);
|
|
60
|
+
}
|
|
61
|
+
.main h2 a:before {
|
|
62
|
+
content: "##";
|
|
63
|
+
}
|
|
64
|
+
.main h3 a:before {
|
|
65
|
+
content: "###";
|
|
66
|
+
}
|
|
67
|
+
.main h4 a:before {
|
|
68
|
+
content: "####";
|
|
69
|
+
}
|
|
70
|
+
.main h5 a:before {
|
|
71
|
+
content: "#####";
|
|
72
|
+
}
|
|
73
|
+
.main h6 a:before {
|
|
74
|
+
content: "######";
|
|
75
|
+
}
|
|
41
76
|
.main p {
|
|
42
|
-
margin: 1.
|
|
77
|
+
margin: 1.75rem 0;
|
|
78
|
+
line-height: 2;
|
|
79
|
+
letter-spacing: 0.02em;
|
|
43
80
|
}
|
|
44
81
|
.main strong {
|
|
45
82
|
font-weight: 700;
|
|
46
83
|
}
|
|
47
84
|
.main hr {
|
|
48
|
-
margin:
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
line-height: 2.2;
|
|
52
|
-
letter-spacing: 0.04em;
|
|
85
|
+
margin: 3rem 0;
|
|
86
|
+
border: none;
|
|
87
|
+
border-top: 1px solid var(--hsdc-border);
|
|
53
88
|
}
|
|
54
89
|
.main ol,
|
|
55
90
|
.main ul {
|
|
91
|
+
margin: 1.75rem 0;
|
|
56
92
|
padding-left: 1.5rem;
|
|
57
93
|
}
|
|
58
94
|
.main ol ol,
|
|
59
95
|
.main ol ul,
|
|
60
96
|
.main ul ol,
|
|
61
97
|
.main ul ul {
|
|
98
|
+
margin: 0.75rem 0;
|
|
62
99
|
padding-left: 1rem;
|
|
63
100
|
}
|
|
64
101
|
.main ol li,
|
|
65
102
|
.main ul li {
|
|
66
|
-
line-height:
|
|
67
|
-
padding-left: 0.
|
|
103
|
+
line-height: 1.9;
|
|
104
|
+
padding-left: 0.25rem;
|
|
105
|
+
margin: 0.5rem 0;
|
|
68
106
|
}
|
|
69
107
|
.main ul {
|
|
70
108
|
list-style-type: disc;
|
|
@@ -85,7 +123,7 @@
|
|
|
85
123
|
list-style-type: square;
|
|
86
124
|
}
|
|
87
125
|
.main table:not(:global(.gist-block) table) {
|
|
88
|
-
margin:
|
|
126
|
+
margin: 2rem 0;
|
|
89
127
|
width: 100%;
|
|
90
128
|
table-layout: fixed;
|
|
91
129
|
border-collapse: separate;
|
|
@@ -135,9 +173,11 @@
|
|
|
135
173
|
background-color: var(--hsdc-muted);
|
|
136
174
|
}
|
|
137
175
|
.main blockquote {
|
|
138
|
-
margin:
|
|
139
|
-
padding:
|
|
140
|
-
border-left:
|
|
176
|
+
margin: 2rem 0;
|
|
177
|
+
padding: 1rem 1.25rem;
|
|
178
|
+
border-left: 3px solid var(--hsdc-border);
|
|
179
|
+
background-color: oklch(from var(--hsdc-muted) l c h/0.3);
|
|
180
|
+
border-radius: 0 0.25rem 0.25rem 0;
|
|
141
181
|
color: var(--hsdc-muted-foreground);
|
|
142
182
|
}
|
|
143
183
|
.main blockquote > :first-child {
|
|
@@ -147,7 +187,7 @@
|
|
|
147
187
|
margin-bottom: 0;
|
|
148
188
|
}
|
|
149
189
|
.main blockquote blockquote {
|
|
150
|
-
margin: 0 0
|
|
190
|
+
margin: 0.75rem 0;
|
|
151
191
|
}
|
|
152
192
|
.main a:not(article a) {
|
|
153
193
|
color: var(--hsdc-link);
|
|
@@ -162,25 +202,15 @@
|
|
|
162
202
|
background-color: oklch(from var(--hsdc-muted) l c h/0.5);
|
|
163
203
|
}
|
|
164
204
|
|
|
165
|
-
.main :global(.heading):has(a) {
|
|
166
|
-
padding: 0;
|
|
167
|
-
}
|
|
168
205
|
.main :global(.heading) a {
|
|
169
|
-
display: block;
|
|
170
|
-
padding: 0.5rem 0;
|
|
171
206
|
color: inherit;
|
|
207
|
+
text-decoration: none;
|
|
172
208
|
}
|
|
173
|
-
.main :global(.heading) a
|
|
174
|
-
|
|
175
|
-
display: none;
|
|
176
|
-
line-height: 1.1;
|
|
177
|
-
width: 1em;
|
|
178
|
-
height: 1em;
|
|
179
|
-
vertical-align: middle;
|
|
180
|
-
color: var(--hsdc-muted-foreground);
|
|
209
|
+
.main :global(.heading) a:hover {
|
|
210
|
+
text-decoration: none;
|
|
181
211
|
}
|
|
182
|
-
.main :global(.heading)
|
|
183
|
-
display:
|
|
212
|
+
.main :global(.heading) :global(.heading-link-icon) {
|
|
213
|
+
display: none;
|
|
184
214
|
}
|
|
185
215
|
.main :global(.footnotes) {
|
|
186
216
|
margin-top: 4rem;
|
|
@@ -222,7 +252,7 @@
|
|
|
222
252
|
font-size: 1rem;
|
|
223
253
|
}
|
|
224
254
|
.main :global(.code-block) {
|
|
225
|
-
margin:
|
|
255
|
+
margin: 2rem 0;
|
|
226
256
|
border: 1px solid var(--hsdc-border);
|
|
227
257
|
border-radius: 0.25rem;
|
|
228
258
|
overflow: hidden;
|
|
@@ -253,6 +283,11 @@
|
|
|
253
283
|
.main :global(.code-block) :global(.code-block-filename) {
|
|
254
284
|
flex: 1 1 auto;
|
|
255
285
|
}
|
|
286
|
+
.main :global(.code-block) :global(.code-block-actions) {
|
|
287
|
+
display: flex;
|
|
288
|
+
align-items: center;
|
|
289
|
+
gap: 0.25rem;
|
|
290
|
+
}
|
|
256
291
|
.main :global(.shiki) code {
|
|
257
292
|
display: block;
|
|
258
293
|
width: fit-content;
|
|
@@ -315,7 +350,7 @@
|
|
|
315
350
|
color: inherit;
|
|
316
351
|
width: 100%;
|
|
317
352
|
max-height: 144px;
|
|
318
|
-
margin:
|
|
353
|
+
margin: 2rem 0;
|
|
319
354
|
}
|
|
320
355
|
.main :global(.link-card):hover {
|
|
321
356
|
text-decoration: none;
|
|
@@ -394,59 +429,87 @@
|
|
|
394
429
|
}
|
|
395
430
|
}
|
|
396
431
|
.main :global(.markdown-alert) {
|
|
397
|
-
padding:
|
|
398
|
-
margin
|
|
399
|
-
border-left:
|
|
432
|
+
padding: 1rem 1.25rem;
|
|
433
|
+
margin: 2rem 0;
|
|
434
|
+
border-left: 3px solid var(--github-alert-default-color);
|
|
435
|
+
border-radius: 0 0.375rem 0.375rem 0;
|
|
436
|
+
background-color: oklch(from var(--github-alert-default-color) l c h/0.08);
|
|
400
437
|
}
|
|
401
438
|
.main :global(.markdown-alert) > :first-child {
|
|
402
439
|
margin-top: 0;
|
|
403
440
|
}
|
|
404
441
|
.main :global(.markdown-alert) > :nth-child(2) {
|
|
405
|
-
margin-top: 0.
|
|
442
|
+
margin-top: 0.5rem;
|
|
406
443
|
}
|
|
407
444
|
.main :global(.markdown-alert) > :last-child {
|
|
408
445
|
margin-bottom: 0;
|
|
409
446
|
}
|
|
410
447
|
.main :global(.markdown-alert) :global(.markdown-alert-title) {
|
|
411
448
|
display: flex;
|
|
412
|
-
margin-bottom: 0.25rem;
|
|
413
449
|
align-items: center;
|
|
450
|
+
font-size: 0.875rem;
|
|
451
|
+
font-weight: 600;
|
|
452
|
+
text-transform: uppercase;
|
|
453
|
+
letter-spacing: 0.025em;
|
|
414
454
|
}
|
|
415
455
|
.main :global(.markdown-alert) :global(.markdown-alert-title) > svg {
|
|
416
456
|
margin-right: 0.5rem;
|
|
457
|
+
width: 1em;
|
|
458
|
+
height: 1em;
|
|
417
459
|
}
|
|
418
460
|
.main :global(.markdown-alert):global(.markdown-alert-note) {
|
|
419
461
|
border-left-color: var(--github-alert-note-color);
|
|
462
|
+
background-color: oklch(from var(--github-alert-note-color) l c h/0.08);
|
|
420
463
|
}
|
|
421
464
|
.main :global(.markdown-alert):global(.markdown-alert-note) :global(.markdown-alert-title) {
|
|
422
465
|
color: var(--github-alert-note-color);
|
|
423
466
|
}
|
|
467
|
+
.main :global(.markdown-alert):global(.markdown-alert-note) :global(.markdown-alert-title) svg {
|
|
468
|
+
fill: var(--github-alert-note-color);
|
|
469
|
+
}
|
|
424
470
|
.main :global(.markdown-alert):global(.markdown-alert-tip) {
|
|
425
471
|
border-left-color: var(--github-alert-tip-color);
|
|
472
|
+
background-color: oklch(from var(--github-alert-tip-color) l c h/0.08);
|
|
426
473
|
}
|
|
427
474
|
.main :global(.markdown-alert):global(.markdown-alert-tip) :global(.markdown-alert-title) {
|
|
428
475
|
color: var(--github-alert-tip-color);
|
|
429
476
|
}
|
|
477
|
+
.main :global(.markdown-alert):global(.markdown-alert-tip) :global(.markdown-alert-title) svg {
|
|
478
|
+
fill: var(--github-alert-tip-color);
|
|
479
|
+
}
|
|
430
480
|
.main :global(.markdown-alert):global(.markdown-alert-important) {
|
|
431
481
|
border-left-color: var(--github-alert-important-color);
|
|
482
|
+
background-color: oklch(from var(--github-alert-important-color) l c h/0.08);
|
|
432
483
|
}
|
|
433
484
|
.main :global(.markdown-alert):global(.markdown-alert-important) :global(.markdown-alert-title) {
|
|
434
485
|
color: var(--github-alert-important-color);
|
|
435
486
|
}
|
|
487
|
+
.main :global(.markdown-alert):global(.markdown-alert-important) :global(.markdown-alert-title) svg {
|
|
488
|
+
fill: var(--github-alert-important-color);
|
|
489
|
+
}
|
|
436
490
|
.main :global(.markdown-alert):global(.markdown-alert-warning) {
|
|
437
491
|
border-left-color: var(--github-alert-warning-color);
|
|
492
|
+
background-color: oklch(from var(--github-alert-warning-color) l c h/0.08);
|
|
438
493
|
}
|
|
439
494
|
.main :global(.markdown-alert):global(.markdown-alert-warning) :global(.markdown-alert-title) {
|
|
440
495
|
color: var(--github-alert-warning-color);
|
|
441
496
|
}
|
|
497
|
+
.main :global(.markdown-alert):global(.markdown-alert-warning) :global(.markdown-alert-title) svg {
|
|
498
|
+
fill: var(--github-alert-warning-color);
|
|
499
|
+
}
|
|
442
500
|
.main :global(.markdown-alert):global(.markdown-alert-caution) {
|
|
443
501
|
border-left-color: var(--github-alert-caution-color);
|
|
502
|
+
background-color: oklch(from var(--github-alert-caution-color) l c h/0.08);
|
|
444
503
|
}
|
|
445
504
|
.main :global(.markdown-alert):global(.markdown-alert-caution) :global(.markdown-alert-title) {
|
|
446
505
|
color: var(--github-alert-caution-color);
|
|
447
506
|
}
|
|
507
|
+
.main :global(.markdown-alert):global(.markdown-alert-caution) :global(.markdown-alert-title) svg {
|
|
508
|
+
fill: var(--github-alert-caution-color);
|
|
509
|
+
}
|
|
448
510
|
.main :global(.mermaid-block) {
|
|
449
|
-
margin:
|
|
511
|
+
margin: 2rem 0;
|
|
512
|
+
overflow-x: auto;
|
|
450
513
|
}
|
|
451
514
|
.main :global(.mermaid-block) svg {
|
|
452
515
|
margin-right: auto;
|
|
@@ -463,22 +526,88 @@
|
|
|
463
526
|
margin-left: auto;
|
|
464
527
|
margin-right: auto;
|
|
465
528
|
}
|
|
529
|
+
.main :global(.mermaid-block):global(.mermaid-diagram-view) {
|
|
530
|
+
position: relative;
|
|
531
|
+
}
|
|
532
|
+
.main :global(.mermaid-block):global(.mermaid-diagram-view) :global(.mermaid-diagram) {
|
|
533
|
+
overflow-x: auto;
|
|
534
|
+
}
|
|
535
|
+
.main :global(.mermaid-block):global(.mermaid-diagram-view) :global(.mermaid-diagram) svg {
|
|
536
|
+
display: block;
|
|
537
|
+
margin-right: auto;
|
|
538
|
+
margin-left: auto;
|
|
539
|
+
}
|
|
540
|
+
.main :global(.mermaid-block):global(.mermaid-diagram-view) > :global(.mermaid-toggle-btn) {
|
|
541
|
+
position: absolute;
|
|
542
|
+
top: 0;
|
|
543
|
+
right: 0;
|
|
544
|
+
opacity: 0;
|
|
545
|
+
transition: opacity 0.15s;
|
|
546
|
+
}
|
|
547
|
+
.main :global(.mermaid-block):global(.mermaid-diagram-view):hover > :global(.mermaid-toggle-btn) {
|
|
548
|
+
opacity: 1;
|
|
549
|
+
}
|
|
550
|
+
.main :global(.mermaid-block):global(.mermaid-code-view) :global(.mermaid-code) pre {
|
|
551
|
+
margin: 0;
|
|
552
|
+
}
|
|
553
|
+
.main :global(.mermaid-block):global(.mermaid-code-view) :global(.mermaid-code) pre code {
|
|
554
|
+
display: block;
|
|
555
|
+
white-space: pre;
|
|
556
|
+
}
|
|
557
|
+
.main :global(.mermaid-block):global(.mermaid-code-view) :global(.mermaid-error-message) {
|
|
558
|
+
display: flex;
|
|
559
|
+
flex-direction: column;
|
|
560
|
+
gap: 0.25rem;
|
|
561
|
+
padding: 0.75rem 1rem;
|
|
562
|
+
background-color: oklch(from var(--github-alert-caution-color) l c h/0.1);
|
|
563
|
+
border-left: 0.25em solid var(--github-alert-caution-color);
|
|
564
|
+
}
|
|
565
|
+
.main :global(.mermaid-block):global(.mermaid-code-view) :global(.mermaid-error-message) strong {
|
|
566
|
+
font-size: 0.75rem;
|
|
567
|
+
color: var(--github-alert-caution-color);
|
|
568
|
+
}
|
|
569
|
+
.main :global(.mermaid-block):global(.mermaid-code-view) :global(.mermaid-error-message) span {
|
|
570
|
+
font-size: 0.75rem;
|
|
571
|
+
color: var(--hsdc-muted-foreground);
|
|
572
|
+
word-break: break-word;
|
|
573
|
+
}
|
|
574
|
+
.main :global(.mermaid-block):global(.mermaid-code-view):global(.has-error) :global(.mermaid-code) pre {
|
|
575
|
+
border-top: 1px solid var(--hsdc-border);
|
|
576
|
+
}
|
|
577
|
+
.main :global(.mermaid-block) :global(.mermaid-toggle-btn) {
|
|
578
|
+
padding: 0.125rem 0.5rem;
|
|
579
|
+
font-size: 0.625rem;
|
|
580
|
+
font-family: inherit;
|
|
581
|
+
color: var(--hsdc-muted-foreground);
|
|
582
|
+
background: transparent;
|
|
583
|
+
border: 1px solid transparent;
|
|
584
|
+
border-radius: 0.25rem;
|
|
585
|
+
cursor: pointer;
|
|
586
|
+
transition: background-color 0.15s, border-color 0.15s, color 0.15s;
|
|
587
|
+
}
|
|
588
|
+
.main :global(.mermaid-block) :global(.mermaid-toggle-btn):hover:not(:disabled) {
|
|
589
|
+
background-color: oklch(from var(--hsdc-border) l c h/0.5);
|
|
590
|
+
}
|
|
591
|
+
.main :global(.mermaid-block) :global(.mermaid-toggle-btn):disabled {
|
|
592
|
+
cursor: not-allowed;
|
|
593
|
+
opacity: 0.5;
|
|
594
|
+
}
|
|
466
595
|
.main :global(.youtube-block) {
|
|
467
|
-
margin:
|
|
596
|
+
margin: 2rem 0;
|
|
468
597
|
}
|
|
469
598
|
.main :global(.youtube-block) div > lite-youtube {
|
|
470
599
|
margin-right: auto;
|
|
471
600
|
margin-left: auto;
|
|
472
601
|
}
|
|
473
602
|
.main :global(.kifu-block) {
|
|
474
|
-
margin:
|
|
603
|
+
margin: 2rem 0;
|
|
475
604
|
}
|
|
476
605
|
.main :global(.kifu-block) svg {
|
|
477
606
|
margin-right: auto;
|
|
478
607
|
margin-left: auto;
|
|
479
608
|
}
|
|
480
609
|
.main :global(.gist-block) {
|
|
481
|
-
margin:
|
|
610
|
+
margin: 2rem 0;
|
|
482
611
|
}
|
|
483
612
|
.main :global(.gist-block) :global(.gist-file) {
|
|
484
613
|
border-radius: 0.25rem;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hackersheet/react-document-content-styles",
|
|
3
|
-
"version": "0.1.0-alpha.
|
|
3
|
+
"version": "0.1.0-alpha.15",
|
|
4
4
|
"description": "Hacker Sheet document content styles.",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"repository": {
|
|
@@ -15,9 +15,9 @@
|
|
|
15
15
|
],
|
|
16
16
|
"exports": {
|
|
17
17
|
"./basic": {
|
|
18
|
+
"types": "./dist/basic.module.scss.d.ts",
|
|
18
19
|
"import": "./dist/basic.module.css",
|
|
19
|
-
"require": "./dist/basic.module.css"
|
|
20
|
-
"types": "./dist/basic.module.scss.d.ts"
|
|
20
|
+
"require": "./dist/basic.module.css"
|
|
21
21
|
}
|
|
22
22
|
},
|
|
23
23
|
"main": "",
|
|
@@ -27,8 +27,8 @@
|
|
|
27
27
|
"dist"
|
|
28
28
|
],
|
|
29
29
|
"devDependencies": {
|
|
30
|
-
"sass": "1.
|
|
31
|
-
"typed-scss-modules": "8.
|
|
30
|
+
"sass": "1.97.3",
|
|
31
|
+
"typed-scss-modules": "8.1.1"
|
|
32
32
|
},
|
|
33
33
|
"scripts": {
|
|
34
34
|
"build": "rm -rf ./dist && mkdir dist && pnpm typegen:scss && pnpm build:css",
|