😎 Give your xaringan slides some style
No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.

227 líneas
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: #839496;
  42. --header-color: #dc322f;
  43. --background-color: #002b36;
  44. --link-color: #b58900;
  45. --text-bold-color: #d33682;
  46. --code-highlight-color: #268bd240;
  47. --inverse-text-color: #002b36;
  48. --inverse-background-color: #fdf6e3;
  49. --inverse-header-color: #002b36;
  50. --title-slide-background-color: #fdf6e3;
  51. --title-slide-text-color: #002b36;
  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. padding: 1rem 4rem 1rem 4rem;
  69. }
  70. .remark-slide-content h1 {
  71. font-size: var(--header-h1-font-size);
  72. }
  73. .remark-slide-content h2 {
  74. font-size: var(--header-h2-font-size);
  75. }
  76. .remark-slide-content h3 {
  77. font-size: var(--header-h3-font-size);
  78. }
  79. .remark-code, .remark-inline-code {
  80. font-family: var(--code-font-family), 'Lucida Console', Monaco, monospace;
  81. }
  82. .remark-code {
  83. font-size: var(--code-font-size);
  84. }
  85. .remark-inline-code {
  86. font-size: var(--code-inline-font-size);
  87. color: #6c71c4;
  88. }
  89. .remark-slide-number {
  90. color: #586e75;
  91. opacity: 1;
  92. font-size: 0.9em;
  93. }
  94. strong { color: var(--text-bold-color); }
  95. a, a > code {
  96. color: var(--link-color);
  97. text-decoration: none;
  98. }
  99. .footnote {
  100. position: absolute;
  101. bottom: 3em;
  102. padding-right: 4em;
  103. font-size: 0.9em;
  104. }
  105. .remark-code-line-highlighted {
  106. background-color: var(--code-highlight-color);
  107. }
  108. .inverse {
  109. background-color: var(--inverse-background-color);
  110. color: var(--inverse-text-color);
  111. }
  112. .inverse h1, .inverse h2, .inverse h3 {
  113. color: var(--inverse-header-color);
  114. }
  115. .title-slide, .title-slide h1, .title-slide h2, .title-slide h3 {
  116. color: var(--title-slide-text-color);
  117. }
  118. .title-slide {
  119. background-color: var(--title-slide-background-color);
  120. }
  121. .title-slide .remark-slide-number {
  122. display: none;
  123. }
  124. /* Two-column layout */
  125. .left-column {
  126. width: 20%;
  127. height: 92%;
  128. float: left;
  129. }
  130. .left-column h2, .left-column h3 {
  131. color: #586e75;
  132. }
  133. .left-column h2:last-of-type, .left-column h3:last-child {
  134. color: #93a1a1;
  135. }
  136. .right-column {
  137. width: 75%;
  138. float: right;
  139. padding-top: 1em;
  140. }
  141. .pull-left {
  142. float: left;
  143. width: 47%;
  144. }
  145. .pull-right {
  146. float: right;
  147. width: 47%;
  148. }
  149. .pull-right ~ * {
  150. clear: both;
  151. }
  152. img, video, iframe {
  153. max-width: 100%;
  154. }
  155. blockquote {
  156. border-left: solid 5px #cb4b16;
  157. padding-left: 1em;
  158. }
  159. .remark-slide table {
  160. margin: auto;
  161. border-top: 1px solid #657b83;
  162. border-bottom: 1px solid #657b83;
  163. }
  164. .remark-slide table thead th {
  165. border-bottom: 1px solid #657b83;
  166. }
  167. th, td {
  168. padding: 5px;
  169. }
  170. .remark-slide thead, .remark-slide tfoot, .remark-slide tr:nth-child(even) {
  171. background: #073642;
  172. }
  173. table.dataTable tbody {
  174. background-color: var(--background-color);
  175. color: var(--text-color);
  176. }
  177. table.dataTable.display tbody tr.odd {
  178. background-color: var(--background-color);
  179. }
  180. table.dataTable.display tbody tr.even {
  181. background-color: #073642;
  182. }
  183. table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
  184. background-color: rgba(255, 255, 255, 0.5);
  185. }
  186. .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
  187. color: var(--text-color);
  188. }
  189. .dataTables_wrapper .dataTables_paginate .paginate_button {
  190. color: var(--text-color) !important;
  191. }
  192. /* Slide Header Background for h1 elements */
  193. .remark-slide-content.header_background > h1 {
  194. display: block;
  195. position: absolute;
  196. top: 0;
  197. left: 0;
  198. width: 100%;
  199. background: var(--background-color);
  200. color: var(--text-color);
  201. padding: 2rem 4rem 1.5rem 4rem;
  202. margin-top: 0;
  203. box-sizing: border-box;
  204. }
  205. .remark-slide-content.header_background {
  206. padding-top: 7rem;
  207. }
  208. @page { margin: 0; }
  209. @media print {
  210. .remark-slide-scaler {
  211. width: 100% !important;
  212. height: 100% !important;
  213. transform: scale(1) !important;
  214. top: 0 !important;
  215. left: 0 !important;
  216. }
  217. }