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 .mce-item-table {
 341         border: 1px solid rgba(0, 0, 0, 0.1);
 342         border-width: 1px 0 0 1px;
 343         border-collapse: separate;
 344         border-spacing: 0;
 345         font-size: 14px;
 346         line-height: 1.2857142857;
 347         margin-bottom: 24px;
 348         width: 100%;
 349 }
 350
 351 .mceItemTable th,
 352 .mceItemTable caption,
 353 .mce-item-table th,
 354 .mce-item-table caption {
 355         border: 1px solid rgba(0, 0, 0, 0.1);
 356         border-width: 0 1px 1px 0;
 357         font-weight: 700;
 358         padding: 8px;
 359         text-align: left;
 360         text-transform: uppercase;
 361         vertical-align: baseline;
 362 }
 363
 364 .mceItemTable td,
 365 .mce-item-table td {
 366         border: 1px solid rgba(0, 0, 0, 0.1);
 367         border-width: 0 1px 1px 0;
 368         font-family: Lato, sans-serif;
 369         font-size: 14px;
 370         padding: 8px;
 371         vertical-align: baseline;
 372 }
 373
 374
 375 /**
 376  * 7.0 Images
 377  * ----------------------------------------------------------------------------
 378  */
 379
 380 img {
 381         height: auto;
 382         max-width: 100%;
 383         vertical-align: middle;
 384 }
 385
 386 .wp-caption {
 387         background: transparent;
 388         border: none;
 389         color: #767676;
 390         margin: 0 0 24px 0;
 391         max-width: 100%;
 392         padding: 0;
 393         text-align: left;
 394 }
 395
 396 .html5-captions .wp-caption {
 397         padding: 0;
 398 }
 399
 400 .wp-caption.alignleft {
 401         margin: 7px 14px 7px 0;
 402 }
 403
 404 .html5-captions .wp-caption.alignleft {
 405         margin-right: 24px;
 406 }
 407
 408 .wp-caption.alignright {
 409         margin: 7px 0 7px 14px;
 410 }
 411
 412 .wp-caption.alignright img,
 413 .wp-caption.alignright .wp-caption-dd {
 414         padding-left: 10px;
 415 }
 416
 417 .html5-captions .wp-caption.alignright {
 418         margin-left: 24px;
 419 }
 420
 421 .html5-captions .wp-caption.alignright img,
 422 .html5-captions .wp-caption.alignright .wp-caption-dd {
 423         padding: 0;
 424 }
 425
 426 .wp-caption.aligncenter {
 427         margin: 7px auto;
 428 }
 429
 430 .wp-caption-dt {
 431         margin: 0;
 432 }
 433
 434 .wp-caption .wp-caption-text,
 435 .wp-caption-dd {
 436         -webkit-box-sizing: border-box;
 437         -moz-box-sizing: border-box;
 438         box-sizing: border-box;
 439         font-size: 12px;
 440         font-style: italic;
 441         line-height: 1.5;
 442         margin: 9px 0;
 443         padding: 0 10px 0 0; /* Avoid the caption to overflow the width of the image because wp-caption has 10px wider width */
 444         text-align: left;
 445 }
 446
 447 .mceTemp + ul,
 448 .mceTemp + ol {
 449         list-style-position: inside;
 450 }
 451
 452 /**
 453  * 8.0 Gallery
 454  * -----------------------------------------------------------------------------
 455  */
 456
 457 .gallery .gallery-item {
 458         float: left;
 459         margin: 0 4px 4px 0;
 460         overflow: hidden;
 461         padding: 0;
 462         position: relative;
 463 }
 464
 465 .gallery-columns-1 .gallery-item {
 466         max-width: 100%;
 467         width: auto;
 468 }
 469
 470 .gallery-columns-2 .gallery-item {
 471         max-width: 48%;
 472         max-width: -webkit-calc(50% - 14px);
 473         max-width:         calc(50% - 14px);
 474         width: auto;
 475 }
 476
 477 .gallery-columns-3 .gallery-item {
 478         max-width: 32%;
 479         max-width: -webkit-calc(33.3% - 11px);
 480         max-width:         calc(33.3% - 11px);
 481         width: auto;
 482 }
 483
 484 .gallery-columns-4 .gallery-item {
 485         max-width: 23%;
 486         max-width: -webkit-calc(25% - 9px);
 487         max-width:         calc(25% - 9px);
 488         width: auto;
 489 }
 490
 491 .gallery-columns-5 .gallery-item {
 492         max-width: 19%;
 493         max-width: -webkit-calc(20% - 8px);
 494         max-width:         calc(20% - 8px);
 495         width: auto;
 496 }
 497
 498 .gallery-columns-6 .gallery-item {
 499         max-width: 15%;
 500         max-width: -webkit-calc(16.7% - 7px);
 501         max-width:         calc(16.7% - 7px);
 502         width: auto;
 503 }
 504
 505 .gallery-columns-7 .gallery-item {
 506         max-width: 13%;
 507         max-width: -webkit-calc(14.28% - 7px);
 508         max-width:         calc(14.28% - 7px);
 509         width: auto;
 510 }
 511
 512 .gallery-columns-8 .gallery-item {
 513         max-width: 11%;
 514         max-width: -webkit-calc(12.5% - 6px);
 515         max-width:         calc(12.5% - 6px);
 516         width: auto;
 517 }
 518
 519 .gallery-columns-9 .gallery-item {
 520         max-width: 9%;
 521         max-width: -webkit-calc(11.1% - 6px);
 522         max-width:         calc(11.1% - 6px);
 523         width: auto;
 524 }
 525
 526 .gallery-columns-1 .gallery-item:nth-of-type(1n),
 527 .gallery-columns-2 .gallery-item:nth-of-type(2n),
 528 .gallery-columns-3 .gallery-item:nth-of-type(3n),
 529 .gallery-columns-4 .gallery-item:nth-of-type(4n),
 530 .gallery-columns-5 .gallery-item:nth-of-type(5n),
 531 .gallery-columns-6 .gallery-item:nth-of-type(6n),
 532 .gallery-columns-7 .gallery-item:nth-of-type(7n),
 533 .gallery-columns-8 .gallery-item:nth-of-type(8n),
 534 .gallery-columns-9 .gallery-item:nth-of-type(9n) {
 535         margin-right: 0;
 536 }
 537
 538 .gallery-columns-1 .gallery-item:nth-of-type(1n),
 539 .gallery-columns-2 .gallery-item:nth-of-type(2n - 1),
 540 .gallery-columns-3 .gallery-item:nth-of-type(3n - 2),
 541 .gallery-columns-4 .gallery-item:nth-of-type(4n - 3),
 542 .gallery-columns-5 .gallery-item:nth-of-type(5n - 4),
 543 .gallery-columns-6 .gallery-item:nth-of-type(6n - 5),
 544 .gallery-columns-7 .gallery-item:nth-of-type(7n - 6),
 545 .gallery-columns-8 .gallery-item:nth-of-type(8n - 7),
 546 .gallery-columns-9 .gallery-item:nth-of-type(9n - 8) {
 547         margin-left: 12px; /* Compensate for the default negative margin on .gallery, which can't be changed. */
 548 }
 549
 550 .gallery .gallery-caption {
 551         background-color: rgba(0, 0, 0, 0.7);
 552         -webkit-box-sizing: border-box;
 553         -moz-box-sizing:    border-box;
 554         box-sizing:         border-box;
 555         color: #fff;
 556         font-size: 12px;
 557         line-height: 1.5;
 558         margin: 0;
 559         max-height: 50%;
 560         opacity: 0;
 561         padding: 6px 8px;
 562         position: absolute;
 563         bottom: 0;
 564         left: 0;
 565         text-align: left;
 566         width: 100%;
 567 }
 568
 569 .gallery .gallery-caption:before {
 570         content: "";
 571         height: 100%;
 572         min-height: 49px;
 573         position: absolute;
 574         top: 0;
 575         left: 0;
 576         width: 100%;
 577 }
 578
 579 .gallery-item:hover .gallery-caption {
 580         opacity: 1;
 581 }
 582
 583 .gallery-columns-7 .gallery-caption,
 584 .gallery-columns-8 .gallery-caption,
 585 .gallery-columns-9 .gallery-caption {
 586         display: none;
 587 }
 588
 589
 590 /**
 591  * 9.0 Audio/Video
 592  * ----------------------------------------------------------------------------
 593  */
 594
 595 .mejs-mediaelement,
 596 .mejs-container .mejs-controls {
 597         background: #000;
 598 }
 599
 600 .mejs-controls .mejs-time-rail .mejs-time-loaded,
 601 .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
 602         background: #fff;
 603 }
 604
 605 .mejs-controls .mejs-time-rail .mejs-time-current {
 606         background: #24890d;
 607 }
 608
 609 .mejs-controls .mejs-time-rail .mejs-time-total,
 610 .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
 611         background: rgba(255, 255, 255, .33);
 612 }
 613
 614 .mejs-controls .mejs-time-rail span,
 615 .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
 616 .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
 617         border-radius: 0;
 618 }
 619
 620 .mejs-overlay-loading {
 621         background: transparent;
 622 }
 623
 624 .mejs-overlay-button {
 625         background-color: #fff;
 626         background-image: none;
 627         border-radius: 2px;
 628         box-shadow: 1px 1px 1px rgba(0,0,0,.8);
 629         color: #000;
 630         height: 36px;
 631         margin-left: -24px;
 632         width: 48px;
 633 }
 634
 635 .mejs-overlay-button:before {
 636         -webkit-font-smoothing: antialiased;
 637         content: '\f452';
 638         display: inline-block;
 639         font: normal 32px/1.125 Genericons;
 640         position: absolute;
 641         top: 1px;
 642         left: 10px;
 643 }
 644
 645 .mejs-controls .mejs-button button:focus {
 646         outline: none;
 647 }
 648
 649 .mejs-controls .mejs-button button {
 650         -webkit-font-smoothing: antialiased;
 651         background: none;
 652         color: #fff;
 653         display: inline-block;
 654         font: normal 16px/1 Genericons;
 655 }
 656
 657 .mejs-playpause-button.mejs-play button:before {
 658         content: '\f452';
 659 }
 660
 661 .mejs-playpause-button.mejs-pause button:before {
 662         content: '\f448';
 663 }
 664
 665 .mejs-volume-button.mejs-mute button:before {
 666         content: '\f109';
 667         font-size: 20px;
 668         position: absolute;
 669         top: -2px;
 670         left: 0;
 671 }
 672
 673 .mejs-volume-button.mejs-unmute button:before {
 674         content: '\f109';
 675         left: 0;
 676         position: absolute;
 677         top: 0;
 678 }
 679
 680 .mejs-fullscreen-button button:before {
 681         content: '\f474';
 682 }
 683
 684 .mejs-fullscreen-button.mejs-unfullscreen button:before {
 685         content: '\f406';
 686 }
 687
 688 .mejs-overlay:hover .mejs-overlay-button {
 689         background-color: #24890d;
 690         color: #fff;
 691 }
 692
 693 .mejs-controls .mejs-button button:hover {
 694         color: #41a62a;
 695 }
 696
 697
 698 /**
 699  * 10.0 RTL
 700  * ----------------------------------------------------------------------------
 701  */
 702
 703 html .mceContentBody.rtl {
 704         direction: rtl;
 705         unicode-bidi: embed;
 706 }
 707
 708 .rtl ol,
 709 .rtl ul {
 710         margin-left: 0;
 711         margin-right: 24px;
 712 }
 713
 714 .rtl .wp-caption,
 715 .rtl tr th {
 716         text-align: right;
 717 }
 718
 719 .rtl td {
 720         text-align: right;
 721 }