From ecb4347ec1d9db8cceec1cb28385fc2326087b17 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sat, 20 Oct 2012 10:57:51 -0400 Subject: modularize themes and convert them to sass (closes #191) --- css/theme/template/mixins.scss | 29 +++++++++ css/theme/template/settings.scss | 33 ++++++++++ css/theme/template/theme.scss | 135 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 197 insertions(+) create mode 100644 css/theme/template/mixins.scss create mode 100644 css/theme/template/settings.scss create mode 100644 css/theme/template/theme.scss (limited to 'css/theme/template') diff --git a/css/theme/template/mixins.scss b/css/theme/template/mixins.scss new file mode 100644 index 0000000..bc82419 --- /dev/null +++ b/css/theme/template/mixins.scss @@ -0,0 +1,29 @@ +@mixin vertical-gradient( $top, $bottom ) { + background: $top; + background: -moz-linear-gradient( top, $top 0%, $bottom 100% ); + background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom) ); + background: -webkit-linear-gradient( top, $top 0%, $bottom 100% ); + background: -o-linear-gradient( top, $top 0%, $bottom 100% ); + background: -ms-linear-gradient( top, $top 0%, $bottom 100% ); + background: linear-gradient( top, $top 0%, $bottom 100% ); +} + +@mixin horizontal-gradient( $top, $bottom ) { + background: $top; + background: -moz-linear-gradient( left, $top 0%, $bottom 100% ); + background: -webkit-gradient( linear, left top, right top, color-stop(0%,$top), color-stop(100%,$bottom) ); + background: -webkit-linear-gradient( left, $top 0%, $bottom 100% ); + background: -o-linear-gradient( left, $top 0%, $bottom 100% ); + background: -ms-linear-gradient( left, $top 0%, $bottom 100% ); + background: linear-gradient( left, $top 0%, $bottom 100% ); +} + +@mixin radial-gradient( $outer, $inner, $type: circle ) { + background: $inner; + background: -moz-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); + background: -webkit-gradient( radial, center center, 0px, center center, 100%, color-stop(0%,$inner), color-stop(100%,$outer) ); + background: -webkit-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); + background: -o-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); + background: -ms-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); + background: radial-gradient( center, $type cover, $inner 0%, $outer 100% ); +} \ No newline at end of file diff --git a/css/theme/template/settings.scss b/css/theme/template/settings.scss new file mode 100644 index 0000000..bc9f138 --- /dev/null +++ b/css/theme/template/settings.scss @@ -0,0 +1,33 @@ +// Base settings for all themes that can optionally be +// overridden by the super-theme + +// Background of the presentation +$backgroundColor: #2b2b2b; + +// Primary/body text +$mainFont: 'Lato', Times, 'Times New Roman', serif; +$mainFontSize: 36px; +$mainColor: #eee; + +// Headings +$headingFont: 'League Gothic', Impact, sans-serif; +$headingColor: #eee; +$headingLineHeight: 0.9em; +$headingLetterSpacing: 0.02em; +$headingTextTransform: uppercase; +$headingTextShadow: 0px 0px 6px rgba(0,0,0,0.2); +$heading1TextShadow: $headingTextShadow; + +// Links and actions +$linkColor: #13DAEC; +$linkColorHover: lighten( $linkColor, 20% ); + +// Text selection +$selectionBackgroundColor: #FF5E99; +$selectionColor: #fff; + +// Generates the presentation background, can be overridden +// to return a background image or gradient +@mixin bodyBackground() { + background: $backgroundColor; +} \ No newline at end of file diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss new file mode 100644 index 0000000..353a98c --- /dev/null +++ b/css/theme/template/theme.scss @@ -0,0 +1,135 @@ +// Base theme template for reveal.js + +/********************************************* + * GLOBAL STYLES + *********************************************/ + +body { + @include bodyBackground(); +} + +.reveal { + font-family: $mainFont; + font-size: $mainFontSize; + font-weight: 200; + letter-spacing: -0.02em; + color: $mainColor; +} + +::selection { + color: $selectionColor; + background: $selectionBackgroundColor; + text-shadow: none; +} + +/********************************************* + * HEADERS + *********************************************/ + +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { + margin: 0 0 20px 0; + color: $headingColor; + + font-family: $headingFont; + line-height: $headingLineHeight; + letter-spacing: $headingLetterSpacing; + + text-transform: $headingTextTransform; + text-shadow: $headingTextShadow; +} + +.reveal h1 { + text-shadow: $heading1TextShadow; +} + + +/********************************************* + * LINKS + *********************************************/ + +.reveal a:not(.image) { + color: $linkColor; + text-decoration: none; + + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + -ms-transition: color .15s ease; + -o-transition: color .15s ease; + transition: color .15s ease; +} + .reveal a:not(.image):hover { + color: $linkColorHover; + + text-shadow: none; + border: none; + border-radius: 2px; + } + +.reveal .roll span:after { + color: #fff; + background: darken( $linkColor, 15% ); +} + + +/********************************************* + * IMAGES + *********************************************/ + +.reveal section img { + margin: 15px; + background: rgba(255,255,255,0.12); + border: 4px solid $mainColor; + + box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); + + -webkit-transition: all .2s linear; + -moz-transition: all .2s linear; + -ms-transition: all .2s linear; + -o-transition: all .2s linear; + transition: all .2s linear; +} + + .reveal a:hover img { + background: rgba(255,255,255,0.2); + border-color: $linkColor; + + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); + } + + +/********************************************* + * NAVIGATION CONTROLS + *********************************************/ + +.reveal .controls a { + color: $mainColor; +} + .reveal .controls a.enabled { + color: $linkColorHover; + text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3); + } + + +/********************************************* + * PROGRESS BAR + *********************************************/ + +.reveal .progress { + background: rgba(0,0,0,0.2); +} + .reveal .progress span { + background: $linkColor; + + -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + } + + -- cgit v1.2.3 From 143fc85c657a4953d3f3b878b845cc60efbed748 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sat, 20 Oct 2012 21:43:42 -0400 Subject: use outer color of radial gradient as solid fallback --- css/theme/beige.css | 4 ++-- css/theme/default.css | 4 ++-- css/theme/serif.css | 2 +- css/theme/simple.css | 2 +- css/theme/sky.css | 4 ++-- css/theme/template/mixins.scss | 2 +- 6 files changed, 9 insertions(+), 9 deletions(-) (limited to 'css/theme/template') diff --git a/css/theme/beige.css b/css/theme/beige.css index 6b887f3..e1e635a 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -1,5 +1,5 @@ @import url(http://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 @@ -16,7 +16,7 @@ * GLOBAL STYLES *********************************************/ body { - background: white; + background: #f7f2d3; 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%); diff --git a/css/theme/default.css b/css/theme/default.css index d8f9299..3fe7a2a 100644 --- a/css/theme/default.css +++ b/css/theme/default.css @@ -1,5 +1,5 @@ @import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); -/* +/** * Default theme for reveal.js. * * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se @@ -16,7 +16,7 @@ * GLOBAL STYLES *********************************************/ body { - background: #555a5f; + background: #1c1e20; background: -moz-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #555a5f), color-stop(100%, #1c1e20)); background: -webkit-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); diff --git a/css/theme/serif.css b/css/theme/serif.css index b9f2406..78ed931 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -1,4 +1,4 @@ -/* +/** * A simple theme for reveal.js presentations, similar * to the default theme. The accent color is darkblue. * diff --git a/css/theme/simple.css b/css/theme/simple.css index 53d665f..663c09a 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -1,6 +1,6 @@ @import url(http://fonts.googleapis.com/css?family=News+Cycle:400,700); @import url(http://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. * diff --git a/css/theme/sky.css b/css/theme/sky.css index f3fb04f..cd0be94 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -1,6 +1,6 @@ @import url(http://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic); @import url(http://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 @@ -9,7 +9,7 @@ * GLOBAL STYLES *********************************************/ body { - background: #f7fbfc; + background: #add9e4; background: -moz-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #f7fbfc), color-stop(100%, #add9e4)); background: -webkit-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); diff --git a/css/theme/template/mixins.scss b/css/theme/template/mixins.scss index bc82419..e0c5606 100644 --- a/css/theme/template/mixins.scss +++ b/css/theme/template/mixins.scss @@ -19,7 +19,7 @@ } @mixin radial-gradient( $outer, $inner, $type: circle ) { - background: $inner; + background: $outer; background: -moz-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); background: -webkit-gradient( radial, center center, 0px, center center, 100%, color-stop(0%,$inner), color-stop(100%,$outer) ); background: -webkit-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); -- cgit v1.2.3 From 7f4e5fc6bf0fa4c7ef121d707d385ee89128a441 Mon Sep 17 00:00:00 2001 From: Russell Beattie Date: Mon, 22 Oct 2012 19:34:31 -0700 Subject: Updated new CSS triangle controls to use theme colors. --- css/theme/beige.css | 33 ++++++++++++++++++++++++++++----- css/theme/default.css | 33 ++++++++++++++++++++++++++++----- css/theme/serif.css | 33 ++++++++++++++++++++++++++++----- css/theme/simple.css | 33 ++++++++++++++++++++++++++++----- css/theme/sky.css | 33 ++++++++++++++++++++++++++++----- css/theme/template/theme.scss | 36 ++++++++++++++++++++++++++++++------ 6 files changed, 170 insertions(+), 31 deletions(-) (limited to 'css/theme/template') diff --git a/css/theme/beige.css b/css/theme/beige.css index e1e635a..6d2eea9 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -110,13 +110,36 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls a { - color: #333333; +.reveal .controls div.left { + border-right-color: #333333; } -.reveal .controls a.enabled { - color: #c0a86e; - text-shadow: 0px 0px 2px rgba(144, 207, 213, 0.3); +.reveal .controls div.right { + border-left-color: #333333; +} + +.reveal .controls div.up { + border-bottom-color: #333333; +} + +.reveal .controls div.down { + border-top-color: #333333; +} + +.reveal .controls div.left.enabled { + border-right-color: #c0a86e; +} + +.reveal .controls div.right.enabled { + border-left-color: #c0a86e; +} + +.reveal .controls div.up.enabled { + border-bottom-color: #c0a86e; +} + +.reveal .controls div.down.enabled { + border-top-color: #c0a86e; } /********************************************* diff --git a/css/theme/default.css b/css/theme/default.css index 3fe7a2a..0b393c2 100644 --- a/css/theme/default.css +++ b/css/theme/default.css @@ -110,13 +110,36 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls a { - color: #eeeeee; +.reveal .controls div.left { + border-right-color: #eeeeee; } -.reveal .controls a.enabled { - color: #71e9f4; - text-shadow: 0px 0px 2px rgba(144, 207, 213, 0.3); +.reveal .controls div.right { + border-left-color: #eeeeee; +} + +.reveal .controls div.up { + border-bottom-color: #eeeeee; +} + +.reveal .controls div.down { + border-top-color: #eeeeee; +} + +.reveal .controls div.left.enabled { + border-right-color: #71e9f4; +} + +.reveal .controls div.right.enabled { + border-left-color: #71e9f4; +} + +.reveal .controls div.up.enabled { + border-bottom-color: #71e9f4; +} + +.reveal .controls div.down.enabled { + border-top-color: #71e9f4; } /********************************************* diff --git a/css/theme/serif.css b/css/theme/serif.css index 78ed931..55a6b3a 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -97,13 +97,36 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls a { - color: black; +.reveal .controls div.left { + border-right-color: black; } -.reveal .controls a.enabled { - color: #8b7c69; - text-shadow: 0px 0px 2px rgba(144, 207, 213, 0.3); +.reveal .controls div.right { + border-left-color: black; +} + +.reveal .controls div.up { + border-bottom-color: black; +} + +.reveal .controls div.down { + border-top-color: black; +} + +.reveal .controls div.left.enabled { + border-right-color: #8b7c69; +} + +.reveal .controls div.right.enabled { + border-left-color: #8b7c69; +} + +.reveal .controls div.up.enabled { + border-bottom-color: #8b7c69; +} + +.reveal .controls div.down.enabled { + border-top-color: #8b7c69; } /********************************************* diff --git a/css/theme/simple.css b/css/theme/simple.css index 663c09a..8fb23c4 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -99,13 +99,36 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls a { - color: black; +.reveal .controls div.left { + border-right-color: black; } -.reveal .controls a.enabled { - color: #0000f1; - text-shadow: 0px 0px 2px rgba(144, 207, 213, 0.3); +.reveal .controls div.right { + border-left-color: black; +} + +.reveal .controls div.up { + border-bottom-color: black; +} + +.reveal .controls div.down { + border-top-color: black; +} + +.reveal .controls div.left.enabled { + border-right-color: #0000f1; +} + +.reveal .controls div.right.enabled { + border-left-color: #0000f1; +} + +.reveal .controls div.up.enabled { + border-bottom-color: #0000f1; +} + +.reveal .controls div.down.enabled { + border-top-color: #0000f1; } /********************************************* diff --git a/css/theme/sky.css b/css/theme/sky.css index cd0be94..d68fc8b 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -103,13 +103,36 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls a { - color: #333333; +.reveal .controls div.left { + border-right-color: #333333; } -.reveal .controls a.enabled { - color: #74a7cb; - text-shadow: 0px 0px 2px rgba(144, 207, 213, 0.3); +.reveal .controls div.right { + border-left-color: #333333; +} + +.reveal .controls div.up { + border-bottom-color: #333333; +} + +.reveal .controls div.down { + border-top-color: #333333; +} + +.reveal .controls div.left.enabled { + border-right-color: #74a7cb; +} + +.reveal .controls div.right.enabled { + border-left-color: #74a7cb; +} + +.reveal .controls div.up.enabled { + border-bottom-color: #74a7cb; +} + +.reveal .controls div.down.enabled { + border-top-color: #74a7cb; } /********************************************* diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss index 353a98c..9c22ecb 100644 --- a/css/theme/template/theme.scss +++ b/css/theme/template/theme.scss @@ -106,13 +106,37 @@ body { * NAVIGATION CONTROLS *********************************************/ -.reveal .controls a { - color: $mainColor; +.reveal .controls div.left { + border-right-color: $mainColor; +} + +.reveal .controls div.right { + border-left-color: $mainColor; +} + +.reveal .controls div.up { + border-bottom-color: $mainColor; +} + +.reveal .controls div.down { + border-top-color: $mainColor; +} + +.reveal .controls div.left.enabled { + border-right-color: $linkColorHover; +} + +.reveal .controls div.right.enabled { + border-left-color: $linkColorHover; +} + +.reveal .controls div.up.enabled { + border-bottom-color: $linkColorHover; +} + +.reveal .controls div.down.enabled { + border-top-color: $linkColorHover; } - .reveal .controls a.enabled { - color: $linkColorHover; - text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3); - } /********************************************* -- cgit v1.2.3 From aefe981040ea8c5c7875d9da1ac860def44a19e8 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Mon, 22 Oct 2012 23:16:14 -0400 Subject: use borders to generate control arrows (closes #137) --- css/reveal.css | 27 +++++++++++++++++++-------- css/theme/beige.css | 28 ++++++++++++++++------------ css/theme/default.css | 28 ++++++++++++++++------------ css/theme/serif.css | 28 ++++++++++++++++------------ css/theme/simple.css | 28 ++++++++++++++++------------ css/theme/sky.css | 28 ++++++++++++++++------------ css/theme/template/theme.scss | 28 ++++++++++++++++------------ js/reveal.min.js | 7 +++---- 8 files changed, 118 insertions(+), 84 deletions(-) (limited to 'css/theme/template') diff --git a/css/reveal.css b/css/reveal.css index ce4765f..b39ea13 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -316,8 +316,8 @@ body { .reveal .controls { display: none; position: fixed; - width: 90px; - height: 90px; + width: 110px; + height: 110px; z-index: 30; right: 10px; bottom: 10px; @@ -329,10 +329,17 @@ body { width: 0; height: 0; border: 12px solid transparent; + + -webkit-transition: opacity 0.2s ease; + -moz-transition: opacity 0.2s ease; + -ms-transition: opacity 0.2s ease; + -o-transition: opacity 0.2s ease; + transition: opacity 0.2s ease; } .reveal .controls div.enabled { opacity: 0.6; + cursor: pointer; } .reveal .controls div.enabled:active { @@ -340,28 +347,32 @@ body { } .reveal .controls div.left { - top: 30px; + top: 42px; + border-right-width: 22px; border-right-color: #eee; } .reveal .controls div.right { - left: 60px; - top: 30px; + left: 74px; + top: 42px; + border-left-width: 22px; border-left-color: #eee; } .reveal .controls div.up { - left: 30px; + left: 42px; + border-bottom-width: 22px; border-bottom-color: #eee; } .reveal .controls div.down { - left: 30px; - top: 60px; + left: 42px; + top: 74px; + border-top-width: 22px; border-top-color: #eee; } diff --git a/css/theme/beige.css b/css/theme/beige.css index 6d2eea9..fe0e460 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -110,35 +110,39 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left { - border-right-color: #333333; +.reveal .controls div.left, +.reveal .controls div.left.enabled { + border-right-color: #8b743d; } -.reveal .controls div.right { - border-left-color: #333333; +.reveal .controls div.right, +.reveal .controls div.right.enabled { + border-left-color: #8b743d; } -.reveal .controls div.up { - border-bottom-color: #333333; +.reveal .controls div.up, +.reveal .controls div.up.enabled { + border-bottom-color: #8b743d; } -.reveal .controls div.down { - border-top-color: #333333; +.reveal .controls div.down, +.reveal .controls div.down.enabled { + border-top-color: #8b743d; } -.reveal .controls div.left.enabled { +.reveal .controls div.left.enabled:hover { border-right-color: #c0a86e; } -.reveal .controls div.right.enabled { +.reveal .controls div.right.enabled:hover { border-left-color: #c0a86e; } -.reveal .controls div.up.enabled { +.reveal .controls div.up.enabled:hover { border-bottom-color: #c0a86e; } -.reveal .controls div.down.enabled { +.reveal .controls div.down.enabled:hover { border-top-color: #c0a86e; } diff --git a/css/theme/default.css b/css/theme/default.css index 0b393c2..563e4d9 100644 --- a/css/theme/default.css +++ b/css/theme/default.css @@ -110,35 +110,39 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left { - border-right-color: #eeeeee; +.reveal .controls div.left, +.reveal .controls div.left.enabled { + border-right-color: #13daec; } -.reveal .controls div.right { - border-left-color: #eeeeee; +.reveal .controls div.right, +.reveal .controls div.right.enabled { + border-left-color: #13daec; } -.reveal .controls div.up { - border-bottom-color: #eeeeee; +.reveal .controls div.up, +.reveal .controls div.up.enabled { + border-bottom-color: #13daec; } -.reveal .controls div.down { - border-top-color: #eeeeee; +.reveal .controls div.down, +.reveal .controls div.down.enabled { + border-top-color: #13daec; } -.reveal .controls div.left.enabled { +.reveal .controls div.left.enabled:hover { border-right-color: #71e9f4; } -.reveal .controls div.right.enabled { +.reveal .controls div.right.enabled:hover { border-left-color: #71e9f4; } -.reveal .controls div.up.enabled { +.reveal .controls div.up.enabled:hover { border-bottom-color: #71e9f4; } -.reveal .controls div.down.enabled { +.reveal .controls div.down.enabled:hover { border-top-color: #71e9f4; } diff --git a/css/theme/serif.css b/css/theme/serif.css index 55a6b3a..3957b5d 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -97,35 +97,39 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left { - border-right-color: black; +.reveal .controls div.left, +.reveal .controls div.left.enabled { + border-right-color: #51483d; } -.reveal .controls div.right { - border-left-color: black; +.reveal .controls div.right, +.reveal .controls div.right.enabled { + border-left-color: #51483d; } -.reveal .controls div.up { - border-bottom-color: black; +.reveal .controls div.up, +.reveal .controls div.up.enabled { + border-bottom-color: #51483d; } -.reveal .controls div.down { - border-top-color: black; +.reveal .controls div.down, +.reveal .controls div.down.enabled { + border-top-color: #51483d; } -.reveal .controls div.left.enabled { +.reveal .controls div.left.enabled:hover { border-right-color: #8b7c69; } -.reveal .controls div.right.enabled { +.reveal .controls div.right.enabled:hover { border-left-color: #8b7c69; } -.reveal .controls div.up.enabled { +.reveal .controls div.up.enabled:hover { border-bottom-color: #8b7c69; } -.reveal .controls div.down.enabled { +.reveal .controls div.down.enabled:hover { border-top-color: #8b7c69; } diff --git a/css/theme/simple.css b/css/theme/simple.css index 8fb23c4..926bbc5 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -99,35 +99,39 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left { - border-right-color: black; +.reveal .controls div.left, +.reveal .controls div.left.enabled { + border-right-color: darkblue; } -.reveal .controls div.right { - border-left-color: black; +.reveal .controls div.right, +.reveal .controls div.right.enabled { + border-left-color: darkblue; } -.reveal .controls div.up { - border-bottom-color: black; +.reveal .controls div.up, +.reveal .controls div.up.enabled { + border-bottom-color: darkblue; } -.reveal .controls div.down { - border-top-color: black; +.reveal .controls div.down, +.reveal .controls div.down.enabled { + border-top-color: darkblue; } -.reveal .controls div.left.enabled { +.reveal .controls div.left.enabled:hover { border-right-color: #0000f1; } -.reveal .controls div.right.enabled { +.reveal .controls div.right.enabled:hover { border-left-color: #0000f1; } -.reveal .controls div.up.enabled { +.reveal .controls div.up.enabled:hover { border-bottom-color: #0000f1; } -.reveal .controls div.down.enabled { +.reveal .controls div.down.enabled:hover { border-top-color: #0000f1; } diff --git a/css/theme/sky.css b/css/theme/sky.css index d68fc8b..6618c0d 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -103,35 +103,39 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left { - border-right-color: #333333; +.reveal .controls div.left, +.reveal .controls div.left.enabled { + border-right-color: #3b759e; } -.reveal .controls div.right { - border-left-color: #333333; +.reveal .controls div.right, +.reveal .controls div.right.enabled { + border-left-color: #3b759e; } -.reveal .controls div.up { - border-bottom-color: #333333; +.reveal .controls div.up, +.reveal .controls div.up.enabled { + border-bottom-color: #3b759e; } -.reveal .controls div.down { - border-top-color: #333333; +.reveal .controls div.down, +.reveal .controls div.down.enabled { + border-top-color: #3b759e; } -.reveal .controls div.left.enabled { +.reveal .controls div.left.enabled:hover { border-right-color: #74a7cb; } -.reveal .controls div.right.enabled { +.reveal .controls div.right.enabled:hover { border-left-color: #74a7cb; } -.reveal .controls div.up.enabled { +.reveal .controls div.up.enabled:hover { border-bottom-color: #74a7cb; } -.reveal .controls div.down.enabled { +.reveal .controls div.down.enabled:hover { border-top-color: #74a7cb; } diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss index 9c22ecb..600c8e3 100644 --- a/css/theme/template/theme.scss +++ b/css/theme/template/theme.scss @@ -106,35 +106,39 @@ body { * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left { - border-right-color: $mainColor; +.reveal .controls div.left, +.reveal .controls div.left.enabled { + border-right-color: $linkColor; } -.reveal .controls div.right { - border-left-color: $mainColor; +.reveal .controls div.right, +.reveal .controls div.right.enabled { + border-left-color: $linkColor; } -.reveal .controls div.up { - border-bottom-color: $mainColor; +.reveal .controls div.up, +.reveal .controls div.up.enabled { + border-bottom-color: $linkColor; } -.reveal .controls div.down { - border-top-color: $mainColor; +.reveal .controls div.down, +.reveal .controls div.down.enabled { + border-top-color: $linkColor; } -.reveal .controls div.left.enabled { +.reveal .controls div.left.enabled:hover { border-right-color: $linkColorHover; } -.reveal .controls div.right.enabled { +.reveal .controls div.right.enabled:hover { border-left-color: $linkColorHover; } -.reveal .controls div.up.enabled { +.reveal .controls div.up.enabled:hover { border-bottom-color: $linkColorHover; } -.reveal .controls div.down.enabled { +.reveal .controls div.down.enabled:hover { border-top-color: $linkColorHover; } diff --git a/js/reveal.min.js b/js/reveal.min.js index 7fb4f9a..278d5e8 100644 --- a/js/reveal.min.js +++ b/js/reveal.min.js @@ -9,10 +9,9 @@ var Reveal=(function(){var l=".reveal .slides>section",b=".reveal .slides>sectio function i(al){if((!n&&!T)){document.body.setAttribute("class","no-transforms");return;}t(R,al);d();V();}function P(){f.theme=document.querySelector("#theme"); f.wrapper=document.querySelector(".reveal");if(!f.wrapper.querySelector(".progress")&&R.progress){var ao=document.createElement("div");ao.classList.add("progress"); ao.innerHTML="";f.wrapper.appendChild(ao);}if(!f.wrapper.querySelector(".controls")&&R.controls){var an=document.createElement("aside");an.classList.add("controls"); -an.innerHTML='◄►▲▼'; -f.wrapper.appendChild(an);}if(!f.wrapper.querySelector(".state-background")){var am=document.createElement("div");am.classList.add("state-background"); -f.wrapper.appendChild(am);}if(!f.wrapper.querySelector(".pause-overlay")){var al=document.createElement("div");al.classList.add("pause-overlay");f.wrapper.appendChild(al); -}f.progress=document.querySelector(".reveal .progress");f.progressbar=document.querySelector(".reveal .progress span");if(R.controls){f.controls=document.querySelector(".reveal .controls"); +an.innerHTML='
';f.wrapper.appendChild(an);}if(!f.wrapper.querySelector(".state-background")){var am=document.createElement("div"); +am.classList.add("state-background");f.wrapper.appendChild(am);}if(!f.wrapper.querySelector(".pause-overlay")){var al=document.createElement("div");al.classList.add("pause-overlay"); +f.wrapper.appendChild(al);}f.progress=document.querySelector(".reveal .progress");f.progressbar=document.querySelector(".reveal .progress span");if(R.controls){f.controls=document.querySelector(".reveal .controls"); f.controlsLeft=document.querySelector(".reveal .controls .left");f.controlsRight=document.querySelector(".reveal .controls .right");f.controlsUp=document.querySelector(".reveal .controls .up"); f.controlsDown=document.querySelector(".reveal .controls .down");}}function d(){if(navigator.userAgent.match(/(iphone|ipod|android)/i)){document.documentElement.style.overflow="scroll"; document.body.style.height="120%";window.addEventListener("load",ad,false);window.addEventListener("orientationchange",ad,false);}}function V(){var am=[],aq=[]; -- cgit v1.2.3 From af2a8b053d27ed5c97256d29ab4f06a6bcece6b7 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sun, 28 Oct 2012 19:32:24 -0400 Subject: include theme background in printed pdfs (#217), fix empty white pages in regular print (#215) --- css/print/paper.css | 57 +++++++++++++++++++++++-------------------- css/print/pdf.css | 53 +++++++++++++++++++--------------------- css/theme/beige.css | 1 + css/theme/default.css | 1 + css/theme/serif.css | 1 + css/theme/simple.css | 1 + css/theme/sky.css | 1 + css/theme/template/theme.scss | 1 + 8 files changed, 61 insertions(+), 55 deletions(-) (limited to 'css/theme/template') diff --git a/css/print/paper.css b/css/print/paper.css index 0ac5597..61fa0a9 100644 --- a/css/print/paper.css +++ b/css/print/paper.css @@ -31,19 +31,19 @@ html { /* SECTION 2: Remove any elements not needed in print. This would include navigation, ads, sidebars, etc. */ .nestedarrow, -.controls a, +.controls, .reveal .progress, .reveal.overview, .fork-reveal, .share-reveal, .state-background { - display:none; + display: none !important; } /* SECTION 3: Set body font face, size, and color. Consider using a serif font for readability. */ body, p, td, li, div, a { - font-size: 13pt; + font-size: 16pt!important; font-family: Georgia, "Times New Roman", Times, serif !important; color: #000; } @@ -77,12 +77,14 @@ a:visited { font-weight: bold; text-decoration: underline; } +/* .reveal a:link:after, .reveal a:visited:after { content: " (" attr(href) ") "; color: #222 !important; font-size: 90%; } +*/ /* SECTION 6: more reveal.js specific additions by @skypanther */ @@ -121,35 +123,33 @@ ul, ol, div, p { -ms-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } -.reveal .slides>section, .reveal .slides>section>section, -.reveal .slides>section.past, .reveal .slides>section.future, -.reveal.linear .slides>section, .reveal.linear .slides>section>section, -.reveal.linear .slides>section.past, .reveal.linear .slides>section.future { +.reveal .slides>section, +.reveal .slides>section>section { - visibility: visible; - position: static; - width: 90%; - height: auto; - display: block; - overflow: visible; + visibility: visible !important; + position: static !important; + width: 90% !important; + height: auto !important; + display: block !important; + overflow: visible !important; - left: 0%; - top: 0%; - margin-left: 0px; - margin-top: 0px; - padding: 20px 0px; + left: 0% !important; + top: 0% !important; + margin-left: 0px !important; + margin-top: 0px !important; + padding: 20px 0px !important; - opacity: 1; + opacity: 1 !important; - -webkit-transform-style: flat; - -moz-transform-style: flat; - -ms-transform-style: flat; - transform-style: flat; + -webkit-transform-style: flat !important; + -moz-transform-style: flat !important; + -ms-transform-style: flat !important; + transform-style: flat !important; - -webkit-transform: none; - -moz-transform: none; - -ms-transform: none; - transform: none; + -webkit-transform: none !important; + -moz-transform: none !important; + -ms-transform: none !important; + transform: none !important; } .reveal section { page-break-after: always !important; @@ -161,6 +161,9 @@ ul, ol, div, p { .reveal section .fragment { opacity: 1 !important; } +.reveal section:last-of-type { + page-break-after: avoid !important; +} .reveal section img { display: block; margin: 15px 0px; diff --git a/css/print/pdf.css b/css/print/pdf.css index ec03eda..7c1a496 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -23,7 +23,7 @@ body { padding: 0; float: none !important; overflow: visible; - background: #333; + background-image: none; } html { @@ -35,13 +35,13 @@ html { /* SECTION 2: Remove any elements not needed in print. This would include navigation, ads, sidebars, etc. */ .nestedarrow, -.controls a, +.controls, .reveal .progress, .reveal.overview, .fork-reveal, .share-reveal, .state-background { - display:none; + display: none !important; } /* SECTION 3: Set body font face, size, and color. @@ -102,36 +102,33 @@ ul, ol, div, p { -ms-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } -.reveal .slides>section, .reveal .slides>section>section, -.reveal .slides>section.past, .reveal .slides>section.future, -.reveal.linear .slides>section, .reveal.linear .slides>section>section, -.reveal.linear .slides>section.past, .reveal.linear .slides>section.future { +.reveal .slides>section, .reveal .slides>section>section { - visibility: visible; - position: static; - width: 100%; - height: auto; - min-height: initial; - display: block; - overflow: visible; + visibility: visible !important; + position: static !important; + width: 100% !important; + height: auto !important; + min-height: initial !important; + display: block !important; + overflow: visible !important; - left: 0%; - top: 0%; - margin-left: 0px; - margin-top: 50px; - padding: 20px 0px; + left: 0% !important; + top: 0% !important; + margin-left: 0px !important; + margin-top: 50px !important; + padding: 20px 0px !important; - opacity: 1; + opacity: 1 !important; - -webkit-transform-style: flat; - -moz-transform-style: flat; - -ms-transform-style: flat; - transform-style: flat; + -webkit-transform-style: flat !important; + -moz-transform-style: flat !important; + -ms-transform-style: flat !important; + transform-style: flat !important; - -webkit-transform: none; - -moz-transform: none; - -ms-transform: none; - transform: none; + -webkit-transform: none !important; + -moz-transform: none !important; + -ms-transform: none !important; + transform: none !important; } .reveal section { page-break-after: always !important; diff --git a/css/theme/beige.css b/css/theme/beige.css index fe0e460..727be44 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -23,6 +23,7 @@ body { 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 { diff --git a/css/theme/default.css b/css/theme/default.css index 563e4d9..c8f2eff 100644 --- a/css/theme/default.css +++ b/css/theme/default.css @@ -23,6 +23,7 @@ body { background: -o-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); background: -ms-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); + background-color: #2b2b2b; } .reveal { diff --git a/css/theme/serif.css b/css/theme/serif.css index 3957b5d..86710c6 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -10,6 +10,7 @@ *********************************************/ body { background: #f0f1eb; + background-color: #f0f1eb; } .reveal { diff --git a/css/theme/simple.css b/css/theme/simple.css index 926bbc5..848ca93 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -12,6 +12,7 @@ *********************************************/ body { background: white; + background-color: white; } .reveal { diff --git a/css/theme/sky.css b/css/theme/sky.css index 6618c0d..a6d94eb 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -16,6 +16,7 @@ body { background: -o-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); background: -ms-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); background: radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); + background-color: #f7fbfc; } .reveal { diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss index 600c8e3..c53df39 100644 --- a/css/theme/template/theme.scss +++ b/css/theme/template/theme.scss @@ -6,6 +6,7 @@ body { @include bodyBackground(); + background-color: $backgroundColor; } .reveal { -- cgit v1.2.3 From 5c5b3d34d9031f08fb6b8a8e16345c36e2891c9d Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Mon, 29 Oct 2012 00:10:14 -0400 Subject: fix rolling links glitch in firefox --- css/reveal.css | 18 +++++++++--------- css/theme/beige.css | 1 - css/theme/default.css | 1 - css/theme/serif.css | 1 - css/theme/simple.css | 1 - css/theme/sky.css | 1 - css/theme/template/theme.scss | 1 - 7 files changed, 9 insertions(+), 15 deletions(-) (limited to 'css/theme/template') diff --git a/css/reveal.css b/css/reveal.css index ad2e33e..412e8ec 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -1157,15 +1157,15 @@ body { .zoomed .reveal *, .zoomed .reveal *:before, .zoomed .reveal *:after { - -webkit-transform: initial !important; - -moz-transform: initial !important; - -ms-transform: initial !important; - transform: initial !important; - - -webkit-backface-visibility: initial !important; - -moz-backface-visibility: initial !important; - -ms-backface-visibility: initial !important; - backface-visibility: initial !important; + -webkit-transform: none !important; + -moz-transform: none !important; + -ms-transform: none !important; + transform: none !important; + + -webkit-backface-visibility: visible !important; + -moz-backface-visibility: visible !important; + -ms-backface-visibility: visible !important; + backface-visibility: visible !important; } .zoomed .reveal .progress, diff --git a/css/theme/beige.css b/css/theme/beige.css index 727be44..5e40883 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -79,7 +79,6 @@ body { color: #c0a86e; text-shadow: none; border: none; - border-radius: 2px; } .reveal .roll span:after { diff --git a/css/theme/default.css b/css/theme/default.css index c8f2eff..28ed7d3 100644 --- a/css/theme/default.css +++ b/css/theme/default.css @@ -79,7 +79,6 @@ body { color: #71e9f4; text-shadow: none; border: none; - border-radius: 2px; } .reveal .roll span:after { diff --git a/css/theme/serif.css b/css/theme/serif.css index 86710c6..ece6124 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -66,7 +66,6 @@ body { color: #8b7c69; text-shadow: none; border: none; - border-radius: 2px; } .reveal .roll span:after { diff --git a/css/theme/simple.css b/css/theme/simple.css index 848ca93..6d0771a 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -68,7 +68,6 @@ body { color: #0000f1; text-shadow: none; border: none; - border-radius: 2px; } .reveal .roll span:after { diff --git a/css/theme/sky.css b/css/theme/sky.css index a6d94eb..18a4863 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -72,7 +72,6 @@ body { color: #74a7cb; text-shadow: none; border: none; - border-radius: 2px; } .reveal .roll span:after { diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss index c53df39..6a80b62 100644 --- a/css/theme/template/theme.scss +++ b/css/theme/template/theme.scss @@ -68,7 +68,6 @@ body { text-shadow: none; border: none; - border-radius: 2px; } .reveal .roll span:after { -- cgit v1.2.3 From c79376dab2998cdaf906bb281ae4fc220e2a2e3a Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sat, 10 Nov 2012 11:40:19 -0500 Subject: allow multiple control elements, document usage of global controls (#184, #204) --- README.md | 13 ++++ css/reveal.css | 8 +-- css/theme/beige.css | 24 +++---- css/theme/default.css | 24 +++---- css/theme/serif.css | 24 +++---- css/theme/simple.css | 24 +++---- css/theme/sky.css | 24 +++---- css/theme/template/theme.scss | 24 +++---- index.html | 14 ++-- js/reveal.js | 71 ++++++++++++------ js/reveal.min.js | 163 ++++++++++++++++++++++-------------------- 11 files changed, 231 insertions(+), 182 deletions(-) (limited to 'css/theme/template') diff --git a/README.md b/README.md index 4cb15eb..ef3e406 100644 --- a/README.md +++ b/README.md @@ -186,6 +186,19 @@ It's easy to link between slides. The first example below targets the index of a Link Link ``` + +You can also add relative navigation links, similar to the built in reveal.js controls, by appending one of the following classes on any element. Note that each element is automatically given an ```enabled``` class when its a valid navigation route based on the current slide. + +```html + + + + + + +``` + + ### Fullscreen mode Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit fullscreen mode. diff --git a/css/reveal.css b/css/reveal.css index 2e72aca..c4c2991 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -346,14 +346,14 @@ body { margin-top: 1px; } -.reveal .controls div.left { +.reveal .controls div.navigate-left { top: 42px; border-right-width: 22px; border-right-color: #eee; } -.reveal .controls div.right { +.reveal .controls div.navigate-right { left: 74px; top: 42px; @@ -361,14 +361,14 @@ body { border-left-color: #eee; } -.reveal .controls div.up { +.reveal .controls div.navigate-up { left: 42px; border-bottom-width: 22px; border-bottom-color: #eee; } -.reveal .controls div.down { +.reveal .controls div.navigate-down { left: 42px; top: 74px; diff --git a/css/theme/beige.css b/css/theme/beige.css index 5e40883..c8d38f2 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -110,39 +110,39 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left, -.reveal .controls div.left.enabled { +.reveal .controls div.navigate-left, +.reveal .controls div.navigate-left.enabled { border-right-color: #8b743d; } -.reveal .controls div.right, -.reveal .controls div.right.enabled { +.reveal .controls div.navigate-right, +.reveal .controls div.navigate-right.enabled { border-left-color: #8b743d; } -.reveal .controls div.up, -.reveal .controls div.up.enabled { +.reveal .controls div.navigate-up, +.reveal .controls div.navigate-up.enabled { border-bottom-color: #8b743d; } -.reveal .controls div.down, -.reveal .controls div.down.enabled { +.reveal .controls div.navigate-down, +.reveal .controls div.navigate-down.enabled { border-top-color: #8b743d; } -.reveal .controls div.left.enabled:hover { +.reveal .controls div.navigate-left.enabled:hover { border-right-color: #c0a86e; } -.reveal .controls div.right.enabled:hover { +.reveal .controls div.navigate-right.enabled:hover { border-left-color: #c0a86e; } -.reveal .controls div.up.enabled:hover { +.reveal .controls div.navigate-up.enabled:hover { border-bottom-color: #c0a86e; } -.reveal .controls div.down.enabled:hover { +.reveal .controls div.navigate-down.enabled:hover { border-top-color: #c0a86e; } diff --git a/css/theme/default.css b/css/theme/default.css index 28ed7d3..30d7463 100644 --- a/css/theme/default.css +++ b/css/theme/default.css @@ -110,39 +110,39 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left, -.reveal .controls div.left.enabled { +.reveal .controls div.navigate-left, +.reveal .controls div.navigate-left.enabled { border-right-color: #13daec; } -.reveal .controls div.right, -.reveal .controls div.right.enabled { +.reveal .controls div.navigate-right, +.reveal .controls div.navigate-right.enabled { border-left-color: #13daec; } -.reveal .controls div.up, -.reveal .controls div.up.enabled { +.reveal .controls div.navigate-up, +.reveal .controls div.navigate-up.enabled { border-bottom-color: #13daec; } -.reveal .controls div.down, -.reveal .controls div.down.enabled { +.reveal .controls div.navigate-down, +.reveal .controls div.navigate-down.enabled { border-top-color: #13daec; } -.reveal .controls div.left.enabled:hover { +.reveal .controls div.navigate-left.enabled:hover { border-right-color: #71e9f4; } -.reveal .controls div.right.enabled:hover { +.reveal .controls div.navigate-right.enabled:hover { border-left-color: #71e9f4; } -.reveal .controls div.up.enabled:hover { +.reveal .controls div.navigate-up.enabled:hover { border-bottom-color: #71e9f4; } -.reveal .controls div.down.enabled:hover { +.reveal .controls div.navigate-down.enabled:hover { border-top-color: #71e9f4; } diff --git a/css/theme/serif.css b/css/theme/serif.css index ece6124..3d406af 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -97,39 +97,39 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left, -.reveal .controls div.left.enabled { +.reveal .controls div.navigate-left, +.reveal .controls div.navigate-left.enabled { border-right-color: #51483d; } -.reveal .controls div.right, -.reveal .controls div.right.enabled { +.reveal .controls div.navigate-right, +.reveal .controls div.navigate-right.enabled { border-left-color: #51483d; } -.reveal .controls div.up, -.reveal .controls div.up.enabled { +.reveal .controls div.navigate-up, +.reveal .controls div.navigate-up.enabled { border-bottom-color: #51483d; } -.reveal .controls div.down, -.reveal .controls div.down.enabled { +.reveal .controls div.navigate-down, +.reveal .controls div.navigate-down.enabled { border-top-color: #51483d; } -.reveal .controls div.left.enabled:hover { +.reveal .controls div.navigate-left.enabled:hover { border-right-color: #8b7c69; } -.reveal .controls div.right.enabled:hover { +.reveal .controls div.navigate-right.enabled:hover { border-left-color: #8b7c69; } -.reveal .controls div.up.enabled:hover { +.reveal .controls div.navigate-up.enabled:hover { border-bottom-color: #8b7c69; } -.reveal .controls div.down.enabled:hover { +.reveal .controls div.navigate-down.enabled:hover { border-top-color: #8b7c69; } diff --git a/css/theme/simple.css b/css/theme/simple.css index 6d0771a..cf4f042 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -99,39 +99,39 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left, -.reveal .controls div.left.enabled { +.reveal .controls div.navigate-left, +.reveal .controls div.navigate-left.enabled { border-right-color: darkblue; } -.reveal .controls div.right, -.reveal .controls div.right.enabled { +.reveal .controls div.navigate-right, +.reveal .controls div.navigate-right.enabled { border-left-color: darkblue; } -.reveal .controls div.up, -.reveal .controls div.up.enabled { +.reveal .controls div.navigate-up, +.reveal .controls div.navigate-up.enabled { border-bottom-color: darkblue; } -.reveal .controls div.down, -.reveal .controls div.down.enabled { +.reveal .controls div.navigate-down, +.reveal .controls div.navigate-down.enabled { border-top-color: darkblue; } -.reveal .controls div.left.enabled:hover { +.reveal .controls div.navigate-left.enabled:hover { border-right-color: #0000f1; } -.reveal .controls div.right.enabled:hover { +.reveal .controls div.navigate-right.enabled:hover { border-left-color: #0000f1; } -.reveal .controls div.up.enabled:hover { +.reveal .controls div.navigate-up.enabled:hover { border-bottom-color: #0000f1; } -.reveal .controls div.down.enabled:hover { +.reveal .controls div.navigate-down.enabled:hover { border-top-color: #0000f1; } diff --git a/css/theme/sky.css b/css/theme/sky.css index 18a4863..43bb4f4 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -103,39 +103,39 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left, -.reveal .controls div.left.enabled { +.reveal .controls div.navigate-left, +.reveal .controls div.navigate-left.enabled { border-right-color: #3b759e; } -.reveal .controls div.right, -.reveal .controls div.right.enabled { +.reveal .controls div.navigate-right, +.reveal .controls div.navigate-right.enabled { border-left-color: #3b759e; } -.reveal .controls div.up, -.reveal .controls div.up.enabled { +.reveal .controls div.navigate-up, +.reveal .controls div.navigate-up.enabled { border-bottom-color: #3b759e; } -.reveal .controls div.down, -.reveal .controls div.down.enabled { +.reveal .controls div.navigate-down, +.reveal .controls div.navigate-down.enabled { border-top-color: #3b759e; } -.reveal .controls div.left.enabled:hover { +.reveal .controls div.navigate-left.enabled:hover { border-right-color: #74a7cb; } -.reveal .controls div.right.enabled:hover { +.reveal .controls div.navigate-right.enabled:hover { border-left-color: #74a7cb; } -.reveal .controls div.up.enabled:hover { +.reveal .controls div.navigate-up.enabled:hover { border-bottom-color: #74a7cb; } -.reveal .controls div.down.enabled:hover { +.reveal .controls div.navigate-down.enabled:hover { border-top-color: #74a7cb; } diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss index 6a80b62..a818ec2 100644 --- a/css/theme/template/theme.scss +++ b/css/theme/template/theme.scss @@ -106,39 +106,39 @@ body { * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left, -.reveal .controls div.left.enabled { +.reveal .controls div.navigate-left, +.reveal .controls div.navigate-left.enabled { border-right-color: $linkColor; } -.reveal .controls div.right, -.reveal .controls div.right.enabled { +.reveal .controls div.navigate-right, +.reveal .controls div.navigate-right.enabled { border-left-color: $linkColor; } -.reveal .controls div.up, -.reveal .controls div.up.enabled { +.reveal .controls div.navigate-up, +.reveal .controls div.navigate-up.enabled { border-bottom-color: $linkColor; } -.reveal .controls div.down, -.reveal .controls div.down.enabled { +.reveal .controls div.navigate-down, +.reveal .controls div.navigate-down.enabled { border-top-color: $linkColor; } -.reveal .controls div.left.enabled:hover { +.reveal .controls div.navigate-left.enabled:hover { border-right-color: $linkColorHover; } -.reveal .controls div.right.enabled:hover { +.reveal .controls div.navigate-right.enabled:hover { border-left-color: $linkColorHover; } -.reveal .controls div.up.enabled:hover { +.reveal .controls div.navigate-up.enabled:hover { border-bottom-color: $linkColorHover; } -.reveal .controls div.down.enabled:hover { +.reveal .controls div.navigate-down.enabled:hover { border-top-color: $linkColorHover; } diff --git a/index.html b/index.html index 82570f3..426b8cf 100644 --- a/index.html +++ b/index.html @@ -61,9 +61,9 @@

Vertical Slides

Slides can be nested inside of other slides, - try pressing down. + try pressing down.

- + Down arrow @@ -181,20 +181,20 @@ will be added as a class to the document element when the slide is open. This lets you apply broader style changes, like switching the background.

- + Down arrow

"blackout"

- + Down arrow

"soothe"

- - Up arrow + + Up arrow
@@ -340,7 +340,7 @@ function linkify( selector ) { - +