use borders to generate control arrows (closes #137)

6 files changed, 96 insertions, 72 deletions

diff --git a/css/theme/beige.css b/css/theme/beige.css
index 6d2eea9..fe0e460 100644
--- a/css/theme/beige.css
+++ b/css/theme/beige.css
@@ -110,35 +110,39 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls div.left {
-  border-right-color: #333333;
+.reveal .controls div.left,
+.reveal .controls div.left.enabled {
+  border-right-color: #8b743d;
 }
 
-.reveal .controls div.right {
-  border-left-color: #333333;
+.reveal .controls div.right,
+.reveal .controls div.right.enabled {
+  border-left-color: #8b743d;
 }
 
-.reveal .controls div.up {
-  border-bottom-color: #333333;
+.reveal .controls div.up,
+.reveal .controls div.up.enabled {
+  border-bottom-color: #8b743d;
 }
 
-.reveal .controls div.down {
-  border-top-color: #333333;
+.reveal .controls div.down,
+.reveal .controls div.down.enabled {
+  border-top-color: #8b743d;
 }
 
-.reveal .controls div.left.enabled {
+.reveal .controls div.left.enabled:hover {
   border-right-color: #c0a86e;
 }
 
-.reveal .controls div.right.enabled {
+.reveal .controls div.right.enabled:hover {
   border-left-color: #c0a86e;
 }
 
-.reveal .controls div.up.enabled {
+.reveal .controls div.up.enabled:hover {
   border-bottom-color: #c0a86e;
 }
 
-.reveal .controls div.down.enabled {
+.reveal .controls div.down.enabled:hover {
   border-top-color: #c0a86e;
 }
 
diff --git a/css/theme/default.css b/css/theme/default.css
index 0b393c2..563e4d9 100644
--- a/css/theme/default.css
+++ b/css/theme/default.css
@@ -110,35 +110,39 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls div.left {
-  border-right-color: #eeeeee;
+.reveal .controls div.left,
+.reveal .controls div.left.enabled {
+  border-right-color: #13daec;
 }
 
-.reveal .controls div.right {
-  border-left-color: #eeeeee;
+.reveal .controls div.right,
+.reveal .controls div.right.enabled {
+  border-left-color: #13daec;
 }
 
-.reveal .controls div.up {
-  border-bottom-color: #eeeeee;
+.reveal .controls div.up,
+.reveal .controls div.up.enabled {
+  border-bottom-color: #13daec;
 }
 
-.reveal .controls div.down {
-  border-top-color: #eeeeee;
+.reveal .controls div.down,
+.reveal .controls div.down.enabled {
+  border-top-color: #13daec;
 }
 
-.reveal .controls div.left.enabled {
+.reveal .controls div.left.enabled:hover {
   border-right-color: #71e9f4;
 }
 
-.reveal .controls div.right.enabled {
+.reveal .controls div.right.enabled:hover {
   border-left-color: #71e9f4;
 }
 
-.reveal .controls div.up.enabled {
+.reveal .controls div.up.enabled:hover {
   border-bottom-color: #71e9f4;
 }
 
-.reveal .controls div.down.enabled {
+.reveal .controls div.down.enabled:hover {
   border-top-color: #71e9f4;
 }
 
diff --git a/css/theme/serif.css b/css/theme/serif.css
index 55a6b3a..3957b5d 100644
--- a/css/theme/serif.css
+++ b/css/theme/serif.css
@@ -97,35 +97,39 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls div.left {
-  border-right-color: black;
+.reveal .controls div.left,
+.reveal .controls div.left.enabled {
+  border-right-color: #51483d;
 }
 
-.reveal .controls div.right {
-  border-left-color: black;
+.reveal .controls div.right,
+.reveal .controls div.right.enabled {
+  border-left-color: #51483d;
 }
 
-.reveal .controls div.up {
-  border-bottom-color: black;
+.reveal .controls div.up,
+.reveal .controls div.up.enabled {
+  border-bottom-color: #51483d;
 }
 
-.reveal .controls div.down {
-  border-top-color: black;
+.reveal .controls div.down,
+.reveal .controls div.down.enabled {
+  border-top-color: #51483d;
 }
 
-.reveal .controls div.left.enabled {
+.reveal .controls div.left.enabled:hover {
   border-right-color: #8b7c69;
 }
 
-.reveal .controls div.right.enabled {
+.reveal .controls div.right.enabled:hover {
   border-left-color: #8b7c69;
 }
 
-.reveal .controls div.up.enabled {
+.reveal .controls div.up.enabled:hover {
   border-bottom-color: #8b7c69;
 }
 
-.reveal .controls div.down.enabled {
+.reveal .controls div.down.enabled:hover {
   border-top-color: #8b7c69;
 }
 
diff --git a/css/theme/simple.css b/css/theme/simple.css
index 8fb23c4..926bbc5 100644
--- a/css/theme/simple.css
+++ b/css/theme/simple.css
@@ -99,35 +99,39 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls div.left {
-  border-right-color: black;
+.reveal .controls div.left,
+.reveal .controls div.left.enabled {
+  border-right-color: darkblue;
 }
 
-.reveal .controls div.right {
-  border-left-color: black;
+.reveal .controls div.right,
+.reveal .controls div.right.enabled {
+  border-left-color: darkblue;
 }
 
-.reveal .controls div.up {
-  border-bottom-color: black;
+.reveal .controls div.up,
+.reveal .controls div.up.enabled {
+  border-bottom-color: darkblue;
 }
 
-.reveal .controls div.down {
-  border-top-color: black;
+.reveal .controls div.down,
+.reveal .controls div.down.enabled {
+  border-top-color: darkblue;
 }
 
-.reveal .controls div.left.enabled {
+.reveal .controls div.left.enabled:hover {
   border-right-color: #0000f1;
 }
 
-.reveal .controls div.right.enabled {
+.reveal .controls div.right.enabled:hover {
   border-left-color: #0000f1;
 }
 
-.reveal .controls div.up.enabled {
+.reveal .controls div.up.enabled:hover {
   border-bottom-color: #0000f1;
 }
 
-.reveal .controls div.down.enabled {
+.reveal .controls div.down.enabled:hover {
   border-top-color: #0000f1;
 }
 
diff --git a/css/theme/sky.css b/css/theme/sky.css
index d68fc8b..6618c0d 100644
--- a/css/theme/sky.css
+++ b/css/theme/sky.css
@@ -103,35 +103,39 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls div.left {
-  border-right-color: #333333;
+.reveal .controls div.left,
+.reveal .controls div.left.enabled {
+  border-right-color: #3b759e;
 }
 
-.reveal .controls div.right {
-  border-left-color: #333333;
+.reveal .controls div.right,
+.reveal .controls div.right.enabled {
+  border-left-color: #3b759e;
 }
 
-.reveal .controls div.up {
-  border-bottom-color: #333333;
+.reveal .controls div.up,
+.reveal .controls div.up.enabled {
+  border-bottom-color: #3b759e;
 }
 
-.reveal .controls div.down {
-  border-top-color: #333333;
+.reveal .controls div.down,
+.reveal .controls div.down.enabled {
+  border-top-color: #3b759e;
 }
 
-.reveal .controls div.left.enabled {
+.reveal .controls div.left.enabled:hover {
   border-right-color: #74a7cb;
 }
 
-.reveal .controls div.right.enabled {
+.reveal .controls div.right.enabled:hover {
   border-left-color: #74a7cb;
 }
 
-.reveal .controls div.up.enabled {
+.reveal .controls div.up.enabled:hover {
   border-bottom-color: #74a7cb;
 }
 
-.reveal .controls div.down.enabled {
+.reveal .controls div.down.enabled:hover {
   border-top-color: #74a7cb;
 }
 
diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss
index 9c22ecb..600c8e3 100644
--- a/css/theme/template/theme.scss
+++ b/css/theme/template/theme.scss
@@ -106,35 +106,39 @@ body {
  * NAVIGATION CONTROLS
  *********************************************/
 
-.reveal .controls div.left {
-	border-right-color: $mainColor;
+.reveal .controls div.left,
+.reveal .controls div.left.enabled {
+	border-right-color: $linkColor;
 }
 
-.reveal .controls div.right {
-	border-left-color: $mainColor;
+.reveal .controls div.right,
+.reveal .controls div.right.enabled {
+	border-left-color: $linkColor;
 }
 
-.reveal .controls div.up {
-	border-bottom-color: $mainColor;
+.reveal .controls div.up,
+.reveal .controls div.up.enabled {
+	border-bottom-color: $linkColor;
 }
 
-.reveal .controls div.down {
-	border-top-color: $mainColor;
+.reveal .controls div.down,
+.reveal .controls div.down.enabled {
+	border-top-color: $linkColor;
 }
 
-.reveal .controls div.left.enabled {
+.reveal .controls div.left.enabled:hover {
 	border-right-color: $linkColorHover;
 }
 
-.reveal .controls div.right.enabled {
+.reveal .controls div.right.enabled:hover {
 	border-left-color: $linkColorHover;
 }
 
-.reveal .controls div.up.enabled {
+.reveal .controls div.up.enabled:hover {
 	border-bottom-color: $linkColorHover;
 }
 
-.reveal .controls div.down.enabled {
+.reveal .controls div.down.enabled:hover {
 	border-top-color: $linkColorHover;
 }