PluginProbe
Search Atlas SEO – OTTO AI SEO Automation for WordPress / 2.6.12
Search Atlas SEO – OTTO AI SEO Automation for WordPress v2.6.12
2.6.26 2.6.25 2.6.24 2.6.23 2.6.22 2.6.21 2.6.20 2.6.19 2.6.18 2.6.17 2.6.16 2.6.15 2.6.14 2.6.13 2.6.12 2.6.11 2.6.10 2.6.9 2.6.8 2.6.7 2.6.6 2.6.5 2.6.4 2.6.3 2.5.23 All 138 releases
metasync / code-minification / assets / css / code-minification.css

code-minification.css in Search Atlas SEO – OTTO AI SEO Automation for WordPress 2.6.12, at code-minification/assets/css/code-minification.css

585 lines 13.9 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * Code Minification Admin Page Styles
3 *
4 * @package Search Atlas SEO
5 * @copyright Copyright (C) 2021-2025, Search Atlas Group - support@searchatlas.com
6 * @since 2.5.23
7 */
8
9 /* ── General Layout ── */
10 .metasync-dashboard-wrap .metasync-code-minification-page {
11 padding: 20px !important;
12 max-width: 100% !important;
13 }
14
15 .metasync-code-min-container {
16 display: grid;
17 grid-template-columns: 1fr 340px;
18 gap: 24px;
19 margin-top: 20px;
20 width: 100%;
21 }
22
23 .metasync-code-min-main {
24 width: 100%;
25 min-width: 0;
26 }
27
28 .metasync-code-min-sidebar {
29 width: 100%;
30 min-width: 0;
31 }
32
33 @media (max-width: 1200px) {
34 .metasync-code-min-container {
35 grid-template-columns: 1fr;
36 }
37 }
38
39 /* ── Notices ── */
40 .metasync-code-minification-page .metasync-notice {
41 display: flex;
42 align-items: flex-start;
43 gap: 10px;
44 padding: 14px 20px;
45 border-radius: 10px;
46 margin-bottom: 20px;
47 font-size: 14px;
48 animation: codeMinNoticeSlideIn 0.3s ease-out;
49 }
50
51 @keyframes codeMinNoticeSlideIn {
52 from { opacity: 0; transform: translateY(-10px); }
53 to { opacity: 1; transform: translateY(0); }
54 }
55
56 .metasync-code-minification-page .metasync-notice-success {
57 background: rgba(16, 185, 129, 0.1);
58 border: 1px solid rgba(16, 185, 129, 0.3);
59 color: #6ee7b7;
60 }
61
62 .metasync-code-minification-page .metasync-notice-success .dashicons {
63 color: #10b981;
64 }
65
66 .metasync-code-minification-page .metasync-notice-warning {
67 background: rgba(245, 158, 11, 0.1);
68 border: 1px solid rgba(245, 158, 11, 0.3);
69 color: #fbbf24;
70 }
71
72 .metasync-code-minification-page .metasync-notice-warning .dashicons {
73 color: #f59e0b;
74 }
75
76 /* ── Tab Navigation (matches media-optimization) ── */
77 .metasync-code-minification-page .metasync-tabs {
78 margin: 0 0 20px 0;
79 background: var(--dashboard-card-bg, #1a1f26);
80 border: 1px solid var(--dashboard-border, #374151);
81 border-radius: 12px;
82 padding: 6px;
83 box-shadow: var(--dashboard-shadow, 0 10px 15px -3px rgba(0, 0, 0, 0.3));
84 }
85
86 .metasync-code-minification-page .metasync-tab-nav {
87 border-bottom: none;
88 margin: 0;
89 padding: 0;
90 display: flex;
91 gap: 4px;
92 background: transparent;
93 list-style: none;
94 }
95
96 .metasync-code-minification-page .metasync-tab-nav li {
97 display: inline-block;
98 margin: 0;
99 }
100
101 .metasync-code-minification-page .metasync-tab-nav a {
102 display: flex;
103 align-items: center;
104 gap: 6px;
105 padding: 12px 20px;
106 text-decoration: none;
107 color: var(--dashboard-text-secondary, #9ca3af);
108 border-bottom: none;
109 border-radius: 8px;
110 transition: all 0.3s ease;
111 font-weight: 500;
112 font-size: 14px;
113 background: transparent;
114 position: relative;
115 overflow: hidden;
116 }
117
118 .metasync-code-minification-page .metasync-tab-nav a .dashicons {
119 font-size: 16px;
120 width: 16px;
121 height: 16px;
122 line-height: 16px;
123 }
124
125 .metasync-code-minification-page .metasync-tab-nav a:hover {
126 color: var(--dashboard-text-primary, #ffffff);
127 background: rgba(255, 255, 255, 0.05);
128 }
129
130 .metasync-code-minification-page .metasync-tab-nav a.active {
131 color: var(--dashboard-text-primary, #ffffff);
132 background: var(--dashboard-card-hover, #222831);
133 box-shadow: var(--dashboard-shadow, 0 10px 15px -3px rgba(0, 0, 0, 0.3));
134 font-weight: 600;
135 }
136
137 .metasync-code-minification-page .metasync-tab-nav a.active::after {
138 content: '';
139 position: absolute;
140 bottom: 0;
141 left: 0;
142 right: 0;
143 height: 2px;
144 background: var(--dashboard-accent, #3b82f6);
145 border-radius: 1px;
146 }
147
148 .metasync-code-minification-page .metasync-tab-content {
149 display: none;
150 }
151
152 .metasync-code-minification-page .metasync-tab-content.active {
153 display: block;
154 }
155
156 /* ── Section Headers ── */
157 .metasync-section-header {
158 display: flex;
159 align-items: center;
160 gap: 10px;
161 margin: 28px 0 16px;
162 padding-bottom: 10px;
163 border-bottom: 1px solid var(--dashboard-border, #374151);
164 }
165
166 .metasync-section-header:first-child {
167 margin-top: 0;
168 }
169
170 .metasync-section-header .dashicons {
171 font-size: 20px;
172 width: 20px;
173 height: 20px;
174 color: var(--dashboard-accent, #3b82f6);
175 }
176
177 .metasync-section-header h3 {
178 font-size: 15px;
179 font-weight: 600;
180 color: var(--dashboard-text-primary, #ffffff);
181 margin: 0;
182 text-transform: uppercase;
183 letter-spacing: 0.5px;
184 }
185
186 .metasync-section-header .metasync-section-desc {
187 font-size: 13px;
188 color: var(--dashboard-text-secondary, #9ca3af);
189 margin-left: auto;
190 }
191
192 /* ── Cards ── */
193 .metasync-code-minification-page .metasync-card {
194 background: var(--dashboard-card-bg, #1a1f26);
195 border: 1px solid var(--dashboard-border, #374151);
196 border-radius: 12px;
197 box-shadow: var(--dashboard-shadow, 0 10px 15px -3px rgba(0, 0, 0, 0.3));
198 margin-bottom: 20px;
199 transition: all 0.3s ease;
200 }
201
202 .metasync-code-minification-page .metasync-card:hover {
203 box-shadow: var(--dashboard-shadow-hover, 0 20px 25px -5px rgba(0, 0, 0, 0.4));
204 transform: translateY(-2px);
205 }
206
207 .metasync-code-minification-page .metasync-card-header {
208 padding: 20px 24px;
209 border-bottom: 1px solid var(--dashboard-border, #374151);
210 display: flex;
211 justify-content: space-between;
212 align-items: center;
213 background: rgba(102, 126, 234, 0.05);
214 border-radius: 12px 12px 0 0;
215 }
216
217 .metasync-code-minification-page .metasync-card-header h2,
218 .metasync-code-minification-page .metasync-card-header h3 {
219 margin: 0;
220 font-size: 17px;
221 font-weight: 600;
222 color: var(--dashboard-text-primary, #ffffff);
223 }
224
225 .metasync-card-title-group {
226 display: flex;
227 flex-direction: column;
228 gap: 4px;
229 }
230
231 .metasync-code-minification-page .metasync-card-subtitle {
232 display: block;
233 font-size: 13px;
234 color: var(--dashboard-text-secondary, #9ca3af);
235 font-weight: 400;
236 }
237
238 .metasync-code-minification-page .metasync-card-body {
239 padding: 24px;
240 }
241
242 /* ── Fields ── */
243 .metasync-code-minification-page .metasync-field {
244 margin-bottom: 16px;
245 }
246
247 .metasync-code-minification-page .metasync-field:last-child {
248 margin-bottom: 0;
249 }
250
251 .metasync-code-minification-page .metasync-field label {
252 display: block;
253 font-size: 14px;
254 font-weight: 500;
255 color: var(--dashboard-text-primary, #ffffff);
256 margin-bottom: 8px;
257 }
258
259 .metasync-code-minification-page .metasync-field input[type="text"],
260 .metasync-code-minification-page .metasync-field input[type="url"],
261 .metasync-code-minification-page .metasync-field input[type="number"],
262 .metasync-code-minification-page .metasync-field textarea {
263 width: 100%;
264 padding: 10px 14px;
265 background: rgba(0, 0, 0, 0.3);
266 border: 1px solid var(--dashboard-border, #374151);
267 color: var(--dashboard-text-primary, #ffffff);
268 border-radius: 8px;
269 font-size: 14px;
270 transition: all 0.3s ease;
271 box-sizing: border-box;
272 }
273
274 .metasync-code-minification-page .metasync-field input:focus,
275 .metasync-code-minification-page .metasync-field textarea:focus {
276 border-color: var(--dashboard-accent, #3b82f6);
277 outline: none;
278 box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
279 }
280
281 .metasync-code-minification-page .metasync-field-description {
282 font-size: 12px;
283 color: var(--dashboard-text-secondary, #9ca3af);
284 margin-top: 6px;
285 line-height: 1.5;
286 }
287
288 /* ── Toggle (matches media-optimization) ── */
289 .metasync-code-minification-page .metasync-toggle {
290 position: relative;
291 display: inline-block;
292 width: 48px;
293 height: 26px;
294 flex-shrink: 0;
295 }
296
297 .metasync-code-minification-page .metasync-toggle input {
298 opacity: 0;
299 width: 0;
300 height: 0;
301 }
302
303 .metasync-code-minification-page .metasync-toggle-slider {
304 position: absolute;
305 cursor: pointer;
306 inset: 0;
307 background: rgba(255, 255, 255, 0.1);
308 border: 1px solid var(--dashboard-border, #374151);
309 border-radius: 26px;
310 transition: all 0.3s ease;
311 }
312
313 .metasync-code-minification-page .metasync-toggle-slider::before {
314 content: '';
315 position: absolute;
316 height: 20px;
317 width: 20px;
318 left: 2px;
319 bottom: 2px;
320 background: var(--dashboard-text-secondary, #9ca3af);
321 border-radius: 50%;
322 transition: all 0.3s ease;
323 }
324
325 .metasync-code-minification-page .metasync-toggle input:checked + .metasync-toggle-slider {
326 background: rgba(102, 126, 234, 0.3);
327 border-color: #667eea;
328 }
329
330 .metasync-code-minification-page .metasync-toggle input:checked + .metasync-toggle-slider::before {
331 transform: translateX(22px);
332 background: #667eea;
333 box-shadow: 0 0 8px rgba(102, 126, 234, 0.5);
334 }
335
336 .metasync-code-minification-page .metasync-toggle-overridden .metasync-toggle-slider {
337 opacity: 0.5;
338 cursor: not-allowed;
339 }
340
341 /* ── Toggle Section Animation ── */
342 .metasync-code-minification-page .metasync-toggle-section {
343 overflow: hidden;
344 transition: max-height 0.3s ease, opacity 0.3s ease;
345 }
346
347 /* ── Cache Stats ── */
348 .metasync-cache-stats-grid {
349 display: grid;
350 grid-template-columns: repeat(4, 1fr);
351 gap: 16px;
352 margin-bottom: 20px;
353 }
354
355 @media (max-width: 768px) {
356 .metasync-cache-stats-grid {
357 grid-template-columns: repeat(2, 1fr);
358 }
359 }
360
361 .metasync-cache-stat {
362 text-align: center;
363 padding: 16px;
364 background: rgba(0, 0, 0, 0.2);
365 border-radius: 10px;
366 border: 1px solid var(--dashboard-border, #374151);
367 }
368
369 .metasync-cache-stat-value {
370 display: block;
371 font-size: 24px;
372 font-weight: 700;
373 color: #667eea;
374 margin-bottom: 4px;
375 }
376
377 .metasync-cache-stat-label {
378 display: block;
379 font-size: 12px;
380 color: var(--dashboard-text-secondary, #9ca3af);
381 text-transform: uppercase;
382 letter-spacing: 0.05em;
383 }
384
385 /* ── Cache Actions ── */
386 .metasync-cache-actions {
387 display: flex;
388 align-items: center;
389 gap: 12px;
390 }
391
392 .metasync-cache-purge-status {
393 font-size: 13px;
394 color: #10b981;
395 }
396
397 /* ── Form Actions ── */
398 .metasync-form-actions {
399 display: flex;
400 gap: 12px;
401 margin-top: 24px;
402 padding-top: 20px;
403 }
404
405 .metasync-form-actions .button {
406 display: inline-flex;
407 align-items: center;
408 gap: 6px;
409 }
410
411 .metasync-btn-save {
412 min-width: 140px;
413 }
414
415 /* ── Sidebar Cards ── */
416 .metasync-code-min-sidebar .metasync-card-header {
417 padding: 16px 20px;
418 }
419
420 .metasync-code-min-sidebar .metasync-card-header h3 {
421 font-size: 15px;
422 }
423
424 .metasync-feature-status-list {
425 padding: 4px 0;
426 }
427
428 .metasync-feature-status-item {
429 display: flex;
430 align-items: center;
431 gap: 10px;
432 padding: 12px 20px;
433 border-bottom: 1px solid var(--dashboard-border, #374151);
434 font-size: 14px;
435 color: var(--dashboard-text-secondary, #9ca3af);
436 }
437
438 .metasync-feature-status-item:last-child {
439 border-bottom: none;
440 }
441
442 .metasync-feature-dot {
443 width: 8px;
444 height: 8px;
445 border-radius: 50%;
446 flex-shrink: 0;
447 }
448
449 .metasync-feature-dot.active {
450 background: #10b981;
451 box-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
452 }
453
454 .metasync-feature-dot.inactive {
455 background: #4b5563;
456 }
457
458 .metasync-feature-status-item span:nth-child(2) {
459 flex: 1;
460 }
461
462 .metasync-feature-format {
463 font-size: 12px;
464 font-weight: 600;
465 color: var(--dashboard-accent, #3b82f6);
466 }
467
468 /* Tips list */
469 .metasync-tips-list {
470 padding: 12px 20px;
471 margin: 0;
472 list-style: none;
473 }
474
475 .metasync-tips-list li {
476 display: flex;
477 align-items: flex-start;
478 gap: 10px;
479 padding: 10px 0;
480 border-bottom: 1px solid var(--dashboard-border, #374151);
481 font-size: 13px;
482 color: var(--dashboard-text-secondary, #9ca3af);
483 line-height: 1.5;
484 }
485
486 .metasync-tips-list li:last-child {
487 border-bottom: none;
488 }
489
490 .metasync-tips-list li .dashicons {
491 flex-shrink: 0;
492 margin-top: 1px;
493 }
494
495 /* ── Light Theme ── */
496 [data-theme="light"] .metasync-code-minification-page .metasync-card {
497 background: #ffffff;
498 border-color: #e5e7eb;
499 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
500 }
501
502 [data-theme="light"] .metasync-code-minification-page .metasync-card:hover {
503 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
504 }
505
506 [data-theme="light"] .metasync-code-minification-page .metasync-card-header {
507 background: rgba(102, 126, 234, 0.03);
508 }
509
510 [data-theme="light"] .metasync-code-minification-page .metasync-card-header h2,
511 [data-theme="light"] .metasync-code-minification-page .metasync-card-header h3 {
512 color: #111827;
513 }
514
515 [data-theme="light"] .metasync-code-minification-page .metasync-card-subtitle {
516 color: #6b7280;
517 }
518
519 [data-theme="light"] .metasync-code-minification-page .metasync-field label {
520 color: #374151;
521 }
522
523 [data-theme="light"] .metasync-code-minification-page .metasync-field input,
524 [data-theme="light"] .metasync-code-minification-page .metasync-field textarea {
525 background: #f9fafb;
526 border-color: #d1d5db;
527 color: #111827;
528 }
529
530 [data-theme="light"] .metasync-code-minification-page .metasync-field-description {
531 color: #6b7280;
532 }
533
534 [data-theme="light"] .metasync-cache-stat {
535 background: #f9fafb;
536 border-color: #e5e7eb;
537 }
538
539 [data-theme="light"] .metasync-code-minification-page .metasync-notice-success {
540 background: rgba(16, 185, 129, 0.08);
541 color: #059669;
542 }
543
544 [data-theme="light"] .metasync-code-minification-page .metasync-notice-warning {
545 background: rgba(245, 158, 11, 0.08);
546 color: #d97706;
547 }
548
549 [data-theme="light"] .metasync-code-minification-page .metasync-tabs {
550 background: #ffffff;
551 border-color: #e5e7eb;
552 }
553
554 [data-theme="light"] .metasync-code-minification-page .metasync-tab-nav a {
555 color: #6b7280;
556 }
557
558 [data-theme="light"] .metasync-code-minification-page .metasync-tab-nav a:hover {
559 color: #111827;
560 background: rgba(0, 0, 0, 0.03);
561 }
562
563 [data-theme="light"] .metasync-code-minification-page .metasync-tab-nav a.active {
564 color: #111827;
565 background: #f3f4f6;
566 }
567
568 [data-theme="light"] .metasync-section-header {
569 border-bottom-color: #e5e7eb;
570 }
571
572 [data-theme="light"] .metasync-section-header h3 {
573 color: #374151;
574 }
575
576 [data-theme="light"] .metasync-feature-status-item {
577 border-bottom-color: #e5e7eb;
578 color: #6b7280;
579 }
580
581 [data-theme="light"] .metasync-tips-list li {
582 border-bottom-color: #e5e7eb;
583 color: #6b7280;
584 }
585