← Back to branch summary

~canonical-sysadmins/wordpress/4.7.4

« back to all changes in this revision

Viewing changes to wp-admin/css/widgets-rtl.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/widgets-rtl.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: #aaa;
 
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 #bbb;
 
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
        left: 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-right: 7px;
 
119
        padding-left: 7px;
 
120
}
 
121
 
 
122
/* Widgets 2-col Layout */
 
123
div.widget-liquid-left {
 
124
        margin: 0;
 
125
        width: 38%;
 
126
        float: right;
 
127
}
 
128
 
 
129
div.widget-liquid-right {
 
130
        float: left;
 
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 0 0 10px;
 
148
}
 
149
 
 
150
div#widgets-left .sidebar-name .sidebar-name-arrow:before {
 
151
        left: 0;
 
152
        top: 4px;
 
153
        padding: 4px 4px 4px 6px;
 
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
        right: auto;
 
209
}
 
210
 
 
211
.widget-title-action {
 
212
        float: left;
 
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
        left: 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
        margin: -5px 5px;
 
275
        float: none;
 
276
}
 
277
 
 
278
/* Dragging a widget over a closed sidebar */
 
279
#widgets-right .widgets-holder-wrap.widget-hover {
 
280
        border-color: #777;
 
281
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.3);
 
282
        box-shadow: 0 1px 2px rgba(0,0,0,0.3);
 
283
}
 
284
 
 
285
/* Accessibility Mode */
 
286
.widgets_access #widgets-left .widget .widget-top {
 
287
        cursor: auto;
 
288
}
 
289
 
 
290
.widgets_access #wpwrap .widgets-holder-wrap.closed .sidebar-description,
 
291
.widgets_access #wpwrap .widgets-holder-wrap.closed .widget,
 
292
.widgets_access #wpwrap .widget-control-edit {
 
293
        display: block;
 
294
}
 
295
 
 
296
.widgets_access #widgets-left .widget .widget-top:hover,
 
297
.widgets_access #widgets-right .widget .widget-top:hover {
 
298
        border-color: #ddd;
 
299
}
 
300
 
 
301
#available-widgets .widget-control-edit .edit,
 
302
#widgets-left .inactive-sidebar .widget-control-edit .add,
 
303
#widgets-right .widget-control-edit .add {
 
304
        display: none;
 
305
}
 
306
 
 
307
.widget-control-edit {
 
308
        display: block;
 
309
        color: #666;
 
310
        background: #EEE;
 
311
        padding: 0 15px;
 
312
        line-height: 43px;
 
313
        border-right: 1px solid #DDD;
 
314
}
 
315
 
 
316
#widgets-left .widget-control-edit:hover,
 
317
#widgets-right .widget-control-edit:hover {
 
318
        color: #fff;
 
319
        background: #444;
 
320
        border-right: 0;
 
321
        outline: 1px solid #444;
 
322
}
 
323
 
 
324
.widgets-holder-wrap .sidebar-name,
 
325
.widgets-holder-wrap .sidebar-description {
 
326
        -webkit-user-select: none;
 
327
        -moz-user-select: none;
 
328
        -ms-user-select: none;
 
329
        user-select: none;
 
330
}
 
331
 
 
332
.editwidget {
 
333
        margin: 0 auto;
 
334
}
 
335
 
 
336
.editwidget .widget-inside {
 
337
        display: block;
 
338
        padding: 0 15px;
 
339
}
 
340
 
 
341
.editwidget .widget-control-actions {
 
342
        margin-top: 20px;
 
343
}
 
344
 
 
345
.js .widgets-holder-wrap.closed .widget,
 
346
.js .widgets-holder-wrap.closed .sidebar-description,
 
347
.js .closed br.clear {
 
348
        display: none;
 
349
}
 
350
 
 
351
/* Hide Widget Settings by Default */
 
352
.widget-inside,
 
353
.widget-description {
 
354
        display: none;
 
355
}
 
356
 
 
357
.widget-inside {
 
358
        background: #fff;
 
359
}
 
360
 
 
361
/* Dragging widgets over the available widget area show's a "Deactivate" message */
 
362
#removing-widget {
 
363
        display: none;
 
364
        font-weight: normal;
 
365
        padding-right: 15px;
 
366
        font-size: 12px;
 
367
        line-height: 1;
 
368
        color: black;
 
369
}
 
370
 
 
371
.js #removing-widget {
 
372
        color: #2ea2cc;
 
373
}
 
374
 
 
375
.widget-control-noform,
 
376
#access-off,
 
377
.widgets_access .widget-action,
 
378
.widgets_access .sidebar-name-arrow,
 
379
.widgets_access #access-on,
 
380
.widgets_access .widget-holder .description,
 
381
.no-js .widget-holder .description {
 
382
        display: none;
 
383
}
 
384
 
 
385
.widgets_access .widget-holder,
 
386
.widgets_access #widget-list {
 
387
        padding-top: 10px;
 
388
}
 
389
 
 
390
.widgets_access #access-off {
 
391
        display: inline;
 
392
}
 
393
 
 
394
.widgets_access .sidebar-name,
 
395
.widgets_access .widget .widget-top {
 
396
        cursor: default;
 
397
}
 
398
 
 
399
 
 
400
/* Widgets Area Chooser */
 
401
.widget-liquid-left #widgets-left.chooser #available-widgets .widget,
 
402
.widget-liquid-left #widgets-left.chooser .inactive-sidebar {
 
403
        -webkit-transition: opacity 0.1s linear;
 
404
        transition: opacity 0.1s linear;
 
405
}
 
406
 
 
407
.widget-liquid-left #widgets-left.chooser #available-widgets .widget,
 
