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