master
1/* stylelint-disable no-descending-specificity */
2/* stylelint-disable selector-class-pattern */
3@reference './global.css';
4
5.twikoo {
6 @apply relative flex h-fit w-full flex-col items-center;
7
8 input,
9 textarea,
10 select {
11 border: none;
12 }
13}
14
15.tk-comments {
16 @apply w-full;
17
18 .tk-row {
19 @apply flex w-full flex-row gap-2;
20 }
21
22 .tk-col {
23 @apply flex w-full flex-col gap-2;
24 }
25
26 /* 回复框样式 */
27 .tk-submit {
28 @apply relative my-2 w-full;
29
30 .tk-avatar {
31 display: none;
32 }
33
34 /* 输入框部分样式 */
35 .tk-col {
36 @apply flex-col-reverse;
37 }
38
39 /* 文本框输入样式 */
40 .el-textarea {
41 @apply border-base-300 relative w-full overflow-hidden rounded-xl border pb-9;
42
43 textarea {
44 @apply bg-base-200/50 w-full p-4;
45
46 resize: none;
47
48 &:focus {
49 outline: none;
50 }
51
52 &::placeholder {
53 @apply text-base-content/50;
54 }
55 }
56
57 .el-input__count {
58 @apply text-base-content/50 absolute right-10 bottom-2 text-sm;
59 }
60 }
61
62 /* 个人信息输入框样式 */
63 .tk-meta-input {
64 @apply flex w-[calc(100%-3.5rem)] flex-col items-center gap-2 md:w-[calc(100%-6.75rem)] md:flex-row;
65 }
66
67 .actions {
68 @apply relative w-full;
69
70 .tk-row-actions-start {
71 @apply absolute bottom-[8.15rem] ml-3 flex flex-row items-center gap-2 md:bottom-[3.15rem];
72
73 input {
74 display: none;
75 }
76 }
77
78 button {
79 @apply border-base-300 bg-primary absolute py-[0.95rem] md:py-[0.3rem];
80
81 &.tk-preview {
82 @apply right-0 bottom-[3.7rem] md:right-[3.35rem] md:bottom-0;
83 }
84
85 &.tk-send {
86 @apply right-0 bottom-0;
87 }
88 }
89 }
90
91 .__markdown {
92 @apply absolute right-3 bottom-[7.75rem] md:bottom-[2.75rem];
93 }
94
95 &:has(.tk-cancel) {
96 .tk-meta-input {
97 @apply w-[calc(100%-3.5rem)] md:w-[calc(100%-10rem)];
98 }
99
100 .actions button {
101 @apply py-[0.3rem];
102
103 &.tk-preview {
104 @apply bottom-[4.9rem] md:bottom-0;
105 }
106
107 &.tk-cancel {
108 @apply bg-error text-error-content right-0 bottom-[2.4rem] md:right-[6.7rem] md:bottom-0;
109 }
110 }
111 }
112
113 .tk-preview-container {
114 @apply border-base-300 bg-base-100 mt-2 w-full rounded-xl border p-2;
115 }
116 }
117
118 /* 表情框样式 */
119 .OwO-body {
120 /* stylelint-disable-next-line scss/operator-no-unspaced */
121 @apply border-base-300 bg-base-200/90 absolute top-9 -left-3 z-20 hidden w-[calc(100vw-3rem)] max-w-[30rem] rounded-xl border duration-300;
122 }
123
124 .OwO-open .OwO-body {
125 @apply block;
126 }
127
128 .OwO-items {
129 @apply hidden max-h-48 overflow-y-auto p-2;
130
131 &.OwO-items-show {
132 @apply block;
133 }
134 }
135
136 .OwO-item {
137 @apply inline-block cursor-pointer rounded-md px-2 py-1 text-center text-xs duration-300;
138
139 img {
140 @apply inline-block h-14 w-14;
141 }
142
143 &:hover {
144 @apply backdrop-brightness-150;
145 }
146 }
147
148 .OwO-bar {
149 @apply flex w-full flex-row flex-wrap items-center rounded-b-xl text-start text-xs;
150 }
151
152 .OwO-packages {
153 @apply flex flex-wrap items-center px-4 text-nowrap;
154
155 > li {
156 @apply hover:bg-primary/50 flex h-8 cursor-pointer items-center px-3 text-center duration-300;
157
158 &.OwO-package-active {
159 @apply bg-primary/50;
160 }
161 }
162 }
163
164 .tk-comments-container {
165 /* 评论整体样式 */
166 @apply mt-4 flex w-full flex-col gap-4;
167
168 .tk-comments-title {
169 @apply flex flex-row items-center justify-between px-2;
170
171 .tk-comments-count {
172 @apply text-lg font-bold;
173 }
174
175 .tk-icon {
176 @apply mx-2 cursor-pointer;
177 }
178 }
179
180 .tk-comment {
181 @apply relative scroll-m-20;
182 }
183
184 > .tk-comment {
185 @apply max-md:border-base-300 max-md:bg-base-200/50 p-4 max-md:rounded-xl max-md:border;
186
187 > .tk-avatar {
188 @apply top-3;
189 }
190 }
191
192 .tk-replies {
193 @apply mt-4 ml-6 flex flex-col gap-2;
194
195 &:not(.tk-replies-expand) {
196 @apply max-h-32 overflow-y-hidden;
197 }
198 }
199
200 /* 详细样式 */
201 .tk-avatar {
202 @apply border-base-300 absolute top-0 h-8 min-h-8 w-8 min-w-8 overflow-hidden rounded-full border;
203 }
204
205 .tk-main > .tk-row {
206 @apply mb-2 ml-[2.5rem] w-[calc(100%-3rem)] justify-between;
207 }
208
209 .tk-meta {
210 a {
211 @apply hover:text-primary duration-300;
212 }
213
214 small {
215 @apply text-base-content/50;
216 }
217
218 .tk-actions {
219 @apply opacity-0 duration-300;
220 }
221 }
222
223 /* 评论操作样式 */
224 .tk-main:not(:has(.tk-replies:hover)):hover > .tk-row .tk-meta .tk-actions {
225 @apply opacity-100;
226 }
227
228 .tk-action {
229 .tk-action-link {
230 @apply border-base-300 relative flex items-center justify-center rounded-xl border px-2 py-1 text-center duration-300;
231
232 .tk-action-icon-solid {
233 @apply absolute left-2 opacity-0 duration-300;
234 }
235
236 .tk-action-count {
237 @apply text-sm;
238
239 &:not(:empty) {
240 @apply ml-2;
241 }
242 }
243
244 &:first-child {
245 display: none;
246 }
247
248 &:hover {
249 @apply bg-primary;
250
251 .tk-action-icon-solid {
252 @apply opacity-100;
253 }
254 }
255 }
256 }
257
258 .tk-content {
259 @apply relative mx-2 mb-3;
260 }
261
262 .tk-extras {
263 @apply flex flex-row gap-3;
264
265 .tk-extra {
266 @apply border-base-300 text-base-content/50 flex flex-row items-center justify-center gap-2 rounded-md border p-1 text-center text-xs;
267 }
268
269 .tk-icon {
270 @apply hidden;
271 }
272 }
273
274 .tk-replies .tk-content > span:first-child {
275 /* 回复提示（回复：xxx）样式 */
276 @apply text-base-content/50 text-xs;
277 }
278
279 .tk-expand-wrap,
280 .tk-collapse-wrap {
281 @apply mt-1 flex items-center justify-center text-center;
282 }
283
284 .tk-expand {
285 @apply bg-base-200/50 hover:bg-primary/50 w-full cursor-pointer rounded-md py-1 text-sm duration-300;
286 }
287 }
288
289 /* 图标样式 */
290 .tk-submit-action-icon {
291 @apply fill-primary inline-block max-h-6 min-h-6 max-w-6 min-w-6 cursor-pointer;
292 }
293
294 .tk-action-icon {
295 @apply fill-primary inline-block max-h-5 min-h-5 max-w-5 min-w-5 overflow-clip;
296 }
297
298 .tk-icon {
299 @apply fill-primary inline-block max-h-4 min-h-4 max-w-4 min-w-4 overflow-clip;
300 }
301
302 .tk-tag {
303 @apply border-base-300 rounded-lg border p-1 text-xs;
304 }
305}
306
307.tk-footer {
308 @apply mt-4 w-full text-right text-sm;
309
310 a {
311 @apply text-primary;
312 }
313}
314
315.tk-admin-container {
316 @apply absolute z-10 h-3/4 w-full overflow-hidden bg-black/30 backdrop-blur-sm;
317
318 &:not(:has(.tk-admin.__show)) {
319 display: none;
320 }
321
322 .tk-admin {
323 @apply relative flex h-full w-full items-center justify-center text-center;
324
325 .tk-admin-close {
326 @apply fill-primary absolute top-[0.65rem] right-2 z-50 h-4 w-4;
327
328 @variant md {
329 @apply top-4 right-3 h-8 w-8;
330 }
331 }
332
333 > div {
334 @apply flex h-full w-full items-center justify-center;
335 }
336 }
337
338 .tk-login {
339 @apply flex flex-col items-center gap-4 p-4;
340
341 .tk-login-title {
342 @apply text-2xl font-bold;
343 }
344 }
345
346 .tk-panel {
347 @apply h-full w-full overflow-y-scroll;
348
349 .tk-panel-title {
350 @apply top-0 left-0 z-40 flex w-full flex-row items-center justify-between p-4;
351
352 /* 管理面板标题 */
353 div {
354 @apply text-xl font-bold;
355 }
356
357 a {
358 @apply border-base-300 bg-base-200/50 hover:bg-primary mx-6 rounded-xl border px-3 py-1 text-xs duration-300;
359 }
360 }
361
362 .tk-tabs {
363 @apply border-base-300 flex flex-row items-center justify-between border-b-2 px-4 text-center text-lg;
364
365 .tk-tab {
366 @apply hover:bg-primary w-full min-w-fit cursor-pointer py-1 duration-300;
367
368 &.__active {
369 @apply border-primary border-b-2;
370 }
371 }
372 }
373
374 .tk-admin-warn {
375 @apply m-2 rounded-sm border-l-4 border-yellow-400 bg-yellow-100 p-4 text-start text-yellow-700;
376
377 a {
378 @apply font-semibold text-yellow-900;
379 }
380 }
381
382 /* 评论管理样式 */
383 .tk-admin-comment {
384 @apply p-4;
385 }
386
387 .tk-admin-comment-filter {
388 @apply flex flex-row items-center justify-between gap-2 p-4;
389
390 div {
391 @apply w-full;
392
393 input {
394 @apply border-base-300 bg-base-200/50 w-full rounded-xl border px-2 py-1;
395
396 &:focus {
397 outline: none;
398 }
399 }
400 }
401
402 select {
403 @apply border-base-300 bg-base-200/50 w-1/4 rounded-xl border p-2;
404 }
405 }
406
407 .tk-admin-comment-list {
408 @apply px-3 text-start;
409 }
410
411 .tk-admin-comment-item {
412 @apply border-base-300 border-b-2 py-1;
413 }
414
415 .tk-admin-comment-meta {
416 @apply flex flex-row flex-wrap items-center gap-2 text-start;
417
418 .tk-avatar {
419 @apply border-base-300 h-8 w-8 overflow-hidden rounded-full border;
420 }
421
422 a {
423 @apply hover:text-primary duration-300;
424 }
425
426 span:last-child,
427 .tk-time {
428 @apply text-base-content/50 text-sm;
429 }
430 }
431
432 .tk-pagination {
433 @apply flex flex-row flex-wrap items-center justify-between p-4;
434
435 > div {
436 @apply flex flex-row items-center gap-2;
437 }
438
439 input {
440 @apply border-base-300 bg-base-200/50 w-16 rounded-xl border px-2 py-1;
441
442 &::-webkit-outer-spin-button,
443 &::-webkit-inner-spin-button {
444 appearance: none;
445 }
446
447 &[type='number'] {
448 appearance: textfield;
449 }
450
451 &:focus {
452 outline: none;
453 }
454 }
455 }
456
457 .tk-pagination-pager {
458 @apply hover:bg-primary cursor-pointer rounded-md px-2 py-1;
459
460 &.__current {
461 @apply bg-primary;
462 }
463 }
464
465 /* 配置管理样式 */
466 .tk-admin-config {
467 @apply p-4;
468 }
469
470 .tk-admin-config-groups {
471 @apply flex flex-col items-center gap-3 px-4;
472 }
473
474 details {
475 @apply border-base-300 w-full overflow-hidden rounded-xl border duration-300;
476
477 summary {
478 @apply hover:bg-primary/50 w-full px-3 py-1 text-start text-2xl duration-300;
479
480 &::marker {
481 margin-right: 1.5rem;
482 }
483 }
484
485 &[open] {
486 summary {
487 @apply bg-primary/50;
488 }
489 }
490 }
491
492 .tk-admin-config-item {
493 @apply mt-4 grid w-full items-center gap-2 px-4;
494
495 grid-template-columns: 25% 75%;
496
497 .tk-admin-config-title {
498 @apply text-end text-lg;
499 }
500
501 input {
502 @apply border-base-300 bg-base-200/50 w-full rounded-xl border px-2 py-1;
503
504 &:focus {
505 outline: none;
506 }
507 }
508
509 .tk-admin-config-desc {
510 @apply text-base-content/50 text-start text-sm whitespace-pre-wrap;
511 }
512 }
513
514 /* 导入样式 */
515 .tk-admin-import {
516 @apply flex flex-col items-start gap-4 p-4;
517
518 .tk-admin-import-label {
519 @apply text-start text-xl font-bold;
520 }
521
522 select {
523 @apply border-base-300 bg-base-200/50 w-full rounded-xl border p-2;
524 }
525
526 input {
527 @apply border-base-300 bg-base-200/50 w-full rounded-xl border px-2 py-1;
528
529 &:focus {
530 outline: none;
531 }
532 }
533
534 .el-textarea {
535 @apply h-full w-full;
536
537 textarea {
538 @apply border-base-300 bg-base-200/50 h-full w-full rounded-xl border px-2 py-1;
539
540 &:focus {
541 outline: none;
542 }
543 }
544 }
545 }
546
547 /* 导出样式 */
548 .tk-admin-export {
549 @apply p-4;
550 }
551 }
552}
553
554.el-input-group {
555 @apply border-base-300 bg-base-200/50 flex w-full flex-row items-center overflow-hidden rounded-xl border text-sm;
556
557 div {
558 @apply bg-primary/50 w-fit px-2 py-1 whitespace-nowrap;
559 }
560
561 input {
562 @apply w-full bg-transparent px-2 py-1;
563
564 &:focus {
565 outline: none;
566 }
567 }
568
569 .el-button {
570 @apply border-none bg-none p-0;
571 }
572}
573
574.el-button {
575 @apply border-base-300 bg-primary rounded-xl border px-2 py-1 text-center text-sm text-nowrap duration-300;
576
577 &:not(.is-disabled) {
578 @apply hover:scale-105 hover:brightness-110 active:scale-95 active:brightness-90;
579 }
580
581 &.is-disabled {
582 @apply cursor-not-allowed brightness-75;
583 }
584}
585
586/* Markdown 样式 */
587.tk-content,
588.tk-preview-container {
589 /* 文本样式 */
590 @apply break-normal hyphens-auto whitespace-pre-wrap md:break-words md:hyphens-manual;
591
592 /* 标题通用样式 */
593 h1,
594 h2,
595 h3,
596 h4,
597 h5 {
598 display: inline;
599 width: 100%;
600 margin: 1rem 0 0.5rem;
601 scroll-margin-top: 4rem;
602 font-weight: bold;
603 }
604
605 /* 基础文本元素 */
606 p {
607 margin: 0.5rem 0;
608 }
609
610 a {
611 @apply text-primary underline decoration-dashed;
612
613 &[data-footnote-ref],
614 &[data-footnote-backref] {
615 scroll-margin-top: 4rem;
616 }
617 }
618
619 /* 代码样式 */
620 .code-toolbar {
621 @apply relative w-full;
622
623 .toolbar {
624 @apply absolute top-1 right-3 flex flex-row-reverse items-center justify-between gap-4 text-xs;
625 }
626
627 .copy-to-clipboard-button {
628 @apply border-base-300 bg-primary rounded-md border px-2 py-1 opacity-0 duration-300;
629 }
630
631 &:hover .copy-to-clipboard-button {
632 @apply opacity-100;
633 }
634
635 pre {
636 @apply rounded-md;
637 }
638 }
639
640 code:not(pre code) {
641 padding: 0 0.25rem;
642
643 @apply bg-primary/10 text-primary rounded-md;
644 }
645
646 /* 媒体元素 */
647 img:not(.tk-owo-emotion) {
648 position: relative;
649 margin: 1rem auto;
650 max-width: 75%;
651 max-height: 40rem;
652
653 @apply rounded-md;
654 }
655
656 img.tk-owo-emotion {
657 @apply inline-block h-[2em] self-baseline;
658 }
659
660 /* 分割线样式 */
661 hr {
662 margin: 1.5rem 0.25rem;
663 border: 1px dashed;
664 }
665
666 /* 引用块样式 */
667 blockquote {
668 padding: 0.25rem 0.25rem 0.25rem 0.75rem;
669
670 @apply border-primary bg-primary/10 my-2 rounded-sm border-l-4;
671 }
672
673 /* 折叠块样式 */
674 details {
675 @apply border-base-300 w-full overflow-hidden rounded-xl border duration-300;
676
677 summary {
678 @apply hover:bg-primary/50 w-full px-3 py-1 text-start text-2xl duration-300;
679
680 &::marker {
681 margin-right: 1.5rem;
682 }
683 }
684
685 &[open] {
686 summary {
687 @apply bg-primary/50;
688 }
689 }
690 }
691}