use borders to generate control arrows (closes #137)

diff --git a/css/reveal.css b/css/reveal.css
index ce4765ff9743cc5b2e7d9603d0828fc31b352f94..b39ea13047b06d469677e79cbc4e24d931ddacbe 100644 (file)
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -316,8 +316,8 @@ body {
 .reveal .controls {
        display: none;
        position: fixed;
-       width: 90px;
-       height: 90px;
+       width: 110px;
+       height: 110px;
        z-index: 30;
        right: 10px;
        bottom: 10px;
@@ -329,10 +329,17 @@ body {
        width: 0; 
        height: 0; 
        border: 12px solid transparent;
+
+       -webkit-transition: opacity 0.2s ease;
+          -moz-transition: opacity 0.2s ease;
+           -ms-transition: opacity 0.2s ease;
+            -o-transition: opacity 0.2s ease;
+               transition: opacity 0.2s ease;
 }
 
 .reveal .controls div.enabled {
        opacity: 0.6;
+       cursor: pointer;
 }
 
 .reveal .controls div.enabled:active {
@@ -340,28 +347,32 @@ body {
 }
 
 .reveal .controls div.left {
-       top: 30px;
+       top: 42px;
 
+       border-right-width: 22px;
        border-right-color: #eee;
 }
 
 .reveal .controls div.right {
-       left: 60px;
-       top: 30px;
+       left: 74px;
+       top: 42px;
 
+       border-left-width: 22px;
        border-left-color: #eee;
 }
 
 .reveal .controls div.up {
-       left: 30px;
+       left: 42px;
 
+       border-bottom-width: 22px;
        border-bottom-color: #eee;
 }
 
 .reveal .controls div.down {
-       left: 30px;
-       top: 60px;
+       left: 42px;
+       top: 74px;
 
+       border-top-width: 22px;
        border-top-color: #eee;
 }
 

diff --git a/css/theme/beige.css b/css/theme/beige.css
index 6d2eea99b22348ba83cc5812f4b682ec4b49a1e5..fe0e4600f29734be61672397c0135ab7bb1bb439 100644 (file)
--- 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 0b393c21353d3ce3db905a68209f35e5aae5f5d1..563e4d9d5d64c25bda9e1c9559f4abc9ddff40fa 100644 (file)
--- 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 55a6b3a4b1e9b00764241b5829ffe72957df9000..3957b5d23b812f31107c6e145e7b97fd5b8ae856 100644 (file)
--- 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 8fb23c400d77865ed56cedcda76184f461f4bf6e..926bbc54ca0a27863c13b5f537dd3d7eb311aebb 100644 (file)
--- 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 d68fc8b1e2c961352be195cc8b1ca0cb59c0dc78..6618c0d09f674959a424fc864188896da5588a65 100644 (file)
--- 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 9c22ecb747b93305d81b95fb4368cdddf6ad760f..600c8e35b805723af53237413141aea39e898cbe 100644 (file)
--- 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;
 }
 

diff --git a/js/reveal.min.js b/js/reveal.min.js
index 7fb4f9ad6ad70d34d7472ce29a78a0bf1739b373..278d5e8bfd0c3939816782195ddab8db4e92602b 100644 (file)
--- a/js/reveal.min.js
+++ b/js/reveal.min.js
@@ -9,10 +9,9 @@ var Reveal=(function(){var l=".reveal .slides>section",b=".reveal .slides>sectio
 function i(al){if((!n&&!T)){document.body.setAttribute("class","no-transforms");return;}t(R,al);d();V();}function P(){f.theme=document.querySelector("#theme");
 f.wrapper=document.querySelector(".reveal");if(!f.wrapper.querySelector(".progress")&&R.progress){var ao=document.createElement("div");ao.classList.add("progress");
 ao.innerHTML="<span></span>";f.wrapper.appendChild(ao);}if(!f.wrapper.querySelector(".controls")&&R.controls){var an=document.createElement("aside");an.classList.add("controls");
-an.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>';
-f.wrapper.appendChild(an);}if(!f.wrapper.querySelector(".state-background")){var am=document.createElement("div");am.classList.add("state-background");
-f.wrapper.appendChild(am);}if(!f.wrapper.querySelector(".pause-overlay")){var al=document.createElement("div");al.classList.add("pause-overlay");f.wrapper.appendChild(al);
-}f.progress=document.querySelector(".reveal .progress");f.progressbar=document.querySelector(".reveal .progress span");if(R.controls){f.controls=document.querySelector(".reveal .controls");
+an.innerHTML='<div class="left"></div><div class="right"></div><div class="up"></div><div class="down"></div>';f.wrapper.appendChild(an);}if(!f.wrapper.querySelector(".state-background")){var am=document.createElement("div");
+am.classList.add("state-background");f.wrapper.appendChild(am);}if(!f.wrapper.querySelector(".pause-overlay")){var al=document.createElement("div");al.classList.add("pause-overlay");
+f.wrapper.appendChild(al);}f.progress=document.querySelector(".reveal .progress");f.progressbar=document.querySelector(".reveal .progress span");if(R.controls){f.controls=document.querySelector(".reveal .controls");
 f.controlsLeft=document.querySelector(".reveal .controls .left");f.controlsRight=document.querySelector(".reveal .controls .right");f.controlsUp=document.querySelector(".reveal .controls .up");
 f.controlsDown=document.querySelector(".reveal .controls .down");}}function d(){if(navigator.userAgent.match(/(iphone|ipod|android)/i)){document.documentElement.style.overflow="scroll";
 document.body.style.height="120%";window.addEventListener("load",ad,false);window.addEventListener("orientationchange",ad,false);}}function V(){var am=[],aq=[];