wp-editor-styles.css 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690
  1. html {
  2. font-size: 93.75%;
  3. }
  4. /* Variables */
  5. /*---------- Media Query min-width Structure ----------*/
  6. /*---------- Media Query max-width Structure ----------*/
  7. /*---------- Break-point min-width Structure ----------*/
  8. /*---------- Break-point max-width Structure ----------*/
  9. /*---------- Font Size ----------*/
  10. /*---------- Line Height ----------*/
  11. /*---------- Site Basic Structure ----------*/
  12. /*---------- z-index Structure ----------*/
  13. /*
  14. * Button mixin- creates a button effect with correct
  15. * highlights/shadows, based on a base color.
  16. */
  17. .edit-post-visual-editor {
  18. /* must have higher specificity than alternative color schemes inline styles */
  19. }
  20. .edit-post-visual-editor ::selection {
  21. color: #fff;
  22. background: royalblue;
  23. }
  24. .edit-post-visual-editor body {
  25. -webkit-font-smoothing: antialiased;
  26. -moz-osx-font-smoothing: grayscale;
  27. }
  28. .edit-post-visual-editor body:not(.logged-in) {
  29. position: relative;
  30. }
  31. .edit-post-visual-editor #page {
  32. position: relative;
  33. }
  34. .edit-post-visual-editor a,
  35. .edit-post-visual-editor a:focus {
  36. text-decoration: none;
  37. }
  38. .edit-post-visual-editor a,
  39. .edit-post-visual-editor .site-header a *,
  40. .edit-post-visual-editor .site-footer a *,
  41. .edit-post-visual-editor .secondary a * {
  42. transition: all 0.2s linear;
  43. }
  44. .edit-post-visual-editor .capitalize {
  45. text-transform: uppercase;
  46. }
  47. .edit-post-visual-editor img {
  48. vertical-align: middle;
  49. }
  50. .edit-post-visual-editor .entry-content h1,
  51. .edit-post-visual-editor .entry-content h2,
  52. .edit-post-visual-editor .entry-content h3,
  53. .edit-post-visual-editor .entry-content h4,
  54. .edit-post-visual-editor .entry-content h5,
  55. .edit-post-visual-editor .entry-content h6 {
  56. margin-bottom: 20px;
  57. }
  58. .edit-post-visual-editor p {
  59. margin-bottom: 1.75em;
  60. }
  61. .edit-post-visual-editor blockquote {
  62. margin: 1.5em 1em 1.5em 3em;
  63. font-size: 1.1em;
  64. line-height: inherit;
  65. position: relative;
  66. }
  67. .edit-post-visual-editor .ast-button,
  68. .edit-post-visual-editor .button,
  69. .edit-post-visual-editor input[type="button"],
  70. .edit-post-visual-editor input[type="submit"] {
  71. border-radius: 0;
  72. padding: 18px 30px;
  73. border: 0;
  74. box-shadow: none;
  75. text-shadow: none;
  76. }
  77. .edit-post-visual-editor .ast-button:hover,
  78. .edit-post-visual-editor .button:hover,
  79. .edit-post-visual-editor input[type="button"]:hover,
  80. .edit-post-visual-editor input[type="submit"]:hover {
  81. box-shadow: none;
  82. }
  83. .edit-post-visual-editor .ast-button:active, .edit-post-visual-editor .ast-button:focus,
  84. .edit-post-visual-editor .button:active,
  85. .edit-post-visual-editor .button:focus,
  86. .edit-post-visual-editor input[type="button"]:active,
  87. .edit-post-visual-editor input[type="button"]:focus,
  88. .edit-post-visual-editor input[type="submit"]:active,
  89. .edit-post-visual-editor input[type="submit"]:focus {
  90. box-shadow: none;
  91. }
  92. .edit-post-visual-editor .site-title {
  93. font-weight: normal;
  94. }
  95. .edit-post-visual-editor .site-title,
  96. .edit-post-visual-editor .site-description {
  97. margin-bottom: 0;
  98. }
  99. .edit-post-visual-editor .site-title a,
  100. .edit-post-visual-editor .site-title:hover a,
  101. .edit-post-visual-editor .site-title:focus a,
  102. .edit-post-visual-editor .site-description a,
  103. .edit-post-visual-editor .site-description:hover a,
  104. .edit-post-visual-editor .site-description:focus a {
  105. transition: all 0.2s linear;
  106. }
  107. .edit-post-visual-editor .site-title a,
  108. .edit-post-visual-editor .site-title a:focus,
  109. .edit-post-visual-editor .site-title a:hover,
  110. .edit-post-visual-editor .site-title a:visited {
  111. color: #222;
  112. }
  113. .edit-post-visual-editor .site-description a,
  114. .edit-post-visual-editor .site-description a:focus,
  115. .edit-post-visual-editor .site-description a:hover,
  116. .edit-post-visual-editor .site-description a:visited {
  117. color: #999;
  118. }
  119. .edit-post-visual-editor .search-form .search-field {
  120. outline: none;
  121. }
  122. .edit-post-visual-editor .ast-search-menu-icon {
  123. position: relative;
  124. z-index: 3;
  125. }
  126. .edit-post-visual-editor .site .skip-link {
  127. background-color: #f1f1f1;
  128. box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
  129. color: #21759b;
  130. display: block;
  131. font-family: Montserrat, "Helvetica Neue", sans-serif;
  132. font-size: 14px;
  133. font-weight: 700;
  134. left: -9999em;
  135. outline: none;
  136. padding: 15px 23px 14px;
  137. text-decoration: none;
  138. text-transform: none;
  139. top: -9999em;
  140. }
  141. .edit-post-visual-editor .site .skip-link:focus {
  142. clip: auto;
  143. height: auto;
  144. left: 6px;
  145. top: 7px;
  146. width: auto;
  147. z-index: 100000;
  148. outline: thin dotted;
  149. }
  150. .logged-in .edit-post-visual-editor .site .skip-link {
  151. box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
  152. font-family: "Open Sans", sans-serif;
  153. }
  154. .edit-post-visual-editor .editor-styles-wrapper > .is-root-container {
  155. padding-top: 20px;
  156. }
  157. /**
  158. * Responsive view management CSS.
  159. */
  160. .responsive-enabled #editor .edit-post-visual-editor {
  161. background-color: #2f2f2f;
  162. }
  163. .wp-embed-responsive.editor-styles-wrapper {
  164. padding-left: 10px;
  165. padding-right: 10px;
  166. }
  167. .wp-embed-responsive.editor-styles-wrapper [data-block] {
  168. margin-top: 15px;
  169. margin-bottom: 15px;
  170. }
  171. .wp-embed-responsive.editor-styles-wrapper .wp-block-pullquote {
  172. border: none;
  173. }
  174. .ast-highlight-wpblock-onhover .block-editor-block-list__layout .block-editor-block-list__block {
  175. transition: all 0.2s;
  176. }
  177. .ast-highlight-wpblock-onhover .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted, .ast-highlight-wpblock-onhover .block-editor-block-list__layout .block-editor-block-list__block:hover {
  178. box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
  179. }
  180. .ast-highlight-wpblock-onhover .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted:after {
  181. box-shadow: none;
  182. }
  183. /**
  184. * Editor core layout supportive CSS.
  185. */
  186. .edit-post-visual-editor__post-title-wrapper {
  187. position: relative;
  188. max-width: calc(var(--wp--custom--ast-content-width-size) + 10px) !important;
  189. margin-left: auto !important;
  190. margin-right: auto !important;
  191. margin-bottom: 1.5em;
  192. }
  193. .edit-post-visual-editor__post-title-wrapper:hover h1.editor-post-title__input {
  194. box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
  195. }
  196. .edit-post-visual-editor__post-title-wrapper:hover .title-visibility {
  197. opacity: 1;
  198. }
  199. .edit-post-visual-editor__post-title-wrapper .title-visibility {
  200. cursor: pointer;
  201. font-size: 18px;
  202. width: 36px;
  203. height: 100%;
  204. text-align: center;
  205. color: var(--wp-admin-theme-color);
  206. vertical-align: middle;
  207. position: absolute;
  208. left: -37px;
  209. bottom: 0;
  210. opacity: 0;
  211. margin: 0 !important;
  212. padding: 0 !important;
  213. box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
  214. transition: all 0.2s;
  215. }
  216. .edit-post-visual-editor__post-title-wrapper .title-visibility:hover {
  217. opacity: 1;
  218. color: var(--wp-admin-theme-color);
  219. }
  220. .edit-post-visual-editor__post-title-wrapper .title-visibility:hover:after {
  221. opacity: 1;
  222. visibility: visible;
  223. }
  224. .edit-post-visual-editor__post-title-wrapper .title-visibility:before {
  225. width: 100%;
  226. height: 100%;
  227. display: inline-flex;
  228. align-items: center;
  229. justify-content: center;
  230. }
  231. .edit-post-visual-editor__post-title-wrapper .title-visibility:after {
  232. content: attr(data-tooltip);
  233. white-space: nowrap;
  234. border-radius: 2px;
  235. pointer-events: none;
  236. color: #fff;
  237. background: #1e1e1e;
  238. opacity: 0;
  239. visibility: hidden;
  240. width: max-content;
  241. line-height: 26px;
  242. margin-left: -1px;
  243. display: flex;
  244. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  245. align-items: flex-start;
  246. padding: 0 6px;
  247. font-size: 12px;
  248. transition: all 0.2s;
  249. }
  250. .edit-post-visual-editor__post-title-wrapper > .wp-block-post-title {
  251. max-width: 100% !important;
  252. }
  253. .edit-post-visual-editor__post-title-wrapper h1.editor-post-title__input {
  254. padding: 10px 6px;
  255. transition: all 0.2s;
  256. }
  257. .edit-post-visual-editor__post-title-wrapper h1.editor-post-title__input.is-selected {
  258. box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
  259. }
  260. .edit-post-visual-editor__post-title-wrapper h1.editor-post-title__input.is-selected + .title-visibility {
  261. opacity: 1;
  262. color: var(--wp-admin-theme-color);
  263. }
  264. .edit-post-visual-editor__post-title-wrapper.invisible {
  265. opacity: 0.5;
  266. }
  267. .ast-page-builder-template .edit-post-visual-editor__post-title-wrapper, .ast-stacked-title-visibility .edit-post-visual-editor__post-title-wrapper {
  268. max-width: none;
  269. padding: 0 20px;
  270. }
  271. .ast-page-builder-template .edit-post-visual-editor__post-title-wrapper .title-visibility, .ast-stacked-title-visibility .edit-post-visual-editor__post-title-wrapper .title-visibility {
  272. left: unset;
  273. top: -41px;
  274. height: 40px;
  275. }
  276. /**
  277. * For widget screen.
  278. */
  279. html .edit-widgets-main-block-list :where(.wp-block) {
  280. margin-bottom: 28px;
  281. }
  282. /**
  283. * ast-separate-container layout compatibility.
  284. */
  285. .ast-separate-container .edit-post-visual-editor__content-area {
  286. padding: 20px !important;
  287. }
  288. /**
  289. * Color control's name adjustment.
  290. */
  291. .ast-theme-block-color-name {
  292. mix-blend-mode: difference;
  293. }
  294. /**
  295. * Page builder triggers support.
  296. */
  297. #elementor-editor-button {
  298. background: #0073aa;
  299. border-color: #0073aa;
  300. color: #fff;
  301. font-size: 14px;
  302. height: 46px;
  303. line-height: 44px;
  304. padding: 0 36px;
  305. display: inline-block;
  306. border-width: 1px;
  307. border-style: solid;
  308. -webkit-appearance: none;
  309. border-radius: 3px;
  310. white-space: nowrap;
  311. box-sizing: border-box;
  312. box-shadow: 0 2px 0 #006799;
  313. }
  314. #elementor-editor-button:hover, #elementor-editor-button:focus {
  315. background: #007db9;
  316. border-color: #00699b;
  317. color: #fff;
  318. }
  319. #elementor-editor-button:focus {
  320. box-shadow: 0 0 0 1px #fff, 0 0 0 3px #0073aa;
  321. }
  322. #elementor-editor-button:active {
  323. background: #006291;
  324. border-color: #006291;
  325. color: #fff;
  326. }
  327. #elementor-editor-button.active, #elementor-editor-button.active:focus, #elementor-editor-button.active:hover {
  328. background: #0073aa;
  329. color: #fff;
  330. border-color: #003f5e;
  331. box-shadow: inset 0 2px 5px -3px black;
  332. }
  333. #elementor-editor-button i {
  334. font-style: normal;
  335. color: white;
  336. }
  337. .editor-media-placeholder button,
  338. .fl-builder-layout-launch-view button {
  339. margin: 2px;
  340. }
  341. .fl-builder-layout-launch-view .is-primary.is-primary {
  342. color: white;
  343. }
  344. /**
  345. * Modern Gutenberg editor improved UI/UX.
  346. */
  347. body .editor-styles-wrapper .edit-post-visual-editor__post-title-wrapper > * + *, body .editor-styles-wrapper .block-editor-block-list__layout.is-root-container > * + * {
  348. margin-block-start: 0;
  349. }
  350. .wp-block-separator {
  351. height: 0;
  352. }
  353. .wp-block-separator:not(.is-style-wide) {
  354. margin-left: auto;
  355. margin-right: auto;
  356. }
  357. .wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
  358. width: 100px;
  359. }
  360. .editor-styles-wrapper hr {
  361. margin-bottom: 1.5em;
  362. padding: 0;
  363. }
  364. .editor-styles-wrapper .wp-block-columns {
  365. margin-bottom: 0;
  366. }
  367. .editor-styles-wrapper cite {
  368. font-style: initial;
  369. }
  370. .editor-styles-wrapper .block-editor-block-variation-picker {
  371. margin-left: auto;
  372. margin-right: auto;
  373. }
  374. .wp-block-cover:not([class*='background-color']) .wp-block-cover__inner-container, .wp-block-cover:not([class*='background-color']) .wp-block-cover-image-text, .wp-block-cover:not([class*='background-color']) .wp-block-cover-text, .wp-block-cover:not([class*='background-color']) .block-editor-block-list__block, .wp-block-cover-image:not([class*='background-color']) .wp-block-cover__inner-container, .wp-block-cover-image:not([class*='background-color']) .wp-block-cover-image-text,
  375. .wp-block-cover-image:not([class*='background-color']) .wp-block-cover-text, .wp-block-cover-image:not([class*='background-color']) .block-editor-block-list__block {
  376. color: var(--ast-global-color-5);
  377. }
  378. .wp-block-file__content-wrapper {
  379. display: flex;
  380. align-items: center;
  381. flex-wrap: wrap;
  382. justify-content: space-between;
  383. }
  384. pre.wp-block {
  385. background: #eee;
  386. margin-bottom: 1.6em;
  387. overflow: auto;
  388. max-width: 100%;
  389. padding: 1.6em;
  390. font-size: 1em;
  391. line-height: 1.8;
  392. }
  393. pre.wp-block.wp-block-preformatted {
  394. font-family: "Courier 10 Pitch", Courier, monospace;
  395. }
  396. pre.wp-block.wp-block-code {
  397. font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
  398. }
  399. .wp-block-freeform.block-library-rich-text__tinymce blockquote {
  400. border-left: 5px solid rgba(0, 0, 0, 0.05);
  401. padding: 0 1.2em 1.2em;
  402. }
  403. .editor-styles-wrapper blockquote {
  404. padding: 0 1.2em 1.2em;
  405. margin: 1.5em;
  406. border: none;
  407. }
  408. .editor-styles-wrapper blockquote.has-text-align-left,
  409. .editor-styles-wrapper .has-text-align-left blockquote {
  410. border-left: 5px solid rgba(0, 0, 0, 0.05);
  411. }
  412. .editor-styles-wrapper blockquote.has-text-align-right,
  413. .editor-styles-wrapper .has-text-align-right blockquote {
  414. border-right: 5px solid rgba(0, 0, 0, 0.05);
  415. }
  416. .wp-block-pullquote blockquote:before {
  417. content: "\201D";
  418. font-family: "Helvetica",sans-serif;
  419. display: flex;
  420. transform: rotate(180deg);
  421. font-size: 6rem;
  422. font-style: normal;
  423. line-height: 1;
  424. font-weight: bold;
  425. align-items: center;
  426. justify-content: center;
  427. }
  428. .wp-block-pullquote.has-text-align-left blockquote:before {
  429. justify-content: flex-end;
  430. }
  431. .wp-block-pullquote.has-text-align-right blockquote:before {
  432. justify-content: flex-start;
  433. }
  434. .wp-block-media-text .wp-block-media-text__content {
  435. padding: 0 0 0 8%;
  436. }
  437. .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
  438. padding: 0 8% 0 0;
  439. }
  440. .wp-block-media-text.has-background .wp-block-media-text__content {
  441. padding: 8%;
  442. }
  443. @media (max-width: 600px) {
  444. .wp-block-media-text .wp-block-media-text__content {
  445. padding: 8% 0;
  446. }
  447. }
  448. .editor-styles-wrapper .wp-block-latest-posts > li > *:first-child,
  449. .editor-styles-wrapper .wp-block-latest-posts:not(.is-grid) > li:first-child {
  450. margin-top: 0;
  451. }
  452. .editor-styles-wrapper .wp-block-latest-posts > li > *,
  453. .editor-styles-wrapper .wp-block-latest-posts:not(.is-grid) > li {
  454. margin-top: 15px;
  455. margin-bottom: 15px;
  456. }
  457. .editor-styles-wrapper .wp-block-latest-posts > li > *:last-child,
  458. .editor-styles-wrapper .wp-block-latest-posts:not(.is-grid) > li:last-child {
  459. margin-bottom: 0;
  460. }
  461. .editor-styles-wrapper .wp-block-latest-posts .wp-block-latest-posts__post-author, .editor-styles-wrapper .wp-block-latest-posts .wp-block-latest-posts__post-date {
  462. font-size: 15px;
  463. }
  464. .editor-styles-wrapper .wp-block-latest-posts > li > a {
  465. font-size: 28px;
  466. }
  467. .wp-block-gallery.has-nested-images figure.wp-block-image img {
  468. width: 100%;
  469. }
  470. .wp-block-table td, .wp-block-table th {
  471. padding: 0.5em;
  472. border: 1px solid;
  473. word-break: normal;
  474. }
  475. .editor-styles-wrapper p {
  476. line-height: 1.85714285714286;
  477. }
  478. .wp-block-quote.is-style-large cite {
  479. text-align: left;
  480. }
  481. .components-color-palette__custom-color {
  482. text-align: left;
  483. padding-left: 5px;
  484. }
  485. /**
  486. * Woocommerce Gutenberg Blocks Product Grid CSS Compatibility.
  487. */
  488. .wc-block-grid .wc-block-grid__products .wc-block-grid__product {
  489. text-align: left;
  490. margin-bottom: 2.5em;
  491. }
  492. .wc-block-grid .wc-block-grid__products .wc-block-grid__product.product-category > a {
  493. display: inline-block;
  494. position: relative;
  495. }
  496. .wc-block-grid .wc-block-grid__products .wc-block-grid__product a img {
  497. width: 100%;
  498. height: auto;
  499. display: block;
  500. margin: 0 0 .8em 0;
  501. box-shadow: none;
  502. }
  503. .wc-block-grid .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-title {
  504. margin-bottom: .5em;
  505. padding: 0;
  506. font-size: 1em;
  507. line-height: 1.2;
  508. font-weight: inherit;
  509. }
  510. .wc-block-grid .wc-block-grid__products .wc-block-grid__product .star-rating {
  511. margin: 0 auto .5em 0;
  512. backface-visibility: hidden;
  513. }
  514. .wc-block-grid .wc-block-grid__products .wc-block-grid__product .woocommerce-loop-product__link {
  515. position: relative;
  516. display: block;
  517. }
  518. .wc-block-grid .wc-block-grid__products .wc-block-grid__product .woocommerce-loop-product__link:hover .ast-shop-product-out-of-stock {
  519. background-color: white;
  520. }
  521. .wc-block-grid .wc-block-grid__products .wc-block-grid__product.product-category > a:hover .woocommerce-loop-category__title {
  522. background-color: white;
  523. }
  524. .wc-block-grid .wc-block-grid__products .wc-block-grid__product .woocommerce-loop-category__title {
  525. bottom: 1.8em;
  526. font-size: 0.9em;
  527. }
  528. .wc-block-grid .wc-block-grid__products .wc-block-grid__product .woocommerce-loop-category__title .count {
  529. font-size: .7em;
  530. }
  531. .wc-block-grid .wc-block-grid__products .wc-block-grid__product .price {
  532. line-height: 1.3;
  533. font-weight: 700;
  534. margin-bottom: .5em;
  535. font-size: .9em;
  536. }
  537. .wc-block-grid .wc-block-grid__products .wc-block-grid__product .price del {
  538. display: initial;
  539. }
  540. .wc-block-grid .wc-block-grid__products .wc-block-grid__product .wp-block-button__link {
  541. margin-top: .5em;
  542. margin-bottom: .5em;
  543. white-space: normal;
  544. line-height: 1.3;
  545. font-size: 100%;
  546. font-weight: 700;
  547. }
  548. .wc-block-grid .wc-block-grid__products .wc-block-grid__product .wp-block-button__link.added {
  549. margin-bottom: 0;
  550. transition: margin 0s;
  551. }
  552. .wc-block-grid .wc-block-grid__products .wc-block-grid__product .woocommerce-loop-category__title {
  553. text-transform: uppercase;
  554. font-weight: bold;
  555. line-height: 1.5;
  556. }
  557. .wc-block-grid .wc-block-grid__products .wc-block-grid__product .woocommerce-loop-category__title .count {
  558. display: block;
  559. background: none;
  560. opacity: .5;
  561. font-size: .75em;
  562. }
  563. .wc-block-grid .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-onsale {
  564. min-width: 3em;
  565. min-height: 3em;
  566. line-height: 3em;
  567. padding: 0;
  568. font-size: 1em;
  569. font-weight: normal;
  570. text-transform: capitalize;
  571. position: absolute;
  572. text-align: center;
  573. border-radius: 100%;
  574. z-index: 9;
  575. top: 0;
  576. right: 15px;
  577. left: auto;
  578. margin: -0.5em -0.5em 0 0;
  579. }