😎 Give your xaringan slides some style
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

257 lines
6.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::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: #FEFDFD;
  44. --header-color: #F97B64;
  45. --background-color: #1F4257;
  46. --link-color: #F97B64;
  47. --text-bold-color: #F97B64;
  48. --code-highlight-color: rgba(255,255,0,0.5);
  49. --inverse-text-color: #1F4257;
  50. --inverse-background-color: #F97B64;
  51. --inverse-header-color: #1F4257;
  52. --inverse-link-color: #F97B64;
  53. --title-slide-background-color: #1F4257;
  54. --title-slide-text-color: #F97B64;
  55. --header-background-color: #F97B64;
  56. --header-background-text-color: #1F4257;
  57. --primary: #1F4257;
  58. --secondary: #F97B64;
  59. }
  60. html {
  61. font-size: var(--base-font-size);
  62. }
  63. body {
  64. font-family: var(--text-font-family), var(--text-font-family-fallback), var(--text-font-base);
  65. font-weight: normal;
  66. color: var(--text-color);
  67. }
  68. h1, h2, h3 {
  69. font-family: var(--header-font-family), var(--header-font-family-fallback);
  70. font-weight: 600;
  71. color: var(--header-color);
  72. }
  73. .remark-slide-content {
  74. background-color: var(--background-color);
  75. font-size: 1rem;
  76. padding: 16px 64px 16px 64px;
  77. width: 100%;
  78. height: 100%;
  79. }
  80. .remark-slide-content h1 {
  81. font-size: var(--header-h1-font-size);
  82. }
  83. .remark-slide-content h2 {
  84. font-size: var(--header-h2-font-size);
  85. }
  86. .remark-slide-content h3 {
  87. font-size: var(--header-h3-font-size);
  88. }
  89. .remark-code, .remark-inline-code {
  90. font-family: var(--code-font-family), Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
  91. }
  92. .remark-code {
  93. font-size: var(--code-font-size);
  94. }
  95. .remark-inline-code {
  96. font-size: var(--code-inline-font-size);
  97. color: #F97B64;
  98. }
  99. .remark-slide-number {
  100. color: #FEFDFD;
  101. opacity: 1;
  102. font-size: 0.9rem;
  103. }
  104. strong {
  105. font-weight: bold;
  106. color: var(--text-bold-color);
  107. }
  108. a, a > code {
  109. color: var(--link-color);
  110. text-decoration: none;
  111. }
  112. .footnote {
  113. position: absolute;
  114. bottom: 60px;
  115. padding-right: 4em;
  116. font-size: 0.9em;
  117. }
  118. .remark-code-line-highlighted {
  119. background-color: var(--code-highlight-color);
  120. }
  121. .inverse {
  122. background-color: var(--inverse-background-color);
  123. color: var(--inverse-text-color);
  124. }
  125. .inverse h1, .inverse h2, .inverse h3 {
  126. color: var(--inverse-header-color);
  127. }
  128. .inverse a, .inverse a > code {
  129. color: var(--inverse-link-color);
  130. }
  131. .title-slide, .title-slide h1, .title-slide h2, .title-slide h3 {
  132. color: var(--title-slide-text-color);
  133. }
  134. .title-slide {
  135. background-color: var(--title-slide-background-color);
  136. }
  137. .title-slide .remark-slide-number {
  138. display: none;
  139. }
  140. /* Two-column layout */
  141. .left-column {
  142. width: 20%;
  143. height: 92%;
  144. float: left;
  145. }
  146. .left-column h2, .left-column h3 {
  147. color: #F97B6499;
  148. }
  149. .left-column h2:last-of-type, .left-column h3:last-child {
  150. color: #F97B64;
  151. }
  152. .right-column {
  153. width: 75%;
  154. float: right;
  155. padding-top: 1em;
  156. }
  157. .pull-left {
  158. float: left;
  159. width: 47%;
  160. }
  161. .pull-right {
  162. float: right;
  163. width: 47%;
  164. }
  165. .pull-right + * {
  166. clear: both;
  167. }
  168. img, video, iframe {
  169. max-width: 100%;
  170. }
  171. blockquote {
  172. border-left: solid 5px #F97B6480;
  173. padding-left: 1em;
  174. }
  175. .remark-slide table {
  176. margin: auto;
  177. border-top: 1px solid #666;
  178. border-bottom: 1px solid #666;
  179. }
  180. .remark-slide table thead th {
  181. border-bottom: 1px solid #ddd;
  182. }
  183. th, td {
  184. padding: 5px;
  185. }
  186. .remark-slide thead, .remark-slide tfoot, .remark-slide tr:nth-child(even) {
  187. background: #E8ECEE;
  188. }
  189. table.dataTable tbody {
  190. background-color: var(--background-color);
  191. color: var(--text-color);
  192. }
  193. table.dataTable.display tbody tr.odd {
  194. background-color: var(--background-color);
  195. }
  196. table.dataTable.display tbody tr.even {
  197. background-color: #E8ECEE;
  198. }
  199. table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
  200. background-color: rgba(255, 255, 255, 0.5);
  201. }
  202. .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
  203. color: var(--text-color);
  204. }
  205. .dataTables_wrapper .dataTables_paginate .paginate_button {
  206. color: var(--text-color) !important;
  207. }
  208. /* Slide Header Background for h1 elements */
  209. .remark-slide-content.header_background > h1,
  210. .remark-slide-content:not(.normal):not(.inverse):not(.title):not(.middle):not(.bottom) > 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. .remark-slide-content:not(.normal):not(.inverse):not(.title):not(.middle):not(.bottom) {
  224. padding-top: 7rem;
  225. }
  226. @page { margin: 0; }
  227. @media print {
  228. .remark-slide-scaler {
  229. width: 100% !important;
  230. height: 100% !important;
  231. transform: scale(1) !important;
  232. top: 0 !important;
  233. left: 0 !important;
  234. }
  235. }
  236. .primary {
  237. color: var(--primary);
  238. }
  239. .bg-primary {
  240. background-color: var(--primary);
  241. }
  242. .secondary {
  243. color: var(--secondary);
  244. }
  245. .bg-secondary {
  246. background-color: var(--secondary);
  247. }