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.

309 lines
6.6KB

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