control size tweaks

2 files changed, 32 insertions, 30 deletions

diff --git a/css/reveal.css b/css/reveal.css
index 6f30f69..897906b 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -254,8 +254,8 @@ body {
   .reveal .controls[data-controls-type="edges"] button {
     position: absolute;
     padding: 0;
-    width: 44px;
-    height: 44px;
+    width: 50px;
+    height: 50px;
     background-color: transparent;
     border: 0;
     outline: 0;
@@ -274,7 +274,7 @@ body {
     position: absolute;
     top: 0;
     left: 0;
-    width: 33px;
+    width: 30px;
     height: 5px;
     border-radius: 2.5px;
     background-color: #fff;
@@ -283,30 +283,31 @@ body {
     -webkit-transform-origin: 2.5px 50%;
             transform-origin: 2.5px 50%; }
   .reveal .controls[data-controls-type="edges"] button:before {
-    -webkit-transform: translateY(19.5px) rotate(40deg);
-            transform: translateY(19.5px) rotate(40deg); }
+    -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 {
-    -webkit-transform: translateY(19.5px) rotate(-40deg);
-            transform: translateY(19.5px) rotate(-40deg); }
+    -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 {
-    -webkit-transform: translateY(19.5px) rotate(36deg);
-            transform: translateY(19.5px) rotate(36deg); }
+    -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 {
-    -webkit-transform: translateY(19.5px) rotate(-36deg);
-            transform: translateY(19.5px) rotate(-36deg); }
+    -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 {
-    -webkit-transform: translateY(19.5px) rotate(34deg);
-            transform: translateY(19.5px) rotate(34deg); }
+    -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 {
-    -webkit-transform: translateY(19.5px) rotate(-34deg);
-            transform: translateY(19.5px) rotate(-34deg); }
+    -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:hover {
-    opacity: 1; }
   .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 {
     top: 50%;
     left: 18px;
@@ -338,14 +339,14 @@ body {
       top: auto;
       left: auto; }
     .reveal .controls[data-controls-type="edges"] .navigate-left {
-      right: 80px;
+      right: 86px;
       bottom: 18px; }
     .reveal .controls[data-controls-type="edges"] .navigate-right {
       right: 0;
       bottom: 18px; }
     .reveal .controls[data-controls-type="edges"] .navigate-up {
       right: 18px;
-      bottom: 80px; }
+      bottom: 86px; }
     .reveal .controls[data-controls-type="edges"] .navigate-down {
       right: 18px;
       bottom: 0; } }
diff --git a/css/reveal.scss b/css/reveal.scss
index 627e196..2561309 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -314,21 +314,21 @@ body {
 
 
 .reveal .controls[data-controls-type="edges"] {
-	$size: 44px;
-	$length: floor($size * 0.75);
+	$size: 50px;
+	$length: floor($size * 0.6);
 	$spacing: 18px;
 	$thickness: 5px;
-	$angle: 40deg;
-	$angleHover: 36deg;
-	$angleActive: 34deg;
+	$angle: 44deg;
+	$angleHover: 40deg;
+	$angleActive: 36deg;
 
 	@mixin arrowTransform( $angle ) {
 		&:before {
-			transform: translateY(($size - $thickness)/2) rotate( $angle );
+			transform: translateX(($size - $length)/2) translateY(($size - $thickness)/2) rotate( $angle );
 		}
 
 		&:after {
-			transform: translateY(($size - $thickness)/2) rotate( -$angle );
+			transform: translateX(($size - $length)/2) translateY(($size - $thickness)/2) rotate( -$angle );
 		}
 	}
 
@@ -388,14 +388,15 @@ body {
 		cursor: pointer;
 	}
 
-	.enabled:hover {
-		opacity: 1;
-	}
-
 	.enabled.fragmented {
 		opacity: 0.3;
 	}
 
+	.enabled:hover,
+	.enabled.fragmented:hover {
+		opacity: 1;
+	}
+
 	.navigate-left {
 		top: 50%;
 		left: $spacing;