master
1@reference './global.css';
2
3article {
4 /* 标题通用样式 */
5 h1,
6 h2,
7 h3,
8 h4,
9 h5,
10 h6 {
11 display: inline-block;
12 width: 100%;
13 margin: 1rem 0 0.5rem;
14 font-weight: bold;
15 position: relative;
16
17 a {
18 padding: 0 0.5rem;
19 opacity: 0;
20 text-decoration: none;
21 color: var(--color-primary);
22 transition: opacity 0.2s ease-in-out;
23 }
24
25 &:hover {
26 a {
27 opacity: 1;
28 }
29 }
30 }
31
32 /* 各级标题特殊样式 */
33 h1 {
34 @apply text-3xl;
35 }
36
37 h2 {
38 @apply text-2xl;
39 }
40
41 h3 {
42 @apply text-xl;
43 }
44
45 h4 {
46 @apply text-lg;
47 }
48
49 h5,
50 h6 {
51 @apply text-base;
52 }
53
54 /* 基础文本元素 */
55 @apply wrap-break-word;
56
57 p:not(:first-child, :last-child) {
58 margin: 0.75rem 0;
59 }
60
61 a:not(.card, [data-pswp-src]) {
62 @apply text-primary underline decoration-dashed;
63 }
64
65 del {
66 @apply line-through opacity-70;
67 }
68
69 /* 媒体元素 */
70 inline img {
71 display: inline;
72 max-height: 2em;
73 vertical-align: middle;
74 margin: 0 0.25em;
75 object-fit: contain;
76 width: auto;
77 border-radius: 0.25rem;
78 }
79
80 a[data-pswp-src] {
81 display: block;
82 overflow: hidden;
83 width: fit-content;
84 height: fit-content;
85 position: relative;
86 margin-inline: auto;
87 margin-top: calc(var(--spacing, 0.25rem) * 4);
88 margin-bottom: calc(var(--spacing, 0.25rem) * 6);
89 cursor: zoom-in;
90
91 @apply xs:max-w-4/5 max-w-full sm:max-w-3/4 md:max-w-3/5;
92
93 img {
94 border-radius: var(--radius-md, 0.375rem);
95 max-height: 40rem;
96 }
97 }
98
99 hr {
100 margin: 1.5rem 0.25rem;
101 border: 1px dashed;
102 }
103
104 /* 列表样式 */
105 ul:not(.menu):not(.menu *),
106 ol {
107 margin-top: 0.5rem;
108 }
109
110 ol {
111 counter-reset: li;
112
113 > li {
114 position: relative;
115 padding: 0.25rem 0.25rem 0.25rem 1.8em;
116
117 &::before {
118 position: absolute;
119 left: 0;
120 margin-top: 0.25em;
121 width: 1.5em;
122 height: 1.5em;
123 content: counter(li);
124 counter-increment: li 1;
125 font-size: 0.75em;
126 line-height: 1.5em;
127 text-align: center;
128 border-radius: 9999px;
129
130 @apply bg-primary/50 text-primary;
131 }
132
133 p:first-child {
134 margin-top: 0;
135 }
136 }
137 }
138
139 ul:not(.menu):not(.menu *) > li {
140 position: relative;
141 padding: 0.25rem 0.25rem 0.25rem 1.4em;
142
143 &:not(:has(input[type='checkbox']))::before {
144 position: absolute;
145 top: 0.6em;
146 left: 0.25em;
147 width: 0.75em;
148 height: 0.75em;
149 content: '';
150 border: 0.25em solid;
151 border-radius: 9999px;
152
153 @apply border-primary/75;
154 }
155
156 > input[type='checkbox'] {
157 position: absolute;
158 top: calc(0.25rem + 0.25em);
159 left: 0;
160 width: 0.85em;
161 height: 0.85em;
162 appearance: none;
163 border: 0.125em solid;
164 border-radius: 0.25em;
165 transition: 300ms all ease;
166
167 &:checked {
168 @apply bg-primary/75;
169
170 &::after {
171 content: '✓';
172 position: absolute;
173 font-size: 0.75em;
174 line-height: 0.75em;
175 color: var(--colors-primary-content);
176 }
177 }
178 }
179 }
180
181 /* 代码样式 */
182 .expressive-code {
183 &:where(:not(.card-body > :only-child)) {
184 &:where(:not(:first-child)) {
185 margin-top: 1rem;
186 }
187 &:where(:not(:last-child)) {
188 margin-bottom: 1rem;
189 }
190 }
191 &where(.card-body > :only-child) {
192 pre,
193 .frame .header {
194 @apply rounded-t-none;
195 }
196 }
197 }
198
199 code:not(pre code) {
200 padding: 0 0.25rem;
201
202 @apply bg-primary/10 text-primary rounded-md;
203 }
204
205 /* 引用块样式 */
206 blockquote {
207 @apply border-l-4;
208
209 --color-blockquote-callout: var(--color-neutral-500);
210 padding: 0.25rem 0.25rem 0.25rem 0.75rem;
211 margin-block: 0.5rem;
212 border-radius: var(--radius-sm, 0.25rem);
213 background-color: color-mix(in oklab, var(--color-blockquote-callout) 10%, transparent);
214 border-color: var(--color-blockquote-callout);
215
216 /* Obsidian Callout Style */
217 &[data-callout] {
218 @apply grid grid-cols-1;
219
220 > .callout-title {
221 @apply flex flex-row items-center gap-2 py-0 pr-10 pl-0 text-lg font-semibold;
222
223 color: var(--color-blockquote-callout);
224
225 svg {
226 @apply h-5 w-5;
227 }
228
229 &:not(.collapse-title) {
230 @apply mb-2;
231 }
232
233 &.collapse-title {
234 @apply min-h-9;
235 }
236 }
237
238 &.collapse > input[type='checkbox'] {
239 @apply min-h-9;
240 }
241
242 &.collapse-arrow .collapse-title::after {
243 top: 1.3rem;
244 }
245
246 > .collapse-content {
247 @apply p-0;
248 }
249 }
250
251 &[data-callout='tip'],
252 &[data-callout='hint'],
253 &[data-callout='important'] {
254 --color-blockquote-callout: var(--color-primary);
255 }
256 &[data-callout='info'],
257 &[data-callout='abstract'],
258 &[data-callout='summary'],
259 &[data-callout='tldr'],
260 &[data-callout='todo'],
261 &[data-callout='help'],
262 &[data-callout='faq'] {
263 --color-blockquote-callout: var(--color-info);
264 }
265 &[data-callout='success'],
266 &[data-callout='check'],
267 &[data-callout='done'] {
268 --color-blockquote-callout: var(--color-success);
269 }
270 &[data-callout='warning'],
271 &[data-callout='attention'],
272 &[data-callout='caution'],
273 &[data-callout='question'] {
274 --color-blockquote-callout: var(--color-warning);
275 }
276 &[data-callout='danger'],
277 &[data-callout='bug'],
278 &[data-callout='failure'],
279 &[data-callout='fail'],
280 &[data-callout='missing'] {
281 --color-blockquote-callout: var(--color-error);
282 }
283 &[data-callout='example'] {
284 --color-blockquote-callout: var(--color-indigo-500);
285 }
286 }
287
288 /* 表格样式 */
289 table {
290 @apply relative w-full text-left text-sm;
291
292 :where(thead tr, tbody tr:not(:last-child), tbody tr:first-child:last-child) {
293 @apply border-b-base-200 border-b-2;
294 }
295
296 :where(tfoot) {
297 @apply border-t-base-200 border-t-2;
298 }
299
300 :where(thead, tfoot) {
301 @apply bg-base-300/15 text-base-content/90 text-xs font-bold whitespace-nowrap;
302 }
303
304 :where(th, td) {
305 padding: 0.75rem 1rem;
306 vertical-align: middle;
307 }
308 }
309
310 /* 数学样式 */
311 mjx-container[display='true'] {
312 overflow-x: auto;
313 overflow-y: hidden;
314 }
315}