-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathargon-luogu.user.styl
1889 lines (1765 loc) · 64.5 KB
/
argon-luogu.user.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
/* ==UserStyle==
@name Argon Luogu Dev
@version 20250117.11.45
@namespace https://userstyles.world/style/18510/argon-luogu-dev
@description 洛谷美化样式。
@author d0j1a1701
@license MIT
@preprocessor stylus
@var checkbox dark-mode "深色模式" 1
@var text font-stack "全局字体" "'Noto Sans SC'"
@var text font-stack-codeblock "代码块字体" "'Fira Code', 'Source Code Pro', 'Noto Sans SC'"
@var text main-background "自定义背景" "url(https://cdn.luogu.com.cn/upload/image_hosting/7ludxt0p.png)"
@var checkbox header-acrylic "顶栏亚克力效果" 1
@var checkbox nav-acrylic "侧栏亚克力效果" 1
@var checkbox card-acrylic "卡片亚克力效果" 1
@var checkbox footer-acrylic "底栏亚克力效果" 1
@var checkbox anymore-acrylic "其余亚克力效果" 1
@var checkbox remove-ad "去除洛谷广告" 0
@var checkbox animations "动画" 1
@var checkbox prose-bar "阅读进度条" 1
@var checkbox lock-account "纯享壁纸版锁定账户 " 0
==/UserStyle== */
//! 字体导入 ---------
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:[email protected]&family=Noto+Sans+SC:[email protected]&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
//! 自定义配置部分 ---------
// 调色板
if dark-mode
// 全局颜色
body_bg_color = #181c27 // 全局背景色
navbar_bg_color = #1f3144 // 菜单栏背景色
navbar_text_color = #d0d0d0 // 菜单栏文字色
subtitle_color = #d0d0d0 // 副标题颜色（面板外）
text_color = #c4c6c9 // 全局字体色
sec_text_color = #a7a9ad // 次级字体色（摘要、简介等位置）
time_text_color = rgba(126,241,147,0.62) //主页时间字体色
board_color = #252d38 // 面板背景色
post_text_color = #c4c6c9 // 面板字体色
post_heading_color = #c4c6c9 // 面板标题色（h1, h2, h3...）
post_link_color = #1589e9 // 超链接字体色
link_hover_color = #30a9de // 超链接悬浮字体色
link_hover_bg_color = transparent // 超链接悬浮背景色
line_color = #435266 // 分割线颜色
scrollbar_track_color = #181c27 // 滚动槽颜色
scrollbar_thumb_color = #687582 // 滚动条颜色
scrollbar_hover_color = #5e72e4 // 滚动条悬浮色
button_bg_color = transparent // 按钮背景色
button_hover_bg_color = #46647e // 按钮悬浮色
selection_bg_color = #9696c84d // 选中背景色
acrylic_bg_color = #000000 // 亚克力背景色
inlinecode_bg_color = #636e7b66 // 行内代码背景色
// 代码高亮配色：
codeblock_bg_color = #0d1117
hljs_base_color = #c9d1d9
hljs_keyword_color = #ff7b72
hljs_function_color = #d2a8ff
hljs_variable_color = #79c0ff
hljs_string_color = #a5d6ff
hljs_symbol_color = #ffa657
hljs_comment_color = #8b949e
hljs_tag_color = #7ee787
hljs_subst_color = #c9d1d9
hljs_section_color = #1f6feb
hljs_bullet_color = #f2cc60
hljs_emphasis_color = #c9d1d9
hljs_strong_color = #c9d1d9
hljs_addition_color = #aff5b4
hljs_addition_bg_color = #033a16
hljs_deletion_color = #ffdcd7
hljs_deletion_bg_color = #67060c
text_area_color = #eaecef
else
body_bg_color = #eee
navbar_bg_color = #eeeeee
navbar_text_color = #3c4858
subtitle_color = #fff
text_color = #3c4858
time_text_color = rgba(5, 67, 16, 0.79)
board_color = #fff
post_text_color = #2c3e50
sec_text_color = #718096
post_heading_color = #1a202c
post_link_color = #0366d6
link_hover_color = #30a9de
link_hover_bg_color = transparent
line_color = #eaecef
scrollbar_track_color = #eeeeee
scrollbar_thumb_color = #c4c6c9
scrollbar_hover_color = #a6a6a6
button_hover_bg_color = #f2f3f5
button_bg_color = transparent
selection_bg_color = #95bce3
acrylic_bg_color = #ffffff
text_area_color = #435266
// ! 配置部分结束 ---------
main-background = body_bg_color unless main-background
// d0j1a_1701 最爱的亚克力材质
// 基于伪元素的亚克力实现，不会造成层叠混乱
acrylic(arc-opacity=0.5,blur-radius=10px,no_shadow=false)
background none !important
&:before
acr-bgcolor = rgba(acrylic_bg_color, arc-opacity)
background acr-bgcolor !important
backdrop-filter blur(blur-radius) !important unless blur-radius == 0
box-shadow 0 1px 3px rgba(0, 0, 0, .01),
0 1px 8px rgba(0, 0, 0, 0.2) unless no_shadow !important
content ""
border-radius @border-radius if @border-radius
position absolute
pointer-events none
z-index -1
top 0
left 0
right 0
bottom 0
// https://stackoverflow.com/questions/44522299/css-only-acrylic-material-from-fluent-design-system
// 直接修改背景的亚克力实现，不需要修改 z-index，不会对 border-radius 造成影响，但可能造成层叠混乱
acrylic-bg(arc-opacity=0.5,blur-radius=10px,no_shadow=false)
acr-bgcolor = rgba(acrylic_bg_color, arc-opacity)
background acr-bgcolor !important
backdrop-filter blur(blur-radius) !important unless blur-radius == 0
box-shadow 0 1px 3px rgba(0, 0, 0, 0.01),
0 1px 8px rgba(0, 0, 0, 0.2) unless no_shadow !important
// 修改 Markdown 渲染内容样式
markdown-patch()
.marked
a
color post_link_color
code // 内联代码
background #fff0 !important
border none !important
background codeblock_bg_color !important
border-radius 5px
color hljs_base_color !important
box-shadow none !important
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_
color hljs_keyword_color if hljs_keyword_color
.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_
color hljs_function_color if hljs_function_color
.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id,
.hljs-variable
color hljs_variable_color if hljs_variable_color
.hljs-meta .hljs-string,
.hljs-regexp,
.hljs-string
color hljs_string_color if hljs_string_color
.hljs-built_in,
.hljs-symbol
color hljs_symbol_color if hljs_symbol_color
.hljs-code,
.hljs-comment,
.hljs-formula
color hljs_comment_color if hljs_comment_color
.hljs-name,
.hljs-quote,
.hljs-selector-pseudo,
.hljs-selector-tag
color hljs_tag_color if hljs_tag_color
.hljs-subst
color hljs_subst_color if hljs_subst_color
.hljs-section
color hljs_section_color if hljs_section_color
font-weight 700
.hljs-bullet
color hljs_bullet_color if hljs_bullet_color
.hljs-emphasis
color hljs_emphasis_color if hljs_emphasis_color
font-style italic
.hljs-strong
color hljs_strong_color if hljs_strong_color
font-weight 700
.hljs-addition
color hljs_addition_color if hljs_addition_color
background-color hljs_addition_bg_color if hljs_addition_bg_color
.hljs-deletion
color hljs_deletion_color if hljs_deletion_color
background-color hljs_deletion_bg_color if hljs_deletion_bg_color
pre
&[exlg-copy-code-block]
border-top-left-radius: 0 !important
border-top-right-radius: 0 !important
border-top: none !important
background codeblock_bg_color !important
border none
border-radius 5px
margin-bottom 10px
// 标签样式更改
h1, h2, h3, h4, h5, h6
font-weight 600 !important
color post_heading_color !important
hr.horizon
background-color line_color !important
// 代码块
pre:not([.mp-editor-container])
background codeblock_bg_color !important
border none
border-radius 5px
margin-bottom 10px
&[exlg-copy-code-block]
border-top-left-radius: 0 !important
border-top-right-radius: 0 !important
border-top: none !important
code
background codeblock_bg_color !important
border-radius 5px
color hljs_base_color !important
box-shadow none !important
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_
color hljs_keyword_color if hljs_keyword_color
.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_
color hljs_function_color if hljs_function_color
.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id,
.hljs-variable
color hljs_variable_color if hljs_variable_color
.hljs-meta .hljs-string,
.hljs-regexp,
.hljs-string
color hljs_string_color if hljs_string_color
.hljs-built_in,
.hljs-symbol
color hljs_symbol_color if hljs_symbol_color
.hljs-code,
.hljs-comment,
.hljs-formula
color hljs_comment_color if hljs_comment_color
.hljs-name,
.hljs-quote,
.hljs-selector-pseudo,
.hljs-selector-tag
color hljs_tag_color if hljs_tag_color
.hljs-subst
color hljs_subst_color if hljs_subst_color
.hljs-section
color hljs_section_color if hljs_section_color
font-weight 700
.hljs-bullet
color hljs_bullet_color if hljs_bullet_color
.hljs-emphasis
color hljs_emphasis_color if hljs_emphasis_color
font-style italic
.hljs-strong
color hljs_strong_color if hljs_strong_color
font-weight 700
.hljs-addition
color hljs_addition_color if hljs_addition_color
background-color hljs_addition_bg_color if hljs_addition_bg_color
.hljs-deletion
color hljs_deletion_color if hljs_deletion_color
background-color hljs_deletion_bg_color if hljs_deletion_bg_color
// 修改 Sweetalert 弹窗样式
swal-patch()
.swal2-popup
&:not([style*='transparent'])
acrylic-bg()
h1, h2, h3, h4, h5, h6
color post_heading_color !important
color text_color !important
.swal2-content
color text_color !important
// 一些带动画的图标
// 选择器只写了一半是因为逆天 Stylus 编译器会把逗号当作选择器
.swal2-icon > *[style*='rgba(0'],
.swal2-icon > *[style*='rgba(255']
background none !important
.swal2-success-ring
border-color line_color
cseditor-patch()
.cs-main,
.cs-header
font-family font-stack-codeblock
background rgba(acrylic_bg_color,1) !important
.cs-toolbar
& > div > span > span > span > svg
border none !important
color text_color
&:hover
color link_hover_color !important
background link_hover_bg_color !important
.cs-content
background: #2B2B2B !important;
.cs-main { background: #2B2B2B !important; color: #A9B7C6!important; }
span.ͼ7 {color: #A9B7C6!important;}
span.cs-meta { color: #BBB529!important; }
span.cs-number { color: #6897BB!important; }
span.cs-keyword { color: #CC7832!important; line-height: 1em!important; font-weight: bold!important; }
span.cs-def { color: #A9B7C6!important; font-style: italic!important; }
span.cs-variable { color: #A9B7C6!important; }
span.cs-variable-2 { color: #A9B7C6!important; }
span.cs-variable-3 { color: #9876AA!important; }
span.cs-type { color: #AABBCC!important; font-weight: bold!important; }
span.cs-property { color: #FFC66D!important; }
span.cs-operator { color: #A9B7C6!important; }
span.cs-string { color: #6A8759!important; }
span.cs-string-2 { color: #6A8759!important; }
span.ͼ5, span.ͼc { color: #61A151!important; font-style: italic!important; }
span.cs-link { color: #CC7832!important; }
span.cs-atom { color: #CC7832!important; }
span.cs-error { color: #BC3F3C!important; }
span.cs-tag { color: #629755!important; font-weight: bold!important; font-style: italic!important; text-decoration: underline!important; }
span.cs-attribute { color: #6897bb!important; }
span.cs-qualifier { color: #6A8759!important; }
span.cs-bracket { color: #A9B7C6!important; }
span.cs-builtin { color: #FF9E59!important; }
span.cs-special { color: #FF9E59!important; }
span.cs-matchhighlight { color: #FFFFFF!important; background-color: rgba(50, 89, 48, .7)!important; font-weight: normal!important;}
span.cs-searching { color: #FFFFFF!important; background-color: rgba(61, 115, 59, .7)!important; font-weight: normal!important;}
.cm-cursor { border-left: 1px solid #A9B7C6!important; }
.cs-activeline-background { background: #323232!important; }
.cm-gutters, .cm-activeLineGutter { background: #313335!important; border-right: 1px solid #313335!important; }
.cm-guttermarker { color: #FFEE80!important; }
.cm-guttermarker-subtle { color: #D0D0D0!important; }
.cs-linenumber { color: #606366!important; }
.cs-matchingbracket { background-color: #3B514D!important; color: #FFEF28 !important; font-weight: bold!important; }
div.cs-selected { background: #214283!important; }
.cm-hints {
color: #9C9E9E!important;
background-color: #3B3E3F !important;
}
.cm-hints .cm-hint-active {
background-color: #494D4E !important;
color: #9C9E9E !important;
}
.cs-footer
acrylic-bg()
mdeditor-patch()
#app:has(.cs-full-screen) > *:not(.main-container)
.main-container:has(.cs-full-screen) footer
div:has(.cs-full-screen) + *
display none
div:has(.cs-full-screen)
position fixed !important
top 0
bottom 0
left 0
right 0
.mp-editor-container
.mp-editor-toolbar
acrylic-bg()
.mp-editor-menu > li > *
border none !important
&:hover
color link_hover_color !important
background link_hover_bg_color !important
.mp-divider
color line_color !important
.ͼ1 .cm-scroller
font-family font-stack-codeblock
if dark-mode
cseditor-patch()
// 设置编辑器字体（预览字体跟随全局字体）
.cs-editor
font-family font-stack-codeblock
.CodeMirror
font-family font-stack-codeblock
.mp-preview-area
acrylic-bg()
.mp-preview-content
color text_color !important
markdown-patch()
& > pre
padding 5pt 5pt 5pt 5pt
border-radius 5px
border-color line_color
main.mobile-body.lfe-body
z-index 1 !important
.radio-group > *
color sec_text_color !important
/* 全局样式 */
@-moz-document regexp("^(https?://www.luogu.com(.cn)?/).*")
// 页面展示动画
@keyframes show
0%
transform translateY(1em)
100%
transform translateY(0em)
// 页面内部小卡片展示动画
@keyframes inner-show
0%
transform translateY(0.2em)
100%
transform translateY(0em)
// 题目标题，讨论标题展示动画
@keyframes title-show
0%
transform translateX(-0.2em)
100%
transform translateX(0m)
// 输入框选中动画
@keyframes textarea-checked
0%
transform scale(1)
30%
transform scale(1.01)
70%
transform scale(0.99)
100%
transform scale(1)
// 头像悬浮动画
@keyframes avatar-hover
0%
transform scale(1)
33%
transform scale(1.01)
66%
transform scale(0.99)
100%
transform scale(1)
// 所有的文字强制折行
*
word-wrap break-word
word-break break-all
.row
.header
.dropdown
.dropdown .center
.cs-main
.cs-header
.cs-footer
.cs-editor
.mp-editor-container
.mp-editor-ground
.mp-editor-zone
.card
.l-card
border-color line_color !important
// 设置全局背景
body
overflow-x hidden
background body_bg_color
// 全局平滑滚动属性
html, body
scroll-behavior smooth
// 滚动条样式
::-webkit-scrollbar
background scrollbar_track_color
width 7px
::-webkit-scrollbar-thumb
background scrollbar_thumb_color
::-webkit-scrollbar-thumb:hover
background scrollbar_hover_color
::-webkit-scrollbar-corner
background-color transparent
// 这个字体必须改在这里
// body 会被洛谷字体（.lfe-body）覆盖
// 星号会把数学字体干掉
.lfe-body
font-family font-stack, sans-serif !important
code, .hljs
font-family font-stack-codeblock, monospace !important
// Markdown 渲染
mdeditor-patch()
// 背景修改
body
background main-background
background-repeat no-repeat
background-size cover
background-position center
background-attachment fixed
// 输入框样式修改
input[type=text]:not(.el-input *), input[type=password]:not(.el-input *)
color sec_text_color !important
background none !important
border sec_text_color 1px solid !important
border-radius 6px !important
&:focus
border-color var(--l-simple-select--color,var(--lfe-color--primary,#3498db)) !important
box-shadow none !important
background none !important
&::placeholder
color sec_text_color
// 专栏查询框样式修改
.refined-input
background transparent !important
border-color transparent !important
// 输入框样式修改
textarea
color post_text_color !important
font-family font-stack
background none !important
border sec_text_color 1px solid !important
border-radius 6px !important
&:focus
border-color var(--l-simple-select--color,var(--lfe-color--primary,#3498db)) !important
box-shadow none !important
background none !important
if animations
animation .3s linear 0s textarea-checked
// 输入框默认文字信息
*::placeholder, .lfe-placeholder
color sec_text_color !important
// 题目列表的难度选择框等
.combo-wrapper
& > .text
color post_text_color !important
background none !important
border sec_text_color 1px solid !important
font-family font-stack
svg
color post_text_color !important
// 算法/来源/时间/状态 按钮样式
button.select-button[style="border-color: rgb(191\, 191\, 191); color: rgb(191\, 191\, 191); background-color: rgba(191\, 191\, 191\, 0);"]
color sec_text_color !important
background none !important
border sec_text_color 1px solid !important
// 选择框掉出来的下拉框
.dropdown:not([style^="--dropdown-z-index: 1005;"])
acrylic()
color sec_text_color !important
border none !important
font-family font-stack
& > ul > li:hover
background button_hover_bg_color !important
.user-stat-data > div > div > span
color sec_text_color !important
// 删除广告
if remove-ad
.side:not(.card.wrapper.padding-none > .side) > *:last-child:not(.l-card,.card)
display none
// exlg 代码块
.exlg-code-title
acrylic-bg()
// exlg emoji
.exlg-emo
acrylic-bg()
.exlg-emo-btn
background board_color
color text_color
// 解决 exlg 收起 emoji 时和亚克力冲突
.exlg-emo:not(.exlg-show-emo)
display none
// 代码块
pre:not(.CodeMirror-line),
code
background codeblock_bg_color !important
color hljs_base_color !important
font-family font-stack-codeblock !important
.ace_editor
font 14pt/normal font-stack-codeblock !important
// 提交代码样式
if dark-mode
.ace_gutter {
background: #25282c !important;
color: #C5C8C6 !important
}
.ace_print-margin {
width: 1px !important;
background: #25282c!important
}
.ace_editor {
background-color: #1D1F21 !important;
color: #C5C8C6!important
}
.ace_cursor {
color: #AEAFAD!important
}
.ace_marker-layer .ace_selection {
background: #373B41!important
}
.ace-clouds.ace_multiselect .ace_selection.ace_start {
box-shadow: 0 0 3px 0px #1D1F21!important;
}
.ace_marker-layer .ace_step {
background: rgb(102, 82, 0)!important
}
.ace_marker-layer .ace_bracket {
margin: -1px 0 0 -1px!important;
border: 1px solid #4B4E55!important
}
.ace_marker-layer .ace_active-line {
background: #282A2E!important
}
.ace_gutter-active-line {
background-color: #282A2E!important
}
.ace_marker-layer .ace_selected-word {
border: 1px solid #373B41!important
}
.ace_invisible {
color: #4B4E55!important
}
.ace_keyword,
.ace_meta,
.ace_storage,
.ace_storage.ace_type,
.ace_support.ace_type {
color: #B294BB!important
}
.ace_keyword.ace_operator {
color: #8ABEB7!important!important
}
.ace_constant.ace_character,
.ace_constant.ace_language,
.ace_constant.ace_numeric,
.ace_keyword.ace_other.ace_unit,
.ace_support.ace_constant,
.ace_variable.ace_parameter {
color: #DE935F!important
}
.ace_constant.ace_other {
color: #CED1CF!important
}
.ace_invalid {
color: #CED2CF!important;
background-color: #DF5F5F!important
}
.ace_invalid.ace_deprecated {
color: #CED2CF!important;
background-color: #B798BF!important
}
.ace_fold {
background-color: #81A2BE!important;
border-color: #C5C8C6!important
}
.ace_entity.ace_name.ace_function,
.ace_support.ace_function,
.ace_variable {
color: #81A2BE!important
}
.ace_support.ace_class,
.ace_support.ace_type {
color: #F0C674!important
}
.ace_heading,
.ace_markup.ace_heading,
.ace_string {
color: #B5BD68!important
}
.ace_entity.ace_name.ace_tag,
.ace_entity.ace_other.ace_attribute-name,
.ace_meta.ace_tag,
.ace_string.ace_regexp,
.ace_variable {
color: #CC6666!important
}
.ace_comment {
color: #969896!important
}
.ace_indent-guide {
background: url("https://cdn.jsdelivr.net/npm/[email protected]/css/tomorrow_night-1.png") right repeat-y!important
}
.CodeMirror { background: #2B2B2B !important; color: #A9B7C6!important; }
span.cm-header {color: #A9B7C6!important;}
span.cm-meta { color: #BBB529!important; }
span.cm-number { color: #6897BB!important; }
span.cm-keyword { color: #CC7832!important; line-height: 1em!important; font-weight: bold!important; }
span.cm-def { color: #A9B7C6!important; font-style: italic!important; }
span.cm-variable { color: #A9B7C6!important; }
span.cm-variable-2 { color: #A9B7C6!important; }
span.cm-variable-3 { color: #9876AA!important; }
span.cm-type { color: #AABBCC!important; font-weight: bold!important; }
span.cm-property { color: #FFC66D!important; }
span.cm-operator { color: #A9B7C6!important; }
span.cm-string { color: #6A8759!important; }
span.cm-string-2 { color: #6A8759!important; }
span.cm-comment { color: #61A151!important; font-style: italic!important; }
span.cm-link { color: #CC7832!important; }
span.cm-atom { color: #CC7832!important; }
span.cm-error { color: #BC3F3C!important; }
span.cm-tag { color: #629755!important; font-weight: bold!important; font-style: italic!important; text-decoration: underline!important; }
span.cm-attribute { color: #6897bb!important; }
span.cm-qualifier { color: #6A8759!important; }
span.cm-bracket { color: #A9B7C6!important; }
span.cm-builtin { color: #FF9E59!important; }
span.cm-special { color: #FF9E59!important; }
span.cm-matchhighlight { color: #FFFFFF!important; background-color: rgba(50, 89, 48, .7)!important; font-weight: normal!important;}
span.cm-searching { color: #FFFFFF!important; background-color: rgba(61, 115, 59, .7)!important; font-weight: normal!important;}
.CodeMirror-cursor { border-left: 1px solid #A9B7C6!important; }
.CodeMirror-activeline-background { background: #323232!important; }
.CodeMirror-gutters { background: #313335!important; border-right: 1px solid #313335!important; }
.CodeMirror-guttermarker { color: #FFEE80!important; }
.CodeMirror-guttermarker-subtle { color: #D0D0D0!important; }
.CodeMirrir-linenumber { color: #606366!important; }
.CodeMirror-matchingbracket { background-color: #3B514D!important; color: #FFEF28 !important; font-weight: bold!important; }
div.CodeMirror-selected { background: #214283!important; }
.CodeMirror-hints {
color: #9C9E9E!important;
background-color: #3B3E3F !important;
}
.CodeMirror-hints .CodeMirror-hint-active {
background-color: #494D4E !important;
color: #9C9E9E !important;
}
// 旋转动画
div[style="width: 64px; height: 64px; border-width: 4px;"]
border-color text_color text_color #fff0 text_color !important
border-left none
// 分数线
.frac-line
border-color text_color !important
// 即将离开洛谷样式
div[style*="margin: 0 auto; width: 100vw; padding: 2em 0; box-sizing: border-box; max-width: 680px; height: 100%; min-height: 100vh; display: flex; flex-flow: column; justify-content: center;"] > .card
acrylic-bg()
border-radius 6px
& > pre
color hljs_base_color !important
border 1px solid line_color !important
border-radius 6px
& > h3,
& > p
color text_color
// 解决 AT 超长题号导致换行的bug
span[data-v-beeebc6e][title]
color text_color !important
white-space nowrap !important
// 解决洛谷讨论区 footer 没有沉底
.footer
padding-bottom 1.5em !important
// 复选框样式
svg[data-icon="square"]
color sec_text_color !important
svg[data-icon="square"]:hover
color link_hover_color !important
// 页面展示动画
main
.inner-card
if animations
animation 1s ease 0s show
.info-card
overflow-y visible !important
// 解决更多功能按钮背景颜色切换过快
#app > nav.lfe-body .popup a
.dropdown .center .ops a
if animations
transition background .3s
.dropdown .center .ops a
border-radius 6px
// 文字颜色变化
if animations
a
if animations
transition color .3s
// 头像悬浮动画
img[src^="https://cdn.luogu.com.cn/upload/usericon/"]:hover
if animations
animation avatar-hover .5s linear
// 给悬浮在名字上面是出现的卡片加上圆角
.dropdown.shown div .user-header-top
border-radius 6px 6px 0 0
.dropdown.shown div .user-info
border-radius 0 0 6px 6px
// 字体问题
.dropdown.shown div .user-info *
font-family font-stack !important
// 洛谷日爆样式
.page:has(.page-bottom)
margin-top 1em
padding-bottom 2em
padding-top 2em
border-radius 6px
acrylic-bg()
max-width 50vw
& *
max-width 50vw
color text_color
// 翻页条
.page-bar
background transparent !important
button
background board_color !important
border-color line_color !important
&:not(.selected)
background transparent !important
&.selected
& > span
color navbar_text_color !important
span
color sec_text_color !important
img
filter invert(1) !important
.dropdown > .card
margin-bottom 0
.modal p
color text_color
font-family font-stack !important
div#p.O
acrylic()
position: relative
padding: 2em 2em 0.5em 2em
color text_color
// 主站
@-moz-document regexp("^(https?://www.luogu.com(.cn)?/)(?!(article|problem/solution/|ranking|discuss)).*")
/* 页面布局 */
// 覆盖掉洛谷主题自带的背景
// 这几个排除是 mask
.background
background none !important
filter none !important
// sweetalert2样式
swal-patch()
// 顶栏样式
body > .header
acrylic-bg() if header-acrylic
.header-layout
if header-acrylic
acrylic()
else
background board_color
// background navbar_bg_color unless header-acrylic
color subtitle_color !important
.header > h1 // 导航栏标题大字
font-size 50px
color #ffffff
.functional // 题目页面的按钮和时限栏
padding-top .7em // 这样不会显得离边太近
.stat > .color-inverse > .field
// 无亚克力时 sec_text_color 太深看不清
border-left-color subtitle_color !important if header-acrylic
color #fff !important if header-acrylic
border-left-color #fff !important if header-acrylic
// 题目页面的 header-layout
.header-layout.normal[data-v-7ddab1d5]
height auto !important // 覆盖原有的固定高度，否则标题放不下
padding-bottom .7em // 防止时限栏距离边缘太近
a:hover
color post_link_color
// 讨论区/题解 的 header-layout
.header-layout.narrow[data-v-7ddab1d5]
height auto !important
a:hover
color post_link_color
// 首页的 headey-layout
.header-layout.tiny[data-v-7ddab1d5]
acrylic() if header-acrylic
background navbar_bg_color !important unless header-acrylic
color subtitle_color !important
a
color post_text_color
&:hover
color post_link_color
// 头像悬浮
.center
color post_text_color
acrylic-bg()
border none
.ops > a.color-none:hover
background button_hover_bg_color
// 页面主体（所有卡片的容器）
main.lfe-body
background none !important
.selected:not(.tag) > span
color sec_text_color !important
// 首页
#app-old
color post_text_color
.lg-article // 一堆块
if card-acrylic
acrylic-bg(0.6,20px)
else
background board_color !important
border-radius 5px
.am-hide-sm // 为啥要为友情链接单独设置一个字体颜色？而且这个颜色覆盖到了做题计划分数和对勾的颜色了
strong //「友情链接」
color post_heading_color !important
.am-panel // 块里的块
if anymore-acrylic
acrylic-bg(0.5,0)
border none
else
background board_color !important
.highcharts-root
tspan
// 我也不知道为什么这个颜色不会变
// 随它去吧，反正我改了
color sec_text_color !important
.feed-selector > a // 「我关注的」「我发布的」
border-radius 6px
&:hover
background button_hover_bg_color
color sec_text_color
#feed // 犇犇
.am-comment-hd, .am-comment-bd // 上半个
background none
.am-comment-avatar
border none !important
.am-comment-main:before, .am-comment-main:after
display none // 隐藏犇犇箭头
.am-comment-main
border none !important
border-radius 6px
if card-acrylic
acrylic-bg(0.6,10px,true)
else
background board_color !important
.feed-comment
markdown-patch() // 为什么犇犇里面能渲染代码块
// 卡片样式处理
body > div > .card
border-radius 6px
// 卡片背景材质
if card-acrylic
acrylic-bg(0.6,20px)
else
background board_color !important
color post_text_color !important
position relative
&:hover
if card-acrylic
acrylic(0.6,20px)
else
background board_color !important
.card:not(body > div > .card)
border-radius 6px
// 卡片背景材质
if card-acrylic
acrylic(0.6,20px)
else
background board_color !important
color post_text_color !important
position relative
markdown-patch()
// 「提交记录」「查看题解」等超链接按钮
a.color-default
color post_link_color !important
border-radius 2px // 这些背景相关属性在设置 link_hover_bg_color 后才生效
box-sizing border-box
padding 3px