😎 Give your xaringan slides some style
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

262 lines
6.3KB

  1. /* -------------------------------------------------------
  2. *
  3. * !! This file was generated by xaringanthemer !!
  4. *
  5. * Changes made to this file directly will be overwritten
  6. * if you used xaringanthemer in your xaringan slides Rmd
  7. *
  8. * Issues or likes?
  9. * - https://github.com/gadenbuie/xaringanthemer
  10. * - https://www.garrickadenbuie.com
  11. *
  12. * Need help? Try:
  13. * - vignette(package = "xaringanthemer")
  14. * - ?xaringanthemer::style_xaringan
  15. * - xaringan wiki: https://github.com/yihui/xaringan/wiki
  16. * - remarkjs wiki: https://github.com/gnab/remark/wiki
  17. *
  18. * Version: a.b.c.d.eeee
  19. *
  20. * ------------------------------------------------------- */
  21. @import url(https://fonts.googleapis.com/css?family=Noto+Serif&display=swap);
  22. @import url(https://fonts.googleapis.com/css?family=Cabin:600,600i&display=swap);
  23. @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700&display=swap);
  24. :root {
  25. /* Fonts */
  26. --text-font-family: 'Noto Serif';
  27. --text-font-is-google: 1;
  28. --text-font-family-fallback: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial;
  29. --text-font-base: sans-serif;
  30. --header-font-family: Cabin;
  31. --header-font-is-google: 1;
  32. --header-font-family-fallback: Georgia, serif;
  33. --code-font-family: 'Source Code Pro';
  34. --code-font-is-google: 1;
  35. --base-font-size: 20px;
  36. --text-font-size: 1rem;
  37. --code-font-size: 0.9rem;
  38. --code-inline-font-size: 1em;
  39. --header-h1-font-size: 2.75rem;
  40. --header-h2-font-size: 2.25rem;
  41. --header-h3-font-size: 1.75rem;
  42. /* Colors */
  43. --text-color: #272822;
  44. --header-color: #43418A;
  45. --background-color: #FFFFFF;
  46. --link-color: #43418A;
  47. --text-bold-color: #43418A;
  48. --code-highlight-color: rgba(255,255,0,0.5);
  49. --inverse-text-color: #FFFFFF;
  50. --inverse-background-color: #43418A;
  51. --inverse-header-color: #FFFFFF;
  52. --inverse-link-color: #43418A;
  53. --title-slide-background-color: #43418A;
  54. --title-slide-text-color: #FFFFFF;
  55. --header-background-color: #43418A;
  56. --header-background-text-color: #FFFFFF;
  57. --base: #43418A;
  58. --white: #FFFFFF;
  59. --black: #272822;
  60. }
  61. html {
  62. font-size: var(--base-font-size);
  63. }
  64. body {
  65. font-family: var(--text-font-family), var(--text-font-family-fallback), var(--text-font-base);
  66. font-weight: normal;
  67. color: var(--text-color);
  68. }
  69. h1, h2, h3 {
  70. font-family: var(--header-font-family), var(--header-font-family-fallback);
  71. font-weight: 600;
  72. color: var(--header-color);
  73. }
  74. .remark-slide-content {
  75. background-color: var(--background-color);
  76. font-size: 1rem;
  77. padding: 16px 64px 16px 64px;
  78. width: 100%;
  79. height: 100%;
  80. }
  81. .remark-slide-content h1 {
  82. font-size: var(--header-h1-font-size);
  83. }
  84. .remark-slide-content h2 {
  85. font-size: var(--header-h2-font-size);
  86. }
  87. .remark-slide-content h3 {
  88. font-size: var(--header-h3-font-size);
  89. }
  90. .remark-code, .remark-inline-code {
  91. font-family: var(--code-font-family), Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
  92. }
  93. .remark-code {
  94. font-size: var(--code-font-size);
  95. }
  96. .remark-inline-code {
  97. font-size: var(--code-inline-font-size);
  98. color: #43418A;
  99. }
  100. .remark-slide-number {
  101. color: #43418A;
  102. opacity: 1;
  103. font-size: 0.9em;
  104. }
  105. strong {
  106. font-weight: bold;
  107. color: var(--text-bold-color);
  108. }
  109. a, a > code {
  110. color: var(--link-color);
  111. text-decoration: none;
  112. }
  113. .footnote {
  114. position: absolute;
  115. bottom: 60px;
  116. padding-right: 4em;
  117. font-size: 0.9em;
  118. }
  119. .remark-code-line-highlighted {
  120. background-color: var(--code-highlight-color);
  121. }
  122. .inverse {
  123. background-color: var(--inverse-background-color);
  124. color: var(--inverse-text-color);
  125. }
  126. .inverse h1, .inverse h2, .inverse h3 {
  127. color: var(--inverse-header-color);
  128. }
  129. .inverse a, .inverse a > code {
  130. color: var(--inverse-link-color);
  131. }
  132. .title-slide, .title-slide h1, .title-slide h2, .title-slide h3 {
  133. color: var(--title-slide-text-color);
  134. }
  135. .title-slide {
  136. background-color: var(--title-slide-background-color);
  137. }
  138. .title-slide .remark-slide-number {
  139. display: none;
  140. }
  141. /* Two-column layout */
  142. .left-column {
  143. width: 20%;
  144. height: 92%;
  145. float: left;
  146. }
  147. .left-column h2, .left-column h3 {
  148. color: #43418A99;
  149. }
  150. .left-column h2:last-of-type, .left-column h3:last-child {
  151. color: #43418A;
  152. }
  153. .right-column {
  154. width: 75%;
  155. float: right;
  156. padding-top: 1em;
  157. }
  158. .pull-left {
  159. float: left;
  160. width: 47%;
  161. }
  162. .pull-right {
  163. float: right;
  164. width: 47%;
  165. }
  166. .pull-right + * {
  167. clear: both;
  168. }
  169. img, video, iframe {
  170. max-width: 100%;
  171. }
  172. blockquote {
  173. border-left: solid 5px #43418A80;
  174. padding-left: 1em;
  175. }
  176. .remark-slide table {
  177. margin: auto;
  178. border-top: 1px solid #666;
  179. border-bottom: 1px solid #666;
  180. }
  181. .remark-slide table thead th {
  182. border-bottom: 1px solid #ddd;
  183. }
  184. th, td {
  185. padding: 5px;
  186. }
  187. .remark-slide thead, .remark-slide tfoot, .remark-slide tr:nth-child(even) {
  188. background: #D9D9E7;
  189. }
  190. table.dataTable tbody {
  191. background-color: var(--background-color);
  192. color: var(--text-color);
  193. }
  194. table.dataTable.display tbody tr.odd {
  195. background-color: var(--background-color);
  196. }
  197. table.dataTable.display tbody tr.even {
  198. background-color: #D9D9E7;
  199. }
  200. table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
  201. background-color: rgba(255, 255, 255, 0.5);
  202. }
  203. .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
  204. color: var(--text-color);
  205. }
  206. .dataTables_wrapper .dataTables_paginate .paginate_button {
  207. color: var(--text-color) !important;
  208. }
  209. /* Slide Header Background for h1 elements */
  210. .remark-slide-content.header_background > h1 {
  211. display: block;
  212. position: absolute;
  213. top: 0;
  214. left: 0;
  215. width: 100%;
  216. background: var(--header-background-color);
  217. color: var(--header-background-text-color);
  218. padding: 2rem 64px 1.5rem 64px;
  219. margin-top: 0;
  220. box-sizing: border-box;
  221. }
  222. .remark-slide-content.header_background {
  223. padding-top: 7rem;
  224. }
  225. @page { margin: 0; }
  226. @media print {
  227. .remark-slide-scaler {
  228. width: 100% !important;
  229. height: 100% !important;
  230. transform: scale(1) !important;
  231. top: 0 !important;
  232. left: 0 !important;
  233. }
  234. }
  235. .base {
  236. color: var(--base);
  237. }
  238. .bg-base {
  239. background-color: var(--base);
  240. }
  241. .white {
  242. color: var(--white);
  243. }
  244. .bg-white {
  245. background-color: var(--white);
  246. }
  247. .black {
  248. color: var(--black);
  249. }
  250. .bg-black {
  251. background-color: var(--black);
  252. }