[Summary view] [Print] [Text view]

   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: auto 20px;
  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      overflow: auto;
 153      padding: 1.6em;
 154  }
 155  
 156  code,
 157  kbd,
 158  tt,
 159  var {
 160      font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
 161      font-size: 15px;
 162      font-size: 0.9375rem;
 163  }
 164  
 165  abbr,
 166  acronym {
 167      border-bottom: 1px dotted #666;
 168      cursor: help;
 169  }
 170  
 171  mark,
 172  ins {
 173      background: #eee;
 174      text-decoration: none;
 175  }
 176  
 177  big {
 178      font-size: 125%;
 179  }
 180  
 181  blockquote,
 182  q {
 183      quotes: "" "";
 184  }
 185  
 186  blockquote:before,
 187  blockquote:after,
 188  q:before,
 189  q:after {
 190      content: "";
 191  }
 192  
 193  /* Typography for Thai Font */
 194  
 195  html[lang="th"] h1,
 196  html[lang="th"] h2,
 197  html[lang="th"] h3,
 198  html[lang="th"] h4,
 199  html[lang="th"] h5,
 200  html[lang="th"] h6 {
 201      letter-spacing: 0;
 202      line-height: 1.65;
 203  }
 204  
 205  html[lang="th"] body,
 206  html[lang="th"] button,
 207  html[lang="th"] input,
 208  html[lang="th"] select,
 209  html[lang="th"] textarea {
 210      line-height: 1.8;
 211  }
 212  
 213  /**
 214   * 3.0 - Elements
 215   */
 216  
 217  hr {
 218      background-color: #bbb;
 219      border: 0;
 220      height: 1px;
 221      margin-bottom: 1.5em;
 222  }
 223  
 224  ul,
 225  ol {
 226      margin: 0 0 1.5em;
 227      padding: 0;
 228  }
 229  
 230  ul {
 231      list-style: disc;
 232  }
 233  
 234  ol > li {
 235      position: relative;
 236  }
 237  
 238  li > ul,
 239  li > ol {
 240      margin-bottom: 0;
 241      margin-left: 1.5em;
 242  }
 243  
 244  dt {
 245      font-weight: 700;
 246  }
 247  
 248  dd {
 249      margin: 0 1.5em 1.5em;
 250  }
 251  
 252  table {
 253      border-collapse: collapse;
 254      margin: 0 0 1.5em;
 255      width: 100%;
 256  }
 257  
 258  thead th {
 259      border-bottom: 2px solid #bbb;
 260      padding-bottom: 0.5em;
 261  }
 262  
 263  th {
 264      padding: 0.4em;
 265      text-align: left;
 266  }
 267  
 268  tr {
 269      border-bottom: 1px solid #eee;
 270  }
 271  
 272  td {
 273      padding: 0.4em;
 274  }
 275  
 276  th:first-child,
 277  td:first-child {
 278      padding-left: 0;
 279  }
 280  
 281  th:last-child,
 282  td:last-child {
 283      padding-right: 0;
 284  }
 285  
 286  a {
 287      -webkit-box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);
 288      box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);
 289      color: #222;
 290      text-decoration: none;
 291      -webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
 292      transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
 293      transition: color 80ms ease-in, box-shadow 130ms ease-in-out;
 294      transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;
 295  }
 296  
 297  a:focus {
 298      outline: thin dotted;
 299  }
 300  
 301  a:hover,
 302  a:focus {
 303      color: #000;
 304      -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1);
 305      box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1);
 306  }
 307  
 308  /* Fixes linked images */
 309  
 310  a img {
 311      background: #fff;
 312      -webkit-box-shadow: 0 0 0 6px #fff;
 313      box-shadow: 0 0 0 6px #fff;
 314  }
 315  
 316  /**
 317   * 4.0 - Alignment
 318   */
 319  
 320  img {
 321      height: auto; /* Make sure images are scaled correctly. */
 322      max-width: 100%; /* Adhere to container width. */
 323  }
 324  
 325  embed,
 326  iframe,
 327  object {
 328      margin-bottom: 1.5em;
 329      max-width: 100%;
 330  }
 331  
 332  /**
 333   * 5.0 - Caption
 334   */
 335  
 336  .wp-caption {
 337      color: #666;
 338      font-size: 13px;
 339      font-size: 0.8125rem;
 340      font-style: italic;
 341      margin-bottom: 1.5em;
 342      max-width: 100%;
 343  }
 344  
 345  .wp-caption img[class*="wp-image-"] {
 346      display: block;
 347      margin-left: auto;
 348      margin-right: auto;
 349  }
 350  
 351  .wp-caption .wp-caption-text {
 352      margin: 0.8075em 0;
 353  }
 354  
 355  /**
 356   * 6.0 - Galleries
 357   */
 358  
 359  .gallery {
 360      margin-bottom: 1.5em;
 361  }
 362  
 363  .gallery-item {
 364      display: inline-block;
 365      text-align: center;
 366      vertical-align: top;
 367      width: 100%;
 368  }
 369  
 370  .gallery-item a,
 371  .gallery-item a:hover,
 372  .gallery-item a:focus {
 373      -webkit-box-shadow: none;
 374      box-shadow: none;
 375      background: none;
 376      display: inline-block;
 377  }
 378  
 379  .gallery-columns-2 .gallery-item {
 380      max-width: 50%;
 381  }
 382  
 383  .gallery-columns-3 .gallery-item {
 384      max-width: 33.33%;
 385  }
 386  
 387  .gallery-columns-4 .gallery-item {
 388      max-width: 25%;
 389  }
 390  
 391  .gallery-columns-5 .gallery-item {
 392      max-width: 20%;
 393  }
 394  
 395  .gallery-columns-6 .gallery-item {
 396      max-width: 16.66%;
 397  }
 398  
 399  .gallery-columns-7 .gallery-item {
 400      max-width: 14.28%;
 401  }
 402  
 403  .gallery-columns-8 .gallery-item {
 404      max-width: 12.5%;
 405  }
 406  
 407  .gallery-columns-9 .gallery-item {
 408      max-width: 11.11%;
 409  }
 410  
 411  .gallery-caption {
 412      display: block;
 413  }
 414  
 415  /**
 416   * 7.0 - Media Elements
 417   */
 418  
 419  .mejs-container {
 420      margin-bottom: 1.5em;
 421  }
 422  
 423  /* Audio Player */
 424  
 425  .mejs-controls a.mejs-horizontal-volume-slider,
 426  .mejs-controls a.mejs-horizontal-volume-slider:focus,
 427  .mejs-controls a.mejs-horizontal-volume-slider:hover {
 428      background: transparent;
 429      border: 0;
 430  }
 431  
 432  /* Playlist Color Overrides: Light */
 433  
 434  .wp-playlist-light {
 435      border-color: #eee;
 436      color: #222;
 437  }
 438  
 439  .wp-playlist-light .wp-playlist-current-item .wp-playlist-item-album {
 440      color: #333;
 441  }
 442  
 443  .wp-playlist-light .wp-playlist-current-item .wp-playlist-item-artist {
 444      color: #767676;
 445  }
 446  
 447  .wp-playlist-light .wp-playlist-item {
 448      border-bottom: 1px dotted #eee;
 449      -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
 450      transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
 451  }
 452  
 453  .wp-playlist-light .wp-playlist-item:hover,
 454  .wp-playlist-light .wp-playlist-item:focus {
 455      border-bottom-color: rgba(0, 0, 0, 0);
 456      background-color: #767676;
 457      color: #fff;
 458  }
 459  
 460  .wp-playlist-light a.wp-playlist-caption:hover,
 461  .wp-playlist-light .wp-playlist-item:hover a,
 462  .wp-playlist-light .wp-playlist-item:focus a {
 463      color: #fff;
 464  }
 465  
 466  /* Playlist Color Overrides: Dark */
 467  
 468  .wp-playlist-dark {
 469      background: #222;
 470      border-color: #333;
 471  }
 472  
 473  .wp-playlist-dark .mejs-container .mejs-controls {
 474      background-color: #333;
 475  }
 476  
 477  .wp-playlist-dark .wp-playlist-caption {
 478      color: #fff;
 479  }
 480  
 481  .wp-playlist-dark .wp-playlist-current-item .wp-playlist-item-album {
 482      color: #eee;
 483  }
 484  
 485  .wp-playlist-dark .wp-playlist-current-item .wp-playlist-item-artist {
 486      color: #aaa;
 487  }
 488  
 489  .wp-playlist-dark .wp-playlist-playing {
 490      background-color: #333;
 491  }
 492  
 493  .wp-playlist-dark .wp-playlist-item {
 494      border-bottom: 1px dotted #555;
 495      -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
 496      transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
 497  }
 498  
 499  .wp-playlist-dark .wp-playlist-item:hover,
 500  .wp-playlist-dark .wp-playlist-item:focus {
 501      border-bottom-color: rgba(0, 0, 0, 0);
 502      background-color: #aaa;
 503      color: #222;
 504  }
 505  
 506  .wp-playlist-dark a.wp-playlist-caption:hover,
 507  .wp-playlist-dark .wp-playlist-item:hover a,
 508  .wp-playlist-dark .wp-playlist-item:focus a {
 509      color: #222;
 510  }
 511  
 512  /* Playlist Style Overrides */
 513  
 514  .wp-playlist {
 515      padding: 0.625em 0.625em 0.3125em;
 516  }
 517  
 518  .wp-playlist-current-item .wp-playlist-item-title {
 519      font-weight: 700;
 520  }
 521  
 522  .wp-playlist-current-item .wp-playlist-item-album {
 523      font-style: normal;
 524  }
 525  
 526  .wp-playlist-current-item .wp-playlist-item-artist {
 527      font-size: 10px;
 528      font-size: 0.625rem;
 529      font-weight: 800;
 530      letter-spacing: 0.1818em;
 531      text-transform: uppercase;
 532  }
 533  
 534  .wp-playlist-item {
 535      padding: 0 0.3125em;
 536      cursor: pointer;
 537  }
 538  
 539  .wp-playlist-item:last-of-type {
 540      border-bottom: none;
 541  }
 542  
 543  .wp-playlist-item a {
 544      padding: 0.3125em 0;
 545      border-bottom: none;
 546  }
 547  
 548  .wp-playlist-item a,
 549  .wp-playlist-item a:focus,
 550  .wp-playlist-item a:hover {
 551      -webkit-box-shadow: none;
 552      box-shadow: none;
 553      background: transparent;
 554  }
 555  
 556  .wp-playlist-item-length {
 557      top: 5px;
 558  }
 559  
 560  /**
 561   * 8.0 - RTL
 562   */
 563  
 564  .rtl th {
 565      text-align: right;
 566  }
 567  
 568  .rtl ol > li:before {
 569      left: auto;
 570      right: -1.5em;
 571  }
 572  
 573  .rtl li > ul,
 574  .rtl li > ol {
 575      margin-left: 0;
 576      margin-right: 1.5em;
 577  }
 578  
 579  .rtl .mejs-offscreen {
 580      right: -10000px;
 581  }