Discuz! 美化你的电脑小黑屋

Discuz! 美化你的电脑小黑屋

Discuz! 美化你的电脑小黑屋

1、把下面的代码添加到 common/common.css 的最下边：

1. /* Darkroom Container */
   
2. .darkroom-container {
   
3.     max-width: 1200px;
   
4.     margin: 0 auto;
   
5.     padding: 20px 20px 0;
   
6.     min-height: calc(100vh - 200px);
   
7.     display: flex;
   
8.     flex-direction: column;
   
9. }
   
10. 
    
11. /* Header Styles */
    
12. .darkroom-header {
    
13.     background: #155bd5;
    
14.     border-radius: 12px;
    
15.     padding: 30px;
    
16.     color: #fff;
    
17.     position: relative;
    
18.     overflow: hidden;
    
19.     margin-bottom: 30px;
    
20. }
    
21. 
    
22. .darkroom-title {
    
23.     position: relative;
    
24.     z-index: 2;
    
25. }
    
26. 
    
27. .title-wrapper {
    
28.     display: flex;
    
29.     justify-content: space-between;
    
30.     align-items: center;
    
31.     margin-bottom: 10px;
    
32. }
    
33. 
    
34. .darkroom-title h1 {
    
35.     font-size: 24px;
    
36.     margin: 0;
    
37.     display: flex;
    
38.     align-items: center;
    
39.     gap: 10px;
    
40. }
    
41. 
    
42. .current-count {
    
43.     background: rgba(255, 255, 255, 0.2);
    
44.     padding: 6px 12px;
    
45.     border-radius: 20px;
    
46.     font-size: 15px;
    
47.     font-weight: 500;
    
48.     display: flex;
    
49.     align-items: center;
    
50.     gap: 5px;
    
51.     backdrop-filter: blur(5px);
    
52.     -webkit-backdrop-filter: blur(5px);
    
53.     transition: all 0.3s ease;
    
54. }
    
55. 
    
56. .current-count:before {
    
57.     content: '';
    
58.     display: inline-block;
    
59.     width: 8px;
    
60.     height: 8px;
    
61.     background: #fff;
    
62.     border-radius: 50%;
    
63.     margin-right: 5px;
    
64.     animation: pulse 2s infinite;
    
65. }
    
66. 
    
67. @keyframes pulse {
    
68.     0% {
    
69.         transform: scale(0.95);
    
70.         box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    
71.     }
    
72.    
    
73.     70% {
    
74.         transform: scale(1);
    
75.         box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
    
76.     }
    
77.    
    
78.     100% {
    
79.         transform: scale(0.95);
    
80.         box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    
81.     }
    
82. }
    
83. 
    
84. .darkroom-title p {
    
85.     margin: 0;
    
86.     opacity: 0.8;
    
87.     font-size: 14px;
    
88. }
    
89. 
    
90. .darkroom-waves {
    
91.     position: absolute;
    
92.     bottom: 0;
    
93.     left: 0;
    
94.     right: 0;
    
95.     height: 40px;
    
96.     overflow: hidden;
    
97. }
    
98. 
    
99. .wave {
    
100.     position: absolute;
     
101.     width: 200%;
     
102.     height: 100%;
     
103.     background: rgba(255, 255, 255, 0.1);
     
104.     border-radius: 50%;
     
105. }
     
106. 
     
107. .wave1 {
     
108.     animation: wave 10s linear infinite;
     
109.     bottom: -25px;
     
110.     opacity: 0.3;
     
111. }
     
112. 
     
113. .wave2 {
     
114.     animation: wave 8s linear infinite;
     
115.     bottom: -35px;
     
116.     opacity: 0.2;
     
117. }
     
118. 
     
119. @keyframes wave {
     
120.     0% { transform: translateX(0); }
     
121.     100% { transform: translateX(-50%); }
     
122. }
     
123. 
     
124. /* Search Bar */
     
125. .darkroom-search {
     
126.     display: flex;
     
127.     gap: 10px;
     
128.     margin-bottom: 30px;
     
129.     padding: 0 20px;
     
130. }
     
131. 
     
132. .search-input {
     
133.     flex: 1;
     
134.     padding: 12px 15px;
     
135.     border: 1px solid #e0e0e0;
     
136.     border-radius: 8px;
     
137.     font-size: 14px;
     
138.     outline: none;
     
139.     transition: border-color 0.2s;
     
140. }
     
