返回 slidev
code.css
根目录 / packages / client / styles / code.css
1 html.dark:root {
2 color-scheme: dark;
3 }
4
5 /* Shiki */
6 html.dark .shiki {
7 color: var(--shiki-dark, inherit);
8 --twoslash-popup-bg: var(--shiki-dark-bg, inherit);
9 }
10
11 html.dark .shiki span {
12 color: var(--shiki-dark);
13 }
14
15 html:not(.dark) .shiki {
16 color: var(--shiki-light, inherit);
17 --twoslash-popup-bg: var(--shiki-light-bg, inherit);
18 }
19
20 html:not(.dark) .shiki span {
21 color: var(--shiki-light);
22 }
23
24 .twoslash-meta-line.twoslash-popover-line {
25 margin-top: -10px;
26 }
27
28 /* Slidev */
29 .slidev-code-wrapper {
30 margin: var(--slidev-code-margin) !important;
31 scroll-padding: var(--slidev-code-padding);
32 &:-webkit-scrollbar {
33 width: 0px;
34 }
35 }
36
37 .slidev-code {
38 font-family: var(--slidev-code-font-family) !important;
39 padding: var(--slidev-code-padding) !important;
40 font-size: var(--slidev-code-font-size) !important;
41 line-height: var(--slidev-code-line-height) !important;
42 border-radius: var(--slidev-code-radius) !important;
43 background: var(--slidev-code-background);
44 overflow: auto;
45 }
46
47 .slidev-code-block-title,
48 .slidev-code-group-tabs {
49 background: var(--slidev-code-background);
50 color: var(--slidev-code-tab-text-color);
51 padding-left: var(--slidev-code-padding);
52 padding-right: var(--slidev-code-padding);
53 font-size: var(--slidev-code-tab-font-size);
54 border-radius: var(--slidev-code-radius) var(--slidev-code-radius) 0 0;
55 box-shadow: inset 0 -1px var(--slidev-code-tab-divider);
56 display: flex;
57 gap: 8px;
58 align-items: center;
59 }
60
61 .slidev-code-block-title {
62 padding: var(--slidev-code-padding);
63 }
64
65 .slidev-code-tab {
66 font-size: var(--slidev-code-tab-font-size);
67 white-space: nowrap;
68 cursor: pointer;
69 transition: color 0.25s;
70 padding: var(--slidev-code-padding);
71 border-bottom: 2px solid transparent;
72 color: var(--slidev-code-tab-text-color);
73 position: relative;
74 display: flex;
75 align-items: center;
76 gap: 8px;
77 }
78
79 .slidev-code-tab:hover {
80 color: var(--slidev-code-tab-active-text-color) !important;
81 }
82
83 .slidev-code-group-blocks .slidev-code-wrapper {
84 margin: 0 !important;
85 }
86
87 .slidev-code-group-blocks .slidev-code {
88 border-radius: 0 0 var(--slidev-code-radius) var(--slidev-code-radius) !important;
89 }
90
91 .slidev-code-group-blocks .slidev-code-wrapper.active {
92 display: block;
93 }
94
95 .slidev-code-group-blocks .slidev-code-wrapper {
96 display: none;
97 }
98
99 .slidev-code-block-title + .slidev-code,
100 .slidev-code-group-tabs + .slidev-code {
101 border-top-left-radius: 0 !important;
102 border-top-right-radius: 0 !important;
103 }
104
105 .slidev-code .slidev-code-highlighted {
106 }
107 .slidev-code .slidev-code-dishonored {
108 opacity: 0.3;
109 pointer-events: none;
110 }
111
112 .slidev-code-line-numbers .slidev-code code {
113 counter-reset: step;
114 counter-increment: step calc(var(--start, 1) - 1);
115 }
116
117 .slidev-code-line-numbers .slidev-code code .line::before {
118 content: counter(step);
119 counter-increment: step;
120 display: inline-block;
121 text-align: right;
122 --uno: w-4 mr-6 text-gray-400 dark-text-gray-600;
123 }
124
125 /* Inline Code */
126 .slidev-note :not(pre) > code,
127 .slidev-layout :not(pre) > code {
128 font-size: 0.9em;
129 background: var(--slidev-code-background);
130 border-radius: var(--slidev-code-radius);
131 --uno: font-light py-0.5 px-1.5;
132 }
133
134 .slidev-note :not(pre) > code:after,
135 .slidev-note :not(pre) > code:before {
136 content: '';
137 }
138
139 .slidev-layout :not(pre) > code:before {
140 margin-right: -0.08em;
141 }
142
143 /* Revert CSS reset for KaTex */
144 .katex,
145 .katex :after,
146 .katex :before {
147 border-color: currentColor;
148 }
149
149 lines CSS