margin.at
1.modal-overlay {
2 position: fixed;
3 inset: 0;
4 background: rgba(0, 0, 0, 0.5);
5 display: flex;
6 align-items: center;
7 justify-content: center;
8 padding: 16px;
9 z-index: 50;
10 animation: fadeIn 0.2s ease-out;
11}
12
13.modal-container {
14 background: var(--bg-secondary);
15 border-radius: var(--radius-lg);
16 width: 100%;
17 max-width: 28rem;
18 border: 1px solid var(--border);
19 box-shadow: var(--shadow-lg);
20 animation: zoomIn 0.2s ease-out;
21}
22
23.modal-header {
24 display: flex;
25 align-items: center;
26 justify-content: space-between;
27 padding: 16px;
28 border-bottom: 1px solid var(--border);
29}
30
31.modal-title {
32 font-size: 1.25rem;
33 font-weight: 700;
34 color: var(--text-primary);
35}
36
37.modal-close-btn {
38 padding: 8px;
39 color: var(--text-tertiary);
40 border-radius: var(--radius-md);
41 transition: color 0.15s;
42}
43
44.modal-close-btn:hover {
45 color: var(--text-primary);
46 background: var(--bg-hover);
47}
48
49.modal-form {
50 padding: 16px;
51 display: flex;
52 flex-direction: column;
53 gap: 16px;
54}
55
56.icon-picker-tabs {
57 display: flex;
58 gap: 4px;
59 margin-bottom: 12px;
60}
61
62.icon-picker-tab {
63 flex: 1;
64 padding: 8px 12px;
65 background: var(--bg-primary);
66 border: 1px solid var(--border);
67 border-radius: var(--radius-md);
68 color: var(--text-secondary);
69 font-size: 0.85rem;
70 font-weight: 500;
71 cursor: pointer;
72 transition: all 0.15s ease;
73}
74
75.icon-picker-tab:hover {
76 background: var(--bg-tertiary);
77}
78
79.icon-picker-tab.active {
80 background: var(--accent);
81 border-color: var(--accent);
82 color: white;
83}
84
85.emoji-picker-wrapper {
86 display: flex;
87 flex-direction: column;
88 gap: 10px;
89}
90
91.emoji-custom-input input {
92 width: 100%;
93}
94
95.emoji-picker,
96.icon-picker {
97 display: flex;
98 flex-wrap: wrap;
99 gap: 4px;
100 max-height: 120px;
101 overflow-y: auto;
102 padding: 8px;
103 background: var(--bg-primary);
104 border: 1px solid var(--border);
105 border-radius: var(--radius-md);
106}
107
108.emoji-option,
109.icon-option {
110 width: 36px;
111 height: 36px;
112 display: flex;
113 align-items: center;
114 justify-content: center;
115 font-size: 1.2rem;
116 background: transparent;
117 border: 2px solid transparent;
118 border-radius: var(--radius-sm);
119 cursor: pointer;
120 transition: all 0.15s ease;
121 color: var(--text-secondary);
122}
123
124.emoji-option:hover,
125.icon-option:hover {
126 background: var(--bg-tertiary);
127 transform: scale(1.1);
128 color: var(--text-primary);
129}
130
131.emoji-option.selected,
132.icon-option.selected {
133 border-color: var(--accent);
134 background: var(--accent-subtle);
135 color: var(--accent);
136}
137
138.modal-actions {
139 display: flex;
140 justify-content: flex-end;
141 gap: 12px;
142 padding-top: 8px;
143}
144
145@keyframes fadeIn {
146 from {
147 opacity: 0;
148 }
149
150 to {
151 opacity: 1;
152 }
153}
154
155@keyframes zoomIn {
156 from {
157 opacity: 0;
158 transform: scale(0.95);
159 }
160
161 to {
162 opacity: 1;
163 transform: scale(1);
164 }
165}
166
167.form-group {
168 margin-bottom: 0;
169}
170
171.form-label {
172 display: block;
173 font-size: 0.85rem;
174 font-weight: 600;
175 color: var(--text-secondary);
176 margin-bottom: 6px;
177}
178
179.form-input,
180.form-textarea,
181.form-select {
182 width: 100%;
183 padding: 8px 12px;
184 background: var(--bg-primary);
185 border: 1px solid var(--border);
186 border-radius: var(--radius-md);
187 color: var(--text-primary);
188 transition: all 0.15s;
189}
190
191.form-input:focus,
192.form-textarea:focus,
193.form-select:focus {
194 outline: none;
195 border-color: var(--accent);
196 box-shadow: 0 0 0 2px var(--accent-subtle);
197}
198
199.form-textarea {
200 resize: none;
201}
202
203.input {
204 width: 100%;
205 padding: 12px 14px;
206 font-size: 0.95rem;
207 color: var(--text-primary);
208 background: var(--bg-secondary);
209 border: 1px solid var(--border);
210 border-radius: var(--radius-md);
211 outline: none;
212 transition: all 0.15s ease;
213}
214
215.input:focus {
216 border-color: var(--accent);
217 box-shadow: 0 0 0 3px var(--accent-subtle);
218}
219
220.input::placeholder {
221 color: var(--text-tertiary);
222}
223
224.color-input-container {
225 display: flex;
226 align-items: center;
227 gap: 12px;
228 background: var(--bg-tertiary);
229 padding: 8px 12px;
230 border-radius: var(--radius-md);
231 border: 1px solid var(--border);
232 width: fit-content;
233}
234
235.color-input-wrapper {
236 position: relative;
237 width: 32px;
238 height: 32px;
239 border-radius: var(--radius-full);
240 overflow: hidden;
241 border: 2px solid var(--border);
242 cursor: pointer;
243 transition: transform 0.1s;
244}
245
246.color-input-wrapper:hover {
247 transform: scale(1.1);
248 border-color: var(--accent);
249}
250
251.color-input-wrapper input[type="color"] {
252 position: absolute;
253 top: -50%;
254 left: -50%;
255 width: 200%;
256 height: 200%;
257 padding: 0;
258 margin: 0;
259 border: none;
260 cursor: pointer;
261 opacity: 0;
262}