|
1 .wp-full-overlay-sidebar { |
|
2 overflow: visible; |
|
3 } |
|
4 |
|
5 /** |
|
6 * Hide all sidebar sections by default, only show them (via JS) once the |
|
7 * preview loads and we know whether the sidebars are used in the template. |
|
8 */ |
|
9 |
|
10 .control-section.control-section-sidebar, |
|
11 .customize-control-sidebar_widgets label, |
|
12 .customize-control-sidebar_widgets .hide-if-js { |
|
13 /* The link in .customize-control-sidebar_widgets .hide-if-js will fail if it ever gets used. */ |
|
14 display: none; |
|
15 } |
|
16 |
|
17 .customize-control-widget_form .widget-top { |
|
18 -webkit-transition: opacity 0.5s; |
|
19 transition: opacity 0.5s; |
|
20 } |
|
21 |
|
22 .customize-control-widget_form:not(.widget-rendered) .widget-top { |
|
23 opacity: 0.5; |
|
24 } |
|
25 |
|
26 .customize-control-widget_form .widget-control-save { |
|
27 display: none; |
|
28 } |
|
29 |
|
30 .customize-control-widget_form .spinner { |
|
31 visibility: hidden; |
|
32 margin-top: 0; |
|
33 } |
|
34 |
|
35 .customize-control-widget_form.previewer-loading .spinner { |
|
36 visibility: visible; |
|
37 } |
|
38 |
|
39 .customize-control-widget_form.widget-form-disabled .widget-content { |
|
40 opacity: 0.7; |
|
41 pointer-events: none; |
|
42 -moz-user-select: none; |
|
43 -webkit-user-select: none; |
|
44 -ms-user-select: none; |
|
45 user-select: none; |
|
46 } |
|
47 |
|
48 .customize-control-widget_form .widget { |
|
49 margin-bottom: 0; |
|
50 } |
|
51 |
|
52 .customize-control-widget_form.wide-widget-control .widget-inside { |
|
53 position: fixed; |
|
54 left: 299px; |
|
55 top: 25%; |
|
56 border: 1px solid rgb(229, 229, 229); |
|
57 overflow: auto; |
|
58 } |
|
59 .customize-control-widget_form.wide-widget-control .widget-inside > .form { |
|
60 padding: 20px; |
|
61 } |
|
62 |
|
63 .customize-control-widget_form.wide-widget-control .widget-top { |
|
64 -webkit-transition: background-color 0.4s; |
|
65 transition: background-color 0.4s; |
|
66 } |
|
67 .customize-control-widget_form.wide-widget-control.expanding .widget-top, |
|
68 .customize-control-widget_form.wide-widget-control.expanded:not(.collapsing) .widget-top { |
|
69 background-color: rgb(227, 227, 227); |
|
70 } |
|
71 |
|
72 .widget-inside { |
|
73 padding: 1px 10px 10px 10px; |
|
74 border-top: none; |
|
75 line-height: 16px; |
|
76 } |
|
77 |
|
78 .widget-top { |
|
79 cursor: move; |
|
80 } |
|
81 |
|
82 .customize-control-widget_form.expanded a.widget-action:after { |
|
83 content: "\f142"; |
|
84 } |
|
85 |
|
86 .customize-control-widget_form.wide-widget-control a.widget-action:after { |
|
87 content: "\f139"; |
|
88 } |
|
89 |
|
90 .customize-control-widget_form.wide-widget-control.expanded a.widget-action:after { |
|
91 content: "\f141"; |
|
92 } |
|
93 |
|
94 .widget-title-action { |
|
95 cursor: pointer; |
|
96 } |
|
97 |
|
98 .customize-control-widget_form .widget .customize-control-title { |
|
99 cursor: move; |
|
100 } |
|
101 |
|
102 .control-section.accordion-section.highlighted > .accordion-section-title, |
|
103 .customize-control-widget_form.highlighted { |
|
104 outline: none; |
|
105 -webkit-box-shadow: 0 0 2px rgba(30,140,190,0.8); |
|
106 box-shadow: 0 0 2px rgba(30,140,190,0.8); |
|
107 position: relative; |
|
108 z-index: 1; |
|
109 } |
|
110 |
|
111 #widget-customizer-control-templates { |
|
112 display: none; |
|
113 } |
|
114 |
|
115 /** |
|
116 * Widget reordering styles |
|
117 **/ |
|
118 |
|
119 .reorder-toggle { |
|
120 float: right; |
|
121 padding: 5px 8px; |
|
122 text-decoration: none; |
|
123 cursor: pointer; |
|
124 outline: none; |
|
125 -webkit-user-select: none; |
|
126 -moz-user-select: none; |
|
127 -ms-user-select: none; |
|
128 user-select: none; |
|
129 } |
|
130 .reorder-toggle:focus { |
|
131 outline: 1px dotted; |
|
132 } |
|
133 |
|
134 .reorder-done, |
|
135 .reordering .reorder { |
|
136 display: none; |
|
137 } |
|
138 |
|
139 .reordering .reorder-done { |
|
140 display: block; |
|
141 color: #aa0000; |
|
142 } |
|
143 |
|
144 #customize-theme-controls .reordering .add-new-widget { |
|
145 opacity: 0.2; |
|
146 pointer-events: none; |
|
147 cursor: not-allowed; |
|
148 } |
|
149 |
|
150 #customize-theme-controls .widget-reorder-nav { |
|
151 display: none; |
|
152 float: right; |
|
153 background-color: #fafafa; |
|
154 } |
|
155 |
|
156 .widget-reorder-nav span { |
|
157 position: relative; |
|
158 overflow: hidden; |
|
159 float: left; |
|
160 display: block; |
|
161 width: 33px; /* was 42px for mobile */ |
|
162 height: 43px; |
|
163 color: #82878c; |
|
164 text-indent: -9999px; |
|
165 cursor: pointer; |
|
166 outline: none; |
|
167 } |
|
168 |
|
169 .widget-reorder-nav span:before { |
|
170 display: inline-block; |
|
171 position: absolute; |
|
172 top: 0; |
|
173 right: 0; |
|
174 width: 100%; |
|
175 height: 100%; |
|
176 font: normal 20px/43px 'dashicons'; |
|
177 text-align: center; |
|
178 text-indent: 0; |
|
179 -webkit-font-smoothing: antialiased; |
|
180 -moz-osx-font-smoothing: grayscale; |
|
181 } |
|
182 |
|
183 .widget-reorder-nav span:hover, |
|
184 .widget-reorder-nav span:focus { |
|
185 color: #444; |
|
186 background: #eee; |
|
187 } |
|
188 |
|
189 .move-widget:before { |
|
190 content: '\f504'; |
|
191 } |
|
192 |
|
193 .move-widget-down:before { |
|
194 content: '\f347'; |
|
195 } |
|
196 |
|
197 .move-widget-up:before { |
|
198 content: '\f343'; |
|
199 } |
|
200 |
|
201 #customize-theme-controls .first-widget .move-widget-up, |
|
202 #customize-theme-controls .last-widget .move-widget-down { |
|
203 color: #d5d5d5; |
|
204 cursor: default; |
|
205 } |
|
206 |
|
207 #customize-theme-controls .move-widget-area { |
|
208 display: none; |
|
209 background: #fff; |
|
210 border: 1px solid #dedede; |
|
211 border-top: none; |
|
212 cursor: auto; |
|
213 } |
|
214 |
|
215 #customize-theme-controls .reordering .move-widget-area.active { |
|
216 display: block; |
|
217 } |
|
218 |
|
219 #customize-theme-controls .move-widget-area .description { |
|
220 margin: 0; |
|
221 padding: 15px 20px; |
|
222 font-weight: 400; |
|
223 } |
|
224 |
|
225 #customize-theme-controls .widget-area-select { |
|
226 margin: 0; |
|
227 padding: 0; |
|
228 list-style: none; |
|
229 } |
|
230 |
|
231 #customize-theme-controls .widget-area-select li { |
|
232 position: relative; |
|
233 margin: 0; |
|
234 padding: 13px 15px 15px 42px; |
|
235 color: #555; |
|
236 border-top: 1px solid #eee; |
|
237 cursor: pointer; |
|
238 -webkit-user-select: none; |
|
239 -moz-user-select: none; |
|
240 -ms-user-select: none; |
|
241 user-select: none; |
|
242 } |
|
243 |
|
244 #customize-theme-controls .widget-area-select li:before { |
|
245 display: none; |
|
246 content: '\f147'; |
|
247 position: absolute; |
|
248 top: 12px; |
|
249 left: 10px; |
|
250 font: normal 20px/1 'dashicons'; |
|
251 -webkit-font-smoothing: antialiased; |
|
252 -moz-osx-font-smoothing: grayscale; |
|
253 } |
|
254 |
|
255 #customize-theme-controls .widget-area-select li:last-child { |
|
256 border-bottom: 1px solid #eee; |
|
257 } |
|
258 |
|
259 #customize-theme-controls .widget-area-select .selected { |
|
260 color: #fff; |
|
261 text-shadow: 0 -1px 0 rgba(0,0,0,.4); |
|
262 background: #00a0d2; |
|
263 } |
|
264 |
|
265 #customize-theme-controls .widget-area-select .selected:before { |
|
266 display: block; |
|
267 } |
|
268 |
|
269 #customize-theme-controls .move-widget-actions { |
|
270 text-align: right; |
|
271 padding: 12px; |
|
272 } |
|
273 |
|
274 #customize-theme-controls .reordering .widget-title-action { |
|
275 display: none; |
|
276 } |
|
277 |
|
278 #customize-theme-controls .reordering .widget-reorder-nav { |
|
279 display: block; |
|
280 } |
|
281 |
|
282 |
|
283 /** |
|
284 * Styles for new widget addition panel |
|
285 */ |
|
286 .wp-full-overlay-main { |
|
287 right: auto; /* this overrides a right: 0; which causes the preview to resize, I'd rather have it go off screen at the normal size. */ |
|
288 width: 100%; |
|
289 } |
|
290 |
|
291 #customize-theme-controls .add-new-widget { |
|
292 cursor: pointer; |
|
293 float: right; |
|
294 margin-left: 10px; |
|
295 -webkit-transition: all 0.2s; |
|
296 transition: all 0.2s; |
|
297 -webkit-user-select: none; |
|
298 -moz-user-select: none; |
|
299 -ms-user-select: none; |
|
300 user-select: none; |
|
301 outline: none; |
|
302 } |
|
303 |
|
304 .add-new-widget:before { |
|
305 content: "\f132"; |
|
306 display: inline-block; |
|
307 position: relative; |
|
308 left: -2px; |
|
309 top: -1px; |
|
310 font: normal 20px/1 'dashicons'; |
|
311 vertical-align: middle; |
|
312 -webkit-transition: all 0.2s; |
|
313 transition: all 0.2s; |
|
314 -webkit-font-smoothing: antialiased; |
|
315 -moz-osx-font-smoothing: grayscale; |
|
316 } |
|
317 |
|
318 body.adding-widget .add-new-widget, |
|
319 body.adding-widget .add-new-widget:hover { |
|
320 background: #eee; |
|
321 border-color: #999; |
|
322 color: #32373c; |
|
323 -webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); |
|
324 box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); |
|
325 } |
|
326 body.adding-widget .add-new-widget:before { |
|
327 -webkit-transform: rotate(45deg); |
|
328 -ms-transform: rotate(45deg); |
|
329 transform: rotate(45deg); |
|
330 } |
|
331 |
|
332 #available-widgets .widget { |
|
333 position: static; |
|
334 } |
|
335 |
|
336 /* override widgets admin page rules in wp-admin/css/wp-admin.css */ |
|
337 #widgets-left #available-widgets .widget { |
|
338 float: none !important; |
|
339 width: auto !important; |
|
340 } |
|
341 |
|
342 #available-widgets { |
|
343 position: absolute; |
|
344 overflow: auto; |
|
345 top: 0; |
|
346 bottom: 0; |
|
347 left: -301px; |
|
348 width: 300px; |
|
349 margin: 0; |
|
350 z-index: 1; |
|
351 background: #fff !important; |
|
352 -webkit-transition: all 0.2s; |
|
353 transition: all 0.2s; |
|
354 border-right: 1px solid #dddddd; |
|
355 } |
|
356 |
|
357 #available-widgets-list { |
|
358 top: 46px; |
|
359 position: absolute; |
|
360 overflow: auto; |
|
361 bottom: 0; |
|
362 width: 100%; |
|
363 } |
|
364 |
|
365 #available-widgets-filter { |
|
366 position: fixed; |
|
367 top: 0; |
|
368 z-index: 1; |
|
369 width: 300px; |
|
370 height: 46px; |
|
371 padding: 8px 17px 7px 13px; |
|
372 background: #eee; |
|
373 border-bottom: 1px solid #e4e4e4; |
|
374 -webkit-box-sizing: border-box; |
|
375 -moz-box-sizing: border-box; |
|
376 box-sizing: border-box; |
|
377 } |
|
378 |
|
379 #available-widgets-filter input { |
|
380 padding: 5px 10px 2px 10px; |
|
381 width: 100%; |
|
382 } |
|
383 |
|
384 #available-widgets .widget-tpl { |
|
385 position: relative; |
|
386 padding: 20px 15px 20px 60px; |
|
387 border-bottom: 1px solid #e4e4e4; |
|
388 cursor: pointer; |
|
389 display: none; |
|
390 } |
|
391 |
|
392 #available-widgets .widget-tpl:hover, |
|
393 #available-widgets .widget-tpl.selected { |
|
394 background: #fafafa; |
|
395 } |
|
396 |
|
397 #available-widgets .widget-top, |
|
398 #available-widgets .widget-top:hover { |
|
399 border: none; |
|
400 background: transparent; |
|
401 -webkit-box-shadow: none; |
|
402 box-shadow: none; |
|
403 } |
|
404 |
|
405 #available-widgets .widget-title h4 { |
|
406 padding: 0 0 5px; |
|
407 font-size: 14px; |
|
408 } |
|
409 |
|
410 #available-widgets .widget .widget-description { |
|
411 padding: 0; |
|
412 color: #777; |
|
413 } |
|
414 |
|
415 #customize-preview { |
|
416 -webkit-transition: all 0.2s; |
|
417 transition: all 0.2s; |
|
418 } |
|
419 |
|
420 body.adding-widget #available-widgets { |
|
421 left: 0; |
|
422 } |
|
423 |
|
424 body.adding-widget .wp-full-overlay-main { |
|
425 left: 300px; |
|
426 } |
|
427 |
|
428 body.adding-widget #customize-preview { |
|
429 opacity: 0.4; |
|
430 } |
|
431 |
|
432 |
|
433 /** |
|
434 * Widget Icon styling |
|
435 * No plurals in naming. |
|
436 * Ordered from lowest to highest specificity. |
|
437 **/ |
|
438 #available-widgets .widget-title { |
|
439 position: relative; |
|
440 } |
|
441 |
|
442 #available-widgets .widget-title:before { |
|
443 content: "\f132"; |
|
444 position: absolute; |
|
445 top: -3px; |
|
446 right: 100%; |
|
447 margin-right: 20px; |
|
448 width: 20px; |
|
449 height: 20px; |
|
450 color: #32373c; |
|
451 font: normal 20px/1 'dashicons'; |
|
452 text-align: center; |
|
453 -webkit-box-sizing: border-box; |
|
454 -moz-box-sizing: border-box; |
|
455 box-sizing: border-box; |
|
456 -webkit-font-smoothing: antialiased; |
|
457 -moz-osx-font-smoothing: grayscale; |
|
458 } |
|
459 |
|
460 /* smiley */ |
|
461 #available-widgets [class*="easy"] .widget-title:before { content: "\f328"; top: -4px; } |
|
462 |
|
463 /* star-filled */ |
|
464 #available-widgets [class*="super"] .widget-title:before, |
|
465 #available-widgets [class*="like"] .widget-title:before { content: "\f155"; top: -4px; } |
|
466 |
|
467 /* wordpress */ |
|
468 #available-widgets [class*="meta"] .widget-title:before { content: "\f120"; } |
|
469 |
|
470 /* archive-box */ |
|
471 #available-widgets [class*="archives"] .widget-title:before { content: "\f480"; top: -4px; } |
|
472 |
|
473 /* category */ |
|
474 #available-widgets [class*="categor"] .widget-title:before { content: "\f318"; top: -4px; } |
|
475 |
|
476 /* comments */ |
|
477 #available-widgets [class*="comment"] .widget-title:before, |
|
478 #available-widgets [class*="testimonial"] .widget-title:before, |
|
479 #available-widgets [class*="chat"] .widget-title:before { content: "\f101"; } |
|
480 |
|
481 /* post */ |
|
482 #available-widgets [class*="post"] .widget-title:before { content: "\f109"; } |
|
483 |
|
484 /* admin-page */ |
|
485 #available-widgets [class*="page"] .widget-title:before { content: "\f105"; } |
|
486 |
|
487 /* text */ |
|
488 #available-widgets [class*="text"] .widget-title:before { content: "\f478"; } |
|
489 |
|
490 /* links */ |
|
491 #available-widgets [class*="link"] .widget-title:before { content: "\f103"; } |
|
492 |
|
493 /* search */ |
|
494 #available-widgets [class*="search"] .widget-title:before { content: "\f179"; } |
|
495 |
|
496 /* menu */ |
|
497 #available-widgets [class*="menu"] .widget-title:before, |
|
498 #available-widgets [class*="nav"] .widget-title:before { content: "\f333"; } |
|
499 |
|
500 /* tag-cloud */ |
|
501 #available-widgets [class*="tag"] .widget-title:before { content: "\f479"; } |
|
502 |
|
503 /* rss */ |
|
504 #available-widgets [class*="rss"] .widget-title:before { content: "\f303"; top: -6px; } |
|
505 |
|
506 /* calendar */ |
|
507 #available-widgets [class*="event"] .widget-title:before, |
|
508 #available-widgets [class*="calendar"] .widget-title:before { content: "\f145"; top: -4px;} |
|
509 |
|
510 /* format-image */ |
|
511 #available-widgets [class*="image"] .widget-title:before, |
|
512 #available-widgets [class*="photo"] .widget-title:before, |
|
513 #available-widgets [class*="slide"] .widget-title:before, |
|
514 #available-widgets [class*="instagram"] .widget-title:before { content: "\f128"; } |
|
515 |
|
516 /* format-gallery */ |
|
517 #available-widgets [class*="album"] .widget-title:before, |
|
518 #available-widgets [class*="galler"] .widget-title:before { content: "\f161"; } |
|
519 |
|
520 /* format-video */ |
|
521 #available-widgets [class*="video"] .widget-title:before, |
|
522 #available-widgets [class*="tube"] .widget-title:before { content: "\f126"; } |
|
523 |
|
524 /* format-audio */ |
|
525 #available-widgets [class*="music"] .widget-title:before, |
|
526 #available-widgets [class*="radio"] .widget-title:before, |
|
527 #available-widgets [class*="audio"] .widget-title:before { content: "\f127"; } |
|
528 |
|
529 /* admin-users */ |
|
530 #available-widgets [class*="login"] .widget-title:before, |
|
531 #available-widgets [class*="user"] .widget-title:before, |
|
532 #available-widgets [class*="member"] .widget-title:before, |
|
533 #available-widgets [class*="avatar"] .widget-title:before, |
|
534 #available-widgets [class*="subscriber"] .widget-title:before, |
|
535 #available-widgets [class*="profile"] .widget-title:before, |
|
536 #available-widgets [class*="grofile"] .widget-title:before { content: "\f110"; } |
|
537 |
|
538 /* cart */ |
|
539 #available-widgets [class*="commerce"] .widget-title:before, |
|
540 #available-widgets [class*="shop"] .widget-title:before, |
|
541 #available-widgets [class*="cart"] .widget-title:before { content: "\f174"; top: -4px; } |
|
542 |
|
543 /* shield */ |
|
544 #available-widgets [class*="secur"] .widget-title:before, |
|
545 #available-widgets [class*="firewall"] .widget-title:before { content: "\f332"; } |
|
546 |
|
547 /* chart-bar */ |
|
548 #available-widgets [class*="analytic"] .widget-title:before, |
|
549 #available-widgets [class*="stat"] .widget-title:before, |
|
550 #available-widgets [class*="poll"] .widget-title:before { content: "\f185"; } |
|
551 |
|
552 /* feedback */ |
|
553 #available-widgets [class*="form"] .widget-title:before { content: "\f175"; } |
|
554 |
|
555 /* email-alt */ |
|
556 #available-widgets [class*="subscribe"] .widget-title:before, |
|
557 #available-widgets [class*="news"] .widget-title:before, |
|
558 #available-widgets [class*="contact"] .widget-title:before, |
|
559 #available-widgets [class*="mail"] .widget-title:before { content: "\f466"; } |
|
560 |
|
561 /* share */ |
|
562 #available-widgets [class*="share"] .widget-title:before, |
|
563 #available-widgets [class*="socia"] .widget-title:before { content: "\f237"; } |
|
564 |
|
565 /* translation */ |
|
566 #available-widgets [class*="lang"] .widget-title:before, |
|
567 #available-widgets [class*="translat"] .widget-title:before { content: "\f326"; } |
|
568 |
|
569 /* location-alt */ |
|
570 #available-widgets [class*="locat"] .widget-title:before, |
|
571 #available-widgets [class*="map"] .widget-title:before { content: "\f231"; } |
|
572 |
|
573 /* download */ |
|
574 #available-widgets [class*="download"] .widget-title:before { content: "\f316"; } |
|
575 |
|
576 /* cloud */ |
|
577 #available-widgets [class*="weather"] .widget-title:before { content: "\f176"; top: -4px;} |
|
578 |
|
579 /* facebook */ |
|
580 #available-widgets [class*="facebook"] .widget-title:before { content: "\f304"; } |
|
581 |
|
582 /* twitter */ |
|
583 #available-widgets [class*="tweet"] .widget-title:before, |
|
584 #available-widgets [class*="twitter"] .widget-title:before { content: "\f301"; } |
|
585 |
|
586 |
|
587 @media screen and (max-height: 700px) and (min-width: 981px) { |
|
588 .customize-control { |
|
589 margin-bottom: 0; |
|
590 } |
|
591 .widget-top { |
|
592 -webkit-box-shadow: none; |
|
593 box-shadow: none; |
|
594 margin-top: -1px; |
|
595 } |
|
596 .widget-top:hover { |
|
597 position: relative; |
|
598 z-index: 1; |
|
599 } |
|
600 .last-widget { |
|
601 margin-bottom: 15px; |
|
602 } |
|
603 .widget-title h4 { |
|
604 padding: 13px 15px; |
|
605 } |
|
606 .widget-top a.widget-action:after { |
|
607 padding-top: 9px; |
|
608 } |
|
609 .widget-reorder-nav span { |
|
610 height: 39px; |
|
611 } |
|
612 .widget-reorder-nav span:before { |
|
613 line-height: 39px; |
|
614 } |
|
615 #customize-theme-controls .widget-area-select li { |
|
616 padding: 9px 15px 11px 42px; |
|
617 } |
|
618 #customize-theme-controls .widget-area-select li:before { |
|
619 top: 8px; |
|
620 } |
|
621 } |
|
622 |
|
623 @media screen and ( max-width: 640px ) { |
|
624 body.adding-widget div#available-widgets { |
|
625 top: 46px; |
|
626 left: 0; |
|
627 z-index: 10; |
|
628 width: 100%; |
|
629 } |
|
630 |
|
631 #available-widgets-filter { |
|
632 position: static; |
|
633 width: 100%; |
|
634 height: auto; |
|
635 } |
|
636 } |