PluginProbe
Search Atlas SEO – OTTO AI SEO Automation for WordPress / trunk
Search Atlas SEO – OTTO AI SEO Automation for WordPress vtrunk
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 trunk, at code-minification/assets/css/code-minification.css

592 lines 14.0 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 .metasync-code-minification-page .metasync-field-description code {
289 display: inline-block;
290 max-width: 100%;
291 overflow-wrap: anywhere;
292 word-break: break-all;
293 }
294
295 /* ── Toggle (matches media-optimization) ── */
296 .metasync-code-minification-page .metasync-toggle {
297 position: relative;
298 display: inline-block;
299 width: 48px;
300 height: 26px;
301 flex-shrink: 0;
302 }
303
304 .metasync-code-minification-page .metasync-toggle input {
305 opacity: 0;
306 width: 0;
307 height: 0;
308 }
309
310 .metasync-code-minification-page .metasync-toggle-slider {
311 position: absolute;
312 cursor: pointer;
313 inset: 0;
314 background: rgba(255, 255, 255, 0.1);
315 border: 1px solid var(--dashboard-border, #374151);
316 border-radius: 26px;
317 transition: all 0.3s ease;
318 }
319
320 .metasync-code-minification-page .metasync-toggle-slider::before {
321 content: '';
322 position: absolute;
323 height: 20px;
324 width: 20px;
325 left: 2px;
326 bottom: 2px;
327 background: var(--dashboard-text-secondary, #9ca3af);
328 border-radius: 50%;
329 transition: all 0.3s ease;
330 }
331
332 .metasync-code-minification-page .metasync-toggle input:checked + .metasync-toggle-slider {
333 background: rgba(102, 126, 234, 0.3);
334 border-color: #667eea;
335 }
336
337 .metasync-code-minification-page .metasync-toggle input:checked + .metasync-toggle-slider::before {
338 transform: translateX(22px);
339 background: #667eea;
340 box-shadow: 0 0 8px rgba(102, 126, 234, 0.5);
341 }
342
343 .metasync-code-minification-page .metasync-toggle-overridden .metasync-toggle-slider {
344 opacity: 0.5;
345 cursor: not-allowed;
346 }
347
348 /* ── Toggle Section Animation ── */
349 .metasync-code-minification-page .metasync-toggle-section {
350 overflow: hidden;
351 transition: max-height 0.3s ease, opacity 0.3s ease;
352 }
353
354 /* ── Cache Stats ── */
355 .metasync-cache-stats-grid {
356 display: grid;
357 grid-template-columns: repeat(4, 1fr);
358 gap: 16px;
359 margin-bottom: 20px;
360 }
361
362 @media (max-width: 768px) {
363 .metasync-cache-stats-grid {
364 grid-template-columns: repeat(2, 1fr);
365 }
366 }
367
368 .metasync-cache-stat {
369 text-align: center;
370 padding: 16px;
371 background: rgba(0, 0, 0, 0.2);
372 border-radius: 10px;
373 border: 1px solid var(--dashboard-border, #374151);
374 }
375
376 .metasync-cache-stat-value {
377 display: block;
378 font-size: 24px;
379 font-weight: 700;
380 color: #667eea;
381 margin-bottom: 4px;
382 }
383
384 .metasync-cache-stat-label {
385 display: block;
386 font-size: 12px;
387 color: var(--dashboard-text-secondary, #9ca3af);
388 text-transform: uppercase;
389 letter-spacing: 0.05em;
390 }
391
392 /* ── Cache Actions ── */
393 .metasync-cache-actions {
394 display: flex;
395 align-items: center;
396 gap: 12px;
397 }
398
399 .metasync-cache-purge-status {
400 font-size: 13px;
401 color: #10b981;
402 }
403
404 /* ── Form Actions ── */
405 .metasync-form-actions {
406 display: flex;
407 gap: 12px;
408 margin-top: 24px;
409 padding-top: 20px;
410 }
411
412 .metasync-form-actions .button {
413 display: inline-flex;
414 align-items: center;
415 gap: 6px;
416 }
417
418 .metasync-btn-save {
419 min-width: 140px;
420 }
421
422 /* ── Sidebar Cards ── */
423 .metasync-code-min-sidebar .metasync-card-header {
424 padding: 16px 20px;
425 }
426
427 .metasync-code-min-sidebar .metasync-card-header h3 {
428 font-size: 15px;
429 }
430
431 .metasync-feature-status-list {
432 padding: 4px 0;
433 }
434
435 .metasync-feature-status-item {
436 display: flex;
437 align-items: center;
438 gap: 10px;
439 padding: 12px 20px;
440 border-bottom: 1px solid var(--dashboard-border, #374151);
441 font-size: 14px;
442 color: var(--dashboard-text-secondary, #9ca3af);
443 }
444
445 .metasync-feature-status-item:last-child {
446 border-bottom: none;
447 }
448
449 .metasync-feature-dot {
450 width: 8px;
451 height: 8px;
452 border-radius: 50%;
453 flex-shrink: 0;
454 }
455
456 .metasync-feature-dot.active {
457 background: #10b981;
458 box-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
459 }
460
461 .metasync-feature-dot.inactive {
462 background: #4b5563;
463 }
464
465 .metasync-feature-status-item span:nth-child(2) {
466 flex: 1;
467 }
468
469 .metasync-feature-format {
470 font-size: 12px;
471 font-weight: 600;
472 color: var(--dashboard-accent, #3b82f6);
473 }
474
475 /* Tips list */
476 .metasync-tips-list {
477 padding: 12px 20px;
478 margin: 0;
479 list-style: none;
480 }
481
482 .metasync-tips-list li {
483 display: flex;
484 align-items: flex-start;
485 gap: 10px;
486 padding: 10px 0;
487 border-bottom: 1px solid var(--dashboard-border, #374151);
488 font-size: 13px;
489 color: var(--dashboard-text-secondary, #9ca3af);
490 line-height: 1.5;
491 }
492
493 .metasync-tips-list li:last-child {
494 border-bottom: none;
495 }
496
497 .metasync-tips-list li .dashicons {
498 flex-shrink: 0;
499 margin-top: 1px;
500 }
501
502 /* ── Light Theme ── */
503 [data-theme="light"] .metasync-code-minification-page .metasync-card {
504 background: #ffffff;
505 border-color: #e5e7eb;
506 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
507 }
508
509 [data-theme="light"] .metasync-code-minification-page .metasync-card:hover {
510 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
511 }
512
513 [data-theme="light"] .metasync-code-minification-page .metasync-card-header {
514 background: rgba(102, 126, 234, 0.03);
515 }
516
517 [data-theme="light"] .metasync-code-minification-page .metasync-card-header h2,
518 [data-theme="light"] .metasync-code-minification-page .metasync-card-header h3 {
519 color: #111827;
520 }
521
522 [data-theme="light"] .metasync-code-minification-page .metasync-card-subtitle {
523 color: #6b7280;
524 }
525
526 [data-theme="light"] .metasync-code-minification-page .metasync-field label {
527 color: #374151;
528 }
529
530 [data-theme="light"] .metasync-code-minification-page .metasync-field input,
531 [data-theme="light"] .metasync-code-minification-page .metasync-field textarea {
532 background: #f9fafb;
533 border-color: #d1d5db;
534 color: #111827;
535 }
536
537 [data-theme="light"] .metasync-code-minification-page .metasync-field-description {
538 color: #6b7280;
539 }
540
541 [data-theme="light"] .metasync-cache-stat {
542 background: #f9fafb;
543 border-color: #e5e7eb;
544 }
545
546 [data-theme="light"] .metasync-code-minification-page .metasync-notice-success {
547 background: rgba(16, 185, 129, 0.08);
548 color: #059669;
549 }
550
551 [data-theme="light"] .metasync-code-minification-page .metasync-notice-warning {
552 background: rgba(245, 158, 11, 0.08);
553 color: #d97706;
554 }
555
556 [data-theme="light"] .metasync-code-minification-page .metasync-tabs {
557 background: #ffffff;
558 border-color: #e5e7eb;
559 }
560
561 [data-theme="light"] .metasync-code-minification-page .metasync-tab-nav a {
562 color: #6b7280;
563 }
564
565 [data-theme="light"] .metasync-code-minification-page .metasync-tab-nav a:hover {
566 color: #111827;
567 background: rgba(0, 0, 0, 0.03);
568 }
569
570 [data-theme="light"] .metasync-code-minification-page .metasync-tab-nav a.active {
571 color: #111827;
572 background: #f3f4f6;
573 }
574
575 [data-theme="light"] .metasync-section-header {
576 border-bottom-color: #e5e7eb;
577 }
578
579 [data-theme="light"] .metasync-section-header h3 {
580 color: #374151;
581 }
582
583 [data-theme="light"] .metasync-feature-status-item {
584 border-bottom-color: #e5e7eb;
585 color: #6b7280;
586 }
587
588 [data-theme="light"] .metasync-tips-list li {
589 border-bottom-color: #e5e7eb;
590 color: #6b7280;
591 }
592