diff options
Diffstat (limited to 'css')
| -rw-r--r-- | css/print/paper.css | 2 | ||||
| -rw-r--r-- | css/print/pdf.css | 57 | ||||
| -rw-r--r-- | css/reveal.css | 571 | ||||
| -rw-r--r-- | css/reveal.scss | 420 | ||||
| -rw-r--r-- | css/theme/README.md | 8 | ||||
| -rw-r--r-- | css/theme/beige.css | 124 | ||||
| -rw-r--r-- | css/theme/black.css | 102 | ||||
| -rw-r--r-- | css/theme/blood.css | 131 | ||||
| -rw-r--r-- | css/theme/league.css | 112 | ||||
| -rw-r--r-- | css/theme/moon.css | 112 | ||||
| -rw-r--r-- | css/theme/night.css | 102 | ||||
| -rw-r--r-- | css/theme/serif.css | 106 | ||||
| -rw-r--r-- | css/theme/simple.css | 100 | ||||
| -rw-r--r-- | css/theme/sky.css | 112 | ||||
| -rw-r--r-- | css/theme/solarized.css | 112 | ||||
| -rw-r--r-- | css/theme/source/black.scss | 2 | ||||
| -rw-r--r-- | css/theme/source/blood.scss | 18 | ||||
| -rw-r--r-- | css/theme/source/white.scss | 2 | ||||
| -rw-r--r-- | css/theme/template/theme.scss | 48 | ||||
| -rw-r--r-- | css/theme/white.css | 112 |
20 files changed, 1454 insertions, 899 deletions
diff --git a/css/print/paper.css b/css/print/paper.css index 7c7257a..6588f48 100644 --- a/css/print/paper.css +++ b/css/print/paper.css @@ -141,7 +141,7 @@ .reveal .slides section { visibility: visible !important; position: static !important; - width: 100% !important; + width: auto !important; height: auto !important; display: block !important; overflow: visible !important; diff --git a/css/print/pdf.css b/css/print/pdf.css index 2eb4cf2..9ed90d6 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -1,15 +1,9 @@ -/* Default Print Stylesheet Template - by Rob Glazebrook of CSSnewbie.com - Last Updated: June 4, 2008 - - Feel free (nay, compelled) to edit, append, and - manipulate this file as you see fit. */ - - -/* SECTION 1: Set default width, margin, float, and - background. This prevents elements from extending - beyond the edge of the printed page, and prevents - unnecessary background images from printing */ +/** + * This stylesheet is used to print reveal.js + * presentations to PDF. + * + * https://github.com/hakimel/reveal.js#pdf-export + */ * { -webkit-print-color-adjust: exact; @@ -29,12 +23,10 @@ html { overflow: visible; } -/* SECTION 2: Remove any elements not needed in print. - This would include navigation, ads, sidebars, etc. */ +/* Remove any elements not needed in print. */ .nestedarrow, .reveal .controls, .reveal .progress, -.reveal .slide-number, .reveal .playback, .reveal.overview, .fork-reveal, @@ -43,16 +35,7 @@ html { display: none !important; } -/* SECTION 3: Set body font face, size, and color. - Consider using a serif font for readability. */ -body, p, td, li, div { - -} - -/* SECTION 4: Set heading font face, sizes, and color. - Differentiate your headings from your body text. - Perhaps use a large sans-serif for distinction. */ -h1,h2,h3,h4,h5,h6 { +h1, h2, h3, h4, h5, h6 { text-shadow: 0 0 0 #000 !important; } @@ -61,8 +44,6 @@ h1,h2,h3,h4,h5,h6 { font-family: Courier, 'Courier New', monospace !important; } - -/* SECTION 5: more reveal.js specific additions by @skypanther */ ul, ol, div, p { visibility: visible; position: static; @@ -100,6 +81,7 @@ ul, ol, div, p { -ms-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } + .reveal .slides section { page-break-after: always !important; @@ -125,6 +107,7 @@ ul, ol, div, p { -ms-transform: none !important; transform: none !important; } + .reveal section.stack { margin: 0 !important; padding: 0 !important; @@ -132,9 +115,11 @@ ul, ol, div, p { height: auto !important; min-height: auto !important; } + .reveal img { box-shadow: none; } + .reveal .roll { overflow: visible; line-height: 1em; @@ -149,9 +134,27 @@ ul, ol, div, p { width: 100%; z-index: -1; } + /* All elements should be above the slide-background */ .reveal section>* { position: relative; z-index: 1; } +/* Display slide speaker notes when 'showNotes' is enabled */ +.reveal .speaker-notes-pdf { + display: block; + width: 100%; + max-height: none; + left: auto; + top: auto; + z-index: 100; +} + +/* Display slide numbers when 'slideNumber' is enabled */ +.reveal .slide-number-pdf { + display: block; + position: absolute; + font-size: 14px; +} + diff --git a/css/reveal.css b/css/reveal.css index 05bfd2d..3a31fa4 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -3,12 +3,24 @@ * http://lab.hakim.se/reveal-js * MIT licensed * - * Copyright (C) 2015 Hakim El Hattab, http://hakim.se + * Copyright (C) 2016 Hakim El Hattab, http://hakim.se */ /********************************************* * RESET STYLES *********************************************/ -html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal iframe, .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal blockquote, .reveal pre, .reveal a, .reveal abbr, .reveal acronym, .reveal address, .reveal big, .reveal cite, .reveal code, .reveal del, .reveal dfn, .reveal em, .reveal img, .reveal ins, .reveal kbd, .reveal q, .reveal s, .reveal samp, .reveal small, .reveal strike, .reveal strong, .reveal sub, .reveal sup, .reveal tt, .reveal var, .reveal b, .reveal u, .reveal center, .reveal dl, .reveal dt, .reveal dd, .reveal ol, .reveal ul, .reveal li, .reveal fieldset, .reveal form, .reveal label, .reveal legend, .reveal table, .reveal caption, .reveal tbody, .reveal tfoot, .reveal thead, .reveal tr, .reveal th, .reveal td, .reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed, .reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup, .reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary, .reveal time, .reveal mark, .reveal audio, video { +html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal iframe, +.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal blockquote, .reveal pre, +.reveal a, .reveal abbr, .reveal acronym, .reveal address, .reveal big, .reveal cite, .reveal code, +.reveal del, .reveal dfn, .reveal em, .reveal img, .reveal ins, .reveal kbd, .reveal q, .reveal s, .reveal samp, +.reveal small, .reveal strike, .reveal strong, .reveal sub, .reveal sup, .reveal tt, .reveal var, +.reveal b, .reveal u, .reveal center, +.reveal dl, .reveal dt, .reveal dd, .reveal ol, .reveal ul, .reveal li, +.reveal fieldset, .reveal form, .reveal label, .reveal legend, +.reveal table, .reveal caption, .reveal tbody, .reveal tfoot, .reveal thead, .reveal tr, .reveal th, .reveal td, +.reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed, +.reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup, +.reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary, +.reveal time, .reveal mark, .reveal audio, video { margin: 0; padding: 0; border: 0; @@ -16,13 +28,15 @@ html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal i font: inherit; vertical-align: baseline; } -.reveal article, .reveal aside, .reveal details, .reveal figcaption, .reveal figure, .reveal footer, .reveal header, .reveal hgroup, .reveal menu, .reveal nav, .reveal section { +.reveal article, .reveal aside, .reveal details, .reveal figcaption, .reveal figure, +.reveal footer, .reveal header, .reveal hgroup, .reveal menu, .reveal nav, .reveal section { display: block; } /********************************************* * GLOBAL STYLES *********************************************/ -html, body { +html, +body { width: 100%; height: 100%; overflow: hidden; } @@ -33,15 +47,11 @@ body { background-color: #fff; color: #000; } -::-moz-selection { - background: #FF5E99; - color: #fff; - text-shadow: none; } +html:-webkit-full-screen-ancestor { + background-color: inherit; } -::selection { - background: #FF5E99; - color: #fff; - text-shadow: none; } +html:-moz-full-screen-ancestor { + background-color: inherit; } /********************************************* * VIEW FRAGMENTS @@ -49,8 +59,8 @@ body { .reveal .slides section .fragment { opacity: 0; visibility: hidden; - -webkit-transition: all 0.2s ease; - transition: all 0.2s ease; } + -webkit-transition: all .2s ease; + transition: all .2s ease; } .reveal .slides section .fragment.visible { opacity: 1; visibility: visible; } @@ -60,7 +70,6 @@ body { visibility: visible; } .reveal .slides section .fragment.grow.visible { -webkit-transform: scale(1.3); - -ms-transform: scale(1.3); transform: scale(1.3); } .reveal .slides section .fragment.shrink { @@ -68,24 +77,14 @@ body { visibility: visible; } .reveal .slides section .fragment.shrink.visible { -webkit-transform: scale(0.7); - -ms-transform: scale(0.7); transform: scale(0.7); } .reveal .slides section .fragment.zoom-in { -webkit-transform: scale(0.1); - -ms-transform: scale(0.1); transform: scale(0.1); } .reveal .slides section .fragment.zoom-in.visible { - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); } - -.reveal .slides section .fragment.roll-in { - -webkit-transform: rotateX(90deg); - transform: rotateX(90deg); } - .reveal .slides section .fragment.roll-in.visible { - -webkit-transform: rotateX(0); - transform: rotateX(0); } + -webkit-transform: none; + transform: none; } .reveal .slides section .fragment.fade-out { opacity: 1; @@ -102,10 +101,39 @@ body { visibility: visible; } .reveal .slides section .fragment.strike { - opacity: 1; } + opacity: 1; + visibility: visible; } .reveal .slides section .fragment.strike.visible { text-decoration: line-through; } +.reveal .slides section .fragment.fade-up { + -webkit-transform: translate(0, 20%); + transform: translate(0, 20%); } + .reveal .slides section .fragment.fade-up.visible { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); } + +.reveal .slides section .fragment.fade-down { + -webkit-transform: translate(0, -20%); + transform: translate(0, -20%); } + .reveal .slides section .fragment.fade-down.visible { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); } + +.reveal .slides section .fragment.fade-right { + -webkit-transform: translate(-20%, 0); + transform: translate(-20%, 0); } + .reveal .slides section .fragment.fade-right.visible { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); } + +.reveal .slides section .fragment.fade-left { + -webkit-transform: translate(20%, 0); + transform: translate(20%, 0); } + .reveal .slides section .fragment.fade-left.visible { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); } + .reveal .slides section .fragment.current-visible { opacity: 0; visibility: hidden; } @@ -113,7 +141,12 @@ body { opacity: 1; visibility: visible; } -.reveal .slides section .fragment.highlight-red, .reveal .slides section .fragment.highlight-current-red, .reveal .slides section .fragment.highlight-green, .reveal .slides section .fragment.highlight-current-green, .reveal .slides section .fragment.highlight-blue, .reveal .slides section .fragment.highlight-current-blue { +.reveal .slides section .fragment.highlight-red, +.reveal .slides section .fragment.highlight-current-red, +.reveal .slides section .fragment.highlight-green, +.reveal .slides section .fragment.highlight-current-green, +.reveal .slides section .fragment.highlight-blue, +.reveal .slides section .fragment.highlight-current-blue { opacity: 1; visibility: visible; } @@ -157,8 +190,7 @@ body { .reveal pre.stretch code { height: 100%; max-height: 100%; - -moz-box-sizing: border-box; - box-sizing: border-box; } + box-sizing: border-box; } /********************************************* * CONTROLS @@ -173,58 +205,60 @@ body { bottom: 10px; -webkit-user-select: none; } -.reveal .controls div { +.reveal .controls button { + padding: 0; position: absolute; opacity: 0.05; width: 0; height: 0; + background-color: transparent; border: 12px solid transparent; -webkit-transform: scale(0.9999); - -ms-transform: scale(0.9999); transform: scale(0.9999); -webkit-transition: all 0.2s ease; transition: all 0.2s ease; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } + -webkit-appearance: none; + -webkit-tap-highlight-color: transparent; } -.reveal .controls div.enabled { +.reveal .controls .enabled { opacity: 0.7; cursor: pointer; } -.reveal .controls div.enabled:active { +.reveal .controls .enabled:active { margin-top: 1px; } -.reveal .controls div.navigate-left { +.reveal .controls .navigate-left { top: 42px; border-right-width: 22px; border-right-color: #000; } -.reveal .controls div.navigate-left.fragmented { +.reveal .controls .navigate-left.fragmented { opacity: 0.3; } -.reveal .controls div.navigate-right { +.reveal .controls .navigate-right { left: 74px; top: 42px; border-left-width: 22px; border-left-color: #000; } -.reveal .controls div.navigate-right.fragmented { +.reveal .controls .navigate-right.fragmented { opacity: 0.3; } -.reveal .controls div.navigate-up { +.reveal .controls .navigate-up { left: 42px; border-bottom-width: 22px; border-bottom-color: #000; } -.reveal .controls div.navigate-up.fragmented { +.reveal .controls .navigate-up.fragmented { opacity: 0.3; } -.reveal .controls div.navigate-down { +.reveal .controls .navigate-down { left: 42px; top: 74px; border-top-width: 22px; border-top-color: #000; } -.reveal .controls div.navigate-down.fragmented { +.reveal .controls .navigate-down.fragmented { opacity: 0.3; } /********************************************* @@ -262,11 +296,18 @@ body { .reveal .slide-number { position: fixed; display: block; - right: 15px; - bottom: 15px; - opacity: 0.5; + right: 8px; + bottom: 8px; z-index: 31; - font-size: 12px; } + font-family: Helvetica, sans-serif; + font-size: 12px; + line-height: 1; + color: #fff; + background-color: rgba(0, 0, 0, 0.4); + padding: 5px; } + +.reveal .slide-number-delimiter { + margin: 0 3px; } /********************************************* * SLIDES @@ -275,6 +316,7 @@ body { position: relative; width: 100%; height: 100%; + overflow: hidden; -ms-touch-action: none; touch-action: none; } @@ -298,7 +340,8 @@ body { .reveal .slides > section { -ms-perspective: 600px; } -.reveal .slides > section, .reveal .slides > section > section { +.reveal .slides > section, +.reveal .slides > section > section { display: none; position: absolute; width: 100%; @@ -307,7 +350,6 @@ body { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: -webkit-transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), -webkit-transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); - transition: -ms-transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } /* Global transition speed settings */ @@ -332,118 +374,208 @@ body { padding-top: 0; padding-bottom: 0; } -.reveal .slides > section.present, .reveal .slides > section > section.present { +.reveal .slides > section.present, +.reveal .slides > section > section.present { display: block; z-index: 11; opacity: 1; } -.reveal.center, .reveal.center .slides, .reveal.center .slides section { +.reveal.center, +.reveal.center .slides, +.reveal.center .slides section { min-height: 0 !important; } /* Don't allow interaction with invisible slides */ -.reveal .slides > section.future, .reveal .slides > section > section.future, .reveal .slides > section.past, .reveal .slides > section > section.past { +.reveal .slides > section.future, +.reveal .slides > section > section.future, +.reveal .slides > section.past, +.reveal .slides > section > section.past { pointer-events: none; } -.reveal.overview .slides > section, .reveal.overview .slides > section > section { +.reveal.overview .slides > section, +.reveal.overview .slides > section > section { pointer-events: auto; } -.reveal .slides > section.past, .reveal .slides > section.future, .reveal .slides > section > section.past, .reveal .slides > section > section.future { +.reveal .slides > section.past, +.reveal .slides > section.future, +.reveal .slides > section > section.past, +.reveal .slides > section > section.future { opacity: 0; } /********************************************* + * Mixins for readability of transitions + *********************************************/ +/********************************************* * SLIDE TRANSITION * Aliased 'linear' for backwards compatibility *********************************************/ -.reveal.slide section, .reveal.linear section { +.reveal.slide section { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.reveal .slides > section[data-transition=slide].past, +.reveal .slides > section[data-transition~=slide-out].past, +.reveal.slide .slides > section:not([data-transition]).past { + -webkit-transform: translate(-150%, 0); + transform: translate(-150%, 0); } + +.reveal .slides > section[data-transition=slide].future, +.reveal .slides > section[data-transition~=slide-in].future, +.reveal.slide .slides > section:not([data-transition]).future { + -webkit-transform: translate(150%, 0); + transform: translate(150%, 0); } + +.reveal .slides > section > section[data-transition=slide].past, +.reveal .slides > section > section[data-transition~=slide-out].past, +.reveal.slide .slides > section > section:not([data-transition]).past { + -webkit-transform: translate(0, -150%); + transform: translate(0, -150%); } + +.reveal .slides > section > section[data-transition=slide].future, +.reveal .slides > section > section[data-transition~=slide-in].future, +.reveal.slide .slides > section > section:not([data-transition]).future { + -webkit-transform: translate(0, 150%); + transform: translate(0, 150%); } + +.reveal.linear section { -webkit-backface-visibility: hidden; backface-visibility: hidden; } -.reveal .slides > section[data-transition=slide].past, .reveal.slide .slides > section:not([data-transition]).past, .reveal .slides > section[data-transition=linear].past, .reveal.linear .slides > section:not([data-transition]).past { +.reveal .slides > section[data-transition=linear].past, +.reveal .slides > section[data-transition~=linear-out].past, +.reveal.linear .slides > section:not([data-transition]).past { -webkit-transform: translate(-150%, 0); - -ms-transform: translate(-150%, 0); transform: translate(-150%, 0); } -.reveal .slides > section[data-transition=slide].future, .reveal.slide .slides > section:not([data-transition]).future, .reveal .slides > section[data-transition=linear].future, .reveal.linear .slides > section:not([data-transition]).future { +.reveal .slides > section[data-transition=linear].future, +.reveal .slides > section[data-transition~=linear-in].future, +.reveal.linear .slides > section:not([data-transition]).future { -webkit-transform: translate(150%, 0); - -ms-transform: translate(150%, 0); transform: translate(150%, 0); } -.reveal .slides > section > section[data-transition=slide].past, .reveal.slide .slides > section > section:not([data-transition]).past, .reveal .slides > section > section[data-transition=linear].past, .reveal.linear .slides > section > section:not([data-transition]).past { +.reveal .slides > section > section[data-transition=linear].past, +.reveal .slides > section > section[data-transition~=linear-out].past, +.reveal.linear .slides > section > section:not([data-transition]).past { -webkit-transform: translate(0, -150%); - -ms-transform: translate(0, -150%); transform: translate(0, -150%); } -.reveal .slides > section > section[data-transition=slide].future, .reveal.slide .slides > section > section:not([data-transition]).future, .reveal .slides > section > section[data-transition=linear].future, .reveal.linear .slides > section > section:not([data-transition]).future { +.reveal .slides > section > section[data-transition=linear].future, +.reveal .slides > section > section[data-transition~=linear-in].future, +.reveal.linear .slides > section > section:not([data-transition]).future { -webkit-transform: translate(0, 150%); - -ms-transform: translate(0, 150%); transform: translate(0, 150%); } /********************************************* * CONVEX TRANSITION * Aliased 'default' for backwards compatibility *********************************************/ -.reveal .slides > section[data-transition=default].past, .reveal.default .slides > section:not([data-transition]).past, .reveal .slides > section[data-transition=convex].past, .reveal.convex .slides > section:not([data-transition]).past { +.reveal .slides > section[data-transition=default].past, +.reveal .slides > section[data-transition~=default-out].past, +.reveal.default .slides > section:not([data-transition]).past { + -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); } + +.reveal .slides > section[data-transition=default].future, +.reveal .slides > section[data-transition~=default-in].future, +.reveal.default .slides > section:not([data-transition]).future { + -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); } + +.reveal .slides > section > section[data-transition=default].past, +.reveal .slides > section > section[data-transition~=default-out].past, +.reveal.default .slides > section > section:not([data-transition]).past { + -webkit-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); + transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); } + +.reveal .slides > section > section[data-transition=default].future, +.reveal .slides > section > section[data-transition~=default-in].future, +.reveal.default .slides > section > section:not([data-transition]).future { + -webkit-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); + transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); } + +.reveal .slides > section[data-transition=convex].past, +.reveal .slides > section[data-transition~=convex-out].past, +.reveal.convex .slides > section:not([data-transition]).past { -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); } -.reveal .slides > section[data-transition=default].future, .reveal.default .slides > section:not([data-transition]).future, .reveal .slides > section[data-transition=convex].future, .reveal.convex .slides > section:not([data-transition]).future { +.reveal .slides > section[data-transition=convex].future, +.reveal .slides > section[data-transition~=convex-in].future, +.reveal.convex .slides > section:not([data-transition]).future { -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); } -.reveal .slides > section > section[data-transition=default].past, .reveal.default .slides > section > section:not([data-transition]).past, .reveal .slides > section > section[data-transition=convex].past, .reveal.convex .slides > section > section:not([data-transition]).past { +.reveal .slides > section > section[data-transition=convex].past, +.reveal .slides > section > section[data-transition~=convex-out].past, +.reveal.convex .slides > section > section:not([data-transition]).past { -webkit-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); } -.reveal .slides > section > section[data-transition=default].future, .reveal.default .slides > section > section:not([data-transition]).future, .reveal .slides > section > section[data-transition=convex].future, .reveal.convex .slides > section > section:not([data-transition]).future { +.reveal .slides > section > section[data-transition=convex].future, +.reveal .slides > section > section[data-transition~=convex-in].future, +.reveal.convex .slides > section > section:not([data-transition]).future { -webkit-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); } /********************************************* * CONCAVE TRANSITION *********************************************/ -.reveal .slides > section[data-transition=concave].past, .reveal.concave .slides > section:not([data-transition]).past { +.reveal .slides > section[data-transition=concave].past, +.reveal .slides > section[data-transition~=concave-out].past, +.reveal.concave .slides > section:not([data-transition]).past { -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); } -.reveal .slides > section[data-transition=concave].future, .reveal.concave .slides > section:not([data-transition]).future { +.reveal .slides > section[data-transition=concave].future, +.reveal .slides > section[data-transition~=concave-in].future, +.reveal.concave .slides > section:not([data-transition]).future { -webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); } -.reveal .slides > section > section[data-transition=concave].past, .reveal.concave .slides > section > section:not([data-transition]).past { +.reveal .slides > section > section[data-transition=concave].past, +.reveal .slides > section > section[data-transition~=concave-out].past, +.reveal.concave .slides > section > section:not([data-transition]).past { -webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0); transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0); } -.reveal .slides > section > section[data-transition=concave].future, .reveal.concave .slides > section > section:not([data-transition]).future { +.reveal .slides > section > section[data-transition=concave].future, +.reveal .slides > section > section[data-transition~=concave-in].future, +.reveal.concave .slides > section > section:not([data-transition]).future { -webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); } /********************************************* * ZOOM TRANSITION *********************************************/ -.reveal .slides > section[data-transition=zoom], .reveal.zoom .slides > section:not([data-transition]) { +.reveal .slides section[data-transition=zoom], +.reveal.zoom .slides section:not([data-transition]) { -webkit-transition-timing-function: ease; transition-timing-function: ease; } -.reveal .slides > section[data-transition=zoom].past, .reveal.zoom .slides > section:not([data-transition]).past { +.reveal .slides > section[data-transition=zoom].past, +.reveal .slides > section[data-transition~=zoom-out].past, +.reveal.zoom .slides > section:not([data-transition]).past { visibility: hidden; -webkit-transform: scale(16); - -ms-transform: scale(16); transform: scale(16); } -.reveal .slides > section[data-transition=zoom].future, .reveal.zoom .slides > section:not([data-transition]).future { +.reveal .slides > section[data-transition=zoom].future, +.reveal .slides > section[data-transition~=zoom-in].future, +.reveal.zoom .slides > section:not([data-transition]).future { visibility: hidden; -webkit-transform: scale(0.2); - -ms-transform: scale(0.2); transform: scale(0.2); } -.reveal .slides > section > section[data-transition=zoom].past, .reveal.zoom .slides > section > section:not([data-transition]).past { +.reveal .slides > section > section[data-transition=zoom].past, +.reveal .slides > section > section[data-transition~=zoom-out].past, +.reveal.zoom .slides > section > section:not([data-transition]).past { -webkit-transform: translate(0, -150%); - -ms-transform: translate(0, -150%); transform: translate(0, -150%); } -.reveal .slides > section > section[data-transition=zoom].future, .reveal.zoom .slides > section > section:not([data-transition]).future { +.reveal .slides > section > section[data-transition=zoom].future, +.reveal .slides > section > section[data-transition~=zoom-in].future, +.reveal.zoom .slides > section > section:not([data-transition]).future { -webkit-transform: translate(0, 150%); - -ms-transform: translate(0, 150%); transform: translate(0, 150%); } /********************************************* @@ -458,8 +590,7 @@ body { min-height: 700px; -webkit-backface-visibility: hidden; backface-visibility: hidden; - -moz-box-sizing: border-box; - box-sizing: border-box; } + box-sizing: border-box; } .reveal.center.cube .slides section { min-height: 0; } @@ -498,28 +629,24 @@ body { .reveal.cube .slides > section.past { -webkit-transform-origin: 100% 0%; - -ms-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg); transform: translate3d(-100%, 0, 0) rotateY(-90deg); } .reveal.cube .slides > section.future { -webkit-transform-origin: 0% 0%; - -ms-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg); transform: translate3d(100%, 0, 0) rotateY(90deg); } .reveal.cube .slides > section > section.past { -webkit-transform-origin: 0% 100%; - -ms-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: translate3d(0, -100%, 0) rotateX(90deg); transform: translate3d(0, -100%, 0) rotateX(90deg); } .reveal.cube .slides > section > section.future { -webkit-transform-origin: 0% 0%; - -ms-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: translate3d(0, 100%, 0) rotateX(-90deg); transform: translate3d(0, 100%, 0) rotateX(-90deg); } @@ -536,8 +663,7 @@ body { .reveal.page .slides section { padding: 30px; min-height: 700px; - -moz-box-sizing: border-box; - box-sizing: border-box; } + box-sizing: border-box; } .reveal.page .slides section.past { z-index: 12; } @@ -574,28 +700,24 @@ body { .reveal.page .slides > section.past { -webkit-transform-origin: 0% 0%; - -ms-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: translate3d(-40%, 0, 0) rotateY(-80deg); transform: translate3d(-40%, 0, 0) rotateY(-80deg); } .reveal.page .slides > section.future { -webkit-transform-origin: 100% 0%; - -ms-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .reveal.page .slides > section > section.past { -webkit-transform-origin: 0% 0%; - -ms-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: translate3d(0, -40%, 0) rotateX(80deg); transform: translate3d(0, -40%, 0) rotateX(80deg); } .reveal.page .slides > section > section.future { -webkit-transform-origin: 0% 100%; - -ms-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } @@ -603,73 +725,30 @@ body { /********************************************* * FADE TRANSITION *********************************************/ -.reveal .slides section[data-transition=fade], .reveal.fade .slides section:not([data-transition]), .reveal.fade .slides > section > section:not([data-transition]) { +.reveal .slides section[data-transition=fade], +.reveal.fade .slides section:not([data-transition]), +.reveal.fade .slides > section > section:not([data-transition]) { -webkit-transform: none; - -ms-transform: none; transform: none; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } -.reveal.fade.overview .slides section, .reveal.fade.overview .slides > section > section { +.reveal.fade.overview .slides section, +.reveal.fade.overview .slides > section > section { -webkit-transition: none; transition: none; } /********************************************* * NO TRANSITION *********************************************/ -.reveal .slides section[data-transition=none], .reveal.none .slides section:not([data-transition]) { +.reveal .slides section[data-transition=none], +.reveal.none .slides section:not([data-transition]) { -webkit-transform: none; - -ms-transform: none; transform: none; -webkit-transition: none; transition: none; } /********************************************* - * OVERVIEW - *********************************************/ -.reveal.overview .slides { - -webkit-perspective-origin: 50% 50%; - perspective-origin: 50% 50%; - -webkit-perspective: 700px; - perspective: 700px; } - -.reveal.overview .slides section { - height: 700px; - overflow: hidden; - opacity: 1 !important; - visibility: visible !important; - cursor: pointer; - background: rgba(0, 0, 0, 0.1); - -moz-box-sizing: border-box; - box-sizing: border-box; } - -.reveal.overview .slides section, .reveal.overview-deactivating .slides section { - -webkit-transition: none !important; - transition: none !important; } - -.reveal.overview .slides section .fragment { - opacity: 1; } - -.reveal.overview .slides section:after, .reveal.overview .slides section:before { - display: none !important; } - -.reveal.overview .slides section > section { - opacity: 1; - cursor: pointer; } - -.reveal.overview .slides section:hover { - background: rgba(0, 0, 0, 0.3); } - -.reveal.overview .slides section.present { - background: rgba(0, 0, 0, 0.3); } - -.reveal.overview .slides > section.stack { - padding: 0; - top: 0 !important; - background: none; - overflow: visible; } - -/********************************************* * PAUSED MODE *********************************************/ .reveal .pause-overlay { @@ -704,7 +783,8 @@ body { margin: 0; text-align: center; } -.no-transforms .reveal .controls, .no-transforms .reveal .progress { +.no-transforms .reveal .controls, +.no-transforms .reveal .progress { display: none !important; } .no-transforms .reveal .slides section { @@ -717,20 +797,20 @@ body { left: -50%; margin: 70px 0; -webkit-transform: none; - -ms-transform: none; transform: none; } .no-transforms .reveal .slides section section { left: 0; } -.reveal .no-transition, .reveal .no-transition * { +.reveal .no-transition, +.reveal .no-transition * { -webkit-transition: none !important; transition: none !important; } /********************************************* * PER-SLIDE BACKGROUNDS *********************************************/ -.reveal > .backgrounds { +.reveal .backgrounds { position: absolute; width: 100%; height: 100%; @@ -746,7 +826,7 @@ body { height: 100%; opacity: 0; visibility: hidden; - background-color: rgba(0, 0, 0, 0); + background-color: transparent; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; @@ -775,109 +855,120 @@ body { left: 0; } /* Immediate transition style */ -.reveal[data-background-transition=none] > .backgrounds .slide-background, .reveal > .backgrounds .slide-background[data-background-transition=none] { +.reveal[data-background-transition=none] > .backgrounds .slide-background, +.reveal > .backgrounds .slide-background[data-background-transition=none] { -webkit-transition: none; transition: none; } /* Slide */ -.reveal[data-background-transition=slide] > .backgrounds .slide-background, .reveal > .backgrounds .slide-background[data-background-transition=slide] { +.reveal[data-background-transition=slide] > .backgrounds .slide-background, +.reveal > .backgrounds .slide-background[data-background-transition=slide] { opacity: 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; } -.reveal[data-background-transition=slide] > .backgrounds .slide-background.past, .reveal > .backgrounds .slide-background.past[data-background-transition=slide] { +.reveal[data-background-transition=slide] > .backgrounds .slide-background.past, +.reveal > .backgrounds .slide-background.past[data-background-transition=slide] { -webkit-transform: translate(-100%, 0); - -ms-transform: translate(-100%, 0); transform: translate(-100%, 0); } -.reveal[data-background-transition=slide] > .backgrounds .slide-background.future, .reveal > .backgrounds .slide-background.future[data-background-transition=slide] { +.reveal[data-background-transition=slide] > .backgrounds .slide-background.future, +.reveal > .backgrounds .slide-background.future[data-background-transition=slide] { -webkit-transform: translate(100%, 0); - -ms-transform: translate(100%, 0); transform: translate(100%, 0); } -.reveal[data-background-transition=slide] > .backgrounds .slide-background > .slide-background.past, .reveal > .backgrounds .slide-background > .slide-background.past[data-background-transition=slide] { +.reveal[data-background-transition=slide] > .backgrounds .slide-background > .slide-background.past, +.reveal > .backgrounds .slide-background > .slide-background.past[data-background-transition=slide] { -webkit-transform: translate(0, -100%); - -ms-transform: translate(0, -100%); transform: translate(0, -100%); } -.reveal[data-background-transition=slide] > .backgrounds .slide-background > .slide-background.future, .reveal > .backgrounds .slide-background > .slide-background.future[data-background-transition=slide] { +.reveal[data-background-transition=slide] > .backgrounds .slide-background > .slide-background.future, +.reveal > .backgrounds .slide-background > .slide-background.future[data-background-transition=slide] { -webkit-transform: translate(0, 100%); - -ms-transform: translate(0, 100%); transform: translate(0, 100%); } /* Convex */ -.reveal[data-background-transition=convex] > .backgrounds .slide-background.past, .reveal > .backgrounds .slide-background.past[data-background-transition=convex] { +.reveal[data-background-transition=convex] > .backgrounds .slide-background.past, +.reveal > .backgrounds .slide-background.past[data-background-transition=convex] { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); } -.reveal[data-background-transition=convex] > .backgrounds .slide-background.future, .reveal > .backgrounds .slide-background.future[data-background-transition=convex] { +.reveal[data-background-transition=convex] > .backgrounds .slide-background.future, +.reveal > .backgrounds .slide-background.future[data-background-transition=convex] { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); } -.reveal[data-background-transition=convex] > .backgrounds .slide-background > .slide-background.past, .reveal > .backgrounds .slide-background > .slide-background.past[data-background-transition=convex] { +.reveal[data-background-transition=convex] > .backgrounds .slide-background > .slide-background.past, +.reveal > .backgrounds .slide-background > .slide-background.past[data-background-transition=convex] { opacity: 0; -webkit-transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0); } -.reveal[data-background-transition=convex] > .backgrounds .slide-background > .slide-background.future, .reveal > .backgrounds .slide-background > .slide-background.future[data-background-transition=convex] { +.reveal[data-background-transition=convex] > .backgrounds .slide-background > .slide-background.future, +.reveal > .backgrounds .slide-background > .slide-background.future[data-background-transition=convex] { opacity: 0; -webkit-transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0); } /* Concave */ -.reveal[data-background-transition=concave] > .backgrounds .slide-background.past, .reveal > .backgrounds .slide-background.past[data-background-transition=concave] { +.reveal[data-background-transition=concave] > .backgrounds .slide-background.past, +.reveal > .backgrounds .slide-background.past[data-background-transition=concave] { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); } -.reveal[data-background-transition=concave] > .backgrounds .slide-background.future, .reveal > .backgrounds .slide-background.future[data-background-transition=concave] { +.reveal[data-background-transition=concave] > .backgrounds .slide-background.future, +.reveal > .backgrounds .slide-background.future[data-background-transition=concave] { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); } -.reveal[data-background-transition=concave] > .backgrounds .slide-background > .slide-background.past, .reveal > .backgrounds .slide-background > .slide-background.past[data-background-transition=concave] { +.reveal[data-background-transition=concave] > .backgrounds .slide-background > .slide-background.past, +.reveal > .backgrounds .slide-background > .slide-background.past[data-background-transition=concave] { opacity: 0; -webkit-transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0); } -.reveal[data-background-transition=concave] > .backgrounds .slide-background > .slide-background.future, .reveal > .backgrounds .slide-background > .slide-background.future[data-background-transition=concave] { +.reveal[data-background-transition=concave] > .backgrounds .slide-background > .slide-background.future, +.reveal > .backgrounds .slide-background > .slide-background.future[data-background-transition=concave] { opacity: 0; -webkit-transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0); } /* Zoom */ -.reveal[data-background-transition=zoom] > .backgrounds .slide-background, .reveal > .backgrounds .slide-background[data-background-transition=zoom] { +.reveal[data-background-transition=zoom] > .backgrounds .slide-background, +.reveal > .backgrounds .slide-background[data-background-transition=zoom] { -webkit-transition-timing-function: ease; transition-timing-function: ease; } -.reveal[data-background-transition=zoom] > .backgrounds .slide-background.past, .reveal > .backgrounds .slide-background.past[data-background-transition=zoom] { +.reveal[data-background-transition=zoom] > .backgrounds .slide-background.past, +.reveal > .backgrounds .slide-background.past[data-background-transition=zoom] { opacity: 0; visibility: hidden; -webkit-transform: scale(16); - -ms-transform: scale(16); transform: scale(16); } -.reveal[data-background-transition=zoom] > .backgrounds .slide-background.future, .reveal > .backgrounds .slide-background.future[data-background-transition=zoom] { +.reveal[data-background-transition=zoom] > .backgrounds .slide-background.future, +.reveal > .backgrounds .slide-background.future[data-background-transition=zoom] { opacity: 0; visibility: hidden; -webkit-transform: scale(0.2); - -ms-transform: scale(0.2); transform: scale(0.2); } -.reveal[data-background-transition=zoom] > .backgrounds .slide-background > .slide-background.past, .reveal > .backgrounds .slide-background > .slide-background.past[data-background-transition=zoom] { +.reveal[data-background-transition=zoom] > .backgrounds .slide-background > .slide-background.past, +.reveal > .backgrounds .slide-background > .slide-background.past[data-background-transition=zoom] { opacity: 0; visibility: hidden; -webkit-transform: scale(16); - -ms-transform: scale(16); transform: scale(16); } -.reveal[data-background-transition=zoom] > .backgrounds .slide-background > .slide-background.future, .reveal > .backgrounds .slide-background > .slide-background.future[data-background-transition=zoom] { +.reveal[data-background-transition=zoom] > .backgrounds .slide-background > .slide-background.future, +.reveal > .backgrounds .slide-background > .slide-background.future[data-background-transition=zoom] { opacity: 0; visibility: hidden; -webkit-transform: scale(0.2); - -ms-transform: scale(0.2); transform: scale(0.2); } /* Global transition speed settings */ @@ -890,16 +981,79 @@ body { transition-duration: 1200ms; } /********************************************* + * OVERVIEW + *********************************************/ +.reveal.overview { + -webkit-perspective-origin: 50% 50%; + perspective-origin: 50% 50%; + -webkit-perspective: 700px; + perspective: 700px; } + .reveal.overview .slides section { + height: 700px; + opacity: 1 !important; + overflow: hidden; + visibility: visible !important; + cursor: pointer; + box-sizing: border-box; } + .reveal.overview .slides section:hover, + .reveal.overview .slides section.present { + outline: 10px solid rgba(150, 150, 150, 0.4); + outline-offset: 10px; } + .reveal.overview .slides section .fragment { + opacity: 1; + -webkit-transition: none; + transition: none; } + .reveal.overview .slides section:after, + .reveal.overview .slides section:before { + display: none !important; } + .reveal.overview .slides > section.stack { + padding: 0; + top: 0 !important; + background: none; + outline: none; + overflow: visible; } + .reveal.overview .backgrounds { + -webkit-perspective: inherit; + perspective: inherit; } + .reveal.overview .backgrounds .slide-background { + opacity: 1; + visibility: visible; + outline: 10px solid rgba(150, 150, 150, 0.1); + outline-offset: 10px; } + +.reveal.overview .slides section, +.reveal.overview-deactivating .slides section { + -webkit-transition: none; + transition: none; } + +.reveal.overview .backgrounds .slide-background, +.reveal.overview-deactivating .backgrounds .slide-background { + -webkit-transition: none; + transition: none; } + +.reveal.overview-animated .slides { + -webkit-transition: -webkit-transform 0.4s ease; + transition: transform 0.4s ease; } + +/********************************************* * RTL SUPPORT *********************************************/ -.reveal.rtl .slides, .reveal.rtl .slides h1, .reveal.rtl .slides h2, .reveal.rtl .slides h3, .reveal.rtl .slides h4, .reveal.rtl .slides h5, .reveal.rtl .slides h6 { +.reveal.rtl .slides, +.reveal.rtl .slides h1, +.reveal.rtl .slides h2, +.reveal.rtl .slides h3, +.reveal.rtl .slides h4, +.reveal.rtl .slides h5, +.reveal.rtl .slides h6 { direction: rtl; font-family: sans-serif; } -.reveal.rtl pre, .reveal.rtl code { +.reveal.rtl pre, +.reveal.rtl code { direction: ltr; } -.reveal.rtl ol, .reveal.rtl ul { +.reveal.rtl ol, +.reveal.rtl ul { text-align: right; } .reveal.rtl .progress span { @@ -972,8 +1126,7 @@ body { padding: 0 10px; float: right; opacity: 0.6; - -moz-box-sizing: border-box; - box-sizing: border-box; } + box-sizing: border-box; } .reveal .overlay header a:hover { opacity: 1; } @@ -994,6 +1147,10 @@ body { .reveal .overlay .viewport { position: absolute; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; top: 40px; right: 0; bottom: 0; @@ -1018,7 +1175,6 @@ body { opacity: 0; visibility: hidden; -webkit-transform: scale(0.2); - -ms-transform: scale(0.2); transform: scale(0.2); } .reveal .overlay.overlay-help .viewport { @@ -1027,8 +1183,8 @@ body { .reveal .overlay.overlay-help .viewport .viewport-inner { width: 600px; - margin: 0 auto; - padding: 60px; + margin: auto; + padding: 20px 20px 80px 20px; text-align: center; letter-spacing: normal; } @@ -1038,11 +1194,12 @@ body { .reveal .overlay.overlay-help .viewport .viewport-inner table { border: 1px solid #fff; border-collapse: collapse; - font-size: 14px; } + font-size: 16px; } -.reveal .overlay.overlay-help .viewport .viewport-inner table th, .reveal .overlay.overlay-help .viewport .viewport-inner table td { +.reveal .overlay.overlay-help .viewport .viewport-inner table th, +.reveal .overlay.overlay-help .viewport .viewport-inner table td { width: 200px; - padding: 10px; + padding: 14px; border: 1px solid #fff; vertical-align: middle; } @@ -1056,7 +1213,7 @@ body { .reveal .playback { position: fixed; left: 15px; - bottom: 15px; + bottom: 20px; z-index: 30; cursor: pointer; -webkit-transition: all 400ms ease; @@ -1091,7 +1248,6 @@ body { -webkit-transition: all 400ms ease; transition: all 400ms ease; -webkit-transform-origin: 50% 0%; - -ms-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; @@ -1113,7 +1269,6 @@ body { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-origin: 50% 0%; - -ms-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: translate3d(0px, 110%, 0px) rotateX(-90deg); transform: translate3d(0px, 110%, 0px) rotateX(-90deg); } @@ -1124,14 +1279,48 @@ body { .reveal aside.notes { display: none; } +.reveal .speaker-notes { + display: none; + position: absolute; + width: 70%; + max-height: 15%; + left: 15%; + bottom: 26px; + padding: 10px; + z-index: 1; + font-size: 18px; + line-height: 1.4; + color: #fff; + background-color: rgba(0, 0, 0, 0.5); + overflow: auto; + box-sizing: border-box; + text-align: left; + font-family: Helvetica, sans-serif; + -webkit-overflow-scrolling: touch; } + +.reveal .speaker-notes.visible:not(:empty) { + display: block; } + +@media screen and (max-width: 1024px) { + .reveal .speaker-notes { + font-size: 14px; } } + +@media screen and (max-width: 600px) { + .reveal .speaker-notes { + width: 90%; + left: 5%; } } + /********************************************* * ZOOM PLUGIN *********************************************/ -.zoomed .reveal *, .zoomed .reveal *:before, .zoomed .reveal *:after { +.zoomed .reveal *, +.zoomed .reveal *:before, +.zoomed .reveal *:after { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } -.zoomed .reveal .progress, .zoomed .reveal .controls { +.zoomed .reveal .progress, +.zoomed .reveal .controls { opacity: 0; } .zoomed .reveal .roll span { diff --git a/css/reveal.scss b/css/reveal.scss index 6cc21ba..da1fb22 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -3,7 +3,7 @@ * http://lab.hakim.se/reveal-js * MIT licensed * - * Copyright (C) 2015 Hakim El Hattab, http://hakim.se + * Copyright (C) 2016 Hakim El Hattab, http://hakim.se */ @@ -57,16 +57,13 @@ body { color: #000; } -::-moz-selection { - background: #FF5E99; - color: #fff; - text-shadow: none; +// Ensures that the main background color matches the +// theme in fullscreen mode +html:-webkit-full-screen-ancestor { + background-color: inherit; } - -::selection { - background: #FF5E99; - color: #fff; - text-shadow: none; +html:-moz-full-screen-ancestor { + background-color: inherit; } @@ -107,15 +104,7 @@ body { transform: scale( 0.1 ); &.visible { - transform: scale( 1 ); - } -} - -.reveal .slides section .fragment.roll-in { - transform: rotateX( 90deg ); - - &.visible { - transform: rotateX( 0 ); + transform: none; } } @@ -141,12 +130,45 @@ body { .reveal .slides section .fragment.strike { opacity: 1; + visibility: visible; &.visible { text-decoration: line-through; } } +.reveal .slides section .fragment.fade-up { + transform: translate(0, 20%); + + &.visible { + transform: translate(0, 0); + } +} + +.reveal .slides section .fragment.fade-down { + transform: translate(0, -20%); + + &.visible { + transform: translate(0, 0); + } +} + +.reveal .slides section .fragment.fade-right { + transform: translate(-20%, 0); + + &.visible { + transform: translate(0, 0); + } +} + +.reveal .slides section .fragment.fade-left { + transform: translate(20%, 0); + + &.visible { + transform: translate(0, 0); + } +} + .reveal .slides section .fragment.current-visible { opacity: 0; visibility: hidden; @@ -234,66 +256,68 @@ body { -webkit-user-select: none; } -.reveal .controls div { +.reveal .controls button { + padding: 0; position: absolute; opacity: 0.05; width: 0; height: 0; + background-color: transparent; border: 12px solid transparent; transform: scale(.9999); transition: all 0.2s ease; - + -webkit-appearance: none; -webkit-tap-highlight-color: rgba( 0, 0, 0, 0 ); } -.reveal .controls div.enabled { +.reveal .controls .enabled { opacity: 0.7; cursor: pointer; } -.reveal .controls div.enabled:active { +.reveal .controls .enabled:active { margin-top: 1px; } - .reveal .controls div.navigate-left { + .reveal .controls .navigate-left { top: 42px; border-right-width: 22px; border-right-color: #000; } - .reveal .controls div.navigate-left.fragmented { + .reveal .controls .navigate-left.fragmented { opacity: 0.3; } - .reveal .controls div.navigate-right { + .reveal .controls .navigate-right { left: 74px; top: 42px; border-left-width: 22px; border-left-color: #000; } - .reveal .controls div.navigate-right.fragmented { + .reveal .controls .navigate-right.fragmented { opacity: 0.3; } - .reveal .controls div.navigate-up { + .reveal .controls .navigate-up { left: 42px; border-bottom-width: 22px; border-bottom-color: #000; } - .reveal .controls div.navigate-up.fragmented { + .reveal .controls .navigate-up.fragmented { opacity: 0.3; } - .reveal .controls div.navigate-down { + .reveal .controls .navigate-down { left: 42px; top: 74px; border-top-width: 22px; border-top-color: #000; } - .reveal .controls div.navigate-down.fragmented { + .reveal .controls .navigate-down.fragmented { opacity: 0.3; } @@ -337,11 +361,19 @@ body { .reveal .slide-number { position: fixed; display: block; - right: 15px; - bottom: 15px; - opacity: 0.5; + right: 8px; + bottom: 8px; z-index: 31; + font-family: Helvetica, sans-serif; font-size: 12px; + line-height: 1; + color: #fff; + background-color: rgba( 0, 0, 0, 0.4 ); + padding: 5px; +} + +.reveal .slide-number-delimiter { + margin: 0 3px; } /********************************************* @@ -352,6 +384,7 @@ body { position: relative; width: 100%; height: 100%; + overflow: hidden; touch-action: none; } @@ -447,93 +480,102 @@ body { /********************************************* - * SLIDE TRANSITION - * Aliased 'linear' for backwards compatibility + * Mixins for readability of transitions *********************************************/ -.reveal.slide section, -.reveal.linear section { - backface-visibility: hidden; +@mixin transition-global($style) { + .reveal .slides section[data-transition=#{$style}], + .reveal.#{$style} .slides section:not([data-transition]) { + @content; + } } - -.reveal .slides>section[data-transition=slide].past, -.reveal.slide .slides>section:not([data-transition]).past, -.reveal .slides>section[data-transition=linear].past, -.reveal.linear .slides>section:not([data-transition]).past { - transform: translate(-150%, 0); +@mixin transition-horizontal-past($style) { + .reveal .slides>section[data-transition=#{$style}].past, + .reveal .slides>section[data-transition~=#{$style}-out].past, + .reveal.#{$style} .slides>section:not([data-transition]).past { + @content; + } } -.reveal .slides>section[data-transition=slide].future, -.reveal.slide .slides>section:not([data-transition]).future, -.reveal .slides>section[data-transition=linear].future, -.reveal.linear .slides>section:not([data-transition]).future { - transform: translate(150%, 0); +@mixin transition-horizontal-future($style) { + .reveal .slides>section[data-transition=#{$style}].future, + .reveal .slides>section[data-transition~=#{$style}-in].future, + .reveal.#{$style} .slides>section:not([data-transition]).future { + @content; + } } -.reveal .slides>section>section[data-transition=slide].past, -.reveal.slide .slides>section>section:not([data-transition]).past, -.reveal .slides>section>section[data-transition=linear].past, -.reveal.linear .slides>section>section:not([data-transition]).past { - transform: translate(0, -150%); +@mixin transition-vertical-past($style) { + .reveal .slides>section>section[data-transition=#{$style}].past, + .reveal .slides>section>section[data-transition~=#{$style}-out].past, + .reveal.#{$style} .slides>section>section:not([data-transition]).past { + @content; + } } -.reveal .slides>section>section[data-transition=slide].future, -.reveal.slide .slides>section>section:not([data-transition]).future, -.reveal .slides>section>section[data-transition=linear].future, -.reveal.linear .slides>section>section:not([data-transition]).future { - transform: translate(0, 150%); +@mixin transition-vertical-future($style) { + .reveal .slides>section>section[data-transition=#{$style}].future, + .reveal .slides>section>section[data-transition~=#{$style}-in].future, + .reveal.#{$style} .slides>section>section:not([data-transition]).future { + @content; + } } +/********************************************* + * SLIDE TRANSITION + * Aliased 'linear' for backwards compatibility + *********************************************/ + +@each $stylename in slide, linear { + .reveal.#{$stylename} section { + backface-visibility: hidden; + } + @include transition-horizontal-past(#{$stylename}) { + transform: translate(-150%, 0); + } + @include transition-horizontal-future(#{$stylename}) { + transform: translate(150%, 0); + } + @include transition-vertical-past(#{$stylename}) { + transform: translate(0, -150%); + } + @include transition-vertical-future(#{$stylename}) { + transform: translate(0, 150%); + } +} /********************************************* * CONVEX TRANSITION * Aliased 'default' for backwards compatibility *********************************************/ -.reveal .slides>section[data-transition=default].past, -.reveal.default .slides>section:not([data-transition]).past, -.reveal .slides>section[data-transition=convex].past, -.reveal.convex .slides>section:not([data-transition]).past { - transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); -} -.reveal .slides>section[data-transition=default].future, -.reveal.default .slides>section:not([data-transition]).future, -.reveal .slides>section[data-transition=convex].future, -.reveal.convex .slides>section:not([data-transition]).future { - transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); -} - -.reveal .slides>section>section[data-transition=default].past, -.reveal.default .slides>section>section:not([data-transition]).past, -.reveal .slides>section>section[data-transition=convex].past, -.reveal.convex .slides>section>section:not([data-transition]).past { - transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); -} -.reveal .slides>section>section[data-transition=default].future, -.reveal.default .slides>section>section:not([data-transition]).future, -.reveal .slides>section>section[data-transition=convex].future, -.reveal.convex .slides>section>section:not([data-transition]).future { - transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); +@each $stylename in default, convex { + @include transition-horizontal-past(#{$stylename}) { + transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); + } + @include transition-horizontal-future(#{$stylename}) { + transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); + } + @include transition-vertical-past(#{$stylename}) { + transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); + } + @include transition-vertical-future(#{$stylename}) { + transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); + } } - /********************************************* * CONCAVE TRANSITION *********************************************/ -.reveal .slides>section[data-transition=concave].past, -.reveal.concave .slides>section:not([data-transition]).past { +@include transition-horizontal-past(concave) { transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); } -.reveal .slides>section[data-transition=concave].future, -.reveal.concave .slides>section:not([data-transition]).future { +@include transition-horizontal-future(concave) { transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); } - -.reveal .slides>section>section[data-transition=concave].past, -.reveal.concave .slides>section>section:not([data-transition]).past { +@include transition-vertical-past(concave) { transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0); } -.reveal .slides>section>section[data-transition=concave].future, -.reveal.concave .slides>section>section:not([data-transition]).future { +@include transition-vertical-future(concave) { transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); } @@ -542,28 +584,21 @@ body { * ZOOM TRANSITION *********************************************/ -.reveal .slides>section[data-transition=zoom], -.reveal.zoom .slides>section:not([data-transition]) { +@include transition-global(zoom) { transition-timing-function: ease; } - -.reveal .slides>section[data-transition=zoom].past, -.reveal.zoom .slides>section:not([data-transition]).past { +@include transition-horizontal-past(zoom) { visibility: hidden; transform: scale(16); } -.reveal .slides>section[data-transition=zoom].future, -.reveal.zoom .slides>section:not([data-transition]).future { +@include transition-horizontal-future(zoom) { visibility: hidden; transform: scale(0.2); } - -.reveal .slides>section>section[data-transition=zoom].past, -.reveal.zoom .slides>section>section:not([data-transition]).past { +@include transition-vertical-past(zoom) { transform: translate(0, -150%); } -.reveal .slides>section>section[data-transition=zoom].future, -.reveal.zoom .slides>section>section:not([data-transition]).future { +@include transition-vertical-future(zoom) { transform: translate(0, 150%); } @@ -732,61 +767,13 @@ body { * NO TRANSITION *********************************************/ -.reveal .slides section[data-transition=none], -.reveal.none .slides section:not([data-transition]) { +@include transition-global(none) { transform: none; transition: none; } /********************************************* - * OVERVIEW - *********************************************/ - -.reveal.overview .slides { - perspective-origin: 50% 50%; - perspective: 700px; -} - -.reveal.overview .slides section { - height: 700px; - overflow: hidden; - opacity: 1 !important; - visibility: visible !important; - cursor: pointer; - background: rgba(0,0,0,0.1); - box-sizing: border-box; -} -.reveal.overview .slides section, -.reveal.overview-deactivating .slides section { - transition: none !important; -} -.reveal.overview .slides section .fragment { - opacity: 1; -} -.reveal.overview .slides section:after, -.reveal.overview .slides section:before { - display: none !important; -} -.reveal.overview .slides section>section { - opacity: 1; - cursor: pointer; -} - .reveal.overview .slides section:hover { - background: rgba(0,0,0,0.3); - } - .reveal.overview .slides section.present { - background: rgba(0,0,0,0.3); - } -.reveal.overview .slides>section.stack { - padding: 0; - top: 0 !important; - background: none; - overflow: visible; -} - - -/********************************************* * PAUSED MODE *********************************************/ @@ -857,7 +844,7 @@ body { * PER-SLIDE BACKGROUNDS *********************************************/ -.reveal>.backgrounds { +.reveal .backgrounds { position: absolute; width: 100%; height: 100%; @@ -1027,6 +1014,74 @@ body { /********************************************* + * OVERVIEW + *********************************************/ + +.reveal.overview { + perspective-origin: 50% 50%; + perspective: 700px; + + .slides section { + height: 700px; + opacity: 1 !important; + overflow: hidden; + visibility: visible !important; + cursor: pointer; + box-sizing: border-box; + } + .slides section:hover, + .slides section.present { + outline: 10px solid rgba(150,150,150,0.4); + outline-offset: 10px; + } + .slides section .fragment { + opacity: 1; + transition: none; + } + .slides section:after, + .slides section:before { + display: none !important; + } + .slides>section.stack { + padding: 0; + top: 0 !important; + background: none; + outline: none; + overflow: visible; + } + + .backgrounds { + perspective: inherit; + } + + .backgrounds .slide-background { + opacity: 1; + visibility: visible; + + // This can't be applied to the slide itself in Safari + outline: 10px solid rgba(150,150,150,0.1); + outline-offset: 10px; + } +} + +// Disable transitions transitions while we're activating +// or deactivating the overview mode. +.reveal.overview .slides section, +.reveal.overview-deactivating .slides section { + transition: none; +} + +.reveal.overview .backgrounds .slide-background, +.reveal.overview-deactivating .backgrounds .slide-background { + transition: none; +} + +.reveal.overview-animated .slides { + transition: transform 0.4s ease; +} + + +/********************************************* * RTL SUPPORT *********************************************/ @@ -1149,6 +1204,7 @@ body { .reveal .overlay .viewport { position: absolute; + display: flex; top: 40px; right: 0; bottom: 0; @@ -1185,8 +1241,8 @@ body { .reveal .overlay.overlay-help .viewport .viewport-inner { width: 600px; - margin: 0 auto; - padding: 60px; + margin: auto; + padding: 20px 20px 80px 20px; text-align: center; letter-spacing: normal; } @@ -1198,13 +1254,13 @@ body { .reveal .overlay.overlay-help .viewport .viewport-inner table { border: 1px solid #fff; border-collapse: collapse; - font-size: 14px; + font-size: 16px; } .reveal .overlay.overlay-help .viewport .viewport-inner table th, .reveal .overlay.overlay-help .viewport .viewport-inner table td { width: 200px; - padding: 10px; + padding: 14px; border: 1px solid #fff; vertical-align: middle; } @@ -1223,7 +1279,7 @@ body { .reveal .playback { position: fixed; left: 15px; - bottom: 15px; + bottom: 20px; z-index: 30; cursor: pointer; transition: all 400ms ease; @@ -1285,10 +1341,50 @@ body { * SPEAKER NOTES *********************************************/ +// Hide on-page notes .reveal aside.notes { display: none; } +// An interface element that can optionally be used to show the +// speaker notes to all viewers, on top of the presentation +.reveal .speaker-notes { + display: none; + position: absolute; + width: 70%; + max-height: 15%; + left: 15%; + bottom: 26px; + padding: 10px; + z-index: 1; + font-size: 18px; + line-height: 1.4; + color: #fff; + background-color: rgba(0,0,0,0.5); + overflow: auto; + box-sizing: border-box; + text-align: left; + font-family: Helvetica, sans-serif; + -webkit-overflow-scrolling: touch; +} + +.reveal .speaker-notes.visible:not(:empty) { + display: block; +} + +@media screen and (max-width: 1024px) { + .reveal .speaker-notes { + font-size: 14px; + } +} + +@media screen and (max-width: 600px) { + .reveal .speaker-notes { + width: 90%; + left: 5%; + } +} + /********************************************* * ZOOM PLUGIN @@ -1312,5 +1408,3 @@ body { .zoomed .reveal .roll span:after { visibility: hidden; } - - diff --git a/css/theme/README.md b/css/theme/README.md index 90dc149..5a6c8fa 100644 --- a/css/theme/README.md +++ b/css/theme/README.md @@ -2,11 +2,9 @@ Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Make sure that you have the reveal.js development environment including the Grunt dependencies installed before proceding: https://github.com/hakimel/reveal.js#full-setup -You also need to install Ruby and then Sass (with `gem install sass`). - ## Creating a Theme -To create your own theme, start by duplicating any ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source) and adding it to the compilation list in the [Gruntfile](https://github.com/hakimel/reveal.js/blob/master/Gruntfile.js). +To create your own theme, start by duplicating a ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source). It will be automatically compiled by Grunt from Sass to CSS (see the [Gruntfile](https://github.com/hakimel/reveal.js/blob/master/Gruntfile.js)) when you run `grunt css-themes`. Each theme file does four things in the following order: @@ -17,9 +15,7 @@ Shared utility functions. Declares a set of custom variables that the template file (step 4) expects. Can be overridden in step 3. 3. **Override** -This is where you override the default theme. Either by specifying variables (see [settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss) for reference) or by adding full selectors with hardcoded styles. +This is where you override the default theme. Either by specifying variables (see [settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss) for reference) or by adding any selectors and styles you please. 4. **Include [/css/theme/template/theme.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss)** The template theme file which will generate final CSS output based on the currently defined variables. - -When you are done, run `grunt css-themes` to compile the Sass file to CSS and you are ready to use your new theme. diff --git a/css/theme/beige.css b/css/theme/beige.css index 514427c..5bbda4b 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -1,25 +1,25 @@ -@import url(../../lib/font/league-gothic/league-gothic.css); -@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); /** * Beige theme for reveal.js. * * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se */ +@import url(../../lib/font/league-gothic/league-gothic.css); +@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); /********************************************* * GLOBAL STYLES *********************************************/ body { background: #f7f2d3; - background: -moz-radial-gradient(center, circle cover, #ffffff 0%, #f7f2d3 100%); - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #ffffff), color-stop(100%, #f7f2d3)); - background: -webkit-radial-gradient(center, circle cover, #ffffff 0%, #f7f2d3 100%); - background: -o-radial-gradient(center, circle cover, #ffffff 0%, #f7f2d3 100%); - background: -ms-radial-gradient(center, circle cover, #ffffff 0%, #f7f2d3 100%); - background: radial-gradient(center, circle cover, #ffffff 0%, #f7f2d3 100%); + background: -moz-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); + background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, white), color-stop(100%, #f7f2d3)); + background: -webkit-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); + background: -o-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); + background: -ms-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); + background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); background-color: #f7f3de; } .reveal { - font-family: 'Lato', sans-serif; + font-family: "Lato", sans-serif; font-size: 36px; font-weight: normal; color: #333; } @@ -29,17 +29,23 @@ body { background: rgba(79, 64, 28, 0.99); text-shadow: none; } -.reveal .slides > section, .reveal .slides > section > section { +.reveal .slides > section, +.reveal .slides > section > section { line-height: 1.3; font-weight: inherit; } /********************************************* * HEADERS *********************************************/ -.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { margin: 0 0 20px 0; color: #333; - font-family: 'League Gothic', Impact, sans-serif; + font-family: "League Gothic", Impact, sans-serif; font-weight: normal; line-height: 1.2; letter-spacing: normal; @@ -70,17 +76,22 @@ body { line-height: 1.3; } /* Ensure certain elements are never larger than the slide itself */ -.reveal img, .reveal video, .reveal iframe { +.reveal img, +.reveal video, +.reveal iframe { max-width: 95%; max-height: 95%; } -.reveal strong, .reveal b { +.reveal strong, +.reveal b { font-weight: bold; } .reveal em { font-style: italic; } -.reveal ol, .reveal dl, .reveal ul { +.reveal ol, +.reveal dl, +.reveal ul { display: inline-block; text-align: left; margin: 0 0 0 1em; } @@ -97,7 +108,10 @@ body { .reveal ul ul ul { list-style-type: circle; } -.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { +.reveal ul ul, +.reveal ul ol, +.reveal ol ol, +.reveal ol ul { display: block; margin-left: 40px; } @@ -107,7 +121,8 @@ body { .reveal dd { margin-left: 40px; } -.reveal q, .reveal blockquote { +.reveal q, +.reveal blockquote { quotes: none; } .reveal blockquote { @@ -120,7 +135,8 @@ body { background: rgba(255, 255, 255, 0.05); box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } -.reveal blockquote p:first-child, .reveal blockquote p:last-child { +.reveal blockquote p:first-child, +.reveal blockquote p:last-child { display: inline-block; } .reveal q { @@ -146,9 +162,7 @@ body { padding: 5px; overflow: auto; max-height: 400px; - word-wrap: normal; - background: #3F3F3F; - color: #DCDCDC; } + word-wrap: normal; } .reveal table { margin: auto; @@ -158,12 +172,22 @@ body { .reveal table th { font-weight: bold; } -.reveal table th, .reveal table td { +.reveal table th, +.reveal table td { text-align: left; padding: 0.2em 0.5em 0.2em 0.5em; border-bottom: 1px solid; } -.reveal table tr:last-child td { +.reveal table th[align="center"], +.reveal table td[align="center"] { + text-align: center; } + +.reveal table th[align="right"], +.reveal table td[align="right"] { + text-align: right; } + +.reveal table tbody tr:last-child th, +.reveal table tbody tr:last-child td { border-bottom: none; } .reveal sup { @@ -187,18 +211,18 @@ body { .reveal a { color: #8b743d; text-decoration: none; - -webkit-transition: color 0.15s ease; - -moz-transition: color 0.15s ease; - transition: color 0.15s ease; } + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + transition: color .15s ease; } .reveal a:hover { - color: #c0a76e; + color: #c0a86e; text-shadow: none; border: none; } .reveal .roll span:after { color: #fff; - background: #564726; } + background: #564826; } /********************************************* * IMAGES @@ -209,10 +233,14 @@ body { border: 4px solid #333; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } +.reveal section img.plain { + border: 0; + box-shadow: none; } + .reveal a img { - -webkit-transition: all 0.15s linear; - -moz-transition: all 0.15s linear; - transition: all 0.15s linear; } + -webkit-transition: all .15s linear; + -moz-transition: all .15s linear; + transition: all .15s linear; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); @@ -222,29 +250,33 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { +.reveal .controls .navigate-left, +.reveal .controls .navigate-left.enabled { border-right-color: #8b743d; } -.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { +.reveal .controls .navigate-right, +.reveal .controls .navigate-right.enabled { border-left-color: #8b743d; } -.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { +.reveal .controls .navigate-up, +.reveal .controls .navigate-up.enabled { border-bottom-color: #8b743d; } -.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { +.reveal .controls .navigate-down, +.reveal .controls .navigate-down.enabled { border-top-color: #8b743d; } -.reveal .controls div.navigate-left.enabled:hover { - border-right-color: #c0a76e; } +.reveal .controls .navigate-left.enabled:hover { + border-right-color: #c0a86e; } -.reveal .controls div.navigate-right.enabled:hover { - border-left-color: #c0a76e; } +.reveal .controls .navigate-right.enabled:hover { + border-left-color: #c0a86e; } -.reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #c0a76e; } +.reveal .controls .navigate-up.enabled:hover { + border-bottom-color: #c0a86e; } -.reveal .controls div.navigate-down.enabled:hover { - border-top-color: #c0a76e; } +.reveal .controls .navigate-down.enabled:hover { + border-top-color: #c0a86e; } /********************************************* * PROGRESS BAR @@ -257,9 +289,3 @@ body { -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } - -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: #8b743d; } diff --git a/css/theme/black.css b/css/theme/black.css index 7d3bee4..511fa79 100644 --- a/css/theme/black.css +++ b/css/theme/black.css @@ -1,9 +1,9 @@ -@import url(../../lib/font/source-sans-pro/source-sans-pro.css); /** * Black theme for reveal.js. This is the opposite of the 'white' theme. * - * Copyright (C) 2015 Hakim El Hattab, http://hakim.se + * By Hakim El Hattab, http://hakim.se */ +@import url(../../lib/font/source-sans-pro/source-sans-pro.css); section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 { color: #222; } @@ -15,7 +15,7 @@ body { background-color: #222; } .reveal { - font-family: 'Source Sans Pro', Helvetica, sans-serif; + font-family: "Source Sans Pro", Helvetica, sans-serif; font-size: 38px; font-weight: normal; color: #fff; } @@ -25,17 +25,23 @@ body { background: #bee4fd; text-shadow: none; } -.reveal .slides > section, .reveal .slides > section > section { +.reveal .slides > section, +.reveal .slides > section > section { line-height: 1.3; font-weight: inherit; } /********************************************* * HEADERS *********************************************/ -.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { margin: 0 0 20px 0; color: #fff; - font-family: 'Source Sans Pro', Helvetica, sans-serif; + font-family: "Source Sans Pro", Helvetica, sans-serif; font-weight: 600; line-height: 1.2; letter-spacing: normal; @@ -66,17 +72,22 @@ body { line-height: 1.3; } /* Ensure certain elements are never larger than the slide itself */ -.reveal img, .reveal video, .reveal iframe { +.reveal img, +.reveal video, +.reveal iframe { max-width: 95%; max-height: 95%; } -.reveal strong, .reveal b { +.reveal strong, +.reveal b { font-weight: bold; } .reveal em { font-style: italic; } -.reveal ol, .reveal dl, .reveal ul { +.reveal ol, +.reveal dl, +.reveal ul { display: inline-block; text-align: left; margin: 0 0 0 1em; } @@ -93,7 +104,10 @@ body { .reveal ul ul ul { list-style-type: circle; } -.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { +.reveal ul ul, +.reveal ul ol, +.reveal ol ol, +.reveal ol ul { display: block; margin-left: 40px; } @@ -103,7 +117,8 @@ body { .reveal dd { margin-left: 40px; } -.reveal q, .reveal blockquote { +.reveal q, +.reveal blockquote { quotes: none; } .reveal blockquote { @@ -116,7 +131,8 @@ body { background: rgba(255, 255, 255, 0.05); box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } -.reveal blockquote p:first-child, .reveal blockquote p:last-child { +.reveal blockquote p:first-child, +.reveal blockquote p:last-child { display: inline-block; } .reveal q { @@ -142,9 +158,7 @@ body { padding: 5px; overflow: auto; max-height: 400px; - word-wrap: normal; - background: #3F3F3F; - color: #DCDCDC; } + word-wrap: normal; } .reveal table { margin: auto; @@ -154,12 +168,22 @@ body { .reveal table th { font-weight: bold; } -.reveal table th, .reveal table td { +.reveal table th, +.reveal table td { text-align: left; padding: 0.2em 0.5em 0.2em 0.5em; border-bottom: 1px solid; } -.reveal table tr:last-child td { +.reveal table th[align="center"], +.reveal table td[align="center"] { + text-align: center; } + +.reveal table th[align="right"], +.reveal table td[align="right"] { + text-align: right; } + +.reveal table tbody tr:last-child th, +.reveal table tbody tr:last-child td { border-bottom: none; } .reveal sup { @@ -183,9 +207,9 @@ body { .reveal a { color: #42affa; text-decoration: none; - -webkit-transition: color 0.15s ease; - -moz-transition: color 0.15s ease; - transition: color 0.15s ease; } + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + transition: color .15s ease; } .reveal a:hover { color: #8dcffc; @@ -194,7 +218,7 @@ body { .reveal .roll span:after { color: #fff; - background: #068ee9; } + background: #068de9; } /********************************************* * IMAGES @@ -205,10 +229,14 @@ body { border: 4px solid #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } +.reveal section img.plain { + border: 0; + box-shadow: none; } + .reveal a img { - -webkit-transition: all 0.15s linear; - -moz-transition: all 0.15s linear; - transition: all 0.15s linear; } + -webkit-transition: all .15s linear; + -moz-transition: all .15s linear; + transition: all .15s linear; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); @@ -218,28 +246,32 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { +.reveal .controls .navigate-left, +.reveal .controls .navigate-left.enabled { border-right-color: #42affa; } -.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { +.reveal .controls .navigate-right, +.reveal .controls .navigate-right.enabled { border-left-color: #42affa; } -.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { +.reveal .controls .navigate-up, +.reveal .controls .navigate-up.enabled { border-bottom-color: #42affa; } -.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { +.reveal .controls .navigate-down, +.reveal .controls .navigate-down.enabled { border-top-color: #42affa; } -.reveal .controls div.navigate-left.enabled:hover { +.reveal .controls .navigate-left.enabled:hover { border-right-color: #8dcffc; } -.reveal .controls div.navigate-right.enabled:hover { +.reveal .controls .navigate-right.enabled:hover { border-left-color: #8dcffc; } -.reveal .controls div.navigate-up.enabled:hover { +.reveal .controls .navigate-up.enabled:hover { border-bottom-color: #8dcffc; } -.reveal .controls div.navigate-down.enabled:hover { +.reveal .controls .navigate-down.enabled:hover { border-top-color: #8dcffc; } /********************************************* @@ -253,9 +285,3 @@ body { -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } - -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: #42affa; } diff --git a/css/theme/blood.css b/css/theme/blood.css index 768d2a3..6fe3d67 100644 --- a/css/theme/blood.css +++ b/css/theme/blood.css @@ -1,4 +1,3 @@ -@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic); /** * Blood theme for reveal.js * Author: Walther http://github.com/Walther @@ -10,21 +9,16 @@ * For other themes, change $codeBackground accordingly. * */ +@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic); /********************************************* * GLOBAL STYLES *********************************************/ body { background: #222; - background: -moz-radial-gradient(center, circle cover, #626262 0%, #222 100%); - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #626262), color-stop(100%, #222)); - background: -webkit-radial-gradient(center, circle cover, #626262 0%, #222 100%); - background: -o-radial-gradient(center, circle cover, #626262 0%, #222 100%); - background: -ms-radial-gradient(center, circle cover, #626262 0%, #222 100%); - background: radial-gradient(center, circle cover, #626262 0%, #222 100%); - background-color: #2b2b2b; } + background-color: #222; } .reveal { - font-family: Ubuntu, 'sans-serif'; + font-family: Ubuntu, "sans-serif"; font-size: 36px; font-weight: normal; color: #eee; } @@ -34,17 +28,23 @@ body { background: #a23; text-shadow: none; } -.reveal .slides > section, .reveal .slides > section > section { +.reveal .slides > section, +.reveal .slides > section > section { line-height: 1.3; font-weight: inherit; } /********************************************* * HEADERS *********************************************/ -.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { margin: 0 0 20px 0; color: #eee; - font-family: Ubuntu, 'sans-serif'; + font-family: Ubuntu, "sans-serif"; font-weight: normal; line-height: 1.2; letter-spacing: normal; @@ -75,17 +75,22 @@ body { line-height: 1.3; } /* Ensure certain elements are never larger than the slide itself */ -.reveal img, .reveal video, .reveal iframe { +.reveal img, +.reveal video, +.reveal iframe { max-width: 95%; max-height: 95%; } -.reveal strong, .reveal b { +.reveal strong, +.reveal b { font-weight: bold; } .reveal em { font-style: italic; } -.reveal ol, .reveal dl, .reveal ul { +.reveal ol, +.reveal dl, +.reveal ul { display: inline-block; text-align: left; margin: 0 0 0 1em; } @@ -102,7 +107,10 @@ body { .reveal ul ul ul { list-style-type: circle; } -.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { +.reveal ul ul, +.reveal ul ol, +.reveal ol ol, +.reveal ol ul { display: block; margin-left: 40px; } @@ -112,7 +120,8 @@ body { .reveal dd { margin-left: 40px; } -.reveal q, .reveal blockquote { +.reveal q, +.reveal blockquote { quotes: none; } .reveal blockquote { @@ -125,7 +134,8 @@ body { background: rgba(255, 255, 255, 0.05); box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } -.reveal blockquote p:first-child, .reveal blockquote p:last-child { +.reveal blockquote p:first-child, +.reveal blockquote p:last-child { display: inline-block; } .reveal q { @@ -151,9 +161,7 @@ body { padding: 5px; overflow: auto; max-height: 400px; - word-wrap: normal; - background: #3F3F3F; - color: #DCDCDC; } + word-wrap: normal; } .reveal table { margin: auto; @@ -163,12 +171,22 @@ body { .reveal table th { font-weight: bold; } -.reveal table th, .reveal table td { +.reveal table th, +.reveal table td { text-align: left; padding: 0.2em 0.5em 0.2em 0.5em; border-bottom: 1px solid; } -.reveal table tr:last-child td { +.reveal table th[align="center"], +.reveal table td[align="center"] { + text-align: center; } + +.reveal table th[align="right"], +.reveal table td[align="right"] { + text-align: right; } + +.reveal table tbody tr:last-child th, +.reveal table tbody tr:last-child td { border-bottom: none; } .reveal sup { @@ -192,18 +210,18 @@ body { .reveal a { color: #a23; text-decoration: none; - -webkit-transition: color 0.15s ease; - -moz-transition: color 0.15s ease; - transition: color 0.15s ease; } + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + transition: color .15s ease; } .reveal a:hover { - color: #dd5567; + color: #dd5566; text-shadow: none; border: none; } .reveal .roll span:after { color: #fff; - background: #6a1521; } + background: #6a1520; } /********************************************* * IMAGES @@ -214,10 +232,14 @@ body { border: 4px solid #eee; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } +.reveal section img.plain { + border: 0; + box-shadow: none; } + .reveal a img { - -webkit-transition: all 0.15s linear; - -moz-transition: all 0.15s linear; - transition: all 0.15s linear; } + -webkit-transition: all .15s linear; + -moz-transition: all .15s linear; + transition: all .15s linear; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); @@ -227,29 +249,33 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { +.reveal .controls .navigate-left, +.reveal .controls .navigate-left.enabled { border-right-color: #a23; } -.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { +.reveal .controls .navigate-right, +.reveal .controls .navigate-right.enabled { border-left-color: #a23; } -.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { +.reveal .controls .navigate-up, +.reveal .controls .navigate-up.enabled { border-bottom-color: #a23; } -.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { +.reveal .controls .navigate-down, +.reveal .controls .navigate-down.enabled { border-top-color: #a23; } -.reveal .controls div.navigate-left.enabled:hover { - border-right-color: #dd5567; } +.reveal .controls .navigate-left.enabled:hover { + border-right-color: #dd5566; } -.reveal .controls div.navigate-right.enabled:hover { - border-left-color: #dd5567; } +.reveal .controls .navigate-right.enabled:hover { + border-left-color: #dd5566; } -.reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #dd5567; } +.reveal .controls .navigate-up.enabled:hover { + border-bottom-color: #dd5566; } -.reveal .controls div.navigate-down.enabled:hover { - border-top-color: #dd5567; } +.reveal .controls .navigate-down.enabled:hover { + border-top-color: #dd5566; } /********************************************* * PROGRESS BAR @@ -263,25 +289,18 @@ body { -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: #a23; } - .reveal p { font-weight: 300; text-shadow: 1px 1px #222; } -.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { font-weight: 700; } -.reveal a, .reveal a:hover { - text-shadow: 2px 2px 2px #000; } - -.reveal small a, .reveal small a:hover { - text-shadow: 1px 1px 1px #000; } - .reveal p code { background-color: #23241f; display: inline-block; diff --git a/css/theme/league.css b/css/theme/league.css index c6d07f6..03c44ce 100644 --- a/css/theme/league.css +++ b/css/theme/league.css @@ -1,5 +1,3 @@ -@import url(../../lib/font/league-gothic/league-gothic.css); -@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); /** * League theme for reveal.js. * @@ -7,6 +5,8 @@ * * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se */ +@import url(../../lib/font/league-gothic/league-gothic.css); +@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); /********************************************* * GLOBAL STYLES *********************************************/ @@ -21,7 +21,7 @@ body { background-color: #2b2b2b; } .reveal { - font-family: 'Lato', sans-serif; + font-family: "Lato", sans-serif; font-size: 36px; font-weight: normal; color: #eee; } @@ -31,17 +31,23 @@ body { background: #FF5E99; text-shadow: none; } -.reveal .slides > section, .reveal .slides > section > section { +.reveal .slides > section, +.reveal .slides > section > section { line-height: 1.3; font-weight: inherit; } /********************************************* * HEADERS *********************************************/ -.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { margin: 0 0 20px 0; color: #eee; - font-family: 'League Gothic', Impact, sans-serif; + font-family: "League Gothic", Impact, sans-serif; font-weight: normal; line-height: 1.2; letter-spacing: normal; @@ -72,17 +78,22 @@ body { line-height: 1.3; } /* Ensure certain elements are never larger than the slide itself */ -.reveal img, .reveal video, .reveal iframe { +.reveal img, +.reveal video, +.reveal iframe { max-width: 95%; max-height: 95%; } -.reveal strong, .reveal b { +.reveal strong, +.reveal b { font-weight: bold; } .reveal em { font-style: italic; } -.reveal ol, .reveal dl, .reveal ul { +.reveal ol, +.reveal dl, +.reveal ul { display: inline-block; text-align: left; margin: 0 0 0 1em; } @@ -99,7 +110,10 @@ body { .reveal ul ul ul { list-style-type: circle; } -.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { +.reveal ul ul, +.reveal ul ol, +.reveal ol ol, +.reveal ol ul { display: block; margin-left: 40px; } @@ -109,7 +123,8 @@ body { .reveal dd { margin-left: 40px; } -.reveal q, .reveal blockquote { +.reveal q, +.reveal blockquote { quotes: none; } .reveal blockquote { @@ -122,7 +137,8 @@ body { background: rgba(255, 255, 255, 0.05); box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } -.reveal blockquote p:first-child, .reveal blockquote p:last-child { +.reveal blockquote p:first-child, +.reveal blockquote p:last-child { display: inline-block; } .reveal q { @@ -148,9 +164,7 @@ body { padding: 5px; overflow: auto; max-height: 400px; - word-wrap: normal; - background: #3F3F3F; - color: #DCDCDC; } + word-wrap: normal; } .reveal table { margin: auto; @@ -160,12 +174,22 @@ body { .reveal table th { font-weight: bold; } -.reveal table th, .reveal table td { +.reveal table th, +.reveal table td { text-align: left; padding: 0.2em 0.5em 0.2em 0.5em; border-bottom: 1px solid; } -.reveal table tr:last-child td { +.reveal table th[align="center"], +.reveal table td[align="center"] { + text-align: center; } + +.reveal table th[align="right"], +.reveal table td[align="right"] { + text-align: right; } + +.reveal table tbody tr:last-child th, +.reveal table tbody tr:last-child td { border-bottom: none; } .reveal sup { @@ -189,18 +213,18 @@ body { .reveal a { color: #13DAEC; text-decoration: none; - -webkit-transition: color 0.15s ease; - -moz-transition: color 0.15s ease; - transition: color 0.15s ease; } + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + transition: color .15s ease; } .reveal a:hover { - color: #71ebf4; + color: #71e9f4; text-shadow: none; border: none; } .reveal .roll span:after { color: #fff; - background: #0d9ba5; } + background: #0d99a5; } /********************************************* * IMAGES @@ -211,10 +235,14 @@ body { border: 4px solid #eee; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } +.reveal section img.plain { + border: 0; + box-shadow: none; } + .reveal a img { - -webkit-transition: all 0.15s linear; - -moz-transition: all 0.15s linear; - transition: all 0.15s linear; } + -webkit-transition: all .15s linear; + -moz-transition: all .15s linear; + transition: all .15s linear; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); @@ -224,29 +252,33 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { +.reveal .controls .navigate-left, +.reveal .controls .navigate-left.enabled { border-right-color: #13DAEC; } -.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { +.reveal .controls .navigate-right, +.reveal .controls .navigate-right.enabled { border-left-color: #13DAEC; } -.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { +.reveal .controls .navigate-up, +.reveal .controls .navigate-up.enabled { border-bottom-color: #13DAEC; } -.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { +.reveal .controls .navigate-down, +.reveal .controls .navigate-down.enabled { border-top-color: #13DAEC; } -.reveal .controls div.navigate-left.enabled:hover { - border-right-color: #71ebf4; } +.reveal .controls .navigate-left.enabled:hover { + border-right-color: #71e9f4; } -.reveal .controls div.navigate-right.enabled:hover { - border-left-color: #71ebf4; } +.reveal .controls .navigate-right.enabled:hover { + border-left-color: #71e9f4; } -.reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #71ebf4; } +.reveal .controls .navigate-up.enabled:hover { + border-bottom-color: #71e9f4; } -.reveal .controls div.navigate-down.enabled:hover { - border-top-color: #71ebf4; } +.reveal .controls .navigate-down.enabled:hover { + border-top-color: #71e9f4; } /********************************************* * PROGRESS BAR @@ -259,9 +291,3 @@ body { -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } - -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: #13DAEC; } diff --git a/css/theme/moon.css b/css/theme/moon.css index 4817c18..5e5d6e4 100644 --- a/css/theme/moon.css +++ b/css/theme/moon.css @@ -1,9 +1,9 @@ -@import url(../../lib/font/league-gothic/league-gothic.css); -@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); /** * Solarized Dark theme for reveal.js. * Author: Achim Staebler */ +@import url(../../lib/font/league-gothic/league-gothic.css); +@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); /** * Solarized colors by Ethan Schoonover */ @@ -19,7 +19,7 @@ body { background-color: #002b36; } .reveal { - font-family: 'Lato', sans-serif; + font-family: "Lato", sans-serif; font-size: 36px; font-weight: normal; color: #93a1a1; } @@ -29,17 +29,23 @@ body { background: #d33682; text-shadow: none; } -.reveal .slides > section, .reveal .slides > section > section { +.reveal .slides > section, +.reveal .slides > section > section { line-height: 1.3; font-weight: inherit; } /********************************************* * HEADERS *********************************************/ -.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { margin: 0 0 20px 0; color: #eee8d5; - font-family: 'League Gothic', Impact, sans-serif; + font-family: "League Gothic", Impact, sans-serif; font-weight: normal; line-height: 1.2; letter-spacing: normal; @@ -70,17 +76,22 @@ body { line-height: 1.3; } /* Ensure certain elements are never larger than the slide itself */ -.reveal img, .reveal video, .reveal iframe { +.reveal img, +.reveal video, +.reveal iframe { max-width: 95%; max-height: 95%; } -.reveal strong, .reveal b { +.reveal strong, +.reveal b { font-weight: bold; } .reveal em { font-style: italic; } -.reveal ol, .reveal dl, .reveal ul { +.reveal ol, +.reveal dl, +.reveal ul { display: inline-block; text-align: left; margin: 0 0 0 1em; } @@ -97,7 +108,10 @@ body { .reveal ul ul ul { list-style-type: circle; } -.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { +.reveal ul ul, +.reveal ul ol, +.reveal ol ol, +.reveal ol ul { display: block; margin-left: 40px; } @@ -107,7 +121,8 @@ body { .reveal dd { margin-left: 40px; } -.reveal q, .reveal blockquote { +.reveal q, +.reveal blockquote { quotes: none; } .reveal blockquote { @@ -120,7 +135,8 @@ body { background: rgba(255, 255, 255, 0.05); box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } -.reveal blockquote p:first-child, .reveal blockquote p:last-child { +.reveal blockquote p:first-child, +.reveal blockquote p:last-child { display: inline-block; } .reveal q { @@ -146,9 +162,7 @@ body { padding: 5px; overflow: auto; max-height: 400px; - word-wrap: normal; - background: #3F3F3F; - color: #DCDCDC; } + word-wrap: normal; } .reveal table { margin: auto; @@ -158,12 +172,22 @@ body { .reveal table th { font-weight: bold; } -.reveal table th, .reveal table td { +.reveal table th, +.reveal table td { text-align: left; padding: 0.2em 0.5em 0.2em 0.5em; border-bottom: 1px solid; } -.reveal table tr:last-child td { +.reveal table th[align="center"], +.reveal table td[align="center"] { + text-align: center; } + +.reveal table th[align="right"], +.reveal table td[align="right"] { + text-align: right; } + +.reveal table tbody tr:last-child th, +.reveal table tbody tr:last-child td { border-bottom: none; } .reveal sup { @@ -187,18 +211,18 @@ body { .reveal a { color: #268bd2; text-decoration: none; - -webkit-transition: color 0.15s ease; - -moz-transition: color 0.15s ease; - transition: color 0.15s ease; } + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + transition: color .15s ease; } .reveal a:hover { - color: #78bae6; + color: #78b9e6; text-shadow: none; border: none; } .reveal .roll span:after { color: #fff; - background: #1a6291; } + background: #1a6091; } /********************************************* * IMAGES @@ -209,10 +233,14 @@ body { border: 4px solid #93a1a1; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } +.reveal section img.plain { + border: 0; + box-shadow: none; } + .reveal a img { - -webkit-transition: all 0.15s linear; - -moz-transition: all 0.15s linear; - transition: all 0.15s linear; } + -webkit-transition: all .15s linear; + -moz-transition: all .15s linear; + transition: all .15s linear; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); @@ -222,29 +250,33 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { +.reveal .controls .navigate-left, +.reveal .controls .navigate-left.enabled { border-right-color: #268bd2; } -.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { +.reveal .controls .navigate-right, +.reveal .controls .navigate-right.enabled { border-left-color: #268bd2; } -.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { +.reveal .controls .navigate-up, +.reveal .controls .navigate-up.enabled { border-bottom-color: #268bd2; } -.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { +.reveal .controls .navigate-down, +.reveal .controls .navigate-down.enabled { border-top-color: #268bd2; } -.reveal .controls div.navigate-left.enabled:hover { - border-right-color: #78bae6; } +.reveal .controls .navigate-left.enabled:hover { + border-right-color: #78b9e6; } -.reveal .controls div.navigate-right.enabled:hover { - border-left-color: #78bae6; } +.reveal .controls .navigate-right.enabled:hover { + border-left-color: #78b9e6; } -.reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #78bae6; } +.reveal .controls .navigate-up.enabled:hover { + border-bottom-color: #78b9e6; } -.reveal .controls div.navigate-down.enabled:hover { - border-top-color: #78bae6; } +.reveal .controls .navigate-down.enabled:hover { + border-top-color: #78b9e6; } /********************************************* * PROGRESS BAR @@ -257,9 +289,3 @@ body { -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } - -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: #268bd2; } diff --git a/css/theme/night.css b/css/theme/night.css index 71319b2..a439cdc 100644 --- a/css/theme/night.css +++ b/css/theme/night.css @@ -1,10 +1,10 @@ -@import url(https://fonts.googleapis.com/css?family=Montserrat:700); -@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic); /** * Black theme for reveal.js. * * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se */ +@import url(https://fonts.googleapis.com/css?family=Montserrat:700); +@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic); /********************************************* * GLOBAL STYLES *********************************************/ @@ -13,7 +13,7 @@ body { background-color: #111; } .reveal { - font-family: 'Open Sans', sans-serif; + font-family: "Open Sans", sans-serif; font-size: 30px; font-weight: normal; color: #eee; } @@ -23,17 +23,23 @@ body { background: #e7ad52; text-shadow: none; } -.reveal .slides > section, .reveal .slides > section > section { +.reveal .slides > section, +.reveal .slides > section > section { line-height: 1.3; font-weight: inherit; } /********************************************* * HEADERS *********************************************/ -.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { margin: 0 0 20px 0; color: #eee; - font-family: 'Montserrat', Impact, sans-serif; + font-family: "Montserrat", Impact, sans-serif; font-weight: normal; line-height: 1.2; letter-spacing: -0.03em; @@ -64,17 +70,22 @@ body { line-height: 1.3; } /* Ensure certain elements are never larger than the slide itself */ -.reveal img, .reveal video, .reveal iframe { +.reveal img, +.reveal video, +.reveal iframe { max-width: 95%; max-height: 95%; } -.reveal strong, .reveal b { +.reveal strong, +.reveal b { font-weight: bold; } .reveal em { font-style: italic; } -.reveal ol, .reveal dl, .reveal ul { +.reveal ol, +.reveal dl, +.reveal ul { display: inline-block; text-align: left; margin: 0 0 0 1em; } @@ -91,7 +102,10 @@ body { .reveal ul ul ul { list-style-type: circle; } -.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { +.reveal ul ul, +.reveal ul ol, +.reveal ol ol, +.reveal ol ul { display: block; margin-left: 40px; } @@ -101,7 +115,8 @@ body { .reveal dd { margin-left: 40px; } -.reveal q, .reveal blockquote { +.reveal q, +.reveal blockquote { quotes: none; } .reveal blockquote { @@ -114,7 +129,8 @@ body { background: rgba(255, 255, 255, 0.05); box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } -.reveal blockquote p:first-child, .reveal blockquote p:last-child { +.reveal blockquote p:first-child, +.reveal blockquote p:last-child { display: inline-block; } .reveal q { @@ -140,9 +156,7 @@ body { padding: 5px; overflow: auto; max-height: 400px; - word-wrap: normal; - background: #3F3F3F; - color: #DCDCDC; } + word-wrap: normal; } .reveal table { margin: auto; @@ -152,12 +166,22 @@ body { .reveal table th { font-weight: bold; } -.reveal table th, .reveal table td { +.reveal table th, +.reveal table td { text-align: left; padding: 0.2em 0.5em 0.2em 0.5em; border-bottom: 1px solid; } -.reveal table tr:last-child td { +.reveal table th[align="center"], +.reveal table td[align="center"] { + text-align: center; } + +.reveal table th[align="right"], +.reveal table td[align="right"] { + text-align: right; } + +.reveal table tbody tr:last-child th, +.reveal table tbody tr:last-child td { border-bottom: none; } .reveal sup { @@ -181,9 +205,9 @@ body { .reveal a { color: #e7ad52; text-decoration: none; - -webkit-transition: color 0.15s ease; - -moz-transition: color 0.15s ease; - transition: color 0.15s ease; } + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + transition: color .15s ease; } .reveal a:hover { color: #f3d7ac; @@ -192,7 +216,7 @@ body { .reveal .roll span:after { color: #fff; - background: #d0881d; } + background: #d08a1d; } /********************************************* * IMAGES @@ -203,10 +227,14 @@ body { border: 4px solid #eee; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } +.reveal section img.plain { + border: 0; + box-shadow: none; } + .reveal a img { - -webkit-transition: all 0.15s linear; - -moz-transition: all 0.15s linear; - transition: all 0.15s linear; } + -webkit-transition: all .15s linear; + -moz-transition: all .15s linear; + transition: all .15s linear; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); @@ -216,28 +244,32 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { +.reveal .controls .navigate-left, +.reveal .controls .navigate-left.enabled { border-right-color: #e7ad52; } -.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { +.reveal .controls .navigate-right, +.reveal .controls .navigate-right.enabled { border-left-color: #e7ad52; } -.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { +.reveal .controls .navigate-up, +.reveal .controls .navigate-up.enabled { border-bottom-color: #e7ad52; } -.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { +.reveal .controls .navigate-down, +.reveal .controls .navigate-down.enabled { border-top-color: #e7ad52; } -.reveal .controls div.navigate-left.enabled:hover { +.reveal .controls .navigate-left.enabled:hover { border-right-color: #f3d7ac; } -.reveal .controls div.navigate-right.enabled:hover { +.reveal .controls .navigate-right.enabled:hover { border-left-color: #f3d7ac; } -.reveal .controls div.navigate-up.enabled:hover { +.reveal .controls .navigate-up.enabled:hover { border-bottom-color: #f3d7ac; } -.reveal .controls div.navigate-down.enabled:hover { +.reveal .controls .navigate-down.enabled:hover { border-top-color: #f3d7ac; } /********************************************* @@ -251,9 +283,3 @@ body { -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } - -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: #e7ad52; } diff --git a/css/theme/serif.css b/css/theme/serif.css index ed85db6..40ccb39 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -15,7 +15,7 @@ body { background-color: #F0F1EB; } .reveal { - font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; + font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif; font-size: 36px; font-weight: normal; color: #000; } @@ -25,17 +25,23 @@ body { background: #26351C; text-shadow: none; } -.reveal .slides > section, .reveal .slides > section > section { +.reveal .slides > section, +.reveal .slides > section > section { line-height: 1.3; font-weight: inherit; } /********************************************* * HEADERS *********************************************/ -.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { margin: 0 0 20px 0; color: #383D3D; - font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; + font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif; font-weight: normal; line-height: 1.2; letter-spacing: normal; @@ -66,17 +72,22 @@ body { line-height: 1.3; } /* Ensure certain elements are never larger than the slide itself */ -.reveal img, .reveal video, .reveal iframe { +.reveal img, +.reveal video, +.reveal iframe { max-width: 95%; max-height: 95%; } -.reveal strong, .reveal b { +.reveal strong, +.reveal b { font-weight: bold; } .reveal em { font-style: italic; } -.reveal ol, .reveal dl, .reveal ul { +.reveal ol, +.reveal dl, +.reveal ul { display: inline-block; text-align: left; margin: 0 0 0 1em; } @@ -93,7 +104,10 @@ body { .reveal ul ul ul { list-style-type: circle; } -.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { +.reveal ul ul, +.reveal ul ol, +.reveal ol ol, +.reveal ol ul { display: block; margin-left: 40px; } @@ -103,7 +117,8 @@ body { .reveal dd { margin-left: 40px; } -.reveal q, .reveal blockquote { +.reveal q, +.reveal blockquote { quotes: none; } .reveal blockquote { @@ -116,7 +131,8 @@ body { background: rgba(255, 255, 255, 0.05); box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } -.reveal blockquote p:first-child, .reveal blockquote p:last-child { +.reveal blockquote p:first-child, +.reveal blockquote p:last-child { display: inline-block; } .reveal q { @@ -142,9 +158,7 @@ body { padding: 5px; overflow: auto; max-height: 400px; - word-wrap: normal; - background: #3F3F3F; - color: #DCDCDC; } + word-wrap: normal; } .reveal table { margin: auto; @@ -154,12 +168,22 @@ body { .reveal table th { font-weight: bold; } -.reveal table th, .reveal table td { +.reveal table th, +.reveal table td { text-align: left; padding: 0.2em 0.5em 0.2em 0.5em; border-bottom: 1px solid; } -.reveal table tr:last-child td { +.reveal table th[align="center"], +.reveal table td[align="center"] { + text-align: center; } + +.reveal table th[align="right"], +.reveal table td[align="right"] { + text-align: right; } + +.reveal table tbody tr:last-child th, +.reveal table tbody tr:last-child td { border-bottom: none; } .reveal sup { @@ -183,12 +207,12 @@ body { .reveal a { color: #51483D; text-decoration: none; - -webkit-transition: color 0.15s ease; - -moz-transition: color 0.15s ease; - transition: color 0.15s ease; } + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + transition: color .15s ease; } .reveal a:hover { - color: #8b7b69; + color: #8b7c69; text-shadow: none; border: none; } @@ -205,10 +229,14 @@ body { border: 4px solid #000; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } +.reveal section img.plain { + border: 0; + box-shadow: none; } + .reveal a img { - -webkit-transition: all 0.15s linear; - -moz-transition: all 0.15s linear; - transition: all 0.15s linear; } + -webkit-transition: all .15s linear; + -moz-transition: all .15s linear; + transition: all .15s linear; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); @@ -218,29 +246,33 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { +.reveal .controls .navigate-left, +.reveal .controls .navigate-left.enabled { border-right-color: #51483D; } -.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { +.reveal .controls .navigate-right, +.reveal .controls .navigate-right.enabled { border-left-color: #51483D; } -.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { +.reveal .controls .navigate-up, +.reveal .controls .navigate-up.enabled { border-bottom-color: #51483D; } -.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { +.reveal .controls .navigate-down, +.reveal .controls .navigate-down.enabled { border-top-color: #51483D; } -.reveal .controls div.navigate-left.enabled:hover { - border-right-color: #8b7b69; } +.reveal .controls .navigate-left.enabled:hover { + border-right-color: #8b7c69; } -.reveal .controls div.navigate-right.enabled:hover { - border-left-color: #8b7b69; } +.reveal .controls .navigate-right.enabled:hover { + border-left-color: #8b7c69; } -.reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #8b7b69; } +.reveal .controls .navigate-up.enabled:hover { + border-bottom-color: #8b7c69; } -.reveal .controls div.navigate-down.enabled:hover { - border-top-color: #8b7b69; } +.reveal .controls .navigate-down.enabled:hover { + border-top-color: #8b7c69; } /********************************************* * PROGRESS BAR @@ -253,9 +285,3 @@ body { -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } - -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: #51483D; } diff --git a/css/theme/simple.css b/css/theme/simple.css index d9153d7..b17fa5c 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -1,5 +1,3 @@ -@import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700); -@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); /** * A simple theme for reveal.js presentations, similar * to the default theme. The accent color is darkblue. @@ -7,6 +5,8 @@ * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed. * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se */ +@import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700); +@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); /********************************************* * GLOBAL STYLES *********************************************/ @@ -15,7 +15,7 @@ body { background-color: #fff; } .reveal { - font-family: 'Lato', sans-serif; + font-family: "Lato", sans-serif; font-size: 36px; font-weight: normal; color: #000; } @@ -25,17 +25,23 @@ body { background: rgba(0, 0, 0, 0.99); text-shadow: none; } -.reveal .slides > section, .reveal .slides > section > section { +.reveal .slides > section, +.reveal .slides > section > section { line-height: 1.3; font-weight: inherit; } /********************************************* * HEADERS *********************************************/ -.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { margin: 0 0 20px 0; color: #000; - font-family: 'News Cycle', Impact, sans-serif; + font-family: "News Cycle", Impact, sans-serif; font-weight: normal; line-height: 1.2; letter-spacing: normal; @@ -66,17 +72,22 @@ body { line-height: 1.3; } /* Ensure certain elements are never larger than the slide itself */ -.reveal img, .reveal video, .reveal iframe { +.reveal img, +.reveal video, +.reveal iframe { max-width: 95%; max-height: 95%; } -.reveal strong, .reveal b { +.reveal strong, +.reveal b { font-weight: bold; } .reveal em { font-style: italic; } -.reveal ol, .reveal dl, .reveal ul { +.reveal ol, +.reveal dl, +.reveal ul { display: inline-block; text-align: left; margin: 0 0 0 1em; } @@ -93,7 +104,10 @@ body { .reveal ul ul ul { list-style-type: circle; } -.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { +.reveal ul ul, +.reveal ul ol, +.reveal ol ol, +.reveal ol ul { display: block; margin-left: 40px; } @@ -103,7 +117,8 @@ body { .reveal dd { margin-left: 40px; } -.reveal q, .reveal blockquote { +.reveal q, +.reveal blockquote { quotes: none; } .reveal blockquote { @@ -116,7 +131,8 @@ body { background: rgba(255, 255, 255, 0.05); box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } -.reveal blockquote p:first-child, .reveal blockquote p:last-child { +.reveal blockquote p:first-child, +.reveal blockquote p:last-child { display: inline-block; } .reveal q { @@ -142,9 +158,7 @@ body { padding: 5px; overflow: auto; max-height: 400px; - word-wrap: normal; - background: #3F3F3F; - color: #DCDCDC; } + word-wrap: normal; } .reveal table { margin: auto; @@ -154,12 +168,22 @@ body { .reveal table th { font-weight: bold; } -.reveal table th, .reveal table td { +.reveal table th, +.reveal table td { text-align: left; padding: 0.2em 0.5em 0.2em 0.5em; border-bottom: 1px solid; } -.reveal table tr:last-child td { +.reveal table th[align="center"], +.reveal table td[align="center"] { + text-align: center; } + +.reveal table th[align="right"], +.reveal table td[align="right"] { + text-align: right; } + +.reveal table tbody tr:last-child th, +.reveal table tbody tr:last-child td { border-bottom: none; } .reveal sup { @@ -183,9 +207,9 @@ body { .reveal a { color: #00008B; text-decoration: none; - -webkit-transition: color 0.15s ease; - -moz-transition: color 0.15s ease; - transition: color 0.15s ease; } + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + transition: color .15s ease; } .reveal a:hover { color: #0000f1; @@ -205,10 +229,14 @@ body { border: 4px solid #000; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } +.reveal section img.plain { + border: 0; + box-shadow: none; } + .reveal a img { - -webkit-transition: all 0.15s linear; - -moz-transition: all 0.15s linear; - transition: all 0.15s linear; } + -webkit-transition: all .15s linear; + -moz-transition: all .15s linear; + transition: all .15s linear; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); @@ -218,28 +246,32 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { +.reveal .controls .navigate-left, +.reveal .controls .navigate-left.enabled { border-right-color: #00008B; } -.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { +.reveal .controls .navigate-right, +.reveal .controls .navigate-right.enabled { border-left-color: #00008B; } -.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { +.reveal .controls .navigate-up, +.reveal .controls .navigate-up.enabled { border-bottom-color: #00008B; } -.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { +.reveal .controls .navigate-down, +.reveal .controls .navigate-down.enabled { border-top-color: #00008B; } -.reveal .controls div.navigate-left.enabled:hover { +.reveal .controls .navigate-left.enabled:hover { border-right-color: #0000f1; } -.reveal .controls div.navigate-right.enabled:hover { +.reveal .controls .navigate-right.enabled:hover { border-left-color: #0000f1; } -.reveal .controls div.navigate-up.enabled:hover { +.reveal .controls .navigate-up.enabled:hover { border-bottom-color: #0000f1; } -.reveal .controls div.navigate-down.enabled:hover { +.reveal .controls .navigate-down.enabled:hover { border-top-color: #0000f1; } /********************************************* @@ -253,9 +285,3 @@ body { -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } - -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: #00008B; } diff --git a/css/theme/sky.css b/css/theme/sky.css index f7e8402..99f1cfd 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -1,10 +1,10 @@ -@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic); -@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700); /** * Sky theme for reveal.js. * * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se */ +@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic); +@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700); .reveal a { line-height: 1.3em; } @@ -22,7 +22,7 @@ body { background-color: #f7fbfc; } .reveal { - font-family: 'Open Sans', sans-serif; + font-family: "Open Sans", sans-serif; font-size: 36px; font-weight: normal; color: #333; } @@ -32,17 +32,23 @@ body { background: #134674; text-shadow: none; } -.reveal .slides > section, .reveal .slides > section > section { +.reveal .slides > section, +.reveal .slides > section > section { line-height: 1.3; font-weight: inherit; } /********************************************* * HEADERS *********************************************/ -.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { margin: 0 0 20px 0; color: #333; - font-family: 'Quicksand', sans-serif; + font-family: "Quicksand", sans-serif; font-weight: normal; line-height: 1.2; letter-spacing: -0.08em; @@ -73,17 +79,22 @@ body { line-height: 1.3; } /* Ensure certain elements are never larger than the slide itself */ -.reveal img, .reveal video, .reveal iframe { +.reveal img, +.reveal video, +.reveal iframe { max-width: 95%; max-height: 95%; } -.reveal strong, .reveal b { +.reveal strong, +.reveal b { font-weight: bold; } .reveal em { font-style: italic; } -.reveal ol, .reveal dl, .reveal ul { +.reveal ol, +.reveal dl, +.reveal ul { display: inline-block; text-align: left; margin: 0 0 0 1em; } @@ -100,7 +111,10 @@ body { .reveal ul ul ul { list-style-type: circle; } -.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { +.reveal ul ul, +.reveal ul ol, +.reveal ol ol, +.reveal ol ul { display: block; margin-left: 40px; } @@ -110,7 +124,8 @@ body { .reveal dd { margin-left: 40px; } -.reveal q, .reveal blockquote { +.reveal q, +.reveal blockquote { quotes: none; } .reveal blockquote { @@ -123,7 +138,8 @@ body { background: rgba(255, 255, 255, 0.05); box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } -.reveal blockquote p:first-child, .reveal blockquote p:last-child { +.reveal blockquote p:first-child, +.reveal blockquote p:last-child { display: inline-block; } .reveal q { @@ -149,9 +165,7 @@ body { padding: 5px; overflow: auto; max-height: 400px; - word-wrap: normal; - background: #3F3F3F; - color: #DCDCDC; } + word-wrap: normal; } .reveal table { margin: auto; @@ -161,12 +175,22 @@ body { .reveal table th { font-weight: bold; } -.reveal table th, .reveal table td { +.reveal table th, +.reveal table td { text-align: left; padding: 0.2em 0.5em 0.2em 0.5em; border-bottom: 1px solid; } -.reveal table tr:last-child td { +.reveal table th[align="center"], +.reveal table td[align="center"] { + text-align: center; } + +.reveal table th[align="right"], +.reveal table td[align="right"] { + text-align: right; } + +.reveal table tbody tr:last-child th, +.reveal table tbody tr:last-child td { border-bottom: none; } .reveal sup { @@ -190,18 +214,18 @@ body { .reveal a { color: #3b759e; text-decoration: none; - -webkit-transition: color 0.15s ease; - -moz-transition: color 0.15s ease; - transition: color 0.15s ease; } + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + transition: color .15s ease; } .reveal a:hover { - color: #74a8cb; + color: #74a7cb; text-shadow: none; border: none; } .reveal .roll span:after { color: #fff; - background: #264d66; } + background: #264c66; } /********************************************* * IMAGES @@ -212,10 +236,14 @@ body { border: 4px solid #333; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } +.reveal section img.plain { + border: 0; + box-shadow: none; } + .reveal a img { - -webkit-transition: all 0.15s linear; - -moz-transition: all 0.15s linear; - transition: all 0.15s linear; } + -webkit-transition: all .15s linear; + -moz-transition: all .15s linear; + transition: all .15s linear; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); @@ -225,29 +253,33 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { +.reveal .controls .navigate-left, +.reveal .controls .navigate-left.enabled { border-right-color: #3b759e; } -.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { +.reveal .controls .navigate-right, +.reveal .controls .navigate-right.enabled { border-left-color: #3b759e; } -.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { +.reveal .controls .navigate-up, +.reveal .controls .navigate-up.enabled { border-bottom-color: #3b759e; } -.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { +.reveal .controls .navigate-down, +.reveal .controls .navigate-down.enabled { border-top-color: #3b759e; } -.reveal .controls div.navigate-left.enabled:hover { - border-right-color: #74a8cb; } +.reveal .controls .navigate-left.enabled:hover { + border-right-color: #74a7cb; } -.reveal .controls div.navigate-right.enabled:hover { - border-left-color: #74a8cb; } +.reveal .controls .navigate-right.enabled:hover { + border-left-color: #74a7cb; } -.reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #74a8cb; } +.reveal .controls .navigate-up.enabled:hover { + border-bottom-color: #74a7cb; } -.reveal .controls div.navigate-down.enabled:hover { - border-top-color: #74a8cb; } +.reveal .controls .navigate-down.enabled:hover { + border-top-color: #74a7cb; } /********************************************* * PROGRESS BAR @@ -260,9 +292,3 @@ body { -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } - -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: #3b759e; } diff --git a/css/theme/solarized.css b/css/theme/solarized.css index 583201a..b4d4d4b 100644 --- a/css/theme/solarized.css +++ b/css/theme/solarized.css @@ -1,9 +1,9 @@ -@import url(../../lib/font/league-gothic/league-gothic.css); -@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); /** * Solarized Light theme for reveal.js. * Author: Achim Staebler */ +@import url(../../lib/font/league-gothic/league-gothic.css); +@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); /** * Solarized colors by Ethan Schoonover */ @@ -19,7 +19,7 @@ body { background-color: #fdf6e3; } .reveal { - font-family: 'Lato', sans-serif; + font-family: "Lato", sans-serif; font-size: 36px; font-weight: normal; color: #657b83; } @@ -29,17 +29,23 @@ body { background: #d33682; text-shadow: none; } -.reveal .slides > section, .reveal .slides > section > section { +.reveal .slides > section, +.reveal .slides > section > section { line-height: 1.3; font-weight: inherit; } /********************************************* * HEADERS *********************************************/ -.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { margin: 0 0 20px 0; color: #586e75; - font-family: 'League Gothic', Impact, sans-serif; + font-family: "League Gothic", Impact, sans-serif; font-weight: normal; line-height: 1.2; letter-spacing: normal; @@ -70,17 +76,22 @@ body { line-height: 1.3; } /* Ensure certain elements are never larger than the slide itself */ -.reveal img, .reveal video, .reveal iframe { +.reveal img, +.reveal video, +.reveal iframe { max-width: 95%; max-height: 95%; } -.reveal strong, .reveal b { +.reveal strong, +.reveal b { font-weight: bold; } .reveal em { font-style: italic; } -.reveal ol, .reveal dl, .reveal ul { +.reveal ol, +.reveal dl, +.reveal ul { display: inline-block; text-align: left; margin: 0 0 0 1em; } @@ -97,7 +108,10 @@ body { .reveal ul ul ul { list-style-type: circle; } -.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { +.reveal ul ul, +.reveal ul ol, +.reveal ol ol, +.reveal ol ul { display: block; margin-left: 40px; } @@ -107,7 +121,8 @@ body { .reveal dd { margin-left: 40px; } -.reveal q, .reveal blockquote { +.reveal q, +.reveal blockquote { quotes: none; } .reveal blockquote { @@ -120,7 +135,8 @@ body { background: rgba(255, 255, 255, 0.05); box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } -.reveal blockquote p:first-child, .reveal blockquote p:last-child { +.reveal blockquote p:first-child, +.reveal blockquote p:last-child { display: inline-block; } .reveal q { @@ -146,9 +162,7 @@ body { padding: 5px; overflow: auto; max-height: 400px; - word-wrap: normal; - background: #3F3F3F; - color: #DCDCDC; } + word-wrap: normal; } .reveal table { margin: auto; @@ -158,12 +172,22 @@ body { .reveal table th { font-weight: bold; } -.reveal table th, .reveal table td { +.reveal table th, +.reveal table td { text-align: left; padding: 0.2em 0.5em 0.2em 0.5em; border-bottom: 1px solid; } -.reveal table tr:last-child td { +.reveal table th[align="center"], +.reveal table td[align="center"] { + text-align: center; } + +.reveal table th[align="right"], +.reveal table td[align="right"] { + text-align: right; } + +.reveal table tbody tr:last-child th, +.reveal table tbody tr:last-child td { border-bottom: none; } .reveal sup { @@ -187,18 +211,18 @@ body { .reveal a { color: #268bd2; text-decoration: none; - -webkit-transition: color 0.15s ease; - -moz-transition: color 0.15s ease; - transition: color 0.15s ease; } + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + transition: color .15s ease; } .reveal a:hover { - color: #78bae6; + color: #78b9e6; text-shadow: none; border: none; } .reveal .roll span:after { color: #fff; - background: #1a6291; } + background: #1a6091; } /********************************************* * IMAGES @@ -209,10 +233,14 @@ body { border: 4px solid #657b83; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } +.reveal section img.plain { + border: 0; + box-shadow: none; } + .reveal a img { - -webkit-transition: all 0.15s linear; - -moz-transition: all 0.15s linear; - transition: all 0.15s linear; } + -webkit-transition: all .15s linear; + -moz-transition: all .15s linear; + transition: all .15s linear; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); @@ -222,29 +250,33 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { +.reveal .controls .navigate-left, +.reveal .controls .navigate-left.enabled { border-right-color: #268bd2; } -.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { +.reveal .controls .navigate-right, +.reveal .controls .navigate-right.enabled { border-left-color: #268bd2; } -.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { +.reveal .controls .navigate-up, +.reveal .controls .navigate-up.enabled { border-bottom-color: #268bd2; } -.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { +.reveal .controls .navigate-down, +.reveal .controls .navigate-down.enabled { border-top-color: #268bd2; } -.reveal .controls div.navigate-left.enabled:hover { - border-right-color: #78bae6; } +.reveal .controls .navigate-left.enabled:hover { + border-right-color: #78b9e6; } -.reveal .controls div.navigate-right.enabled:hover { - border-left-color: #78bae6; } +.reveal .controls .navigate-right.enabled:hover { + border-left-color: #78b9e6; } -.reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #78bae6; } +.reveal .controls .navigate-up.enabled:hover { + border-bottom-color: #78b9e6; } -.reveal .controls div.navigate-down.enabled:hover { - border-top-color: #78bae6; } +.reveal .controls .navigate-down.enabled:hover { + border-top-color: #78b9e6; } /********************************************* * PROGRESS BAR @@ -257,9 +289,3 @@ body { -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } - -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: #268bd2; } diff --git a/css/theme/source/black.scss b/css/theme/source/black.scss index 73dfecb..5f7f601 100644 --- a/css/theme/source/black.scss +++ b/css/theme/source/black.scss @@ -1,7 +1,7 @@ /** * Black theme for reveal.js. This is the opposite of the 'white' theme. * - * Copyright (C) 2015 Hakim El Hattab, http://hakim.se + * By Hakim El Hattab, http://hakim.se */ diff --git a/css/theme/source/blood.scss b/css/theme/source/blood.scss index f2e3a09..d22b53d 100644 --- a/css/theme/source/blood.scss +++ b/css/theme/source/blood.scss @@ -24,6 +24,8 @@ $blood: #a23; $coal: #222; $codeBackground: #23241f; +$backgroundColor: $coal; + // Main text $mainFont: Ubuntu, 'sans-serif'; $mainFontSize: 36px; @@ -45,10 +47,6 @@ $linkColorHover: lighten( $linkColor, 20% ); $selectionBackgroundColor: $blood; $selectionColor: #fff; -// Background generator -@mixin bodyBackground() { - @include radial-gradient( $coal, lighten( $coal, 25% ) ); -} // Theme template ------------------------------ @import "../template/theme"; @@ -61,7 +59,7 @@ $selectionColor: #fff; text-shadow: 1px 1px $coal; } -.reveal h1, +.reveal h1, .reveal h2, .reveal h3, .reveal h4, @@ -70,16 +68,6 @@ $selectionColor: #fff; font-weight: 700; } -.reveal a, -.reveal a:hover { - text-shadow: 2px 2px 2px #000; -} - -.reveal small a, -.reveal small a:hover { - text-shadow: 1px 1px 1px #000; -} - .reveal p code { background-color: $codeBackground; display: inline-block; diff --git a/css/theme/source/white.scss b/css/theme/source/white.scss index 4c5b647..6758ce0 100644 --- a/css/theme/source/white.scss +++ b/css/theme/source/white.scss @@ -1,7 +1,7 @@ /** * White theme for reveal.js. This is the opposite of the 'black' theme. * - * Copyright (C) 2015 Hakim El Hattab, http://hakim.se + * By Hakim El Hattab, http://hakim.se */ diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss index b5069d3..101a567 100644 --- a/css/theme/template/theme.scss +++ b/css/theme/template/theme.scss @@ -178,8 +178,6 @@ body { overflow: auto; max-height: 400px; word-wrap: normal; - background: #3F3F3F; - color: #DCDCDC; } .reveal table { @@ -199,6 +197,16 @@ body { border-bottom: 1px solid; } +.reveal table th[align="center"], +.reveal table td[align="center"] { + text-align: center; +} + +.reveal table th[align="right"], +.reveal table td[align="right"] { + text-align: right; +} + .reveal table tbody tr:last-child th, .reveal table tbody tr:last-child td { border-bottom: none; @@ -260,6 +268,11 @@ body { box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } + .reveal section img.plain { + border: 0; + box-shadow: none; + } + .reveal a img { -webkit-transition: all .15s linear; -moz-transition: all .15s linear; @@ -278,39 +291,39 @@ body { * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, -.reveal .controls div.navigate-left.enabled { +.reveal .controls .navigate-left, +.reveal .controls .navigate-left.enabled { border-right-color: $linkColor; } -.reveal .controls div.navigate-right, -.reveal .controls div.navigate-right.enabled { +.reveal .controls .navigate-right, +.reveal .controls .navigate-right.enabled { border-left-color: $linkColor; } -.reveal .controls div.navigate-up, -.reveal .controls div.navigate-up.enabled { +.reveal .controls .navigate-up, +.reveal .controls .navigate-up.enabled { border-bottom-color: $linkColor; } -.reveal .controls div.navigate-down, -.reveal .controls div.navigate-down.enabled { +.reveal .controls .navigate-down, +.reveal .controls .navigate-down.enabled { border-top-color: $linkColor; } -.reveal .controls div.navigate-left.enabled:hover { +.reveal .controls .navigate-left.enabled:hover { border-right-color: $linkColorHover; } -.reveal .controls div.navigate-right.enabled:hover { +.reveal .controls .navigate-right.enabled:hover { border-left-color: $linkColorHover; } -.reveal .controls div.navigate-up.enabled:hover { +.reveal .controls .navigate-up.enabled:hover { border-bottom-color: $linkColorHover; } -.reveal .controls div.navigate-down.enabled:hover { +.reveal .controls .navigate-down.enabled:hover { border-top-color: $linkColorHover; } @@ -330,11 +343,4 @@ body { transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); } -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: $linkColor; -} - diff --git a/css/theme/white.css b/css/theme/white.css index 5fdb2fc..b10dd0e 100644 --- a/css/theme/white.css +++ b/css/theme/white.css @@ -1,9 +1,9 @@ -@import url(../../lib/font/source-sans-pro/source-sans-pro.css); /** * White theme for reveal.js. This is the opposite of the 'black' theme. * - * Copyright (C) 2015 Hakim El Hattab, http://hakim.se + * By Hakim El Hattab, http://hakim.se */ +@import url(../../lib/font/source-sans-pro/source-sans-pro.css); section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 { color: #fff; } @@ -15,7 +15,7 @@ body { background-color: #fff; } .reveal { - font-family: 'Source Sans Pro', Helvetica, sans-serif; + font-family: "Source Sans Pro", Helvetica, sans-serif; font-size: 38px; font-weight: normal; color: #222; } @@ -25,17 +25,23 @@ body { background: #98bdef; text-shadow: none; } -.reveal .slides > section, .reveal .slides > section > section { +.reveal .slides > section, +.reveal .slides > section > section { line-height: 1.3; font-weight: inherit; } /********************************************* * HEADERS *********************************************/ -.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { margin: 0 0 20px 0; color: #222; - font-family: 'Source Sans Pro', Helvetica, sans-serif; + font-family: "Source Sans Pro", Helvetica, sans-serif; font-weight: 600; line-height: 1.2; letter-spacing: normal; @@ -66,17 +72,22 @@ body { line-height: 1.3; } /* Ensure certain elements are never larger than the slide itself */ -.reveal img, .reveal video, .reveal iframe { +.reveal img, +.reveal video, +.reveal iframe { max-width: 95%; max-height: 95%; } -.reveal strong, .reveal b { +.reveal strong, +.reveal b { font-weight: bold; } .reveal em { font-style: italic; } -.reveal ol, .reveal dl, .reveal ul { +.reveal ol, +.reveal dl, +.reveal ul { display: inline-block; text-align: left; margin: 0 0 0 1em; } @@ -93,7 +104,10 @@ body { .reveal ul ul ul { list-style-type: circle; } -.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { +.reveal ul ul, +.reveal ul ol, +.reveal ol ol, +.reveal ol ul { display: block; margin-left: 40px; } @@ -103,7 +117,8 @@ body { .reveal dd { margin-left: 40px; } -.reveal q, .reveal blockquote { +.reveal q, +.reveal blockquote { quotes: none; } .reveal blockquote { @@ -116,7 +131,8 @@ body { background: rgba(255, 255, 255, 0.05); box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } -.reveal blockquote p:first-child, .reveal blockquote p:last-child { +.reveal blockquote p:first-child, +.reveal blockquote p:last-child { display: inline-block; } .reveal q { @@ -142,9 +158,7 @@ body { padding: 5px; overflow: auto; max-height: 400px; - word-wrap: normal; - background: #3F3F3F; - color: #DCDCDC; } + word-wrap: normal; } .reveal table { margin: auto; @@ -154,12 +168,22 @@ body { .reveal table th { font-weight: bold; } -.reveal table th, .reveal table td { +.reveal table th, +.reveal table td { text-align: left; padding: 0.2em 0.5em 0.2em 0.5em; border-bottom: 1px solid; } -.reveal table tr:last-child td { +.reveal table th[align="center"], +.reveal table td[align="center"] { + text-align: center; } + +.reveal table th[align="right"], +.reveal table td[align="right"] { + text-align: right; } + +.reveal table tbody tr:last-child th, +.reveal table tbody tr:last-child td { border-bottom: none; } .reveal sup { @@ -183,18 +207,18 @@ body { .reveal a { color: #2a76dd; text-decoration: none; - -webkit-transition: color 0.15s ease; - -moz-transition: color 0.15s ease; - transition: color 0.15s ease; } + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + transition: color .15s ease; } .reveal a:hover { - color: #6ca2e8; + color: #6ca0e8; text-shadow: none; border: none; } .reveal .roll span:after { color: #fff; - background: #1a54a1; } + background: #1a53a1; } /********************************************* * IMAGES @@ -205,10 +229,14 @@ body { border: 4px solid #222; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } +.reveal section img.plain { + border: 0; + box-shadow: none; } + .reveal a img { - -webkit-transition: all 0.15s linear; - -moz-transition: all 0.15s linear; - transition: all 0.15s linear; } + -webkit-transition: all .15s linear; + -moz-transition: all .15s linear; + transition: all .15s linear; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); @@ -218,29 +246,33 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { +.reveal .controls .navigate-left, +.reveal .controls .navigate-left.enabled { border-right-color: #2a76dd; } -.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { +.reveal .controls .navigate-right, +.reveal .controls .navigate-right.enabled { border-left-color: #2a76dd; } -.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { +.reveal .controls .navigate-up, +.reveal .controls .navigate-up.enabled { border-bottom-color: #2a76dd; } -.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { +.reveal .controls .navigate-down, +.reveal .controls .navigate-down.enabled { border-top-color: #2a76dd; } -.reveal .controls div.navigate-left.enabled:hover { - border-right-color: #6ca2e8; } +.reveal .controls .navigate-left.enabled:hover { + border-right-color: #6ca0e8; } -.reveal .controls div.navigate-right.enabled:hover { - border-left-color: #6ca2e8; } +.reveal .controls .navigate-right.enabled:hover { + border-left-color: #6ca0e8; } -.reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #6ca2e8; } +.reveal .controls .navigate-up.enabled:hover { + border-bottom-color: #6ca0e8; } -.reveal .controls div.navigate-down.enabled:hover { - border-top-color: #6ca2e8; } +.reveal .controls .navigate-down.enabled:hover { + border-top-color: #6ca0e8; } /********************************************* * PROGRESS BAR @@ -253,9 +285,3 @@ body { -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } - -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: #2a76dd; } |