← Back to branch summary

~canonical-sysadmins/wordpress/4.7.2

« back to all changes in this revision

Viewing changes to wp-admin/css/customize-widgets.css

  • Committer: Jacek Nykis
  • Date: 2015-01-05 16:17:05 UTC
  • Revision ID: jacek.nykis@canonical.com-20150105161705-w544l1h5mcg7u4w9
Initial commit

Show diffs side-by-side

added added

removed removed

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