408
.widget-liquid-left #widgets-left.chooser .inactive-sidebar {
 
409
        /* -webkit-filter: blur(1px); */
 
410
        opacity: 0.2;
 
411
        pointer-events: none;
 
412
}
 
413
 
 
414
.widget-liquid-left #widgets-left.chooser #available-widgets .widget-in-question {
 
415
        /* -webkit-filter: none; */
 
416
        opacity: 1;
 
417
        pointer-events: auto;
 
418
}
 
419
 
 
420
.widgets-chooser ul,
 
421
#widgets-left .widget-in-question .widget-top,
 
422
#available-widgets .widget-top:hover,
 
423
div#widgets-right .widget-top:hover,
 
424
#widgets-left .widget-top:hover {
 
425
        border-color: #999;
 
426
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
 
427
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
 
428
}
 
429
 
 
430
.widgets-chooser ul.widgets-chooser-sidebars {
 
431
        margin: 0;
 
432
        list-style-type: none;
 
433
        max-height: 300px;
 
434
        overflow: auto;
 
435
}
 
436
 
 
437
.widgets-chooser {
 
438
        display: none;
 
439
}
 
440
 
 
441
.widgets-chooser ul {
 
442
        border: 1px solid #ccc;
 
443
}
 
444
 
 
445
.widgets-chooser li {
 
446
        padding: 10px 35px 10px 15px;
 
447
        border-bottom: 1px solid #ccc;
 
448
        background: #fff;
 
449
        margin: 0;
 
450
        cursor: pointer;
 
451
        outline: none;
 
452
        position: relative;
 
453
        -webkit-transition: background 0.2s ease-in-out;
 
454
        transition: background 0.2s ease-in-out;
 
455
}
 
456
 
 
457
.widgets-chooser li:hover,
 
458
.widgets-chooser li:focus {
 
459
        background: rgba(255,255,255,0.7);
 
460
}
 
461
 
 
462
.widgets-chooser li:focus:before {
 
463
        content: '\f147';
 
464
        display: block;
 
465
        -webkit-font-smoothing: antialiased;
 
466
        font: normal 26px/1 'dashicons';
 
467
        color: #999;
 
468
        position: absolute;
 
469
        top: 7px;
 
470
        right: 5px;
 
471
}
 
472
 
 
473
.widgets-chooser li:last-child {
 
474
        border: none;
 
475
}
 
476
 
 
477
.widgets-chooser li.widgets-chooser-selected {
 
478
        background: #2ea2cc;
 
479
        color: #fff;
 
480
}
 
481
 
 
482
.widgets-chooser li.widgets-chooser-selected:before,
 
483
.widgets-chooser li.widgets-chooser-selected:focus:before {
 
484
        content: '\f147';
 
485
        display: block;
 
486
        -webkit-font-smoothing: antialiased;
 
487
        font: normal 26px/1 'dashicons';
 
488
        color: #fff;
 
489
        position: absolute;
 
490
        top: 7px;
 
491
        right: 5px;
 
492
}
 
493
 
 
494
.widgets-chooser .widgets-chooser-actions {
 
495
        padding: 10px 0 12px 0;
 
496
        text-align: center;
 
497
}
 
498
 
 
499
.widgets-chooser button {
 
500
        margin-left: 5px;
 
501
}
 
502
 
 
503
#available-widgets .widget .widget-top {
 
504
        cursor: pointer;
 
505
}
 
506
 
 
507
/* =Media Queries
 
508
-------------------------------------------------------------- */
 
509
 
 
510
@media screen and (max-width: 480px) {
 
511
        div.widget-liquid-left {
 
512
                width: 100%;
 
513
                float: none;
 
514
                border-left: none;
 
515
                padding-left: 0;
 
516
        }
 
517
 
 
518
        #widgets-left .sidebar-name {
 
519
                margin-left: 0;
 
520
        }
 
521
 
 
522
        #widgets-left #available-widgets .widget-top {
 
523
                margin-left: 0;
 
524
        }
 
525
 
 
526
        #widgets-left .inactive-sidebar .widgets-sortables {
 
527
                margin-left: 0;
 
528
        }
 
529
 
 
530
        div.widget-liquid-right {
 
531
                width: 100%;
 
532
                float: none;
 
533
        }
 
534
 
 
535
        div.widget {
 
536
                margin: 0 auto 10px !important;
 
537
                max-width: 480px;
 
538
        }
 
539
}
 
540
 
 
541
@media screen and (max-width: 320px) {
 
542
        div.widget {
 
543
                max-width: 320px;
 
544
        }
 
545
}
 
546
 
 
547
@media only screen and (min-width: 1250px) {
 
548
        #widgets-left #available-widgets .widget {
 
549
                width: 49%;
 
550
                float: right;
 
551
        }
 
552
 
 
553
        .widget.ui-draggable-dragging {
 
554
                min-width: 49%;
 
555
        }
 
556
 
 
557
        #widgets-left #available-widgets .widget:nth-child(even) {
 
558
                float: left;
 
559
        }
 
560
 
 
561
        #widgets-right .sidebars-column-1,
 
562
        #widgets-right .sidebars-column-2 {
 
563
                float: right;
 
564
                width: 49%;
 
565
        }
 
566
 
 
567
        #widgets-right .sidebars-column-1 {
 
568
                margin-left: 2%;
 
569
        }
 
570
 
 
571
        #widgets-right.single-sidebar .sidebars-column-1,
 
572
        #widgets-right.single-sidebar .sidebars-column-2 {
 
573
                float: none;
 
574
                width: 100%;
 
575
                margin: 0;
 
576
        }
 
577
}