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