← Back to branch summary

~canonical-sysadmins/wordpress/4.7.2

« back to all changes in this revision

Viewing changes to wp-content/themes/twentyfourteen/css/editor-style.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-content/themes/twentyfourteen/css/editor-style.css
 
1
/*
 
2
Theme Name: Twenty Fourteen
 
3
Description: Used to style the TinyMCE editor.
 
4
*/
 
5
 
 
6
 
 
7
/**
 
8
 * Table of Contents:
 
9
 *
 
10
 * 1.0 - Body
 
11
 * 2.0 - Headings
 
12
 * 3.0 - Text Elements
 
13
 * 4.0 - Links
 
14
 * 5.0 - Alignment
 
15
 * 6.0 - Tables
 
16
 * 7.0 - Images
 
17
 * 8.0 - Galleries
 
18
 * 9.0 - Audio/Video
 
19
 * 10.0 - RTL
 
20
 * ----------------------------------------------------------------------------
 
21
 */
 
22
 
 
23
 
 
24
/**
 
25
 * 1.0 Body
 
26
 * ----------------------------------------------------------------------------
 
27
 */
 
28
 
 
29
html .mceContentBody {
 
30
        font-size: 100%;
 
31
        max-width: 474px;
 
32
}
 
33
 
 
34
body {
 
35
        color: #2b2b2b;
 
36
        font-family: Lato, sans-serif;
 
37
        font-weight: 400;
 
38
        line-height: 1.5;
 
39
        vertical-align: baseline;
 
40
}
 
41
 
 
42
 
 
43
/**
 
44
 * 2.0 Headings
 
45
 * ----------------------------------------------------------------------------
 
46
 */
 
47
 
 
48
h1,
 
49
h2,
 
50
h3,
 
51
h4,
 
52
h5,
 
53
h6 {
 
54
        clear: both;
 
55
        font-weight: 700;
 
56
        margin: 36px 0 12px;
 
57
}
 
58
 
 
59
h1 {
 
60
        font-size: 26px;
 
61
        line-height: 1.3846153846;
 
62
}
 
63
 
 
64
h2 {
 
65
        font-size: 24px;
 
66
        line-height: 1;
 
67
}
 
68
 
 
69
h3 {
 
70
        font-size: 22px;
 
71
        line-height: 1.0909090909;
 
72
}
 
73
 
 
74
h4 {
 
75
        font-size: 20px;
 
76
        line-height: 1.2;
 
77
}
 
78
 
 
79
h5 {
 
80
        font-size: 18px;
 
81
        line-height: 1.3333333333;
 
82
}
 
83
 
 
84
h6 {
 
85
        font-size: 16px;
 
86
        line-height: 1.5;
 
87
}
 
88
 
 
89
h1:first-child,
 
90
h2:first-child,
 
91
h3:first-child,
 
92
h4:first-child,
 
93
h5:first-child,
 
94
h6:first-child {
 
95
        margin-top: 0;
 
96
}
 
97
 
 
98
 
 
99
/**
 
100
 * 3.0 Text Elements
 
101
 * ----------------------------------------------------------------------------
 
102
 */
 
103
 
 
104
address {
 
105
        font-style: italic;
 
106
        margin-bottom: 24px;
 
107
}
 
108
 
 
109
abbr[title] {
 
110
        border-bottom: 1px dotted #2b2b2b;
 
111
        cursor: help;
 
112
}
 
113
 
 
114
b,
 
115
strong {
 
116
        font-weight: 700;
 
117
}
 
118
 
 
119
cite {
 
120
        border: 0;
 
121
}
 
122
 
 
123
cite,
 
124
dfn,
 
125
em,
 
126
i {
 
127
        font-style: italic;
 
128
}
 
129
 
 
130
mark,
 
131
ins {
 
132
        background: #fff9c0;
 
133
        border: 0;
 
134
        color: inherit;
 
135
        text-decoration: none;
 
136
}
 
137
 
 
138
p {
 
139
        margin: 0 0 24px;
 
140
}
 
141
 
 
142
code,
 
143
kbd,
 
144
tt,
 
145
var,
 
146
samp,
 
147
pre {
 
148
        font-family: monospace, serif;
 
149
        font-size: 15px;
 
150
        line-height: 1.6;
 
151
}
 
152
 
 
153
pre {
 
154
        border: 1px solid rgba(0, 0, 0, 0.1);
 
155
        margin-bottom: 24px;
 
156
        max-width: 100%;
 
157
        overflow: auto;
 
158
        padding: 12px;
 
159
        white-space: pre;
 
160
        white-space: pre-wrap;
 
161
        word-wrap: break-word;
 
162
}
 
