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