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.
 
 
 

358 regels
6.9 KiB

  1. /**
  2. * Black theme for reveal.js.
  3. *
  4. * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
  5. */
  6. @import url(https://fonts.googleapis.com/css?family=Montserrat:700);
  7. @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);
  8. section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
  9. color: #222;
  10. }
  11. /*********************************************
  12. * GLOBAL STYLES
  13. *********************************************/
  14. :root {
  15. --r-background-color: #111;
  16. --r-main-font: Open Sans, sans-serif;
  17. --r-main-font-size: 40px;
  18. --r-main-color: #eee;
  19. --r-block-margin: 20px;
  20. --r-heading-margin: 0 0 20px 0;
  21. --r-heading-font: Montserrat, Impact, sans-serif;
  22. --r-heading-color: #eee;
  23. --r-heading-line-height: 1.2;
  24. --r-heading-letter-spacing: -0.03em;
  25. --r-heading-text-transform: none;
  26. --r-heading-text-shadow: none;
  27. --r-heading-font-weight: normal;
  28. --r-heading1-text-shadow: none;
  29. --r-heading1-size: 3.77em;
  30. --r-heading2-size: 2.11em;
  31. --r-heading3-size: 1.55em;
  32. --r-heading4-size: 1em;
  33. --r-code-font: monospace;
  34. --r-link-color: #e7ad52;
  35. --r-link-color-dark: #d08a1d;
  36. --r-link-color-hover: #f3d7ac;
  37. --r-selection-background-color: #e7ad52;
  38. --r-selection-color: #fff;
  39. }
  40. .reveal-viewport {
  41. background: #111;
  42. background-color: var(--r-background-color);
  43. }
  44. .reveal {
  45. font-family: var(--r-main-font);
  46. font-size: var(--r-main-font-size);
  47. font-weight: normal;
  48. color: var(--r-main-color);
  49. }
  50. .reveal ::selection {
  51. color: var(--r-selection-color);
  52. background: var(--r-selection-background-color);
  53. text-shadow: none;
  54. }
  55. .reveal ::-moz-selection {
  56. color: var(--r-selection-color);
  57. background: var(--r-selection-background-color);
  58. text-shadow: none;
  59. }
  60. .reveal .slides section,
  61. .reveal .slides section > section {
  62. line-height: 1.3;
  63. font-weight: inherit;
  64. }
  65. /*********************************************
  66. * HEADERS
  67. *********************************************/
  68. .reveal h1,
  69. .reveal h2,
  70. .reveal h3,
  71. .reveal h4,
  72. .reveal h5,
  73. .reveal h6 {
  74. margin: var(--r-heading-margin);
  75. color: var(--r-heading-color);
  76. font-family: var(--r-heading-font);
  77. font-weight: var(--r-heading-font-weight);
  78. line-height: var(--r-heading-line-height);
  79. letter-spacing: var(--r-heading-letter-spacing);
  80. text-transform: var(--r-heading-text-transform);
  81. text-shadow: var(--r-heading-text-shadow);
  82. word-wrap: break-word;
  83. }
  84. .reveal h1 {
  85. font-size: var(--r-heading1-size);
  86. }
  87. .reveal h2 {
  88. font-size: var(--r-heading2-size);
  89. }
  90. .reveal h3 {
  91. font-size: var(--r-heading3-size);
  92. }
  93. .reveal h4 {
  94. font-size: var(--r-heading4-size);
  95. }
  96. .reveal h1 {
  97. text-shadow: var(--r-heading1-text-shadow);
  98. }
  99. /*********************************************
  100. * OTHER
  101. *********************************************/
  102. .reveal p {
  103. margin: var(--r-block-margin) 0;
  104. line-height: 1.3;
  105. }
  106. /* Remove trailing margins after titles */
  107. .reveal h1:last-child,
  108. .reveal h2:last-child,
  109. .reveal h3:last-child,
  110. .reveal h4:last-child,
  111. .reveal h5:last-child,
  112. .reveal h6:last-child {
  113. margin-bottom: 0;
  114. }
  115. /* Ensure certain elements are never larger than the slide itself */
  116. .reveal img,
  117. .reveal video,
  118. .reveal iframe {
  119. max-width: 95%;
  120. max-height: 95%;
  121. }
  122. .reveal strong,
  123. .reveal b {
  124. font-weight: bold;
  125. }
  126. .reveal em {
  127. font-style: italic;
  128. }
  129. .reveal ol,
  130. .reveal dl,
  131. .reveal ul {
  132. display: inline-block;
  133. text-align: left;
  134. margin: 0 0 0 1em;
  135. }
  136. .reveal ol {
  137. list-style-type: decimal;
  138. }
  139. .reveal ul {
  140. list-style-type: disc;
  141. }
  142. .reveal ul ul {
  143. list-style-type: square;
  144. }
  145. .reveal ul ul ul {
  146. list-style-type: circle;
  147. }
  148. .reveal ul ul,
  149. .reveal ul ol,
  150. .reveal ol ol,
  151. .reveal ol ul {
  152. display: block;
  153. margin-left: 40px;
  154. }
  155. .reveal dt {
  156. font-weight: bold;
  157. }
  158. .reveal dd {
  159. margin-left: 40px;
  160. }
  161. .reveal blockquote {
  162. display: block;
  163. position: relative;
  164. width: 70%;
  165. margin: var(--r-block-margin) auto;
  166. padding: 5px;
  167. font-style: italic;
  168. background: rgba(255, 255, 255, 0.05);
  169. box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
  170. }
  171. .reveal blockquote p:first-child,
  172. .reveal blockquote p:last-child {
  173. display: inline-block;
  174. }
  175. .reveal q {
  176. font-style: italic;
  177. }
  178. .reveal pre {
  179. display: block;
  180. position: relative;
  181. width: 90%;
  182. margin: var(--r-block-margin) auto;
  183. text-align: left;
  184. font-size: 0.55em;
  185. font-family: var(--r-code-font);
  186. line-height: 1.2em;
  187. word-wrap: break-word;
  188. box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
  189. }
  190. .reveal code {
  191. font-family: var(--r-code-font);
  192. text-transform: none;
  193. tab-size: 2;
  194. }
  195. .reveal pre code {
  196. display: block;
  197. padding: 5px;
  198. overflow: auto;
  199. max-height: 400px;
  200. word-wrap: normal;
  201. }
  202. .reveal .code-wrapper {
  203. white-space: normal;
  204. }
  205. .reveal .code-wrapper code {
  206. white-space: pre;
  207. }
  208. .reveal table {
  209. margin: auto;
  210. border-collapse: collapse;
  211. border-spacing: 0;
  212. }
  213. .reveal table th {
  214. font-weight: bold;
  215. }
  216. .reveal table th,
  217. .reveal table td {
  218. text-align: left;
  219. padding: 0.2em 0.5em 0.2em 0.5em;
  220. border-bottom: 1px solid;
  221. }
  222. .reveal table th[align=center],
  223. .reveal table td[align=center] {
  224. text-align: center;
  225. }
  226. .reveal table th[align=right],
  227. .reveal table td[align=right] {
  228. text-align: right;
  229. }
  230. .reveal table tbody tr:last-child th,
  231. .reveal table tbody tr:last-child td {
  232. border-bottom: none;
  233. }
  234. .reveal sup {
  235. vertical-align: super;
  236. font-size: smaller;
  237. }
  238. .reveal sub {
  239. vertical-align: sub;
  240. font-size: smaller;
  241. }
  242. .reveal small {
  243. display: inline-block;
  244. font-size: 0.6em;
  245. line-height: 1.2em;
  246. vertical-align: top;
  247. }
  248. .reveal small * {
  249. vertical-align: top;
  250. }
  251. .reveal img {
  252. margin: var(--r-block-margin) 0;
  253. }
  254. /*********************************************
  255. * LINKS
  256. *********************************************/
  257. .reveal a {
  258. color: var(--r-link-color);
  259. text-decoration: none;
  260. transition: color 0.15s ease;
  261. }
  262. .reveal a:hover {
  263. color: var(--r-link-color-hover);
  264. text-shadow: none;
  265. border: none;
  266. }
  267. .reveal .roll span:after {
  268. color: #fff;
  269. background: var(--r-link-color-dark);
  270. }
  271. /*********************************************
  272. * Frame helper
  273. *********************************************/
  274. .reveal .r-frame {
  275. border: 4px solid var(--r-main-color);
  276. box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  277. }
  278. .reveal a .r-frame {
  279. transition: all 0.15s linear;
  280. }
  281. .reveal a:hover .r-frame {
  282. border-color: var(--r-link-color);
  283. box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
  284. }
  285. /*********************************************
  286. * NAVIGATION CONTROLS
  287. *********************************************/
  288. .reveal .controls {
  289. color: var(--r-link-color);
  290. }
  291. /*********************************************
  292. * PROGRESS BAR
  293. *********************************************/
  294. .reveal .progress {
  295. background: rgba(0, 0, 0, 0.2);
  296. color: var(--r-link-color);
  297. }
  298. /*********************************************
  299. * PRINT BACKGROUND
  300. *********************************************/
  301. @media print {
  302. .backgrounds {
  303. background-color: var(--r-background-color);
  304. }
  305. }