blob: d5bb228a2f6e7f3ca7f72046546df60a2af05c35 [file] [log] [blame]
Krishyae71688a2025-04-10 21:25:17 +08001.forum-page {
2 color: #fff;
3 background-color: #2d2d2d;
4 min-height: 100vh;
5 font-family: Arial, sans-serif;
6 }
7
8 .header {
9 display: flex;
10 justify-content: space-between;
11 align-items: center;
12 background: #1f1f1f;
13 padding: 10px 20px;
14 }
15
16 .logo {
17 height: 40px;
18 }
19
20 .site-name {
21 margin-left: 10px;
22 font-size: 24px;
23 }
24
25 .user-avatar {
26 height: 40px;
27 border-radius: 50%;
28 }
29
30 .nav {
31 display: flex;
32 background: #333;
33 padding: 10px 0;
34 }
35
36 .nav-item {
37 color: #ccc;
38 margin: 0 15px;
39 text-decoration: none;
40 }
41
42 .nav-item.active {
43 color: #fff;
44 border-bottom: 2px solid #fff;
45 }
46
47 .forum-content {
48 padding: 20px;
49 }
50
51 .post-list {
52 display: flex;
53 flex-direction: column;
54 gap: 20px;
55 }
56
57 .post-card {
58 background-color: #4A3B34;
59 padding: 15px;
60 border-radius: 10px;
61 position: relative;
62 }
63
64 .post-card-top {
65 display: flex;
66 justify-content: space-between;
67 align-items: center;
68 }
69
70 .user-info {
71 display: flex;
72 align-items: center;
73 }
74
75 .avatar {
76 width: 36px;
77 height: 36px;
78 border-radius: 50%;
79 margin-right: 10px;
80 }
81
82 .nickname {
83 font-weight: bold;
84 }
85
86 .cover-image {
87 max-height: 80px;
88 max-width: 120px;
89 object-fit: cover;
90 border-radius: 6px;
91 }
92
93 .post-meta {
94 font-size: 12px;
95 margin-top: 5px;
96 color: #ddd;
97 }
98
99 .post-actions {
100 display: flex;
101 gap: 15px;
102 margin: 10px 0;
103 }
104
105 .icon-btn {
106 display: flex;
107 align-items: center;
108 gap: 5px;
109 background: none;
110 border: none;
111 color: #fff;
112 cursor: pointer;
113 }
114
115 .btn-secondary {
116 display: inline-block;
117 background: #888;
118 color: #fff;
119 padding: 6px 12px;
120 text-decoration: none;
121 border-radius: 5px;
122 margin-top: 10px;
123 }
124
125 .pagination {
126 margin-top: 20px;
127 display: flex;
128 justify-content: center;
129 gap: 10px;
130 }
131
132 .error-text {
133 color: red;
134 }
135