163
 
 
164
blockquote,
 
165
q {
 
166
        quotes: none;
 
167
}
 
168
 
 
169
blockquote:before,
 
170
blockquote:after,
 
171
q:before,
 
172
q:after {
 
173
        content: "";
 
174
        content: none;
 
175
}
 
176
 
 
177
blockquote {
 
178
        color: #767676;
 
179
        font-size: 19px;
 
180
        font-style: italic;
 
181
        font-weight: 300;
 
182
        line-height: 1.2631578947;
 
183
        margin: 0 0 24px;
 
184
}
 
185
 
 
186
blockquote cite,
 
187
blockquote small {
 
188
        color: #2b2b2b;
 
189
        font-size: 16px;
 
190
        font-weight: 400;
 
191
        line-height: 1.5;
 
192
}
 
193
 
 
194
blockquote em,
 
195
blockquote i,
 
196
blockquote cite {
 
197
        font-style: normal;
 
198
}
 
199
 
 
200
blockquote strong,
 
201
blockquote b {
 
202
        font-weight: 400;
 
203
}
 
204
 
 
205
small {
 
206
        font-size: smaller;
 
207
}
 
208
 
 
209
big {
 
210
        font-size: 125%;
 
211
}
 
212
 
 
213
sup,
 
214
sub {
 
215
        font-size: 75%;
 
216
        height: 0;
 
217
        line-height: 0;
 
218
        position: relative;
 
219
        vertical-align: baseline;
 
220
}
 
221
 
 
222
sup {
 
223
        bottom: 1ex;
 
224
}
 
225
 
 
226
sub {
 
227
        top: .5ex;
 
228
}
 
229
 
 
230
dl {
 
231
        margin: 0 0 24px;
 
232
}
 
233
 
 
234
dt {
 
235
        font-weight: bold;
 
236
}
 
237
 
 
238
dd {
 
239
        margin: 0 0 24px;
 
240
}
 
241
 
 
242
ul,
 
243
ol {
 
244
        list-style: none;
 
245
        margin: 0 0 24px 20px;
 
246
        padding-left: 0;
 
247
}
 
248
 
 
249
ul {
 
250
        list-style: disc;
 
251
}
 
252
 
 
253
ol {
 
254
        list-style: decimal;
 
255
}
 
256
 
 
257
li > ul,
 
258
li > ol {
 
259
        margin: 0 0 0 20px;
 
260
}
 
261
 
 
262
del {
 
263
        color: #767676;
 
264
}
 
265
 
 
266
hr {
 
267
        background-color: rgba(0, 0, 0, 0.1);
 
268
        border: 0;
 
269
        height: 1px;
 
270
        margin-bottom: 23px;
 
271
}
 
272
 
 
273
 
 
274
/**
 
275
 * 4.0 Links
 
276
 * ----------------------------------------------------------------------------
 
277
 */
 
278
 
 
279
a {
 
280
        color: #24890d;
 
281
        text-decoration: none;
 
282
}
 
283
 
 
284
a:visited {
 
285
        color: #24890d;
 
286
}
 
287
 
 
288
a:focus {
 
289
        outline: thin dotted;
 
290
}
 
291
 
 
292
a:active,
 
293
a:hover {
 
294
        color: #41a62a;
 
295
        outline: 0;
 
296
}
 
297
 
 
298
 
 
299
/**
 
300
 * 5.0 Alignment
 
301
 * ----------------------------------------------------------------------------
 
302
 */
 
303
 
 
304
.alignleft {
 
305
        float: left;
 
306
        margin: 7px 24px 7px 0;
 
307
}
 
308
 
 
309
.alignright {
 
310
        float: right;
 
311
        margin: 7px 0 7px 24px;
 
312
}
 
313
 
 
314
.aligncenter {
 
315
        clear: both;
 
316
        display: block;
 
317
        margin: 7px auto;
 
318
}
 
319
 
 
320
blockquote.alignleft,
 
321
blockquote.alignright {
 
322
        border-top: 1px solid rgba(0, 0, 0, 0.1);
 
323
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 
324
        padding-top: 17px;
 
325
        width: 50%;
 
326
}
 
327
 
 
328
blockquote.alignleft p,
 
329
blockquote.alignright p {
 
330
        margin-bottom: 17px;
 
331
}
 
332
 
 
333
 
 
334
/**
 
335
 * 6.0 Tables
 
336
 * ----------------------------------------------------------------------------
 
337
 */
 
