17 |
18 |
18 #customize-controls .submit { |
19 #customize-controls .submit { |
19 text-align: center; |
20 text-align: center; |
20 } |
21 } |
21 |
22 |
|
23 #customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked { |
|
24 background-color: rgba( 0, 0, 0, 0.7 ); |
|
25 padding: 25px; |
|
26 } |
|
27 |
|
28 #customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .customize-changeset-locked-message { |
|
29 margin-left: auto; |
|
30 margin-right: auto; |
|
31 max-width: 366px; |
|
32 min-height: 64px; |
|
33 width: auto; |
|
34 padding: 25px 25px 25px 109px; |
|
35 position: relative; |
|
36 background: #fff; |
|
37 box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 ); |
|
38 line-height: 1.5; |
|
39 overflow-y: auto; |
|
40 text-align: left; |
|
41 top: calc( 50% - 100px ); |
|
42 } |
|
43 |
|
44 #customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .currently-editing { |
|
45 margin-top: 0; |
|
46 } |
|
47 #customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .action-buttons { |
|
48 margin-bottom: 0; |
|
49 } |
|
50 |
|
51 .customize-changeset-locked-avatar { |
|
52 width: 64px; |
|
53 position: absolute; |
|
54 left: 25px; |
|
55 top: 25px; |
|
56 } |
|
57 |
|
58 .wp-core-ui.wp-customizer .customize-changeset-locked-message a.button { |
|
59 margin-right: 10px; |
|
60 margin-top: 0; |
|
61 } |
|
62 |
22 #customize-controls .description { |
63 #customize-controls .description { |
23 color: #666666; |
64 color: #555d66; |
24 } |
65 } |
25 |
66 |
26 #customize-header-actions .button-primary { |
67 #customize-save-button-wrapper { |
27 float: right; |
68 float: right; |
28 margin-top: 9px; |
69 margin-top: 9px; |
|
70 } |
|
71 |
|
72 body:not(.ready) #customize-save-button-wrapper .save { |
|
73 visibility: hidden; |
|
74 } |
|
75 #customize-save-button-wrapper .save { |
|
76 float: left; |
|
77 border-radius: 3px; |
|
78 box-shadow: none; /* @todo Adjust box shadow based on the disable states of paired button. */ |
|
79 margin-top: 0; |
|
80 } |
|
81 |
|
82 #customize-save-button-wrapper .save:focus, #publish-settings:focus { |
|
83 box-shadow: 0 1px 0 #0073aa, 0 0 2px 1px #33b3db; /* This is default box shadow for focus */ |
|
84 } |
|
85 |
|
86 #customize-save-button-wrapper .save.has-next-sibling { |
|
87 border-radius: 3px 0 0 3px; |
|
88 } |
|
89 |
|
90 #customize-sidebar-outer-content { |
|
91 position: absolute; |
|
92 top: 0; |
|
93 bottom: 0; |
|
94 left: 0; |
|
95 visibility: hidden; |
|
96 overflow-x: hidden; |
|
97 overflow-y: auto; |
|
98 width: 100%; |
|
99 margin: 0; |
|
100 z-index: -1; |
|
101 background: #eee; |
|
102 transition: left .18s; |
|
103 border-right: 1px solid #ddd; |
|
104 border-left: 1px solid #ddd; |
|
105 height: 100%; |
|
106 } |
|
107 |
|
108 #customize-theme-controls .control-section-outer { |
|
109 display: none !important; |
|
110 } |
|
111 |
|
112 #customize-outer-theme-controls .accordion-section-content { |
|
113 padding: 12px; |
|
114 } |
|
115 |
|
116 #customize-outer-theme-controls .accordion-section-content.open { |
|
117 display: block; |
|
118 } |
|
119 |
|
120 .outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content { |
|
121 visibility: visible; |
|
122 left: 100%; |
|
123 transition: left .18s; |
|
124 } |
|
125 |
|
126 .customize-outer-pane-parent { |
|
127 margin: 0; |
|
128 } |
|
129 |
|
130 .outer-section-open .wp-full-overlay.expanded .wp-full-overlay-main { |
|
131 left: 300px; |
|
132 opacity: 0.4; |
|
133 } |
|
134 |
|
135 .outer-section-open .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main, |
|
136 .outer-section-open .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main, |
|
137 .adding-menu-items .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main, |
|
138 .adding-menu-items .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main, |
|
139 .adding-widget .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main, |
|
140 .adding-widget .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main { |
|
141 left: 64%; |
|
142 } |
|
143 |
|
144 #customize-outer-theme-controls li.notice { |
|
145 padding-top: 8px; |
|
146 padding-bottom: 8px; |
|
147 margin-left: 0; |
|
148 margin-bottom: 10px; |
|
149 } |
|
150 |
|
151 #publish-settings { |
|
152 text-indent: 0; |
|
153 border-radius: 0 3px 3px 0; |
|
154 padding-left: 0; |
|
155 padding-right: 0; |
|
156 box-shadow: none; /* @todo Adjust box shadow based on the disable states of paired button. */ |
|
157 font-size: 14px; |
|
158 width: 30px; |
|
159 float: left; |
|
160 -webkit-transform: none; |
|
161 transform: none; |
|
162 margin-top: 0; |
|
163 } |
|
164 |
|
165 body:not(.ready) #publish-settings, |
|
166 body.trashing #customize-save-button-wrapper .save, |
|
167 body.trashing #publish-settings { |
|
168 display: none; |
29 } |
169 } |
30 |
170 |
31 #customize-header-actions .spinner { |
171 #customize-header-actions .spinner { |
32 margin-top: 13px; |
172 margin-top: 13px; |
33 margin-right: 4px; |
173 margin-right: 4px; |
34 } |
174 } |
35 |
175 |
36 .saving #customize-header-actions .spinner { |
176 .saving #customize-header-actions .spinner, |
|
177 .trashing #customize-header-actions .spinner { |
37 visibility: visible; |
178 visibility: visible; |
38 } |
179 } |
39 |
180 |
40 #customize-header-actions { |
181 #customize-header-actions { |
41 border-bottom: 1px solid #ddd; |
182 border-bottom: 1px solid #ddd; |
42 } |
|
43 |
|
44 #customize-header-actions .secondary-actions { |
|
45 display: none; |
|
46 } |
183 } |
47 |
184 |
48 #customize-controls .wp-full-overlay-sidebar-content { |
185 #customize-controls .wp-full-overlay-sidebar-content { |
49 overflow-y: auto; |
186 overflow-y: auto; |
50 overflow-x: hidden; |
187 overflow-x: hidden; |
51 } |
188 } |
52 |
189 |
53 #customize-info { |
190 .outer-section-open #customize-controls .wp-full-overlay-sidebar-content { |
|
191 background: #eee; |
|
192 } |
|
193 |
|
194 #customize-controls .customize-info { |
54 border: none; |
195 border: none; |
|
196 border-bottom: 1px solid #ddd; |
|
197 margin-bottom: 15px; |
|
198 } |
|
199 |
|
200 #customize-control-changeset_status .customize-inside-control-row, |
|
201 #customize-control-changeset_preview_link input { |
|
202 background-color: #ffffff; |
|
203 border-bottom: 1px solid #ddd; |
|
204 box-sizing: content-box; |
|
205 width: 100%; |
|
206 margin-left: -12px; |
|
207 padding-left: 12px; |
|
208 padding-right: 12px; |
|
209 } |
|
210 |
|
211 #customize-control-trash_changeset { |
|
212 margin-top: 20px; |
|
213 } |
|
214 #customize-control-trash_changeset .button-link { |
|
215 position: relative; |
|
216 padding-left: 24px; |
|
217 display: inline-block; |
|
218 } |
|
219 #customize-control-trash_changeset .button-link:before { |
|
220 content: "\f182"; |
|
221 font: normal 22px dashicons; |
|
222 text-decoration: none; |
|
223 position: absolute; |
|
224 left: 0; |
|
225 top: -2px; |
|
226 } |
|
227 |
|
228 #customize-controls .date-input:invalid { |
|
229 border-color: #dc3232; |
|
230 } |
|
231 |
|
232 #customize-control-changeset_status .customize-inside-control-row { |
|
233 padding-top: 10px; |
|
234 padding-bottom: 10px; |
|
235 font-weight: 500; |
|
236 } |
|
237 |
|
238 #customize-control-changeset_status .customize-inside-control-row:first-of-type { |
55 border-top: 1px solid #ddd; |
239 border-top: 1px solid #ddd; |
56 } |
240 } |
57 |
241 |
58 #customize-info .accordion-section-title { |
242 #customize-control-changeset_status .customize-control-title { |
59 background-color: #fff; |
243 margin-bottom: 6px; |
60 color: #666666; |
244 } |
|
245 |
|
246 #customize-control-changeset_status input { |
|
247 margin-left: 0; |
|
248 } |
|
249 |
|
250 #customize-control-changeset_preview_link { |
|
251 position: relative; |
|
252 display: block; |
|
253 } |
|
254 |
|
255 .preview-link-wrapper .customize-copy-preview-link.preview-control-element.button { |
|
256 margin: 0; |
|
257 position: absolute; |
|
258 bottom: 9px; |
|
259 right: 0; |
|
260 } |
|
261 |
|
262 .preview-link-wrapper { |
|
263 position: relative; |
|
264 } |
|
265 |
|
266 .customize-copy-preview-link:before, |
|
267 .customize-copy-preview-link:after { |
|
268 content: ""; |
|
269 height: 28px; |
|
270 position: absolute; |
|
271 background: #ffffff; |
|
272 top: -1px; |
|
273 } |
|
274 |
|
275 .customize-copy-preview-link:before { |
|
276 left: -10px; |
|
277 width: 9px; |
|
278 opacity: 0.75; |
|
279 } |
|
280 |
|
281 .customize-copy-preview-link:after { |
|
282 left: -5px; |
|
283 width: 4px; |
|
284 opacity: 0.8; |
|
285 } |
|
286 |
|
287 #customize-control-changeset_preview_link input { |
|
288 line-height: 2.5; |
|
289 border-top: 1px solid #ddd; |
61 border-left: none; |
290 border-left: none; |
62 border-right: none; |
291 border-right: none; |
63 border-bottom: 1px solid #eeeeee; |
292 text-indent: -999px; |
64 } |
293 color: #fff; |
65 |
294 } |
66 #customize-info.open .accordion-section-title:after, |
295 |
67 #customize-info .accordion-section-title:hover:after, |
296 #customize-control-changeset_preview_link label { |
68 #customize-info .accordion-section-title:focus:after { |
297 position: relative; |
69 color: #555555; |
298 display: block; |
70 } |
299 } |
71 |
300 |
72 #customize-info .preview-notice { |
301 #customize-control-changeset_preview_link a { |
|
302 display: inline-block; |
|
303 position: absolute; |
|
304 white-space: nowrap; |
|
305 overflow: hidden; |
|
306 width: 90%; |
|
307 bottom: 14px; |
|
308 font-size: 14px; |
|
309 text-decoration: none; |
|
310 } |
|
311 |
|
312 #customize-control-changeset_preview_link a.disabled, |
|
313 #customize-control-changeset_preview_link a.disabled:active, |
|
314 #customize-control-changeset_preview_link a.disabled:focus, |
|
315 #customize-control-changeset_preview_link a.disabled:visited { |
|
316 color: black; |
|
317 opacity: 0.4; |
|
318 cursor: default; |
|
319 outline: none; |
|
320 box-shadow: none; |
|
321 } |
|
322 |
|
323 #sub-accordion-section-publish_settings .customize-section-description-container { |
|
324 display: none; |
|
325 } |
|
326 |
|
327 #customize-controls .customize-info.section-meta { |
|
328 margin-bottom: 15px; |
|
329 } |
|
330 |
|
331 .customize-control-date_time .customize-control-description + .date-time-fields.includes-time { |
|
332 margin-top: 10px; |
|
333 } |
|
334 |
|
335 .customize-control.customize-control-date_time .date-time-fields .date-input.day { |
|
336 margin-right: 0; |
|
337 } |
|
338 |
|
339 .date-time-fields .date-input.month { |
|
340 width: auto; |
|
341 margin: 0; |
|
342 } |
|
343 |
|
344 .date-time-fields .date-input.day, |
|
345 .date-time-fields .date-input.hour, |
|
346 .date-time-fields .date-input.minute { |
|
347 width: 46px; |
|
348 } |
|
349 |
|
350 .date-time-fields .date-input.year { |
|
351 width: 60px; |
|
352 } |
|
353 |
|
354 .date-time-fields .date-input.meridian { |
|
355 width: auto; |
|
356 margin: 0; |
|
357 } |
|
358 |
|
359 .date-time-fields .time-row { |
|
360 margin-top: 12px; |
|
361 } |
|
362 |
|
363 .date-time-fields .date-timezone { |
|
364 line-height: 2.2; |
|
365 text-decoration: none; |
|
366 } |
|
367 |
|
368 #customize-control-changeset_preview_link { |
|
369 margin-top: 6px; |
|
370 } |
|
371 |
|
372 #customize-control-changeset_status { |
|
373 margin-bottom: 0; |
|
374 padding-bottom: 0; |
|
375 } |
|
376 |
|
377 #customize-control-changeset_scheduled_date { |
|
378 box-sizing: content-box; |
|
379 width: 100%; |
|
380 margin-left: -12px; |
|
381 padding: 12px; |
|
382 background: #ffffff; |
|
383 border-bottom: 1px solid #ddd; |
|
384 margin-bottom: 0; |
|
385 } |
|
386 |
|
387 #customize-control-changeset_scheduled_date .customize-control-description { |
|
388 font-style: normal; |
|
389 } |
|
390 |
|
391 #customize-controls .customize-info.is-in-view, |
|
392 #customize-controls .customize-section-title.is-in-view { |
|
393 position: absolute; |
|
394 z-index: 9; |
|
395 width: 100%; |
|
396 box-shadow: 0 1px 0 rgba(0, 0, 0, .1); |
|
397 } |
|
398 |
|
399 #customize-controls .customize-section-title.is-in-view { |
|
400 margin-top: 0; |
|
401 } |
|
402 |
|
403 #customize-controls .customize-info.is-in-view + .accordion-section { |
|
404 margin-top: 15px; |
|
405 } |
|
406 |
|
407 #customize-controls .customize-info.is-sticky, |
|
408 #customize-controls .customize-section-title.is-sticky { |
|
409 position: fixed; |
|
410 top: 46px; |
|
411 } |
|
412 |
|
413 #customize-controls .customize-info .accordion-section-title { |
|
414 background: #fff; |
|
415 color: #555d66; |
|
416 border-left: none; |
|
417 border-right: none; |
|
418 border-bottom: none; |
|
419 cursor: default; |
|
420 } |
|
421 |
|
422 #customize-controls .customize-info.open .accordion-section-title:after, |
|
423 #customize-controls .customize-info .accordion-section-title:hover:after, |
|
424 #customize-controls .customize-info .accordion-section-title:focus:after { |
|
425 color: #32373c; |
|
426 } |
|
427 |
|
428 #customize-controls .customize-info .accordion-section-title:after { |
|
429 display: none; |
|
430 } |
|
431 |
|
432 #customize-controls .customize-info .preview-notice { |
73 font-size: 13px; |
433 font-size: 13px; |
74 line-height: 24px; |
434 line-height: 24px; |
75 } |
435 } |
76 |
436 |
77 #customize-info .theme-name { |
437 #customize-controls .customize-pane-child .customize-section-title h3, |
|
438 #customize-controls .customize-pane-child h3.customize-section-title, |
|
439 #customize-outer-theme-controls .customize-pane-child .customize-section-title h3, |
|
440 #customize-outer-theme-controls .customize-pane-child h3.customize-section-title, |
|
441 #customize-controls .customize-info .panel-title { |
78 font-size: 20px; |
442 font-size: 20px; |
79 font-weight: 200; |
443 font-weight: 200; |
80 line-height: 24px; |
444 line-height: 26px; |
81 display: block; |
445 display: block; |
82 } |
446 overflow: hidden; |
83 |
447 white-space: nowrap; |
84 #customize-info .theme-screenshot { |
448 text-overflow: ellipsis; |
85 width: 258px; |
449 } |
86 } |
450 |
87 |
451 #customize-controls .customize-section-title span.customize-action { |
88 #customize-info .theme-description { |
452 overflow: hidden; |
89 margin-top: 1em; |
453 white-space: nowrap; |
90 color: #666666; |
454 text-overflow: ellipsis; |
91 line-height: 20px; |
455 } |
92 } |
456 |
93 |
457 #customize-controls .customize-info .customize-help-toggle { |
94 #customize-theme-controls .control-section { |
458 position: absolute; |
|
459 top: 4px; |
|
460 right: 1px; |
|
461 padding: 20px 20px 10px 10px; |
|
462 width: 20px; |
|
463 height: 20px; |
|
464 cursor: pointer; |
|
465 box-shadow: none; |
|
466 -webkit-appearance: none; |
|
467 background: transparent; |
|
468 color: #555d66; |
95 border: none; |
469 border: none; |
96 } |
470 } |
97 |
471 |
98 #customize-theme-controls .accordion-section-title { |
472 #customize-controls .customize-info .customize-help-toggle:before { |
99 color: #555555; |
473 position: absolute; |
|
474 top: 5px; |
|
475 left: 6px; |
|
476 } |
|
477 |
|
478 #customize-controls .customize-info.open .customize-help-toggle, |
|
479 #customize-controls .customize-info .customize-help-toggle:focus, |
|
480 #customize-controls .customize-info .customize-help-toggle:hover { |
|
481 color: #0073aa; |
|
482 } |
|
483 |
|
484 #customize-controls .customize-info .customize-panel-description, |
|
485 #customize-controls .customize-info .customize-section-description, |
|
486 #customize-outer-theme-controls .customize-info .customize-section-description, |
|
487 #customize-controls .no-widget-areas-rendered-notice { |
|
488 color: #555d66; |
|
489 display: none; |
|
490 background: #fff; |
|
491 padding: 12px 15px; |
|
492 border-top: 1px solid #ddd; |
|
493 } |
|
494 |
|
495 #customize-controls .customize-info .customize-panel-description.open + .no-widget-areas-rendered-notice { |
|
496 border-top: none; |
|
497 } |
|
498 .no-widget-areas-rendered-notice { |
|
499 font-style: italic; |
|
500 } |
|
501 .no-widget-areas-rendered-notice p:first-child { |
|
502 margin-top: 0; |
|
503 } |
|
504 .no-widget-areas-rendered-notice p:last-child { |
|
505 margin-bottom: 0; |
|
506 } |
|
507 |
|
508 #customize-controls .customize-info .customize-section-description { |
|
509 margin-bottom: 15px; |
|
510 } |
|
511 |
|
512 #customize-controls .customize-info .customize-panel-description p:first-child, |
|
513 #customize-controls .customize-info .customize-section-description p:first-child { |
|
514 margin-top: 0; |
|
515 } |
|
516 |
|
517 #customize-controls .customize-info .customize-panel-description p:last-child, |
|
518 #customize-controls .customize-info .customize-section-description p:last-child { |
|
519 margin-bottom: 0; |
|
520 } |
|
521 |
|
522 #customize-controls .current-panel .control-section > h3.accordion-section-title { |
|
523 padding-right: 30px; |
|
524 } |
|
525 |
|
526 #customize-theme-controls .control-section, |
|
527 #customize-outer-theme-controls .control-section { |
|
528 border: none; |
|
529 } |
|
530 |
|
531 #customize-theme-controls .accordion-section-title, |
|
532 #customize-outer-theme-controls .accordion-section-title { |
|
533 color: #555d66; |
100 background-color: #fff; |
534 background-color: #fff; |
101 border-bottom: 1px solid #eeeeee; |
535 border-bottom: 1px solid #ddd; |
102 } |
536 border-left: 4px solid #fff; |
103 |
537 transition: .15s color ease-in-out, |
104 #customize-theme-controls .accordion-section-content { |
538 .15s background-color ease-in-out, |
105 color: #555555; |
539 .15s border-color ease-in-out; |
106 background: #fff; |
540 } |
107 } |
541 |
108 |
542 #customize-controls #customize-theme-controls .customize-themes-panel .accordion-section-title { |
109 #customize-info.open .accordion-section-title, |
543 color: #555; |
110 #customize-info .accordion-section-title:hover, |
544 background-color: #fff; |
111 #customize-info .accordion-section-title:focus, |
545 border-left: 4px solid #fff; |
112 #customize-theme-controls .control-section:hover > .accordion-section-title, |
546 } |
113 #customize-theme-controls .control-section .accordion-section-title:hover, |
547 |
114 #customize-theme-controls .control-section.open .accordion-section-title, |
548 #customize-theme-controls .accordion-section-title:after, |
115 #customize-theme-controls .control-section .accordion-section-title:focus { |
549 #customize-outer-theme-controls .accordion-section-title:after { |
116 color: #23282d; |
550 content: "\f345"; |
117 background: #f5f5f5; |
551 color: #a0a5aa; |
|
552 } |
|
553 |
|
554 #customize-theme-controls .accordion-section-content, |
|
555 #customize-outer-theme-controls .accordion-section-content { |
|
556 color: #555d66; |
|
557 background: transparent; |
|
558 } |
|
559 |
|
560 #customize-controls .control-section:hover > .accordion-section-title, |
|
561 #customize-controls .control-section .accordion-section-title:hover, |
|
562 #customize-controls .control-section.open .accordion-section-title, |
|
563 #customize-controls .control-section .accordion-section-title:focus { |
|
564 color: #0073aa; |
|
565 background: #f3f3f5; |
|
566 border-left-color: #0073aa; |
|
567 } |
|
568 |
|
569 #accordion-section-themes + .control-section { |
|
570 border-top: 1px solid #ddd; |
118 } |
571 } |
119 |
572 |
120 .js .control-section:hover .accordion-section-title, |
573 .js .control-section:hover .accordion-section-title, |
121 .js .control-section .accordion-section-title:hover, |
574 .js .control-section .accordion-section-title:hover, |
122 .js .control-section.open .accordion-section-title, |
575 .js .control-section.open .accordion-section-title, |
123 .js .control-section .accordion-section-title:focus { |
576 .js .control-section .accordion-section-title:focus { |
124 background: #f5f5f5; |
577 background: #f3f3f5; |
125 } |
578 } |
126 |
579 |
127 #customize-theme-controls .control-section:hover > .accordion-section-title:after, |
580 #customize-theme-controls .control-section:hover > .accordion-section-title:after, |
128 #customize-theme-controls .control-section .accordion-section-title:hover:after, |
581 #customize-theme-controls .control-section .accordion-section-title:hover:after, |
129 #customize-theme-controls .control-section.open .accordion-section-title:after, |
582 #customize-theme-controls .control-section.open .accordion-section-title:after, |
130 #customize-theme-controls .control-section .accordion-section-title:focus:after { |
583 #customize-theme-controls .control-section .accordion-section-title:focus:after, |
131 color: #555; |
584 #customize-outer-theme-controls .control-section:hover > .accordion-section-title:after, |
132 } |
585 #customize-outer-theme-controls .control-section .accordion-section-title:hover:after, |
133 |
586 #customize-outer-theme-controls .control-section.open .accordion-section-title:after, |
134 #customize-info.open, |
587 #customize-outer-theme-controls .control-section .accordion-section-title:focus:after { |
|
588 color: #0073aa; |
|
589 } |
|
590 |
135 #customize-theme-controls .control-section.open { |
591 #customize-theme-controls .control-section.open { |
136 border-bottom: 1px solid #eeeeee; |
592 border-bottom: 1px solid #eee; |
137 } |
593 } |
138 |
594 |
139 #customize-theme-controls .control-section.open .accordion-section-title { |
595 #customize-theme-controls .control-section.open .accordion-section-title, |
140 border-bottom-color: #eeeeee !important; |
596 #customize-outer-theme-controls .control-section.open .accordion-section-title { |
|
597 border-bottom-color: #eee !important; |
141 } |
598 } |
142 |
599 |
143 #customize-theme-controls .control-section:last-of-type.open, |
600 #customize-theme-controls .control-section:last-of-type.open, |
144 #customize-theme-controls .control-section:last-of-type > .accordion-section-title { |
601 #customize-theme-controls .control-section:last-of-type > .accordion-section-title { |
145 border-bottom-color: #ddd; |
602 border-bottom-color: #ddd; |
146 } |
603 } |
147 |
604 |
148 #customize-theme-controls > ul, |
605 #customize-theme-controls .control-panel-content:not(.control-panel-nav_menus) .control-section:nth-child(2), |
|
606 #customize-theme-controls .control-panel-nav_menus .control-section-nav_menu, |
|
607 #customize-theme-controls .control-section-nav_menu_locations .accordion-section-title { |
|
608 border-top: 1px solid #ddd; |
|
609 } |
|
610 |
|
611 #customize-theme-controls .control-panel-nav_menus .control-section-nav_menu + .control-section-nav_menu { |
|
612 border-top: none; |
|
613 } |
|
614 |
|
615 #customize-theme-controls > ul { |
|
616 margin: 0; |
|
617 } |
|
618 |
149 #customize-theme-controls .accordion-section-content { |
619 #customize-theme-controls .accordion-section-content { |
|
620 position: absolute; |
|
621 top: 0; |
|
622 left: 100%; |
|
623 width: 100%; |
150 margin: 0; |
624 margin: 0; |
151 } |
625 padding: 12px; |
152 |
626 box-sizing: border-box; |
153 .control-section.control-panel > .accordion-section-title { |
627 } |
154 padding-right: 54px; |
628 |
155 } |
629 #customize-info, |
156 |
630 #customize-theme-controls .customize-pane-parent, |
157 .control-section.control-panel > .accordion-section-title:after { |
631 #customize-theme-controls .customize-pane-child { |
158 content: "\f345"; |
632 overflow: visible; |
159 background: #f5f5f5; |
633 width: 100%; |
160 color: #555; |
634 margin: 0; |
161 width: 38px; |
635 padding: 0; |
162 height: 100%; |
636 box-sizing: border-box; |
163 margin: -11px -10px -11px 0; /* compensate for positioning */ |
637 transition: 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1); |
164 line-height: 45px; |
638 transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1); |
165 padding-left: 5px; |
639 transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1), 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1); /* easeInOutCubic */ |
166 border-left: 1px solid #eee; |
640 } |
167 z-index: 0; |
641 |
168 } |
642 #customize-theme-controls .customize-pane-child.skip-transition { |
169 |
643 transition: none; |
170 #customize-theme-controls .control-section.control-panel > h3.accordion-section-title:focus:after, |
644 } |
171 #customize-theme-controls .control-section.control-panel > h3.accordion-section-title:hover:after { |
645 |
172 background: #ddd; |
646 #customize-info, |
173 color: #000; |
647 #customize-theme-controls .customize-pane-parent { |
174 border: 1px solid #d9d9d9; |
648 position: relative; |
175 border-right: none; |
649 visibility: visible; |
176 margin-top: -12px; |
650 height: auto; |
177 line-height: 44px; |
651 max-height: none; |
178 z-index: 1; |
652 overflow: auto; |
|
653 -webkit-transform: none; |
|
654 transform: none; |
|
655 } |
|
656 |
|
657 #customize-theme-controls .customize-pane-child { |
|
658 position: absolute; |
|
659 top: 0; |
|
660 left: 0; |
|
661 visibility: hidden; |
|
662 height: 0; |
|
663 max-height: none; |
|
664 overflow: hidden; |
|
665 -webkit-transform: translateX(100%); |
|
666 transform: translateX(100%); |
|
667 } |
|
668 |
|
669 #customize-theme-controls .customize-pane-child.open, |
|
670 #customize-theme-controls .customize-pane-child.current-panel { |
|
671 -webkit-transform: none; |
|
672 transform: none; |
|
673 } |
|
674 |
|
675 .section-open #customize-theme-controls .customize-pane-parent, |
|
676 .in-sub-panel #customize-theme-controls .customize-pane-parent, |
|
677 .section-open #customize-info, |
|
678 .in-sub-panel #customize-info, |
|
679 .in-sub-panel.section-open #customize-theme-controls .customize-pane-child.current-panel { |
|
680 visibility: hidden; |
|
681 height: 0; |
|
682 overflow: hidden; |
|
683 -webkit-transform: translateX(-100%); |
|
684 transform: translateX(-100%); |
|
685 } |
|
686 |
|
687 .section-open #customize-theme-controls .customize-pane-parent.busy, |
|
688 .in-sub-panel #customize-theme-controls .customize-pane-parent.busy, |
|
689 .section-open #customize-info.busy, |
|
690 .in-sub-panel #customize-info.busy, |
|
691 .busy.section-open.in-sub-panel #customize-theme-controls .customize-pane-child.current-panel, |
|
692 #customize-theme-controls .customize-pane-child.open, |
|
693 #customize-theme-controls .customize-pane-child.current-panel, |
|
694 #customize-theme-controls .customize-pane-child.busy { |
|
695 visibility: visible; |
|
696 height: auto; |
|
697 overflow: auto; |
|
698 } |
|
699 |
|
700 #customize-theme-controls .customize-pane-child.accordion-section-content, |
|
701 #customize-theme-controls .customize-pane-child.accordion-sub-container { |
|
702 display: block; |
|
703 overflow-x: hidden; |
|
704 } |
|
705 |
|
706 #customize-theme-controls .customize-pane-child.accordion-section-content { |
|
707 padding: 12px; |
|
708 } |
|
709 |
|
710 #customize-theme-controls .customize-pane-child.menu li { |
|
711 position: static; |
|
712 } |
|
713 |
|
714 .customize-section-description-container, |
|
715 .control-section-nav_menu .customize-section-description-container, |
|
716 .control-section-new_menu .customize-section-description-container { |
|
717 margin-bottom: 15px; |
|
718 } |
|
719 |
|
720 .control-section-nav_menu .customize-control, |
|
721 .control-section-new_menu .customize-control { |
|
722 /* Override default `margin-bottom` for `.customize-control` */ |
|
723 margin-bottom: 0; |
|
724 } |
|
725 |
|
726 .customize-section-title { |
|
727 margin: -12px -12px 0 -12px; |
|
728 border-bottom: 1px solid #ddd; |
|
729 background: #fff; |
|
730 } |
|
731 |
|
732 div.customize-section-description { |
|
733 margin-top: 22px; |
|
734 } |
|
735 |
|
736 .customize-info div.customize-section-description { |
|
737 margin-top: 0; |
|
738 } |
|
739 |
|
740 div.customize-section-description p:first-child { |
|
741 margin-top: 0; |
|
742 } |
|
743 |
|
744 div.customize-section-description p:last-child { |
|
745 margin-bottom: 0; |
|
746 } |
|
747 |
|
748 #customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child { |
|
749 border-bottom: 1px solid #ddd; |
|
750 padding: 12px 12px 12px 12px; |
|
751 } |
|
752 |
|
753 .ios #customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child { |
|
754 padding: 12px 12px 13px 12px; |
|
755 } |
|
756 |
|
757 .customize-section-title h3, |
|
758 h3.customize-section-title { |
|
759 padding: 10px 10px 12px 14px; |
|
760 margin: 0; |
|
761 line-height: 21px; |
|
762 color: #555d66; |
179 } |
763 } |
180 |
764 |
181 .accordion-sub-container.control-panel-content { |
765 .accordion-sub-container.control-panel-content { |
182 display: none; |
766 display: none; |
183 position: absolute; |
767 position: absolute; |
184 left: 300px; |
|
185 top: 0; |
768 top: 0; |
186 width: 300px; |
769 width: 100%; |
187 border-top: 1px solid #ddd; |
770 } |
188 -webkit-transition: left ease-in-out .18s; |
771 |
189 transition: left ease-in-out .18s; |
772 .accordion-sub-container.control-panel-content.busy { |
190 } |
|
191 |
|
192 .accordion-sub-container.control-panel-content.animating { |
|
193 display: block; |
773 display: block; |
194 } |
774 } |
195 |
775 |
196 .current-panel .accordion-sub-container.control-panel-content { |
776 .current-panel .accordion-sub-container.control-panel-content { |
197 width: 100%; |
777 width: 100%; |
198 } |
778 } |
199 |
779 |
200 .customize-overlay-close, |
|
201 .customize-controls-close { |
780 .customize-controls-close { |
202 display: block; |
781 display: block; |
203 position: absolute; |
782 position: absolute; |
204 top: 0; |
783 top: 0; |
205 left: 0; |
784 left: 0; |
206 width: 45px; |
785 width: 45px; |
207 height: 45px; |
786 height: 41px; |
208 padding: 0 2px 0 0; |
787 padding: 0 2px 0 0; |
209 background: #eee; |
788 background: #eee; |
210 border: none; |
789 border: none; |
|
790 border-top: 4px solid #eee; |
211 border-right: 1px solid #ddd; |
791 border-right: 1px solid #ddd; |
212 color: #444; |
792 color: #444; |
213 text-align: left; |
793 text-align: left; |
214 cursor: pointer; |
794 cursor: pointer; |
215 -webkit-transition: color .1s ease-in-out, background .1s ease-in-out; |
795 transition: color .15s ease-in-out, |
216 transition: color .1s ease-in-out, background .1s ease-in-out; |
796 border-color .15s ease-in-out, |
217 -webkit-box-sizing: content-box; |
797 background .15s ease-in-out; |
218 -moz-box-sizing: content-box; |
|
219 box-sizing: content-box; |
798 box-sizing: content-box; |
220 } |
799 } |
221 |
800 |
222 .customize-overlay-close { |
801 .customize-panel-back, |
223 left: auto; |
802 .customize-section-back { |
224 right: 0; |
|
225 border-right: 0; |
|
226 border-left: 1px solid #ddd; |
|
227 } |
|
228 |
|
229 .control-panel-back { |
|
230 display: block; |
803 display: block; |
231 position: fixed; |
804 float: left; |
232 top: 0; |
805 width: 48px; |
233 z-index: 99; |
806 height: 71px; |
234 left: -48px; |
807 padding: 0 24px 0 0; |
235 width: 45px; |
808 margin: 0; |
236 height: 45px; |
809 background: #fff; |
237 padding-right: 2px; |
810 border: none; |
238 background: #eee; |
|
239 border-right: 1px solid #ddd; |
811 border-right: 1px solid #ddd; |
|
812 border-left: 4px solid #fff; |
|
813 box-shadow: none; |
240 cursor: pointer; |
814 cursor: pointer; |
241 -webkit-transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out; |
815 transition: color .15s ease-in-out, |
242 transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out; |
816 border-color .15s ease-in-out, |
243 } |
817 background .15s ease-in-out; |
244 |
818 } |
245 .ios .control-panel-back { |
819 |
246 -webkit-transition: left 0s; |
820 .customize-section-back { |
247 transition: left 0s; |
821 height: 74px; |
248 } |
822 } |
249 |
823 |
250 .collapsed .control-panel-back { |
824 .ios .customize-panel-back { |
251 display: none; |
825 display: none; |
252 } |
826 } |
253 |
827 |
254 .customize-overlay-close:focus, |
828 .ios .expanded.in-sub-panel .customize-panel-back { |
255 .customize-overlay-close:hover, |
829 display: block; |
|
830 } |
|
831 |
|
832 #customize-controls .panel-meta.customize-info .accordion-section-title { |
|
833 margin-left: 48px; |
|
834 border-left: none; |
|
835 } |
|
836 |
|
837 #customize-controls .panel-meta.customize-info .accordion-section-title:hover, |
|
838 #customize-controls .cannot-expand:hover .accordion-section-title { |
|
839 background: #fff; |
|
840 color: #555d66; |
|
841 border-left-color: #fff; |
|
842 } |
|
843 |
256 .customize-controls-close:focus, |
844 .customize-controls-close:focus, |
257 .customize-controls-close:hover, |
845 .customize-controls-close:hover, |
258 .control-panel-back:focus, |
|
259 .control-panel-back:hover, |
|
260 .customize-controls-preview-toggle:focus, |
846 .customize-controls-preview-toggle:focus, |
261 .customize-controls-preview-toggle:hover { |
847 .customize-controls-preview-toggle:hover { |
262 background: #ddd; |
848 background: #fff; |
263 border-color: #ccc; |
849 color: #0073aa; |
264 color: #000; |
850 border-top-color: #0073aa; |
265 outline: none; |
851 outline: none; |
266 -webkit-box-shadow: none; |
|
267 box-shadow: none; |
852 box-shadow: none; |
268 } |
853 } |
269 |
854 |
270 .customize-overlay-close:before, |
855 |
|
856 .customize-panel-back:hover, |
|
857 .customize-panel-back:focus, |
|
858 .customize-section-back:hover, |
|
859 .customize-section-back:focus { |
|
860 color: #0073aa; |
|
861 background: #f3f3f5; |
|
862 border-left-color: #0073aa; |
|
863 outline: none; |
|
864 box-shadow: none; |
|
865 } |
|
866 |
271 .customize-controls-close:before { |
867 .customize-controls-close:before { |
272 font: normal 22px/45px dashicons; |
868 font: normal 22px/45px dashicons; |
273 content: "\f335"; |
869 content: "\f335"; |
274 position: relative; |
870 position: relative; |
275 top: 1px; |
871 top: -3px; |
276 left: 13px; |
872 left: 13px; |
277 } |
873 } |
278 |
874 |
279 .control-panel-back:before { |
875 .customize-panel-back:before, |
280 font: normal 20px/45px dashicons; |
876 .customize-section-back:before { |
|
877 font: normal 20px/72px dashicons; |
281 content: "\f341"; |
878 content: "\f341"; |
282 position: relative; |
879 position: relative; |
283 top: 1px; |
880 left: 9px; |
284 left: 13px; |
|
285 } |
|
286 |
|
287 .in-sub-panel .control-panel-back { |
|
288 left: 0; |
|
289 } |
|
290 |
|
291 .current-panel > .accordion-section-title { |
|
292 height: 22px; |
|
293 } |
881 } |
294 |
882 |
295 .wp-full-overlay-sidebar .wp-full-overlay-header { |
883 .wp-full-overlay-sidebar .wp-full-overlay-header { |
296 -webkit-transition: padding ease-in-out .18s; |
884 background-color: #eee; |
297 transition: padding ease-in-out .18s; |
885 transition: padding ease-in-out .18s; |
298 } |
886 } |
299 |
887 |
300 .in-sub-panel .wp-full-overlay-sidebar .wp-full-overlay-header { |
888 .in-sub-panel .wp-full-overlay-sidebar .wp-full-overlay-header { |
301 padding-left: 62px; |
889 padding-left: 62px; |
302 } |
890 } |
303 |
891 |
304 #customize-info, |
|
305 #customize-theme-controls > ul > .accordion-section { |
|
306 position: relative; |
|
307 left: 0; |
|
308 -webkit-transition: left ease-in-out .18s; |
|
309 transition: left ease-in-out .18s; |
|
310 } |
|
311 |
|
312 .ios #customize-info, |
|
313 .ios #customize-theme-controls > ul > .accordion-section { |
|
314 -webkit-transition: left 0s; |
|
315 transition: left 0s; |
|
316 } |
|
317 |
|
318 .in-sub-panel #customize-info, |
|
319 .in-sub-panel #customize-theme-controls > ul > .accordion-section { |
|
320 left: -300px; |
|
321 width: 300px; |
|
322 } |
|
323 |
|
324 .in-sub-panel #customize-theme-controls .accordion-section.current-panel { |
|
325 width: 100%; |
|
326 } |
|
327 |
|
328 #customize-theme-controls .control-section.current-panel { |
|
329 padding: 0; |
|
330 } |
|
331 |
|
332 #customize-theme-controls .control-section > h3.accordion-section-title { |
|
333 position: relative; |
|
334 left: 0; |
|
335 } |
|
336 |
|
337 #customize-theme-controls .control-section.current-panel > h3.accordion-section-title { |
|
338 left: -354px; |
|
339 -webkit-transition: left ease-in-out .18s; |
|
340 transition: left ease-in-out .18s; |
|
341 } |
|
342 |
|
343 .ios #customize-theme-controls .control-section.current-panel > h3.accordion-section-title { |
|
344 -webkit-transition: left 0s; |
|
345 transition: left 0s; |
|
346 } |
|
347 |
|
348 .control-section.control-panel .accordion-section-title .panel-title { |
|
349 font-size: 20px; |
|
350 font-weight: 200; |
|
351 line-height: 24px; |
|
352 display: block; |
|
353 border: none; |
|
354 } |
|
355 |
|
356 .control-section.control-panel .preview-notice { |
|
357 font-size: 13px; |
|
358 line-height: 24px; |
|
359 } |
|
360 |
|
361 p.customize-section-description { |
892 p.customize-section-description { |
362 font-style: normal; |
893 font-style: normal; |
|
894 margin-top: 22px; |
|
895 margin-bottom: 0; |
|
896 } |
|
897 |
|
898 .customize-section-description ul { |
|
899 margin-left: 1em; |
|
900 } |
|
901 |
|
902 .customize-section-description ul > li { |
|
903 list-style: disc; |
|
904 } |
|
905 |
|
906 .section-description-buttons { |
|
907 text-align: right; |
|
908 } |
|
909 |
|
910 .section-description-buttons button.button-link { |
|
911 color: #0073aa; |
|
912 text-decoration: underline; |
363 } |
913 } |
364 |
914 |
365 .customize-control { |
915 .customize-control { |
366 width: 100%; |
916 width: 100%; |
367 float: left; |
917 float: left; |
368 clear: both; |
918 clear: both; |
369 margin-bottom: 8px; |
919 margin-bottom: 12px; |
370 } |
920 } |
371 |
921 |
372 .customize-control select, |
922 .customize-control select, |
373 .customize-control input[type="radio"], |
923 .customize-control input[type="radio"], |
374 .customize-control input[type="checkbox"] { |
924 .customize-control input[type="checkbox"] { |
490 max-height: 64px; |
1065 max-height: 64px; |
491 margin: 10px; |
1066 margin: 10px; |
492 float: left; |
1067 float: left; |
493 } |
1068 } |
494 |
1069 |
|
1070 #available-menu-items .accordion-section-content .new-content-item, |
|
1071 .customize-control-dropdown-pages .new-content-item { |
|
1072 width: calc(100% - 30px); |
|
1073 padding: 8px 15px; |
|
1074 position: absolute; |
|
1075 bottom: 0; |
|
1076 z-index: 10; |
|
1077 background: #eee; |
|
1078 display: -webkit-box; |
|
1079 display: flex; |
|
1080 } |
|
1081 |
|
1082 .customize-control-dropdown-pages .new-content-item { |
|
1083 width: 100%; |
|
1084 padding: 5px 0 5px 1px; |
|
1085 position: relative; |
|
1086 } |
|
1087 |
|
1088 #available-menu-items .new-content-item .create-item-input, |
|
1089 .customize-control-dropdown-pages .new-content-item .create-item-input { |
|
1090 -webkit-box-flex: 10; |
|
1091 flex-grow: 10; |
|
1092 } |
|
1093 |
|
1094 #available-menu-items .new-content-item .add-content, |
|
1095 .customize-control-dropdown-pages .new-content-item .add-content { |
|
1096 margin: 2px 0 2px 6px; |
|
1097 -webkit-box-flex: 10; |
|
1098 flex-grow: 1; |
|
1099 } |
|
1100 |
|
1101 .customize-control-dropdown-pages .new-content-item .create-item-input.invalid { |
|
1102 border: 1px solid #dc3232; |
|
1103 } |
|
1104 |
|
1105 .customize-control-dropdown-pages .add-new-toggle { |
|
1106 margin-left: 1px; |
|
1107 font-weight: 600; |
|
1108 line-height: 28px; |
|
1109 } |
|
1110 |
495 #customize-preview iframe { |
1111 #customize-preview iframe { |
496 width: 100%; |
1112 width: 100%; |
497 height: 100%; |
1113 height: 100%; |
|
1114 position: absolute; |
|
1115 } |
|
1116 #customize-preview iframe + iframe { |
|
1117 visibility: hidden; |
498 } |
1118 } |
499 |
1119 |
500 .wp-full-overlay-sidebar { |
1120 .wp-full-overlay-sidebar { |
501 background: #eeeeee; |
1121 background: #eee; |
502 border-right: 1px solid #ddd; |
1122 border-right: 1px solid #ddd; |
503 } |
1123 } |
504 |
1124 |
505 .collapse-sidebar { |
1125 |
506 background-color: transparent !important; |
1126 /** |
507 border: none !important; |
1127 * Notifications |
508 -webkit-box-shadow: none !important; |
1128 */ |
509 box-shadow: none !important; |
1129 |
510 -webkit-border-radius: 0 !important; |
1130 #customize-controls .customize-control-notifications-container { /* Scoped to #customize-controls for specificity over notification styles in common.css. */ |
511 border-radius: 0 !important; |
1131 margin: 4px 0 8px 0; |
512 } |
1132 padding: 0; |
513 |
1133 cursor: default; |
514 |
1134 } |
515 .collapse-sidebar:active, |
1135 |
516 .collapse-sidebar:active .collapse-sidebar-label, |
1136 #customize-controls .customize-control-widget_form.has-error .widget .widget-top, |
517 .collapse-sidebar:active .collapse-sidebar-arrow:before { |
1137 .customize-control-nav_menu_item.has-error .menu-item-bar .menu-item-handle { |
518 text-shadow: none; |
1138 box-shadow: inset 0 0 0 2px #dc3232; |
519 } |
1139 transition: .15s box-shadow linear; |
520 |
1140 } |
521 .collapsed .collapse-sidebar-arrow:before { |
1141 |
522 color: #82878c; |
1142 #customize-controls .customize-control-notifications-container li.notice { |
|
1143 list-style: none; |
|
1144 margin: 0 0 6px 0; |
|
1145 padding: 9px 14px; |
|
1146 overflow: hidden; |
|
1147 } |
|
1148 #customize-controls .customize-control-notifications-container .notice.is-dismissible { |
|
1149 padding-right: 38px; |
|
1150 } |
|
1151 |
|
1152 .customize-control-notifications-container li.notice:last-child { |
|
1153 margin-bottom: 0; |
|
1154 } |
|
1155 |
|
1156 #customize-controls .customize-control-nav_menu_item .customize-control-notifications-container { |
|
1157 margin-top: 0; |
|
1158 } |
|
1159 |
|
1160 #customize-controls .customize-control-widget_form .customize-control-notifications-container { |
|
1161 margin-top: 8px; |
|
1162 } |
|
1163 |
|
1164 .customize-control-text.has-error input { |
|
1165 outline: 2px solid #dc3232; |
|
1166 } |
|
1167 |
|
1168 #customize-controls #customize-notifications-area { |
|
1169 position: absolute; |
|
1170 top: 46px; |
|
1171 width: 100%; |
|
1172 border-bottom: 1px solid #ddd; |
|
1173 display: block; |
|
1174 padding: 0; |
|
1175 margin: 0; |
|
1176 } |
|
1177 |
|
1178 .wp-full-overlay.collapsed #customize-controls #customize-notifications-area { |
|
1179 display: none !important; |
|
1180 } |
|
1181 |
|
1182 #customize-controls #customize-notifications-area:not(.has-overlay-notifications), |
|
1183 #customize-controls .customize-section-title > .customize-control-notifications-container:not(.has-overlay-notifications), |
|
1184 #customize-controls .panel-meta > .customize-control-notifications-container:not(.has-overlay-notifications) { |
|
1185 max-height: 210px; |
|
1186 overflow-x: hidden; |
|
1187 overflow-y: auto; |
|
1188 } |
|
1189 |
|
1190 #customize-controls #customize-notifications-area > ul, |
|
1191 #customize-controls #customize-notifications-area .notice, |
|
1192 #customize-controls .panel-meta > .customize-control-notifications-container, |
|
1193 #customize-controls .panel-meta > .customize-control-notifications-container .notice, |
|
1194 #customize-controls .customize-section-title > .customize-control-notifications-container, |
|
1195 #customize-controls .customize-section-title > .customize-control-notifications-container .notice { |
|
1196 margin: 0; |
|
1197 } |
|
1198 #customize-controls .panel-meta > .customize-control-notifications-container, |
|
1199 #customize-controls .customize-section-title > .customize-control-notifications-container { |
|
1200 border-top: 1px solid #ddd; |
|
1201 } |
|
1202 #customize-controls #customize-notifications-area .notice, |
|
1203 #customize-controls .panel-meta > .customize-control-notifications-container .notice, |
|
1204 #customize-controls .customize-section-title > .customize-control-notifications-container .notice { |
|
1205 padding: 9px 14px; |
|
1206 } |
|
1207 #customize-controls #customize-notifications-area .notice.is-dismissible, |
|
1208 #customize-controls .panel-meta > .customize-control-notifications-container .notice.is-dismissible, |
|
1209 #customize-controls .customize-section-title > .customize-control-notifications-container .notice.is-dismissible { |
|
1210 padding-right: 38px; |
|
1211 } |
|
1212 #customize-controls #customize-notifications-area .notice + .notice, |
|
1213 #customize-controls .panel-meta > .customize-control-notifications-container .notice + .notice, |
|
1214 #customize-controls .customize-section-title > .customize-control-notifications-container .notice + .notice { |
|
1215 margin-top: 1px; |
|
1216 } |
|
1217 |
|
1218 @-webkit-keyframes customize-fade-in { |
|
1219 0% { opacity: 0; } |
|
1220 100% { opacity: 1; } |
|
1221 } |
|
1222 |
|
1223 @keyframes customize-fade-in { |
|
1224 0% { opacity: 0; } |
|
1225 100% { opacity: 1; } |
|
1226 } |
|
1227 |
|
1228 #customize-controls .notice.notification-overlay, |
|
1229 #customize-controls #customize-notifications-area .notice.notification-overlay { |
|
1230 margin: 0; |
|
1231 border-left: 0; /* @todo Appropriate styles could be added for notice-error, notice-warning, notice-success, etc */ |
|
1232 } |
|
1233 |
|
1234 #customize-controls .customize-control-notifications-container.has-overlay-notifications { |
|
1235 -webkit-animation: customize-fade-in 0.5s; |
|
1236 animation: customize-fade-in 0.5s; |
|
1237 z-index: 30; |
|
1238 } |
|
1239 |
|
1240 /* Note: Styles for this are also defined in themes.css */ |
|
1241 #customize-controls #customize-notifications-area .notice.notification-overlay .notification-message { |
|
1242 clear: both; |
|
1243 color: #191e23; |
|
1244 font-size: 18px; |
|
1245 font-style: normal; |
|
1246 margin: 0; |
|
1247 padding: 2em 0; |
|
1248 text-align: center; |
|
1249 width: 100%; |
|
1250 display: block; |
|
1251 top: 50%; |
|
1252 position: relative; |
523 } |
1253 } |
524 |
1254 |
525 /* Style for custom settings */ |
1255 /* Style for custom settings */ |
526 |
1256 |
527 /* |
1257 /** |
|
1258 * Static front page |
|
1259 */ |
|
1260 |
|
1261 #customize-control-show_on_front.has-error { |
|
1262 margin-bottom: 0; |
|
1263 } |
|
1264 #customize-control-show_on_front.has-error .customize-control-notifications-container { |
|
1265 margin-top: 12px; |
|
1266 } |
|
1267 |
|
1268 /** |
528 * Dropdowns |
1269 * Dropdowns |
529 */ |
1270 */ |
|
1271 |
530 .accordion-section .dropdown { |
1272 .accordion-section .dropdown { |
531 float: left; |
1273 float: left; |
532 display: block; |
1274 display: block; |
533 position: relative; |
1275 position: relative; |
534 cursor: pointer; |
1276 cursor: pointer; |
646 |
1374 |
647 .customize-control-header button img { |
1375 .customize-control-header button img { |
648 display: block; |
1376 display: block; |
649 } |
1377 } |
650 |
1378 |
651 .customize-control-media .remove-button, |
1379 .customize-control .attachment-media-view .remove-button, |
652 .customize-control-media .default-button, |
1380 .customize-control .attachment-media-view .default-button, |
653 .customize-control-media .upload-button, |
1381 .customize-control .attachment-media-view .upload-button, |
654 .customize-control-upload .remove-button, |
|
655 .customize-control-upload .default-button, |
|
656 .customize-control-upload .upload-button, |
|
657 .customize-control-image .remove-button, |
|
658 .customize-control-image .default-button, |
|
659 .customize-control-image .upload-button, |
|
660 .customize-control-background .remove-button, |
|
661 .customize-control-background .default-button, |
|
662 .customize-control-background .upload-button, |
|
663 .customize-control-header button.new, |
1382 .customize-control-header button.new, |
664 .customize-control-header button.remove { |
1383 .customize-control-header button.remove { |
|
1384 width: auto; |
|
1385 height: auto; |
665 white-space: normal; |
1386 white-space: normal; |
666 width: 48%; |
1387 } |
667 height: auto; |
1388 |
668 } |
1389 .customize-control .attachment-media-view .thumbnail, |
669 |
|
670 .customize-control-media .current .container, |
|
671 .customize-control-upload .current .container, |
|
672 .customize-control-image .current .container, |
|
673 .customize-control-background .current .container, |
|
674 .customize-control-header .current .container { |
1390 .customize-control-header .current .container { |
675 overflow: hidden; |
1391 overflow: hidden; |
676 -webkit-border-radius: 2px; |
1392 } |
677 border: 1px solid #eee; |
1393 |
678 -webkit-border-radius: 2px; |
1394 .customize-control .attachment-media-view .placeholder, |
679 border-radius: 2px; |
|
680 } |
|
681 |
|
682 .customize-control-media .current .container, |
|
683 .customize-control-upload .current .container, |
|
684 .customize-control-background .current .container, |
|
685 .customize-control-image .current .container { |
|
686 min-height: 40px; |
|
687 } |
|
688 |
|
689 .customize-control-media .placeholder, |
|
690 .customize-control-upload .placeholder, |
|
691 .customize-control-image .placeholder, |
|
692 .customize-control-background .placeholder, |
|
693 .customize-control-header .placeholder { |
1395 .customize-control-header .placeholder { |
694 width: 100%; |
1396 width: 100%; |
695 position: relative; |
1397 position: relative; |
696 text-align: center; |
1398 text-align: center; |
697 cursor: default; |
1399 cursor: default; |
698 } |
1400 border: 1px dashed #b4b9be; |
699 |
1401 box-sizing: border-box; |
700 .customize-control-media .inner, |
1402 padding: 9px 0; |
701 .customize-control-upload .inner, |
1403 line-height: 20px; |
702 .customize-control-image .inner, |
1404 } |
703 .customize-control-background .inner, |
1405 |
704 .customize-control-header .inner { |
1406 .customize-control-header .inner { |
705 display: none; |
1407 display: none; |
706 position: absolute; |
1408 position: absolute; |
707 width: 100%; |
1409 width: 100%; |
708 color: #555; |
1410 color: #555d66; |
709 white-space: nowrap; |
1411 white-space: nowrap; |
710 text-overflow: ellipsis; |
1412 text-overflow: ellipsis; |
711 overflow: hidden; |
1413 overflow: hidden; |
712 } |
1414 } |
713 |
1415 |
714 .customize-control-media .inner, |
|
715 .customize-control-upload .inner, |
|
716 .customize-control-background .inner, |
|
717 .customize-control-image .inner { |
|
718 display: block; |
|
719 min-height: 40px; |
|
720 } |
|
721 |
|
722 .customize-control-media .inner, |
|
723 .customize-control-upload .inner, |
|
724 .customize-control-image .inner, |
|
725 .customize-control-background .inner, |
|
726 .customize-control-header .inner, |
1416 .customize-control-header .inner, |
727 .customize-control-header .inner .dashicons { |
1417 .customize-control-header .inner .dashicons { |
728 line-height: 20px; |
1418 line-height: 20px; |
729 top: 10px; |
1419 top: 8px; |
730 } |
1420 } |
731 |
1421 |
732 .customize-control-header .list .inner, |
1422 .customize-control-header .list .inner, |
733 .customize-control-header .list .inner .dashicons { |
1423 .customize-control-header .list .inner .dashicons { |
734 top: 9px; |
1424 top: 9px; |
735 } |
1425 } |
736 |
1426 |
737 .customize-control-header .header-view { |
1427 .customize-control-header .header-view { |
738 position: relative; |
1428 position: relative; |
739 width: 100%; |
1429 width: 100%; |
740 margin-bottom: 5px; |
1430 margin-bottom: 12px; |
741 } |
1431 } |
742 |
1432 |
743 .customize-control-header .header-view:last-child { |
1433 .customize-control-header .header-view:last-child { |
744 margin-bottom: 0px; |
1434 margin-bottom: 0px; |
745 } |
1435 } |
746 |
1436 |
747 /* Convoluted, but 'outline' support isn't good enough yet */ |
1437 /* Convoluted, but 'outline' support isn't good enough yet */ |
748 .customize-control-header .header-view:after { |
1438 .customize-control-header .header-view:after { |
749 border: 0; |
1439 border: 0; |
750 } |
1440 } |
|
1441 |
|
1442 .customize-control-header .header-view.selected .choice:focus { |
|
1443 outline: none; |
|
1444 } |
|
1445 |
751 .customize-control-header .header-view.selected:after { |
1446 .customize-control-header .header-view.selected:after { |
752 content: ''; |
1447 content: ''; |
753 position: absolute; |
1448 position: absolute; |
754 height: auto; |
1449 height: auto; |
755 top: 0; left: 0; bottom: 0; right: 0; |
1450 top: 0; |
|
1451 left: 0; |
|
1452 bottom: 0; |
|
1453 right: 0; |
756 border: 4px solid #00a0d2; |
1454 border: 4px solid #00a0d2; |
757 -webkit-border-radius: 2px; |
|
758 border-radius: 2px; |
1455 border-radius: 2px; |
759 } |
1456 } |
|
1457 |
760 .customize-control-header .header-view.button.selected { |
1458 .customize-control-header .header-view.button.selected { |
761 border: 0; |
1459 border: 0; |
762 } |
1460 } |
763 |
1461 |
764 /* Header control: overlay "close" button */ |
1462 /* Header control: overlay "close" button */ |
765 |
1463 |
766 .customize-control-header .uploaded .header-view .close { |
1464 .customize-control-header .uploaded .header-view .close { |
767 font-size: 2em; |
1465 font-size: 20px; |
768 color: grey; |
1466 color: #fff; |
769 position: absolute; |
1467 background: #555d66; |
770 visibility: hidden; |
1468 background: rgba(0, 0, 0, 0.5); |
|
1469 position: absolute; |
771 top: 10px; |
1470 top: 10px; |
|
1471 left: -999px; |
|
1472 z-index: 1; |
|
1473 width: 26px; |
|
1474 height: 26px; |
|
1475 cursor: pointer; |
|
1476 } |
|
1477 |
|
1478 .customize-control-header .header-view:hover .close, |
|
1479 .customize-control-header .header-view .close:focus { |
|
1480 left: auto; |
772 right: 10px; |
1481 right: 10px; |
773 z-index: 1; |
1482 } |
774 width: 20px; |
1483 |
775 height: 20px; |
1484 .customize-control-header .header-view .close:focus { |
776 cursor: pointer; |
1485 outline: 1px solid #5b9dd9; |
777 } |
|
778 |
|
779 .customize-control-header .uploaded .header-view .close:hover { |
|
780 color: black; |
|
781 text-shadow: |
|
782 -1px -1px 0 #fff, |
|
783 1px -1px 0 #fff, |
|
784 -1px 1px 0 #fff, |
|
785 1px 1px 0 #fff; |
|
786 } |
|
787 |
|
788 .customize-control-header .header-view:hover .close { |
|
789 visibility: visible; |
|
790 } |
1486 } |
791 |
1487 |
792 /* Header control: randomiz(s)er */ |
1488 /* Header control: randomiz(s)er */ |
793 |
1489 |
794 .customize-control-header .random.placeholder { |
1490 .customize-control-header .random.placeholder { |
795 cursor: pointer; |
1491 cursor: pointer; |
796 -webkit-border-radius: 2px; |
|
797 border-radius: 2px; |
1492 border-radius: 2px; |
798 height: 40px; |
1493 height: 40px; |
799 } |
1494 } |
800 |
1495 |
801 .customize-control-header button.random { |
1496 .customize-control-header button.random { |
813 .customize-control-header .header-view:hover > button.random .dice { |
1508 .customize-control-header .header-view:hover > button.random .dice { |
814 -webkit-animation: dice-color-change 3s infinite; |
1509 -webkit-animation: dice-color-change 3s infinite; |
815 animation: dice-color-change 3s infinite; |
1510 animation: dice-color-change 3s infinite; |
816 } |
1511 } |
817 |
1512 |
818 @-webkit-keyframes dice-color-change { |
1513 .button-see-me { |
819 0% { color: #d4b146; } |
1514 -webkit-animation: bounce .7s 1; |
820 50% { color: #ef54b0; } |
1515 animation: bounce .7s 1; |
821 75% { color: #7190d3; } |
1516 -webkit-transform-origin: center bottom; |
822 100% { color: #d4b146; } |
1517 transform-origin: center bottom; |
823 } |
1518 } |
824 |
1519 |
825 @keyframes dice-color-change { |
1520 @-webkit-keyframes bounce { |
826 0% { color: #d4b146; } |
1521 from, 20%, 53%, 80%, to { |
827 50% { color: #ef54b0; } |
1522 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); |
828 75% { color: #7190d3; } |
1523 -webkit-transform: translate3d(0,0,0); |
829 100% { color: #d4b146; } |
1524 } |
830 } |
1525 |
831 |
1526 40%, 43% { |
832 .customize-control-media .actions, |
1527 -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); |
833 .customize-control-upload .actions, |
1528 -webkit-transform: translate3d(0, -12px, 0); |
834 .customize-control-image .actions, |
1529 } |
835 .customize-control-background .actions, |
1530 |
836 .customize-control-header .actions { |
1531 70% { |
837 margin-bottom: 32px; |
1532 -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); |
|
1533 -webkit-transform: translate3d(0, -6px, 0); |
|
1534 } |
|
1535 |
|
1536 90% { |
|
1537 -webkit-transform: translate3d(0,-1px,0); |
|
1538 } |
|
1539 } |
|
1540 |
|
1541 @keyframes bounce { |
|
1542 from, 20%, 53%, 80%, to { |
|
1543 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); |
|
1544 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); |
|
1545 -webkit-transform: translate3d(0,0,0); |
|
1546 transform: translate3d(0,0,0); |
|
1547 } |
|
1548 |
|
1549 40%, 43% { |
|
1550 -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); |
|
1551 animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); |
|
1552 -webkit-transform: translate3d(0, -12px, 0); |
|
1553 transform: translate3d(0, -12px, 0); |
|
1554 } |
|
1555 |
|
1556 70% { |
|
1557 -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); |
|
1558 animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); |
|
1559 -webkit-transform: translate3d(0, -6px, 0); |
|
1560 transform: translate3d(0, -6px, 0); |
|
1561 } |
|
1562 |
|
1563 90% { |
|
1564 -webkit-transform: translate3d(0,-1px,0); |
|
1565 transform: translate3d(0,-1px,0); |
|
1566 } |
838 } |
1567 } |
839 |
1568 |
840 .customize-control-header .choice { |
1569 .customize-control-header .choice { |
841 position: relative; |
1570 position: relative; |
842 display: block; |
1571 display: block; |
843 margin-bottom: 9px; |
1572 margin-bottom: 9px; |
844 } |
1573 } |
845 |
1574 |
|
1575 .customize-control-header .choice:focus { |
|
1576 outline: none; |
|
1577 box-shadow: |
|
1578 0 0 0 1px #5b9dd9, |
|
1579 0 0 3px 1px rgba(30, 140, 190, .8); |
|
1580 } |
|
1581 |
846 .customize-control-header .uploaded div:last-child > .choice { |
1582 .customize-control-header .uploaded div:last-child > .choice { |
847 margin-bottom: 0; |
1583 margin-bottom: 0; |
848 } |
1584 } |
849 |
1585 |
850 .customize-control-media img, |
1586 .customize-control .attachment-media-view .thumbnail-image img, |
851 .customize-control-upload img, |
|
852 .customize-control-image img, |
|
853 .customize-control-background img, |
|
854 .customize-control-header img { |
1587 .customize-control-header img { |
|
1588 max-width: 100%; |
|
1589 } |
|
1590 |
|
1591 .customize-control .attachment-media-view .remove-button, |
|
1592 .customize-control .attachment-media-view .default-button, |
|
1593 .customize-control-header .remove { |
|
1594 margin-right: 8px; |
|
1595 } |
|
1596 |
|
1597 /* Background position control */ |
|
1598 .customize-control-background_position .background-position-control .button-group { |
|
1599 display: block; |
|
1600 } |
|
1601 |
|
1602 /** |
|
1603 * Code Editor Control and Custom CSS Section |
|
1604 * |
|
1605 * Modifications to the Section Container to make the textarea full-width and |
|
1606 * full-height, if the control is the only control in the section. |
|
1607 */ |
|
1608 |
|
1609 .customize-control-code_editor textarea { |
855 width: 100%; |
1610 width: 100%; |
856 -webkit-border-radius: 2px; |
1611 font-family: Consolas, Monaco, monospace; |
857 border-radius: 2px; |
1612 font-size: 12px; |
858 } |
1613 padding: 6px 8px; |
859 |
1614 -moz-tab-size: 2; |
860 .customize-control-media .remove-button, |
1615 -o-tab-size: 2; |
861 .customize-control-media .default-button, |
1616 tab-size: 2; |
862 .customize-control-upload .remove-button, |
1617 } |
863 .customize-control-upload .default-button, |
1618 .customize-control-code_editor textarea, |
864 .customize-control-image .remove-button, |
1619 .customize-control-code_editor .CodeMirror { |
865 .customize-control-image .default-button, |
1620 height: 14em; |
866 .customize-control-background .remove-button, |
1621 } |
867 .customize-control-background .default-button, |
1622 |
868 .customize-control-header .remove { |
1623 #customize-controls .customize-section-description-container.section-meta.customize-info { |
869 float: left; |
1624 border-bottom: none; |
870 margin-right: 3px; |
1625 } |
871 } |
1626 |
872 |
1627 #sub-accordion-section-custom_css .customize-control-notifications-container { |
873 .customize-control-media .upload-button, |
1628 margin-bottom: 15px; |
874 .customize-control-upload .upload-button, |
1629 } |
875 .customize-control-image .upload-button, |
1630 |
876 .customize-control-background .upload-button, |
1631 #customize-control-custom_css textarea { |
877 .customize-control-header .new { |
1632 display: block; |
878 float: right; |
1633 height: 500px; |
|
1634 } |
|
1635 |
|
1636 .customize-section-description-container + #customize-control-custom_css .customize-control-title { |
|
1637 margin-left: 12px; |
|
1638 } |
|
1639 |
|
1640 .customize-section-description-container + #customize-control-custom_css:last-child textarea { |
|
1641 border-right: 0; |
|
1642 border-left: 0; |
|
1643 height: calc( 100vh - 185px ); |
|
1644 resize: none; |
|
1645 } |
|
1646 |
|
1647 .customize-section-description-container + #customize-control-custom_css:last-child { |
|
1648 margin-left: -12px; |
|
1649 width: 299px; |
|
1650 width: calc( 100% + 24px ); |
|
1651 margin-bottom: -12px; |
|
1652 } |
|
1653 |
|
1654 .customize-section-description-container + #customize-control-custom_css:last-child .CodeMirror { |
|
1655 height: calc( 100vh - 185px ); |
|
1656 } |
|
1657 |
|
1658 .CodeMirror-lint-tooltip, |
|
1659 .CodeMirror-hints { |
|
1660 z-index: 500000 !important; |
|
1661 } |
|
1662 |
|
1663 .customize-section-description-container + #customize-control-custom_css:last-child .customize-control-notifications-container { |
|
1664 margin-left: 12px; |
|
1665 margin-right: 12px; |
|
1666 } |
|
1667 |
|
1668 .theme-browser .theme.active .theme-actions, |
|
1669 .wp-customizer .theme-browser .theme .theme-actions { |
|
1670 padding: 10px 15px; |
|
1671 box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); |
|
1672 } |
|
1673 |
|
1674 @media screen and ( max-width: 640px ) { |
|
1675 .customize-section-description-container + #customize-control-custom_css:last-child { |
|
1676 margin-right: 0; |
|
1677 } |
|
1678 |
|
1679 .customize-section-description-container + #customize-control-custom_css:last-child textarea { |
|
1680 height: calc( 100vh - 140px ); |
|
1681 } |
879 } |
1682 } |
880 |
1683 |
881 /** |
1684 /** |
882 * Themes |
1685 * Themes |
883 */ |
1686 */ |
884 @-webkit-keyframes customize-reload { |
1687 |
885 0% { opacity: 0; } |
1688 #customize-theme-controls .control-panel-themes { |
886 100% { opacity: 1; } |
1689 border-bottom: none; |
887 } |
1690 } |
888 |
1691 |
889 @keyframes customize-reload { |
1692 #customize-theme-controls .control-panel-themes > .accordion-section-title:hover, /* Not a focusable element. */ |
890 0% { opacity: 0; } |
1693 #customize-theme-controls .control-panel-themes > .accordion-section-title { |
891 100% { opacity: 1; } |
|
892 } |
|
893 |
|
894 /* #customize-container is reused from customize-loader.js, hence the naming. */ |
|
895 .wp-customizer .customize-loading #customize-container { |
|
896 display: block; |
|
897 -webkit-animation: customize-reload .75s; /* Can't use `transition` because `display` changes here. */ |
|
898 animation: customize-reload .75s; |
|
899 } |
|
900 |
|
901 .control-section-themes .accordion-section-title { |
|
902 cursor: default; |
1694 cursor: default; |
903 } |
1695 background: #fff; |
904 |
1696 color: #555d66; |
905 #customize-theme-controls .control-section-themes .accordion-section-title:hover, |
1697 border-top: 1px solid #ddd; |
906 #customize-theme-controls .control-section-themes .accordion-section-title:focus { |
1698 border-bottom: 1px solid #ddd; |
907 color: #555555; |
1699 border-left: none; |
908 background-color: #fff; |
1700 border-right: none; |
909 } |
1701 margin: 0 0 15px 0; |
910 |
1702 padding-right: 100px; /* Space for the button */ |
911 .control-section-themes .accordion-section-title { |
1703 } |
912 margin: 15px 0; |
1704 |
913 } |
1705 #customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child:hover, /* Not a focusable element. */ |
914 |
1706 #customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child { |
915 .customize-themes-panel .accordion-section-title { |
1707 border-top: 0; |
|
1708 } |
|
1709 |
|
1710 #customize-theme-controls .control-section-themes > .accordion-section-title:hover, /* Not a focusable element. */ |
|
1711 #customize-theme-controls .control-section-themes > .accordion-section-title { |
|
1712 margin: 0 0 15px; |
|
1713 } |
|
1714 |
|
1715 #customize-controls .customize-themes-panel .accordion-section-title:hover, |
|
1716 #customize-controls .customize-themes-panel .accordion-section-title { |
916 margin: 15px -8px; |
1717 margin: 15px -8px; |
917 } |
1718 } |
918 |
1719 |
919 .control-section-themes .accordion-section-title { |
1720 #customize-controls .control-section-themes .accordion-section-title, |
|
1721 #customize-controls .customize-themes-panel .accordion-section-title { |
920 padding-right: 100px; /* Space for the button */ |
1722 padding-right: 100px; /* Space for the button */ |
921 } |
1723 } |
922 |
1724 |
923 .control-section-themes .accordion-section-title span { |
1725 .control-panel-themes .accordion-section-title span.customize-action, |
924 font-size: small; |
1726 #customize-controls .customize-section-title span.customize-action, |
|
1727 #customize-controls .control-section-themes .accordion-section-title span.customize-action, |
|
1728 #customize-controls .customize-section-title span.customize-action { |
|
1729 font-size: 13px; |
925 display: block; |
1730 display: block; |
926 font-weight: 400; |
1731 font-weight: 400; |
927 } |
1732 } |
928 |
1733 |
929 .control-section-themes .accordion-section-title .change-theme, |
1734 #customize-theme-controls .control-panel-themes .accordion-section-title .change-theme { |
930 .control-section-themes .accordion-section-title .customize-theme { |
|
931 position: absolute; |
1735 position: absolute; |
932 right: 10px; |
1736 right: 10px; |
933 top: 50%; |
1737 top: 50%; |
934 margin-top: -14px; |
1738 margin-top: -14px; |
935 font-weight: normal; |
1739 font-weight: 400; |
936 } |
1740 } |
937 |
1741 |
938 .customize-themes-panel { |
1742 #customize-theme-controls .control-panel-themes > .accordion-section-title:after { |
939 display: none; |
1743 display: none; |
940 padding: 0 8px; |
1744 } |
941 background: #f1f1f1; |
1745 |
|
1746 .control-panel-themes .customize-themes-full-container { |
|
1747 position: fixed; |
|
1748 top: 0; |
|
1749 left: 0; |
|
1750 transition: .18s left ease-in-out; |
|
1751 margin: 0 0 0 300px; |
|
1752 padding: 71px 0 25px; |
|
1753 overflow-y: scroll; |
|
1754 width: calc(100% - 300px); |
|
1755 height: calc(100% - 96px); |
|
1756 background: #eee; |
|
1757 z-index: 20; |
|
1758 } |
|
1759 |
|
1760 @media screen and (min-width: 1670px) { |
|
1761 .control-panel-themes .customize-themes-full-container { |
|
1762 width: 82%; |
|
1763 right: 0; |
|
1764 left: initial; |
|
1765 } |
|
1766 } |
|
1767 |
|
1768 .modal-open .control-panel-themes .customize-themes-full-container { |
|
1769 overflow-y: visible; |
|
1770 } |
|
1771 |
|
1772 /* Animations for opening the themes panel */ |
|
1773 #customize-save-button-wrapper, |
|
1774 #customize-header-actions .spinner, |
|
1775 #customize-header-actions .customize-controls-preview-toggle { |
|
1776 transition: .18s margin ease-in-out; |
|
1777 } |
|
1778 |
|
1779 #customize-footer-actions, |
|
1780 #customize-footer-actions .collapse-sidebar { |
|
1781 bottom: 0; |
|
1782 transition: .18s bottom ease-in-out; |
|
1783 } |
|
1784 |
|
1785 .in-themes-panel:not(.animating) #customize-header-actions .spinner, |
|
1786 .in-themes-panel:not(.animating) #customize-header-actions .customize-controls-preview-toggle, |
|
1787 .in-themes-panel:not(.animating) #customize-preview, |
|
1788 .in-themes-panel:not(.animating) #customize-footer-actions { |
|
1789 visibility: hidden; |
|
1790 } |
|
1791 |
|
1792 .wp-full-overlay.in-themes-panel { |
|
1793 background: #eee; /* Prevents a black flash when fading in the panel */ |
|
1794 } |
|
1795 |
|
1796 .in-themes-panel #customize-save-button-wrapper, |
|
1797 .in-themes-panel #customize-header-actions .spinner, |
|
1798 .in-themes-panel #customize-header-actions .customize-controls-preview-toggle { |
|
1799 margin-top: -46px; /* Height of header actions bar */ |
|
1800 } |
|
1801 |
|
1802 .in-themes-panel #customize-footer-actions, |
|
1803 .in-themes-panel #customize-footer-actions .collapse-sidebar { |
|
1804 bottom: -45px; |
|
1805 } |
|
1806 |
|
1807 /* Don't show the theme count while the panel opens, as it's in the wrong place during the animation */ |
|
1808 .in-themes-panel.animating .control-panel-themes .filter-themes-count { |
|
1809 display: none; |
|
1810 } |
|
1811 |
|
1812 .in-themes-panel.wp-full-overlay .wp-full-overlay-sidebar-content { |
|
1813 bottom: 0; |
|
1814 } |
|
1815 |
|
1816 .themes-filter-bar .feature-filter-toggle { |
|
1817 float: right; |
|
1818 margin: 3px 0 3px 25px; |
|
1819 } |
|
1820 |
|
1821 .themes-filter-bar .feature-filter-toggle:before { |
|
1822 content: "\f111"; |
|
1823 margin: 0 5px 0 0; |
|
1824 font: normal 16px/1 dashicons; |
|
1825 vertical-align: text-bottom; |
|
1826 -webkit-font-smoothing: antialiased; |
|
1827 -moz-osx-font-smoothing: grayscale; |
|
1828 } |
|
1829 |
|
1830 .themes-filter-bar .feature-filter-toggle.open { |
|
1831 background: #eee; |
|
1832 border-color: #999; |
|
1833 box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ); |
|
1834 -webkit-transform: translateY(1px); |
|
1835 transform: translateY(1px); |
|
1836 } |
|
1837 |
|
1838 .themes-filter-bar .feature-filter-toggle .filter-count-filters { |
|
1839 display: none; |
|
1840 } |
|
1841 |
|
1842 .filter-drawer { |
942 box-sizing: border-box; |
1843 box-sizing: border-box; |
943 -webkit-box-sizing: border-box; |
1844 width: 100%; |
944 -moz-box-sizing: border-box; |
1845 position: absolute; |
|
1846 top: 46px; |
|
1847 left: 0; |
|
1848 padding: 25px 0 25px 25px; |
|
1849 border-top: 0; |
|
1850 margin: 0; |
|
1851 background: #eee; |
|
1852 border-bottom: 1px solid #ddd; |
|
1853 } |
|
1854 |
|
1855 .filter-drawer .filter-group { |
|
1856 margin: 0 25px 0 0; |
|
1857 width: calc( (100% - 75px) / 3); |
|
1858 min-width: 200px; |
|
1859 max-width: 320px; |
|
1860 } |
|
1861 |
|
1862 /* Adds a delay before fading in to avoid it "jumping" */ |
|
1863 @-webkit-keyframes themes-fade-in { |
|
1864 0% { |
|
1865 opacity: 0; |
|
1866 } |
|
1867 50% { |
|
1868 opacity: 0; |
|
1869 } |
|
1870 100% { |
|
1871 opacity: 1; |
|
1872 } |
|
1873 } |
|
1874 @keyframes themes-fade-in { |
|
1875 0% { |
|
1876 opacity: 0; |
|
1877 } |
|
1878 50% { |
|
1879 opacity: 0; |
|
1880 } |
|
1881 100% { |
|
1882 opacity: 1; |
|
1883 } |
|
1884 } |
|
1885 |
|
1886 .control-panel-themes .customize-themes-full-container.animate { |
|
1887 -webkit-animation: .6s themes-fade-in 1; |
|
1888 animation: .6s themes-fade-in 1; |
|
1889 } |
|
1890 |
|
1891 .in-themes-panel:not(.animating) .control-panel-themes .filter-themes-count { |
|
1892 -webkit-animation: .6s themes-fade-in 1; |
|
1893 animation: .6s themes-fade-in 1; |
|
1894 } |
|
1895 |
|
1896 .control-panel-themes .filter-themes-count { |
|
1897 position: relative; |
|
1898 float: right; |
|
1899 line-height: 34px; |
|
1900 } |
|
1901 |
|
1902 .control-panel-themes .filter-themes-count .themes-displayed { |
|
1903 font-weight: 600; |
|
1904 color: #555d66; |
|
1905 } |
|
1906 |
|
1907 .customize-themes-notifications { |
|
1908 margin: 0; |
|
1909 } |
|
1910 |
|
1911 .control-panel-themes .customize-themes-notifications .notice { |
|
1912 margin: 0 0 25px 0; |
|
1913 } |
|
1914 |
|
1915 .customize-themes-full-container .customize-themes-section { |
|
1916 display: none !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */ |
|
1917 overflow: hidden; |
|
1918 } |
|
1919 |
|
1920 .customize-themes-full-container .customize-themes-section.current-section { |
|
1921 display: list-item !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */ |
|
1922 } |
|
1923 |
|
1924 .control-section .customize-section-text-before { |
|
1925 padding: 0 0 8px 15px; |
|
1926 margin: 15px 0 0 0; |
|
1927 line-height: 16px; |
|
1928 border-bottom: 1px solid #ddd; |
|
1929 color: #555d66; |
|
1930 } |
|
1931 |
|
1932 .control-panel-themes .customize-themes-section-title { |
|
1933 width: 100%; |
|
1934 background: #fff; |
|
1935 box-shadow: none; |
|
1936 outline: none; |
|
1937 border-top: none; |
|
1938 border-bottom: 1px solid #ddd; |
|
1939 border-left: 4px solid #fff; |
|
1940 border-right: none; |
|
1941 cursor: pointer; |
|
1942 padding: 10px 15px; |
|
1943 position: relative; |
|
1944 text-align: left; |
|
1945 font-size: 14px; |
|
1946 font-weight: 600; |
|
1947 color: #555d66; |
|
1948 text-shadow: none; |
|
1949 } |
|
1950 |
|
1951 .control-panel-themes #accordion-section-installed_themes { |
|
1952 border-top: 1px solid #ddd; |
|
1953 } |
|
1954 |
|
1955 .control-panel-themes .theme-section { |
|
1956 margin: 0; |
|
1957 position: relative; |
|
1958 } |
|
1959 |
|
1960 .control-panel-themes .customize-themes-section-title:focus, |
|
1961 .control-panel-themes .customize-themes-section-title:hover { |
|
1962 border-left-color: #0073aa; |
|
1963 color: #0073aa; |
|
1964 background: #f5f5f5; |
|
1965 } |
|
1966 |
|
1967 .customize-themes-section-title:not(.selected):after { |
|
1968 content: ""; |
|
1969 display: block; |
|
1970 position: absolute; |
|
1971 top: 9px; |
|
1972 right: 15px; |
|
1973 width: 18px; |
|
1974 height: 18px; |
|
1975 border-radius: 100%; |
|
1976 border: 1px solid #ccc; |
|
1977 background: #fff; |
|
1978 } |
|
1979 |
|
1980 .control-panel-themes .theme-section .customize-themes-section-title.selected:after { |
|
1981 content: "\f147"; |
|
1982 font: 16px/1 dashicons; |
945 box-sizing: border-box; |
1983 box-sizing: border-box; |
946 } |
1984 width: 20px; |
947 |
1985 height: 20px; |
948 |
1986 padding: 3px 3px 1px 1px; /* Re-align the icon to the smaller grid */ |
949 .customize-themes-panel > h2 { |
1987 border-radius: 100%; |
950 padding: 15px 8px 0 8px; |
1988 position: absolute; |
951 } |
1989 top: 9px; |
952 |
1990 right: 15px; |
953 .control-section.open .customize-themes-panel { |
1991 background: #0073aa; |
|
1992 color: #fff; |
|
1993 } |
|
1994 |
|
1995 .control-panel-themes .customize-themes-section-title.selected { |
|
1996 color: #0073aa; |
|
1997 } |
|
1998 |
|
1999 #customize-theme-controls .themes.accordion-section-content { |
|
2000 position: relative; |
|
2001 left: 0; |
|
2002 padding: 0; |
|
2003 width: 100%; |
|
2004 } |
|
2005 |
|
2006 .loading .customize-themes-section .spinner { |
954 display: block; |
2007 display: block; |
955 } |
2008 visibility: visible; |
956 |
2009 position: relative; |
957 #customize-theme-controls .customize-themes-panel .accordion-section-content { |
2010 clear: both; |
958 background: transparent; |
2011 width: 20px; |
959 display: block; |
2012 height: 20px; |
960 } |
2013 left: calc(50% - 10px); |
961 |
2014 float: none; |
962 .customize-control.customize-control-theme { |
2015 margin-top: 50px; |
963 margin-bottom: 8px; |
2016 } |
|
2017 |
|
2018 .customize-themes-section .no-themes, |
|
2019 .customize-themes-section .no-themes-local { |
|
2020 display: none; |
|
2021 } |
|
2022 |
|
2023 .themes-section-installed_themes .theme .notice-success:not(.updated-message) { |
|
2024 display: none; /* Hide "installed" notice on installed themes tab. */ |
|
2025 } |
|
2026 |
|
2027 .customize-control-theme .theme { |
|
2028 width: 100%; |
|
2029 margin: 0; |
|
2030 border: 1px solid #ddd; |
|
2031 background: #fff; |
|
2032 } |
|
2033 |
|
2034 .customize-control-theme .theme .theme-name, .customize-control-theme .theme .theme-actions { |
|
2035 background: #fff; |
|
2036 border: none; |
|
2037 } |
|
2038 |
|
2039 .customize-control.customize-control-theme { /* override most properties on .customize-control */ |
|
2040 box-sizing: border-box; |
|
2041 width: 25%; |
|
2042 max-width: 600px; /* Max. screenshot size / 2 */ |
|
2043 margin: 0 25px 25px 0; |
|
2044 padding: 0; |
|
2045 clear: none; |
|
2046 } |
|
2047 |
|
2048 /* 5 columns above 2100px */ |
|
2049 @media screen and (min-width: 2101px) { |
|
2050 .customize-control.customize-control-theme { |
|
2051 width: calc( ( 100% - 125px ) / 5 - 1px ); /* 1px offset accounts for browser rounding, typical all grids */ |
|
2052 } |
|
2053 } |
|
2054 |
|
2055 /* 4 columns up to 2100px */ |
|
2056 @media screen and (min-width: 1601px) and (max-width: 2100px) { |
|
2057 .customize-control.customize-control-theme { |
|
2058 width: calc( ( 100% - 100px ) / 4 - 1px ); |
|
2059 } |
|
2060 } |
|
2061 |
|
2062 /* 3 columns up to 1600px */ |
|
2063 @media screen and (min-width: 1201px) and (max-width: 1600px) { |
|
2064 .customize-control.customize-control-theme { |
|
2065 width: calc( ( 100% - 75px ) / 3 - 1px ); |
|
2066 } |
|
2067 } |
|
2068 |
|
2069 /* 2 columns up to 1200px */ |
|
2070 @media screen and (min-width: 851px) and (max-width: 1200px) { |
|
2071 .customize-control.customize-control-theme { |
|
2072 width: calc( ( 100% - 50px ) / 2 - 1px ); |
|
2073 |
|
2074 } |
|
2075 } |
|
2076 |
|
2077 /* 1 column up to 850 px */ |
|
2078 @media screen and (max-width: 850px) { |
|
2079 .customize-control.customize-control-theme { |
|
2080 width: 100%; |
|
2081 } |
964 } |
2082 } |
965 |
2083 |
966 .wp-customizer .theme-browser .themes { |
2084 .wp-customizer .theme-browser .themes { |
967 padding-bottom: 8px; |
2085 padding: 0 0 25px 25px; |
968 } |
2086 transition: .18s margin-top linear; |
969 |
|
970 .wp-customizer .theme-browser .theme { |
|
971 margin: 0; |
|
972 width: 100%; |
|
973 } |
2087 } |
974 |
2088 |
975 .wp-customizer .theme-browser .theme .theme-actions { |
2089 .wp-customizer .theme-browser .theme .theme-actions { |
976 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; |
|
977 opacity: 1; |
2090 opacity: 1; |
978 } |
2091 } |
979 |
2092 |
980 #customize-controls h3.theme-name { |
2093 #customize-controls h3.theme-name { |
981 font-size: 15px; |
2094 font-size: 15px; |
1073 background: #fff; |
2401 background: #fff; |
1074 margin: 50px auto 2em; |
2402 margin: 50px auto 2em; |
1075 padding: 1em 2em; |
2403 padding: 1em 2em; |
1076 max-width: 700px; |
2404 max-width: 700px; |
1077 min-width: 0; |
2405 min-width: 0; |
1078 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.13); |
|
1079 box-shadow: 0 1px 3px rgba(0,0,0,0.13); |
2406 box-shadow: 0 1px 3px rgba(0,0,0,0.13); |
|
2407 } |
|
2408 |
|
2409 body.cheatin h1 { |
|
2410 border-bottom: 1px solid #ddd; |
|
2411 clear: both; |
|
2412 color: #555d66; |
|
2413 font-size: 24px; |
|
2414 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; |
|
2415 margin: 30px 0 0 0; |
|
2416 padding: 0; |
|
2417 padding-bottom: 7px; |
1080 } |
2418 } |
1081 |
2419 |
1082 body.cheatin p { |
2420 body.cheatin p { |
1083 font-size: 14px; |
2421 font-size: 14px; |
1084 line-height: 1.5; |
2422 line-height: 1.5; |
1085 margin: 25px 0 20px; |
2423 margin: 25px 0 20px; |
1086 } |
2424 } |
1087 |
2425 |
|
2426 /** |
|
2427 * Widgets and Menus common styles |
|
2428 */ |
|
2429 |
|
2430 /* higher specificity than .wp-core-ui .button */ |
|
2431 #customize-theme-controls .add-new-widget, |
|
2432 #customize-theme-controls .add-new-menu-item { |
|
2433 cursor: pointer; |
|
2434 float: right; |
|
2435 margin: 0; |
|
2436 margin-left: 10px; |
|
2437 transition: all 0.2s; |
|
2438 -webkit-user-select: none; |
|
2439 -moz-user-select: none; |
|
2440 -ms-user-select: none; |
|
2441 user-select: none; |
|
2442 outline: none; |
|
2443 } |
|
2444 |
|
2445 .reordering .add-new-widget, |
|
2446 .reordering .add-new-menu-item { |
|
2447 opacity: 0.2; |
|
2448 pointer-events: none; |
|
2449 cursor: not-allowed; /* doesn't work in conjunction with pointer-events */ |
|
2450 } |
|
2451 |
|
2452 .add-new-widget:before, |
|
2453 .add-new-menu-item:before, |
|
2454 #available-menu-items .new-content-item .add-content:before { |
|
2455 content: "\f132"; |
|
2456 display: inline-block; |
|
2457 position: relative; |
|
2458 left: -2px; |
|
2459 top: 0; |
|
2460 font: normal 20px/1 dashicons; |
|
2461 vertical-align: middle; |
|
2462 transition: all 0.2s; |
|
2463 -webkit-font-smoothing: antialiased; |
|
2464 -moz-osx-font-smoothing: grayscale; |
|
2465 } |
|
2466 |
|
2467 /* Reordering */ |
|
2468 .reorder-toggle { |
|
2469 float: right; |
|
2470 padding: 5px 8px; |
|
2471 text-decoration: none; |
|
2472 cursor: pointer; |
|
2473 outline: none; |
|
2474 } |
|
2475 |
|
2476 .reorder, |
|
2477 .reordering .reorder-done { |
|
2478 display: block; |
|
2479 padding: 5px 8px; |
|
2480 } |
|
2481 |
|
2482 .reorder-done, |
|
2483 .reordering .reorder { |
|
2484 display: none; |
|
2485 } |
|
2486 |
|
2487 .widget-reorder-nav span, |
|
2488 .menu-item-reorder-nav button { |
|
2489 position: relative; |
|
2490 overflow: hidden; |
|
2491 float: left; |
|
2492 display: block; |
|
2493 width: 33px; /* was 42px for mobile */ |
|
2494 height: 43px; |
|
2495 color: #82878c; |
|
2496 text-indent: -9999px; |
|
2497 cursor: pointer; |
|
2498 outline: none; |
|
2499 } |
|
2500 |
|
2501 .menu-item-reorder-nav button { |
|
2502 width: 30px; |
|
2503 height: 40px; |
|
2504 background: transparent; |
|
2505 border: none; |
|
2506 box-shadow: none; |
|
2507 } |
|
2508 |
|
2509 .widget-reorder-nav span:before, |
|
2510 .menu-item-reorder-nav button:before { |
|
2511 display: inline-block; |
|
2512 position: absolute; |
|
2513 top: 0; |
|
2514 right: 0; |
|
2515 width: 100%; |
|
2516 height: 100%; |
|
2517 font: normal 20px/43px dashicons; |
|
2518 text-align: center; |
|
2519 text-indent: 0; |
|
2520 -webkit-font-smoothing: antialiased; |
|
2521 -moz-osx-font-smoothing: grayscale; |
|
2522 } |
|
2523 |
|
2524 .widget-reorder-nav span:hover, |
|
2525 .widget-reorder-nav span:focus, |
|
2526 .menu-item-reorder-nav button:hover, |
|
2527 .menu-item-reorder-nav button:focus { |
|
2528 color: #191e23; |
|
2529 background: #eee; |
|
2530 } |
|
2531 |
|
2532 .move-widget-down:before, |
|
2533 .menus-move-down:before { |
|
2534 content: "\f347"; |
|
2535 } |
|
2536 |
|
2537 .move-widget-up:before, |
|
2538 .menus-move-up:before { |
|
2539 content: "\f343"; |
|
2540 } |
|
2541 |
|
2542 #customize-theme-controls .first-widget .move-widget-up, |
|
2543 #customize-theme-controls .last-widget .move-widget-down, |
|
2544 .move-up-disabled .menus-move-up, |
|
2545 .move-down-disabled .menus-move-down, |
|
2546 .move-right-disabled .menus-move-right, |
|
2547 .move-left-disabled .menus-move-left { |
|
2548 color: #d5d5d5; |
|
2549 background-color: #fff; |
|
2550 cursor: default; |
|
2551 pointer-events: none; |
|
2552 } |
|
2553 |
|
2554 /** |
|
2555 * New widget and Add-menu-items modes and panels |
|
2556 */ |
|
2557 |
|
2558 .wp-full-overlay-main { |
|
2559 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. */ |
|
2560 width: 100%; |
|
2561 } |
|
2562 |
|
2563 body.adding-widget .add-new-widget, |
|
2564 body.adding-widget .add-new-widget:hover, |
|
2565 .adding-menu-items .add-new-menu-item, |
|
2566 .adding-menu-items .add-new-menu-item:hover, |
|
2567 .add-menu-toggle.open, |
|
2568 .add-menu-toggle.open:hover { |
|
2569 background: #eee; |
|
2570 border-color: #929793; |
|
2571 color: #32373c; |
|
2572 box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); |
|
2573 } |
|
2574 |
|
2575 body.adding-widget .add-new-widget:before, |
|
2576 .adding-menu-items .add-new-menu-item:before, |
|
2577 #accordion-section-add_menu .add-new-menu-item.open:before { |
|
2578 -webkit-transform: rotate(45deg); |
|
2579 transform: rotate(45deg); |
|
2580 } |
|
2581 |
|
2582 #available-widgets, |
|
2583 #available-menu-items { |
|
2584 position: absolute; |
|
2585 top: 0; |
|
2586 bottom: 0; |
|
2587 left: -301px; |
|
2588 visibility: hidden; |
|
2589 overflow-x: hidden; |
|
2590 overflow-y: auto; |
|
2591 width: 300px; |
|
2592 margin: 0; |
|
2593 z-index: 4; |
|
2594 background: #eee; |
|
2595 transition: left .18s; |
|
2596 border-right: 1px solid #ddd; |
|
2597 } |
|
2598 |
|
2599 #available-widgets .customize-section-title, |
|
2600 #available-menu-items .customize-section-title { |
|
2601 display: none; |
|
2602 } |
|
2603 |
|
2604 #available-widgets-list { |
|
2605 top: 60px; |
|
2606 position: absolute; |
|
2607 overflow: auto; |
|
2608 bottom: 0; |
|
2609 width: 100%; |
|
2610 border-top: 1px solid #ddd; |
|
2611 } |
|
2612 |
|
2613 .no-widgets-found #available-widgets-list { |
|
2614 border-top: none; |
|
2615 } |
|
2616 |
|
2617 #available-widgets-filter { |
|
2618 position: fixed; |
|
2619 top: 0; |
|
2620 z-index: 1; |
|
2621 width: 300px; |
|
2622 background: #eee; |
|
2623 } |
|
2624 |
|
2625 /* search field container */ |
|
2626 #available-widgets-filter, |
|
2627 #available-menu-items-search .accordion-section-title { |
|
2628 padding: 13px 15px; |
|
2629 box-sizing: border-box; |
|
2630 } |
|
2631 |
|
2632 #available-widgets-filter input, |
|
2633 #available-menu-items-search input { |
|
2634 width: 100%; |
|
2635 height: 32px; |
|
2636 margin: 1px 0; |
|
2637 padding: 6px 30px; |
|
2638 } |
|
2639 |
|
2640 #available-widgets-filter input::-ms-clear, |
|
2641 #available-menu-items-search input::-ms-clear { |
|
2642 display: none; /* remove the "x" in IE, which conflicts with the "x" icon on button.clear-results */ |
|
2643 } |
|
2644 |
|
2645 #available-menu-items-search .search-icon, |
|
2646 #available-widgets-filter .search-icon { |
|
2647 display: block; |
|
2648 position: absolute; |
|
2649 top: 15px; /* 13 container padding +1 input margin +1 input border */ |
|
2650 left: 16px; |
|
2651 width: 30px; |
|
2652 height: 30px; |
|
2653 line-height: 28px; |
|
2654 text-align: center; |
|
2655 color: #72777c; |
|
2656 } |
|
2657 |
|
2658 #available-widgets-filter .clear-results, |
|
2659 #available-menu-items-search .clear-results { |
|
2660 position: absolute; |
|
2661 top: 15px; /* 13 container padding +1 input margin +1 input border */ |
|
2662 right: 16px; |
|
2663 width: 30px; |
|
2664 height: 30px; |
|
2665 padding: 0; |
|
2666 border: 0; |
|
2667 cursor: pointer; |
|
2668 background: none; |
|
2669 color: #a00; |
|
2670 text-decoration: none; |
|
2671 outline: 0; |
|
2672 } |
|
2673 |
|
2674 #available-widgets-filter .clear-results, |
|
2675 #available-menu-items-search .clear-results, |
|
2676 #available-menu-items-search.loading .clear-results.is-visible { |
|
2677 display: none; |
|
2678 } |
|
2679 |
|
2680 #available-widgets-filter .clear-results.is-visible, |
|
2681 #available-menu-items-search .clear-results.is-visible { |
|
2682 display: block; |
|
2683 } |
|
2684 |
|
2685 #available-widgets-filter .clear-results:before, |
|
2686 #available-menu-items-search .clear-results:before { |
|
2687 content: "\f335"; |
|
2688 font: normal 20px/1 dashicons; |
|
2689 vertical-align: middle; |
|
2690 -webkit-font-smoothing: antialiased; |
|
2691 -moz-osx-font-smoothing: grayscale; |
|
2692 } |
|
2693 |
|
2694 #available-widgets-filter .clear-results:hover, |
|
2695 #available-widgets-filter .clear-results:focus, |
|
2696 #available-menu-items-search .clear-results:hover, |
|
2697 #available-menu-items-search .clear-results:focus { |
|
2698 color: #dc3232; |
|
2699 } |
|
2700 |
|
2701 #available-widgets-filter .clear-results:focus, |
|
2702 #available-menu-items-search .clear-results:focus { |
|
2703 box-shadow: |
|
2704 0 0 0 1px #5b9dd9, |
|
2705 0 0 2px 1px rgba(30, 140, 190, .8); |
|
2706 } |
|
2707 |
|
2708 #available-menu-items-search .search-icon:after, |
|
2709 #available-widgets-filter .search-icon:after, |
|
2710 .themes-filter-bar .search-icon:after { |
|
2711 content: "\f179"; |
|
2712 font: normal 20px/1 dashicons; |
|
2713 vertical-align: middle; |
|
2714 -webkit-font-smoothing: antialiased; |
|
2715 -moz-osx-font-smoothing: grayscale; |
|
2716 } |
|
2717 |
|
2718 .themes-filter-bar .search-icon { |
|
2719 position: absolute; |
|
2720 top: 7px; |
|
2721 left: 26px; |
|
2722 z-index: 1; |
|
2723 color: #72777c; |
|
2724 height: 30px; |
|
2725 width: 30px; |
|
2726 line-height: 2; |
|
2727 text-align: center; |
|
2728 } |
|
2729 |
|
2730 .no-widgets-found-message { |
|
2731 display: none; |
|
2732 margin: 0; |
|
2733 padding: 0 15px; |
|
2734 line-height: inherit; |
|
2735 } |
|
2736 |
|
2737 .no-widgets-found .no-widgets-found-message { |
|
2738 display: block; |
|
2739 } |
|
2740 |
|
2741 #available-widgets .widget-top, |
|
2742 #available-widgets .widget-top:hover, |
|
2743 #available-menu-items .item-top, |
|
2744 #available-menu-items .item-top:hover { |
|
2745 border: none; |
|
2746 background: transparent; |
|
2747 box-shadow: none; |
|
2748 } |
|
2749 |
|
2750 #available-widgets .widget-tpl, |
|
2751 #available-menu-items .item-tpl { |
|
2752 position: relative; |
|
2753 padding: 15px 15px 15px 60px; |
|
2754 background: #fff; |
|
2755 border-bottom: 1px solid #ddd; |
|
2756 border-left: 4px solid #fff; |
|
2757 transition: .15s color ease-in-out, |
|
2758 .15s background-color ease-in-out, |
|
2759 .15s border-color ease-in-out; |
|
2760 cursor: pointer; |
|
2761 display: none; |
|
2762 } |
|
2763 |
|
2764 #available-widgets .widget, |
|
2765 #available-menu-items .item { |
|
2766 position: static; |
|
2767 } |
|
2768 |
|
2769 |
1088 /* Responsive */ |
2770 /* Responsive */ |
1089 .customize-controls-preview-toggle { |
2771 .customize-controls-preview-toggle { |
1090 display: none; |
2772 display: none; |
1091 } |
2773 } |
1092 |
2774 |
1093 @media only screen and (max-width: 780px) { |
2775 @media only screen and (max-width: 782px) { |
1094 .wp-customizer .theme:not(.active):hover .theme-actions, |
2776 .wp-customizer .theme:not(.active):hover .theme-actions, |
1095 .wp-customizer .theme:not(.active):focus .theme-actions { |
2777 .wp-customizer .theme:not(.active):focus .theme-actions { |
1096 display: block; |
2778 display: block; |
1097 } |
2779 } |
1098 |
2780 |
1099 .wp-customizer .theme-browser .theme.active .theme-name span { |
2781 .wp-customizer .theme-browser .theme.active .theme-name span { |
1100 display: inline; |
2782 display: inline; |
1101 } |
2783 } |
|
2784 |
|
2785 .customize-control-header button.random .dice { |
|
2786 margin-top: 0; |
|
2787 } |
|
2788 |
|
2789 .customize-control-radio .customize-inside-control-row, |
|
2790 .customize-control-checkbox .customize-inside-control-row, |
|
2791 .customize-control-nav_menu_auto_add .customize-inside-control-row { |
|
2792 margin-left: 32px; |
|
2793 } |
|
2794 |
|
2795 .customize-control-radio input, |
|
2796 .customize-control-checkbox input, |
|
2797 .customize-control-nav_menu_auto_add input { |
|
2798 margin-left: -32px; |
|
2799 } |
|
2800 |
|
2801 .customize-control input[type="radio"] + label + br, |
|
2802 .customize-control input[type="checkbox"] + label + br { |
|
2803 line-height: 32px; /* For widgets checkboxes */ |
|
2804 } |
|
2805 |
|
2806 .customize-control .date-time-fields select { |
|
2807 height: 39px; |
|
2808 } |
|
2809 |
|
2810 .date-time-fields .date-input.month { |
|
2811 width: 79px; |
|
2812 } |
|
2813 |
|
2814 .date-time-fields .date-input.day, |
|
2815 .date-time-fields .date-input.hour, |
|
2816 .date-time-fields .date-input.minute { |
|
2817 width: 55px; |
|
2818 } |
|
2819 |
|
2820 .date-time-fields .date-input.year { |
|
2821 width: 80px; |
|
2822 } |
|
2823 |
|
2824 .date-time-fields .date-timezone { |
|
2825 line-height: 3.2; |
|
2826 } |
|
2827 |
|
2828 #customize-control-changeset_preview_link a { |
|
2829 bottom: 16px; |
|
2830 } |
|
2831 |
|
2832 .preview-link-wrapper .customize-copy-preview-link.preview-control-element.button { |
|
2833 bottom: 10px; |
|
2834 } |
|
2835 |
|
2836 .media-widget-control .media-widget-buttons .button.edit-media, |
|
2837 .media-widget-control .media-widget-buttons .button.change-media, |
|
2838 .media-widget-control .media-widget-buttons .button.select-media { |
|
2839 margin-top: 12px; |
|
2840 } |
|
2841 |
|
2842 .wp-core-ui .themes-filter-bar .feature-filter-toggle { |
|
2843 margin: 3px 0 3px 25px; |
|
2844 } |
|
2845 } |
|
2846 |
|
2847 @media screen and ( max-width: 1200px ) { |
|
2848 .outer-section-open .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main, |
|
2849 .adding-menu-items .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main, |
|
2850 .adding-widget .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main { |
|
2851 left: 67%; |
|
2852 } |
1102 } |
2853 } |
1103 |
2854 |
1104 @media screen and ( max-width: 640px ) { |
2855 @media screen and ( max-width: 640px ) { |
1105 #customize-controls { |
2856 |
1106 width: 100%; |
2857 /* when the sidebar is collapsed and switching to responsive view, |
1107 } |
2858 bring it back see ticket #35220 */ |
1108 |
2859 .wp-full-overlay.collapsed #customize-controls { |
1109 .wp-full-overlay.expanded { |
|
1110 margin-left: 0; |
2860 margin-left: 0; |
1111 } |
2861 } |
1112 |
2862 |
1113 .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content { |
2863 .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content { |
1114 bottom: 0; |
2864 bottom: 0; |