PluginProbe
Squeeze – Image Optimization & Compression, WEBP Conversion / 1.5
Squeeze – Image Optimization & Compression, WEBP Conversion v1.5
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.5, at assets/css/admin.css

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