141. 
     
142. .search-input:focus {
     
143.     border-color: #155bd5;
     
144. }
     
145. 
     
146. .search-btn {
     
147.     padding: 0 20px;
     
148.     background: #155bd5;
     
149.     color: #fff;
     
150.     border: none;
     
151.     border-radius: 8px;
     
152.     cursor: pointer;
     
153.     transition: background 0.2s;
     
154.     position: relative;
     
155.     width: 48px;
     
156. }
     
157. 
     
158. .search-btn:hover {
     
159.     background: #1248a8;
     
160. }
     
161. 
     
162. .search-btn i.search-icon {
     
163.     position: absolute;
     
164.     left: 50%;
     
165.     top: 50%;
     
166.     transform: translate(-50%, -50%);
     
167.     width: 20px;
     
168.     height: 20px;
     
169.     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>') no-repeat center;
     
170. }
     
171. 
     
172. /* Content Tabs */
     
173. .content-tabs {
     
174.     display: flex;
     
175.     gap: 20px;
     
176.     margin-bottom: 20px;
     
177.     border-bottom: 1px solid #e0e0e0;
     
178.     padding-bottom: 10px;
     
179. }
     
180. 
     
181. .tab-item {
     
182.     padding: 10px 20px;
     
183.     color: #666;
     
184.     text-decoration: none;
     
185.     font-size: 14px;
     
186.     display: flex;
     
187.     align-items: center;
     
188.     gap: 8px;
     
189.     position: relative;
     
190. }
     
191. 
     
192. .tab-item.current {
     
193.     color: #155bd5;
     
194. }
     
195. 
     
196. .tab-item.current:after {
     
197.     content: '';
     
198.     position: absolute;
     
199.     bottom: -11px;
     
200.     left: 0;
     
201.     right: 0;
     
202.     height: 2px;
     
203.     background: #155bd5;
     
204. }
     
205. 
     
206. /* Darkroom Grid */
     
207. .darkroom-grid {
     
208.     display: grid;
     
209.     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     
210.     gap: 20px;
     
211.     margin-bottom: 30px;
     
212. }
     
213. 
     
214. .darkroom-card {
     
215.     background: #fff;
     
216.     border-radius: 12px;
     
217.     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
     
218.     overflow: hidden;
     
219.     transition: transform 0.2s;
     
220. }
     
221. 
     
222. .darkroom-card:hover {
     
223.     transform: translateY(-2px);
     
224.     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     
225. }
     
226. 
     
227. .card-header {
     
228.     padding: 15px;
     
229.     display: flex;
     
230.     align-items: center;
     
231.     gap: 15px;
     
232.     border-bottom: 1px solid #f0f0f0;
     
233. }
     
234. 
     
235. .user-avatar {
     
236.     position: relative;
     
237.     width: 50px;
     
238.     height: 50px;
     
239.     border-radius: 50%;
     
240.     overflow: hidden;
     
241.     flex-shrink: 0;
     
242. }
     
243. 
     
244. .darkroom-overlay {
     
245.     position: absolute;
     
246.     top: 0;
     
247.     left: 0;
     
248.     right: 0;
     
249.     bottom: 0;
     
250.     background: rgba(0, 0, 0, 0.3);
     
251. }
     
252. 
     
253. .user-info {
     
254.     min-width: 0;
     
255.     flex-shrink: 1;
     
256. }
     
257. 
     
258. .user-info h3 {
     
259.     margin: 0 0 5px;
     
260.     font-size: 16px;
     
261. }
     
262. 
     
263. .user-tags {
     
264.     display: flex;
     
265.     gap: 5px;
     
266. }
     
267. 
     
268. .tag {
     
269.     padding: 2px 8px;
     
270.     border-radius: 4px;
     
271.     font-size: 12px;
     
272. }
     
273. 
     
274. .status-tag {
     
275.     background: rgba(21, 91, 213, 0.1);
     
276.     color: #155bd5;
     
277. }
     
278. 
     
279. .permanent-tag {
     
280.     background: rgba(244, 67, 54, 0.1);
     
281.     color: #f44336;
     
282. }
     
283. 
     
284. .card-meta {
     
285.     margin-left: auto;
     
286.     margin-right: 15px;
     
287.     text-align: right;
     
288.     font-size: 13px;
     
289.     color: #666;
     
290. }
     
291. 
     
