PluginProbe
Squeeze – Image Optimization & Compression, WEBP Conversion / 1.6
Squeeze – Image Optimization & Compression, WEBP Conversion v1.6
1.7.15 1.7.14 1.7.13 1.7.12 1.7.11 1.7.10 trunk 1.0 1.1 1.2 1.3 1.4 1.4.1 1.4.2 1.4.3 1.4.4 1.4.5 1.4.6 1.4.7 1.4.8 1.4.9 1.5 1.5.1 1.5.2 1.6 All 42 releases
squeeze / assets / css / admin.css

admin.css in Squeeze – Image Optimization & Compression, WEBP Conversion 1.6, at assets/css/admin.css

587 lines 15.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 :root {
2 --squeeze-primary-color: #2271b1;
3 --squeeze-secondary-color: #6c757d;
4 --squeeze-success-color: #6BCB77;
5 --squeeze-warning-color: #FFD93D;
6 --squeeze-error-color: #FF6B6B;
7 --squeeze-table-color: #F6F7F7;
8 --squeeze-box-color: #F9F9F9;
9 --squeeze-border-color: #DCDDDF;
10 --squeeze-range-color: #EDEEF1;
11 --squeeze-text-color: #1d2327;
12 --squeeze-text-secondary-color: #6C6C6C;
13 --squeeze-light-color: #fff;
14 --squeeze-dark-color: #000;
15 --squeeze-border-radius: 1rem;
16 --squeeze-border-radius-inner: 0.625rem;
17 --squeeze-box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.15);
18 --squeeze-box-shadow-inner: 0 1px 4px -2px rgba(0, 0, 0, 0.15);
19 --squeeze-box-shadow-toggle: 0 0 6px 0 rgba(0, 0, 0, 0.25);
20 --squeeze-transition: all 0.3s ease;
21 --squeeze-spacing-xl: 2.5rem;
22 --squeeze-spacing-l: 1.5rem;
23 --squeeze-spacing-m: 1rem;
24 --squeeze-spacing-s: 0.5rem;
25 --squeeze-spacing-xs: 0.25rem;
26 --squeeze-font-size-heading: 1.5em;
27 --squeeze-font-size-text-big: 1.125em;
28 --squeeze-font-size-text-small: 0.875em;
29 --squeeze-toggle-x: 6px;
30 --squeeze-range-y: 6px;
31 }
32 @keyframes squeeze-fill-chart {
33 to {
34 stroke-dasharray: 0,1000000;
35 }
36 }
37 @keyframes squeeze-rotate {
38 to {
39 transform: rotate(360deg);
40 }
41 }
42 .squeeze-box {
43 background-color: var(--squeeze-box-color);
44 border-radius: var(--squeeze-border-radius);
45 margin-bottom: var(--squeeze-spacing-l);
46 padding: var(--squeeze-spacing-m);
47 position: relative;
48 box-shadow: var(--squeeze-box-shadow);
49
50 }
51 .squeeze-box.squeeze-box--settings {
52 border-top-left-radius: 0;
53 border-top-right-radius: 0;
54 }
55 .squeeze-box--fieldset {
56 border-radius: var(--squeeze-border-radius-inner);
57 box-shadow: var(--squeeze-box-shadow-inner);
58 background-color: var(--squeeze-light-color);
59 display: inline-block;
60 }
61 .squeeze-box--fieldset .squeeze-box-content {
62 gap: var(--squeeze-spacing-m);
63 }
64 .squeeze-box-header,
65 .squeeze-box-footer {
66 display: flex;
67 justify-content: space-between;
68 align-items: center;
69 padding-bottom: var(--squeeze-spacing-l);
70 border-bottom: 1px solid var(--squeeze-border-color);
71 }
72 .squeeze-box-header h2,
73 .squeeze-box-footer h2 {
74 margin: 0;
75 font-size: var(--squeeze-font-size-heading);
76 font-weight: 400;
77 }
78 .squeeze-box-header__col,
79 .squeeze-box-footer__col {
80 display: flex;
81 gap: var(--squeeze-spacing-m);
82 flex-direction: column;
83 }
84 .squeeze-box-footer {
85 padding-top: var(--squeeze-spacing-l);
86 padding-bottom: 0;
87 border-bottom: none;
88 border-top: 1px solid var(--squeeze-border-color);
89 }
90 .squeeze-box-content {
91 display: flex;
92 flex-direction: column;
93 gap: var(--squeeze-spacing-l);
94 }
95 .squeeze-box-content__row {
96 display: flex;
97 gap: var(--squeeze-spacing-l);
98 align-items: center;
99 justify-content: space-between;
100 flex-wrap: wrap;
101 }
102 .squeeze-box-content__col {
103 display: flex;
104 flex-direction: column;
105 gap: var(--squeeze-spacing-m);
106 }
107 .squeeze-box-bulk-grid {
108 display: grid;
109 grid-template-columns: repeat(2, minmax(15rem, 1fr));
110 grid-gap: var(--squeeze-spacing-xl);
111 }
112 @media (max-width: 782px) {
113 .squeeze-box-bulk-grid {
114 grid-template-columns: 1fr;
115 }
116 }
117 .squeeze-box-bulk-grid__col {
118 display: flex;
119 flex-direction: column;
120 gap: var(--squeeze-spacing-l);
121 position: relative;
122 }
123 .squeeze-box-bulk-grid__col:not(:nth-child(2))::after {
124 content: "";
125 position: absolute;
126 top: 0;
127 right: calc(var(--squeeze-spacing-xl) / -2);
128 bottom: 0;
129 border-left: 1px solid var(--squeeze-border-color);
130 }
131 .squeeze-box-bulk-grid__row {
132 display: flex;
133 gap: var(--squeeze-spacing-l);
134 align-items: center;
135 justify-content: space-between;
136 grid-column: 1 / -1;
137 position: relative;
138 }
139 .squeeze-box-bulk-grid__row::after {
140 content: "";
141 position: absolute;
142 top: calc(var(--squeeze-spacing-xl) / -2);
143 right: 0;
144 left: 0;
145 border-top: 1px solid var(--squeeze-border-color);
146 }
147 .squeeze-box-bulk-page {
148 grid-column: 1 / -1;
149 }
150 .squeeze-box-bulk-page .squeeze-box-content__row {
151 justify-content: flex-start;
152 }
153 .squeeze-box label input {
154 margin-top: var(--squeeze-spacing-xs);
155 }
156 .squeeze-box .button {
157 border-radius: 10rem;
158 }
159 .squeeze-box input[type="text"],
160 .squeeze-box input[type="number"],
161 .squeeze-box input[type="email"],
162 .squeeze-box input[type="password"],
163 .squeeze-box textarea,
164 .squeeze-box select {
165 border: 1px solid var(--squeeze-border-color);
166 border-radius: 10rem;
167 }
168 .squeeze-box textarea {
169 min-height: 5em;
170 width: 20em;
171 border-radius: var(--squeeze-border-radius-inner);
172 }
173 .squeeze-box input[type="range"] {
174 background-color: transparent;
175 vertical-align: middle;
176 accent-color: var(--squeeze-primary-color);
177 }
178 .squeeze-box input[type="range"]::-webkit-slider-runnable-track {
179 border: 1px solid var(--squeeze-border-color);
180 height: var(--squeeze-range-y);
181 }
182 .squeeze-box input[type="range"]::-moz-range-track {
183 border: 1px solid var(--squeeze-border-color);
184 height: var(--squeeze-range-y);
185 }
186 .squeeze-box input[type="range"]::-webkit-slider-thumb {
187 background: var(--squeeze-primary-color);
188 border-radius: 50%;
189 margin-top: calc(var(--squeeze-range-y) / -1);
190 box-shadow: var(--squeeze-box-shadow-toggle);
191 }
192 .squeeze-box input[type="range"]::-moz-range-thumb {
193 background: var(--squeeze-primary-color);
194 border-radius: 50%;
195 margin-top: calc(var(--squeeze-range-y) / -1);
196 box-shadow: var(--squeeze-box-shadow-toggle);
197 }
198 .squeeze-box input[type="range"]::-moz-range-progress {
199 background: var(--squeeze-primary-color);
200 }
201 .squeeze-box input[type="range"] + output {
202 vertical-align: middle;
203 margin-inline-start: 0.5em;
204 }
205 .squeeze-box p {
206 margin-top: 0;
207 margin-bottom: var(--squeeze-spacing-s);
208 }
209 .squeeze-box p:last-child {
210 margin-bottom: 0;
211 }
212 .squeeze-box [name="squeeze_bulk"] .squeeze-icon,
213 .squeeze-box [name="squeeze_bulk_path_button"] .squeeze-icon {
214 fill: var(--squeeze-light-color);
215 }
216 .squeeze-bulk-media-stats {
217 display: flex;
218 gap: var(--squeeze-spacing-m);
219 align-items: center;
220 }
221 .squeeze-bulk-media-stats-item {
222 display: flex;
223 gap: var(--squeeze-spacing-s);
224 flex-direction: column;
225 }
226 .squeeze-bulk-media-stats-item-value {
227 font-size: var(--squeeze-font-size-text-big);
228 font-weight: 700;
229 }
230 .squeeze-bulk-media-stats-item-label .squeeze-icon {
231 animation: squeeze-rotate 1s linear infinite;
232 }
233 .squeeze-bulk-media-stats-chart {
234 display: flex;
235 align-items: center;
236 justify-content: center;
237 position: relative;
238 --squeeze-chart-width: 10;
239 }
240 .squeeze-bulk-media-stats-chart-total {
241 stroke: var(--squeeze-error-color);
242 stroke-width: var(--squeeze-chart-width);
243 }
244 .squeeze-bulk-media-stats-chart-squeezed {
245 stroke: var(--squeeze-success-color);
246 stroke-width: calc(var(--squeeze-chart-width) + 2);
247 stroke-linecap: round;
248 stroke-dasharray: var(--squeeze-dasharray, 0), 565.49;
249 transform: rotate(-90deg);
250 transform-origin: center;
251 filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.15));
252 animation: squeeze-fill-chart 2s 500ms reverse;
253 transition: stroke-dasharray 500ms linear;
254 }
255 .squeeze-bulk-media-stats-chart-value {
256 font-size: var(--squeeze-font-size-text-big);
257 }
258 .squeeze-icon {
259 width: 1rem;
260 height: 1rem;
261 fill: var(--squeeze-primary-color);
262 vertical-align: text-bottom;
263 margin-inline-end: 0.25rem;
264 }
265 .squeeze-hint {
266 font-size: var(--squeeze-font-size-text-small);
267 color: var(--squeeze-text-secondary-color);
268 display: block;
269 margin-top: 1em;
270 }
271 .squeeze-banner {
272 background-color: var(--squeeze-secondary-color);
273 color: var(--squeeze-dark-color);
274 padding: var(--squeeze-spacing-l);
275 border-radius: var(--squeeze-border-radius-inner);
276 display: flex;
277 justify-content: space-between;
278 }
279 .squeeze-banner.squeeze-banner--warning {
280 background-color: var(--squeeze-warning-color);
281 }
282 .squeeze-banner__content p {
283 font-size: var(--squeeze-font-size-text-big);
284 }
285 .squeeze-banner .squeeze-icon {
286 fill: var(--squeeze-text-color);
287 height: 1.5rem;
288 width: 1.5rem;
289 margin: 0;
290 order: 10;
291 }
292 #squeeze_bulk_log {
293 height: 15rem;
294 overflow: auto;
295 background-color: var(--squeeze-table-color);
296 align-content: center;
297 }
298 #squeeze_bulk_log:has(#squeeze-log-data > *:nth-child(4)) {
299 height: 45rem;
300 }
301 #squeeze_bulk_log * {
302 overflow-anchor: none;
303 }
304 #squeeze-anchor {
305 overflow-anchor: auto;
306 height: 1px;
307 }
308 .squeeze-log-placeholder {
309 font-family: monospace;
310 color: var(--squeeze-text-secondary-color);
311 font-size: var(--squeeze-font-size-heading);
312 text-align: center;
313 }
314 .squeeze-log-placeholder + * {
315 margin-top: var(--squeeze-spacing-m);
316 }
317 input[type="checkbox"].squeeze-ios8-switch {
318 position: absolute;
319 opacity: 0;
320 margin: var(--squeeze-toggle-x) 0 0 calc(var(--squeeze-toggle-x) * 2);
321 }
322 input[type="checkbox"].squeeze-ios8-switch + label {
323 position: relative;
324 padding: 0 0 0 calc(var(--squeeze-toggle-x) * 6);
325 line-height: calc(var(--squeeze-toggle-x)*3 + 2px);
326 }
327 input[type="checkbox"].squeeze-ios8-switch + label:before {
328 content: "";
329 position: absolute;
330 display: block;
331 left: 0;
332 top: 0;
333 width: calc(var(--squeeze-toggle-x) * 5);
334 /* x*5 */
335 height: calc(var(--squeeze-toggle-x) * 3);
336 /* x*3 */
337 border-radius: calc(var(--squeeze-toggle-x) * 2);
338 /* x*2 */
339 background: var(--squeeze-table-color);
340 border: 1px solid var(--squeeze-border-color);
341 transition: all 0.3s;
342 }
343 input[type="checkbox"].squeeze-ios8-switch + label:after {
344 content: "";
345 position: absolute;
346 display: block;
347 left: 0px;
348 top: 0px;
349 width: calc(var(--squeeze-toggle-x) * 3);
350 /* x*3 */
351 height: calc(var(--squeeze-toggle-x) * 3);
352 /* x*3 */
353 border-radius: calc(var(--squeeze-toggle-x) * 2);
354 /* x*2 */
355 background: var(--squeeze-light-color);
356 border: 1px solid var(--squeeze-border-color);
357 transition: all 0.3s;
358 }
359 input[type="checkbox"].squeeze-ios8-switch + label:hover:after {
360 box-shadow: var(--squeeze-box-shadow-toggle);
361 }
362 input[type="checkbox"].squeeze-ios8-switch:checked + label:after {
363 margin-left: calc(var(--squeeze-toggle-x) * 2);
364 }
365 input[type="checkbox"].squeeze-ios8-switch:checked + label:before {
366 background: var(--squeeze-primary-color);
367 }
368 input[type="checkbox"].squeeze-ios8-switch:focus-visible + label:after {
369 box-shadow: var(--squeeze-box-shadow-toggle);
370 }
371 .squeeze-suboption {
372 position: relative;
373 }
374 .squeeze-setting-units {
375 margin-inline-start: 0.5em;
376 }
377 .form-table tr.squeeze_setting_restore_defaults {
378 display: none;
379 }
380 .form-table tr:has(.squeeze-hidden) {
381 display: none;
382 }
383 .js .squeeze-single-file-upload-notice:has(+ .html-uploader) {
384 display: block;
385 }
386 #squeeze-path-dialog {
387 padding: var(--squeeze-spacing-l);
388 border: none;
389 border-radius: var(--squeeze-border-radius);
390 width: 25rem;
391 max-width: 100%;
392 box-shadow: var(--squeeze-box-shadow);
393 overflow: hidden;
394 }
395 #squeeze-path-dialog .squeeze-box-header {
396 padding-bottom: var(--squeeze-spacing-m);
397 }
398 #squeeze-path-dialog [name="squeeze_close_path_dialog_button"] .squeeze-icon {
399 fill: var(--squeeze-text-color);
400 margin: 0;
401 }
402 #squeeze-path-dialog [name="squeeze_save_path_button"] {
403 width: 100%;
404 }
405 #squeeze-bulk-directory-list {
406 max-height: 60vh;
407 overflow: auto;
408 padding: var(--squeeze-spacing-m) 0;
409 }
410 #squeeze-bulk-directory-list .squeeze-icon {
411 animation: squeeze-rotate 1s linear infinite;
412 }
413 .directory-item {
414 display: flex;
415 align-items: flex-start;
416 gap: var(--squeeze-spacing-s);
417 flex-direction: column;
418 }
419 .directory-item .directory-item__inner {
420 display: flex;
421 align-items: center;
422 gap: var(--squeeze-spacing-s);
423 }
424 .directory-item .directory-item__inner > label {
425 padding-left: var(--squeeze-spacing-l);
426 background-image: url(../images/computer-folder-close-icon.svg);
427 background-position: left 0.15rem center;
428 background-repeat: no-repeat;
429 background-size: var(--squeeze-spacing-m);
430 }
431 .directory-item.loading {
432 opacity: 0.5;
433 }
434 .directory-item > .directory-item {
435 padding-left: var(--squeeze-spacing-m);
436 }
437 .directory-item:not(.opened) > .directory-item {
438 display: none;
439 }
440 .directory-item.opened > .directory-item__inner > label {
441 background-image: url(../images/computer-folder-open-icon.svg);
442 }
443 .directory-item label {
444 cursor: pointer;
445 text-decoration: underline;
446 text-underline-offset: 0.3em;
447 text-decoration-style: dashed;
448 }
449 .directory-item label:hover {
450 color: var(--squeeze-primary-color);
451 }
452 .directory-item input[type="checkbox"],
453 .directory-item input[type="radio"] {
454 margin: 0;
455 }
456 .squeeze-path-list {
457 display: flex;
458 flex-direction: column;
459 gap: var(--squeeze-spacing-s);
460 }
461 .squeeze-path-list input[type="text"].squeeze-path-list__item {
462 min-width: 15rem;
463 font-family: monospace;
464 border: 0;
465 border-radius: 0;
466 background-color: var(--squeeze-border-color);
467 padding: var(--squeeze-spacing-xs) var(--squeeze-spacing-s);
468 }
469 .media-log-wrapper {
470 display: flex;
471 flex-direction: column;
472 gap: var(--squeeze-spacing-m);
473 padding: var(--squeeze-spacing-m);
474 border-radius: var(--squeeze-border-radius-inner);
475 background-color: var(--squeeze-light-color);
476 }
477 .media-log-wrapper h3 {
478 margin: 0;
479 display: flex;
480 gap: var(--squeeze-spacing-s);
481 align-items: center;
482 position: relative;
483 z-index: 1;
484 }
485 .media-log-wrapper h3 .squeeze-icon {
486 margin: 0;
487 width: 1.5rem;
488 height: 1.5rem;
489 }
490 .media-log-wrapper .button-link {
491 align-self: flex-start;
492 }
493 .media-log-wrapper .squeeze-comparison-table {
494 display: none;
495 }
496 .media-log-wrapper .squeeze-comparison-table.show {
497 display: block;
498 }
499 .media-log-wrapper table.widefat {
500 border: 0;
501 border-top: 1px solid var(--squeeze-border-color);
502 border-bottom: 1px solid var(--squeeze-border-color);
503 }
504 .media-log-process {
505 display: flex;
506 gap: var(--squeeze-spacing-xl);
507 position: relative;
508 padding-inline-start: var(--squeeze-spacing-xl);
509 width: fit-content;
510 }
511 .media-log-process::before {
512 content: "";
513 position: absolute;
514 top: 0.5rem;
515 left: 0.75rem;
516 right: 0;
517 translate: 0 -100%;
518 height: calc(0.75em + 0.75rem + var(--squeeze-spacing-m));
519 border-left: 1px solid var(--squeeze-border-color);
520 border-bottom: 1px solid var(--squeeze-border-color);
521 border-bottom-left-radius: var(--squeeze-border-radius);
522 transition: var(--squeeze-transition);
523 }
524 .media-log-process::after {
525 content: "";
526 position: absolute;
527 top: 0.5rem;
528 right: 0;
529 width: 0.5rem;
530 height: 0.5rem;
531 border: 1px solid var(--squeeze-border-color);
532 border-radius: 50%;
533 translate: 100% -50%;
534 }
535 .media-log-step {
536 display: flex;
537 flex-direction: column;
538 gap: var(--squeeze-spacing-s);
539 align-items: center;
540 position: relative;
541 }
542 .media-log-step .squeeze-icon {
543 fill: var(--squeeze-primary-color);
544 margin: 0;
545 }
546 .media-log-step .squeeze-icon.check-mark-circle-icon {
547 fill: var(--squeeze-success-color);
548 }
549 .media-log-step .squeeze-icon.ban-sign-icon {
550 fill: var(--squeeze-error-color);
551 }
552 .media-log-step span {
553 font-size: var(--squeeze-font-size-text-big);
554 color: var(--squeeze-text-secondary-color);
555 }
556 #squeeze-log-data {
557 display: flex;
558 flex-direction: column;
559 gap: var(--squeeze-spacing-m);
560 }
561 .squeeze-comparison-table table tr {
562 display: table-row;
563 }
564 .squeeze-savings-label {
565 color: var(--squeeze-light-color);
566 padding: var(--squeeze-spacing-xs) var(--squeeze-spacing-s);
567 border-radius: 0.25rem;
568 position: relative;
569 white-space: nowrap;
570 }
571 .squeeze-savings-label.squeeze-savings-positive {
572 background-color: var(--squeeze-success-color);
573 }
574 .squeeze-savings-label.squeeze-savings-positive::after {
575 content: "\25bc";
576 position: relative;
577 margin-inline-start: 0.5em;
578 }
579 .squeeze-savings-label.squeeze-savings-negative {
580 background-color: var(--squeeze-error-color);
581 }
582 .squeeze-savings-label.squeeze-savings-negative::after {
583 content: "\25b2";
584 position: relative;
585 margin-inline-start: 0.5em;
586 }
587 /*# sourceMappingURL=admin.css.map */