338
 
 
339
.mceItemTable {
 
340
        border: 1px solid rgba(0, 0, 0, 0.1);
 
341
        border-width: 1px 0 0 1px;
 
342
        border-collapse: separate;
 
343
        border-spacing: 0;
 
344
        font-size: 14px;
 
345
        line-height: 1.2857142857;
 
346
        margin-bottom: 24px;
 
347
        width: 100%;
 
348
}
 
349
 
 
350
.mceItemTable th,
 
351
.mceItemTable caption {
 
352
        border: 1px solid rgba(0, 0, 0, 0.1);
 
353
        border-width: 0 1px 1px 0;
 
354
        font-weight: 700;
 
355
        padding: 8px;
 
356
        text-align: left;
 
357
        text-transform: uppercase;
 
358
        vertical-align: baseline;
 
359
}
 
360
 
 
361
.mceItemTable td {
 
362
        border: 1px solid rgba(0, 0, 0, 0.1);
 
363
        border-width: 0 1px 1px 0;
 
364
        font-family: Lato, sans-serif;
 
365
        font-size: 14px;
 
366
        padding: 8px;
 
367
        vertical-align: baseline;
 
368
}
 
369
 
 
370
 
 
371
/**
 
372
 * 7.0 Images
 
373
 * ----------------------------------------------------------------------------
 
374
 */
 
375
 
 
376
img {
 
377
        height: auto;
 
378
        max-width: 474px;
 
379
        vertical-align: middle;
 
380
}
 
381
 
 
382
.wp-caption {
 
383
        background: transparent;
 
384
        border: none;
 
385
        color: #767676;
 
386
        margin: 0 0 24px 0;
 
387
        max-width: 474px;
 
388
        padding: 0;
 
389
        text-align: left;
 
390
}
 
391
 
 
392
.html5-captions .wp-caption {
 
393
        padding: 0;
 
394
}
 
395
 
 
396
.wp-caption.alignleft {
 
397
        margin: 7px 14px 7px 0;
 
398
}
 
399
 
 
400
.html5-captions .wp-caption.alignleft {
 
401
        margin-right: 24px;
 
402
}
 
403
 
 
404
.wp-caption.alignright {
 
405
        margin: 7px 0 7px 14px;
 
406
}
 
407
 
 
408
.wp-caption.alignright img,
 
409
.wp-caption.alignright .wp-caption-dd {
 
410
        padding-left: 10px;
 
411
}
 
412
 
 
413
.html5-captions .wp-caption.alignright {
 
414
        margin-left: 24px;
 
415
}
 
416
 
 
417
.html5-captions .wp-caption.alignright img,
 
418
.html5-captions .wp-caption.alignright .wp-caption-dd {
 
419
        padding: 0;
 
420
}
 
421
 
 
422
.wp-caption.aligncenter {
 
423
        margin: 7px auto;
 
424
}
 
425
 
 
426
.wp-caption-dt {
 
427
        margin: 0;
 
428
}
 
429
 
 
430
.wp-caption .wp-caption-text,
 
431
.wp-caption-dd {
 
432
        -webkit-box-sizing: border-box;
 
433
        -moz-box-sizing: border-box;
 
434
        box-sizing: border-box;
 
435
        font-size: 12px;
 
436
        font-style: italic;
 
437
        line-height: 1.5;
 
438
        margin: 9px 0;
 
439
        padding: 0 10px 0 0; /* Avoid the caption to overflow the width of the image because wp-caption has 10px wider width */
 
440
        text-align: left;
 
441
}
 
442
 
 
443
.mceTemp + ul,
 
444
.mceTemp + ol {
 
445
        list-style-position: inside;
 
446
}
 
447
 
 
448
/**
 
449
 * 8.0 Gallery
 
450
 * -----------------------------------------------------------------------------
 
451
 */
 
452
 
 
453
.gallery .gallery-item {
 
454
        float: left;
 
455
        margin: 0 4px 4px 0;
 
456
        overflow: hidden;
 
457
        padding: 0;
 
458
        position: relative;
 
459
}
 
460
 
 
461
.gallery-columns-1 .gallery-item {
 
462
        max-width: 100%;
 
463
        width: auto;
 
464
}
 
465
 
 
466
.gallery-columns-2 .gallery-item {
 
467
        max-width: 48%;
 
468
        max-width: -webkit-calc(50% - 14px);
 
469
        max-width:         calc(50% - 14px);
 
470
        width: auto;
 
471
}
 
