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