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 - Post Formats
  18  * 9.0 - RTL
  19  * ----------------------------------------------------------------------------
  20  */
  21
  22
  23 /**
  24  * 1.0 Body
  25  * ----------------------------------------------------------------------------
  26  */
  27
  28 html .mceContentBody {
  29         font-size: 100%;
  30         max-width: 604px;
  31 }
  32
  33 body {
  34         color: #141412;
  35         font-family: "Source Sans Pro", Helvetica, sans-serif;
  36         line-height: 1.5;
  37         text-rendering: optimizeLegibility;
  38         vertical-align: baseline;
  39 }
  40
  41
  42 /**
  43  * 2.0 Headings
  44  * ----------------------------------------------------------------------------
  45  */
  46
  47 h1,
  48 h2,
  49 h3,
  50 h4,
  51 h5,
  52 h6 {
  53         clear: both;
  54         font-family: Bitter, Georgia, serif;
  55         line-height: 1.3;
  56 }
  57
  58 h1 {
  59         font-size: 48px;
  60         margin: 33px 0;
  61 }
  62
  63 h2 {
  64         font-size: 30px;
  65         margin: 25px 0;
  66 }
  67
  68 h3 {
  69         font-size: 22px;
  70         margin: 22px 0;
  71 }
  72
  73 h4 {
  74         font-size: 20px;
  75         margin: 25px 0;
  76 }
  77
  78 h5 {
  79         font-size: 18px;
  80         margin: 30px 0;
  81 }
  82
  83 h6 {
  84         font-size: 16px;
  85         margin: 36px 0;
  86 }
  87
  88 hr {
  89         background: url(../images/dotted-line.png) repeat center top;
  90         background-size: 4px 4px;
  91         border: 0;
  92         height: 1px;
  93         margin: 0 0 24px;
  94 }
  95
  96
  97 /**
  98  * 3.0 Text Elements
  99  * ----------------------------------------------------------------------------
 100  */
 101
 102 p {
 103         margin: 0 0 24px;
 104 }
 105
 106 ol,
 107 ul {
 108         margin: 16px 0;
 109         padding: 0 0 0 40px;
 110 }
 111
 112 ul {
 113         list-style-type: square;
 114 }
 115
 116 ol {
 117         list-style: decimal outside;
 118 }
 119
 120 li > ul,
 121 li > ol {
 122         margin: 0;
 123 }
 124
 125 dl {
 126         margin: 0 20px;
 127 }
 128
 129 dt {
 130         font-weight: bold;
 131 }
 132
 133 dd {
 134         margin: 0 0 20px;
 135 }
 136
 137 strong {
 138         font-weight: bold;
 139 }
 140
 141 code,
 142 kbd,
 143 pre,
 144 samp {
 145         font-family: monospace, serif;
 146         font-size: 14px;
 147 }
 148
 149 pre {
 150         background: #f5f5f5;
 151         color: #666;
 152         font-family: monospace;
 153         font-size: 14px;
 154         margin: 20px 0;
 155         overflow: auto;
 156         padding: 20px;
 157         white-space: pre;
 158         white-space: pre-wrap;
 159         word-wrap: break-word;
 160 }
 161
 162 blockquote,
 163 q {
 164         quotes: none;
 165 }
 166
 167 blockquote:before,
 168 blockquote:after,
 169 q:before,
 170 q:after {
 171         content: "";
 172         content: none;
 173 }
 174
 175 blockquote {
 176         font-size: 24px;
 177         font-style: italic;
 178         font-weight: 300;
 179         margin: 24px 40px;
 180 }
 181
 182 blockquote blockquote {
 183         margin-right: 0;
 184 }
 185
 186 blockquote cite,
 187 blockquote small {
 188         font-size: 14px;
 189         font-weight: normal;
 190         text-transform: uppercase;
 191 }
 192
 193 cite {
 194         border-bottom: 0;
 195 }
 196
 197 abbr[title] {
 198         border-bottom: 1px dotted;
 199 }
 200
 201 address {
 202         font-style: italic;
 203         margin: 0 0 24px;
 204 }
 205
 206 del {
 207         color: #333;
 208 }
 209
 210 ins {
 211         background: #fff9c0;
 212         border: none;
 213         color: #333;
 214         text-decoration: none;
 215 }
 216
 217 sub,
 218 sup {
 219         font-size: 75%;
 220         line-height: 0;
 221         position: relative;
 222         vertical-align: baseline;
 223 }
 224
 225 sup {
 226         top: -0.5em;
 227 }
 228
 229 sub {
 230         bottom: -0.25em;
 231 }
 232
 233
 234 /**
 235  * 4.0 Links
 236  * ----------------------------------------------------------------------------
 237  */
 238
 239 a {
 240         color: #ca3c08;
 241         text-decoration: none;
 242 }
 243
 244 a:visited {
 245         color: #ac0404;
 246 }
 247
 248 a:focus {
 249         outline: thin dotted;
 250 }
 251
 252 a:active,
 253 a:hover {
 254         color: #ea9629;
 255         outline: 0;
 256 }
 257
 258 a:hover {
 259         text-decoration: underline;
 260 }
 261
 262
 263 /**
 264  * 5.0 Alignment
 265  * ----------------------------------------------------------------------------
 266  */
 267
 268 .alignleft {
 269         float: left;
 270         margin: 5px 20px 5px 0;
 271 }
 272
 273 .alignright {
 274         float: right;
 275         margin: 5px 0 5px 20px;
 276 }
 277
 278 .aligncenter {
 279         display: block;
 280         margin: 5px auto;
 281 }
 282
 283 img.alignnone {
 284         margin: 5px 0;
 285 }
 286
 287
 288 /**
 289  * 6.0 Tables
 290  * ----------------------------------------------------------------------------
 291  */
 292
 293 table {
 294         border-bottom: 1px solid #ededed;
 295         border-collapse: collapse;
 296         border-spacing: 0;
 297         font-size: 14px;
 298         line-height: 2;
 299         margin: 0 0 20px;
 300         width: 100%;
 301 }
 302
 303 caption,
 304 th,
 305 td {
 306         font-weight: normal;
 307         text-align: left;
 308 }
 309
 310 caption {
 311         font-size: 16px;
 312         margin: 20px 0;
 313 }
 314
 315 th {
 316         font-weight: bold;
 317         text-transform: uppercase;
 318 }
 319
 320 td {
 321         border-top: 1px solid #ededed;
 322         padding: 6px 10px 6px 0;
 323 }
 324
 325
 326 /**
 327  * 7.0 Images
 328  * ----------------------------------------------------------------------------
 329  */
 330
 331 img {
 332         height: auto;
 333         max-width: 100%;
 334         vertical-align: middle;
 335 }
 336
 337 .wp-caption {
 338         background: transparent;
 339         border: none;
 340         margin: 0;
 341         padding: 0;
 342         text-align: left;
 343 }
 344
 345 .wp-caption.alignleft {
 346         margin: 5px 10px 5px 0;
 347 }
 348
 349 .wp-caption.alignright {
 350         margin: 5px 0 5px 10px;
 351 }
 352
 353 .wp-caption-dt {
 354         margin: 0;
 355 }
 356
 357 .wp-caption .wp-caption-text,
 358 .wp-caption-dd {
 359         color: #220e10;
 360         font-size: 18px;
 361         font-style: italic;
 362         font-weight: 300;
 363         line-height: 1.5;
 364         margin-bottom: 24px;
 365         padding: 0;
 366 }
 367
 368 .mceTemp + ul,
 369 .mceTemp + ol  {
 370         list-style-position: inside;
 371 }
 372
 373
 374 /**
 375  * 8.0 Post Formats
 376  * ----------------------------------------------------------------------------
 377  */
 378
 379 /* Aside */
 380 .post-format-aside {
 381         background-color: #f7f5e7;
 382 }
 383
 384 .post-format-aside blockquote {
 385         font-size: 100%;
 386         font-weight: normal;
 387 }
 388
 389 .post-format-aside cite {
 390         font-size: 100%;
 391         text-transform: none;
 392 }
 393
 394 .post-format-aside cite:before {
 395         content: "\2014";
 396         margin-right: 5px;
 397 }
 398
 399 /* Audio */
 400 .post-format-audio {
 401         background-color: #db572f;
 402 }
 403
 404 .post-format-audio a {
 405         color: #fbfaf3;
 406 }
 407
 408 .post-format-audio:before {
 409         background: url(../images/dotted-line.png) repeat-y 85px 0;
 410         background-size: 4px 4px;
 411         content: "\f109";
 412         display: block;
 413         float: left;
 414         font-family: Genericons;
 415         font-size: 64px;
 416         -webkit-font-smoothing: antialiased;
 417         height: 100%;
 418         line-height: 1;
 419         width: 120px;
 420 }
 421
 422 /* Chat */
 423 .post-format-chat {
 424         background-color: #eadaa6;
 425 }
 426
 427 .post-format-chat a {
 428         color: #722d19;
 429 }
 430
 431 /* Gallery */
 432 .post-format-gallery {
 433         background-color: #fbca3c;
 434 }
 435
 436 .post-format-gallery a {
 437         color: #722d19;
 438 }
 439
 440 /* Image: same as Standard/Defaults */
 441
 442 /* Link */
 443 .post-format-link {
 444         background-color: #f7f5e7;
 445 }
 446
 447 /* Quote */
 448 .post-format-quote {
 449         background-color: #210d10;
 450         color: #f7f5e7;
 451 }
 452
 453 .post-format-quote a {
 454         color: #e63f2a;
 455 }
 456
 457 .post-format-quote blockquote {
 458         font-size: 28px;
 459         font-style: italic;
 460         font-weight: 300;
 461         margin: 0;
 462         padding-left: 75px;
 463         position: relative;
 464 }
 465
 466 .post-format-quote blockquote:before {
 467         content: '\201C';
 468         font-size: 140px;
 469         font-weight: 400;
 470         line-height: .8;
 471         padding-right: 25px;
 472         position: absolute;
 473         left: -15px;
 474         top: -3px;
 475 }
 476
 477 .post-format-quote blockquote small,
 478 .post-format-quote blockquote cite {
 479         display: block;
 480         font-size: 16px;
 481 }
 482
 483 .format-quote .entry-content cite a {
 484         border-bottom: 1px dotted #fff;
 485         color: #fff;
 486 }
 487
 488 .format-quote .entry-content cite a:hover {
 489         text-decoration: none;
 490 }
 491
 492
 493 /* Status */
 494 .post-format-status {
 495         background-color: #722d19;
 496         color: #f7f5e7;
 497         font-style: italic;
 498         font-weight: 300;
 499         padding: 0;
 500         padding-left: 35px;
 501 }
 502
 503 .post-format-status.mceContentBody {
 504         font-size: 24px;
 505 }
 506
 507 .post-format-status:before {
 508         background: url(../images/dotted-line.png) repeat-y left bottom;
 509         background-size: 4px 4px;
 510         content: "";
 511         display: block;
 512         float: left;
 513         height: 100%;
 514         position: relative;
 515         left: -30px;
 516         width: 1px;
 517 }
 518
 519 .post-format-status > p:first-child:before {
 520         background-color: rgba(0, 0, 0, 0.65);
 521         content: "";
 522         height: 3px;
 523         width: 13px;
 524         margin-top: 13px;
 525         position: absolute;
 526         left: 9px;
 527 }
 528
 529 .post-format-status a {
 530         color: #eadaa6;
 531 }
 532
 533 /* Video */
 534 .post-format-video {
 535         background-color: #db572f;
 536 }
 537
 538 .post-format-video a {
 539         color: #fbfaf3;
 540 }
 541
 542
 543 /**
 544  * 9.0 RTL
 545  * ----------------------------------------------------------------------------
 546  */
 547
 548 html .mceContentBody.rtl {
 549         direction: rtl;
 550         unicode-bidi: embed;
 551 }
 552
 553 .rtl ol,
 554 .rtl ul {
 555         padding: 0 40px 0 0;
 556 }
 557
 558 .rtl .wp-caption,
 559 .rtl tr th {
 560         text-align: right;
 561 }
 562
 563 .rtl td {
 564         padding: 6px 0 6px 10px;
 565         text-align: right;
 566 }
 567
 568 .rtl blockquote blockquote {
 569         margin-left: 0;
 570         margin-right: 24px;
 571 }
 572
 573 .rtl.post-format-audio:before,
 574 .rtl.post-format-status:before,
 575 .rtl.post-format-status > p:first-child:before {
 576         background: none;
 577         content: none;
 578 }