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