0a8cd92bb5d91b43fd00d0602c513e4026ec3290
[autoinstalls/wordpress.git] / wp-admin / css / widgets.css
1 /* General Widgets Styles */
2
3 .widget {
4         margin: 0 auto 10px;
5         position: relative;
6         -webkit-box-sizing: border-box;
7         -moz-box-sizing: border-box;
8         box-sizing: border-box;
9 }
10
11 .widget-top {
12         font-size: 13px;
13         font-weight: 600;
14         background: #f7f7f7;
15 }
16
17 .widget-top a.widget-action,
18 .widget-top a.widget-action:hover {
19         -webkit-box-shadow: none;
20         box-shadow: none;
21         outline: none;
22         text-decoration: none;
23 }
24
25 .widget-title h4 {
26         margin: 0;
27         padding: 15px;
28         line-height: 1;
29         overflow: hidden;
30         white-space: nowrap;
31         text-overflow: ellipsis;
32         -webkit-user-select: none;
33         -moz-user-select: none;
34         -ms-user-select: none;
35         user-select: none;
36 }
37
38 .widgets-holder-wrap .widget-inside {
39         border-top: none;
40         padding: 1px 15px 15px 15px;
41         line-height: 16px;
42 }
43
44 .in-widget-title,
45 #widgets-right a.widget-control-edit,
46 #available-widgets .widget-description {
47         color: #666;
48 }
49
50 .deleting .widget-title,
51 .deleting .widget-top a.widget-action:after {
52         color: #a0a5aa;
53 }
54
55 /* Widget Dragging Helpers */
56 .widget.ui-draggable-dragging {
57         min-width: 100%;
58 }
59
60 .widget.ui-sortable-helper {
61         opacity: 0.8;
62 }
63
64 .widget-placeholder {
65         border: 1px dashed #b4b9be;
66         margin: 0 auto 10px;
67         height: 45px;
68         width: 100%;
69         -webkit-box-sizing: border-box;
70         -moz-box-sizing: border-box;
71         box-sizing: border-box;
72 }
73
74 #widgets-right .widget-placeholder {
75         margin-top: 0;
76 }
77
78 #widgets-right .closed .widget-placeholder {
79         height: 0;
80         border: 0;
81         margin-top: -10px;
82 }
83
84 /* Widget Sidebars */
85 .sidebar-name {
86         position: relative;
87         -webkit-box-sizing: border-box;
88         -moz-box-sizing: border-box;
89         box-sizing: border-box;
90 }
91
92 .sidebar-name-arrow {
93         position: absolute;
94         top: 0;
95         right: 0;
96         bottom: 0;
97 }
98
99 .js .sidebar-name {
100         cursor: pointer;
101 }
102
103 .sidebar-name h3 {
104         margin: 0;
105         padding: 8px 10px;
106         overflow: hidden;
107         white-space: nowrap;
108 }
109
110 .widgets-holder-wrap .description {
111         padding: 0 0 15px;
112         margin: 0;
113         font-style: normal;
114         color: #777;
115 }
116
117 #widgets-right .widgets-holder-wrap .description {
118         padding-left: 7px;
119         padding-right: 7px;
120 }
121
122 /* Widgets 2-col Layout */
123 div.widget-liquid-left {
124         margin: 0;
125         width: 38%;
126         float: left;
127 }
128
129 div.widget-liquid-right {
130         float: right;
131         width: 58%;
132 }
133
134 /* Widgets Left - Available Widgets */
135
136 div#widgets-left {
137         padding-top: 12px;
138 }
139
140 div#widgets-left .closed .sidebar-name,
141 div#widgets-left .inactive-sidebar.closed .sidebar-name {
142         margin-bottom: 10px;
143 }
144
145 div#widgets-left .sidebar-name h3 {
146         padding: 10px 0;
147         margin: 0 10px 0 0;
148 }
149
150 div#widgets-left .sidebar-name .sidebar-name-arrow:before {
151         right: 0;
152         top: 4px;
153         padding: 4px 6px 4px 4px;
154 }
155
156 #widgets-left #available-widgets,
157 div#widgets-left .widget-holder {
158         background: transparent;
159         border: none;
160 }
161
162 #widgets-left .widgets-holder-wrap {
163         border: none;
164         -webkit-box-shadow: none;
165         box-shadow: none;
166 }
167
168 #available-widgets .widget-action {
169         display: none;
170 }
171
172 #available-widgets .widget {
173         margin: 0;
174 }
175
176 #available-widgets .widget:nth-child(odd) {
177         clear: both;
178 }
179
180 #available-widgets .widget .widget-description {
181         display: block;
182         padding: 10px 15px;
183         font-size: 12px;
184 }
185
186 #available-widgets #widget-list {
187         position: relative;
188 }
189
190 /* Inactive Sidebars */
191 #widgets-left .inactive-sidebar {
192         clear: both;
193         width: 100%;
194         background: transparent;
195         padding: 0;
196         margin: 0 0 20px 0;
197         border: none;
198         -webkit-box-shadow: none;
199         box-shadow: none;
200 }
201
202 #widgets-left .inactive-sidebar.first {
203         margin-top: 40px;
204 }
205
206 /* Not sure what this is for... */
207 div#widgets-left .inactive-sidebar .widget.expanded {
208         left: auto;
209 }
210
211 .widget-title-action {
212         float: right;
213         position: relative;
214 }
215
216 div#widgets-left .inactive-sidebar .widgets-sortables {
217         min-height: 42px;
218         padding: 0;
219         background: transparent;
220         margin: 0;
221         position: relative;
222 }
223
224 /* Widgets Right */
225
226 div#widgets-right:after {
227         content: ".";
228         display: block;
229         height: 0;
230         clear: both;
231         visibility: hidden;
232 }
233
234 div#widgets-right .sidebars-column-1,
235 div#widgets-right .sidebars-column-2 {
236         max-width: 450px;
237 }
238
239 div#widgets-right .widgets-holder-wrap {
240         margin: 10px 0 0 0;
241 }
242
243 div#widgets-right .sidebar-description {
244         min-height: 20px;
245         margin-top: -5px;
246 }
247
248 div#widgets-right .sidebar-name h3 {
249         padding: 15px 7px;
250 }
251
252 div#widgets-right .sidebar-name .sidebar-name-arrow:before {
253         right: 0;
254         top: 4px;
255 }
256
257 div#widgets-right .widget-top {
258         padding: 0;
259 }
260
261 div#widgets-right .widgets-sortables {
262         padding: 0 8px;
263         margin-bottom: 9px;
264         position: relative;
265         min-height: 123px;
266 }
267
268 div#widgets-right .closed .widgets-sortables {
269         min-height: 0;
270         margin-bottom: 0;
271 }
272
273 .sidebar-name .spinner {
274         float: none;
275         position: relative;
276         top: -2px;
277         margin: -5px 5px;
278 }
279
280 /* Dragging a widget over a closed sidebar */
281 #widgets-right .widgets-holder-wrap.widget-hover {
282         border-color: #777;
283         -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.3);
284         box-shadow: 0 1px 2px rgba(0,0,0,0.3);
285 }
286
287 /* Accessibility Mode */
288 .widgets_access #widgets-left .widget .widget-top {
289         cursor: auto;
290 }
291
292 .widgets_access #wpwrap .widgets-holder-wrap.closed .sidebar-description,
293 .widgets_access #wpwrap .widgets-holder-wrap.closed .widget,
294 .widgets_access #wpwrap .widget-control-edit {
295         display: block;
296 }
297
298 .widgets_access #widgets-left .widget .widget-top:hover,
299 .widgets_access #widgets-right .widget .widget-top:hover {
300         border-color: #ddd;
301 }
302
303 #available-widgets .widget-control-edit .edit,
304 #widgets-left .inactive-sidebar .widget-control-edit .add,
305 #widgets-right .widget-control-edit .add {
306         display: none;
307 }
308
309 .widget-control-edit {
310         display: block;
311         color: #666;
312         background: #EEE;
313         padding: 0 15px;
314         line-height: 43px;
315         border-left: 1px solid #DDD;
316 }
317
318 #widgets-left .widget-control-edit:hover,
319 #widgets-right .widget-control-edit:hover {
320         color: #fff;
321         background: #444;
322         border-left: 0;
323         outline: 1px solid #444;
324 }
325
326 .widgets-holder-wrap .sidebar-name,
327 .widgets-holder-wrap .sidebar-description {
328         -webkit-user-select: none;
329         -moz-user-select: none;
330         -ms-user-select: none;
331         user-select: none;
332 }
333
334 .editwidget {
335         margin: 0 auto;
336 }
337
338 .editwidget .widget-inside {
339         display: block;
340         padding: 0 15px;
341 }
342
343 .editwidget .widget-control-actions {
344         margin-top: 20px;
345 }
346
347 .js .widgets-holder-wrap.closed .widget,
348 .js .widgets-holder-wrap.closed .sidebar-description,
349 .js .closed br.clear {
350         display: none;
351 }
352
353 /* Hide Widget Settings by Default */
354 .widget-inside,
355 .widget-description {
356         display: none;
357 }
358
359 .widget-inside {
360         background: #fff;
361 }
362
363 /* Dragging widgets over the available widget area show's a "Deactivate" message */
364 #removing-widget {
365         display: none;
366         font-weight: normal;
367         padding-left: 15px;
368         font-size: 12px;
369         line-height: 1;
370         color: black;
371 }
372
373 .js #removing-widget {
374         color: #00a0d2;
375 }
376
377 .widget-control-noform,
378 #access-off,
379 .widgets_access .widget-action,
380 .widgets_access .sidebar-name-arrow,
381 .widgets_access #access-on,
382 .widgets_access .widget-holder .description,
383 .no-js .widget-holder .description {
384         display: none;
385 }
386
387 .widgets_access .widget-holder,
388 .widgets_access #widget-list {
389         padding-top: 10px;
390 }
391
392 .widgets_access #access-off {
393         display: inline;
394 }
395
396 .widgets_access .sidebar-name,
397 .widgets_access .widget .widget-top {
398         cursor: default;
399 }
400
401
402 /* Widgets Area Chooser */
403 .widget-liquid-left #widgets-left.chooser #available-widgets .widget,
404 .widget-liquid-left #widgets-left.chooser .inactive-sidebar {
405         -webkit-transition: opacity 0.1s linear;
406         transition: opacity 0.1s linear;
407 }
408
409 .widget-liquid-left #widgets-left.chooser #available-widgets .widget,
410 .widget-liquid-left #widgets-left.chooser .inactive-sidebar {
411         /* -webkit-filter: blur(1px); */
412         opacity: 0.2;
413         pointer-events: none;
414 }
415
416 .widget-liquid-left #widgets-left.chooser #available-widgets .widget-in-question {
417         /* -webkit-filter: none; */
418         opacity: 1;
419         pointer-events: auto;
420 }
421
422 .widgets-chooser ul,
423 #widgets-left .widget-in-question .widget-top,
424 #available-widgets .widget-top:hover,
425 div#widgets-right .widget-top:hover,
426 #widgets-left .widget-top:hover {
427         border-color: #999;
428         -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
429         box-shadow: 0 1px 2px rgba(0,0,0,0.1);
430 }
431
432 .widgets-chooser ul.widgets-chooser-sidebars {
433         margin: 0;
434         list-style-type: none;
435         max-height: 300px;
436         overflow: auto;
437 }
438
439 .widgets-chooser {
440         display: none;
441 }
442
443 .widgets-chooser ul {
444         border: 1px solid #ccc;
445 }
446
447 .widgets-chooser li {
448         padding: 10px 15px 10px 35px;
449         border-bottom: 1px solid #ccc;
450         background: #fff;
451         margin: 0;
452         cursor: pointer;
453         outline: none;
454         position: relative;
455         -webkit-transition: background 0.2s ease-in-out;
456         transition: background 0.2s ease-in-out;
457 }
458
459 .widgets-chooser li:hover,
460 .widgets-chooser li:focus {
461         background: rgba(255,255,255,0.7);
462 }
463
464 .widgets-chooser li:focus:before {
465         content: '\f147';
466         display: block;
467         -webkit-font-smoothing: antialiased;
468         font: normal 26px/1 'dashicons';
469         color: #999;
470         position: absolute;
471         top: 7px;
472         left: 5px;
473 }
474
475 .widgets-chooser li:last-child {
476         border: none;
477 }
478
479 .widgets-chooser li.widgets-chooser-selected {
480         background: #00a0d2;
481         color: #fff;
482 }
483
484 .widgets-chooser li.widgets-chooser-selected:before,
485 .widgets-chooser li.widgets-chooser-selected:focus:before {
486         content: '\f147';
487         display: block;
488         -webkit-font-smoothing: antialiased;
489         font: normal 26px/1 'dashicons';
490         color: #fff;
491         position: absolute;
492         top: 7px;
493         left: 5px;
494 }
495
496 .widgets-chooser .widgets-chooser-actions {
497         padding: 10px 0 12px 0;
498         text-align: center;
499 }
500
501 .widgets-chooser button {
502         margin-right: 5px;
503 }
504
505 #available-widgets .widget .widget-top {
506         cursor: pointer;
507 }
508
509 /* =Media Queries
510 -------------------------------------------------------------- */
511
512 @media screen and (max-width: 480px) {
513         div.widget-liquid-left {
514                 width: 100%;
515                 float: none;
516                 border-right: none;
517                 padding-right: 0;
518         }
519
520         #widgets-left .sidebar-name {
521                 margin-right: 0;
522         }
523
524         #widgets-left #available-widgets .widget-top {
525                 margin-right: 0;
526         }
527
528         #widgets-left .inactive-sidebar .widgets-sortables {
529                 margin-right: 0;
530         }
531
532         div.widget-liquid-right {
533                 width: 100%;
534                 float: none;
535         }
536
537         div.widget {
538                 margin: 0 auto 10px !important;
539                 max-width: 480px;
540         }
541 }
542
543 @media screen and (max-width: 320px) {
544         div.widget {
545                 max-width: 320px;
546         }
547 }
548
549 @media only screen and (min-width: 1250px) {
550         #widgets-left #available-widgets .widget {
551                 width: 49%;
552                 float: left;
553         }
554
555         .widget.ui-draggable-dragging {
556                 min-width: 49%;
557         }
558
559         #widgets-left #available-widgets .widget:nth-child(even) {
560                 float: right;
561         }
562
563         #widgets-right .sidebars-column-1,
564         #widgets-right .sidebars-column-2 {
565                 float: left;
566                 width: 49%;
567         }
568
569         #widgets-right .sidebars-column-1 {
570                 margin-right: 2%;
571         }
572
573         #widgets-right.single-sidebar .sidebars-column-1,
574         #widgets-right.single-sidebar .sidebars-column-2 {
575                 float: none;
576                 width: 100%;
577                 margin: 0;
578         }
579 }