292. .meta-item {
     
293.     display: flex;
     
294.     align-items: center;
     
295.     justify-content: flex-end;
     
296.     gap: 6px;
     
297.     margin-bottom: 6px;
     
298. }
     
299. 
     
300. .meta-item:last-child {
     
301.     margin-bottom: 0;
     
302. }
     
303. 
     
304. .meta-item i {
     
305.     width: 14px;
     
306.     height: 14px;
     
307.     opacity: 0.7;
     
308. }
     
309. 
     
310. .meta-item a {
     
311.     color: #155bd5;
     
312.     text-decoration: none;
     
313. }
     
314. 
     
315. .meta-item a:hover {
     
316.     text-decoration: underline;
     
317. }
     
318. 
     
319. .card-actions {
     
320.     display: flex;
     
321.     gap: 5px;
     
322.     flex-shrink: 0;
     
323. }
     
324. 
     
325. .action-btn {
     
326.     width: 30px;
     
327.     height: 30px;
     
328.     border-radius: 6px;
     
329.     display: flex;
     
330.     align-items: center;
     
331.     justify-content: center;
     
332.     color: #666;
     
333.     transition: all 0.2s;
     
334. }
     
335. 
     
336. .action-btn:hover {
     
337.     background: rgba(21, 91, 213, 0.1);
     
338.     color: #155bd5;
     
339. }
     
340. 
     
341. .action-btn.active {
     
342.     background: #155bd5;
     
343.     color: #fff;
     
344. }
     
345. 
     
346. .card-body {
     
347.     padding: 20px;
     
348. }
     
349. 
     
350. .info-item {
     
351.     display: flex;
     
352.     align-items: center;
     
353.     gap: 8px;
     
354.     margin-bottom: 10px;
     
355.     font-size: 13px;
     
356.     color: #666;
     
357. }
     
358. 
     
359. .info-item:last-child {
     
360.     margin-bottom: 0;
     
361. }
     
362. 
     
363. /* Empty State */
     
364. .darkroom-empty {
     
365.     text-align: center;
     
366.     padding: 40px 20px;
     
367.     color: #666;
     
368.     animation: fadeIn 0.3s ease-out;
     
369.     display: flex;
     
370.     flex-direction: column;
     
371.     align-items: center;
     
372.     justify-content: center;
     
373.     flex: 1;
     
374. }
     
375. 
     
376. .empty-icon {
     
377.     width: 120px;
     
378.     height: 120px;
     
379.     margin: 0 auto 30px;
     
380.     opacity: 0.2;
     
381.     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666666"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V6h16v12z"/><path d="M12 9c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zm0 4c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"/></svg>') no-repeat center;
     
382. }
     
383. 
     
384. .darkroom-empty h3 {
     
385.     margin: 0 0 15px;
     
386.     font-size: 20px;
     
387.     color: #333;
     
388. }
     
389. 
     
390. .darkroom-empty p {
     
391.     margin: 0;
     
392.     font-size: 14px;
     
393.     color: #999;
     
394.     line-height: 1.6;
     
395. }
     
396. 
     
397. @keyframes fadeIn {
     
398.     from {
     
399.         opacity: 0;
     
400.         transform: translateY(20px);
     
401.     }
     
402.     to {
     
403.         opacity: 1;
     
404.         transform: translateY(0);
     
405.     }
     
406. }
     
407. 
     
408. /* Settings Panel */
     
409. .settings-grid {
     
410.     display: grid;
     
411.     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
     
412.     gap: 20px;
     
413. }
     
414. 
     
415. .setting-card {
     
416.     background: #fff;
     
417.     border-radius: 12px;
     
418.     padding: 20px;
     
419.     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
     
420. }
     
421. 
     
422. .setting-card h3 {
     
423.     margin: 0 0 15px;
     
424.     font-size: 16px;
     
425. }
     
426. 
     
427. .form-item {
     
428.     margin-bottom: 15px;
     
429.     display: flex;
     
430.     align-items: center;
     
431.     justify-content: space-between;
     
432. }
     
433. 
     
434. .form-item label {
     
435.     font-size: 14px;
     
436.     color: #666;
     
437. }
     
438. 
     
439. .form-item input[type="number"] {
     
440.     width: 80px;
     
441.     padding: 6px;
     
442.     border: 1px solid #e0e0e0;
     
443.     border-radius: 4px;
     
444.     outline: none;
     
445. }
     
446. 
     
