From 1319016957e806af362761e43bd389e6aa9edefe Mon Sep 17 00:00:00 2001
From: Hakim El Hattab <hakim.elhattab@gmail.com>
Date: Wed, 20 Apr 2016 13:45:03 +0200
Subject: [PATCH] new optional controls aligned to screen edges

---
 css/reveal.css                | 191 +++++++++++++++++++++++----------
 css/reveal.scss               | 193 +++++++++++++++++++++++++++-------
 css/theme/beige.css           |  28 ++---
 css/theme/black.css           |  28 ++---
 css/theme/blood.css           |  28 ++---
 css/theme/league.css          |  28 ++---
 css/theme/moon.css            |  28 ++---
 css/theme/night.css           |  28 ++---
 css/theme/serif.css           |  28 ++---
 css/theme/simple.css          |  28 ++---
 css/theme/sky.css             |  28 ++---
 css/theme/solarized.css       |  28 ++---
 css/theme/template/theme.scss |  29 ++---
 css/theme/white.css           |  28 ++---
 js/reveal.js                  |  14 ++-
 15 files changed, 494 insertions(+), 241 deletions(-)

diff --git a/css/reveal.css b/css/reveal.css
index 5f501b1..8f026a6 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -189,7 +189,7 @@ body {
 /*********************************************
  * CONTROLS
  *********************************************/
-.reveal .controls {
+.reveal .controls[data-controls-type="bottom-right"] {
   display: none;
   position: fixed;
   width: 110px;
@@ -198,62 +198,143 @@ body {
   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 button {
-  padding: 0;
+.reveal .controls[data-controls-type="edges"] {
+  display: none;
   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 .enabled {
-  opacity: 0.7;
-  cursor: pointer; }
-
-.reveal .controls .enabled:active {
-  margin-top: 1px; }
-
-.reveal .controls .navigate-left {
-  top: 42px;
-  border-right-width: 22px;
-  border-right-color: #000; }
-
-.reveal .controls .navigate-left.fragmented {
-  opacity: 0.3; }
-
-.reveal .controls .navigate-right {
-  left: 74px;
-  top: 42px;
-  border-left-width: 22px;
-  border-left-color: #000; }
-
-.reveal .controls .navigate-right.fragmented {
-  opacity: 0.3; }
-
-.reveal .controls .navigate-up {
-  left: 42px;
-  border-bottom-width: 22px;
-  border-bottom-color: #000; }
-
-.reveal .controls .navigate-up.fragmented {
-  opacity: 0.3; }
-
-.reveal .controls .navigate-down {
-  left: 42px;
-  top: 74px;
-  border-top-width: 22px;
-  border-top-color: #000; }
-
-.reveal .controls .navigate-down.fragmented {
-  opacity: 0.3; }
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0; }
+  .reveal .controls[data-controls-type="edges"] button {
+    position: absolute;
+    padding: 0;
+    width: 36px;
+    height: 36px;
+    background-color: transparent;
+    border: 0;
+    outline: 0;
+    cursor: pointer;
+    opacity: 0;
+    -webkit-transform: scale(0.9999);
+            transform: scale(0.9999);
+    -webkit-transition: all 0.2s ease;
+            transition: all 0.2s ease;
+    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 {
+    content: '';
+    position: absolute;
+    top: 40%;
+    left: 0;
+    width: 36px;
+    height: 5px;
+    border-radius: 2.5px;
+    background: #fff;
+    -webkit-transition: all 0.15s ease;
+            transition: all 0.15s ease;
+    -webkit-transform-origin: 0% 50%;
+            transform-origin: 0% 50%; }
+  .reveal .controls[data-controls-type="edges"] button:before {
+    -webkit-transform: translate(0, -1px) rotate(40deg);
+            transform: translate(0, -1px) rotate(40deg); }
+  .reveal .controls[data-controls-type="edges"] button:after {
+    -webkit-transform: translate(0, 1px) rotate(-40deg);
+            transform: translate(0, 1px) rotate(-40deg); }
+  .reveal .controls[data-controls-type="edges"] button:hover:before {
+    -webkit-transform: translate(0, -1px) rotate(36deg);
+            transform: translate(0, -1px) rotate(36deg); }
+  .reveal .controls[data-controls-type="edges"] button:hover:after {
+    -webkit-transform: translate(0, 1px) rotate(-36deg);
+            transform: translate(0, 1px) rotate(-36deg); }
+  .reveal .controls[data-controls-type="edges"] button:active:before {
+    -webkit-transform: translate(0, -1px) rotate(34deg);
+            transform: translate(0, -1px) rotate(34deg); }
+  .reveal .controls[data-controls-type="edges"] button:active:after {
+    -webkit-transform: translate(0, 1px) rotate(-34deg);
+            transform: translate(0, 1px) rotate(-34deg); }
+  .reveal .controls[data-controls-type="edges"] .enabled {
+    opacity: 0.7;
+    cursor: pointer; }
+  .reveal .controls[data-controls-type="edges"] .enabled:hover {
+    opacity: 1; }
+  .reveal .controls[data-controls-type="edges"] .navigate-left {
+    top: 50%;
+    left: 18px;
+    margin-top: -18px; }
+  .reveal .controls[data-controls-type="edges"] .navigate-left.fragmented {
+    opacity: 0.3; }
+  .reveal .controls[data-controls-type="edges"] .navigate-right {
+    top: 50%;
+    right: 18px;
+    margin-top: -18px;
+    -webkit-transform: rotate(180deg);
+            transform: rotate(180deg); }
+  .reveal .controls[data-controls-type="edges"] .navigate-right.fragmented {
+    opacity: 0.3; }
+  .reveal .controls[data-controls-type="edges"] .navigate-up {
+    top: 18px;
+    left: 50%;
+    margin-left: -18px;
+    -webkit-transform: rotate(90deg);
+            transform: rotate(90deg); }
+  .reveal .controls[data-controls-type="edges"] .navigate-up.fragmented {
+    opacity: 0.3; }
+  .reveal .controls[data-controls-type="edges"] .navigate-down {
+    bottom: 18px;
+    left: 50%;
+    margin-left: -18px;
+    -webkit-transform: rotate(-90deg);
+            transform: rotate(-90deg); }
+  .reveal .controls[data-controls-type="edges"] .navigate-down.fragmented {
+    opacity: 0.3; }
 
 /*********************************************
  * PROGRESS BAR
diff --git a/css/reveal.scss b/css/reveal.scss
index 983e587..04316bf 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -235,7 +235,7 @@ body {
  * CONTROLS
  *********************************************/
 
-.reveal .controls {
+.reveal .controls[data-controls-type="bottom-right"] {
 	display: none;
 	position: fixed;
 	width: 110px;
@@ -245,73 +245,192 @@ body {
 	bottom: 10px;
 
 	-webkit-user-select: none;
-}
 
-.reveal .controls button {
-	padding: 0;
-	position: absolute;
-	opacity: 0.05;
-	width: 0;
-	height: 0;
-	background-color: transparent;
-	border: 12px solid transparent;
-	transform: scale(.9999);
-	transition: all 0.2s ease;
-	-webkit-appearance: none;
-	-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
-}
+	button {
+		padding: 0;
+		position: absolute;
+		opacity: 0.05;
+		width: 0;
+		height: 0;
+		background-color: transparent;
+		border: 12px solid transparent;
+		transform: scale(.9999);
+		transition: all 0.2s ease;
+		-webkit-appearance: none;
+		-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
+	}
 
-.reveal .controls .enabled {
-	opacity: 0.7;
-	cursor: pointer;
-}
+	.enabled {
+		opacity: 0.7;
+		cursor: pointer;
+	}
 
-.reveal .controls .enabled:active {
-	margin-top: 1px;
-}
+	.enabled:active {
+		margin-top: 1px;
+	}
 
-	.reveal .controls .navigate-left {
+	.navigate-left {
 		top: 42px;
 
 		border-right-width: 22px;
 		border-right-color: #000;
 	}
-		.reveal .controls .navigate-left.fragmented {
-			opacity: 0.3;
-		}
+	.navigate-left.fragmented {
+		opacity: 0.3;
+	}
 
-	.reveal .controls .navigate-right {
+	.navigate-right {
 		left: 74px;
 		top: 42px;
 
 		border-left-width: 22px;
 		border-left-color: #000;
 	}
-		.reveal .controls .navigate-right.fragmented {
-			opacity: 0.3;
-		}
+	.navigate-right.fragmented {
+		opacity: 0.3;
+	}
 
-	.reveal .controls .navigate-up {
+	.navigate-up {
 		left: 42px;
 
 		border-bottom-width: 22px;
 		border-bottom-color: #000;
 	}
-		.reveal .controls .navigate-up.fragmented {
-			opacity: 0.3;
-		}
+	.navigate-up.fragmented {
+		opacity: 0.3;
+	}
 
-	.reveal .controls .navigate-down {
+	.navigate-down {
 		left: 42px;
 		top: 74px;
 
 		border-top-width: 22px;
 		border-top-color: #000;
 	}
-		.reveal .controls .navigate-down.fragmented {
-			opacity: 0.3;
+	.navigate-down.fragmented {
+		opacity: 0.3;
+	}
+}
+
+
+.reveal .controls[data-controls-type="edges"] {
+	$size: 36px;
+	$spacing: 18px;
+	$thickness: 5px;
+	$angle: 40deg;
+	$angleHover: 36deg;
+	$angleActive: 34deg;
+
+	@mixin arrowTransform( $angle, $x: 0, $y: 0 ) {
+		&:before {
+			transform: translate( $x, $y ) rotate( $angle );
 		}
 
+		&:after {
+			transform: translate( $x, -$y ) rotate( -$angle );
+		}
+	}
+
+	display: none;
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+
+	button {
+		position: absolute;
+		padding: 0;
+		width: $size;
+		height: $size;
+		background-color: transparent;
+		border: 0;
+		outline: 0;
+		cursor: pointer;
+		opacity: 0;
+		transform: scale(.9999);
+		transition: all 0.2s ease;
+		z-index: 2; // above slides
+		-webkit-appearance: none;
+		-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
+	}
+
+	button:before,
+	button:after {
+		content: '';
+		position: absolute;
+		top: 40%;
+		left: 0;
+		width: $size;
+		height: $thickness;
+		border-radius: $thickness / 2;
+		background: #fff;
+
+		transition: all 0.15s ease;
+		transform-origin: 0% 50%;
+	}
+
+	button {
+		@include arrowTransform( $angle, 0, -1px );
+
+		&:hover {
+			@include arrowTransform( $angleHover, 0, -1px );
+		}
+
+		&:active {
+			@include arrowTransform( $angleActive, 0, -1px );
+		}
+	}
+
+	.enabled {
+		opacity: 0.7;
+		cursor: pointer;
+	}
+
+	.enabled:hover {
+		opacity: 1;
+	}
+
+	.navigate-left {
+		top: 50%;
+		left: $spacing;
+		margin-top: -$size/2;
+	}
+	.navigate-left.fragmented {
+		opacity: 0.3;
+	}
+
+	.navigate-right {
+		top: 50%;
+		right: $spacing;
+		margin-top: -$size/2;
+		transform: rotate( 180deg );
+	}
+	.navigate-right.fragmented {
+		opacity: 0.3;
+	}
+
+	.navigate-up {
+		top: $spacing;
+		left: 50%;
+		margin-left: -$size/2;
+		transform: rotate( 90deg );
+	}
+	.navigate-up.fragmented {
+		opacity: 0.3;
+	}
+
+	.navigate-down {
+		bottom: $spacing;
+		left: 50%;
+		margin-left: -$size/2;
+		transform: rotate( -90deg );
+	}
+	.navigate-down.fragmented {
+		opacity: 0.3;
+	}
+}
+
 
 /*********************************************
  * PROGRESS BAR
diff --git a/css/theme/beige.css b/css/theme/beige.css
index 7424a05..c92d501 100644
--- a/css/theme/beige.css
+++ b/css/theme/beige.css
@@ -255,34 +255,38 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
+.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 .navigate-right,
-.reveal .controls .navigate-right.enabled {
+.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 .navigate-up,
-.reveal .controls .navigate-up.enabled {
+.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 .navigate-down,
-.reveal .controls .navigate-down.enabled {
+.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 .navigate-left.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
   border-right-color: #c0a86e; }
 
-.reveal .controls .navigate-right.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
   border-left-color: #c0a86e; }
 
-.reveal .controls .navigate-up.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
   border-bottom-color: #c0a86e; }
 
-.reveal .controls .navigate-down.enabled:hover {
+.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; }
+
 /*********************************************
  * PROGRESS BAR
  *********************************************/
diff --git a/css/theme/black.css b/css/theme/black.css
index 96e4fd4..ed5819d 100644
--- a/css/theme/black.css
+++ b/css/theme/black.css
@@ -251,34 +251,38 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
+.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 .navigate-right,
-.reveal .controls .navigate-right.enabled {
+.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 .navigate-up,
-.reveal .controls .navigate-up.enabled {
+.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 .navigate-down,
-.reveal .controls .navigate-down.enabled {
+.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 .navigate-left.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
   border-right-color: #8dcffc; }
 
-.reveal .controls .navigate-right.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
   border-left-color: #8dcffc; }
 
-.reveal .controls .navigate-up.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
   border-bottom-color: #8dcffc; }
 
-.reveal .controls .navigate-down.enabled:hover {
+.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; }
+
 /*********************************************
  * PROGRESS BAR
  *********************************************/
diff --git a/css/theme/blood.css b/css/theme/blood.css
index 1e0fbaf..38c2a08 100644
--- a/css/theme/blood.css
+++ b/css/theme/blood.css
@@ -254,34 +254,38 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
+.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 .navigate-right,
-.reveal .controls .navigate-right.enabled {
+.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 .navigate-up,
-.reveal .controls .navigate-up.enabled {
+.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 .navigate-down,
-.reveal .controls .navigate-down.enabled {
+.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 .navigate-left.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
   border-right-color: #dd5566; }
 
-.reveal .controls .navigate-right.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
   border-left-color: #dd5566; }
 
-.reveal .controls .navigate-up.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
   border-bottom-color: #dd5566; }
 
-.reveal .controls .navigate-down.enabled:hover {
+.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; }
+
 /*********************************************
  * PROGRESS BAR
  *********************************************/
diff --git a/css/theme/league.css b/css/theme/league.css
index 63711c3..d4ef858 100644
--- a/css/theme/league.css
+++ b/css/theme/league.css
@@ -257,34 +257,38 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
+.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 .navigate-right,
-.reveal .controls .navigate-right.enabled {
+.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 .navigate-up,
-.reveal .controls .navigate-up.enabled {
+.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 .navigate-down,
-.reveal .controls .navigate-down.enabled {
+.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 .navigate-left.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
   border-right-color: #71e9f4; }
 
-.reveal .controls .navigate-right.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
   border-left-color: #71e9f4; }
 
-.reveal .controls .navigate-up.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
   border-bottom-color: #71e9f4; }
 
-.reveal .controls .navigate-down.enabled:hover {
+.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; }
+
 /*********************************************
  * PROGRESS BAR
  *********************************************/
diff --git a/css/theme/moon.css b/css/theme/moon.css
index 791a4a0..8b8285a 100644
--- a/css/theme/moon.css
+++ b/css/theme/moon.css
@@ -255,34 +255,38 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
+.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 .navigate-right,
-.reveal .controls .navigate-right.enabled {
+.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 .navigate-up,
-.reveal .controls .navigate-up.enabled {
+.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 .navigate-down,
-.reveal .controls .navigate-down.enabled {
+.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 .navigate-left.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
   border-right-color: #78b9e6; }
 
-.reveal .controls .navigate-right.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
   border-left-color: #78b9e6; }
 
-.reveal .controls .navigate-up.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
   border-bottom-color: #78b9e6; }
 
-.reveal .controls .navigate-down.enabled:hover {
+.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; }
+
 /*********************************************
  * PROGRESS BAR
  *********************************************/
diff --git a/css/theme/night.css b/css/theme/night.css
index 3db1175..db136c1 100644
--- a/css/theme/night.css
+++ b/css/theme/night.css
@@ -249,34 +249,38 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
+.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 .navigate-right,
-.reveal .controls .navigate-right.enabled {
+.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 .navigate-up,
-.reveal .controls .navigate-up.enabled {
+.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 .navigate-down,
-.reveal .controls .navigate-down.enabled {
+.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 .navigate-left.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
   border-right-color: #f3d7ac; }
 
-.reveal .controls .navigate-right.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
   border-left-color: #f3d7ac; }
 
-.reveal .controls .navigate-up.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
   border-bottom-color: #f3d7ac; }
 
-.reveal .controls .navigate-down.enabled:hover {
+.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; }
+
 /*********************************************
  * PROGRESS BAR
  *********************************************/
diff --git a/css/theme/serif.css b/css/theme/serif.css
index e9b08c6..4049b80 100644
--- a/css/theme/serif.css
+++ b/css/theme/serif.css
@@ -251,34 +251,38 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
+.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 .navigate-right,
-.reveal .controls .navigate-right.enabled {
+.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 .navigate-up,
-.reveal .controls .navigate-up.enabled {
+.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 .navigate-down,
-.reveal .controls .navigate-down.enabled {
+.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 .navigate-left.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
   border-right-color: #8b7c69; }
 
-.reveal .controls .navigate-right.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
   border-left-color: #8b7c69; }
 
-.reveal .controls .navigate-up.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
   border-bottom-color: #8b7c69; }
 
-.reveal .controls .navigate-down.enabled:hover {
+.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; }
+
 /*********************************************
  * PROGRESS BAR
  *********************************************/
diff --git a/css/theme/simple.css b/css/theme/simple.css
index f64343e..aa4900e 100644
--- a/css/theme/simple.css
+++ b/css/theme/simple.css
@@ -254,34 +254,38 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
+.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 .navigate-right,
-.reveal .controls .navigate-right.enabled {
+.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 .navigate-up,
-.reveal .controls .navigate-up.enabled {
+.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 .navigate-down,
-.reveal .controls .navigate-down.enabled {
+.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 .navigate-left.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
   border-right-color: #0000f1; }
 
-.reveal .controls .navigate-right.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
   border-left-color: #0000f1; }
 
-.reveal .controls .navigate-up.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
   border-bottom-color: #0000f1; }
 
-.reveal .controls .navigate-down.enabled:hover {
+.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; }
+
 /*********************************************
  * PROGRESS BAR
  *********************************************/
diff --git a/css/theme/sky.css b/css/theme/sky.css
index 33689eb..e8034ff 100644
--- a/css/theme/sky.css
+++ b/css/theme/sky.css
@@ -258,34 +258,38 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
+.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 .navigate-right,
-.reveal .controls .navigate-right.enabled {
+.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 .navigate-up,
-.reveal .controls .navigate-up.enabled {
+.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 .navigate-down,
-.reveal .controls .navigate-down.enabled {
+.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 .navigate-left.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
   border-right-color: #74a7cb; }
 
-.reveal .controls .navigate-right.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
   border-left-color: #74a7cb; }
 
-.reveal .controls .navigate-up.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
   border-bottom-color: #74a7cb; }
 
-.reveal .controls .navigate-down.enabled:hover {
+.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; }
+
 /*********************************************
  * PROGRESS BAR
  *********************************************/
diff --git a/css/theme/solarized.css b/css/theme/solarized.css
index 9bd21aa..7283879 100644
--- a/css/theme/solarized.css
+++ b/css/theme/solarized.css
@@ -255,34 +255,38 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
+.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 .navigate-right,
-.reveal .controls .navigate-right.enabled {
+.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 .navigate-up,
-.reveal .controls .navigate-up.enabled {
+.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 .navigate-down,
-.reveal .controls .navigate-down.enabled {
+.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 .navigate-left.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
   border-right-color: #78b9e6; }
 
-.reveal .controls .navigate-right.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
   border-left-color: #78b9e6; }
 
-.reveal .controls .navigate-up.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
   border-bottom-color: #78b9e6; }
 
-.reveal .controls .navigate-down.enabled:hover {
+.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; }
+
 /*********************************************
  * PROGRESS BAR
  *********************************************/
diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss
index bcbaf0c..7a5f406 100644
--- a/css/theme/template/theme.scss
+++ b/css/theme/template/theme.scss
@@ -297,42 +297,47 @@ body {
  * NAVIGATION CONTROLS
  *********************************************/
 
-.reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
+.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 .navigate-right,
-.reveal .controls .navigate-right.enabled {
+.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 .navigate-up,
-.reveal .controls .navigate-up.enabled {
+.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 .navigate-down,
-.reveal .controls .navigate-down.enabled {
+.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 .navigate-left.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
 	border-right-color: $linkColorHover;
 }
 
-.reveal .controls .navigate-right.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
 	border-left-color: $linkColorHover;
 }
 
-.reveal .controls .navigate-up.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
 	border-bottom-color: $linkColorHover;
 }
 
-.reveal .controls .navigate-down.enabled:hover {
+.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;
+}
+
 
 /*********************************************
  * PROGRESS BAR
diff --git a/css/theme/white.css b/css/theme/white.css
index 7adc605..7e3d63c 100644
--- a/css/theme/white.css
+++ b/css/theme/white.css
@@ -251,34 +251,38 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
+.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 .navigate-right,
-.reveal .controls .navigate-right.enabled {
+.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 .navigate-up,
-.reveal .controls .navigate-up.enabled {
+.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 .navigate-down,
-.reveal .controls .navigate-down.enabled {
+.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 .navigate-left.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
   border-right-color: #6ca0e8; }
 
-.reveal .controls .navigate-right.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
   border-left-color: #6ca0e8; }
 
-.reveal .controls .navigate-up.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
   border-bottom-color: #6ca0e8; }
 
-.reveal .controls .navigate-down.enabled:hover {
+.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; }
+
 /*********************************************
  * PROGRESS BAR
  *********************************************/
diff --git a/js/reveal.js b/js/reveal.js
index d3ba03c..803c50a 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -516,7 +516,7 @@
 		dom.progressbar = dom.progress.querySelector( 'span' );
 
 		// Arrow controls
-		createSingletonNode( dom.wrapper, 'aside', 'controls',
+		dom.controls = createSingletonNode( dom.wrapper, 'aside', 'controls',
 			'<button class="navigate-left" aria-label="previous slide"></button>' +
 			'<button class="navigate-right" aria-label="next slide"></button>' +
 			'<button class="navigate-up" aria-label="above slide"></button>' +
@@ -533,9 +533,6 @@
 		// Overlay graphic which is displayed during the paused mode
 		createSingletonNode( dom.wrapper, 'div', 'pause-overlay', null );
 
-		// Cache references to elements
-		dom.controls = document.querySelector( '.reveal .controls' );
-
 		dom.wrapper.setAttribute( 'role', 'application' );
 
 		// There can be multiple instances of controls throughout the page
@@ -789,7 +786,7 @@
 
 		// If no node was found, create it now
 		var node = document.createElement( tagname );
-		node.classList.add( classname );
+		node.className = classname;
 		if( typeof innerHTML === 'string' ) {
 			node.innerHTML = innerHTML;
 		}
@@ -1001,6 +998,13 @@
 		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 );
+		}
+
 		if( config.shuffle ) {
 			shuffle();
 		}