use borders to generate control arrows (closes #137)

1 files changed, 16 insertions, 12 deletions

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;
 }