447. .switch-btn {
     
448.     width: 40px;
     
449.     height: 20px;
     
450.     background: #e0e0e0;
     
451.     border-radius: 10px;
     
452.     position: relative;
     
453.     cursor: pointer;
     
454.     transition: background 0.2s;
     
455. }
     
456. 
     
457. .switch-btn:before {
     
458.     content: '';
     
459.     position: absolute;
     
460.     width: 16px;
     
461.     height: 16px;
     
462.     background: #fff;
     
463.     border-radius: 50%;
     
464.     top: 2px;
     
465.     left: 2px;
     
466.     transition: transform 0.2s;
     
467. }
     
468. 
     
469. .switch-btn.active {
     
470.     background: #155bd5;
     
471. }
     
472. 
     
473. .switch-btn.active:before {
     
474.     transform: translateX(20px);
     
475. }
     
476. 
     
477. /* Responsive Design */
     
478. @media (max-width: 768px) {
     
479.     .darkroom-grid {
     
480.         grid-template-columns: 1fr;
     
481.     }
     
482.    
     
483.     .settings-grid {
     
484.         grid-template-columns: 1fr;
     
485.     }
     
486.    
     
487.     .darkroom-empty {
     
488.         padding: 60px 20px;
     
489.         min-height: 200px;
     
490.     }
     
491.    
     
492.     .empty-icon {
     
493.         width: 80px;
     
494.         height: 80px;
     
495.         margin-bottom: 20px;
     
496.     }
     
497. }
     
498. 
     
499. @media (max-width: 480px) {
     
500.     .content-tabs {
     
501.         overflow-x: auto;
     
502.         padding-bottom: 5px;
     
503.     }
     
504.    
     
505.     .tab-item {
     
506.         white-space: nowrap;
     
507.     }
     
508. }
     
509. 
     
510. /* Icons */
     
511. .darkroom-icon {
     
512.     width: 28px;
     
513.     height: 28px;
     
514.     display: inline-block;
     
515.     margin-right: 8px;
     
516.     position: relative;
     
517.     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-3.03 0-5.5-2.47-5.5-5.5 0-1.82.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z"/></svg>') no-repeat center;
     
518.     transform-origin: center;
     
519.     animation: iconFloat 3s ease-in-out infinite;
     
520. }
     
521. 
     
522. .darkroom-icon:after {
     
523.     content: '';
     
524.     position: absolute;
     
525.     width: 100%;
     
526.     height: 100%;
     
527.     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(255,255,255,0.3)"><path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-3.03 0-5.5-2.47-5.5-5.5 0-1.82.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z"/></svg>') no-repeat center;
     
528.     transform: scale(1.2);
     
529.     opacity: 0;
     
530.     animation: iconGlow 3s ease-in-out infinite;
     
531. }
     
532. 
     
533. @keyframes iconFloat {
     
534.     0%, 100% {
     
535.         transform: translateY(0);
     
536.     }
     
537.     50% {
     
538.         transform: translateY(-4px);
     
539.     }
     
540. }
     
541. 
     
542. @keyframes iconGlow {
     
543.     0%, 100% {
     
544.         transform: scale(1.2);
     
545.         opacity: 0;
     
546.     }
     
547.     50% {
     
548.         transform: scale(1.5);
     
549.         opacity: 0.5;
     
550.     }
     
551. }
     
552. 
     
553. .list-icon {
     
554.     width: 18px;
     
555.     height: 18px;
     
556.     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/></svg>') no-repeat center;
     
557. }
     
558. 
     
559. .settings-icon {
     
560.     width: 18px;
     
561.     height: 18px;
     
562.     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>') no-repeat center;
     
563. }
     
564. 
     
565. .time-icon {
     
566.     width: 16px;
     
567.     height: 16px;
     
568.     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666666"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>') no-repeat center;
     
569. }
     
570. 
     
571. .calendar-icon {
     
572.     width: 16px;
     
573.     height: 16px;
     
574.     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666666"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zm-7-9h5v5h-5z"/></svg>') no-repeat center;
     
575. }
     
576. 
     
577. .judge-icon {
     
578.     width: 16px;
     
579.     height: 16px;
     
580.     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666666"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>') no-repeat center;
     
581. }
     
582. 
     
583. .reason-icon {
     
584.     width: 16px;
     
585.     height: 16px;
     
586.     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666666"><path d="M14 17H4v2h10v-2zm6-8H4v2h16V9zM4 15h16v-2H4v2zM4 5v2h16V5H4z"/></svg>') no-repeat center;
     
587. }
     
