| JJ Allaire | efa6ad4 | 2016-01-30 13:12:05 -0500 | [diff] [blame] | 1 | /** | 
|  | 2 | * Solarized Dark theme for reveal.js. | 
|  | 3 | * Author: Achim Staebler | 
|  | 4 | */ | 
|  | 5 | @import url(../../lib/font/league-gothic/league-gothic.css); | 
| JJ Allaire | cff9e7c | 2016-01-30 14:04:35 -0500 | [diff] [blame] | 6 |  | 
|  | 7 | @font-face { | 
|  | 8 | font-family: 'Lato'; | 
|  | 9 | font-style: normal; | 
|  | 10 | font-weight: 400; | 
|  | 11 | src: url(fonts/Lato.ttf) format('truetype'); | 
|  | 12 | } | 
|  | 13 | @font-face { | 
|  | 14 | font-family: 'Lato'; | 
|  | 15 | font-style: normal; | 
|  | 16 | font-weight: 700; | 
|  | 17 | src: url(fonts/LatoBold.ttf) format('truetype'); | 
|  | 18 | } | 
|  | 19 | @font-face { | 
|  | 20 | font-family: 'Lato'; | 
|  | 21 | font-style: italic; | 
|  | 22 | font-weight: 400; | 
|  | 23 | src: url(fonts/LatoItalic.ttf) format('truetype'); | 
|  | 24 | } | 
|  | 25 | @font-face { | 
|  | 26 | font-family: 'Lato'; | 
|  | 27 | font-style: italic; | 
|  | 28 | font-weight: 700; | 
|  | 29 | src: url(fonts/LatoBoldItalic.ttf) format('truetype'); | 
|  | 30 | } | 
|  | 31 |  | 
|  | 32 |  | 
| JJ Allaire | efa6ad4 | 2016-01-30 13:12:05 -0500 | [diff] [blame] | 33 | /** | 
|  | 34 | * Solarized colors by Ethan Schoonover | 
|  | 35 | */ | 
|  | 36 | html * { | 
|  | 37 | color-profile: sRGB; | 
|  | 38 | rendering-intent: auto; } | 
|  | 39 |  | 
|  | 40 | /********************************************* | 
|  | 41 | * GLOBAL STYLES | 
|  | 42 | *********************************************/ | 
|  | 43 | body { | 
|  | 44 | background: #002b36; | 
|  | 45 | background-color: #002b36; } | 
|  | 46 |  | 
|  | 47 | .reveal { | 
|  | 48 | font-family: "Lato", sans-serif; | 
|  | 49 | font-size: 36px; | 
|  | 50 | font-weight: normal; | 
|  | 51 | color: #93a1a1; } | 
|  | 52 |  | 
|  | 53 | ::selection { | 
|  | 54 | color: #fff; | 
|  | 55 | background: #d33682; | 
|  | 56 | text-shadow: none; } | 
|  | 57 |  | 
|  | 58 | .reveal .slides > section, | 
|  | 59 | .reveal .slides > section > section { | 
|  | 60 | line-height: 1.3; | 
|  | 61 | font-weight: inherit; } | 
|  | 62 |  | 
|  | 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: #eee8d5; | 
|  | 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: none; | 
|  | 80 | word-wrap: break-word; } | 
|  | 81 |  | 
|  | 82 | .reveal h1 { | 
|  | 83 | font-size: 3.77em; } | 
|  | 84 |  | 
|  | 85 | .reveal h2 { | 
|  | 86 | font-size: 2.11em; } | 
|  | 87 |  | 
|  | 88 | .reveal h3 { | 
|  | 89 | font-size: 1.55em; } | 
|  | 90 |  | 
|  | 91 | .reveal h4 { | 
|  | 92 | font-size: 1em; } | 
|  | 93 |  | 
|  | 94 | .reveal h1 { | 
|  | 95 | text-shadow: none; } | 
|  | 96 |  | 
|  | 97 | /********************************************* | 
|  | 98 | * OTHER | 
|  | 99 | *********************************************/ | 
|  | 100 | .reveal p { | 
|  | 101 | margin: 20px 0; | 
|  | 102 | line-height: 1.3; } | 
|  | 103 |  | 
|  | 104 | /* Ensure certain elements are never larger than the slide itself */ | 
|  | 105 | .reveal img, | 
|  | 106 | .reveal video, | 
|  | 107 | .reveal iframe { | 
|  | 108 | max-width: 95%; | 
|  | 109 | max-height: 95%; } | 
|  | 110 |  | 
|  | 111 | .reveal strong, | 
|  | 112 | .reveal b { | 
|  | 113 | font-weight: bold; } | 
|  | 114 |  | 
|  | 115 | .reveal em { | 
|  | 116 | font-style: italic; } | 
|  | 117 |  | 
|  | 118 | .reveal ol, | 
|  | 119 | .reveal dl, | 
|  | 120 | .reveal ul { | 
|  | 121 | display: inline-block; | 
|  | 122 | text-align: left; | 
|  | 123 | margin: 0 0 0 1em; } | 
|  | 124 |  | 
|  | 125 | .reveal ol { | 
|  | 126 | list-style-type: decimal; } | 
|  | 127 |  | 
|  | 128 | .reveal ul { | 
|  | 129 | list-style-type: disc; } | 
|  | 130 |  | 
|  | 131 | .reveal ul ul { | 
|  | 132 | list-style-type: square; } | 
|  | 133 |  | 
|  | 134 | .reveal ul ul ul { | 
|  | 135 | list-style-type: circle; } | 
|  | 136 |  | 
|  | 137 | .reveal ul ul, | 
|  | 138 | .reveal ul ol, | 
|  | 139 | .reveal ol ol, | 
|  | 140 | .reveal ol ul { | 
|  | 141 | display: block; | 
|  | 142 | margin-left: 40px; } | 
|  | 143 |  | 
|  | 144 | .reveal dt { | 
|  | 145 | font-weight: bold; } | 
|  | 146 |  | 
|  | 147 | .reveal dd { | 
|  | 148 | margin-left: 40px; } | 
|  | 149 |  | 
|  | 150 | .reveal q, | 
|  | 151 | .reveal blockquote { | 
|  | 152 | quotes: none; } | 
|  | 153 |  | 
|  | 154 | .reveal blockquote { | 
|  | 155 | display: block; | 
|  | 156 | position: relative; | 
|  | 157 | width: 70%; | 
|  | 158 | margin: 20px auto; | 
|  | 159 | padding: 5px; | 
|  | 160 | font-style: italic; | 
|  | 161 | background: rgba(255, 255, 255, 0.05); | 
|  | 162 | box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } | 
|  | 163 |  | 
|  | 164 | .reveal blockquote p:first-child, | 
|  | 165 | .reveal blockquote p:last-child { | 
|  | 166 | display: inline-block; } | 
|  | 167 |  | 
|  | 168 | .reveal q { | 
|  | 169 | font-style: italic; } | 
|  | 170 |  | 
|  | 171 | .reveal pre { | 
|  | 172 | display: block; | 
|  | 173 | position: relative; | 
|  | 174 | width: 90%; | 
|  | 175 | margin: 20px auto; | 
|  | 176 | text-align: left; | 
|  | 177 | font-size: 0.55em; | 
|  | 178 | font-family: monospace; | 
|  | 179 | line-height: 1.2em; | 
|  | 180 | word-wrap: break-word; | 
|  | 181 | box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } | 
|  | 182 |  | 
|  | 183 | .reveal code { | 
|  | 184 | font-family: monospace; } | 
|  | 185 |  | 
|  | 186 | .reveal pre code { | 
|  | 187 | display: block; | 
|  | 188 | padding: 5px; | 
|  | 189 | overflow: auto; | 
|  | 190 | max-height: 400px; | 
|  | 191 | word-wrap: normal; } | 
|  | 192 |  | 
|  | 193 | .reveal table { | 
|  | 194 | margin: auto; | 
|  | 195 | border-collapse: collapse; | 
|  | 196 | border-spacing: 0; } | 
|  | 197 |  | 
|  | 198 | .reveal table th { | 
|  | 199 | font-weight: bold; } | 
|  | 200 |  | 
|  | 201 | .reveal table th, | 
|  | 202 | .reveal table td { | 
|  | 203 | text-align: left; | 
|  | 204 | padding: 0.2em 0.5em 0.2em 0.5em; | 
|  | 205 | border-bottom: 1px solid; } | 
|  | 206 |  | 
|  | 207 | .reveal table th[align="center"], | 
|  | 208 | .reveal table td[align="center"] { | 
|  | 209 | text-align: center; } | 
|  | 210 |  | 
|  | 211 | .reveal table th[align="right"], | 
|  | 212 | .reveal table td[align="right"] { | 
|  | 213 | text-align: right; } | 
|  | 214 |  | 
|  | 215 | .reveal table tr:last-child td { | 
|  | 216 | border-bottom: none; } | 
|  | 217 |  | 
|  | 218 | .reveal sup { | 
|  | 219 | vertical-align: super; } | 
|  | 220 |  | 
|  | 221 | .reveal sub { | 
|  | 222 | vertical-align: sub; } | 
|  | 223 |  | 
|  | 224 | .reveal small { | 
|  | 225 | display: inline-block; | 
|  | 226 | font-size: 0.6em; | 
|  | 227 | line-height: 1.2em; | 
|  | 228 | vertical-align: top; } | 
|  | 229 |  | 
|  | 230 | .reveal small * { | 
|  | 231 | vertical-align: top; } | 
|  | 232 |  | 
|  | 233 | /********************************************* | 
|  | 234 | * LINKS | 
|  | 235 | *********************************************/ | 
|  | 236 | .reveal a { | 
|  | 237 | color: #268bd2; | 
|  | 238 | text-decoration: none; | 
|  | 239 | -webkit-transition: color 0.15s ease; | 
|  | 240 | -moz-transition: color 0.15s ease; | 
|  | 241 | transition: color 0.15s ease; } | 
|  | 242 |  | 
|  | 243 | .reveal a:hover { | 
|  | 244 | color: #78b9e6; | 
|  | 245 | text-shadow: none; | 
|  | 246 | border: none; } | 
|  | 247 |  | 
|  | 248 | .reveal .roll span:after { | 
|  | 249 | color: #fff; | 
|  | 250 | background: #1a6091; } | 
|  | 251 |  | 
|  | 252 | /********************************************* | 
|  | 253 | * IMAGES | 
|  | 254 | *********************************************/ | 
|  | 255 | .reveal section img { | 
|  | 256 | margin: 15px 0px; | 
|  | 257 | background: rgba(255, 255, 255, 0.12); | 
|  | 258 | border: 4px solid #93a1a1; | 
|  | 259 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } | 
|  | 260 |  | 
|  | 261 | .reveal section img.plain { | 
|  | 262 | border: 0; | 
|  | 263 | box-shadow: none; } | 
|  | 264 |  | 
|  | 265 | .reveal a img { | 
|  | 266 | -webkit-transition: all 0.15s linear; | 
|  | 267 | -moz-transition: all 0.15s linear; | 
|  | 268 | transition: all 0.15s linear; } | 
|  | 269 |  | 
|  | 270 | .reveal a:hover img { | 
|  | 271 | background: rgba(255, 255, 255, 0.2); | 
|  | 272 | border-color: #268bd2; | 
|  | 273 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } | 
|  | 274 |  | 
|  | 275 | /********************************************* | 
|  | 276 | * NAVIGATION CONTROLS | 
|  | 277 | *********************************************/ | 
|  | 278 | .reveal .controls .navigate-left, | 
|  | 279 | .reveal .controls .navigate-left.enabled { | 
|  | 280 | border-right-color: #268bd2; } | 
|  | 281 |  | 
|  | 282 | .reveal .controls .navigate-right, | 
|  | 283 | .reveal .controls .navigate-right.enabled { | 
|  | 284 | border-left-color: #268bd2; } | 
|  | 285 |  | 
|  | 286 | .reveal .controls .navigate-up, | 
|  | 287 | .reveal .controls .navigate-up.enabled { | 
|  | 288 | border-bottom-color: #268bd2; } | 
|  | 289 |  | 
|  | 290 | .reveal .controls .navigate-down, | 
|  | 291 | .reveal .controls .navigate-down.enabled { | 
|  | 292 | border-top-color: #268bd2; } | 
|  | 293 |  | 
|  | 294 | .reveal .controls .navigate-left.enabled:hover { | 
|  | 295 | border-right-color: #78b9e6; } | 
|  | 296 |  | 
|  | 297 | .reveal .controls .navigate-right.enabled:hover { | 
|  | 298 | border-left-color: #78b9e6; } | 
|  | 299 |  | 
|  | 300 | .reveal .controls .navigate-up.enabled:hover { | 
|  | 301 | border-bottom-color: #78b9e6; } | 
|  | 302 |  | 
|  | 303 | .reveal .controls .navigate-down.enabled:hover { | 
|  | 304 | border-top-color: #78b9e6; } | 
|  | 305 |  | 
|  | 306 | /********************************************* | 
|  | 307 | * PROGRESS BAR | 
|  | 308 | *********************************************/ | 
|  | 309 | .reveal .progress { | 
|  | 310 | background: rgba(0, 0, 0, 0.2); } | 
|  | 311 |  | 
|  | 312 | .reveal .progress span { | 
|  | 313 | background: #268bd2; | 
|  | 314 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); | 
|  | 315 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); | 
|  | 316 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } |