← Back to branch summary

~canonical-sysadmins/wordpress/4.7.4

« back to all changes in this revision

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