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 }