/wp-admin/css/widgets.css

  1/* General Widgets Styles */
  2
  3.widget {
  4	margin: 0 auto 10px;
  5	position: relative;
  6	box-sizing: border-box;
  7}
  8
  9.widget-top {
 10	font-size: 13px;
 11	font-weight: 600;
 12	background: #f7f7f7;
 13}
 14
 15.widget-top .widget-action {
 16	border: 0;
 17	margin: 0;
 18	padding: 10px;
 19	background: none;
 20	cursor: pointer;
 21	outline: none;
 22}
 23
 24.widget-title h3,
 25.widget-title h4 {
 26	margin: 0;
 27	padding: 15px;
 28	font-size: 1em;
 29	line-height: 1;
 30	overflow: hidden;
 31	white-space: nowrap;
 32	text-overflow: ellipsis;
 33	-webkit-user-select: none;
 34	-moz-user-select: none;
 35	-ms-user-select: none;
 36	user-select: none;
 37}
 38
 39.widgets-holder-wrap .widget-inside {
 40	border-top: none;
 41	padding: 1px 15px 15px 15px;
 42	line-height: 16px;
 43}
 44
 45.widget.widget-dirty .widget-control-close-wrapper {
 46	display: none;
 47}
 48
 49.in-widget-title,
 50#widgets-right a.widget-control-edit,
 51#available-widgets .widget-description {
 52	color: #666;
 53}
 54
 55.deleting .widget-title,
 56.deleting .widget-top .widget-action .toggle-indicator:before {
 57	color: #a0a5aa;
 58}
 59
 60/* Media Widgets */
 61.wp-core-ui .media-widget-control.selected .placeholder,
 62.wp-core-ui .media-widget-control.selected .not-selected,
 63.wp-core-ui .media-widget-control .selected {
 64	display: none;
 65}
 66
 67.media-widget-control.selected .selected {
 68	display: inline-block;
 69}
 70
 71.media-widget-buttons {
 72	text-align: left;
 73	margin-top: 0;
 74}
 75
 76.media-widget-control .media-widget-buttons .button {
 77	width: auto;
 78	height: auto;
 79	margin-top: 12px;
 80	white-space: normal;
 81}
 82
 83.media-widget-buttons .button:first-child {
 84	margin-right: 8px;
 85}
 86
 87.media-widget-control .placeholder {
 88	border: 1px dashed #b4b9be;
 89	box-sizing: border-box;
 90	cursor: pointer;
 91	line-height: 20px;
 92	padding: 9px 0;
 93	position: relative;
 94	text-align: center;
 95	width: 100%;
 96}
 97
 98.media-widget-control .media-widget-preview {
 99	background: transparent;
100	text-align: center;
101}
102.media-widget-control .media-widget-preview .notice {
103	text-align: initial;
104}
105.media-frame .media-widget-embed-notice p code,
106.media-widget-control .notice p code {
107	padding: 0 3px 0 0;
108}
109.media-frame .media-widget-embed-notice {
110	margin-top: 16px;
111}
112.media-widget-control .media-widget-preview img {
113	max-width: 100%;
114	vertical-align: middle;
115}
116.media-widget-control .media-widget-preview .wp-video-shortcode {
117	background: #000;
118}
119
120.media-frame.media-widget .media-toolbar-secondary {
121	min-width: 300px;
122}
123
124.media-frame.media-widget .image-details .embed-media-settings .setting.align,
125.media-frame.media-widget .attachment-display-settings .setting.align,
126.media-frame.media-widget .embed-media-settings .setting.align,
127.media-frame.media-widget .embed-link-settings .setting.link-text,
128.media-frame.media-widget .replace-attachment,
129.media-frame.media-widget .checkbox-setting.autoplay {
130	display: none;
131}
132
133.media-widget-video-preview {
134	width: 100%;
135}
136
137.media-widget-video-link {
138	display: inline-block;
139	min-height: 132px;
140	width: 100%;
141	background: black;
142}
143
144.media-widget-video-link .dashicons {
145	font: normal 60px/1 'dashicons';
146	position: relative;
147	width: 100%;
148	top: -90px;
149	color: white;
150	text-decoration: none;
151}
152
153.media-widget-video-link.no-poster .dashicons {
154	top: 30px;
155}
156
157.media-frame #embed-url-field.invalid,
158.media-widget-image-link > .link:invalid {
159	border: 1px solid #dc3232;
160}
161
162.media-widget-image-link {
163	margin: 1em 0;
164}
165
166.media-widget-gallery-preview {
167	display: -webkit-box;
168	display: flex;
169	-webkit-box-pack: start;
170	justify-content: flex-start;
171	flex-wrap: wrap;
172	margin: -1.79104477%;
173}
174
175.media-widget-preview.media_gallery,
176.media-widget-preview.media_image {
177	cursor: pointer;
178}
179
180.media-widget-preview .placeholder {
181	background: #f1f1f1;
182}
183
184.media-widget-gallery-preview .gallery-item {
185	box-sizing: border-box;
186	width: 50%;
187	margin: 0;
188	background: transparent;
189}
190
191.media-widget-gallery-preview .gallery-item .gallery-icon {
192	margin: 4.5%;
193}
194
195/*
196 * Use targeted nth-last-child selectors to control the size of each image
197 * based on how many gallery items are present in the grid.
198 * See: https://alistapart.com/article/quantity-queries-for-css
199 */
200.media-widget-gallery-preview .gallery-item:nth-last-child(3):first-child,
201.media-widget-gallery-preview .gallery-item:nth-last-child(3):first-child ~ .gallery-item,
202.media-widget-gallery-preview .gallery-item:nth-last-child(n+5),
203.media-widget-gallery-preview .gallery-item:nth-last-child(n+5) ~ .gallery-item,
204.media-widget-gallery-preview .gallery-item:nth-last-child(n+6),
205.media-widget-gallery-preview .gallery-item:nth-last-child(n+6) ~ .gallery-item {
206	max-width: 33.33%;
207}
208
209.media-widget-gallery-preview .gallery-item img {
210	height: auto;
211	vertical-align: bottom;
212}
213
214.media-widget-gallery-preview .gallery-icon {
215	position: relative;
216}
217
218.media-widget-gallery-preview .gallery-icon-placeholder {
219	position: absolute;
220	top: 0;
221	bottom: 0;
222	width: 100%;
223	box-sizing: border-box;
224	display: -webkit-box;
225	display: flex;
226	-webkit-box-align: center;
227	align-items: center;
228	-webkit-box-pack: center;
229	justify-content: center;
230	background-color: rgba( 0, 0, 0, .5 );
231}
232
233.media-widget-gallery-preview .gallery-icon-placeholder-text {
234	font-weight: 600;
235	font-size: 2em;
236	color: white;
237}
238
239
240/* Widget Dragging Helpers */
241.widget.ui-draggable-dragging {
242	min-width: 100%;
243}
244
245.widget.ui-sortable-helper {
246	opacity: 0.8;
247}
248
249.widget-placeholder {
250	border: 1px dashed #b4b9be;
251	margin: 0 auto 10px;
252	height: 45px;
253	width: 100%;
254	box-sizing: border-box;
255}
256
257#widgets-right .widget-placeholder {
258	margin-top: 0;
259}
260
261#widgets-right .closed .widget-placeholder {
262	height: 0;
263	border: 0;
264	margin-top: -10px;
265}
266
267/* Widget Sidebars */
268.sidebar-name {
269	position: relative;
270	box-sizing: border-box;
271}
272
273.js .sidebar-name {
274	cursor: pointer;
275}
276
277.sidebar-name .handlediv {
278	float: right;
279	width: 38px;
280	height: 38px;
281	border: 0;
282	margin: 0;
283	padding: 8px;
284	background: none;
285	cursor: pointer;
286	outline: none;
287}
288
289#widgets-right .sidebar-name .handlediv {
290	margin: 5px 3px 0 0;
291}
292
293.sidebar-name .handlediv:focus {
294	box-shadow: none;
295	outline: none;
296}
297
298#widgets-left .sidebar-name .toggle-indicator {
299	display: none;
300}
301
302#widgets-left .widgets-holder-wrap.closed .sidebar-name .toggle-indicator,
303#widgets-left .sidebar-name:hover .toggle-indicator,
304#widgets-left .sidebar-name .handlediv:focus .toggle-indicator {
305	display: block;
306}
307
308.sidebar-name .toggle-indicator:before {
309	padding: 1px 2px 1px 0;
310	border-radius: 50%;
311}
312
313.sidebar-name .handlediv:focus .toggle-indicator:before {
314	box-shadow:
315		0 0 0 1px #5b9dd9,
316		0 0 2px 1px rgba(30, 140, 190, .8);
317}
318
319.sidebar-name h2,
320.sidebar-name h3 {
321	margin: 0;
322	padding: 8px 10px;
323	overflow: hidden;
324	white-space: nowrap;
325}
326
327.widgets-holder-wrap .description {
328	padding: 0 0 15px;
329	margin: 0;
330	font-style: normal;
331	color: #72777c;
332}
333
334.widget-holder .description,
335.inactive-sidebar .description {
336	color: #555d66;
337}
338
339#widgets-right .widgets-holder-wrap .description {
340	padding-left: 7px;
341	padding-right: 7px;
342}
343
344/* Widgets 2-col Layout */
345div.widget-liquid-left {
346	margin: 0;
347	width: 38%;
348	float: left;
349}
350
351div.widget-liquid-right {
352	float: right;
353	width: 58%;
354}
355
356/* Widgets Left - Available Widgets */
357
358div#widgets-left {
359	padding-top: 12px;
360}
361
362div#widgets-left .closed .sidebar-name,
363div#widgets-left .inactive-sidebar.closed .sidebar-name {
364	margin-bottom: 10px;
365}
366
367div#widgets-left .sidebar-name h2,
368div#widgets-left .sidebar-name h3 {
369	padding: 10px 0;
370	margin: 0 10px 0 0;
371}
372
373#widgets-left .widgets-holder-wrap,
374div#widgets-left .widget-holder {
375	background: transparent;
376	border: none;
377}
378
379#widgets-left .widgets-holder-wrap {
380	border: none;
381	box-shadow: none;
382}
383
384#available-widgets .widget-action {
385	display: none;
386}
387
388#available-widgets .widget {
389	margin: 0;
390}
391
392#available-widgets .widget:nth-child(odd) {
393	clear: both;
394}
395
396#available-widgets .widget .widget-description {
397	display: block;
398	padding: 10px 15px;
399	font-size: 12px;
400	overflow-wrap: break-word;
401	word-wrap: break-word;
402	-ms-word-break: break-all;
403	word-break: break-word;
404	-ms-hyphens: auto;
405	-webkit-hyphens: auto;
406	hyphens: auto;
407}
408
409#available-widgets #widget-list {
410	position: relative;
411}
412
413/* Inactive Sidebars */
414#widgets-left .inactive-sidebar {
415	clear: both;
416	width: 100%;
417	background: transparent;
418	padding: 0;
419	margin: 0 0 20px 0;
420	border: none;
421	box-shadow: none;
422}
423
424#widgets-left .inactive-sidebar.first {
425	margin-top: 40px;
426}
427
428/* Not sure what this is for... */
429div#widgets-left .inactive-sidebar .widget.expanded {
430	left: auto;
431}
432
433.widget-title-action {
434	float: right;
435	position: relative;
436}
437
438div#widgets-left .inactive-sidebar .widgets-sortables {
439	min-height: 42px;
440	padding: 0;
441	background: transparent;
442	margin: 0;
443	position: relative;
444}
445
446/* Widgets Right */
447
448div#widgets-right .sidebars-column-1,
449div#widgets-right .sidebars-column-2 {
450	max-width: 450px;
451}
452
453div#widgets-right .widgets-holder-wrap {
454	margin: 10px 0 0 0;
455}
456
457div#widgets-right .sidebar-description {
458	min-height: 20px;
459	margin-top: -5px;
460}
461
462div#widgets-right .sidebar-name h2,
463div#widgets-right .sidebar-name h3 {
464	padding: 15px 7px;
465}
466
467div#widgets-right .widget-top {
468	padding: 0;
469}
470
471div#widgets-right .widgets-sortables {
472	padding: 0 8px;
473	margin-bottom: 9px;
474	position: relative;
475	min-height: 123px;
476}
477
478div#widgets-right .closed .widgets-sortables {
479	min-height: 0;
480	margin-bottom: 0;
481}
482
483.sidebar-name .spinner,
484.remove-inactive-widgets .spinner {
485	float: none;
486	position: relative;
487	top: -2px;
488	margin: -5px 5px;
489}
490
491/* Dragging a widget over a closed sidebar */
492#widgets-right .widgets-holder-wrap.widget-hover {
493	border-color: #72777c;
494	box-shadow: 0 1px 2px rgba(0,0,0,0.3);
495}
496
497/* Accessibility Mode */
498.widgets_access #widgets-left .widget .widget-top {
499	cursor: auto;
500}
501
502.widgets_access #wpwrap .widgets-holder-wrap.closed .sidebar-description,
503.widgets_access #wpwrap .widgets-holder-wrap.closed .widget,
504.widgets_access #wpwrap .widget-control-edit {
505	display: block;
506}
507
508.widgets_access #widgets-left .widget .widget-top:hover,
509.widgets_access #widgets-right .widget .widget-top:hover {
510	border-color: #ddd;
511}
512
513#available-widgets .widget-control-edit .edit,
514#widgets-left .inactive-sidebar .widget-control-edit .add,
515#widgets-right .widget-control-edit .add {
516	display: none;
517}
518
519.widget-control-edit {
520	display: block;
521	color: #666;
522	background: #EEE;
523	padding: 0 15px;
524	line-height: 43px;
525	border-left: 1px solid #DDD;
526}
527
528#widgets-left .widget-control-edit:hover,
529#widgets-right .widget-control-edit:hover {
530	color: #fff;
531	background: #444;
532	border-left: 0;
533	outline: 1px solid #444;
534}
535
536.widgets-holder-wrap .sidebar-name,
537.widgets-holder-wrap .sidebar-description {
538	-webkit-user-select: none;
539	-moz-user-select: none;
540	-ms-user-select: none;
541	user-select: none;
542}
543
544.editwidget {
545	margin: 0 auto;
546}
547
548.editwidget .widget-inside {
549	display: block;
550	padding: 0 15px;
551}
552
553.editwidget .widget-control-actions {
554	margin-top: 20px;
555}
556
557.js .widgets-holder-wrap.closed .widget,
558.js .widgets-holder-wrap.closed .sidebar-description,
559.js .widgets-holder-wrap.closed .remove-inactive-widgets,
560.js .widgets-holder-wrap.closed .description,
561.js .closed br.clear {
562	display: none;
563}
564
565.js .widgets-holder-wrap.closed .widget.ui-sortable-helper {
566	display: block;
567}
568
569/* Hide Widget Settings by Default */
570.widget-inside,
571.widget-description {
572	display: none;
573}
574
575.widget-inside {
576	background: #fff;
577}
578
579/* Dragging widgets over the available widget area show's a "Deactivate" message */
580#removing-widget {
581	display: none;
582	font-weight: 400;
583	padding-left: 15px;
584	font-size: 12px;
585	line-height: 1;
586	color: black;
587}
588
589.js #removing-widget {
590	color: #00a0d2;
591}
592
593.widget-control-noform,
594#access-off,
595.widgets_access .widget-action,
596.widgets_access .handlediv,
597.widgets_access #access-on,
598.widgets_access .widget-holder .description,
599.no-js .widget-holder .description {
600	display: none;
601}
602
603.widgets_access .widget-holder,
604.widgets_access #widget-list {
605	padding-top: 10px;
606}
607
608.widgets_access #access-off {
609	display: inline;
610}
611
612.widgets_access .sidebar-name,
613.widgets_access .widget .widget-top {
614	cursor: default;
615}
616
617
618/* Widgets Area Chooser */
619.widget-liquid-left #widgets-left.chooser #available-widgets .widget,
620.widget-liquid-left #widgets-left.chooser .inactive-sidebar {
621	transition: opacity 0.1s linear;
622}
623
624.widget-liquid-left #widgets-left.chooser #available-widgets .widget,
625.widget-liquid-left #widgets-left.chooser .inactive-sidebar {
626	/* -webkit-filter: blur(1px); */
627	opacity: 0.2;
628	pointer-events: none;
629}
630
631.widget-liquid-left #widgets-left.chooser #available-widgets .widget-in-question {
632	/* -webkit-filter: none; */
633	opacity: 1;
634	pointer-events: auto;
635}
636
637.widgets-chooser ul,
638#widgets-left .widget-in-question .widget-top,
639#available-widgets .widget-top:hover,
640div#widgets-right .widget-top:hover,
641#widgets-left .widget-top:hover {
642	border-color: #999;
643	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
644}
645
646.widgets-chooser ul.widgets-chooser-sidebars {
647	margin: 0;
648	list-style-type: none;
649	max-height: 300px;
650	overflow: auto;
651}
652
653.widgets-chooser {
654	display: none;
655}
656
657.widgets-chooser ul {
658	border: 1px solid #ccc;
659}
660
661.widgets-chooser li {
662	padding: 10px 15px 10px 35px;
663	border-bottom: 1px solid #ccc;
664	background: #fff;
665	margin: 0;
666	cursor: pointer;
667	outline: none;
668	position: relative;
669	transition: background 0.2s ease-in-out;
670}
671
672 /* @todo looks like these hover/focus states are overridden by .widgets-chooser-selected */
673.widgets-chooser li:hover,
674.widgets-chooser li:focus {
675	background: rgba(255,255,255,0.7);
676}
677
678.widgets-chooser li:focus:before {
679	content: "\f147";
680	display: block;
681	-webkit-font-smoothing: antialiased;
682	font: normal 26px/1 dashicons;
683	color: #555d66;
684	position: absolute;
685	top: 7px;
686	left: 5px;
687}
688
689.widgets-chooser li:last-child {
690	border: none;
691}
692
693.widgets-chooser li.widgets-chooser-selected {
694	background: #00a0d2;
695	color: #fff;
696}
697
698.widgets-chooser li.widgets-chooser-selected:before,
699.widgets-chooser li.widgets-chooser-selected:focus:before {
700	content: "\f147";
701	display: block;
702	-webkit-font-smoothing: antialiased;
703	font: normal 26px/1 dashicons;
704	color: #fff;
705	position: absolute;
706	top: 7px;
707	left: 5px;
708}
709
710.widgets-chooser .widgets-chooser-actions {
711	padding: 10px 0 12px 0;
712	text-align: center;
713}
714
715.widgets-chooser button {
716	margin-right: 5px;
717}
718
719#available-widgets .widget .widget-top {
720	cursor: pointer;
721}
722
723#available-widgets .widget.ui-draggable-dragging .widget-top {
724	cursor: move;
725}
726
727/* =Specific widget styling
728-------------------------------------------------------------- */
729.text-widget-fields {
730	position: relative;
731}
732.text-widget-fields [hidden] {
733	display: none;
734}
735.text-widget-fields .wp-pointer.wp-pointer-top {
736	position: absolute;
737	z-index: 3;
738	top: 100px;
739	right: 10px;
740	left: 10px;
741}
742.text-widget-fields .wp-pointer .wp-pointer-arrow {
743	left: auto;
744	right: 15px;
745}
746.text-widget-fields .wp-pointer .wp-pointer-buttons {
747	line-height: 1.4em;
748}
749
750.custom-html-widget-fields > p > .CodeMirror {
751	border: 1px solid #e5e5e5;
752}
753.custom-html-widget-fields code {
754	padding-top: 1px;
755	padding-bottom: 1px;
756}
757ul.CodeMirror-hints {
758	z-index: 101; /* Due to z-index 100 set on .widget.open */
759}
760.widget-control-actions .custom-html-widget-save-button.button.validation-blocked {
761	cursor: not-allowed;
762}
763
764/* =Media Queries
765-------------------------------------------------------------- */
766
767@media screen and (max-width: 480px) {
768	div.widget-liquid-left {
769		width: 100%;
770		float: none;
771		border-right: none;
772		padding-right: 0;
773	}
774
775	#widgets-left .sidebar-name {
776		margin-right: 0;
777	}
778
779	#widgets-left #available-widgets .widget-top {
780		margin-right: 0;
781	}
782
783	#widgets-left .inactive-sidebar .widgets-sortables {
784		margin-right: 0;
785	}
786
787	div.widget-liquid-right {
788		width: 100%;
789		float: none;
790	}
791
792	div.widget {
793		margin: 0 auto !important;
794		max-width: 480px;
795	}
796}
797
798@media screen and (max-width: 320px) {
799	div.widget {
800		max-width: 320px;
801	}
802}
803
804@media only screen and (min-width: 1250px) {
805	#widgets-left #available-widgets .widget {
806		width: 49%;
807		float: left;
808	}
809
810	.widget.ui-draggable-dragging {
811		min-width: 49%;
812	}
813
814	#widgets-left #available-widgets .widget:nth-child(even) {
815		float: right;
816	}
817
818	#widgets-right .sidebars-column-1,
819	#widgets-right .sidebars-column-2 {
820		float: left;
821		width: 49%;
822	}
823
824	#widgets-right .sidebars-column-1 {
825		margin-right: 2%;
826	}
827
828	#widgets-right.single-sidebar .sidebars-column-1,
829	#widgets-right.single-sidebar .sidebars-column-2 {
830		float: none;
831		width: 100%;
832		margin: 0;
833	}
834}