wp-content/themes/twentyseventeen/assets/css/editor-style.css

   1 /*
   2 Theme Name: Twenty Seventeen
   3 Description: Used to style the TinyMCE editor.
   4 */
   5
   6
   7 /**
   8  * Table of Contents:
   9  *
  10  * 1.0 - Body
  11  * 2.0 - Typography
  12  * 3.0 - Elements
  13  * 4.0 - Alignment
  14  * 5.0 - Caption
  15  * 6.0 - Galleries
  16  * 7.0 - Media Elements
  17  * 8.0 - RTL
  18  */
  19
  20 /**
  21  * 1.0 - Body
  22  */
  23
  24 body {
  25         background-color: #fff;
  26         color: #333;
  27         margin: 20px 40px;
  28         max-width: 580px;
  29 }
  30
  31 /**
  32  * 2.0 - Typography
  33  */
  34
  35 body,
  36 button,
  37 input,
  38 select,
  39 textarea {
  40         font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
  41         font-size: 16px;
  42         font-size: 1rem;
  43         font-weight: 400;
  44         line-height: 1.66;
  45 }
  46
  47 h1,
  48 h2,
  49 h3,
  50 h4,
  51 h5,
  52 h6 {
  53         clear: both;
  54         line-height: 1.4;
  55         margin: 0 0 0.75em;
  56         padding: 1.5em 0 0;
  57 }
  58
  59 h1:first-child,
  60 h2:first-child,
  61 h3:first-child,
  62 h4:first-child,
  63 h5:first-child,
  64 h6:first-child {
  65         padding-top: 0;
  66 }
  67
  68 h1 {
  69         font-size: 24px;
  70         font-size: 1.5rem;
  71         font-weight: 300;
  72 }
  73
  74 h2 {
  75         color: #666;
  76         font-size: 20px;
  77         font-size: 1.25rem;
  78         font-weight: 300;
  79 }
  80
  81 h3 {
  82         color: #333;
  83         font-size: 18px;
  84         font-size: 1.125rem;
  85         font-weight: 300;
  86 }
  87
  88 h4 {
  89         color: #333;
  90         font-size: 16px;
  91         font-size: 1rem;
  92         font-weight: 800;
  93 }
  94
  95 h5 {
  96         color: #767676;
  97         font-size: 13px;
  98         font-size: 0.8125rem;
  99         font-weight: 800;
 100         letter-spacing: 0.15em;
 101         text-transform: uppercase;
 102 }
 103
 104 h6 {
 105         color: #333;
 106         font-size: 15px;
 107         font-size: 0.9375rem;
 108         font-weight: 800;
 109 }
 110
 111 p {
 112         margin: 0 0 1.5em;
 113         padding: 0;
 114 }
 115
 116 dfn,
 117 cite,
 118 em,
 119 i {
 120         font-style: italic;
 121 }
 122
 123 blockquote {
 124         color: #666;
 125         font-size: 18px;
 126         font-size: 1.125rem;
 127         font-style: italic;
 128         line-height: 1.7;
 129         margin: 0;
 130         overflow: hidden;
 131         padding: 0;
 132 }
 133
 134 blockquote.alignleft,
 135 blockquote.alignright {
 136         font-size: 14px;
 137         font-size: 0.875rem;
 138         width: 34%;
 139 }
 140
 141 address {
 142         margin: 0 0 1.5em;
 143 }
 144
 145 pre {
 146         background: #eee;
 147         font-family: "Courier 10 Pitch", Courier, monospace;
 148         font-size: 15px;
 149         font-size: 0.9375rem;
 150         line-height: 1.6;
 151         margin-bottom: 1.6em;
 152         max-width: 100%;
 153         overflow: auto;
 154         padding: 1.6em;
 155 }
 156
 157 code,
 158 kbd,
 159 tt,
 160 var {
 161         font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
 162         font-size: 15px;
 163         font-size: 0.9375rem;
 164 }
 165
 166 abbr,
 167 acronym {
 168         border-bottom: 1px dotted #666;
 169         cursor: help;
 170 }
 171
 172 mark,
 173 ins {
 174         background: #eee;
 175         text-decoration: none;
 176 }
 177
 178 big {
 179         font-size: 125%;
 180 }
 181
 182 blockquote,
 183 q {
 184         quotes: "" "";
 185 }
 186
 187 blockquote:before,
 188 blockquote:after,
 189 q:before,
 190 q:after {
 191         content: "";
 192 }
 193
 194 /* Typography for Thai Font */
 195
 196 html[lang="th"] h1,
 197 html[lang="th"] h2,
 198 html[lang="th"] h3,
 199 html[lang="th"] h4,
 200 html[lang="th"] h5,
 201 html[lang="th"] h6 {
 202         letter-spacing: 0;
 203         line-height: 1.65;
 204 }
 205
 206 html[lang="th"] body,
 207 html[lang="th"] button,
 208 html[lang="th"] input,
 209 html[lang="th"] select,
 210 html[lang="th"] textarea {
 211         line-height: 1.8;
 212 }
 213
 214 /**
 215  * 3.0 - Elements
 216  */
 217
 218 hr {
 219         background-color: #bbb;
 220         border: 0;
 221         height: 1px;
 222         margin-bottom: 1.5em;
 223 }
 224
 225 ul,
 226 ol {
 227         margin: 0 0 1.5em;
 228         padding: 0;
 229 }
 230
 231 ul {
 232         list-style: disc;
 233 }
 234
 235 ol {
 236         counter-reset: item;
 237 }
 238
 239 ol li {
 240         display: block;
 241         position: relative;
 242 }
 243
 244 ol li:before {
 245         content: counter(item);
 246         counter-increment: item;
 247         font-weight: 800;
 248         left: -1.5em;
 249         position: absolute;
 250 }
 251
 252 li > ul,
 253 li > ol {
 254         margin-bottom: 0;
 255         margin-left: 1.5em;
 256 }
 257
 258 dt {
 259         font-weight: 700;
 260 }
 261
 262 dd {
 263         margin: 0 1.5em 1.5em;
 264 }
 265
 266 table {
 267         border-collapse: collapse;
 268         margin: 0 0 1.5em;
 269         width: 100%;
 270 }
 271
 272 thead th {
 273         border-bottom: 2px solid #bbb;
 274         padding-bottom: 0.5em;
 275 }
 276
 277 th {
 278         padding: 0.4em;
 279         text-align: left;
 280 }
 281
 282 tr {
 283         border-bottom: 1px solid #eee;
 284 }
 285
 286 td {
 287         padding: 0.4em;
 288 }
 289
 290 th:first-child,
 291 td:first-child {
 292         padding-left: 0;
 293 }
 294
 295 th:last-child,
 296 td:last-child {
 297         padding-right: 0;
 298 }
 299
 300 a {
 301         -webkit-box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);
 302         box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);
 303         color: #222;
 304         text-decoration: none;
 305         -webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
 306         transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
 307         transition: color 80ms ease-in, box-shadow 130ms ease-in-out;
 308         transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;
 309 }
 310
 311 a:focus {
 312         outline: thin dotted;
 313 }
 314
 315 a:hover,
 316 a:focus {
 317         color: #000;
 318         -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1);
 319         box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1);
 320 }
 321
 322 /* Fixes linked images */
 323
 324 a img {
 325         background: #fff;
 326         -webkit-box-shadow: 0 0 0 6px #fff;
 327         box-shadow: 0 0 0 6px #fff;
 328 }
 329
 330 /**
 331  * 4.0 - Alignment
 332  */
 333
 334 img {
 335         height: auto; /* Make sure images are scaled correctly. */
 336         width: inherit;  /* Make images fill their parent's space. Solves IE8. */
 337         max-width: 100%; /* Adhere to container width. */
 338 }
 339
 340 embed,
 341 iframe,
 342 object {
 343         margin-bottom: 1.5em;
 344         max-width: 100%;
 345 }
 346
 347 /**
 348  * 5.0 - Caption
 349  */
 350
 351 .wp-caption {
 352         color: #666;
 353         font-size: 13px;
 354         font-size: 0.8125rem;
 355         font-style: italic;
 356         margin-bottom: 1.5em;
 357         max-width: 100%;
 358 }
 359
 360 .wp-caption img[class*="wp-image-"] {
 361         display: block;
 362         margin-left: auto;
 363         margin-right: auto;
 364 }
 365
 366 .wp-caption .wp-caption-text {
 367         margin: 0.8075em 0;
 368 }
 369
 370 /**
 371  * 6.0 - Galleries
 372  */
 373
 374 .gallery {
 375         margin-bottom: 1.5em;
 376 }
 377
 378 .gallery-item {
 379         display: inline-block;
 380         text-align: center;
 381         vertical-align: top;
 382         width: 100%;
 383 }
 384
 385 .gallery-item a,
 386 .gallery-item a:hover,
 387 .gallery-item a:focus {
 388         -webkit-box-shadow: none;
 389         box-shadow: none;
 390         background: none;
 391         display: inline-block;
 392 }
 393
 394 .gallery-columns-2 .gallery-item {
 395         max-width: 50%;
 396 }
 397
 398 .gallery-columns-3 .gallery-item {
 399         max-width: 33.33%;
 400 }
 401
 402 .gallery-columns-4 .gallery-item {
 403         max-width: 25%;
 404 }
 405
 406 .gallery-columns-5 .gallery-item {
 407         max-width: 20%;
 408 }
 409
 410 .gallery-columns-6 .gallery-item {
 411         max-width: 16.66%;
 412 }
 413
 414 .gallery-columns-7 .gallery-item {
 415         max-width: 14.28%;
 416 }
 417
 418 .gallery-columns-8 .gallery-item {
 419         max-width: 12.5%;
 420 }
 421
 422 .gallery-columns-9 .gallery-item {
 423         max-width: 11.11%;
 424 }
 425
 426 .gallery-caption {
 427         display: block;
 428 }
 429
 430 /**
 431  * 7.0 - Media Elements
 432  */
 433
 434 .mejs-container {
 435         margin-bottom: 1.5em;
 436 }
 437
 438 /* Audio Player */
 439
 440 .mejs-controls a.mejs-horizontal-volume-slider,
 441 .mejs-controls a.mejs-horizontal-volume-slider:focus,
 442 .mejs-controls a.mejs-horizontal-volume-slider:hover {
 443         background: transparent;
 444         border: 0;
 445 }
 446
 447 /* Playlist Color Overrides: Light */
 448
 449 .wp-playlist-light {
 450         border-color: #eee;
 451         color: #222;
 452 }
 453
 454 .wp-playlist-light .wp-playlist-current-item .wp-playlist-item-album {
 455         color: #333;
 456 }
 457
 458 .wp-playlist-light .wp-playlist-current-item .wp-playlist-item-artist {
 459         color: #767676;
 460 }
 461
 462 .wp-playlist-light .wp-playlist-item {
 463         border-bottom: 1px dotted #eee;
 464         -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
 465         transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
 466 }
 467
 468 .wp-playlist-light .wp-playlist-item:hover,
 469 .wp-playlist-light .wp-playlist-item:focus {
 470         border-bottom-color: rgba(0, 0, 0, 0);
 471         background-color: #767676;
 472         color: #fff;
 473 }
 474
 475 .wp-playlist-light a.wp-playlist-caption:hover,
 476 .wp-playlist-light .wp-playlist-item:hover a,
 477 .wp-playlist-light .wp-playlist-item:focus a {
 478         color: #fff;
 479 }
 480
 481 /* Playlist Color Overrides: Dark */
 482
 483 .wp-playlist-dark {
 484         background: #222;
 485         border-color: #333;
 486 }
 487
 488 .wp-playlist-dark .mejs-container .mejs-controls {
 489         background-color: #333;
 490 }
 491
 492 .wp-playlist-dark .wp-playlist-caption {
 493         color: #fff;
 494 }
 495
 496 .wp-playlist-dark .wp-playlist-current-item .wp-playlist-item-album {
 497         color: #eee;
 498 }
 499
 500 .wp-playlist-dark .wp-playlist-current-item .wp-playlist-item-artist {
 501         color: #aaa;
 502 }
 503
 504 .wp-playlist-dark .wp-playlist-playing {
 505         background-color: #333;
 506 }
 507
 508 .wp-playlist-dark .wp-playlist-item {
 509         border-bottom: 1px dotted #555;
 510         -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
 511         transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
 512 }
 513
 514 .wp-playlist-dark .wp-playlist-item:hover,
 515 .wp-playlist-dark .wp-playlist-item:focus {
 516         border-bottom-color: rgba(0, 0, 0, 0);
 517         background-color: #aaa;
 518         color: #222;
 519 }
 520
 521 .wp-playlist-dark a.wp-playlist-caption:hover,
 522 .wp-playlist-dark .wp-playlist-item:hover a,
 523 .wp-playlist-dark .wp-playlist-item:focus a {
 524         color: #222;
 525 }
 526
 527 /* Playlist Style Overrides */
 528
 529 .wp-playlist {
 530         padding: 0.625em 0.625em 0.3125em;
 531 }
 532
 533 .wp-playlist-current-item .wp-playlist-item-title {
 534         font-weight: 700;
 535 }
 536
 537 .wp-playlist-current-item .wp-playlist-item-album {
 538         font-style: normal;
 539 }
 540
 541 .wp-playlist-current-item .wp-playlist-item-artist {
 542         font-size: 10px;
 543         font-size: 0.625rem;
 544         font-weight: 800;
 545         letter-spacing: 0.1818em;
 546         text-transform: uppercase;
 547 }
 548
 549 .wp-playlist-item {
 550         padding: 0 0.3125em;
 551         cursor: pointer;
 552 }
 553
 554 .wp-playlist-item:last-of-type {
 555         border-bottom: none;
 556 }
 557
 558 .wp-playlist-item a {
 559         padding: 0.3125em 0;
 560         border-bottom: none;
 561 }
 562
 563 .wp-playlist-item a,
 564 .wp-playlist-item a:focus,
 565 .wp-playlist-item a:hover {
 566         -webkit-box-shadow: none;
 567         box-shadow: none;
 568         background: transparent;
 569 }
 570
 571 .wp-playlist-item-length {
 572         top: 5px;
 573 }
 574
 575 /**
 576  * 8.0 - RTL
 577  */
 578
 579 .rtl th {
 580         text-align: right;
 581 }
 582
 583 .rtl ol {
 584         counter-reset: item;
 585 }
 586
 587 .rtl ol li:before {
 588         left: auto;
 589         right: -1.5em;
 590 }
 591
 592 .rtl li > ul,
 593 .rtl li > ol {
 594         margin-left: 0;
 595         margin-right: 1.5em;
 596 }
 597
 598 .rtl .mejs-offscreen {
 599         right: -10000px;
 600 }