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

254 lines
6.1KB

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