472
 
 
473
.gallery-columns-3 .gallery-item {
 
474
        max-width: 32%;
 
475
        max-width: -webkit-calc(33.3% - 11px);
 
476
        max-width:         calc(33.3% - 11px);
 
477
        width: auto;
 
478
}
 
479
 
 
480
.gallery-columns-4 .gallery-item {
 
481
        max-width: 23%;
 
482
        max-width: -webkit-calc(25% - 9px);
 
483
        max-width:         calc(25% - 9px);
 
484
        width: auto;
 
485
}
 
486
 
 
487
.gallery-columns-5 .gallery-item {
 
488
        max-width: 19%;
 
489
        max-width: -webkit-calc(20% - 8px);
 
490
        max-width:         calc(20% - 8px);
 
491
        width: auto;
 
492
}
 
493
 
 
494
.gallery-columns-6 .gallery-item {
 
495
        max-width: 15%;
 
496
        max-width: -webkit-calc(16.7% - 7px);
 
497
        max-width:         calc(16.7% - 7px);
 
498
        width: auto;
 
499
}
 
500
 
 
501
.gallery-columns-7 .gallery-item {
 
502
        max-width: 13%;
 
503
        max-width: -webkit-calc(14.28% - 7px);
 
504
        max-width:         calc(14.28% - 7px);
 
505
        width: auto;
 
506
}
 
507
 
 
508
.gallery-columns-8 .gallery-item {
 
509
        max-width: 11%;
 
510
        max-width: -webkit-calc(12.5% - 6px);
 
511
        max-width:         calc(12.5% - 6px);
 
512
        width: auto;
 
513
}
 
514
 
 
515
.gallery-columns-9 .gallery-item {
 
516
        max-width: 9%;
 
517
        max-width: -webkit-calc(11.1% - 6px);
 
518
        max-width:         calc(11.1% - 6px);
 
519
        width: auto;
 
520
}
 
521
 
 
522
.gallery-columns-1 .gallery-item:nth-of-type(1n),
 
523
.gallery-columns-2 .gallery-item:nth-of-type(2n),
 
524
.gallery-columns-3 .gallery-item:nth-of-type(3n),
 
525
.gallery-columns-4 .gallery-item:nth-of-type(4n),
 
526
.gallery-columns-5 .gallery-item:nth-of-type(5n),
 
527
.gallery-columns-6 .gallery-item:nth-of-type(6n),
 
528
.gallery-columns-7 .gallery-item:nth-of-type(7n),
 
529
.gallery-columns-8 .gallery-item:nth-of-type(8n),
 
530
.gallery-columns-9 .gallery-item:nth-of-type(9n) {
 
531
        margin-right: 0;
 
532
}
 
533
 
 
534
.gallery-columns-1 .gallery-item:nth-of-type(1n),
 
535
.gallery-columns-2 .gallery-item:nth-of-type(2n - 1),
 
536
.gallery-columns-3 .gallery-item:nth-of-type(3n - 2),
 
537
.gallery-columns-4 .gallery-item:nth-of-type(4n - 3),
 
538
.gallery-columns-5 .gallery-item:nth-of-type(5n - 4),
 
539
.gallery-columns-6 .gallery-item:nth-of-type(6n - 5),
 
540
.gallery-columns-7 .gallery-item:nth-of-type(7n - 6),
 
541
.gallery-columns-8 .gallery-item:nth-of-type(8n - 7),
 
542
.gallery-columns-9 .gallery-item:nth-of-type(9n - 8) {
 
543
        margin-left: 12px; /* Compensate for the default negative margin on .gallery, which can't be changed. */
 
544
}
 
545
 
 
546
.gallery .gallery-caption {
 
547
        background-color: rgba(0, 0, 0, 0.7);
 
548
        -webkit-box-sizing: border-box;
 
549
        -moz-box-sizing:    border-box;
 
550
        box-sizing:         border-box;
 
551
        color: #fff;
 
552
        font-size: 12px;
 
553
        line-height: 1.5;
 
554
        margin: 0;
 
555
        max-height: 50%;
 
556
        opacity: 0;
 
557
        padding: 6px 8px;
 
558
        position: absolute;
 
559
        bottom: 0;
 
560
        left: 0;
 
561
        text-align: left;
 
562
        width: 100%;
 
563
}
 
564
 
 
565
.gallery .gallery-caption:before {
 
566
        content: "";
 
567
        height: 100%;
 
568
        min-height: 49px;
 
569
        position: absolute;
 
570
        top: 0;
 
571
        left: 0;
 
572
        width: 100%;
 
573
}
 
