12 .customize-control-sidebar_widgets .hide-if-js { |
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. */ |
13 /* The link in .customize-control-sidebar_widgets .hide-if-js will fail if it ever gets used. */ |
14 display: none; |
14 display: none; |
15 } |
15 } |
16 |
16 |
|
17 .control-section.control-section-sidebar .accordion-section-content.ui-sortable { |
|
18 overflow: visible; |
|
19 } |
|
20 |
|
21 /* Note: widget-tops are more compact when (max-height: 700px) and (min-width: 981px). */ |
17 .customize-control-widget_form .widget-top { |
22 .customize-control-widget_form .widget-top { |
18 -webkit-transition: opacity 0.5s; |
23 background: #fff; |
19 transition: opacity 0.5s; |
24 transition: opacity 0.5s; |
|
25 } |
|
26 |
|
27 .customize-control .widget-action { |
|
28 color: #72777c; |
|
29 } |
|
30 |
|
31 .customize-control .widget-top:hover .widget-action, |
|
32 .customize-control .widget-action:focus { |
|
33 color: #23282d; |
20 } |
34 } |
21 |
35 |
22 .customize-control-widget_form:not(.widget-rendered) .widget-top { |
36 .customize-control-widget_form:not(.widget-rendered) .widget-top { |
23 opacity: 0.5; |
37 opacity: 0.5; |
24 } |
38 } |
59 .customize-control-widget_form.wide-widget-control .widget-inside > .form { |
73 .customize-control-widget_form.wide-widget-control .widget-inside > .form { |
60 padding: 20px; |
74 padding: 20px; |
61 } |
75 } |
62 |
76 |
63 .customize-control-widget_form.wide-widget-control .widget-top { |
77 .customize-control-widget_form.wide-widget-control .widget-top { |
64 -webkit-transition: background-color 0.4s; |
|
65 transition: background-color 0.4s; |
78 transition: background-color 0.4s; |
66 } |
79 } |
67 .customize-control-widget_form.wide-widget-control.expanding .widget-top, |
80 .customize-control-widget_form.wide-widget-control.expanding .widget-top, |
68 .customize-control-widget_form.wide-widget-control.expanded:not(.collapsing) .widget-top { |
81 .customize-control-widget_form.wide-widget-control.expanded:not(.collapsing) .widget-top { |
69 background-color: rgb(227, 227, 227); |
82 background-color: rgb(227, 227, 227); |
73 padding: 1px 10px 10px 10px; |
86 padding: 1px 10px 10px 10px; |
74 border-top: none; |
87 border-top: none; |
75 line-height: 16px; |
88 line-height: 16px; |
76 } |
89 } |
77 |
90 |
78 .widget-top { |
91 .customize-control-widget_form.expanded .widget-action .toggle-indicator:before { |
79 cursor: move; |
|
80 } |
|
81 |
|
82 .customize-control-widget_form.expanded a.widget-action:after { |
|
83 content: "\f142"; |
92 content: "\f142"; |
84 } |
93 } |
85 |
94 |
86 .customize-control-widget_form.wide-widget-control a.widget-action:after { |
95 .customize-control-widget_form.wide-widget-control .widget-action .toggle-indicator:before { |
87 content: "\f139"; |
96 content: "\f139"; |
88 } |
97 } |
89 |
98 |
90 .customize-control-widget_form.wide-widget-control.expanded a.widget-action:after { |
99 .customize-control-widget_form.wide-widget-control.expanded .widget-action .toggle-indicator:before { |
91 content: "\f141"; |
100 content: "\f141"; |
92 } |
101 } |
93 |
102 |
94 .widget-title-action { |
103 .widget-title-action { |
95 cursor: pointer; |
104 cursor: pointer; |
96 } |
105 } |
97 |
106 |
|
107 .widget-top, |
98 .customize-control-widget_form .widget .customize-control-title { |
108 .customize-control-widget_form .widget .customize-control-title { |
99 cursor: move; |
109 cursor: move; |
100 } |
110 } |
101 |
111 |
102 .control-section.accordion-section.highlighted > .accordion-section-title, |
112 .control-section.accordion-section.highlighted > .accordion-section-title, |
103 .customize-control-widget_form.highlighted { |
113 .customize-control-widget_form.highlighted { |
104 outline: none; |
114 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); |
115 box-shadow: 0 0 2px rgba(30,140,190,0.8); |
107 position: relative; |
116 position: relative; |
108 z-index: 1; |
117 z-index: 1; |
109 } |
118 } |
110 |
119 |
111 #widget-customizer-control-templates { |
120 #widget-customizer-control-templates { |
112 display: none; |
121 display: none; |
113 } |
122 } |
114 |
123 |
115 /** |
124 /** |
116 * Widget reordering styles |
125 * Widget reordering styles |
117 **/ |
126 */ |
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 |
127 |
150 #customize-theme-controls .widget-reorder-nav { |
128 #customize-theme-controls .widget-reorder-nav { |
151 display: none; |
129 display: none; |
152 float: right; |
130 float: right; |
153 background-color: #fafafa; |
131 background-color: #fafafa; |
154 } |
132 } |
155 |
133 |
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 { |
134 .move-widget:before { |
190 content: '\f504'; |
135 content: "\f504"; |
191 } |
136 } |
192 |
137 |
193 .move-widget-down:before { |
138 #customize-theme-controls .move-widget-area { |
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; |
139 display: none; |
209 background: #fff; |
140 background: #fff; |
210 border: 1px solid #dedede; |
141 border: 1px solid #ddd; |
211 border-top: none; |
142 border-top: none; |
212 cursor: auto; |
143 cursor: auto; |
213 } |
144 } |
214 |
145 |
215 #customize-theme-controls .reordering .move-widget-area.active { |
146 #customize-theme-controls .reordering .move-widget-area.active { |
277 |
208 |
278 #customize-theme-controls .reordering .widget-reorder-nav { |
209 #customize-theme-controls .reordering .widget-reorder-nav { |
279 display: block; |
210 display: block; |
280 } |
211 } |
281 |
212 |
|
213 /* Text Widget */ |
|
214 .wp-customizer div.mce-inline-toolbar-grp, |
|
215 .wp-customizer div.mce-tooltip { |
|
216 z-index: 500100 !important; |
|
217 } |
|
218 .wp-customizer .ui-autocomplete.wplink-autocomplete { |
|
219 z-index: 500110; /* originally 100110, but z-index of .wp-full-overlay is 500000 */ |
|
220 } |
|
221 .wp-customizer #wp-link-backdrop { |
|
222 z-index: 500100; /* originally 100100, but z-index of .wp-full-overlay is 500000 */ |
|
223 } |
|
224 .wp-customizer #wp-link-wrap { |
|
225 z-index: 500105; /* originally 100105, but z-index of .wp-full-overlay is 500000 */ |
|
226 } |
282 |
227 |
283 /** |
228 /** |
284 * Styles for new widget addition panel |
229 * Styles for new widget addition panel |
285 */ |
230 */ |
286 .wp-full-overlay-main { |
231 |
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. */ |
232 /* override widgets admin page rules in wp-admin/css/widgets.css */ |
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 { |
233 #widgets-left #available-widgets .widget { |
338 float: none !important; |
234 float: none !important; |
339 width: auto !important; |
235 width: auto !important; |
340 } |
236 } |
341 |
237 |
342 #available-widgets { |
238 .ios #available-widgets { |
343 position: absolute; |
239 transition: left 0s; |
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 } |
240 } |
391 |
241 |
392 #available-widgets .widget-tpl:hover, |
242 #available-widgets .widget-tpl:hover, |
393 #available-widgets .widget-tpl.selected { |
243 #available-widgets .widget-tpl.selected { |
394 background: #fafafa; |
244 background: #f3f3f5; |
395 } |
245 border-bottom-color: #ccc; |
396 |
246 color: #0073aa; |
397 #available-widgets .widget-top, |
247 border-left: 4px solid #0073aa; |
398 #available-widgets .widget-top:hover { |
248 } |
399 border: none; |
249 |
400 background: transparent; |
250 #customize-controls .widget-title h3 { |
401 -webkit-box-shadow: none; |
251 font-size: 1em; |
402 box-shadow: none; |
252 } |
403 } |
253 |
404 |
254 #available-widgets .widget-title h3 { |
405 #available-widgets .widget-title h4 { |
|
406 padding: 0 0 5px; |
255 padding: 0 0 5px; |
407 font-size: 14px; |
256 font-size: 14px; |
408 } |
257 } |
409 |
258 |
410 #available-widgets .widget .widget-description { |
259 #available-widgets .widget .widget-description { |
411 padding: 0; |
260 padding: 0; |
412 color: #777; |
261 color: #72777c; |
413 } |
262 } |
414 |
263 |
415 #customize-preview { |
264 #customize-preview { |
416 -webkit-transition: all 0.2s; |
|
417 transition: all 0.2s; |
265 transition: all 0.2s; |
418 } |
266 } |
419 |
267 |
420 body.adding-widget #available-widgets { |
268 body.adding-widget #available-widgets { |
421 left: 0; |
269 left: 0; |
|
270 visibility: visible; |
422 } |
271 } |
423 |
272 |
424 body.adding-widget .wp-full-overlay-main { |
273 body.adding-widget .wp-full-overlay-main { |
425 left: 300px; |
274 left: 300px; |
426 } |
275 } |
581 |
429 |
582 /* twitter */ |
430 /* twitter */ |
583 #available-widgets [class*="tweet"] .widget-title:before, |
431 #available-widgets [class*="tweet"] .widget-title:before, |
584 #available-widgets [class*="twitter"] .widget-title:before { content: "\f301"; } |
432 #available-widgets [class*="twitter"] .widget-title:before { content: "\f301"; } |
585 |
433 |
586 |
|
587 @media screen and (max-height: 700px) and (min-width: 981px) { |
434 @media screen and (max-height: 700px) and (min-width: 981px) { |
588 .customize-control { |
435 /* Compact widget-tops on smaller laptops, but not tablets. See ticket #27112#comment:4 */ |
|
436 .customize-control-widget_form { |
589 margin-bottom: 0; |
437 margin-bottom: 0; |
590 } |
438 } |
|
439 |
591 .widget-top { |
440 .widget-top { |
592 -webkit-box-shadow: none; |
|
593 box-shadow: none; |
441 box-shadow: none; |
594 margin-top: -1px; |
442 margin-top: -1px; |
595 } |
443 } |
|
444 |
596 .widget-top:hover { |
445 .widget-top:hover { |
597 position: relative; |
446 position: relative; |
598 z-index: 1; |
447 z-index: 1; |
599 } |
448 } |
|
449 |
600 .last-widget { |
450 .last-widget { |
601 margin-bottom: 15px; |
451 margin-bottom: 15px; |
602 } |
452 } |
603 .widget-title h4 { |
453 |
|
454 .widget-title h3 { |
604 padding: 13px 15px; |
455 padding: 13px 15px; |
605 } |
456 } |
606 .widget-top a.widget-action:after { |
457 |
607 padding-top: 9px; |
458 .widget-top .widget-action { |
608 } |
459 padding: 8px 10px; |
|
460 } |
|
461 |
609 .widget-reorder-nav span { |
462 .widget-reorder-nav span { |
610 height: 39px; |
463 height: 39px; |
611 } |
464 } |
|
465 |
612 .widget-reorder-nav span:before { |
466 .widget-reorder-nav span:before { |
613 line-height: 39px; |
467 line-height: 39px; |
614 } |
468 } |
|
469 |
|
470 /* Compact the move widget areas. */ |
615 #customize-theme-controls .widget-area-select li { |
471 #customize-theme-controls .widget-area-select li { |
616 padding: 9px 15px 11px 42px; |
472 padding: 9px 15px 11px 42px; |
617 } |
473 } |
|
474 |
618 #customize-theme-controls .widget-area-select li:before { |
475 #customize-theme-controls .widget-area-select li:before { |
619 top: 8px; |
476 top: 8px; |
620 } |
477 } |
621 } |
478 } |
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 } |
|