😎 Give your xaringan slides some style
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

229 lines
5.4KB

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