blob: 570b65f717725585164d2fb938bc900e3242861e [file] [log] [blame]
Krishya1300cad2025-04-20 22:16:45 +08001 .post-detail-page {
Krishya57cc17b2025-05-26 16:43:34 +08002 background: #333;
Krishya1300cad2025-04-20 22:16:45 +08003 font-family: 'Helvetica Neue', sans-serif;
4 color: #333;
Krishyae71688a2025-04-10 21:25:17 +08005 }
6
Krishya1300cad2025-04-20 22:16:45 +08007 .post-detail {
8 background-color: #e9ded2;
9 border-radius: 16px;
10 max-width: 960px;
11 margin: 0 auto;
12 padding: 24px 32px;
Krishyac0f7e9b2025-04-22 15:28:28 +080013 /* 卡片居中 */
14 margin: 0 auto;
15 margin-top: 40px;
Krishya1300cad2025-04-20 22:16:45 +080016 }
17
18 .post-detail h1 {
19 font-size: 24px;
20 margin-bottom: 16px;
Krishyaf1d0ea82025-05-03 17:01:58 +080021 color: #4A3B34;
Krishyae71688a2025-04-10 21:25:17 +080022 }
23
24 .post-meta {
Krishya1300cad2025-04-20 22:16:45 +080025 display: flex;
26 justify-content: space-between;
27 font-size: 14px;
28 color: #755e50;
29 margin-bottom: 16px;
Krishyae71688a2025-04-10 21:25:17 +080030 }
31
32 .post-content {
Krishya1300cad2025-04-20 22:16:45 +080033 font-size: 20px;
34 line-height: 1.7;
35 margin-bottom: 20px;
Krishyaf1d0ea82025-05-03 17:01:58 +080036 color: #4A3B34;
Krishyae71688a2025-04-10 21:25:17 +080037 }
38
Krishya1300cad2025-04-20 22:16:45 +080039 /* 多图排列 */
40 .post-content img {
41 max-width: 180px;
Krishyae71688a2025-04-10 21:25:17 +080042 height: auto;
Krishya1300cad2025-04-20 22:16:45 +080043 border-radius: 8px;
44 margin: 8px;
Krishyae71688a2025-04-10 21:25:17 +080045 }
Krishya1300cad2025-04-20 22:16:45 +080046
47 .post-actions {
48 display: flex;
49 gap: 16px;
50 margin-bottom: 24px;
Krishyac0f7e9b2025-04-22 15:28:28 +080051 justify-content: flex-end; /*靠右对齐*/
Krishya1300cad2025-04-20 22:16:45 +080052 }
53
54 .icon-btn {
55 display: flex;
56 align-items: center;
57 gap: 6px;
58 border: none;
59 background: none;
60 cursor: pointer;
Krishyaf1d0ea82025-05-03 17:01:58 +080061 color: #4A3B34;
Krishya1300cad2025-04-20 22:16:45 +080062 transition: transform 0.2s ease;
63 }
64
65 .icon-btn:hover {
66 background: none !important;
67 color: inherit;
68 outline: none;
69 box-shadow: none;
70 }
71
72 .comments-section {
73 margin-top: -12px;
74 padding: 24px 24px 16px;
75 border-radius: 12px;
76 }
77
78 .comments-section h3 {
79 margin-bottom: 16px;
80 font-size: 20px;
Krishyaf1d0ea82025-05-03 17:01:58 +080081 color: #4A3B34;
Krishya1300cad2025-04-20 22:16:45 +080082 background-color: #c4b3a3;
83 padding: 6px 12px;
84 border-radius: 8px;
85 display: inline-block;
86 }
87
88 .comment {
89 border-bottom: 1px solid #eee;
90 padding: 12px 0;
91 }
92
93 .comment-header {
94 display: flex;
95 justify-content: space-between;
96 align-items: center;
97 font-size: 0.9rem;
98 color: #555;
99 }
100
101 .comment-user {
102 font-weight: bold;
103 }
104
105 .comment-content {
106 margin: 6px 0;
107 font-size: 1rem;
108 }
109
110 .comment-time {
111 font-size: 0.85rem;
112 color: #999;
113 }
114
115 .reply-btn {
116 background: none;
117 border: none;
118 color: #000000;
119 cursor: pointer;
120 }
121
122 .reply-btn:hover {
123 color: #000000; /* 不变色 */
124 background: none; /* 确保没有背景色 */
125 text-decoration: underline; /* 你可以保留这个,或也删除 */
126 }
127
128 .reply-form,
129 .add-comment-form {
130 margin-top: 12px;
131 }
132
133 textarea {
134 width: 100%;
135 padding: 12px;
136 resize: vertical;
137 min-height: 80px;
138 border: 1px solid #bbb;
139 border-radius: 10px;
140 font-size: 14px;
141 background-color: #fffefb;
142 color: #333;
143 }
144
145 .comment-options {
146 margin-top: 8px;
147 display: flex;
148 align-items: center;
149 justify-content: space-between;
150 }
151
152 .comment-options label {
153 font-size: 14px;
154 color: #555;
155 }
156
157 .comment-options button {
Krishyac0f7e9b2025-04-22 15:28:28 +0800158 justify-content: flex-end; /*靠右对齐*/
Krishya1300cad2025-04-20 22:16:45 +0800159 padding: 6px 14px;
160 background-color: #BA929A;
161 color: #fff;
162 border: none;
163 border-radius: 6px;
164 font-size: 14px;
165 cursor: pointer;
Krishya1300cad2025-04-20 22:16:45 +0800166 }
167
168 .comment-options button:hover {
Krishyaf1d0ea82025-05-03 17:01:58 +0800169 background-color: #5F4437;
Krishya1300cad2025-04-20 22:16:45 +0800170 }
171
172 .error-text {
173 color: #f00;
174 text-align: center;
175 }
176 .post-images {
177 display: flex;
178 flex-wrap: wrap;
179 justify-content: center;
180 }
181