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