This repository has no description
1.modalBackdrop {
2 position: fixed;
3 top: 0;
4 left: 0;
5 right: 0;
6 bottom: 0;
7 background: rgba(0, 0, 0, 0.7);
8 display: flex;
9 align-items: center;
10 justify-content: center;
11 z-index: 1000;
12 padding: 20px;
13}
14
15.modalContent {
16 background: var(--card-background, #ffffff);
17 background-color: var(--card-background, #ffffff);
18 border: 2px solid var(--border);
19 padding: 30px;
20 max-width: 600px;
21 width: 100%;
22 max-height: 90vh;
23 overflow-y: auto;
24 box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
25}
26
27.modalHeader {
28 display: flex;
29 justify-content: space-between;
30 align-items: center;
31 margin-bottom: 20px;
32}
33
34.modalHeader h2 {
35 margin: 0;
36 font-size: 1.5rem;
37 color: var(--foreground);
38}
39
40.closeButton {
41 background: none;
42 border: none;
43 font-size: 1.5rem;
44 cursor: pointer;
45 color: var(--foreground);
46 padding: 5px 10px;
47 line-height: 1;
48 transition: color 0.2s;
49}
50
51.closeButton:hover {
52 color: var(--primary);
53}
54
55.closeButton:disabled {
56 opacity: 0.5;
57 cursor: not-allowed;
58}
59
60.error {
61 background: #fee;
62 border: 1px solid #fcc;
63 color: #c33;
64 padding: 12px;
65 margin-bottom: 20px;
66 font-size: 0.9rem;
67}
68
69.formGroup {
70 margin-bottom: 24px;
71}
72
73.formGroup label {
74 display: block;
75 margin-bottom: 8px;
76 font-weight: 600;
77 color: var(--foreground);
78 font-size: 0.95rem;
79}
80
81.textInput {
82 width: 100%;
83 padding: 12px;
84 font-size: 1rem;
85 border: 2px solid var(--border);
86 background: var(--input-background, #f5f5f5);
87 background-color: var(--input-background, #f5f5f5);
88 color: var(--foreground, #000000);
89 font-family: inherit;
90 transition: border-color 0.2s;
91}
92
93.textInput:focus {
94 outline: none;
95 border-color: var(--primary);
96}
97
98.textInput:disabled {
99 opacity: 0.6;
100 cursor: not-allowed;
101}
102
103.charCount {
104 text-align: right;
105 font-size: 0.85rem;
106 color: var(--muted);
107 margin-top: 4px;
108}
109
110.emojiGrid {
111 display: grid;
112 grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
113 gap: 8px;
114 margin-top: 8px;
115}
116
117.emojiButton {
118 background: var(--input-background, #f5f5f5);
119 background-color: var(--input-background, #f5f5f5);
120 border: 2px solid var(--border);
121 padding: 12px;
122 font-size: 1.5rem;
123 cursor: pointer;
124 transition: all 0.2s;
125 display: flex;
126 align-items: center;
127 justify-content: center;
128}
129
130.emojiButton:hover {
131 border-color: var(--primary);
132 transform: scale(1.05);
133}
134
135.emojiButton.selected {
136 background: var(--primary);
137 border-color: var(--primary);
138 transform: scale(1.1);
139}
140
141.emojiButton:disabled {
142 opacity: 0.5;
143 cursor: not-allowed;
144}
145
146.modalActions {
147 display: flex;
148 justify-content: space-between;
149 align-items: center;
150 gap: 12px;
151 margin-top: 24px;
152 padding-top: 24px;
153 border-top: 1px solid var(--border);
154}
155
156.rightActions {
157 display: flex;
158 gap: 12px;
159}
160
161.deleteButton {
162 background: transparent;
163 color: #c33;
164 border: 2px solid #c33;
165 padding: 10px 20px;
166 font-size: 0.95rem;
167 font-weight: 600;
168 cursor: pointer;
169 transition: all 0.2s;
170}
171
172.deleteButton:hover {
173 background: #c33;
174 color: white;
175}
176
177.deleteButton:disabled {
178 opacity: 0.5;
179 cursor: not-allowed;
180}
181
182.cancelButton {
183 background: transparent;
184 color: var(--foreground);
185 border: 2px solid var(--border);
186 padding: 10px 20px;
187 font-size: 0.95rem;
188 font-weight: 600;
189 cursor: pointer;
190 transition: all 0.2s;
191}
192
193.cancelButton:hover {
194 background: var(--border);
195}
196
197.cancelButton:disabled {
198 opacity: 0.5;
199 cursor: not-allowed;
200}
201
202.saveButton {
203 background: var(--primary);
204 color: var(--primary-foreground);
205 border: 2px solid var(--primary);
206 padding: 10px 20px;
207 font-size: 0.95rem;
208 font-weight: 600;
209 cursor: pointer;
210 transition: all 0.2s;
211}
212
213.saveButton:hover {
214 opacity: 0.9;
215 transform: translateY(-1px);
216}
217
218.saveButton:disabled {
219 opacity: 0.5;
220 cursor: not-allowed;
221 transform: none;
222}
223
224.deleteConfirmation {
225 width: 100%;
226}
227
228.deleteConfirmation p {
229 margin: 0 0 16px 0;
230 color: var(--foreground);
231 font-size: 0.95rem;
232}
233
234.confirmButtons {
235 display: flex;
236 gap: 12px;
237 justify-content: flex-end;
238}
239
240.confirmDeleteButton {
241 background: #c33;
242 color: white;
243 border: 2px solid #c33;
244 padding: 10px 20px;
245 font-size: 0.95rem;
246 font-weight: 600;
247 cursor: pointer;
248 transition: all 0.2s;
249}
250
251.confirmDeleteButton:hover {
252 background: #a22;
253 border-color: #a22;
254}
255
256.confirmDeleteButton:disabled {
257 opacity: 0.5;
258 cursor: not-allowed;
259}
260
261@media (max-width: 640px) {
262 .modalContent {
263 padding: 20px;
264 max-height: 95vh;
265 }
266
267 .modalActions {
268 flex-direction: column;
269 align-items: stretch;
270 }
271
272 .rightActions {
273 flex-direction: column;
274 }
275
276 .deleteButton,
277 .cancelButton,
278 .saveButton,
279 .confirmDeleteButton {
280 width: 100%;
281 }
282}
283