Gitiles
Code Review Sign In
gerrit.lilingkun.com / echo-frontend / 34493be5ae3a8add090f1507cac5fedce7463954 / . / src / pages / Forum / posts-main / components / CreatePostButton.css
blob: c5cc906afed983f36abeed4190e261d8d3f54088 [file] [log] [blame]
Krishya7ec1dd02025-04-19 15:29:03 +0800[diff] [blame]1.create-post {
Krishyaf1d0ea82025-05-03 17:01:58 +0800[diff] [blame]2 display: flex;
3 justify-content: center;
Krishyadbfadaa2025-06-09 20:33:15 +0800[diff] [blame]4 margin-top: 3%;
5 margin-bottom: -1%;
Krishyaf1d0ea82025-05-03 17:01:58 +0800[diff] [blame]6}
Krishya1300cad2025-04-20 22:16:45 +0800[diff] [blame]7
Krishyaf1d0ea82025-05-03 17:01:58 +0800[diff] [blame]8.create-btn {
Krishyadbfadaa2025-06-09 20:33:15 +0800[diff] [blame]9 /* background-color: #BA929A;
10 color: white; */
11 /* background-color: #e9ded2; */
12 /* 使用浅色背景，符合整体风格 */
13 background: none;
14 color: #5F4437;
15 padding: 7px 15px;
Krishyaf1d0ea82025-05-03 17:01:58 +0800[diff] [blame]16 border-radius: 8px;
17 border: none;
18 cursor: pointer;
19 font-size: 16px;
20 display: flex;
21 align-items: center;
22 transition: background-color 0.3s ease;
23}
24
25.create-btn:hover {
Krishyadbfadaa2025-06-09 20:33:15 +0800[diff] [blame]26 background-color: #e9ded2;
27}
28
29.view-btn {
30 background: none;
31 color: #0f5e51;
32 padding: 7px 15px;
33 border-radius: 8px;
34 border: none;
35 cursor: pointer;
36 font-size: 16px;
37 display: flex;
38 align-items: center;
39 transition: background-color 0.3s ease;
40}
41
42.view-btn:hover {
43 background-color: #e9ded2;
Krishyaf1d0ea82025-05-03 17:01:58 +0800[diff] [blame]44}
45
46/* Modal 样式 */
47.cp-modal-overlay {
48 position: fixed;
49 top: 0;
50 left: 0;
51 width: 100%;
52 height: 100%;
53 background: rgba(0,0,0,0.5);
54 display: flex;
55 justify-content: center;
56 align-items: center;
57 z-index: 1000;
58}
59
60.cp-modal-dialog {
61 background: #e9ded2;
62 padding: 20px;
63 width: 35%;
64 max-width: 500px;
65 border-radius: 8px;
66 display: flex;
67 flex-direction: column;
68 gap: 20px;
69}
70
71/* 标题 */
72.cp-modal-dialog h3 {
73 margin: 0;
74 color : #4A3B34;
75}
76
77/* 文本输入和文本域 —— 宽度保持 97%，一致感更强 */
78.cp-modal-dialog input[type="text"],
79.cp-modal-dialog textarea,
80.cp-modal-dialog input[type="file"] {
81 width: 97%;
82 padding: 8px;
83 font-size: 14px;
84 border: 1px solid #ccc;
85 border-radius: 4px;
86}
87
88/* 文本域高度 */
89.cp-modal-dialog textarea {
90 resize: vertical;
91 min-height: 80px;
92}
93
94/* 文件选择按钮保持 label 方式，不变 */
95.file-label {
96 display: inline-block;
97 padding: 6px 10px;
98 background: #BA929A;
99 color: #fff;
100 border-radius: 4px;
101 cursor: pointer;
102 font-size: 14px;
103 user-select: none;
104 width : 12%;
105}
106
107.file-label:hover {
108 background: #a17b83;
109}
110
111/* 预览区 */
112.cp-preview {
113 display: flex;
114 flex-wrap: wrap;
115 gap: 8px;
116}
117
118.cp-preview img {
119 width: 80px;
120 height: 80px;
121 object-fit: cover;
122 border-radius: 4px;
123 border: 1px solid #bbb;
124}
125
126/* 按钮组 —— 同 .modal-actions */
127.cp-actions {
128 display: flex;
129 justify-content: flex-end;
130 margin-top: 10px;
131}
132
133.cp-actions .btn {
134 padding: 6px 12px;
135 font-size: 14px;
136 cursor: pointer;
137 border: none;
138 border-radius: 4px;
139}
140
141.cp-actions .btn.cancel {
142 background: #5F4437;
143 color: #fff;
144}
145
146.cp-actions .btn.submit {
147 background: #BA929A;
148 color: #fff;
149}