588. 
     
589. .detail-icon {
     
590.     width: 16px;
     
591.     height: 16px;
     
592.     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>') no-repeat center;
     
593. }
     
594. 
     
595. .edit-icon {
     
596.     width: 16px;
     
597.     height: 16px;
     
598.     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>') no-repeat center;
     
599. }
     
600. 
     
601. .unlock-icon {
     
602.     width: 16px;
     
603.     height: 16px;
     
604.     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 17c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6h1.9c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm0 12H6V10h12v10z"/></svg>') no-repeat center;
     
605. }
     
606. 
     
607. .more-icon {
     
608.     width: 16px;
     
609.     height: 16px;
     
610.     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>') no-repeat center;
     
611. }
     
612. 
     
613. /* Content Area */
     
614. .darkroom-content {
     
615.     flex: 1;
     
616.     display: flex;
     
617.     flex-direction: column;
     
618. }
     
619. 
     
620. .content-panel {
     
621.     flex: 1;
     
622.     display: flex;
     
623.     flex-direction: column;
     
624. }
     
625. 
     
626. /* Modal Styles */
     
627. .darkroom-modal {
     
628.     position: fixed;
     
629.     top: 0;
     
630.     left: 0;
     
631.     right: 0;
     
632.     bottom: 0;
     
633.     z-index: 1000;
     
634.     display: none;
     
635. }
     
636. 
     
637. .darkroom-modal.show {
     
638.     display: block;
     
639. }
     
640. 
     
641. .modal-overlay {
     
642.     position: absolute;
     
643.     top: 0;
     
644.     left: 0;
     
645.     right: 0;
     
646.     bottom: 0;
     
647.     background: rgba(0, 0, 0, 0.5);
     
648.     backdrop-filter: blur(5px);
     
649.     -webkit-backdrop-filter: blur(5px);
     
650. }
     
651. 
     
652. .modal-container {
     
653.     position: absolute;
     
654.     top: 50%;
     
655.     left: 50%;
     
656.     transform: translate(-50%, -50%);
     
657.     background: #fff;
     
658.     border-radius: 12px;
     
659.     width: 90%;
     
660.     max-width: 600px;
     
661.     max-height: 90vh;
     
662.     overflow-y: auto;
     
663.     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
     
664.     animation: modalShow 0.3s ease-out;
     
665. }
     
666. 
     
667. @keyframes modalShow {
     
668.     from {
     
669.         opacity: 0;
     
670.         transform: translate(-50%, -48%);
     
671.     }
     
672.     to {
     
673.         opacity: 1;
     
674.         transform: translate(-50%, -50%);
     
675.     }
     
676. }
     
677. 
     
678. .modal-header {
     
679.     padding: 20px;
     
680.     border-bottom: 1px solid #f0f0f0;
     
681.     display: flex;
     
682.     justify-content: space-between;
     
683.     align-items: center;
     
684. }
     
685. 
     
686. .modal-header h3 {
     
687.     margin: 0;
     
688.     font-size: 18px;
     
689.     color: #333;
     
690. }
     
691. 
     
692. .modal-close {
     
693.     width: 32px;
     
694.     height: 32px;
     
695.     border: none;
     
696.     background: none;
     
697.     cursor: pointer;
     
698.     border-radius: 50%;
     
699.     display: flex;
     
700.     align-items: center;
     
701.     justify-content: center;
     
702.     transition: background-color 0.2s;
     
703. }
     
704. 
     
705. .modal-close:hover {
     
706.     background: rgba(0, 0, 0, 0.05);
     
707. }
     
708. 
     
709. .close-icon {
     
710.     width: 20px;
     
711.     height: 20px;
     
712.     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666666"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>') no-repeat center;
     
713. }
     
714. 
     
715. .modal-content {
     
716.     padding: 20px;
     
717. }
     
718. 
     
719. .modal-user-info {
     
720.     display: flex;
     
721.     align-items: center;
     
722.     gap: 20px;
     
723.     margin-bottom: 30px;
     
724. }
     
725. 
     
726. .user-avatar-large {
     
727.     width: 80px;
     
728.     height: 80px;
     
729.     border-radius: 50%;
     
730.     overflow: hidden;
     
731.     position: relative;
     
732. }
     
733. 
     
