分享一下我洛谷的stylus样式

1
body {
2
    background: url("https://img.cdn1.vip/i/6a10e0d61d1e4_1779491030.webp") fixed center / cover no-repeat !important;
3
}
4

5
/* 极浅的全屏遮罩（略微压暗背景） */
6
body::before {
7
    content: "";
8
    position: fixed;
9
    top: 0;
10
    left: 0;
11
    width: 100%;
12
    height: 100%;
13
    background-color: rgba(0, 0, 0, 0);
14
    pointer-events: none;
15
    z-index: 9997;
16
}
17

18
/* 主要内容区域透明背景 */
19
.lfe-body,
20
.lfe-main,
21
.lfe-app,
22
.main-container,
23
.content-container,
24
.lfe-content,
25
.card,
26
.panel,
27
.box,
28
.panel-body,
29
.panel-heading,
30
.container,
31
.row > div,
32
[class*="card"],
33
[class*="panel"] {
34
    background-color: rgba(0, 0, 0, 0) !important;
35
    border-radius: 16px;
36
    border: 1px solid rgba(255, 255, 255, 0.08);
37
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
38
}
39

40
/* 题目内容区域稍微深一点，方便阅读 */
41
.problem-content,
42
.problem-card,
43
.lfe-problem,
44
.article-content,
45
.markdown-body {
46
    background-color: rgba(0, 0, 0, 0.25) !important;
47
    border-radius: 20px;
48
    padding: 1.2rem;
49
}
50

51
/* 代码块透明背景 */
52
pre,
53
code,
54
.hljs,
55
.lfe-code-block {
56
    background-color: rgba(0, 0, 0, 0.2) !important;
57
    border-radius: 12px;
58
}
59

60
/* 文字、图标、按钮：透明背景 + 白色文字 */
61
p, span, h1, h2, h3, h4, h5, h6, li, a, label, small, strong, b, em, i,
62
code, pre, button, .btn, input, select, textarea,
63
.icon, .fa, .fas, .far, .fab, svg {
64
    background: transparent !important;
65
    color: #ffffff !important;
66
    border-color: rgba(255, 255, 255, 0.3);
67
}
68

69
/* 链接颜色醒目 */
70
a {
71
    color: #FFDD88 !important;
72
    text-decoration: underline;
73
    text-underline-offset: 3px;
74
}
75
a:hover {
76
    color: #FFB347 !important;
77
}
78

79
/* 按钮样式 */
80
button, .btn, .lfe-button, [role="button"], input[type="submit"], input[type="reset"] {
81
    background: rgba(20, 30, 45, 0.6) !important;
82
    border: 1px solid rgba(255, 200, 100, 0.8) !important;
83
    color: #FFF3DF !important;
84
    border-radius: 40px !important;
85
    font-weight: 500;
86
    transition: 0.2s;
87
    padding: 6px 18px;
88
}
89
button:hover, .btn:hover {
90
    background: rgba(0, 0, 0, 0.7) !important;
91
    border-color: #FFB347 !important;
92
    transform: scale(1.02);
93
}
94

95
/* 输入框样式 */
96
input, select, textarea {
97
    background: rgba(0, 0, 0, 0.3) !important;
98
    border: 1px solid rgba(255, 215, 120, 0.7) !important;
99
    border-radius: 24px !important;
100
    padding: 8px 14px;
101
    color: #fff0 !important;
102
}
103
input:focus, textarea:focus, select:focus {
104
    background: rgba(0, 0, 0, 0.55) !important;
105
    border-color: #F4A261 !important;
106
    outline: none;
107
    box-shadow: 0 0 0 2px rgba(244, 162, 97, 0.3);
108
}
109

110
/* 表格样式 */
111
table, .table {
112
    background-color: transparent !important;
113
}
114
th, td {
115
    background: rgba(0, 0, 0, 0.2) !important;
116
    border: none;
117
    color: #F5F5F5;
118
    padding: 12px;
119
    border-radius: 14px;
120
}
121
th {
122
    background: rgba(0, 0, 0, 0.45) !important;
123
}
124

125
/* 导航栏透明 */
126
.navbar, .header, .lfe-header, .top-bar {
127
    background: rgba(0, 0, 0, 0.2) !important;
128
}
129

130
/* 滚动条样式 */
131
::-webkit-scrollbar {
132
    width: 6px;
133
    background: rgba(0, 0, 0, 0.2);
134
}
135
::-webkit-scrollbar-thumb {
136
    background: rgba(200, 180, 140, 0.6);
137
    border-radius: 12px;
138
}
139

140
/* 洛谷特定元素覆盖 */
141
.lfe-main-container,
142
.lfe-sidebar,
143
.lfe-problem-sidebar,
144
.lfe-ranking-table,
145
.lfe-discuss-list {
146
    background-color: rgba(0, 0, 0, 0) !important;
147
}
148

149
/* 竞赛/作业面板透明 */
150
.lfe-contest-card,
151
.lfe-homework-card {
152
    background-color: rgba(0, 0, 0, 0.15) !important;
153
}
154

155
/* 题解区域透明 */
156
.solution-content,
157
.comment-area {
158
    background-color: rgba(0, 0, 0, 0.2) !important;
159
}
160
body .header-layout.tiny[data-v-7ddab1d5]{
161
    background: rgba(0,0,0,0) !important;
162
}
163
body .lg-article, .lg-article-sub, .lg-article-nctrl{
164
    background: rgba(0,0,0,0.2) !important;
165
}
166
.am-comment-bd{
167
    background: rgba(0,0,0,0.2) !important;
168
}
169
.am-comment-hd{
170
    background: rgba(0,0,0,0.4) !important;
171
}
172
main[data-v-f265fec6]{
173
    background-color: rgba(0,0,0,0) !important;
174
}
175
nav[data-v-a119941e]{
176
    background: rgba(0,0,0,0) !important;
177
}
178
.bottom-wrap.float[data-v-1dd53196]{
179
    background: rgba(0,0,0,0.2) !important;
180
}
181
.combo-wrapper > .text[data-v-dbc33c63]{
182
    background: rgba(0,0,0,0) !important;
183
}
184
.category ul.luogu[data-v-c6a940aa]{
185
     background: rgba(0,0,0,0) !important;
186
}
187
.lcolor-bg-background{
188
    background: rgba(0,0,0,0) !important;
189
}
190
.user-header-bottom[data-v-0403faa2]{
191
    background-color: rgba(0,0,0,0) !important;
192
}
193
.swal2-popup{
194
    background-color: rgba(0,0,0,0) !important;
195
}
196
.user-nav[data-v-8a6f9694]{
197
    background: rgba(0,0,0,0.2) !important;
198
}
199
.center[data-v-1a591deb]{
200
    background: rgba(0,0,0,0.2) !important;
201
}
202
.casket.cs-main{
203
    background: rgba(0,0,0,0.2) !important;
204
}
205
.casket .cs-header{
206
    background: rgba(0,0,0,0.2) !important;
207
}
208
.ͼ2 .cm-gutters{
209
     background: rgba(0,0,0,0.2) !important;
210
}
211
.user-header-bottom[data-v-3c374c4c]{
212
    background: rgba(0,0,0,0.2) !important;
213
}