blob: 65584af30d96c48249c64b6bcf4cea324b9bdcbf [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;
Krishyac0f7e9b2025-04-22 15:28:28 +080015 /* 卡片居中 */
16 margin: 0 auto;
17 margin-top: 40px;
Krishya1300cad2025-04-20 22:16:45 +080018 }
19
20 .post-detail h1 {
21 font-size: 24px;
22 margin-bottom: 16px;
23 color: #4b322b;
Krishyae71688a2025-04-10 21:25:17 +080024 }
25
26 .post-meta {
Krishya1300cad2025-04-20 22:16:45 +080027 display: flex;
28 justify-content: space-between;
29 font-size: 14px;
30 color: #755e50;
31 margin-bottom: 16px;
Krishyae71688a2025-04-10 21:25:17 +080032 }
33
34 .post-content {
Krishya1300cad2025-04-20 22:16:45 +080035 font-size: 20px;
36 line-height: 1.7;
37 margin-bottom: 20px;
38 color: #4b322b;
Krishyae71688a2025-04-10 21:25:17 +080039 }
40
Krishya1300cad2025-04-20 22:16:45 +080041 /* 多图排列 */
42 .post-content img {
43 max-width: 180px;
Krishyae71688a2025-04-10 21:25:17 +080044 height: auto;
Krishya1300cad2025-04-20 22:16:45 +080045 border-radius: 8px;
46 margin: 8px;
Krishyae71688a2025-04-10 21:25:17 +080047 }
Krishya1300cad2025-04-20 22:16:45 +080048
49 .post-actions {
50 display: flex;
51 gap: 16px;
52 margin-bottom: 24px;
Krishyac0f7e9b2025-04-22 15:28:28 +080053 justify-content: flex-end; /*靠右对齐*/
Krishya1300cad2025-04-20 22:16:45 +080054 }
55
56 .icon-btn {
57 display: flex;
58 align-items: center;
59 gap: 6px;
60 border: none;
61 background: none;
62 cursor: pointer;
63 color: #4b322b;
64 transition: transform 0.2s ease;
65 }
66
67 .icon-btn:hover {
68 background: none !important;
69 color: inherit;
70 outline: none;
71 box-shadow: none;
72 }
73
74 .comments-section {
75 margin-top: -12px;
76 padding: 24px 24px 16px;
77 border-radius: 12px;
78 }
79
80 .comments-section h3 {
81 margin-bottom: 16px;
82 font-size: 20px;
83 color: #4b322b;
84 background-color: #c4b3a3;
85 padding: 6px 12px;
86 border-radius: 8px;
87 display: inline-block;
88 }
89
90 .comment {
91 border-bottom: 1px solid #eee;
92 padding: 12px 0;
93 }
94
95 .comment-header {
96 display: flex;
97 justify-content: space-between;
98 align-items: center;
99 font-size: 0.9rem;
100 color: #555;
101 }
102
103 .comment-user {
104 font-weight: bold;
105 }
106
107 .comment-content {
108 margin: 6px 0;
109 font-size: 1rem;
110 }
111
112 .comment-time {
113 font-size: 0.85rem;
114 color: #999;
115 }
116
117 .reply-btn {
118 background: none;
119 border: none;
120 color: #000000;
121 cursor: pointer;
122 }
123
124 .reply-btn:hover {
125 color: #000000; /* 不变色 */
126 background: none; /* 确保没有背景色 */
127 text-decoration: underline; /* 你可以保留这个,或也删除 */
128 }
129
130 .reply-form,
131 .add-comment-form {
132 margin-top: 12px;
133 }
134
135 textarea {
136 width: 100%;
137 padding: 12px;
138 resize: vertical;
139 min-height: 80px;
140 border: 1px solid #bbb;
141 border-radius: 10px;
142 font-size: 14px;
143 background-color: #fffefb;
144 color: #333;
145 }
146
147 .comment-options {
148 margin-top: 8px;
149 display: flex;
150 align-items: center;
151 justify-content: space-between;
152 }
153
154 .comment-options label {
155 font-size: 14px;
156 color: #555;
157 }
158
159 .comment-options button {
Krishyac0f7e9b2025-04-22 15:28:28 +0800160 justify-content: flex-end; /*靠右对齐*/
Krishya1300cad2025-04-20 22:16:45 +0800161 padding: 6px 14px;
162 background-color: #BA929A;
163 color: #fff;
164 border: none;
165 border-radius: 6px;
166 font-size: 14px;
167 cursor: pointer;
Krishya1300cad2025-04-20 22:16:45 +0800168 }
169
170 .comment-options button:hover {
171 background-color: #6d4e37;
172 }
173
174 .error-text {
175 color: #f00;
176 text-align: center;
177 }
178 .post-images {
179 display: flex;
180 flex-wrap: wrap;
181 justify-content: center;
182 }
183