734. .user-avatar-large img {
     
735.     width: 100%;
     
736.     height: 100%;
     
737.     object-fit: cover;
     
738. }
     
739. 
     
740. .user-detail h3 {
     
741.     margin: 0 0 10px;
     
742.     font-size: 20px;
     
743. }
     
744. 
     
745. .punishment-count {
     
746.     display: inline-block;
     
747.     background: rgba(21, 91, 213, 0.1);
     
748.     color: #155bd5;
     
749.     padding: 4px 10px;
     
750.     border-radius: 12px;
     
751.     font-size: 13px;
     
752.     margin-top: 5px;
     
753. }
     
754. 
     
755. .modal-info-list {
     
756.     display: grid;
     
757.     gap: 15px;
     
758. }
     
759. 
     
760. .modal-info-list .info-item {
     
761.     padding: 15px;
     
762.     background: #f8f9fa;
     
763.     border-radius: 8px;
     
764.     margin: 0;
     
765.     transition: background-color 0.2s;
     
766. }
     
767. 
     
768. .modal-info-list .info-item:hover {
     
769.     background: #f0f2f5;
     
770. }
     
771. 
     
772. .modal-info-list .reason {
     
773.     background: #fff3e0;
     
774.     color: #e65100;
     
775. }
     
776. 
     
777. .modal-info-list .reason:hover {
     
778.     background: #ffe0b2;
     
779. }
     
780. 
     
781. @media (max-width: 480px) {
     
782.     .modal-container {
     
783.         width: 95%;
     
784.     }
     
785.    
     
786.     .user-avatar-large {
     
787.         width: 60px;
     
788.         height: 60px;
     
789.     }
     
790.    
     
791.     .modal-content {
     
792.         padding: 15px;
     
793.     }
     
794. }
     
795. 
     
796. /* Card Preview Styles */
     
797. .card-preview {
     
798.     padding: 12px 15px;
     
799.     background: #fff;
     
800.     border-top: 1px solid #f0f0f0;
     
801. }
     
802. 
     
803. .preview-item {
     
804.     display: flex;
     
805.     align-items: center;
     
806.     gap: 8px;
     
807.     margin-bottom: 8px;
     
808.     font-size: 13px;
     
809.     color: #666;
     
810. }
     
811. 
     
812. .preview-item:last-child {
     
813.     margin-bottom: 0;
     
814. }
     
815. 
     
816. .preview-item i {
     
817.     flex-shrink: 0;
     
818. }
     
819. 
     
820. .preview-item a {
     
821.     color: #155bd5;
     
822.     text-decoration: none;
     
823. }
     
824. 
     
825. .preview-item a:hover {
     
826.     text-decoration: underline;
     
827. }
     
828. 
     
829. .reason-preview {
     
830.     background: #f8f9fa;
     
831.     border-radius: 6px;
     
832.     padding: 10px;
     
833. }
     
834. 
     
835. .reason-text {
     
836.     flex: 1;
     
837.     line-height: 1.5;
     
838.     display: -webkit-box;
     
839.     -webkit-line-clamp: 2;
     
840.     -webkit-box-orient: vertical;
     
841.     overflow: hidden;
     
842.     text-overflow: ellipsis;
     
843. }
     
844. 
     
845. @media (max-width: 480px) {
     
846.     .card-preview {
     
847.         padding: 10px 12px;
     
848.     }
     
849.    
     
850.     .preview-item {
     
851.         font-size: 12px;
     
852.     }
     
853. }
     
854. 
     
855. @media (max-width: 640px) {
     
856.     .card-header {
     
857.         flex-wrap: wrap;
     
858.     }
     
859. 
     
860.     .card-meta {
     
861.         order: 3;
     
862.         margin-left: 65px;
     
863.         margin-right: auto;
     
864.         text-align: left;
     
865.         width: 100%;
     
866.         margin-top: 10px;
     
867.     }
     
868. 
     
869.     .meta-item {
     
870.         justify-content: flex-start;
     
871.     }
     
872. 
     
873.     .card-actions {
     
874.         order: 2;
     
875.         margin-left: auto;
     
876.     }
     
877. }

复制代码

2、替换：default\forum\darkroom.htm模板文件，替换之前请您自己备份源文件：

darkroom.rar (3.58 KB, 下载次数: 6)

2025-9-13 23:06 上传

点击文件名下载附件
Discuz! 美化你的电脑小黑屋

文章来源：Discuz! 官方交流社区