From a9fcaa6f9e74ffd696febadb555fd12980806a7b Mon Sep 17 00:00:00 2001
From: Hakim El Hattab <hakim.elhattab@gmail.com>
Date: Fri, 29 Apr 2016 10:06:43 +0200
Subject: [PATCH] new controls are used by default, add config options

---
 css/reveal.css                | 162 +++++++++++++++-------------------
 css/reveal.scss               | 143 ++++++++++--------------------
 css/theme/beige.css           |  34 +------
 css/theme/black.css           |  34 +------
 css/theme/blood.css           |  34 +------
 css/theme/league.css          |  34 +------
 css/theme/moon.css            |  34 +------
 css/theme/night.css           |  34 +------
 css/theme/serif.css           |  34 +------
 css/theme/simple.css          |  34 +------
 css/theme/sky.css             |  34 +------
 css/theme/solarized.css       |  34 +------
 css/theme/template/theme.scss |  42 +--------
 css/theme/white.css           |  34 +------
 js/reveal.js                  |  14 +--
 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();