swadhin / opengrammar public

feat(core): Update opengrammar/extension/src/popup/popup.css (Commit #16)

Swadhin Biswas committed 7 months ago
56de5cb
1 parent 2eeda89
commit 56de5cb
1 file changed
+100 -4
Showing 1 changed file+100-4
opengrammar/extension/src/popup/popup.css
▼opengrammar/extension/src/popup/popup.css
+100-4
@@ -20,13 +20,13 @@
20
20
21
21
body {
22
22
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
23
- width: 340px;
23
+ width: 320px;
24
24
background: var(--bg-primary);
25
25
color: var(--text-primary);
26
26
}
27
27
28
28
.container {
29
- padding: 16px;
29
+ padding: 14px;
30
30
}
31
31
32
32
.container.loading {
@@ -68,8 +68,17 @@ header {
68
68
gap: 8px;
69
69
}
70
70
71
-.logo svg {
72
- color: var(--primary);
71
+.logo-mark {
72
+ width: 28px;
73
+ height: 28px;
74
+ border-radius: 9px;
75
+ background: linear-gradient(135deg, #6d5efc, #2563eb);
76
+ display: inline-flex;
77
+ align-items: center;
78
+ justify-content: center;
79
+ color: white;
80
+ font-size: 15px;
81
+ font-weight: 700;
73
82
}
74
83
75
84
.logo h1 {
@@ -173,6 +182,93 @@ header {
173
182
pointer-events: none;
174
183
}
175
184
185
+.quick-actions {
186
+ display: grid;
187
+ grid-template-columns: 1fr 1fr;
188
+ gap: 8px;
189
+ margin-bottom: 12px;
190
+}
191
+
192
+.btn-secondary-action {
193
+ padding: 9px 10px;
194
+ background: var(--bg-secondary);
195
+ border: 1px solid var(--border);
196
+ border-radius: 10px;
197
+ font-size: 12px;
198
+ font-weight: 600;
199
+ color: var(--text-primary);
200
+ cursor: pointer;
201
+ transition: background 0.2s, border-color 0.2s;
202
+ display: flex;
203
+ align-items: center;
204
+ justify-content: center;
205
+ gap: 6px;
206
+}
207
+
208
+.btn-secondary-action:hover {
209
+ background: #eff6ff;
210
+ border-color: var(--primary);
211
+}
212
+
213
+.memory-card {
214
+ display: flex;
215
+ align-items: center;
216
+ justify-content: space-between;
217
+ gap: 12px;
218
+ padding: 10px 12px;
219
+ margin-bottom: 12px;
220
+ background: linear-gradient(180deg, #f8fafc, #eef2ff);
221
+ border: 1px solid #dbeafe;
222
+ border-radius: 12px;
223
+}
224
+
225
+.memory-card strong {
226
+ display: block;
227
+ font-size: 12px;
228
+ margin-bottom: 2px;
229
+}
230
+
231
+.memory-card span {
232
+ font-size: 11px;
233
+ color: var(--text-secondary);
234
+}
235
+
236
+.advanced-toggle {
237
+ width: 100%;
238
+ display: flex;
239
+ align-items: center;
240
+ justify-content: space-between;
241
+ gap: 8px;
242
+ margin-top: 4px;
243
+ padding: 10px 12px;
244
+ background: transparent;
245
+ border: 1px dashed var(--border);
246
+ border-radius: 10px;
247
+ color: var(--text-secondary);
248
+ cursor: pointer;
249
+}
250
+
251
+.advanced-toggle-left,
252
+.with-icon {
253
+ display: inline-flex;
254
+ align-items: center;
255
+ gap: 6px;
256
+}
257
+
258
+.advanced-panel {
259
+ margin-top: 12px;
260
+ padding-top: 12px;
261
+ border-top: 1px solid var(--border);
262
+}
263
+
264
+.compact-group {
265
+ margin-bottom: 12px;
266
+}
267
+
268
+.rotated {
269
+ transform: rotate(180deg);
270
+}
271
+
176
272
/* Inputs */
177
273
.input-group {
178
274
display: flex;
179
275