editor-style.css 8.9 KB

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