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 } |
|