blocks.css 9.5 KB

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