Browse Source

Updated Controls to use CSS triangles rather than unicode triangles (fix Android support)

Russell Beattie 11 years ago
parent
commit
b373425b69
2 changed files with 42 additions and 32 deletions
  1. 38 28
      css/reveal.css
  2. 4 4
      js/reveal.js

+ 38 - 28
css/reveal.css

@@ -319,41 +319,51 @@ body {
 	width: 90px;
 	height: 90px;
 	z-index: 30;
-
 	right: 10px;
 	bottom: 10px;
 }
 
-	.reveal .controls a {
-		font-family: Arial;
-		font-size: 0.83em;
-		position: absolute;
-		opacity: 0.1;
-	}
-		.reveal .controls a.enabled {
-			opacity: 0.6;
-		}
-		.reveal .controls a.enabled:active {
-			margin-top: 1px;
-		}
-
-	.reveal .controls .left {
-		top: 30px;
-	}
+.reveal .controls div {
+	position: absolute;
+	opacity: 0.1;
+	width: 0; 
+	height: 0; 
+	border: 12px solid transparent;
+}
 
-	.reveal .controls .right {
-		left: 60px;
-		top: 30px;
-	}
+.reveal .controls div.enabled {
+	opacity: 0.6;
+}
 
-	.reveal .controls .up {
-		left: 30px;
-	}
+.reveal .controls div.enabled:active {
+	margin-top: 1px;
+}
 
-	.reveal .controls .down {
-		left: 30px;
-		top: 60px;
-	}
+.reveal .controls div.left {
+	top: 30px;
+
+	border-right-color: #eee;
+}
+
+.reveal .controls div.right {
+	left: 60px;
+	top: 30px;
+
+	border-left-color: #eee;
+}
+
+.reveal .controls div.up {
+	left: 30px;
+
+	border-bottom-color: #eee;
+}
+
+.reveal .controls div.down {
+	left: 30px;
+	top: 60px;
+
+	border-top-color: #eee;
+}
 
 
 /*********************************************

+ 4 - 4
js/reveal.js

@@ -150,10 +150,10 @@ var Reveal = (function(){
 		if( !dom.wrapper.querySelector( '.controls' ) && config.controls ) {
 			var controlsElement = document.createElement( 'aside' );
 			controlsElement.classList.add( 'controls' );
-			controlsElement.innerHTML = '<a class="left" href="#">&#x25C4;</a>' +
-										'<a class="right" href="#">&#x25BA;</a>' +
-										'<a class="up" href="#">&#x25B2;</a>' +
-										'<a class="down" href="#">&#x25BC;</a>';
+			controlsElement.innerHTML = '<div class="left"></div>' +
+										'<div class="right"></div>' +
+										'<div class="up"></div>' +
+										'<div class="down"></div>';
 			dom.wrapper.appendChild( controlsElement );
 		}