574
 
 
575
.gallery-item:hover .gallery-caption {
 
576
        opacity: 1;
 
577
}
 
578
 
 
579
.gallery-columns-7 .gallery-caption,
 
580
.gallery-columns-8 .gallery-caption,
 
581
.gallery-columns-9 .gallery-caption {
 
582
        display: none;
 
583
}
 
584
 
 
585
 
 
586
/**
 
587
 * 9.0 Audio/Video
 
588
 * ----------------------------------------------------------------------------
 
589
 */
 
590
 
 
591
.mejs-mediaelement,
 
592
.mejs-container .mejs-controls {
 
593
        background: #000;
 
594
}
 
595
 
 
596
.mejs-controls .mejs-time-rail .mejs-time-loaded,
 
597
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
 
598
        background: #fff;
 
599
}
 
600
 
 
601
.mejs-controls .mejs-time-rail .mejs-time-current {
 
602
        background: #24890d;
 
603
}
 
604
 
 
605
.mejs-controls .mejs-time-rail .mejs-time-total,
 
606
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
 
607
        background: rgba(255, 255, 255, .33);
 
608
}
 
609
 
 
610
.mejs-controls .mejs-time-rail span,
 
611
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
 
612
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
 
613
        border-radius: 0;
 
614
}
 
615
 
 
616
.mejs-overlay-loading {
 
617
        background: transparent;
 
618
}
 
619
 
 
620
.mejs-overlay-button {
 
621
        background-color: #fff;
 
622
        background-image: none;
 
623
        border-radius: 2px;
 
624
        box-shadow: 1px 1px 1px rgba(0,0,0,.8);
 
625
        color: #000;
 
626
        height: 36px;
 
627
        margin-left: -24px;
 
628
        width: 48px;
 
629
}
 
630
 
 
631
.mejs-overlay-button:before {
 
632
        -webkit-font-smoothing: antialiased;
 
633
        content: '\f452';
 
634
        display: inline-block;
 
635
        font: normal 32px/1.125 Genericons;
 
636
        position: absolute;
 
637
        top: 1px;
 
638
        left: 10px;
 
639
}
 
640
 
 
641
.mejs-controls .mejs-button button:focus {
 
642
        outline: none;
 
643
}
 
644
 
 
645
.mejs-controls .mejs-button button {
 
646
        -webkit-font-smoothing: antialiased;
 
647
        background: none;
 
648
        color: #fff;
 
649
        display: inline-block;
 
650
        font: normal 16px/1 Genericons;
 
651
}
 
652
 
 
653
.mejs-playpause-button.mejs-play button:before {
 
654
        content: '\f452';
 
655
}
 
656
 
 
657
.mejs-playpause-button.mejs-pause button:before {
 
658
        content: '\f448';
 
659
}
 
660
 
 
661
.mejs-volume-button.mejs-mute button:before {
 
662
        content: '\f109';
 
663
        font-size: 20px;
 
664
        position: absolute;
 
665
        top: -2px;
 
666
        left: 0;
 
667
}
 
668
 
 
669
.mejs-volume-button.mejs-unmute button:before {
 
670
        content: '\f109';
 
671
        left: 0;
 
672
        position: absolute;
 
673
        top: 0;
 
674
}
 
675
 
 
676
.mejs-fullscreen-button button:before {
 
677
        content: '\f474';
 
678
}
 
679
 
 
680
.mejs-fullscreen-button.mejs-unfullscreen button:before {
 
681
        content: '\f406';
 
682
}
 
683
 
 
684
.mejs-overlay:hover .mejs-overlay-button {
 
685
        background-color: #24890d;
 
686
        color: #fff;
 
687
}
 
688
 
 
689
.mejs-controls .mejs-button button:hover {
 
690
        color: #41a62a;
 
691
}
 
692
 
 
693
 
 
694
/**
 
695
 * 10.0 RTL
 
696
 * ----------------------------------------------------------------------------
 
697
 */
 
698
 
 
699
html .mceContentBody.rtl {
 
700
        direction: rtl;
 
701
        unicode-bidi: embed;
 
702
}
 
703
 
 
704
.rtl ol,
 
705
.rtl ul {
 
706
        margin-left: 0;
 
707
        margin-right: 24px;
 
708
}
 
709
 
 
710
.rtl .wp-caption,
 
711
.rtl tr th {
 
712
        text-align: right;
 
713
}
 
714
 
 
715
.rtl td {
 
716
        text-align: right;
 
717
}