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 }