editor-style.css 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553
  1. /* ==========================================================================
  2. ** Normalize
  3. ** ======================================================================== */
  4. body,
  5. label {
  6. font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  7. font-size: 16px;
  8. line-height: 1.4em;
  9. }
  10. /* ==========================================================================
  11. ** Card
  12. ** ======================================================================= */
  13. .card {
  14. display: block;
  15. position: relative;
  16. margin: 0 auto;
  17. padding: 16px;
  18. box-sizing: border-box;
  19. background: white;
  20. box-shadow: 0 0 0 1px rgba(200, 215, 225, 0.5), 0 1px 2px #e9eff3;
  21. }
  22. .card:after {
  23. content: ".";
  24. display: block;
  25. height: 0;
  26. clear: both;
  27. visibility: hidden;
  28. }
  29. @media ( min-width: 481px ) {
  30. .card {
  31. padding: 24px;
  32. }
  33. }
  34. .card > div {
  35. margin-top: 24px;
  36. }
  37. .card > div:first-child {
  38. margin-top: 0;
  39. }
  40. /* ==========================================================================
  41. ** Labels
  42. ** ======================================================================= */
  43. label {
  44. display: block;
  45. font-size: 14px;
  46. font-weight: 600;
  47. margin-bottom: 5px;
  48. }
  49. /* ==========================================================================
  50. ** Text Inputs
  51. ** ======================================================================= */
  52. input[type="text"],
  53. input[type="tel"],
  54. input[type="email"],
  55. input[type="url"] {
  56. border-radius: 0;
  57. appearance: none;
  58. box-sizing: border-box;
  59. margin: 0;
  60. padding: 7px 14px;
  61. width: 100%;
  62. color: #2e4453;
  63. font-size: 16px;
  64. line-height: 1.5;
  65. border: 1px solid #c8d7e1;
  66. background-color: #fff;
  67. transition: all .15s ease-in-out;
  68. box-shadow: none;
  69. }
  70. input[type="text"]::placeholder,
  71. input[type="tel"]::placeholder,
  72. input[type="email"]::placeholder,
  73. input[type="url"]::placeholder {
  74. color: #87a6bc;
  75. }
  76. input[type="text"]:hover,
  77. input[type="tel"]:hover,
  78. input[type="email"]:hover,
  79. input[type="url"]:hover {
  80. border-color: #a8bece;
  81. }
  82. input[type="text"]:focus,
  83. input[type="tel"]:focus,
  84. input[type="email"]:focus,
  85. input[type="url"]:focus {
  86. border-color: #0087be;
  87. outline: none;
  88. box-shadow: 0 0 0 2px #78dcfa;
  89. }
  90. input[type="text"]:focus::-ms-clear,
  91. input[type="tel"]:focus::-ms-clear,
  92. input[type="email"]:focus::-ms-clear,
  93. input[type="url"]:focus::-ms-clear {
  94. display: none;
  95. }
  96. input[type="text"]:disabled,
  97. input[type="tel"]:disabled,
  98. input[type="email"]:disabled,
  99. input[type="url"]:disabled {
  100. background: #f3f6f8;
  101. border-color: #e9eff3;
  102. color: #a8bece;
  103. -webkit-text-fill-color: #a8bece;
  104. }
  105. input[type="text"]:disabled:hover,
  106. input[type="tel"]:disabled:hover,
  107. input[type="email"]:disabled:hover,
  108. input[type="url"]:disabled:hover {
  109. cursor: default;
  110. }
  111. input[type="text"]:disabled::placeholder,
  112. input[type="tel"]:disabled::placeholder,
  113. input[type="email"]:disabled::placeholder,
  114. input[type="url"]:disabled::placeholder {
  115. color: #a8bece;
  116. }
  117. /* ==========================================================================
  118. ** Textareas
  119. ** ======================================================================= */
  120. textarea {
  121. border-radius: 0;
  122. appearance: none;
  123. box-sizing: border-box;
  124. margin: 0;
  125. padding: 7px 14px;
  126. height: 92px;
  127. width: 100%;
  128. color: #2e4453;
  129. font-size: 16px;
  130. line-height: 1.5;
  131. border: 1px solid #c8d7e1;
  132. background-color: #fff;
  133. transition: all .15s ease-in-out;
  134. box-shadow: none;
  135. }
  136. textarea::placeholder {
  137. color: #87a6bc;
  138. }
  139. textarea:hover {
  140. border-color: #a8bece;
  141. }
  142. textarea:focus {
  143. border-color: #0087be;
  144. outline: none;
  145. box-shadow: 0 0 0 2px #78dcfa;
  146. }
  147. textarea:focus::-ms-clear {
  148. display: none;
  149. }
  150. textarea:disabled {
  151. background: #f3f6f8;
  152. border-color: #e9eff3;
  153. color: #a8bece;
  154. -webkit-text-fill-color: #a8bece;
  155. }
  156. textarea:disabled:hover {
  157. cursor: default;
  158. }
  159. textarea:disabled::placeholder {
  160. color: #a8bece;
  161. }
  162. /* ==========================================================================
  163. ** Checkboxes
  164. ** ======================================================================= */
  165. input[type="checkbox"] {
  166. -webkit-appearance: none;
  167. display: inline-block;
  168. box-sizing: border-box;
  169. margin: 2px 0 0;
  170. padding: 7px 14px;
  171. width: 16px;
  172. height: 16px;
  173. float: left;
  174. outline: 0;
  175. padding: 0;
  176. box-shadow: none;
  177. background-color: #fff;
  178. border: 1px solid #c8d7e1;
  179. color: #2e4453;
  180. font-size: 16px;
  181. line-height: 0;
  182. text-align: center;
  183. vertical-align: middle;
  184. appearance: none;
  185. transition: all .15s ease-in-out;
  186. clear: none;
  187. cursor: pointer;
  188. }
  189. input[type="checkbox"]:checked:before {
  190. content: '\f147';
  191. font-family: Dashicons;
  192. margin: -3px 0 0 -4px;
  193. float: left;
  194. display: inline-block;
  195. vertical-align: middle;
  196. width: 16px;
  197. font-size: 20px;
  198. line-height: 1;
  199. -webkit-font-smoothing: antialiased;
  200. -moz-osx-font-smoothing: grayscale;
  201. speak: none;
  202. color: #00aadc;
  203. }
  204. input[type="checkbox"]:disabled:checked:before {
  205. color: #a8bece;
  206. }
  207. input[type="checkbox"]:hover {
  208. border-color: #a8bece;
  209. }
  210. input[type="checkbox"]:focus {
  211. border-color: #0087be;
  212. outline: none;
  213. box-shadow: 0 0 0 2px #78dcfa;
  214. }
  215. input[type="checkbox"]:disabled {
  216. background: #f3f6f8;
  217. border-color: #e9eff3;
  218. color: #a8bece;
  219. opacity: 1;
  220. }
  221. input[type="checkbox"]:disabled:hover {
  222. cursor: default;
  223. }
  224. input[type="checkbox"] + span {
  225. display: block;
  226. font-weight: normal;
  227. margin-left: 24px;
  228. }
  229. /* ==========================================================================
  230. ** Radio buttons
  231. ** ======================================================================== */
  232. input[type=radio] {
  233. color: #2e4453;
  234. font-size: 16px;
  235. border: 1px solid #c8d7e1;
  236. background-color: #fff;
  237. transition: all .15s ease-in-out;
  238. box-sizing: border-box;
  239. -webkit-appearance: none;
  240. clear: none;
  241. cursor: pointer;
  242. display: inline-block;
  243. line-height: 0;
  244. height: 16px;
  245. margin: 2px 4px 0 0;
  246. float: left;
  247. outline: 0;
  248. padding: 0;
  249. text-align: center;
  250. vertical-align: middle;
  251. width: 16px;
  252. min-width: 16px;
  253. appearance: none;
  254. border-radius: 50%;
  255. line-height: 10px;
  256. }
  257. input[type="radio"]:hover {
  258. border-color: #a8bece;
  259. }
  260. input[type="radio"]:focus {
  261. border-color: #0087be;
  262. outline: none;
  263. box-shadow: 0 0 0 2px #78dcfa;
  264. }
  265. input[type="radio"]:focus::-ms-clear {
  266. display: none;
  267. }
  268. input[type="radio"]:checked:before {
  269. float: left;
  270. display: inline-block;
  271. content: '\2022';
  272. margin: 3px;
  273. width: 8px;
  274. height: 8px;
  275. text-indent: -9999px;
  276. background: #00aadc;
  277. vertical-align: middle;
  278. border-radius: 50%;
  279. animation: grow .2s ease-in-out;
  280. }
  281. input[type="radio"]:disabled {
  282. background: #f3f6f8;
  283. border-color: #e9eff3;
  284. color: #a8bece;
  285. opacity: 1;
  286. -webkit-text-fill-color: #a8bece;
  287. }
  288. input[type="radio"]:disabled:hover {
  289. cursor: default;
  290. }
  291. input[type="radio"]:disabled::placeholder {
  292. color: #a8bece;
  293. }
  294. input[type="radio"]:disabled:checked:before {
  295. background: #e9eff3;
  296. }
  297. input[type="radio"] + span {
  298. display: block;
  299. font-weight: normal;
  300. margin-left: 24px;
  301. }
  302. @keyframes grow {
  303. 0% {
  304. transform: scale(0.3);
  305. }
  306. 60% {
  307. transform: scale(1.15);
  308. }
  309. 100% {
  310. transform: scale(1);
  311. }
  312. }
  313. @keyframes grow {
  314. 0% {
  315. transform: scale(0.3);
  316. }
  317. 60% {
  318. transform: scale(1.15);
  319. }
  320. 100% {
  321. transform: scale(1);
  322. }
  323. }
  324. /* ==========================================================================
  325. ** Selects
  326. ** ======================================================================== */
  327. select {
  328. background: #fff url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiAgICAgICAgPHRpdGxlPmFycm93LWRvd248L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4gICAgICAgIDxnIGlkPSJhcnJvdy1kb3duIiBza2V0Y2g6dHlwZT0iTVNBcnRib2FyZEdyb3VwIiBmaWxsPSIjQzhEN0UxIj4gICAgICAgICAgICA8cGF0aCBkPSJNMTUuNSw2IEwxNyw3LjUgTDEwLjI1LDE0LjI1IEwzLjUsNy41IEw1LDYgTDEwLjI1LDExLjI1IEwxNS41LDYgWiIgaWQ9IkRvd24tQXJyb3ciIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==) no-repeat right 10px center;
  329. border-color: #c8d7e1;
  330. border-style: solid;
  331. border-radius: 4px;
  332. border-width: 1px 1px 2px;
  333. color: #2e4453;
  334. cursor: pointer;
  335. display: inline-block;
  336. margin: 0;
  337. outline: 0;
  338. overflow: hidden;
  339. font-size: 14px;
  340. line-height: 21px;
  341. font-weight: 600;
  342. text-overflow: ellipsis;
  343. text-decoration: none;
  344. vertical-align: top;
  345. white-space: nowrap;
  346. box-sizing: border-box;
  347. padding: 7px 32px 9px 14px; // Aligns the text to the 8px baseline grid and adds padding on right to allow for the arrow.
  348. -webkit-appearance: none;
  349. -moz-appearance: none;
  350. appearance: none;
  351. }
  352. select:hover {
  353. background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiAgICAgICAgPHRpdGxlPmFycm93LWRvd248L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4gICAgICAgIDxnIGlkPSJhcnJvdy1kb3duIiBza2V0Y2g6dHlwZT0iTVNBcnRib2FyZEdyb3VwIiBmaWxsPSIjYThiZWNlIj4gICAgICAgICAgICA8cGF0aCBkPSJNMTUuNSw2IEwxNyw3LjUgTDEwLjI1LDE0LjI1IEwzLjUsNy41IEw1LDYgTDEwLjI1LDExLjI1IEwxNS41LDYgWiIgaWQ9IkRvd24tQXJyb3ciIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==);
  354. }
  355. select:focus {
  356. background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiA8dGl0bGU+YXJyb3ctZG93bjwvdGl0bGU+IDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiA8ZGVmcz48L2RlZnM+IDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHNrZXRjaDp0eXBlPSJNU1BhZ2UiPiA8ZyBpZD0iYXJyb3ctZG93biIgc2tldGNoOnR5cGU9Ik1TQXJ0Ym9hcmRHcm91cCIgZmlsbD0iIzJlNDQ1MyI+IDxwYXRoIGQ9Ik0xNS41LDYgTDE3LDcuNSBMMTAuMjUsMTQuMjUgTDMuNSw3LjUgTDUsNiBMMTAuMjUsMTEuMjUgTDE1LjUsNiBaIiBpZD0iRG93bi1BcnJvdyIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPiA8L2c+IDwvZz48L3N2Zz4=);
  357. border-color: #00aadc;
  358. box-shadow: 0 0 0 2px #78dcfa;
  359. outline: 0;
  360. -moz-outline:none;
  361. -moz-user-focus:ignore;
  362. }
  363. select:disabled,
  364. select:hover:disabled {
  365. background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiAgICAgICAgPHRpdGxlPmFycm93LWRvd248L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4gICAgICAgIDxnIGlkPSJhcnJvdy1kb3duIiBza2V0Y2g6dHlwZT0iTVNBcnRib2FyZEdyb3VwIiBmaWxsPSIjZTllZmYzIj4gICAgICAgICAgICA8cGF0aCBkPSJNMTUuNSw2IEwxNyw3LjUgTDEwLjI1LDE0LjI1IEwzLjUsNy41IEw1LDYgTDEwLjI1LDExLjI1IEwxNS41LDYgWiIgaWQ9IkRvd24tQXJyb3ciIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==) no-repeat right 10px center;;
  366. }
  367. select.is-compact {
  368. min-width: 0;
  369. padding: 0 20px 2px 6px;
  370. margin: 0 4px;
  371. background-position: right 5px center;
  372. background-size: 12px 12px;
  373. }
  374. /* Make it display:block when it follows a label */
  375. label select,
  376. label + select {
  377. display: block;
  378. min-width: 200px;
  379. }
  380. label select.is-compact,
  381. label + select.is-compact {
  382. display: inline-block;
  383. min-width: 0;
  384. }
  385. /* IE: Remove the default arrow */
  386. select::-ms-expand {
  387. display: none;
  388. }
  389. /* IE: Remove default background and color styles on focus */
  390. select::-ms-value {
  391. background: none;
  392. color: #2e4453;
  393. }
  394. /* Firefox: Remove the focus outline, see http://stackoverflow.com/questions/3773430/remove-outline-from-select-box-in-ff/18853002#18853002 */
  395. select:-moz-focusring {
  396. color: transparent;
  397. text-shadow: 0 0 0 #2e4453;
  398. }
  399. /* ==========================================================================
  400. ** Buttons
  401. ** ======================================================================== */
  402. input[type="submit"] {
  403. padding: 0;
  404. font-size: 14px;
  405. -webkit-appearance: none;
  406. -moz-appearance: none;
  407. appearance: none;
  408. vertical-align: baseline;
  409. background: white;
  410. border-color: #c8d7e1;
  411. border-style: solid;
  412. border-width: 1px 1px 2px;
  413. color: #2e4453;
  414. cursor: pointer;
  415. display: inline-block;
  416. margin: 24px 0 0;
  417. outline: 0;
  418. overflow: hidden;
  419. font-weight: 500;
  420. text-overflow: ellipsis;
  421. text-decoration: none;
  422. vertical-align: top;
  423. box-sizing: border-box;
  424. font-size: 14px;
  425. line-height: 21px;
  426. border-radius: 4px;
  427. padding: 7px 14px 9px;
  428. -webkit-appearance: none;
  429. -moz-appearance: none;
  430. appearance: none;
  431. }
  432. input[type="submit"]:hover {
  433. border-color: #a8bece;
  434. color: #2e4453;
  435. }
  436. input[type="submit"]:active {
  437. border-width: 2px 1px 1px;
  438. }
  439. input[type="submit"]:visited {
  440. color: #2e4453;
  441. }
  442. input[type="submit"][disabled],
  443. input[type="submit"]:disabled {
  444. color: #e9eff3;
  445. background: white;
  446. border-color: #e9eff3;
  447. cursor: default;
  448. }
  449. input[type="submit"][disabled]:active,
  450. input[type="submit"]:disabled:active {
  451. border-width: 1px 1px 2px;
  452. }
  453. input[type="submit"]:focus {
  454. border-color: #00aadc;
  455. box-shadow: 0 0 0 2px #78dcfa;
  456. }
  457. /* ==========================================================================
  458. ** Preview styles
  459. ** ======================================================================== */
  460. .wpview.wpview-wrap[data-wpview-type=contact-form] iframe.inline-edit-contact-form {
  461. width: 100%;
  462. min-height: 500px;
  463. border: 0;
  464. overflow: hidden;
  465. margin-bottom: 0;
  466. display: block;
  467. }
  468. .contact-submit.contact-submit {
  469. margin-top: 0;
  470. margin-bottom: 0;
  471. }