|
1 /*------------------------------------------------------------------------------ |
|
2 16.0 - Themes |
|
3 ------------------------------------------------------------------------------*/ |
|
4 |
|
5 |
|
6 /*------------------------------------------------------------------------------ |
|
7 16.1 - Manage Themes |
|
8 ------------------------------------------------------------------------------*/ |
|
9 |
|
10 .theme-browser .themes { |
|
11 clear: both; |
|
12 padding: 0 0 100px; |
|
13 } |
|
14 |
|
15 .themes-php .wrap h2 { |
|
16 float: left; |
|
17 margin-bottom: 15px; |
|
18 } |
|
19 |
|
20 .network-admin.themes-php .wrap h2 { |
|
21 margin-bottom: 0; |
|
22 } |
|
23 |
|
24 .themes-php .wrap h2 .button { |
|
25 margin-left: 20px; |
|
26 } |
|
27 |
|
28 /* Search form */ |
|
29 .themes-php .wp-filter-search { |
|
30 position: relative; |
|
31 top: -2px; |
|
32 left: 20px; |
|
33 margin: 0; |
|
34 width: 280px; |
|
35 font-size: 16px; |
|
36 font-weight: 300; |
|
37 line-height: 1.5; |
|
38 } |
|
39 |
|
40 /* Position admin messages */ |
|
41 .themes-php div.updated, |
|
42 .themes-php div.error, |
|
43 .themes-php div.notice { |
|
44 margin: 0 0 20px 0; |
|
45 clear: both; |
|
46 } |
|
47 |
|
48 .themes-php div.updated a { |
|
49 text-decoration: underline; |
|
50 } |
|
51 |
|
52 /** |
|
53 * Main theme element |
|
54 * (has flexible margins) |
|
55 */ |
|
56 .theme-browser .theme { |
|
57 cursor: pointer; |
|
58 float: left; |
|
59 margin: 0 4% 4% 0; |
|
60 position: relative; |
|
61 width: 30.6%; |
|
62 border: 1px solid #dedede; |
|
63 -webkit-box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1); |
|
64 box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1); |
|
65 -webkit-box-sizing: border-box; |
|
66 -moz-box-sizing: border-box; |
|
67 box-sizing: border-box; |
|
68 } |
|
69 |
|
70 .ie8 .theme-browser .theme { |
|
71 width: 30%; |
|
72 margin: 0 3% 4% 0; |
|
73 } |
|
74 |
|
75 .theme-browser .theme:nth-child(3n) { |
|
76 margin-right: 0; |
|
77 } |
|
78 |
|
79 .theme-browser .theme:hover, |
|
80 .theme-browser .theme:focus { |
|
81 cursor: pointer; |
|
82 } |
|
83 |
|
84 .theme-browser .theme .theme-name { |
|
85 font-size: 15px; |
|
86 font-weight: 600; |
|
87 height: 18px; |
|
88 margin: 0; |
|
89 padding: 15px; |
|
90 -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); |
|
91 box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); |
|
92 overflow: hidden; |
|
93 white-space: nowrap; |
|
94 text-overflow: ellipsis; |
|
95 background: #fff; |
|
96 background: rgba(255,255,255,0.65); |
|
97 } |
|
98 |
|
99 /* Activate and Customize buttons, shown on hover and focus */ |
|
100 .theme-browser .theme .theme-actions { |
|
101 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; |
|
102 opacity: 0; |
|
103 -webkit-transition: opacity 0.1s ease-in-out; |
|
104 transition: opacity 0.1s ease-in-out; |
|
105 position: absolute; |
|
106 bottom: 0; |
|
107 right: 0; |
|
108 height: 38px; |
|
109 padding: 9px 10px 0 10px; |
|
110 background: rgba(244, 244, 244, 0.7); |
|
111 border-left: 1px solid rgba(0,0,0,0.05); |
|
112 } |
|
113 |
|
114 .theme-browser .theme:hover .theme-actions, |
|
115 .theme-browser .theme.focus .theme-actions, |
|
116 .theme-browser .theme:focus .theme-actions { |
|
117 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; |
|
118 opacity: 1; |
|
119 } |
|
120 |
|
121 .theme-browser .theme .theme-actions .button-primary { |
|
122 margin-right: 3px; |
|
123 } |
|
124 |
|
125 .theme-browser .theme .theme-actions .button-secondary { |
|
126 float: none; |
|
127 margin-left: 3px; |
|
128 } |
|
129 |
|
130 /** |
|
131 * Theme Screenshot |
|
132 * |
|
133 * Has a fixed aspect ratio of 1.5 to 1 regardless of screenshot size |
|
134 * It is also responsive. |
|
135 */ |
|
136 .theme-browser .theme .theme-screenshot { |
|
137 display: block; |
|
138 overflow: hidden; |
|
139 position: relative; |
|
140 -webkit-transition: opacity 0.2s ease-in-out; |
|
141 transition: opacity 0.2s ease-in-out; |
|
142 } |
|
143 |
|
144 .theme-browser .theme .theme-screenshot:after { |
|
145 content: ''; |
|
146 display: block; |
|
147 padding-top: 66.66666%; /* using a 3/2 aspect ratio */ |
|
148 } |
|
149 |
|
150 .theme-browser .theme .theme-screenshot img { |
|
151 height: auto; |
|
152 position: absolute; |
|
153 left: 0; |
|
154 top: 0; |
|
155 width: 100%; |
|
156 -webkit-transition: opacity 0.2s ease-in-out; |
|
157 transition: opacity 0.2s ease-in-out; |
|
158 } |
|
159 |
|
160 .theme-browser .theme:hover .theme-screenshot, |
|
161 .theme-browser .theme:focus .theme-screenshot { |
|
162 background: #fff; |
|
163 } |
|
164 |
|
165 .theme-browser.rendered .theme:hover .theme-screenshot img, |
|
166 .theme-browser.rendered .theme:focus .theme-screenshot img { |
|
167 opacity: 0.4; |
|
168 } |
|
169 |
|
170 .theme-browser .theme .more-details { |
|
171 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; |
|
172 opacity: 0; |
|
173 position: absolute; |
|
174 top: 35%; |
|
175 right: 25%; |
|
176 left: 25%; |
|
177 background: #23282d; |
|
178 background: rgba(0,0,0,0.7); |
|
179 color: #fff; |
|
180 font-size: 15px; |
|
181 text-shadow: 0 1px 0 rgba(0,0,0,0.6); |
|
182 -webkit-font-smoothing: antialiased; |
|
183 font-weight: 600; |
|
184 padding: 15px 12px; |
|
185 text-align: center; |
|
186 -webkit-border-radius: 3px; |
|
187 border-radius: 3px; |
|
188 -webkit-transition: opacity 0.1s ease-in-out; |
|
189 transition: opacity 0.1s ease-in-out; |
|
190 } |
|
191 |
|
192 .theme-browser .theme:focus { |
|
193 border-color: #5b9dd9; |
|
194 -webkit-box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 ); |
|
195 box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 ); |
|
196 } |
|
197 |
|
198 .theme-browser .theme:focus .more-details { |
|
199 opacity: 1; |
|
200 } |
|
201 |
|
202 /* Current theme needs to have its action always on view */ |
|
203 .theme-browser .theme.active:focus .theme-actions { |
|
204 display: block; |
|
205 } |
|
206 |
|
207 .theme-browser.rendered .theme:hover .more-details, |
|
208 .theme-browser.rendered .theme:focus .more-details { |
|
209 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; |
|
210 opacity: 1; |
|
211 } |
|
212 |
|
213 /** |
|
214 * Displays a theme update notice |
|
215 * when an update is available. |
|
216 */ |
|
217 .theme-browser .theme .theme-update, |
|
218 .theme-browser .theme .theme-installed { |
|
219 background: #d54e21; |
|
220 background: rgba(213, 78, 33, 0.95); |
|
221 color: #fff; |
|
222 display: block; |
|
223 font-size: 13px; |
|
224 font-weight: 400; |
|
225 height: 48px; |
|
226 line-height: 48px; |
|
227 padding: 0 10px; |
|
228 position: absolute; |
|
229 top: 0; |
|
230 right: 0; |
|
231 left: 0; |
|
232 border-bottom: 1px solid rgba(0,0,0,0.25); |
|
233 overflow: hidden; |
|
234 } |
|
235 |
|
236 .theme-browser .theme .theme-update:before, |
|
237 .theme-browser .theme .theme-installed:before { |
|
238 content: '\f463'; |
|
239 display: inline-block; |
|
240 font: normal 20px/1 'dashicons'; |
|
241 margin: 0 6px 0 0; |
|
242 opacity: 0.8; |
|
243 position: relative; |
|
244 top: 5px; |
|
245 speak: none; |
|
246 -webkit-font-smoothing: antialiased; |
|
247 } |
|
248 |
|
249 |
|
250 /** |
|
251 * The currently active theme |
|
252 */ |
|
253 .theme-browser .theme.active .theme-name { |
|
254 background: #2f2f2f; |
|
255 color: #fff; |
|
256 padding-right: 110px; |
|
257 font-weight: 300; |
|
258 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.5); |
|
259 box-shadow: inset 0 1px 1px rgba(0,0,0,0.5); |
|
260 } |
|
261 |
|
262 .theme-browser .customize-control .theme.active .theme-name { |
|
263 padding-right: 15px; |
|
264 } |
|
265 |
|
266 .theme-browser .theme.active .theme-name span { |
|
267 font-weight: 600; |
|
268 } |
|
269 |
|
270 .theme-browser .theme.active .theme-actions { |
|
271 background: rgba(49,49,49,0.7); |
|
272 border-left: none; |
|
273 opacity: 1; |
|
274 } |
|
275 |
|
276 .theme-browser .theme.active .theme-actions .button-primary { |
|
277 margin-right: 0; |
|
278 } |
|
279 |
|
280 .theme-browser .theme .theme-author { |
|
281 background: #23282d; |
|
282 color: #eee; |
|
283 display: none; |
|
284 font-size: 14px; |
|
285 margin: 0 10px; |
|
286 padding: 5px 10px; |
|
287 position: absolute; |
|
288 bottom: 56px; |
|
289 } |
|
290 |
|
291 .theme-browser .theme.display-author .theme-author { |
|
292 display: block; |
|
293 } |
|
294 |
|
295 .theme-browser .theme.display-author .theme-author a { |
|
296 color: inherit; |
|
297 text-decoration: none; |
|
298 } |
|
299 |
|
300 /** |
|
301 * Add new theme |
|
302 */ |
|
303 .theme-browser .theme.add-new-theme { |
|
304 border: none; |
|
305 -webkit-box-shadow: none; |
|
306 box-shadow: none; |
|
307 } |
|
308 |
|
309 .theme-browser .theme.add-new-theme a { |
|
310 color: #999; |
|
311 text-decoration: none; |
|
312 display: block; |
|
313 position: relative; |
|
314 z-index: 1; |
|
315 } |
|
316 |
|
317 .theme-browser .theme.add-new-theme a:after { |
|
318 display: block; |
|
319 content: ''; |
|
320 background: transparent; |
|
321 background: rgba(0, 0, 0, 0); |
|
322 position: absolute; |
|
323 top: 0; |
|
324 left: 0; |
|
325 right: 0; |
|
326 bottom: 0; |
|
327 padding: 0; |
|
328 text-shadow: none; |
|
329 border: 5px dashed #d5d2ca; |
|
330 border: 5px dashed rgba(0, 0, 0, 0.1); |
|
331 -webkit-box-sizing: border-box; |
|
332 -moz-box-sizing: border-box; |
|
333 box-sizing: border-box; |
|
334 } |
|
335 |
|
336 .theme-browser .theme.add-new-theme span:after { |
|
337 background: #e5e5e5; |
|
338 background: rgba(153, 153, 153, 0.1); |
|
339 -webkit-border-radius: 50%; |
|
340 border-radius: 50%; |
|
341 display: inline-block; |
|
342 content: '\f132'; |
|
343 -webkit-font-smoothing: antialiased; |
|
344 font: normal 74px/115px 'dashicons'; |
|
345 width: 100px; |
|
346 height: 100px; |
|
347 vertical-align: middle; |
|
348 text-align: center; |
|
349 color: rgb(153, 153, 153); |
|
350 position: absolute; |
|
351 top: 30%; |
|
352 left: 50%; |
|
353 margin-left: -50px; |
|
354 text-indent: -4px; |
|
355 padding: 0; |
|
356 text-shadow: none; |
|
357 z-index:4; |
|
358 } |
|
359 |
|
360 .rtl .theme-browser .theme.add-new-theme span:after { |
|
361 text-indent: 4px; |
|
362 } |
|
363 |
|
364 .theme-browser .theme.add-new-theme a:hover .theme-screenshot, |
|
365 .theme-browser .theme.add-new-theme a:focus .theme-screenshot { |
|
366 background: none; |
|
367 } |
|
368 |
|
369 .theme-browser .theme.add-new-theme a:hover span:after, |
|
370 .theme-browser .theme.add-new-theme a:focus span:after { |
|
371 background: #fff; |
|
372 color: #0073aa; |
|
373 } |
|
374 |
|
375 .theme-browser .theme.add-new-theme a:hover:after, |
|
376 .theme-browser .theme.add-new-theme a:focus:after { |
|
377 border-color: transparent; |
|
378 color: #fff; |
|
379 background: #0073aa; |
|
380 content: ''; |
|
381 } |
|
382 |
|
383 .theme-browser .theme.add-new-theme .theme-name { |
|
384 background: none; |
|
385 text-align: center; |
|
386 -webkit-box-shadow: none; |
|
387 box-shadow: none; |
|
388 font-weight: 400; |
|
389 position: relative; |
|
390 top: 0; |
|
391 margin-top: -18px; |
|
392 padding-top: 0; |
|
393 padding-bottom: 48px; |
|
394 } |
|
395 |
|
396 .theme-browser .theme.add-new-theme a:hover .theme-name, |
|
397 .theme-browser .theme.add-new-theme a:focus .theme-name { |
|
398 color: #fff; |
|
399 z-index: 2; |
|
400 } |
|
401 |
|
402 /** |
|
403 * Theme Overlay |
|
404 * Shown when clicking a theme |
|
405 */ |
|
406 .theme-overlay .theme-backdrop { |
|
407 position: absolute; |
|
408 left: -20px; |
|
409 right: 0; |
|
410 top: 0; |
|
411 bottom: 0; |
|
412 background: #f1f1f1; |
|
413 background: rgba( 238, 238, 238, 0.9 ); |
|
414 z-index: 10; |
|
415 } |
|
416 |
|
417 .theme-overlay .theme-header { |
|
418 position: absolute; |
|
419 top: 0; |
|
420 left: 0; |
|
421 right: 0; |
|
422 height: 48px; |
|
423 border-bottom: 1px solid #ddd; |
|
424 } |
|
425 |
|
426 .theme-overlay .theme-header button { |
|
427 padding: 0; |
|
428 } |
|
429 |
|
430 .theme-overlay .theme-header .close { |
|
431 cursor: pointer; |
|
432 height: 48px; |
|
433 width: 50px; |
|
434 text-align: center; |
|
435 float: right; |
|
436 border: 0; |
|
437 border-left: 1px solid #ddd; |
|
438 background-color: transparent; |
|
439 -webkit-transition: color .1s ease-in-out, background .1s ease-in-out; |
|
440 transition: color .1s ease-in-out, background .1s ease-in-out; |
|
441 } |
|
442 |
|
443 .theme-overlay .theme-header .close:before { |
|
444 font: normal 22px/50px 'dashicons' !important; |
|
445 color: #777; |
|
446 display: inline-block; |
|
447 content: '\f335'; |
|
448 font-weight: 300; |
|
449 } |
|
450 |
|
451 /* Left and right navigation */ |
|
452 .theme-overlay .theme-header .right, |
|
453 .theme-overlay .theme-header .left { |
|
454 cursor: pointer; |
|
455 color: #777; |
|
456 background-color: transparent; |
|
457 height: 48px; |
|
458 width: 54px; |
|
459 float: left; |
|
460 text-align: center; |
|
461 border: 0; |
|
462 border-right: 1px solid #ddd; |
|
463 -webkit-transition: color .1s ease-in-out, background .1s ease-in-out; |
|
464 transition: color .1s ease-in-out, background .1s ease-in-out; |
|
465 } |
|
466 |
|
467 .theme-overlay .theme-header .close:focus, |
|
468 .theme-overlay .theme-header .close:hover, |
|
469 .theme-overlay .theme-header .right:focus, |
|
470 .theme-overlay .theme-header .right:hover, |
|
471 .theme-overlay .theme-header .left:focus, |
|
472 .theme-overlay .theme-header .left:hover { |
|
473 background: #ddd; |
|
474 border-color: #ccc; |
|
475 color: #000; |
|
476 } |
|
477 |
|
478 .theme-overlay .theme-header .close:focus:before, |
|
479 .theme-overlay .theme-header .close:hover:before { |
|
480 color: #000; |
|
481 } |
|
482 |
|
483 .theme-overlay .theme-header .close:focus, |
|
484 .theme-overlay .theme-header .right:focus, |
|
485 .theme-overlay .theme-header .left:focus { |
|
486 -webkit-box-shadow: none; |
|
487 box-shadow: none; |
|
488 outline: none; |
|
489 } |
|
490 |
|
491 .theme-overlay .theme-header .left.disabled, |
|
492 .theme-overlay .theme-header .right.disabled, |
|
493 .theme-overlay .theme-header .left.disabled:hover, |
|
494 .theme-overlay .theme-header .right.disabled:hover { |
|
495 color: #ccc; |
|
496 background: inherit; |
|
497 cursor: inherit; |
|
498 } |
|
499 |
|
500 .theme-overlay .theme-header .right:before, |
|
501 .theme-overlay .theme-header .left:before { |
|
502 font: normal 20px/50px 'dashicons' !important; |
|
503 display: inline; |
|
504 font-weight: 300; |
|
505 } |
|
506 |
|
507 .theme-overlay .theme-header .left:before { |
|
508 content: "\f341"; |
|
509 } |
|
510 |
|
511 .theme-overlay .theme-header .right:before { |
|
512 content: "\f345"; |
|
513 } |
|
514 |
|
515 |
|
516 |
|
517 .theme-overlay .theme-wrap { |
|
518 clear: both; |
|
519 position: fixed; |
|
520 top: 9%; |
|
521 left: 190px; |
|
522 right: 30px; |
|
523 bottom: 3%; |
|
524 background: #fff; |
|
525 -webkit-box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1); |
|
526 box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1); |
|
527 z-index: 20; |
|
528 -webkit-box-sizing: border-box; |
|
529 -moz-box-sizing: border-box; |
|
530 box-sizing: border-box; |
|
531 -webkit-overflow-scrolling: touch; |
|
532 } |
|
533 |
|
534 .theme-overlay .theme-wrap:after { |
|
535 content: "."; |
|
536 display: block; |
|
537 height: 0; |
|
538 clear: both; |
|
539 visibility: hidden; |
|
540 } |
|
541 |
|
542 body.folded .theme-overlay .theme-wrap { |
|
543 left: 70px; |
|
544 } |
|
545 |
|
546 .theme-overlay .theme-about { |
|
547 position: absolute; |
|
548 top: 49px; |
|
549 bottom: 57px; |
|
550 left: 0; |
|
551 right: 0; |
|
552 overflow: auto; |
|
553 padding: 2% 4%; |
|
554 } |
|
555 .theme-overlay .theme-about:after { |
|
556 content: "."; |
|
557 display: block; |
|
558 height: 0; |
|
559 clear: both; |
|
560 visibility: hidden; |
|
561 } |
|
562 |
|
563 .theme-overlay .theme-actions { |
|
564 position: absolute; |
|
565 text-align: center; |
|
566 bottom: 0; |
|
567 left: 0; |
|
568 right: 0; |
|
569 padding: 10px 25px 5px; |
|
570 background: #f3f3f3; |
|
571 z-index: 30; |
|
572 -webkit-box-sizing: border-box; |
|
573 -moz-box-sizing: border-box; |
|
574 box-sizing: border-box; |
|
575 border-top: 1px solid #eee; |
|
576 } |
|
577 |
|
578 .ie8 .theme-overlay .theme-actions { |
|
579 border: 1px solid #eee; |
|
580 } |
|
581 |
|
582 .theme-overlay .theme-actions a { |
|
583 margin-right: 5px; |
|
584 margin-bottom: 5px; |
|
585 } |
|
586 |
|
587 /* Hide-if-customize for items we can't add classes to */ |
|
588 .customize-support .theme-overlay .theme-actions a[href="themes.php?page=custom-header"], |
|
589 .customize-support .theme-overlay .theme-actions a[href="themes.php?page=custom-background"] { |
|
590 display: none; |
|
591 } |
|
592 |
|
593 .broken-themes a.delete-theme, |
|
594 .theme-overlay .theme-actions .delete-theme { |
|
595 color: #a00; |
|
596 text-decoration: none; |
|
597 border-color: transparent; |
|
598 -webkit-box-shadow: none; |
|
599 box-shadow: none; |
|
600 background: transparent; |
|
601 } |
|
602 |
|
603 .theme-overlay .theme-actions .delete-theme { |
|
604 position: absolute; |
|
605 right: 10px; |
|
606 bottom: 5px; |
|
607 } |
|
608 |
|
609 .broken-themes a.delete-theme:hover, |
|
610 .broken-themes a.delete-theme:focus, |
|
611 .theme-overlay .theme-actions .delete-theme:hover, |
|
612 .theme-overlay .theme-actions .delete-theme:focus { |
|
613 background: #d54e21; |
|
614 color: #fff; |
|
615 border-color: #d54e21; |
|
616 } |
|
617 |
|
618 .theme-overlay .theme-actions .active-theme, |
|
619 .theme-overlay.active .theme-actions .inactive-theme { |
|
620 display: none; |
|
621 } |
|
622 |
|
623 .theme-overlay .theme-actions .inactive-theme, |
|
624 .theme-overlay.active .theme-actions .active-theme { |
|
625 display: block; |
|
626 } |
|
627 |
|
628 /** |
|
629 * Theme Screenshots gallery |
|
630 */ |
|
631 .theme-overlay .theme-screenshots { |
|
632 float: left; |
|
633 margin: 0 30px 0 0; |
|
634 width: 55%; |
|
635 max-width: 880px; |
|
636 text-align: center; |
|
637 } |
|
638 |
|
639 /* First screenshot, shown big */ |
|
640 .theme-overlay .screenshot { |
|
641 border: 1px solid #fff; |
|
642 -webkit-box-sizing: border-box; |
|
643 -moz-box-sizing: border-box; |
|
644 box-sizing: border-box; |
|
645 overflow: hidden; |
|
646 position: relative; |
|
647 -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.2); |
|
648 box-shadow: 0 0 0 1px rgba(0,0,0,0.2); |
|
649 } |
|
650 |
|
651 .theme-overlay .screenshot:after { |
|
652 content: ''; |
|
653 display: block; |
|
654 padding-top: 75%; /* using a 4/3 aspect ratio */ |
|
655 } |
|
656 |
|
657 .theme-overlay .screenshot img { |
|
658 height: auto; |
|
659 position: absolute; |
|
660 left: 0; |
|
661 top: 0; |
|
662 width: 100%; |
|
663 } |
|
664 /* Handles old 300px screenshots */ |
|
665 .theme-overlay.small-screenshot .theme-screenshots { |
|
666 position: absolute; |
|
667 width: 302px; |
|
668 } |
|
669 .theme-overlay.small-screenshot .theme-info { |
|
670 margin-left: 350px; |
|
671 width: auto; |
|
672 } |
|
673 |
|
674 /* Other screenshots, shown small and square */ |
|
675 .theme-overlay .screenshot.thumb { |
|
676 background: #ccc; |
|
677 border: 1px solid #eee; |
|
678 float: none; |
|
679 display: inline-block; |
|
680 margin: 10px 5px 0; |
|
681 width: 140px; |
|
682 height: 80px; |
|
683 cursor: pointer; |
|
684 } |
|
685 |
|
686 .theme-overlay .screenshot.thumb:after { |
|
687 content: ''; |
|
688 display: block; |
|
689 padding-top: 100%; /* using a 1/1 aspect ratio */ |
|
690 } |
|
691 |
|
692 .theme-overlay .screenshot.thumb img { |
|
693 cursor: pointer; |
|
694 height: auto; |
|
695 position: absolute; |
|
696 left: 0; |
|
697 top: 0; |
|
698 width: 100%; |
|
699 height: auto; |
|
700 } |
|
701 |
|
702 .theme-overlay .screenshot.selected { |
|
703 background: transparent; |
|
704 border: 2px solid #00a0d2; |
|
705 } |
|
706 |
|
707 .theme-overlay .screenshot.selected img { |
|
708 opacity: 0.8; |
|
709 } |
|
710 |
|
711 /* No screenshot placeholder */ |
|
712 .theme-browser .theme .theme-screenshot.blank, |
|
713 .theme-overlay .screenshot.blank { |
|
714 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=); |
|
715 } |
|
716 |
|
717 /** |
|
718 * Theme heading information |
|
719 */ |
|
720 .theme-overlay .theme-info { |
|
721 width: 40%; |
|
722 float: left; |
|
723 } |
|
724 |
|
725 .theme-overlay .current-label { |
|
726 background: #32373c; |
|
727 color: #fff; |
|
728 font-size: 11px; |
|
729 display: inline-block; |
|
730 padding: 2px 8px; |
|
731 -webkit-border-radius: 2px; |
|
732 border-radius: 2px; |
|
733 margin: 0 0 -10px; |
|
734 -webkit-user-select: none; |
|
735 -moz-user-select: none; |
|
736 -ms-user-select: none; |
|
737 user-select: none; |
|
738 } |
|
739 |
|
740 .theme-overlay .theme-name { |
|
741 color: #23282d; |
|
742 font-size: 32px; |
|
743 font-weight: 100; |
|
744 margin: 10px 0 0; |
|
745 line-height: 1.3; |
|
746 } |
|
747 |
|
748 .theme-overlay .theme-version { |
|
749 color: #999; |
|
750 font-size: 13px; |
|
751 font-weight: 400; |
|
752 float: none; |
|
753 display: inline-block; |
|
754 margin-left: 10px; |
|
755 } |
|
756 |
|
757 .theme-overlay .theme-author { |
|
758 color: #686868; |
|
759 font-size: 16px; |
|
760 font-weight: 400; |
|
761 margin: 15px 0 25px; |
|
762 } |
|
763 |
|
764 .theme-overlay .theme-author a { |
|
765 text-decoration: none; |
|
766 } |
|
767 |
|
768 .theme-overlay .theme-description { |
|
769 color: #555; |
|
770 font-size: 15px; |
|
771 font-weight: 400; |
|
772 line-height: 1.5; |
|
773 margin: 30px 0 0 0; |
|
774 } |
|
775 |
|
776 .theme-overlay .theme-tags { |
|
777 border-top: 3px solid #eee; |
|
778 color: #82878c; |
|
779 font-size: 13px; |
|
780 font-weight: 400; |
|
781 margin: 30px 0 0 0; |
|
782 padding-top: 20px; |
|
783 } |
|
784 |
|
785 .theme-overlay .theme-tags span { |
|
786 color: #444; |
|
787 font-weight: bold; |
|
788 margin-right: 5px; |
|
789 } |
|
790 |
|
791 /* Theme Updates info */ |
|
792 .theme-overlay .theme-update-message { |
|
793 background: #fef7f1; |
|
794 border: 1px solid #eee; |
|
795 border-left: 4px solid #d54e21; |
|
796 -webkit-border-radius: 3px; |
|
797 border-radius: 3px; |
|
798 padding: 5px 20px 10px; |
|
799 } |
|
800 |
|
801 .theme-overlay .theme-update { |
|
802 color: #23282d; |
|
803 font-size: 18px; |
|
804 display: inline-block; |
|
805 line-height: 40px; |
|
806 margin: 0; |
|
807 } |
|
808 |
|
809 .theme-overlay .parent-theme { |
|
810 background: #f7fcfe; |
|
811 border: 1px solid #eee; |
|
812 border-left: 4px solid #00a0d2; |
|
813 font-size: 14px; |
|
814 font-weight: normal; |
|
815 margin-top: 30px; |
|
816 padding: 10px 10px 10px 20px; |
|
817 } |
|
818 |
|
819 .theme-overlay .parent-theme strong { |
|
820 font-weight: 700; |
|
821 } |
|
822 |
|
823 /** |
|
824 * Single Theme Mode |
|
825 * Displays detailed view inline when a user has no switch capabilities |
|
826 */ |
|
827 .single-theme .theme-overlay .theme-backdrop, |
|
828 .single-theme .theme-overlay .theme-header, |
|
829 .single-theme .theme { |
|
830 display: none; |
|
831 } |
|
832 |
|
833 .single-theme .theme-overlay .theme-wrap { |
|
834 clear: both; |
|
835 min-height: 330px; |
|
836 position: relative; |
|
837 left: auto; |
|
838 right: auto; |
|
839 top: auto; |
|
840 bottom: auto; |
|
841 } |
|
842 |
|
843 .single-theme .theme-overlay .theme-about { |
|
844 padding: 30px 30px 70px; |
|
845 position: static; |
|
846 } |
|
847 |
|
848 .single-theme .theme-overlay .theme-actions { |
|
849 position: absolute; |
|
850 } |
|
851 |
|
852 /** |
|
853 * Basic Responsive structure... |
|
854 * |
|
855 * Shuffles theme columns around based on screen width |
|
856 */ |
|
857 |
|
858 @media only screen and (min-width: 2000px) { |
|
859 #wpwrap .theme-browser .theme { |
|
860 width: 17.6%; |
|
861 margin: 0 3% 3% 0; |
|
862 } |
|
863 |
|
864 #wpwrap .theme-browser .theme:nth-child(3n), |
|
865 #wpwrap .theme-browser .theme:nth-child(4n) { |
|
866 margin-right: 3%; |
|
867 } |
|
868 |
|
869 #wpwrap .theme-browser .theme:nth-child(5n) { |
|
870 margin-right: 0; |
|
871 } |
|
872 } |
|
873 |
|
874 @media only screen and (min-width: 1680px) { |
|
875 .theme-overlay .theme-wrap { |
|
876 width: 1450px; |
|
877 margin: 0 auto; |
|
878 } |
|
879 } |
|
880 |
|
881 /* Maximum screenshot width reaches 440px */ |
|
882 @media only screen and (min-width: 1640px) { |
|
883 .theme-browser .theme { |
|
884 width: 22.7%; |
|
885 margin: 0 3% 3% 0; |
|
886 } |
|
887 .theme-browser .theme .theme-screenshot:after { |
|
888 padding-top: 75%; /* using a 4/3 aspect ratio */ |
|
889 } |
|
890 |
|
891 .theme-browser .theme:nth-child(3n) { |
|
892 margin-right: 3%; |
|
893 } |
|
894 |
|
895 .theme-browser .theme:nth-child(4n) { |
|
896 margin-right: 0; |
|
897 } |
|
898 } |
|
899 /* Maximum screenshot width reaches 440px */ |
|
900 @media only screen and (max-width: 1120px) { |
|
901 .theme-browser .theme { |
|
902 width: 47.5%; |
|
903 margin-right: 0; |
|
904 } |
|
905 |
|
906 .theme-browser .theme:nth-child(even) { |
|
907 margin-right: 0; |
|
908 } |
|
909 |
|
910 .theme-browser .theme:nth-child(odd) { |
|
911 margin-right: 5%; |
|
912 } |
|
913 } |
|
914 |
|
915 /* Admin menu is folded */ |
|
916 @media only screen and (max-width: 900px) { |
|
917 .theme-overlay .theme-wrap { |
|
918 left: 65px; |
|
919 } |
|
920 } |
|
921 |
|
922 @media only screen and (max-width: 780px) { |
|
923 body.folded .theme-overlay .theme-wrap, |
|
924 .theme-overlay .theme-wrap { |
|
925 top: 0; /* The adminmenu isn't fixed on mobile, so this can use the full viewport height */ |
|
926 right: 0; |
|
927 bottom: 0; |
|
928 left: 0; |
|
929 padding: 70px 20px 20px; |
|
930 border: none; |
|
931 z-index: 100000; /* should overlap #wpadminbar. */ |
|
932 position: fixed; |
|
933 } |
|
934 |
|
935 .theme-browser .theme.active .theme-name span { |
|
936 /* Hide the "Active: " label on smaller screens. */ |
|
937 display: none; |
|
938 } |
|
939 |
|
940 .theme-overlay .theme-screenshots { |
|
941 width: 40%; |
|
942 } |
|
943 |
|
944 .theme-overlay .theme-info { |
|
945 width: 50%; |
|
946 } |
|
947 .single-theme .theme-wrap { |
|
948 padding: 10px; |
|
949 } |
|
950 |
|
951 .theme-browser .theme .theme-actions { |
|
952 padding: 5px 10px 4px 10px; |
|
953 } |
|
954 |
|
955 .theme-overlay.small-screenshot .theme-screenshots { |
|
956 position: static; |
|
957 float: none; |
|
958 max-width: 302px; |
|
959 } |
|
960 |
|
961 .theme-overlay.small-screenshot .theme-info { |
|
962 margin-left: 0; |
|
963 width: auto; |
|
964 } |
|
965 |
|
966 .theme:not(.active):hover .theme-actions, |
|
967 .theme:not(.active):focus .theme-actions, |
|
968 .theme:hover .more-details, |
|
969 .theme:focus .more-details { |
|
970 display: none; |
|
971 } |
|
972 |
|
973 .theme-browser.rendered .theme:hover .theme-screenshot img, |
|
974 .theme-browser.rendered .theme:focus .theme-screenshot img { |
|
975 opacity: 1.0; |
|
976 } |
|
977 } |
|
978 |
|
979 @media only screen and (max-width: 480px) { |
|
980 .theme-browser .theme { |
|
981 width: 100%; |
|
982 margin-right: 0; |
|
983 } |
|
984 |
|
985 .theme-browser .theme:nth-child(2n), |
|
986 .theme-browser .theme:nth-child(3n) { |
|
987 margin-right: 0; |
|
988 } |
|
989 } |
|
990 |
|
991 @media only screen and (max-width: 650px) { |
|
992 .theme-overlay .theme-update, |
|
993 .theme-overlay .theme-description { |
|
994 margin-left: 0; |
|
995 } |
|
996 |
|
997 .theme-overlay .theme-actions .delete-theme { |
|
998 position: relative; |
|
999 right: auto; |
|
1000 bottom: auto; |
|
1001 } |
|
1002 |
|
1003 .theme-overlay .theme-actions .inactive-theme { |
|
1004 display: inline; |
|
1005 } |
|
1006 |
|
1007 .theme-overlay .theme-screenshots { |
|
1008 width: 100%; |
|
1009 float: none; |
|
1010 } |
|
1011 |
|
1012 .theme-overlay .theme-info { |
|
1013 width: 100%; |
|
1014 } |
|
1015 |
|
1016 .theme-overlay .theme-author { |
|
1017 margin: 5px 0 15px 0; |
|
1018 } |
|
1019 |
|
1020 .theme-overlay .current-label { |
|
1021 margin-top: 10px; |
|
1022 font-size: 13px; |
|
1023 } |
|
1024 |
|
1025 .themes-php .wrap h2 { |
|
1026 width: 100%; |
|
1027 } |
|
1028 |
|
1029 .themes-php .wp-filter-search { |
|
1030 float: none; |
|
1031 clear: both; |
|
1032 left: 0; |
|
1033 top: 0; |
|
1034 right: 0; |
|
1035 margin: 10px 0; |
|
1036 width: 100%; |
|
1037 max-width: 280px; |
|
1038 } |
|
1039 |
|
1040 .theme-browser .theme.add-new-theme span:after { |
|
1041 font: normal 60px/90px 'dashicons'; |
|
1042 width: 80px; |
|
1043 height: 80px; |
|
1044 top: 30%; |
|
1045 left: 50%; |
|
1046 text-indent: 0; |
|
1047 margin-left: -40px; |
|
1048 } |
|
1049 |
|
1050 .single-theme .theme-wrap { |
|
1051 margin: 0 -12px 0 -10px; |
|
1052 padding: 10px; |
|
1053 } |
|
1054 .single-theme .theme-overlay .theme-about { |
|
1055 padding: 10px; |
|
1056 overflow: visible; |
|
1057 } |
|
1058 .single-theme .current-label { |
|
1059 display: none; |
|
1060 } |
|
1061 .single-theme .theme-overlay .theme-actions { |
|
1062 position: static; |
|
1063 } |
|
1064 } |
|
1065 |
|
1066 .broken-themes { |
|
1067 clear: both; |
|
1068 } |
|
1069 |
|
1070 .broken-themes table { |
|
1071 text-align: left; |
|
1072 width: 50%; |
|
1073 border-spacing: 3px; |
|
1074 padding: 3px; |
|
1075 } |
|
1076 |
|
1077 |
|
1078 /*------------------------------------------------------------------------------ |
|
1079 16.2 - Install Themes |
|
1080 ------------------------------------------------------------------------------*/ |
|
1081 |
|
1082 /* Already installed theme */ |
|
1083 .theme-browser .theme .theme-installed { |
|
1084 background: #0073aa; |
|
1085 } |
|
1086 .theme-browser .theme .theme-installed:before { |
|
1087 content: '\f147'; |
|
1088 } |
|
1089 .theme-browser .theme.is-installed .theme-actions .button-primary { |
|
1090 display: none !important; |
|
1091 } |
|
1092 |
|
1093 .theme-install-php a.upload, |
|
1094 .theme-install-php a.browse-themes { |
|
1095 cursor: pointer; |
|
1096 } |
|
1097 .theme-install-php a.browse-themes, |
|
1098 .theme-install-php.show-upload-theme a.upload { |
|
1099 display: none; |
|
1100 } |
|
1101 .theme-install-php.show-upload-theme a.browse-themes { |
|
1102 display: inline; |
|
1103 } |
|
1104 .upload-theme, |
|
1105 .upload-plugin { |
|
1106 -webkit-box-sizing: border-box; |
|
1107 -moz-box-sizing: border-box; |
|
1108 box-sizing: border-box; |
|
1109 display: none; |
|
1110 margin: 0; |
|
1111 padding: 0; |
|
1112 width: 100%; |
|
1113 overflow: hidden; |
|
1114 position: relative; |
|
1115 top: 10px; |
|
1116 } |
|
1117 body.show-upload-theme .upload-theme, |
|
1118 .upload-plugin { |
|
1119 display: block; |
|
1120 } |
|
1121 .upload-theme .wp-upload-form, |
|
1122 .upload-plugin .wp-upload-form { |
|
1123 background: #fafafa; |
|
1124 border: 1px solid #e5e5e5; |
|
1125 padding: 30px; |
|
1126 margin: 30px auto; |
|
1127 max-width: 380px; |
|
1128 } |
|
1129 .upload-theme .install-help, |
|
1130 .upload-plugin .install-help { |
|
1131 color: #999; |
|
1132 font-size: 18px; |
|
1133 font-style: normal; |
|
1134 margin: 0; |
|
1135 padding: 40px 0 0; |
|
1136 text-align: center; |
|
1137 } |
|
1138 body.show-upload-theme .upload-theme + .wp-filter, |
|
1139 body.show-upload-theme .upload-theme + .wp-filter + .theme-browser { |
|
1140 display: none; |
|
1141 } |
|
1142 |
|
1143 p.no-themes { |
|
1144 clear: both; |
|
1145 color: #666; |
|
1146 font-size: 18px; |
|
1147 font-style: normal; |
|
1148 margin: 0; |
|
1149 padding: 0; |
|
1150 text-align: center; |
|
1151 display: none; |
|
1152 } |
|
1153 body.no-results p.no-themes { |
|
1154 display: block; |
|
1155 } |
|
1156 body.show-upload-theme p.no-themes { |
|
1157 display: none !important; |
|
1158 } |
|
1159 |
|
1160 .theme-install-php .add-new-theme { |
|
1161 display: none !important; |
|
1162 } |
|
1163 |
|
1164 @media only screen and (max-width: 1120px) { |
|
1165 .upload-theme .wp-upload-form { |
|
1166 margin: 20px 0; |
|
1167 max-width: 100%; |
|
1168 } |
|
1169 .upload-theme .install-help { |
|
1170 font-size: 15px; |
|
1171 padding: 20px 0 0; |
|
1172 text-align: left; |
|
1173 } |
|
1174 } |
|
1175 |
|
1176 .rating { |
|
1177 margin: 15px 0 0; |
|
1178 } |
|
1179 .rating span:before { |
|
1180 color: #e6b800; |
|
1181 content: "\f154"; |
|
1182 display: inline-block; |
|
1183 -webkit-font-smoothing: antialiased; |
|
1184 font: normal 20px/1 'dashicons'; |
|
1185 vertical-align: top; |
|
1186 } |
|
1187 /* Half stars */ |
|
1188 .rating-10 span.one:before, |
|
1189 .rating-30 span.two:before, |
|
1190 .rating-50 span.three:before, |
|
1191 .rating-70 span.four:before, |
|
1192 .rating-90 span.five:before { |
|
1193 content: "\f459"; |
|
1194 } |
|
1195 /* Full stars */ |
|
1196 .rating-20 span.one:before { |
|
1197 content: "\f155"; |
|
1198 } |
|
1199 .rating-30 span.one:before, |
|
1200 .rating-40 span.one:before, |
|
1201 .rating-40 span.two:before { |
|
1202 content: "\f155"; |
|
1203 } |
|
1204 .rating-50 span.one:before, |
|
1205 .rating-50 span.two:before, |
|
1206 .rating-60 span.one:before, |
|
1207 .rating-60 span.two:before, |
|
1208 .rating-60 span.three:before { |
|
1209 content: "\f155"; |
|
1210 } |
|
1211 .rating-70 span.one:before, |
|
1212 .rating-70 span.two:before, |
|
1213 .rating-70 span.three:before, |
|
1214 .rating-80 span.one:before, |
|
1215 .rating-80 span.two:before, |
|
1216 .rating-80 span.three:before, |
|
1217 .rating-80 span.four:before { |
|
1218 content: "\f155"; |
|
1219 } |
|
1220 .rating-90 span.one:before, |
|
1221 .rating-90 span.two:before, |
|
1222 .rating-90 span.three:before, |
|
1223 .rating-90 span.four:before, |
|
1224 .rating-100 span.one:before, |
|
1225 .rating-100 span.two:before, |
|
1226 .rating-100 span.three:before, |
|
1227 .rating-100 span.four:before, |
|
1228 .rating-100 span.five:before { |
|
1229 content: "\f155"; |
|
1230 } |
|
1231 .rating .ratings { |
|
1232 display: block; |
|
1233 line-height: 20px; |
|
1234 color: #999; |
|
1235 } |
|
1236 |
|
1237 /*------------------------------------------------------------------------------ |
|
1238 16.3 - Custom Header Screen |
|
1239 ------------------------------------------------------------------------------*/ |
|
1240 |
|
1241 .appearance_page_custom-header #headimg { |
|
1242 border: 1px solid #DFDFDF; |
|
1243 overflow: hidden; |
|
1244 width: 100%; |
|
1245 } |
|
1246 |
|
1247 .appearance_page_custom-header #upload-form p label { |
|
1248 font-size: 12px; |
|
1249 } |
|
1250 |
|
1251 .appearance_page_custom-header .available-headers .default-header { |
|
1252 float: left; |
|
1253 margin: 0 20px 20px 0; |
|
1254 } |
|
1255 |
|
1256 .appearance_page_custom-header .random-header { |
|
1257 clear: both; |
|
1258 margin: 0 20px 20px 0; |
|
1259 vertical-align: middle; |
|
1260 } |
|
1261 |
|
1262 .appearance_page_custom-header .available-headers label input, |
|
1263 .appearance_page_custom-header .random-header label input { |
|
1264 margin-right: 10px; |
|
1265 } |
|
1266 |
|
1267 .appearance_page_custom-header .available-headers label img { |
|
1268 vertical-align: middle; |
|
1269 } |
|
1270 |
|
1271 |
|
1272 /*------------------------------------------------------------------------------ |
|
1273 16.4 - Custom Background Screen |
|
1274 ------------------------------------------------------------------------------*/ |
|
1275 |
|
1276 div#custom-background-image { |
|
1277 min-height: 100px; |
|
1278 border: 1px solid #dfdfdf; |
|
1279 } |
|
1280 |
|
1281 div#custom-background-image img { |
|
1282 max-width: 400px; |
|
1283 max-height: 300px; |
|
1284 } |
|
1285 |
|
1286 /*------------------------------------------------------------------------------ |
|
1287 23.0 - Full Overlay w/ Sidebar |
|
1288 ------------------------------------------------------------------------------*/ |
|
1289 |
|
1290 body.full-overlay-active { |
|
1291 overflow: hidden; |
|
1292 } |
|
1293 |
|
1294 .wp-full-overlay { |
|
1295 background: transparent; |
|
1296 z-index: 500000; |
|
1297 position: fixed; |
|
1298 overflow: visible; |
|
1299 top: 0; |
|
1300 bottom: 0; |
|
1301 left: 0; |
|
1302 right: 0; |
|
1303 height: 100%; |
|
1304 min-width: 0; |
|
1305 } |
|
1306 |
|
1307 .wp-full-overlay-sidebar { |
|
1308 -webkit-box-sizing: border-box; |
|
1309 -moz-box-sizing: border-box; |
|
1310 box-sizing: border-box; |
|
1311 position: fixed; |
|
1312 width: 300px; |
|
1313 height: 100%; |
|
1314 top: 0; |
|
1315 bottom: 0; |
|
1316 left: 0; |
|
1317 padding: 0; |
|
1318 margin: 0; |
|
1319 z-index: 10; |
|
1320 background: #eee; |
|
1321 border-right: none; |
|
1322 } |
|
1323 |
|
1324 .wp-full-overlay.collapsed .wp-full-overlay-sidebar { |
|
1325 overflow: visible; |
|
1326 } |
|
1327 |
|
1328 .wp-full-overlay.collapsed, |
|
1329 .wp-full-overlay.expanded .wp-full-overlay-sidebar { |
|
1330 margin-left: 0 !important; |
|
1331 } |
|
1332 |
|
1333 .wp-full-overlay.expanded { |
|
1334 margin-left: 300px; |
|
1335 } |
|
1336 |
|
1337 .wp-full-overlay.collapsed .wp-full-overlay-sidebar { |
|
1338 margin-left: -300px; |
|
1339 } |
|
1340 |
|
1341 .wp-full-overlay-sidebar:after { |
|
1342 content: ''; |
|
1343 display: block; |
|
1344 position: absolute; |
|
1345 top: 0; |
|
1346 bottom: 0; |
|
1347 right: 0; |
|
1348 width: 3px; |
|
1349 z-index: 1000; |
|
1350 } |
|
1351 |
|
1352 .wp-full-overlay-main { |
|
1353 position: absolute; |
|
1354 left: 0; |
|
1355 right: 0; |
|
1356 top: 0; |
|
1357 bottom: 0; |
|
1358 height: 100%; |
|
1359 } |
|
1360 |
|
1361 #customize-preview.wp-full-overlay-main { |
|
1362 background: url(../images/spinner.gif) no-repeat center center; |
|
1363 -webkit-background-size: 20px 20px; |
|
1364 background-size: 20px 20px; |
|
1365 } |
|
1366 |
|
1367 #customize-preview.wp-full-overlay-main.iframe-ready { |
|
1368 background: none; |
|
1369 } |
|
1370 |
|
1371 .wp-full-overlay-sidebar .wp-full-overlay-header { |
|
1372 position: absolute; |
|
1373 left: 0; |
|
1374 right: 0; |
|
1375 height: 45px; |
|
1376 padding: 0 15px; |
|
1377 line-height: 45px; |
|
1378 z-index: 10; |
|
1379 margin: 0; |
|
1380 border-top: none; |
|
1381 -webkit-box-shadow: none; |
|
1382 box-shadow: none; |
|
1383 } |
|
1384 |
|
1385 .wp-full-overlay-sidebar .wp-full-overlay-header a.back { |
|
1386 margin-top: 9px; |
|
1387 } |
|
1388 |
|
1389 .wp-full-overlay-sidebar .wp-full-overlay-footer { |
|
1390 bottom: 0; |
|
1391 border-bottom: none; |
|
1392 border-top: none; |
|
1393 -webkit-box-shadow: none; |
|
1394 box-shadow: none; |
|
1395 } |
|
1396 |
|
1397 .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content { |
|
1398 position: absolute; |
|
1399 top: 45px; |
|
1400 bottom: 45px; |
|
1401 left: 0; |
|
1402 right: 0; |
|
1403 overflow: auto; |
|
1404 } |
|
1405 |
|
1406 /* Close & Navigation Links */ |
|
1407 .theme-install-overlay .wp-full-overlay-sidebar .wp-full-overlay-header { |
|
1408 padding: 0; |
|
1409 } |
|
1410 |
|
1411 .theme-install-overlay .close-full-overlay, |
|
1412 .theme-install-overlay .previous-theme, |
|
1413 .theme-install-overlay .next-theme { |
|
1414 display: block; |
|
1415 position: relative; |
|
1416 float: left; |
|
1417 width: 45px; |
|
1418 height: 45px; |
|
1419 padding-right: 2px; |
|
1420 background: #eee; |
|
1421 border-right: 1px solid #ddd; |
|
1422 color: #444; |
|
1423 cursor: pointer; |
|
1424 text-decoration: none; |
|
1425 -webkit-transition: color .1s ease-in-out, background .1s ease-in-out; |
|
1426 transition: color .1s ease-in-out, background .1s ease-in-out; |
|
1427 } |
|
1428 |
|
1429 .theme-install-overlay .close-full-overlay:hover, |
|
1430 .theme-install-overlay .close-full-overlay:focus, |
|
1431 .theme-install-overlay .previous-theme:hover, |
|
1432 .theme-install-overlay .previous-theme:focus, |
|
1433 .theme-install-overlay .next-theme:hover, |
|
1434 .theme-install-overlay .next-theme:focus { |
|
1435 background: #ddd; |
|
1436 border-color: #ccc; |
|
1437 color: #000; |
|
1438 outline: none; |
|
1439 -webkit-box-shadow: none; |
|
1440 box-shadow: none; |
|
1441 } |
|
1442 |
|
1443 .theme-install-overlay .close-full-overlay:before { |
|
1444 font: normal 22px/1 dashicons; |
|
1445 content: "\f335"; |
|
1446 position: relative; |
|
1447 top: 7px; |
|
1448 left: 13px; |
|
1449 } |
|
1450 |
|
1451 .theme-install-overlay .previous-theme:before { |
|
1452 font: normal 20px/1 dashicons; |
|
1453 content: "\f341"; |
|
1454 position: relative; |
|
1455 top: 6px; |
|
1456 left: 14px; |
|
1457 } |
|
1458 |
|
1459 .theme-install-overlay .next-theme:before { |
|
1460 font: normal 20px/1 dashicons; |
|
1461 content: "\f345"; |
|
1462 position: relative; |
|
1463 top: 6px; |
|
1464 left: 13px; |
|
1465 } |
|
1466 |
|
1467 .theme-install-overlay .previous-theme.disabled, |
|
1468 .theme-install-overlay .next-theme.disabled, |
|
1469 .theme-install-overlay .previous-theme.disabled:hover, |
|
1470 .theme-install-overlay .previous-theme.disabled:focus, |
|
1471 .theme-install-overlay .next-theme.disabled:hover, |
|
1472 .theme-install-overlay .next-theme.disabled:focus { |
|
1473 color: #b4b9be; |
|
1474 background: #eee; |
|
1475 cursor: default; |
|
1476 pointer-events: none; |
|
1477 } |
|
1478 |
|
1479 /* Collapse Button */ |
|
1480 .wp-full-overlay a.collapse-sidebar { |
|
1481 position: absolute; |
|
1482 bottom: 12px; |
|
1483 left: 0; |
|
1484 z-index: 50; |
|
1485 display: block; |
|
1486 width: 19px; |
|
1487 height: 19px; |
|
1488 margin-left: 15px; |
|
1489 padding: 0; |
|
1490 -webkit-border-radius: 50%; |
|
1491 border-radius: 50%; |
|
1492 color: #777; |
|
1493 text-decoration: none; |
|
1494 } |
|
1495 |
|
1496 .wp-full-overlay a.collapse-sidebar:hover { |
|
1497 color: #0073aa; |
|
1498 } |
|
1499 |
|
1500 .wp-full-overlay.collapsed .collapse-sidebar { |
|
1501 position: absolute; |
|
1502 left: 100%; |
|
1503 } |
|
1504 |
|
1505 .wp-full-overlay .collapse-sidebar-arrow { |
|
1506 position: static; |
|
1507 margin-top: 0; |
|
1508 margin-left: 0; |
|
1509 display: block; |
|
1510 width: auto; |
|
1511 height: auto; |
|
1512 background: none; |
|
1513 } |
|
1514 |
|
1515 .wp-full-overlay .collapse-sidebar-arrow:before { |
|
1516 -webkit-border-radius: 50%; |
|
1517 border-radius: 50%; |
|
1518 float: left; |
|
1519 content: "\f148"; |
|
1520 background: #eee; |
|
1521 font: normal 20px/1 'dashicons'; |
|
1522 speak: none; |
|
1523 display: block; |
|
1524 padding: 0; |
|
1525 text-indent: 0; |
|
1526 text-align: center; |
|
1527 position: relative; |
|
1528 -webkit-font-smoothing: antialiased; |
|
1529 -moz-osx-font-smoothing: grayscale; |
|
1530 text-decoration: none !important; |
|
1531 } |
|
1532 |
|
1533 /* rtl:ignore */ |
|
1534 .wp-full-overlay.collapsed .collapse-sidebar-arrow:before, |
|
1535 .rtl .wp-full-overlay .collapse-sidebar-arrow:before { |
|
1536 -webkit-transform: rotate(180deg); |
|
1537 -ms-transform: rotate(180deg); |
|
1538 transform: rotate(180deg); |
|
1539 } |
|
1540 |
|
1541 .rtl .wp-full-overlay.collapsed .collapse-sidebar-arrow:before { |
|
1542 -webkit-transform: none; |
|
1543 -ms-transform: none; |
|
1544 transform: none; |
|
1545 } |
|
1546 |
|
1547 .wp-full-overlay.collapsed .collapse-sidebar-arrow { |
|
1548 background-position: -1px -109px; |
|
1549 } |
|
1550 |
|
1551 .wp-full-overlay .collapse-sidebar-label { |
|
1552 position: absolute; |
|
1553 left: 100%; |
|
1554 line-height: 20px; |
|
1555 margin-left: 10px; |
|
1556 } |
|
1557 |
|
1558 .wp-full-overlay.collapsed .collapse-sidebar-label { |
|
1559 display: none; |
|
1560 } |
|
1561 |
|
1562 /* Animations */ |
|
1563 .wp-full-overlay, |
|
1564 .wp-full-overlay-sidebar, |
|
1565 .wp-full-overlay .collapse-sidebar, |
|
1566 .wp-full-overlay-main { |
|
1567 -webkit-transition-property: left, right, top, bottom, width, margin; |
|
1568 transition-property: left, right, top, bottom, width, margin; |
|
1569 -webkit-transition-duration: 0.2s; |
|
1570 transition-duration: 0.2s; |
|
1571 } |
|
1572 |
|
1573 /*------------------------------------------------------------------------------ |
|
1574 24.0 - Customize Loader |
|
1575 ------------------------------------------------------------------------------*/ |
|
1576 |
|
1577 .no-customize-support .hide-if-no-customize, |
|
1578 .customize-support .hide-if-customize, |
|
1579 .no-customize-support.wp-core-ui .hide-if-no-customize, |
|
1580 .no-customize-support .wp-core-ui .hide-if-no-customize, |
|
1581 .customize-support.wp-core-ui .hide-if-customize, |
|
1582 .customize-support .wp-core-ui .hide-if-customize { |
|
1583 display: none; |
|
1584 } |
|
1585 |
|
1586 #customize-container { |
|
1587 display: none; |
|
1588 background: #fff; |
|
1589 z-index: 500000; |
|
1590 position: fixed; |
|
1591 overflow: visible; |
|
1592 top: 0; |
|
1593 bottom: 0; |
|
1594 left: 0; |
|
1595 right: 0; |
|
1596 height: 100%; |
|
1597 } |
|
1598 |
|
1599 .customize-active #customize-container { |
|
1600 display: block; |
|
1601 } |
|
1602 |
|
1603 .customize-loading #customize-container iframe { |
|
1604 opacity: 0; |
|
1605 } |
|
1606 |
|
1607 .customize-loading #customize-container { |
|
1608 background: #fff url(../images/spinner.gif) no-repeat fixed center center; |
|
1609 -webkit-background-size: 20px 20px; |
|
1610 background-size: 20px 20px; |
|
1611 } |
|
1612 |
|
1613 #customize-container iframe, |
|
1614 .theme-install-overlay iframe { |
|
1615 height: 100%; |
|
1616 width: 100%; |
|
1617 z-index: 20; |
|
1618 -webkit-transition: opacity 0.3s; |
|
1619 transition: opacity 0.3s; |
|
1620 } |
|
1621 |
|
1622 #customize-container .collapse-sidebar { |
|
1623 bottom: 16px; |
|
1624 } |
|
1625 |
|
1626 #customize-controls { |
|
1627 margin-top: 0; |
|
1628 } |
|
1629 |
|
1630 .theme-install-overlay { |
|
1631 display: none; |
|
1632 } |
|
1633 |
|
1634 .theme-install-overlay.single-theme { |
|
1635 display: block; |
|
1636 } |
|
1637 |
|
1638 .install-theme-info { |
|
1639 display: none; |
|
1640 padding: 10px 20px 60px; |
|
1641 } |
|
1642 |
|
1643 .single-theme .install-theme-info { |
|
1644 padding-top: 15px; |
|
1645 } |
|
1646 |
|
1647 .theme-install-overlay .install-theme-info { |
|
1648 display: block; |
|
1649 } |
|
1650 |
|
1651 .install-theme-info .theme-install { |
|
1652 float: right; |
|
1653 margin-top: 18px; |
|
1654 } |
|
1655 |
|
1656 .install-theme-info .theme-name { |
|
1657 font-size: 16px; |
|
1658 line-height: 24px; |
|
1659 margin-bottom: 0; |
|
1660 margin-top: 0; |
|
1661 } |
|
1662 |
|
1663 .install-theme-info .theme-screenshot { |
|
1664 margin-top: 15px; |
|
1665 width: 258px; |
|
1666 border: 1px solid #ccc; |
|
1667 } |
|
1668 |
|
1669 .install-theme-info .theme-details { |
|
1670 overflow: hidden; |
|
1671 } |
|
1672 |
|
1673 .theme-details .theme-version { |
|
1674 margin: 15px 0; |
|
1675 float: left; |
|
1676 } |
|
1677 |
|
1678 .theme-details .star-rating { |
|
1679 margin: 7px 0; |
|
1680 float: right; |
|
1681 } |
|
1682 |
|
1683 .theme-details .theme-description { |
|
1684 float: left; |
|
1685 color: #777; |
|
1686 line-height: 20px; |
|
1687 max-width: 100%; |
|
1688 } |
|
1689 |
|
1690 .theme-install-overlay .wp-full-overlay-header .theme-install { |
|
1691 float: right; |
|
1692 margin: 8px 10px 0 0; |
|
1693 /* For when .theme-install is a span rather than a.button-primary (already installed theme) */ |
|
1694 line-height: 26px; |
|
1695 } |
|
1696 |
|
1697 .theme-install-overlay .wp-full-overlay-sidebar { |
|
1698 background: #eee; |
|
1699 border-right: 1px solid #ddd; |
|
1700 } |
|
1701 |
|
1702 .theme-install-overlay .wp-full-overlay-sidebar-content { |
|
1703 background: #fff; |
|
1704 border-top: 1px solid #ddd; |
|
1705 border-bottom: 1px solid #ddd; |
|
1706 } |
|
1707 |
|
1708 .theme-install-overlay .wp-full-overlay-main { |
|
1709 background: #fff url(../images/spinner.gif) no-repeat center center; |
|
1710 -webkit-background-size: 20px 20px; |
|
1711 background-size: 20px 20px; |
|
1712 } |
|
1713 |
|
1714 /* =Media Queries |
|
1715 -------------------------------------------------------------- */ |
|
1716 |
|
1717 /** |
|
1718 * HiDPI Displays |
|
1719 */ |
|
1720 @media print, |
|
1721 (-webkit-min-device-pixel-ratio: 1.25), |
|
1722 (min-resolution: 120dpi) { |
|
1723 .wp-full-overlay .collapse-sidebar-arrow { |
|
1724 background-image: url(../images/arrows-2x.png); |
|
1725 -webkit-background-size: 15px 123px; |
|
1726 background-size: 15px 123px; |
|
1727 } |
|
1728 |
|
1729 #customize-preview.wp-full-overlay-main, |
|
1730 .customize-loading #customize-container, |
|
1731 .theme-install-overlay .wp-full-overlay-main { |
|
1732 background-image: url(../images/spinner-2x.gif); |
|
1733 } |
|
1734 |
|
1735 .theme-install-overlay .wp-full-overlay-header .theme-install { |
|
1736 margin-top: 2px; |
|
1737 } |
|
1738 } |
|
1739 |
|
1740 @media screen and ( max-width: 782px ) { |
|
1741 .available-theme .action-links .delete-theme { |
|
1742 float: none; |
|
1743 margin: 0; |
|
1744 padding: 0; |
|
1745 clear: both; |
|
1746 } |
|
1747 |
|
1748 .available-theme .action-links .delete-theme a { |
|
1749 padding: 0; |
|
1750 } |
|
1751 |
|
1752 .broken-themes table { |
|
1753 width: 100%; |
|
1754 } |
|
1755 |
|
1756 .theme-install-overlay .wp-full-overlay-header .theme-install { |
|
1757 margin-top: 6px; |
|
1758 line-height: normal; |
|
1759 } |
|
1760 } |