blob: c47601e0afe3de5c15a4710f5349b634fc068d0b [file] [log] [blame]
Krishya1300cad2025-04-20 22:16:45 +08001 .post-detail-page {
2 background-color: #4b322b;
3 min-height: 100vh;
4 padding: 32px 0;
5 font-family: 'Helvetica Neue', sans-serif;
6 color: #333;
Krishyae71688a2025-04-10 21:25:17 +08007 }
8
Krishya1300cad2025-04-20 22:16:45 +08009 .post-detail {
10 background-color: #e9ded2;
11 border-radius: 16px;
12 max-width: 960px;
13 margin: 0 auto;
14 padding: 24px 32px;
15 }
16
17 .post-detail h1 {
18 font-size: 24px;
19 margin-bottom: 16px;
20 color: #4b322b;
Krishyae71688a2025-04-10 21:25:17 +080021 }
22
23 .post-meta {
Krishya1300cad2025-04-20 22:16:45 +080024 display: flex;
25 justify-content: space-between;
26 font-size: 14px;
27 color: #755e50;
28 margin-bottom: 16px;
Krishyae71688a2025-04-10 21:25:17 +080029 }
30
31 .post-content {
Krishya1300cad2025-04-20 22:16:45 +080032 font-size: 20px;
33 line-height: 1.7;
34 margin-bottom: 20px;
35 color: #4b322b;
Krishyae71688a2025-04-10 21:25:17 +080036 }
37
Krishya1300cad2025-04-20 22:16:45 +080038 /* 多图排列 */
39 .post-content img {
40 max-width: 180px;
Krishyae71688a2025-04-10 21:25:17 +080041 height: auto;
Krishya1300cad2025-04-20 22:16:45 +080042 border-radius: 8px;
43 margin: 8px;
Krishyae71688a2025-04-10 21:25:17 +080044 }
Krishya1300cad2025-04-20 22:16:45 +080045
46 .post-actions {
47 display: flex;
48 gap: 16px;
49 margin-bottom: 24px;
50 margin-left: 710px;
51 }
52
53 .icon-btn {
54 display: flex;
55 align-items: center;
56 gap: 6px;
57 border: none;
58 background: none;
59 cursor: pointer;
60 color: #4b322b;
61 transition: transform 0.2s ease;
62 }
63
64 .icon-btn:hover {
65 background: none !important;
66 color: inherit;
67 outline: none;
68 box-shadow: none;
69 }
70
71 .comments-section {
72 margin-top: -12px;
73 padding: 24px 24px 16px;
74 border-radius: 12px;
75 }
76
77 .comments-section h3 {
78 margin-bottom: 16px;
79 font-size: 20px;
80 color: #4b322b;
81 background-color: #c4b3a3;
82 padding: 6px 12px;
83 border-radius: 8px;
84 display: inline-block;
85 }
86
87 .comment {
88 border-bottom: 1px solid #eee;
89 padding: 12px 0;
90 }
91
92 .comment-header {
93 display: flex;
94 justify-content: space-between;
95 align-items: center;
96 font-size: 0.9rem;
97 color: #555;
98 }
99
100 .comment-user {
101 font-weight: bold;
102 }
103
104 .comment-content {
105 margin: 6px 0;
106 font-size: 1rem;
107 }
108
109 .comment-time {
110 font-size: 0.85rem;
111 color: #999;
112 }
113
114 .reply-btn {
115 background: none;
116 border: none;
117 color: #000000;
118 cursor: pointer;
119 }
120
121 .reply-btn:hover {
122 color: #000000; /* 不变色 */
123 background: none; /* 确保没有背景色 */
124 text-decoration: underline; /* 你可以保留这个,或也删除 */
125 }
126
127 .reply-form,
128 .add-comment-form {
129 margin-top: 12px;
130 }
131
132 textarea {
133 width: 100%;
134 padding: 12px;
135 resize: vertical;
136 min-height: 80px;
137 border: 1px solid #bbb;
138 border-radius: 10px;
139 font-size: 14px;
140 background-color: #fffefb;
141 color: #333;
142 }
143
144 .comment-options {
145 margin-top: 8px;
146 display: flex;
147 align-items: center;
148 justify-content: space-between;
149 }
150
151 .comment-options label {
152 font-size: 14px;
153 color: #555;
154 }
155
156 .comment-options button {
157 padding: 6px 14px;
158 background-color: #BA929A;
159 color: #fff;
160 border: none;
161 border-radius: 6px;
162 font-size: 14px;
163 cursor: pointer;
164 transition: background-color 0.2s ease;
165 }
166
167 .comment-options button:hover {
168 background-color: #6d4e37;
169 }
170
171 .error-text {
172 color: #f00;
173 text-align: center;
174 }
175 .post-images {
176 display: flex;
177 flex-wrap: wrap;
178 justify-content: center;
179 }
180