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

335 lines 9.1 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-spacing-xl: 2.5rem;
21 --squeeze-spacing-l: 1.5rem;
22 --squeeze-spacing-m: 1rem;
23 --squeeze-spacing-s: 0.5rem;
24 --squeeze-spacing-xs: 0.25rem;
25 --squeeze-font-size-heading: 1.5em;
26 --squeeze-font-size-text-big: 1.125em;
27 --squeeze-font-size-text-small: 0.875em;
28 --squeeze-toggle-x: 6px;
29 --squeeze-range-y: 6px;
30 }
31 @keyframes squeeze-fill-chart {
32 to {
33 stroke-dasharray: 0,1000000;
34 }
35 }
36 .squeeze-box {
37 background-color: var(--squeeze-box-color);
38 border-radius: var(--squeeze-border-radius);
39 margin-bottom: var(--squeeze-spacing-xl);
40 padding: var(--squeeze-spacing-l);
41 position: relative;
42 box-shadow: var(--squeeze-box-shadow);
43 }
44 .squeeze-box.squeeze-box--settings {
45 border-top-left-radius: 0;
46 border-top-right-radius: 0;
47 }
48 .squeeze-box--fieldset {
49 border-radius: var(--squeeze-border-radius-inner);
50 box-shadow: var(--squeeze-box-shadow-inner);
51 background-color: var(--squeeze-light-color);
52 display: inline-block;
53 }
54 .squeeze-box--fieldset .squeeze-box-content {
55 gap: var(--squeeze-spacing-m);
56 }
57 .squeeze-box-header {
58 display: flex;
59 justify-content: space-between;
60 align-items: center;
61 padding-bottom: var(--squeeze-spacing-l);
62 border-bottom: 1px solid var(--squeeze-border-color);
63 }
64 .squeeze-box-header h2 {
65 margin: 0;
66 font-size: var(--squeeze-font-size-heading);
67 font-weight: 400;
68 }
69 .squeeze-box-header__col {
70 display: flex;
71 gap: var(--squeeze-spacing-m);
72 flex-direction: column;
73 }
74 .squeeze-box-content {
75 display: flex;
76 flex-direction: column;
77 gap: var(--squeeze-spacing-l);
78 }
79 .squeeze-box-content__row {
80 display: flex;
81 gap: var(--squeeze-spacing-l);
82 align-items: center;
83 justify-content: space-between;
84 flex-wrap: wrap;
85 }
86 .squeeze-box-content__col {
87 display: flex;
88 flex-direction: column;
89 gap: var(--squeeze-spacing-m);
90 }
91 .squeeze-box-bulk-grid {
92 display: grid;
93 grid-template-columns: repeat(2, minmax(15rem, 1fr));
94 grid-gap: var(--squeeze-spacing-xl);
95 }
96 @media (max-width: 782px) {
97 .squeeze-box-bulk-grid {
98 grid-template-columns: 1fr;
99 }
100 }
101 .squeeze-box-bulk-grid__col {
102 display: flex;
103 flex-direction: column;
104 gap: var(--squeeze-spacing-l);
105 position: relative;
106 }
107 .squeeze-box-bulk-grid__col:not(:nth-child(2))::after {
108 content: "";
109 position: absolute;
110 top: 0;
111 right: calc(var(--squeeze-spacing-xl) / -2);
112 bottom: 0;
113 border-left: 1px solid var(--squeeze-border-color);
114 }
115 .squeeze-box-bulk-grid__row {
116 display: flex;
117 gap: var(--squeeze-spacing-l);
118 align-items: center;
119 justify-content: space-between;
120 grid-column: 1 / -1;
121 position: relative;
122 }
123 .squeeze-box-bulk-grid__row::after {
124 content: "";
125 position: absolute;
126 top: calc(var(--squeeze-spacing-xl) / -2);
127 right: 0;
128 left: 0;
129 border-top: 1px solid var(--squeeze-border-color);
130 }
131 .squeeze-box label input {
132 margin-top: var(--squeeze-spacing-xs);
133 }
134 .squeeze-box .button {
135 border-radius: 10rem;
136 }
137 .squeeze-box input[type="text"],
138 .squeeze-box input[type="number"],
139 .squeeze-box input[type="email"],
140 .squeeze-box input[type="password"],
141 .squeeze-box select {
142 border: 1px solid var(--squeeze-border-color);
143 border-radius: 10rem;
144 }
145 .squeeze-box input[type="range"] {
146 background-color: transparent;
147 vertical-align: middle;
148 accent-color: var(--squeeze-primary-color);
149 }
150 .squeeze-box input[type="range"]::-webkit-slider-runnable-track {
151 border: 1px solid var(--squeeze-border-color);
152 height: var(--squeeze-range-y);
153 }
154 .squeeze-box input[type="range"]::-moz-range-track {
155 border: 1px solid var(--squeeze-border-color);
156 height: var(--squeeze-range-y);
157 }
158 .squeeze-box input[type="range"]::-webkit-slider-thumb {
159 background: var(--squeeze-primary-color);
160 border-radius: 50%;
161 margin-top: calc(var(--squeeze-range-y) / -1);
162 box-shadow: var(--squeeze-box-shadow-toggle);
163 }
164 .squeeze-box input[type="range"]::-moz-range-thumb {
165 background: var(--squeeze-primary-color);
166 border-radius: 50%;
167 margin-top: calc(var(--squeeze-range-y) / -1);
168 box-shadow: var(--squeeze-box-shadow-toggle);
169 }
170 .squeeze-box input[type="range"]::-moz-range-progress {
171 background: var(--squeeze-primary-color);
172 }
173 .squeeze-box input[type="range"] + output {
174 vertical-align: middle;
175 margin-inline-start: 0.5em;
176 }
177 .squeeze-box p {
178 margin-top: 0;
179 margin-bottom: var(--squeeze-spacing-s);
180 }
181 .squeeze-box p:last-child {
182 margin-bottom: 0;
183 }
184 .squeeze-box [name="squeeze_bulk"] .squeeze-icon,
185 .squeeze-box [name="squeeze_bulk_path_button"] .squeeze-icon {
186 fill: var(--squeeze-light-color);
187 }
188 .squeeze-bulk-media-stats {
189 display: flex;
190 gap: var(--squeeze-spacing-m);
191 align-items: center;
192 }
193 .squeeze-bulk-media-stats-item {
194 display: flex;
195 gap: var(--squeeze-spacing-s);
196 flex-direction: column;
197 }
198 .squeeze-bulk-media-stats-item-value {
199 font-size: var(--squeeze-font-size-text-big);
200 font-weight: 700;
201 }
202 .squeeze-bulk-media-stats-chart {
203 display: flex;
204 align-items: center;
205 justify-content: center;
206 position: relative;
207 --squeeze-chart-width: 10;
208 }
209 .squeeze-bulk-media-stats-chart-total {
210 stroke: var(--squeeze-error-color);
211 stroke-width: var(--squeeze-chart-width);
212 }
213 .squeeze-bulk-media-stats-chart-squeezed {
214 stroke: var(--squeeze-success-color);
215 stroke-width: calc(var(--squeeze-chart-width) + 2);
216 stroke-linecap: round;
217 stroke-dasharray: var(--squeeze-dasharray, 0), 565.49;
218 transform: rotate(-90deg);
219 transform-origin: center;
220 filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.15));
221 animation: squeeze-fill-chart 2s 500ms reverse;
222 }
223 .squeeze-bulk-media-stats-chart-value {
224 font-size: var(--squeeze-font-size-text-big);
225 }
226 .squeeze-icon {
227 width: 1rem;
228 height: 1rem;
229 fill: var(--squeeze-primary-color);
230 vertical-align: text-bottom;
231 margin-inline-end: 0.25rem;
232 }
233 .squeeze-hint {
234 font-size: var(--squeeze-font-size-text-small);
235 color: var(--squeeze-text-secondary-color);
236 display: block;
237 margin-top: 1em;
238 }
239 .squeeze-banner {
240 background-color: var(--squeeze-secondary-color);
241 color: var(--squeeze-dark-color);
242 padding: var(--squeeze-spacing-l);
243 border-radius: var(--squeeze-border-radius-inner);
244 display: flex;
245 justify-content: space-between;
246 }
247 .squeeze-banner.squeeze-banner--warning {
248 background-color: var(--squeeze-warning-color);
249 }
250 .squeeze-banner__content p {
251 font-size: var(--squeeze-font-size-text-big);
252 }
253 .squeeze-banner .squeeze-icon {
254 fill: var(--squeeze-text-color);
255 height: 1.5rem;
256 width: 1.5rem;
257 margin: 0;
258 order: 10;
259 }
260 #squeeze_bulk_log {
261 height: 15rem;
262 overflow: auto;
263 background-color: var(--squeeze-table-color);
264 font-family: monospace;
265 align-content: center;
266 }
267 .squeeze-log-placeholder {
268 color: var(--squeeze-text-secondary-color);
269 font-size: var(--squeeze-font-size-heading);
270 text-align: center;
271 }
272 input[type="checkbox"].squeeze-ios8-switch {
273 position: absolute;
274 opacity: 0;
275 margin: var(--squeeze-toggle-x) 0 0 calc(var(--squeeze-toggle-x) * 2);
276 }
277 input[type="checkbox"].squeeze-ios8-switch + label {
278 position: relative;
279 padding: 0 0 0 calc(var(--squeeze-toggle-x) * 6);
280 line-height: calc(var(--squeeze-toggle-x)*3 + 2px);
281 }
282 input[type="checkbox"].squeeze-ios8-switch + label:before {
283 content: "";
284 position: absolute;
285 display: block;
286 left: 0;
287 top: 0;
288 width: calc(var(--squeeze-toggle-x) * 5);
289 /* x*5 */
290 height: calc(var(--squeeze-toggle-x) * 3);
291 /* x*3 */
292 border-radius: calc(var(--squeeze-toggle-x) * 2);
293 /* x*2 */
294 background: var(--squeeze-table-color);
295 border: 1px solid var(--squeeze-border-color);
296 transition: all 0.3s;
297 }
298 input[type="checkbox"].squeeze-ios8-switch + label:after {
299 content: "";
300 position: absolute;
301 display: block;
302 left: 0px;
303 top: 0px;
304 width: calc(var(--squeeze-toggle-x) * 3);
305 /* x*3 */
306 height: calc(var(--squeeze-toggle-x) * 3);
307 /* x*3 */
308 border-radius: calc(var(--squeeze-toggle-x) * 2);
309 /* x*2 */
310 background: var(--squeeze-light-color);
311 border: 1px solid var(--squeeze-border-color);
312 transition: all 0.3s;
313 }
314 input[type="checkbox"].squeeze-ios8-switch + label:hover:after {
315 box-shadow: var(--squeeze-box-shadow-toggle);
316 }
317 input[type="checkbox"].squeeze-ios8-switch:checked + label:after {
318 margin-left: calc(var(--squeeze-toggle-x) * 2);
319 }
320 input[type="checkbox"].squeeze-ios8-switch:checked + label:before {
321 background: var(--squeeze-primary-color);
322 }
323 input[type="checkbox"].squeeze-ios8-switch:focus-visible + label:after {
324 box-shadow: var(--squeeze-box-shadow-toggle);
325 }
326 .squeeze-suboption {
327 position: relative;
328 }
329 .squeeze-setting-units {
330 margin-inline-start: 0.5em;
331 }
332 .form-table tr.squeeze_setting_restore_defaults {
333 display: none;
334 }
335 /*# sourceMappingURL=admin.css.map */