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.

292 lines
6.8KB

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