blocks.css 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498
  1. /*
  2. Theme Name: Rebalance
  3. Description: Used to style Gutenberg Blocks.
  4. */
  5. /*--------------------------------------------------------------
  6. >>> TABLE OF CONTENTS:
  7. ----------------------------------------------------------------
  8. 1.0 General Block Styles
  9. 2.0 Blocks - Common Blocks
  10. 3.0 Blocks - Formatting
  11. 4.0 Blocks - Layout Elements
  12. 5.0 Blocks - Widgets
  13. 6.0 Blocks - Colors
  14. --------------------------------------------------------------*/
  15. /*--------------------------------------------------------------
  16. 1.0 General Block Styles
  17. --------------------------------------------------------------*/
  18. /* Captions */
  19. [class^="wp-block-"] figcaption {
  20. color: inherit;
  21. font-size: 14px;
  22. line-height: 1.525em;
  23. text-align: center;
  24. }
  25. /*--------------------------------------------------------------
  26. 2.0 Blocks - Common Blocks
  27. --------------------------------------------------------------*/
  28. /* Paragraph */
  29. p.has-drop-cap:not(:focus)::first-letter {
  30. font-size: 80px;
  31. margin-top: 0.1em;
  32. }
  33. /* Images */
  34. .wp-block-cover,
  35. .wp-block-cover.alignleft,
  36. .wp-block-cover.alignright,
  37. .wp-block-cover.aligncenter {
  38. display: flex;
  39. }
  40. /* Gallery */
  41. .wp-block-gallery {
  42. margin-bottom: 1.5em;
  43. margin-left: auto;
  44. margin-right: auto;
  45. max-width: 100%;
  46. }
  47. .rtl .wp-block-gallery {
  48. margin-right: auto;
  49. margin-left: auto;
  50. }
  51. /* Quote */
  52. .wp-block-quote,
  53. .rtl .wp-block-quote[style*="text-align:left"] {
  54. border-left: 6px solid #f35029;
  55. border-right: 0;
  56. font-family: "Libre Baskerville", Georgia, serif;
  57. font-style: italic;
  58. font-size: 18px;
  59. line-height: 1.825em;
  60. margin: 0 0 1.5em -40px;
  61. padding-left: 40px;
  62. padding-right: 0;
  63. }
  64. .rtl .wp-block-quote,
  65. .wp-block-quote[style*="text-align:right"] {
  66. border-left: 0;
  67. border-right: 6px solid #f35029;
  68. margin: 0 -40px 1.5em 0;
  69. padding-left: 0;
  70. padding-right: 40px;
  71. }
  72. .wp-block-quote[style*="text-align:center"] {
  73. border: 0;
  74. margin-left: 0;
  75. margin-right: 0;
  76. padding-left: 0;
  77. padding-right: 0;
  78. }
  79. .wp-block-quote cite {
  80. font-family: "Libre Baskerville", Georgia, serif;
  81. font-style: italic;
  82. }
  83. .wp-block-quote.is-large cite,
  84. .wp-block-quote.is-large footer,
  85. .wp-block-quote.is-style-large cite,
  86. .wp-block-quote.is-style-large footer {
  87. text-align: left;
  88. font-size: 24px;
  89. }
  90. .wp-block-quote.is-large,
  91. .wp-block-quote.is-style-large,
  92. .wp-block-quote.is-large p,
  93. .wp-block-quote.is-style-large p {
  94. font-size: 24px;
  95. }
  96. .wp-block-quote.is-large p,
  97. .wp-block-quote.is-style-large p {
  98. margin-bottom: 1.5em;
  99. }
  100. /* Audio */
  101. .wp-block-audio {
  102. margin-left: 0;
  103. margin-right: 0;
  104. }
  105. .wp-block-audio audio {
  106. display: block;
  107. width: 100%;
  108. }
  109. /* File */
  110. .wp-block-file {
  111. margin: 1.5em 0;
  112. }
  113. .wp-block-file a.wp-block-file__button,
  114. .wp-block-file a.wp-block-file__button:visited {
  115. background: #fff;
  116. border: 2px solid currentColor;
  117. border-radius: 0;
  118. color: #f35029;
  119. font-family: "Rubik", "Helvetica Neue", sans-serif;
  120. font-weight: 500;
  121. line-height: 1;
  122. padding: 15px 20px;
  123. text-decoration: none;
  124. -webkit-appearance: none;
  125. }
  126. .wp-block-file a.wp-block-file__button:hover,
  127. .wp-block-file a.wp-block-file__button:focus,
  128. .wp-block-file a.wp-block-file__button:active {
  129. background: #000;
  130. color: #fff;
  131. }
  132. .rtl .wp-block-file a.wp-block-file__button {
  133. margin-left: .75em;
  134. margin-right: 0;
  135. }
  136. /*--------------------------------------------------------------
  137. 3.0 Blocks - Formatting Blocks
  138. --------------------------------------------------------------*/
  139. /* Verse */
  140. .wp-block-verse {
  141. background: transparent;
  142. color: inherit;
  143. font-family: inherit;
  144. font-size: inherit;
  145. font-style: italic;
  146. line-height: inherit;
  147. margin-bottom: 1.5em;
  148. max-width: 100%;
  149. overflow: auto;
  150. padding: 0;
  151. }
  152. /* Code */
  153. .wp-block-code {
  154. background: #ccc;
  155. color: #fff;
  156. font-family: "Courier 10 Pitch", Courier, monospace;
  157. font-size: 15px;
  158. line-height: 1.6;
  159. margin-bottom: 1.6em;
  160. max-width: 100%;
  161. overflow: auto;
  162. padding: 1.6em;
  163. }
  164. /* Pullquote */
  165. .wp-block-pullquote {
  166. margin: 0;
  167. padding: 0;
  168. border: 0;
  169. }
  170. .entry-content .wp-block-pullquote blockquote {
  171. border-left: 0;
  172. border-bottom: 4px solid #f35029;
  173. border-top: 4px solid #f35029;
  174. font-size: 28px;
  175. line-height: 1.6;
  176. margin: 0 0 1.5em;
  177. padding: 1.5em;
  178. }
  179. .rtl .wp-block-pullquote blockquote {
  180. border-right: 0;
  181. }
  182. .wp-block-pullquote cite {
  183. color: inherit;
  184. font-size: 18px;
  185. }
  186. .wp-block-pullquote.alignleft,
  187. .wp-block-pullquote.alignright {
  188. }
  189. .wp-block-pullquote.alignleft blockquote,
  190. .wp-block-pullquote.alignright blockquote {
  191. padding: 1.5em 0;
  192. margin: 0 0 .75em;
  193. }
  194. .wp-block-pullquote.alignleft p,
  195. .wp-block-pullquote.alignright p {
  196. font-size: 18px;
  197. }
  198. .wp-block-pullquote.alignleft {
  199. margin-right: 1.5em;
  200. }
  201. .wp-block-pullquote.alignright {
  202. margin-left: 1.5em;
  203. }
  204. .wp-block-pullquote.alignfull blockquote {
  205. padding-left: 1.5em;
  206. padding-right: 1.5em;
  207. }
  208. .wp-block-pullquote p {
  209. margin: 0 0 .75em;
  210. }
  211. /*--------------------------------------------------------------
  212. 4.0 Blocks - Layout Elements
  213. --------------------------------------------------------------*/
  214. /* Buttons */
  215. .wp-block-button .wp-block-button__link {
  216. font-family: "Rubik", "Helvetica Neue", sans-serif;
  217. font-weight: 500;
  218. line-height: 1;
  219. padding: 15px 20px;
  220. text-decoration: none;
  221. }
  222. .wp-block-button .wp-block-button__link:active,
  223. .wp-block-button .wp-block-button__link:hover,
  224. .wp-block-button .wp-block-button__link:focus {
  225. text-decoration: none;
  226. }
  227. .entry-content .wp-block-button__link {
  228. background: #f35029;
  229. color: #fff;
  230. }
  231. .entry-content .is-style-outline .wp-block-button__link {
  232. background: transparent;
  233. }
  234. .entry-content .is-style-outline .wp-block-button__link:not(.has-text-color) {
  235. color: #f35029;
  236. }
  237. a.wp-block-button__link:active,
  238. a.wp-block-button__link:focus,
  239. a.wp-block-button__link:hover {
  240. background: #000;
  241. color: #fff;
  242. }
  243. .wp-block-button.alignleft {
  244. margin-left: 0;
  245. }
  246. .wp-block-button.alignright {
  247. margin-right: 0;
  248. }
  249. .wp-block-button.aligncenter {
  250. margin: 1.5em auto;
  251. }
  252. /* Seperator */
  253. hr.wp-block-separator {
  254. border: 0;
  255. }
  256. .wp-block-separator {
  257. background-color: #ccc;
  258. border: 0;
  259. height: 1px;
  260. margin-bottom: 1.5em;
  261. max-width: 100px;
  262. }
  263. .wp-block-separator.is-style-wide {
  264. max-width: 100%;
  265. }
  266. /*--------------------------------------------------------------
  267. 5.0 Blocks - Widget Blocks
  268. --------------------------------------------------------------*/
  269. /* General Widget styles */
  270. .wp-block-categories.aligncenter,
  271. .wp-block-categories.aligncenter ul,
  272. .wp-block-archives.aligncenter,
  273. .wp-block-latest-posts.aligncenter,
  274. .wp-block-latest-comments.aligncenter {
  275. list-style-position: inside;
  276. text-align: center;
  277. }
  278. /* Latest Comments */
  279. .wp-block-latest-comments {
  280. margin-left: 0;
  281. margin-right: 0;
  282. }
  283. .wp-block-latest-comments__comment-meta a {
  284. font-weight: 700;
  285. text-decoration: none;
  286. }
  287. .wp-block-latest-comments .wp-block-latest-comments__comment {
  288. border-top: 1px solid #ccc;
  289. margin-bottom: 0;
  290. padding: 1.75em 0 0;
  291. }
  292. .wp-block-latest-comments .avatar,
  293. .wp-block-latest-comments__comment-avatar {
  294. margin: 0;
  295. }
  296. .wp-block-latest-comments__comment-date {
  297. font-size: 14px;
  298. }
  299. .wp-block-latest-comments__comment-meta,
  300. .wp-block-latest-comments__comment-excerpt p {
  301. font-size: inherit;
  302. }
  303. /* Latest Posts */
  304. .wp-block-latest-posts.is-grid,
  305. .rtl .wp-block-latest-posts.is-grid {
  306. margin-left: 0;
  307. margin-right: 0;
  308. }
  309. /*--------------------------------------------------------------
  310. 6.0 Blocks - Colors
  311. --------------------------------------------------------------*/
  312. .has-medium-gray-color,
  313. .has-medium-gray-color:hover,
  314. .has-medium-gray-color:focus,
  315. .has-medium-gray-color:active,
  316. .has-medium-gray-color:visited {
  317. color: #999;
  318. }
  319. .has-medium-gray-background-color,
  320. .has-medium-gray-background-color:hover,
  321. .has-medium-gray-background-color:focus,
  322. .has-medium-gray-background-color:active,
  323. .has-medium-gray-background-color:visited {
  324. background-color: #999;
  325. }
  326. .has-light-gray-color,
  327. .has-light-gray-color:hover,
  328. .has-light-gray-color:focus,
  329. .has-light-gray-color:active,
  330. .has-light-gray-color:visited {
  331. color: #ccc;
  332. }
  333. .has-light-gray-background-color,
  334. .has-light-gray-background-color:hover,
  335. .has-light-gray-background-color:focus,
  336. .has-light-gray-background-color:active,
  337. .has-light-gray-background-color:visited {
  338. background-color: #ccc;
  339. }
  340. .has-white-color,
  341. .has-white-color:hover,
  342. .has-white-color:focus,
  343. .has-white-color:active,
  344. .has-white-color:visited {
  345. color: #fff;
  346. }
  347. .has-white-background-color,
  348. .has-white-background-color:hover,
  349. .has-white-background-color:focus,
  350. .has-white-background-color:active,
  351. .has-white-background-color:visited {
  352. background-color: #fff;
  353. }
  354. .has-red-color,
  355. .has-red-color:hover,
  356. .has-red-color:focus,
  357. .has-red-color:active,
  358. .has-red-color:visited {
  359. color: #f35029;
  360. }
  361. .has-red-background-color,
  362. .has-red-background-color:hover,
  363. .has-red-background-color:focus,
  364. .has-red-background-color:active,
  365. .has-red-background-color:visited {
  366. background-color: #f35029;
  367. }
  368. .has-dark-red-color,
  369. .has-dark-red-color:hover,
  370. .has-dark-red-color:focus,
  371. .has-dark-red-color:active,
  372. .has-dark-red-color:visited {
  373. color: #aa2e11;
  374. }
  375. .has-dark-red-background-color,
  376. .has-dark-red-background-color:hover,
  377. .has-dark-red-background-color:focus,
  378. .has-dark-red-background-color:active,
  379. .has-dark-red-background-color:visited {
  380. background-color: #aa2e11;
  381. }
  382. .has-dark-gray-color,
  383. .has-dark-gray-color:hover,
  384. .has-dark-gray-color:focus,
  385. .has-dark-gray-color:active,
  386. .has-dark-gray-color:visited {
  387. color: #666;
  388. }
  389. .has-dark-gray-background-color,
  390. .has-dark-gray-background-color:hover,
  391. .has-dark-gray-background-color:focus,
  392. .has-dark-gray-background-color:active,
  393. .has-dark-gray-background-color:visited {
  394. background-color: #666;
  395. }
  396. .has-black-color,
  397. .has-black-color:hover,
  398. .has-black-color:focus,
  399. .has-black-color:active,
  400. .has-black-color:visited {
  401. color: #000;
  402. }
  403. .has-black-background-color,
  404. .has-black-background-color:hover,
  405. .has-black-background-color:focus,
  406. .has-black-background-color:active,
  407. .has-black-background-color:visited {
  408. background-color: #000;
  409. }