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

301 lines
7.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. --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: #FFFFFF;
  44. --header-color: #035AA6;
  45. --background-color: #000000;
  46. --link-color: #03A696;
  47. --text-bold-color: #03A696;
  48. --code-highlight-color: rgba(255,255,0,0.5);
  49. --inverse-text-color: #000000;
  50. --inverse-background-color: #03A696;
  51. --inverse-header-color: #000000;
  52. --inverse-link-color: #03A696;
  53. --title-slide-background-color: #035AA6;
  54. --title-slide-text-color: #FFFFFF;
  55. --header-background-color: #035AA6;
  56. --header-background-text-color: #000000;
  57. --primary: #035AA6;
  58. --secondary: #03A696;
  59. --white: #FFFFFF;
  60. --black: #000000;
  61. }
  62. html {
  63. font-size: var(--base-font-size);
  64. }
  65. body {
  66. font-family: var(--text-font-family), var(--text-font-family-fallback), var(--text-font-base);
  67. font-weight: normal;
  68. color: var(--text-color);
  69. }
  70. h1, h2, h3 {
  71. font-family: var(--header-font-family), var(--header-font-family-fallback);
  72. font-weight: 600;
  73. color: var(--header-color);
  74. }
  75. .remark-slide-content {
  76. background-color: var(--background-color);
  77. font-size: 1rem;
  78. padding: 16px 64px 16px 64px;
  79. width: 100%;
  80. height: 100%;
  81. }
  82. .remark-slide-content h1 {
  83. font-size: var(--header-h1-font-size);
  84. }
  85. .remark-slide-content h2 {
  86. font-size: var(--header-h2-font-size);
  87. }
  88. .remark-slide-content h3 {
  89. font-size: var(--header-h3-font-size);
  90. }
  91. .remark-code, .remark-inline-code {
  92. font-family: var(--code-font-family), Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
  93. }
  94. .remark-code {
  95. font-size: var(--code-font-size);
  96. }
  97. .remark-inline-code {
  98. font-size: var(--code-inline-font-size);
  99. color: #03A696;
  100. }
  101. .remark-slide-number {
  102. color: #035AA6;
  103. opacity: 1;
  104. font-size: 0.9rem;
  105. }
  106. strong {
  107. font-weight: bold;
  108. color: var(--text-bold-color);
  109. }
  110. a, a > code {
  111. color: var(--link-color);
  112. text-decoration: none;
  113. }
  114. .footnote {
  115. position: absolute;
  116. bottom: 60px;
  117. padding-right: 4em;
  118. font-size: 0.9em;
  119. }
  120. .remark-code-line-highlighted {
  121. background-color: var(--code-highlight-color);
  122. }
  123. .inverse {
  124. background-color: var(--inverse-background-color);
  125. color: var(--inverse-text-color);
  126. }
  127. .inverse h1, .inverse h2, .inverse h3 {
  128. color: var(--inverse-header-color);
  129. }
  130. .inverse a, .inverse a > code {
  131. color: var(--inverse-link-color);
  132. }
  133. .title-slide, .title-slide h1, .title-slide h2, .title-slide h3 {
  134. color: var(--title-slide-text-color);
  135. }
  136. .title-slide {
  137. background-color: var(--title-slide-background-color);
  138. }
  139. .title-slide .remark-slide-number {
  140. display: none;
  141. }
  142. /* Two-column layout */
  143. .left-column {
  144. width: 20%;
  145. height: 92%;
  146. float: left;
  147. }
  148. .left-column h2, .left-column h3 {
  149. color: #035AA699;
  150. }
  151. .left-column h2:last-of-type, .left-column h3:last-child {
  152. color: #035AA6;
  153. }
  154. .right-column {
  155. width: 75%;
  156. float: right;
  157. padding-top: 1em;
  158. }
  159. .pull-left {
  160. float: left;
  161. width: 47%;
  162. }
  163. .pull-right {
  164. float: right;
  165. width: 47%;
  166. }
  167. .pull-right + * {
  168. clear: both;
  169. }
  170. img, video, iframe {
  171. max-width: 100%;
  172. }
  173. blockquote {
  174. border-left: solid 5px #03A69680;
  175. padding-left: 1em;
  176. }
  177. .remark-slide table {
  178. margin: auto;
  179. border-top: 1px solid #666;
  180. border-bottom: 1px solid #666;
  181. }
  182. .remark-slide table thead th {
  183. border-bottom: 1px solid #ddd;
  184. }
  185. th, td {
  186. padding: 5px;
  187. }
  188. .remark-slide table:not(.table-unshaded) thead,
  189. .remark-slide table:not(.table-unshaded) tfoot,
  190. .remark-slide table:not(.table-unshaded) tr:nth-child(even) {
  191. background: #024884;
  192. }
  193. table.dataTable tbody {
  194. background-color: var(--background-color);
  195. color: var(--text-color);
  196. }
  197. table.dataTable.display tbody tr.odd {
  198. background-color: var(--background-color);
  199. }
  200. table.dataTable.display tbody tr.even {
  201. background-color: #024884;
  202. }
  203. table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
  204. background-color: rgba(255, 255, 255, 0.5);
  205. }
  206. .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
  207. color: var(--text-color);
  208. }
  209. .dataTables_wrapper .dataTables_paginate .paginate_button {
  210. color: var(--text-color) !important;
  211. }
  212. /* Horizontal alignment of code blocks */
  213. .remark-slide-content.left pre,
  214. .remark-slide-content.center pre,
  215. .remark-slide-content.right pre {
  216. text-align: start;
  217. width: max-content;
  218. max-width: 100%;
  219. }
  220. .remark-slide-content.left pre,
  221. .remark-slide-content.right pre {
  222. min-width: 50%;
  223. min-width: min(40ch, 100%);
  224. }
  225. .remark-slide-content.center pre {
  226. min-width: 66%;
  227. min-width: min(50ch, 100%);
  228. }
  229. .remark-slide-content.left pre {
  230. margin-left: unset;
  231. margin-right: auto;
  232. }
  233. .remark-slide-content.center pre {
  234. margin-left: auto;
  235. margin-right: auto;
  236. }
  237. .remark-slide-content.right pre {
  238. margin-left: auto;
  239. margin-right: unset;
  240. }
  241. /* Slide Header Background for h1 elements */
  242. .remark-slide-content.header_background > h1 {
  243. display: block;
  244. position: absolute;
  245. top: 0;
  246. left: 0;
  247. width: 100%;
  248. background: var(--header-background-color);
  249. color: var(--header-background-text-color);
  250. padding: 2rem 64px 1.5rem 64px;
  251. margin-top: 0;
  252. box-sizing: border-box;
  253. }
  254. .remark-slide-content.header_background {
  255. padding-top: 7rem;
  256. }
  257. @page { margin: 0; }
  258. @media print {
  259. .remark-slide-scaler {
  260. width: 100% !important;
  261. height: 100% !important;
  262. transform: scale(1) !important;
  263. top: 0 !important;
  264. left: 0 !important;
  265. }
  266. }
  267. .primary {
  268. color: var(--primary);
  269. }
  270. .bg-primary {
  271. background-color: var(--primary);
  272. }
  273. .secondary {
  274. color: var(--secondary);
  275. }
  276. .bg-secondary {
  277. background-color: var(--secondary);
  278. }
  279. .white {
  280. color: var(--white);
  281. }
  282. .bg-white {
  283. background-color: var(--white);
  284. }
  285. .black {
  286. color: var(--black);
  287. }
  288. .bg-black {
  289. background-color: var(--black);
  290. }