PageRenderTime 48ms CodeModel.GetById 10ms app.highlight 33ms RepoModel.GetById 1ms app.codeStats 1ms

/wp-admin/css/customize-widgets.css

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