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.

284 lines
5.7KB

  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. /*********************************************
  9. * GLOBAL STYLES
  10. *********************************************/
  11. :root {
  12. --background-color: #111;
  13. --main-font: Open Sans, sans-serif;
  14. --main-font-size: 40px;
  15. --main-color: #eee;
  16. --block-margin: 20px;
  17. --heading-margin: 0 0 20px 0;
  18. --heading-font: Montserrat, Impact, sans-serif;
  19. --heading-color: #eee;
  20. --heading-line-height: 1.2;
  21. --heading-letter-spacing: -0.03em;
  22. --heading-text-transform: none;
  23. --heading-text-shadow: none;
  24. --heading-font-weight: normal;
  25. --heading1-text-shadow: none;
  26. --heading1-size: 3.77em;
  27. --heading2-size: 2.11em;
  28. --heading3-size: 1.55em;
  29. --heading4-size: 1em;
  30. --code-font: monospace;
  31. --link-color: #e7ad52;
  32. --link-color-hover: #f3d7ac;
  33. --selection-background-color: #e7ad52;
  34. --selection-color: #fff; }
  35. .reveal-viewport {
  36. background: #111;
  37. background-color: #111; }
  38. .reveal {
  39. font-family: "Open Sans", sans-serif;
  40. font-size: 40px;
  41. font-weight: normal;
  42. color: #eee; }
  43. .reveal ::selection {
  44. color: #fff;
  45. background: #e7ad52;
  46. text-shadow: none; }
  47. .reveal ::-moz-selection {
  48. color: #fff;
  49. background: #e7ad52;
  50. text-shadow: none; }
  51. .reveal .slides section,
  52. .reveal .slides section > section {
  53. line-height: 1.3;
  54. font-weight: inherit; }
  55. /*********************************************
  56. * HEADERS
  57. *********************************************/
  58. .reveal h1,
  59. .reveal h2,
  60. .reveal h3,
  61. .reveal h4,
  62. .reveal h5,
  63. .reveal h6 {
  64. margin: 0 0 20px 0;
  65. color: #eee;
  66. font-family: "Montserrat", Impact, sans-serif;
  67. font-weight: normal;
  68. line-height: 1.2;
  69. letter-spacing: -0.03em;
  70. text-transform: none;
  71. text-shadow: none;
  72. word-wrap: break-word; }
  73. .reveal h1 {
  74. font-size: 3.77em; }
  75. .reveal h2 {
  76. font-size: 2.11em; }
  77. .reveal h3 {
  78. font-size: 1.55em; }
  79. .reveal h4 {
  80. font-size: 1em; }
  81. .reveal h1 {
  82. text-shadow: none; }
  83. /*********************************************
  84. * OTHER
  85. *********************************************/
  86. .reveal p {
  87. margin: 20px 0;
  88. line-height: 1.3; }
  89. /* Ensure certain elements are never larger than the slide itself */
  90. .reveal img,
  91. .reveal video,
  92. .reveal iframe {
  93. max-width: 95%;
  94. max-height: 95%; }
  95. .reveal strong,
  96. .reveal b {
  97. font-weight: bold; }
  98. .reveal em {
  99. font-style: italic; }
  100. .reveal ol,
  101. .reveal dl,
  102. .reveal ul {
  103. display: inline-block;
  104. text-align: left;
  105. margin: 0 0 0 1em; }
  106. .reveal ol {
  107. list-style-type: decimal; }
  108. .reveal ul {
  109. list-style-type: disc; }
  110. .reveal ul ul {
  111. list-style-type: square; }
  112. .reveal ul ul ul {
  113. list-style-type: circle; }
  114. .reveal ul ul,
  115. .reveal ul ol,
  116. .reveal ol ol,
  117. .reveal ol ul {
  118. display: block;
  119. margin-left: 40px; }
  120. .reveal dt {
  121. font-weight: bold; }
  122. .reveal dd {
  123. margin-left: 40px; }
  124. .reveal blockquote {
  125. display: block;
  126. position: relative;
  127. width: 70%;
  128. margin: 20px auto;
  129. padding: 5px;
  130. font-style: italic;
  131. background: rgba(255, 255, 255, 0.05);
  132. box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
  133. .reveal blockquote p:first-child,
  134. .reveal blockquote p:last-child {
  135. display: inline-block; }
  136. .reveal q {
  137. font-style: italic; }
  138. .reveal pre {
  139. display: block;
  140. position: relative;
  141. width: 90%;
  142. margin: 20px auto;
  143. text-align: left;
  144. font-size: 0.55em;
  145. font-family: monospace;
  146. line-height: 1.2em;
  147. word-wrap: break-word;
  148. box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
  149. .reveal code {
  150. font-family: monospace;
  151. text-transform: none; }
  152. .reveal pre code {
  153. display: block;
  154. padding: 5px;
  155. overflow: auto;
  156. max-height: 400px;
  157. word-wrap: normal; }
  158. .reveal table {
  159. margin: auto;
  160. border-collapse: collapse;
  161. border-spacing: 0; }
  162. .reveal table th {
  163. font-weight: bold; }
  164. .reveal table th,
  165. .reveal table td {
  166. text-align: left;
  167. padding: 0.2em 0.5em 0.2em 0.5em;
  168. border-bottom: 1px solid; }
  169. .reveal table th[align="center"],
  170. .reveal table td[align="center"] {
  171. text-align: center; }
  172. .reveal table th[align="right"],
  173. .reveal table td[align="right"] {
  174. text-align: right; }
  175. .reveal table tbody tr:last-child th,
  176. .reveal table tbody tr:last-child td {
  177. border-bottom: none; }
  178. .reveal sup {
  179. vertical-align: super;
  180. font-size: smaller; }
  181. .reveal sub {
  182. vertical-align: sub;
  183. font-size: smaller; }
  184. .reveal small {
  185. display: inline-block;
  186. font-size: 0.6em;
  187. line-height: 1.2em;
  188. vertical-align: top; }
  189. .reveal small * {
  190. vertical-align: top; }
  191. .reveal img {
  192. margin: 20px 0; }
  193. /*********************************************
  194. * LINKS
  195. *********************************************/
  196. .reveal a {
  197. color: #e7ad52;
  198. text-decoration: none;
  199. transition: color .15s ease; }
  200. .reveal a:hover {
  201. color: #f3d7ac;
  202. text-shadow: none;
  203. border: none; }
  204. .reveal .roll span:after {
  205. color: #fff;
  206. background: #d08a1d; }
  207. /*********************************************
  208. * Frame helper
  209. *********************************************/
  210. .reveal .r-frame {
  211. border: 4px solid #eee;
  212. box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
  213. .reveal a .r-frame {
  214. transition: all .15s linear; }
  215. .reveal a:hover .r-frame {
  216. border-color: #e7ad52;
  217. box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
  218. /*********************************************
  219. * NAVIGATION CONTROLS
  220. *********************************************/
  221. .reveal .controls {
  222. color: #e7ad52; }
  223. /*********************************************
  224. * PROGRESS BAR
  225. *********************************************/
  226. .reveal .progress {
  227. background: rgba(0, 0, 0, 0.2);
  228. color: #e7ad52; }
  229. /*********************************************
  230. * PRINT BACKGROUND
  231. *********************************************/
  232. @media print {
  233. .backgrounds {
  234. background-color: #111; } }