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

diff --git a/css/reveal.css b/css/reveal.css
index 09a874e94e5df627fe9ab573a51c25203239b4cd..ce4765ff9743cc5b2e7d9603d0828fc31b352f94 100644 (file)
--- a/css/reveal.css
+++ b/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;
+}
 
 
 /*********************************************

diff --git a/js/reveal.js b/js/reveal.js
index 0ae2ad1beed4e94bf14c8f676728c05194f40c38..cb0205e589f2a7fd4307368792a21d465df91e94 100644 (file)
--- a/js/reveal.js
+++ b/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 );
                }