aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorHakim El Hattab <hakim.elhattab@gmail.com>2016-04-29 10:06:43 +0200
committerHakim El Hattab <hakim.elhattab@gmail.com>2017-05-16 09:45:37 +0200
commita9fcaa6f9e74ffd696febadb555fd12980806a7b (patch)
treecb68e53c739b8210e4d6f10aeb2ffed4a72eca3f
parent8a09557699d94d9128f98ce5115245d1bd1f68db (diff)
downloadfosdem-2018-presentation-a9fcaa6f9e74ffd696febadb555fd12980806a7b.tar
fosdem-2018-presentation-a9fcaa6f9e74ffd696febadb555fd12980806a7b.tar.gz
new controls are used by default, add config options
-rw-r--r--css/reveal.css162
-rw-r--r--css/reveal.scss143
-rw-r--r--css/theme/beige.css34
-rw-r--r--css/theme/black.css34
-rw-r--r--css/theme/blood.css34
-rw-r--r--css/theme/league.css34
-rw-r--r--css/theme/moon.css34
-rw-r--r--css/theme/night.css34
-rw-r--r--css/theme/serif.css34
-rw-r--r--css/theme/simple.css34
-rw-r--r--css/theme/sky.css34
-rw-r--r--css/theme/solarized.css34
-rw-r--r--css/theme/template/theme.scss42
-rw-r--r--css/theme/white.css34
-rw-r--r--js/reveal.js14
15 files changed, 160 insertions, 575 deletions
diff --git a/css/reveal.css b/css/reveal.css
index 897906b..dfa4e4c 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -189,69 +189,14 @@ body {
/*********************************************
* CONTROLS
*********************************************/
-.reveal .controls[data-controls-type="bottom-right"] {
- display: none;
- position: fixed;
- width: 110px;
- height: 110px;
- z-index: 30;
- right: 10px;
- bottom: 10px;
- -webkit-user-select: none; }
- .reveal .controls[data-controls-type="bottom-right"] button {
- padding: 0;
- position: absolute;
- opacity: 0.05;
- width: 0;
- height: 0;
- background-color: transparent;
- border: 12px solid transparent;
- -webkit-transform: scale(0.9999);
- transform: scale(0.9999);
- -webkit-transition: all 0.2s ease;
- transition: all 0.2s ease;
- -webkit-appearance: none;
- -webkit-tap-highlight-color: transparent; }
- .reveal .controls[data-controls-type="bottom-right"] .enabled {
- opacity: 0.7;
- cursor: pointer; }
- .reveal .controls[data-controls-type="bottom-right"] .enabled:active {
- margin-top: 1px; }
- .reveal .controls[data-controls-type="bottom-right"] .navigate-left {
- top: 42px;
- border-right-width: 22px;
- border-right-color: #000; }
- .reveal .controls[data-controls-type="bottom-right"] .navigate-left.fragmented {
- opacity: 0.3; }
- .reveal .controls[data-controls-type="bottom-right"] .navigate-right {
- left: 74px;
- top: 42px;
- border-left-width: 22px;
- border-left-color: #000; }
- .reveal .controls[data-controls-type="bottom-right"] .navigate-right.fragmented {
- opacity: 0.3; }
- .reveal .controls[data-controls-type="bottom-right"] .navigate-up {
- left: 42px;
- border-bottom-width: 22px;
- border-bottom-color: #000; }
- .reveal .controls[data-controls-type="bottom-right"] .navigate-up.fragmented {
- opacity: 0.3; }
- .reveal .controls[data-controls-type="bottom-right"] .navigate-down {
- left: 42px;
- top: 74px;
- border-top-width: 22px;
- border-top-color: #000; }
- .reveal .controls[data-controls-type="bottom-right"] .navigate-down.fragmented {
- opacity: 0.3; }
-
-.reveal .controls[data-controls-type="edges"] {
+.reveal .controls {
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0; }
- .reveal .controls[data-controls-type="edges"] button {
+ .reveal .controls button {
position: absolute;
padding: 0;
width: 50px;
@@ -268,8 +213,8 @@ body {
z-index: 2;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent; }
- .reveal .controls[data-controls-type="edges"] button:before,
- .reveal .controls[data-controls-type="edges"] button:after {
+ .reveal .controls button:before,
+ .reveal .controls button:after {
content: '';
position: absolute;
top: 0;
@@ -282,81 +227,116 @@ body {
transition: all 0.15s ease, background-color 0.8s ease;
-webkit-transform-origin: 2.5px 50%;
transform-origin: 2.5px 50%; }
- .reveal .controls[data-controls-type="edges"] button:before {
+ .reveal .controls button:before {
-webkit-transform: translateX(10px) translateY(22.5px) rotate(44deg);
transform: translateX(10px) translateY(22.5px) rotate(44deg); }
- .reveal .controls[data-controls-type="edges"] button:after {
+ .reveal .controls button:after {
-webkit-transform: translateX(10px) translateY(22.5px) rotate(-44deg);
transform: translateX(10px) translateY(22.5px) rotate(-44deg); }
- .reveal .controls[data-controls-type="edges"] button:hover:before {
+ .reveal .controls button:hover:before {
-webkit-transform: translateX(10px) translateY(22.5px) rotate(40deg);
transform: translateX(10px) translateY(22.5px) rotate(40deg); }
- .reveal .controls[data-controls-type="edges"] button:hover:after {
+ .reveal .controls button:hover:after {
-webkit-transform: translateX(10px) translateY(22.5px) rotate(-40deg);
transform: translateX(10px) translateY(22.5px) rotate(-40deg); }
- .reveal .controls[data-controls-type="edges"] button:active:before {
+ .reveal .controls button:active:before {
-webkit-transform: translateX(10px) translateY(22.5px) rotate(36deg);
transform: translateX(10px) translateY(22.5px) rotate(36deg); }
- .reveal .controls[data-controls-type="edges"] button:active:after {
+ .reveal .controls button:active:after {
-webkit-transform: translateX(10px) translateY(22.5px) rotate(-36deg);
transform: translateX(10px) translateY(22.5px) rotate(-36deg); }
- .reveal .controls[data-controls-type="edges"] .enabled {
- opacity: 0.7;
- cursor: pointer; }
- .reveal .controls[data-controls-type="edges"] .enabled.fragmented {
- opacity: 0.3; }
- .reveal .controls[data-controls-type="edges"] .enabled:hover,
- .reveal .controls[data-controls-type="edges"] .enabled.fragmented:hover {
- opacity: 1; }
- .reveal .controls[data-controls-type="edges"] .navigate-left {
+ .reveal .controls .navigate-left {
top: 50%;
left: 18px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
- .reveal .controls[data-controls-type="edges"] .navigate-right {
+ .reveal .controls .navigate-right {
top: 50%;
right: 18px;
-webkit-transform: translateY(-50%) rotate(180deg);
transform: translateY(-50%) rotate(180deg); }
- .reveal .controls[data-controls-type="edges"] .navigate-up {
+ .reveal .controls .navigate-up {
top: 18px;
left: 50%;
-webkit-transform: translateX(-50%) rotate(90deg);
transform: translateX(-50%) rotate(90deg); }
- .reveal .controls[data-controls-type="edges"] .navigate-down {
+ .reveal .controls .navigate-down {
bottom: 18px;
left: 50%;
-webkit-transform: translateX(-50%) rotate(-90deg);
transform: translateX(-50%) rotate(-90deg); }
+ .reveal .controls.soften-back-arrows .navigate-left.enabled,
+ .reveal .controls.soften-back-arrows .navigate-up.enabled {
+ opacity: 0.3; }
+ .reveal .controls.soften-back-arrows .navigate-left.enabled:hover,
+ .reveal .controls.soften-back-arrows .navigate-up.enabled:hover {
+ opacity: 1; }
+ .reveal .controls .enabled {
+ opacity: 0.7;
+ cursor: pointer; }
+ .reveal .controls .enabled.fragmented {
+ opacity: 0.3; }
+ .reveal .controls .enabled:hover,
+ .reveal .controls .enabled.fragmented:hover {
+ opacity: 1; }
+ .reveal .controls[data-controls-placement="bottom-right"] {
+ bottom: 18px;
+ right: 18px;
+ -webkit-transform: scale(0.85);
+ transform: scale(0.85);
+ -webkit-transform-origin: 100% 100%;
+ transform-origin: 100% 100%; }
+ .reveal .controls[data-controls-placement="bottom-right"] .navigate-left,
+ .reveal .controls[data-controls-placement="bottom-right"] .navigate-right,
+ .reveal .controls[data-controls-placement="bottom-right"] .navigate-up,
+ .reveal .controls[data-controls-placement="bottom-right"] .navigate-down {
+ top: auto;
+ left: auto; }
+ .reveal .controls[data-controls-placement="bottom-right"] .navigate-left {
+ right: 86px;
+ bottom: 18px; }
+ .reveal .controls[data-controls-placement="bottom-right"] .navigate-right {
+ right: 0;
+ bottom: 18px; }
+ .reveal .controls[data-controls-placement="bottom-right"] .navigate-up {
+ right: 18px;
+ bottom: 86px; }
+ .reveal .controls[data-controls-placement="bottom-right"] .navigate-down {
+ right: 18px;
+ bottom: 0; }
@media screen and (max-width: 500px) {
- .reveal .controls[data-controls-type="edges"] {
+ .reveal .controls {
bottom: 18px;
- right: 18px; }
- .reveal .controls[data-controls-type="edges"] .navigate-left,
- .reveal .controls[data-controls-type="edges"] .navigate-right,
- .reveal .controls[data-controls-type="edges"] .navigate-up,
- .reveal .controls[data-controls-type="edges"] .navigate-down {
+ right: 18px;
+ -webkit-transform: scale(0.85);
+ transform: scale(0.85);
+ -webkit-transform-origin: 100% 100%;
+ transform-origin: 100% 100%; }
+ .reveal .controls .navigate-left,
+ .reveal .controls .navigate-right,
+ .reveal .controls .navigate-up,
+ .reveal .controls .navigate-down {
top: auto;
left: auto; }
- .reveal .controls[data-controls-type="edges"] .navigate-left {
+ .reveal .controls .navigate-left {
right: 86px;
bottom: 18px; }
- .reveal .controls[data-controls-type="edges"] .navigate-right {
+ .reveal .controls .navigate-right {
right: 0;
bottom: 18px; }
- .reveal .controls[data-controls-type="edges"] .navigate-up {
+ .reveal .controls .navigate-up {
right: 18px;
bottom: 86px; }
- .reveal .controls[data-controls-type="edges"] .navigate-down {
+ .reveal .controls .navigate-down {
right: 18px;
bottom: 0; } }
-.reveal.has-dark-background .controls[data-controls-type="edges"] button:after,
-.reveal.has-dark-background .controls[data-controls-type="edges"] button:before {
+.reveal.has-dark-background .controls button:after,
+.reveal.has-dark-background .controls button:before {
background-color: #fff; }
-.reveal.has-light-background .controls[data-controls-type="edges"] button:after,
-.reveal.has-light-background .controls[data-controls-type="edges"] button:before {
+.reveal.has-light-background .controls button:after,
+.reveal.has-light-background .controls button:before {
background-color: #000; }
/*********************************************
diff --git a/css/reveal.scss b/css/reveal.scss
index 2561309..15f0d9a 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -235,85 +235,7 @@ body {
* CONTROLS
*********************************************/
-.reveal .controls[data-controls-type="bottom-right"] {
- display: none;
- position: fixed;
- width: 110px;
- height: 110px;
- z-index: 30;
- right: 10px;
- bottom: 10px;
-
- -webkit-user-select: none;
-
- 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 );
- }
-
- .enabled {
- opacity: 0.7;
- cursor: pointer;
- }
-
- .enabled:active {
- margin-top: 1px;
- }
-
- .navigate-left {
- top: 42px;
-
- border-right-width: 22px;
- border-right-color: #000;
- }
- .navigate-left.fragmented {
- opacity: 0.3;
- }
-
- .navigate-right {
- left: 74px;
- top: 42px;
-
- border-left-width: 22px;
- border-left-color: #000;
- }
- .navigate-right.fragmented {
- opacity: 0.3;
- }
-
- .navigate-up {
- left: 42px;
-
- border-bottom-width: 22px;
- border-bottom-color: #000;
- }
- .navigate-up.fragmented {
- opacity: 0.3;
- }
-
- .navigate-down {
- left: 42px;
- top: 74px;
-
- border-top-width: 22px;
- border-top-color: #000;
- }
- .navigate-down.fragmented {
- opacity: 0.3;
- }
-}
-
-
-.reveal .controls[data-controls-type="edges"] {
+.reveal .controls {
$size: 50px;
$length: floor($size * 0.6);
$spacing: 18px;
@@ -383,20 +305,6 @@ body {
}
}
- .enabled {
- opacity: 0.7;
- cursor: pointer;
- }
-
- .enabled.fragmented {
- opacity: 0.3;
- }
-
- .enabled:hover,
- .enabled.fragmented:hover {
- opacity: 1;
- }
-
.navigate-left {
top: 50%;
left: $spacing;
@@ -421,10 +329,41 @@ body {
transform: translateX(-50%) rotate( -90deg );
}
- @media screen and (max-width: 500px) {
+ // The soften back arrows option strongly deemphasizes
+ // backwards navigation in favor of drawing attention
+ // forwards
+ &.soften-back-arrows .navigate-left.enabled,
+ &.soften-back-arrows .navigate-up.enabled {
+ opacity: 0.3;
+
+ &:hover {
+ opacity: 1;
+ }
+ }
+
+ // Any control button that can be clicked is "enabled"
+ .enabled {
+ opacity: 0.7;
+ cursor: pointer;
+ }
+
+ // Any control button that leads to showing or hiding
+ // a fragment
+ .enabled.fragmented {
+ opacity: 0.3;
+ }
+
+ .enabled:hover,
+ .enabled.fragmented:hover {
+ opacity: 1;
+ }
+
+ @mixin bottom-right-controls() {
& {
bottom: $spacing;
right: $spacing;
+ transform: scale(0.85);
+ transform-origin: 100% 100%;
}
.navigate-left,
@@ -452,15 +391,23 @@ body {
bottom: 0;
}
}
+
+ &[data-controls-placement="bottom-right"] {
+ @include bottom-right-controls()
+ }
+
+ @media screen and (max-width: 500px) {
+ @include bottom-right-controls()
+ }
}
-.reveal.has-dark-background .controls[data-controls-type="edges"] button:after,
-.reveal.has-dark-background .controls[data-controls-type="edges"] button:before {
+.reveal.has-dark-background .controls button:after,
+.reveal.has-dark-background .controls button:before {
background-color: #fff;
}
-.reveal.has-light-background .controls[data-controls-type="edges"] button:after,
-.reveal.has-light-background .controls[data-controls-type="edges"] button:before {
+.reveal.has-light-background .controls button:after,
+.reveal.has-light-background .controls button:before {
background-color: #000;
}
diff --git a/css/theme/beige.css b/css/theme/beige.css
index c92d501..3e11649 100644
--- a/css/theme/beige.css
+++ b/css/theme/beige.css
@@ -255,37 +255,9 @@ body {
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
-.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
- border-right-color: #8b743d; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-right,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
- border-left-color: #8b743d; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-up,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
- border-bottom-color: #8b743d; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-down,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
- border-top-color: #8b743d; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
- border-right-color: #c0a86e; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
- border-left-color: #c0a86e; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
- border-bottom-color: #c0a86e; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
- border-top-color: #c0a86e; }
-
-.reveal .controls[data-controls-type="edges"] button:before,
-.reveal .controls[data-controls-type="edges"] button:after {
- background-color: #333; }
+.reveal .controls button:before,
+.reveal .controls button:after {
+ background-color: #8b743d; }
/*********************************************
* PROGRESS BAR
diff --git a/css/theme/black.css b/css/theme/black.css
index ed5819d..6106a33 100644
--- a/css/theme/black.css
+++ b/css/theme/black.css
@@ -251,37 +251,9 @@ body {
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
-.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
- border-right-color: #42affa; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-right,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
- border-left-color: #42affa; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-up,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
- border-bottom-color: #42affa; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-down,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
- border-top-color: #42affa; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
- border-right-color: #8dcffc; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
- border-left-color: #8dcffc; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
- border-bottom-color: #8dcffc; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
- border-top-color: #8dcffc; }
-
-.reveal .controls[data-controls-type="edges"] button:before,
-.reveal .controls[data-controls-type="edges"] button:after {
- background-color: #fff; }
+.reveal .controls button:before,
+.reveal .controls button:after {
+ background-color: #42affa; }
/*********************************************
* PROGRESS BAR
diff --git a/css/theme/blood.css b/css/theme/blood.css
index 38c2a08..b3753fb 100644
--- a/css/theme/blood.css
+++ b/css/theme/blood.css
@@ -254,37 +254,9 @@ body {
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
-.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
- border-right-color: #a23; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-right,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
- border-left-color: #a23; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-up,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
- border-bottom-color: #a23; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-down,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
- border-top-color: #a23; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
- border-right-color: #dd5566; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
- border-left-color: #dd5566; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
- border-bottom-color: #dd5566; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
- border-top-color: #dd5566; }
-
-.reveal .controls[data-controls-type="edges"] button:before,
-.reveal .controls[data-controls-type="edges"] button:after {
- background-color: #eee; }
+.reveal .controls button:before,
+.reveal .controls button:after {
+ background-color: #a23; }
/*********************************************
* PROGRESS BAR
diff --git a/css/theme/league.css b/css/theme/league.css
index d4ef858..bce492c 100644
--- a/css/theme/league.css
+++ b/css/theme/league.css
@@ -257,37 +257,9 @@ body {
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
-.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
- border-right-color: #13DAEC; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-right,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
- border-left-color: #13DAEC; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-up,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
- border-bottom-color: #13DAEC; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-down,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
- border-top-color: #13DAEC; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
- border-right-color: #71e9f4; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
- border-left-color: #71e9f4; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
- border-bottom-color: #71e9f4; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
- border-top-color: #71e9f4; }
-
-.reveal .controls[data-controls-type="edges"] button:before,
-.reveal .controls[data-controls-type="edges"] button:after {
- background-color: #eee; }
+.reveal .controls button:before,
+.reveal .controls button:after {
+ background-color: #13DAEC; }
/*********************************************
* PROGRESS BAR
diff --git a/css/theme/moon.css b/css/theme/moon.css
index 8b8285a..e12fca1 100644
--- a/css/theme/moon.css
+++ b/css/theme/moon.css
@@ -255,37 +255,9 @@ body {
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
-.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
- border-right-color: #268bd2; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-right,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
- border-left-color: #268bd2; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-up,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
- border-bottom-color: #268bd2; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-down,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
- border-top-color: #268bd2; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
- border-right-color: #78b9e6; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
- border-left-color: #78b9e6; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
- border-bottom-color: #78b9e6; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
- border-top-color: #78b9e6; }
-
-.reveal .controls[data-controls-type="edges"] button:before,
-.reveal .controls[data-controls-type="edges"] button:after {
- background-color: #93a1a1; }
+.reveal .controls button:before,
+.reveal .controls button:after {
+ background-color: #268bd2; }
/*********************************************
* PROGRESS BAR
diff --git a/css/theme/night.css b/css/theme/night.css
index db136c1..f6796b3 100644
--- a/css/theme/night.css
+++ b/css/theme/night.css
@@ -249,37 +249,9 @@ body {
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
-.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
- border-right-color: #e7ad52; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-right,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
- border-left-color: #e7ad52; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-up,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
- border-bottom-color: #e7ad52; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-down,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
- border-top-color: #e7ad52; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
- border-right-color: #f3d7ac; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
- border-left-color: #f3d7ac; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
- border-bottom-color: #f3d7ac; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
- border-top-color: #f3d7ac; }
-
-.reveal .controls[data-controls-type="edges"] button:before,
-.reveal .controls[data-controls-type="edges"] button:after {
- background-color: #eee; }
+.reveal .controls button:before,
+.reveal .controls button:after {
+ background-color: #e7ad52; }
/*********************************************
* PROGRESS BAR
diff --git a/css/theme/serif.css b/css/theme/serif.css
index 4049b80..b426a66 100644
--- a/css/theme/serif.css
+++ b/css/theme/serif.css
@@ -251,37 +251,9 @@ body {
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
-.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
- border-right-color: #51483D; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-right,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
- border-left-color: #51483D; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-up,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
- border-bottom-color: #51483D; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-down,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
- border-top-color: #51483D; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
- border-right-color: #8b7c69; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
- border-left-color: #8b7c69; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
- border-bottom-color: #8b7c69; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
- border-top-color: #8b7c69; }
-
-.reveal .controls[data-controls-type="edges"] button:before,
-.reveal .controls[data-controls-type="edges"] button:after {
- background-color: #000; }
+.reveal .controls button:before,
+.reveal .controls button:after {
+ background-color: #51483D; }
/*********************************************
* PROGRESS BAR
diff --git a/css/theme/simple.css b/css/theme/simple.css
index aa4900e..fd24092 100644
--- a/css/theme/simple.css
+++ b/css/theme/simple.css
@@ -254,37 +254,9 @@ body {
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
-.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
- border-right-color: #00008B; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-right,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
- border-left-color: #00008B; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-up,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
- border-bottom-color: #00008B; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-down,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
- border-top-color: #00008B; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
- border-right-color: #0000f1; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
- border-left-color: #0000f1; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
- border-bottom-color: #0000f1; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
- border-top-color: #0000f1; }
-
-.reveal .controls[data-controls-type="edges"] button:before,
-.reveal .controls[data-controls-type="edges"] button:after {
- background-color: #000; }
+.reveal .controls button:before,
+.reveal .controls button:after {
+ background-color: #00008B; }
/*********************************************
* PROGRESS BAR
diff --git a/css/theme/sky.css b/css/theme/sky.css
index e8034ff..881f2fd 100644
--- a/css/theme/sky.css
+++ b/css/theme/sky.css
@@ -258,37 +258,9 @@ body {
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
-.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
- border-right-color: #3b759e; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-right,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
- border-left-color: #3b759e; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-up,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
- border-bottom-color: #3b759e; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-down,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
- border-top-color: #3b759e; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
- border-right-color: #74a7cb; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
- border-left-color: #74a7cb; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
- border-bottom-color: #74a7cb; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
- border-top-color: #74a7cb; }
-
-.reveal .controls[data-controls-type="edges"] button:before,
-.reveal .controls[data-controls-type="edges"] button:after {
- background-color: #333; }
+.reveal .controls button:before,
+.reveal .controls button:after {
+ background-color: #3b759e; }
/*********************************************
* PROGRESS BAR
diff --git a/css/theme/solarized.css b/css/theme/solarized.css
index 7283879..b20d22a 100644
--- a/css/theme/solarized.css
+++ b/css/theme/solarized.css
@@ -255,37 +255,9 @@ body {
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
-.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
- border-right-color: #268bd2; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-right,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
- border-left-color: #268bd2; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-up,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
- border-bottom-color: #268bd2; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-down,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
- border-top-color: #268bd2; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
- border-right-color: #78b9e6; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
- border-left-color: #78b9e6; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
- border-bottom-color: #78b9e6; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
- border-top-color: #78b9e6; }
-
-.reveal .controls[data-controls-type="edges"] button:before,
-.reveal .controls[data-controls-type="edges"] button:after {
- background-color: #657b83; }
+.reveal .controls button:before,
+.reveal .controls button:after {
+ background-color: #268bd2; }
/*********************************************
* PROGRESS BAR
diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss
index 7a5f406..fb116fc 100644
--- a/css/theme/template/theme.scss
+++ b/css/theme/template/theme.scss
@@ -297,45 +297,9 @@ body {
* NAVIGATION CONTROLS
*********************************************/
-.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
- border-right-color: $linkColor;
-}
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-right,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
- border-left-color: $linkColor;
-}
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-up,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
- border-bottom-color: $linkColor;
-}
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-down,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
- border-top-color: $linkColor;
-}
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
- border-right-color: $linkColorHover;
-}
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
- border-left-color: $linkColorHover;
-}
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
- border-bottom-color: $linkColorHover;
-}
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
- border-top-color: $linkColorHover;
-}
-
-.reveal .controls[data-controls-type="edges"] button:before,
-.reveal .controls[data-controls-type="edges"] button:after {
- background-color: $mainColor;
+.reveal .controls button:before,
+.reveal .controls button:after {
+ background-color: $linkColor;
}
diff --git a/css/theme/white.css b/css/theme/white.css
index 7e3d63c..299d9ff 100644
--- a/css/theme/white.css
+++ b/css/theme/white.css
@@ -251,37 +251,9 @@ body {
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
-.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
- border-right-color: #2a76dd; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-right,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
- border-left-color: #2a76dd; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-up,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
- border-bottom-color: #2a76dd; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-down,
-.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
- border-top-color: #2a76dd; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
- border-right-color: #6ca0e8; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
- border-left-color: #6ca0e8; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
- border-bottom-color: #6ca0e8; }
-
-.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
- border-top-color: #6ca0e8; }
-
-.reveal .controls[data-controls-type="edges"] button:before,
-.reveal .controls[data-controls-type="edges"] button:after {
- background-color: #222; }
+.reveal .controls button:before,
+.reveal .controls button:after {
+ background-color: #2a76dd; }
/*********************************************
* PROGRESS BAR
diff --git a/js/reveal.js b/js/reveal.js
index 803c50a..522d7cb 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -52,6 +52,12 @@
// Display controls in the bottom right corner
controls: true,
+ // Determines where controls appear, either "bottom-right" or "edges"
+ controlsPlacement: 'edges',
+
+ // De-emphasizes backwards navigation controls
+ controlsSoftenBackArrows: true,
+
// Display a presentation progress bar
progress: true,
@@ -998,12 +1004,8 @@
dom.controls.style.display = config.controls ? 'block' : 'none';
dom.progress.style.display = config.progress ? 'block' : 'none';
- var controlsType = typeof config.controls === 'string' ? config.controls : 'bottom-right';
- dom.controls.setAttribute( 'data-controls-type', controlsType );
-
- if( typeof config.controls === 'string' ) {
- dom.controls.classList.add( config.controls );
- }
+ dom.controls.setAttribute( 'data-controls-placement', config.controlsPlacement );
+ dom.controls.classList.toggle( 'soften-back-arrows', config.controlsSoftenBackArrows );
if( config.shuffle ) {
shuffle();