😎 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.

228 lines
5.5KB

  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::write_xaringan_theme
  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);
  22. @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
  23. @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700);
  24. :root {
  25. /* Fonts */
  26. --text-font-family: 'Noto Serif';
  27. --text-font-is-google: 1;
  28. --text-font-family-fallback: 'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC';
  29. --text-font-base: serif;
  30. --header-font-family: 'Yanone Kaffeesatz';
  31. --header-font-is-google: 0;
  32. --code-font-family: 'Source Code Pro';
  33. --code-font-is-google: 0;
  34. --text-font-size: 20px;
  35. --code-font-size: 0.9em;
  36. --code-inline-font-size: 1em;
  37. --header-h1-font-size: 55px;
  38. --header-h2-font-size: 45px;
  39. --header-h3-font-size: 35px;
  40. /* Colors */
  41. --text-color: #F4FDFB;
  42. --header-color: #cbf7ed;
  43. --background-color: #1E2523;
  44. --link-color: #cbf7ed;
  45. --text-bold-color: #cbf7ed;
  46. --code-highlight-color: rgba(255,255,0,0.5);
  47. --inverse-text-color: #1E2523;
  48. --inverse-background-color: #cbf7ed;
  49. --inverse-header-color: #1E2523;
  50. --title-slide-background-color: #cbf7ed;
  51. --title-slide-text-color: #1E2523;
  52. }
  53. html {
  54. font-size: var(--text-font-size);
  55. }
  56. body {
  57. font-family: var(--text-font-family), var(--text-font-family-fallback), var(--text-font-base);
  58. font-weight: ;
  59. color: var(--text-color);
  60. }
  61. h1, h2, h3 {
  62. font-family: var(--header-font-family);
  63. font-weight: normal;
  64. color: var(--header-color);
  65. }
  66. .remark-slide-content {
  67. background-color: var(--background-color);
  68. font-size: var(--text-font-size);
  69. padding: 1rem 4rem 1rem 4rem;
  70. }
  71. .remark-slide-content h1 {
  72. font-size: var(--header-h1-font-size);
  73. }
  74. .remark-slide-content h2 {
  75. font-size: var(--header-h2-font-size);
  76. }
  77. .remark-slide-content h3 {
  78. font-size: var(--header-h3-font-size);
  79. }
  80. .remark-code, .remark-inline-code {
  81. font-family: var(--code-font-family), 'Lucida Console', Monaco, monospace;
  82. }
  83. .remark-code {
  84. font-size: var(--code-font-size);
  85. }
  86. .remark-inline-code {
  87. font-size: var(--code-inline-font-size);
  88. color: #cbf7ed;
  89. }
  90. .remark-slide-number {
  91. color: #cbf7ed;
  92. opacity: 1;
  93. font-size: 0.9em;
  94. }
  95. strong { color: var(--text-bold-color); }
  96. a, a > code {
  97. color: var(--link-color);
  98. text-decoration: none;
  99. }
  100. .footnote {
  101. position: absolute;
  102. bottom: 3em;
  103. padding-right: 4em;
  104. font-size: 0.9em;
  105. }
  106. .remark-code-line-highlighted {
  107. background-color: var(--code-highlight-color);
  108. }
  109. .inverse {
  110. background-color: var(--inverse-background-color);
  111. color: var(--inverse-text-color);
  112. }
  113. .inverse h1, .inverse h2, .inverse h3 {
  114. color: var(--inverse-header-color);
  115. }
  116. .title-slide, .title-slide h1, .title-slide h2, .title-slide h3 {
  117. color: var(--title-slide-text-color);
  118. }
  119. .title-slide {
  120. background-color: var(--title-slide-background-color);
  121. }
  122. .title-slide .remark-slide-number {
  123. display: none;
  124. }
  125. /* Two-column layout */
  126. .left-column {
  127. width: 20%;
  128. height: 92%;
  129. float: left;
  130. }
  131. .left-column h2, .left-column h3 {
  132. color: #cbf7ed99;
  133. }
  134. .left-column h2:last-of-type, .left-column h3:last-child {
  135. color: #cbf7ed;
  136. }
  137. .right-column {
  138. width: 75%;
  139. float: right;
  140. padding-top: 1em;
  141. }
  142. .pull-left {
  143. float: left;
  144. width: 47%;
  145. }
  146. .pull-right {
  147. float: right;
  148. width: 47%;
  149. }
  150. .pull-right ~ * {
  151. clear: both;
  152. }
  153. img, video, iframe {
  154. max-width: 100%;
  155. }
  156. blockquote {
  157. border-left: solid 5px #cbf7ed80;
  158. padding-left: 1em;
  159. }
  160. .remark-slide table {
  161. margin: auto;
  162. border-top: 1px solid #666;
  163. border-bottom: 1px solid #666;
  164. }
  165. .remark-slide table thead th {
  166. border-bottom: 1px solid #ddd;
  167. }
  168. th, td {
  169. padding: 5px;
  170. }
  171. .remark-slide thead, .remark-slide tfoot, .remark-slide tr:nth-child(even) {
  172. background: #3C4A47;
  173. }
  174. table.dataTable tbody {
  175. background-color: var(--background-color);
  176. color: var(--text-color);
  177. }
  178. table.dataTable.display tbody tr.odd {
  179. background-color: var(--background-color);
  180. }
  181. table.dataTable.display tbody tr.even {
  182. background-color: #3C4A47;
  183. }
  184. table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
  185. background-color: rgba(255, 255, 255, 0.5);
  186. }
  187. .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
  188. color: var(--text-color);
  189. }
  190. .dataTables_wrapper .dataTables_paginate .paginate_button {
  191. color: var(--text-color) !important;
  192. }
  193. /* Slide Header Background for h1 elements */
  194. .remark-slide-content.header_background > h1 {
  195. display: block;
  196. position: absolute;
  197. top: 0;
  198. left: 0;
  199. width: 100%;
  200. background: var(--background-color);
  201. color: var(--text-color);
  202. padding: 2rem 4rem 1.5rem 4rem;
  203. margin-top: 0;
  204. box-sizing: border-box;
  205. }
  206. .remark-slide-content.header_background {
  207. padding-top: 7rem;
  208. }
  209. @page { margin: 0; }
  210. @media print {
  211. .remark-slide-scaler {
  212. width: 100% !important;
  213. height: 100% !important;
  214. transform: scale(1) !important;
  215. top: 0 !important;
  216. left: 0 !important;
  217. }
  218. }