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