From aefe981040ea8c5c7875d9da1ac860def44a19e8 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Mon, 22 Oct 2012 23:16:14 -0400 Subject: [PATCH] use borders to generate control arrows (closes #137) --- css/reveal.css | 27 +++++++++++++++------- css/theme/beige.css | 42 +++++++++++++++++++---------------- css/theme/default.css | 42 +++++++++++++++++++---------------- css/theme/serif.css | 42 +++++++++++++++++++---------------- css/theme/simple.css | 42 +++++++++++++++++++---------------- css/theme/sky.css | 42 +++++++++++++++++++---------------- css/theme/template/theme.scss | 42 +++++++++++++++++++---------------- js/reveal.min.js | 7 +++--- 8 files changed, 160 insertions(+), 126 deletions(-) diff --git a/css/reveal.css b/css/reveal.css index ce4765f..b39ea13 100644 --- 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 6d2eea9..fe0e460 100644 --- 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.right { - border-left-color: #333333; -} - -.reveal .controls div.up { - border-bottom-color: #333333; -} - -.reveal .controls div.down { - border-top-color: #333333; -} - +.reveal .controls div.left, .reveal .controls div.left.enabled { + border-right-color: #8b743d; +} + +.reveal .controls div.right, +.reveal .controls div.right.enabled { + border-left-color: #8b743d; +} + +.reveal .controls div.up, +.reveal .controls div.up.enabled { + border-bottom-color: #8b743d; +} + +.reveal .controls div.down, +.reveal .controls div.down.enabled { + border-top-color: #8b743d; +} + +.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 0b393c2..563e4d9 100644 --- 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.right { - border-left-color: #eeeeee; -} - -.reveal .controls div.up { - border-bottom-color: #eeeeee; -} - -.reveal .controls div.down { - border-top-color: #eeeeee; -} - +.reveal .controls div.left, .reveal .controls div.left.enabled { + border-right-color: #13daec; +} + +.reveal .controls div.right, +.reveal .controls div.right.enabled { + border-left-color: #13daec; +} + +.reveal .controls div.up, +.reveal .controls div.up.enabled { + border-bottom-color: #13daec; +} + +.reveal .controls div.down, +.reveal .controls div.down.enabled { + border-top-color: #13daec; +} + +.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 55a6b3a..3957b5d 100644 --- 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.right { - border-left-color: black; -} - -.reveal .controls div.up { - border-bottom-color: black; -} - -.reveal .controls div.down { - border-top-color: black; -} - +.reveal .controls div.left, .reveal .controls div.left.enabled { + border-right-color: #51483d; +} + +.reveal .controls div.right, +.reveal .controls div.right.enabled { + border-left-color: #51483d; +} + +.reveal .controls div.up, +.reveal .controls div.up.enabled { + border-bottom-color: #51483d; +} + +.reveal .controls div.down, +.reveal .controls div.down.enabled { + border-top-color: #51483d; +} + +.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 8fb23c4..926bbc5 100644 --- 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.right { - border-left-color: black; -} - -.reveal .controls div.up { - border-bottom-color: black; -} - -.reveal .controls div.down { - border-top-color: black; -} - +.reveal .controls div.left, .reveal .controls div.left.enabled { + border-right-color: darkblue; +} + +.reveal .controls div.right, +.reveal .controls div.right.enabled { + border-left-color: darkblue; +} + +.reveal .controls div.up, +.reveal .controls div.up.enabled { + border-bottom-color: darkblue; +} + +.reveal .controls div.down, +.reveal .controls div.down.enabled { + border-top-color: darkblue; +} + +.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 d68fc8b..6618c0d 100644 --- 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.right { - border-left-color: #333333; -} - -.reveal .controls div.up { - border-bottom-color: #333333; -} - -.reveal .controls div.down { - border-top-color: #333333; -} - +.reveal .controls div.left, .reveal .controls div.left.enabled { + border-right-color: #3b759e; +} + +.reveal .controls div.right, +.reveal .controls div.right.enabled { + border-left-color: #3b759e; +} + +.reveal .controls div.up, +.reveal .controls div.up.enabled { + border-bottom-color: #3b759e; +} + +.reveal .controls div.down, +.reveal .controls div.down.enabled { + border-top-color: #3b759e; +} + +.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 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.right { - border-left-color: $mainColor; -} - -.reveal .controls div.up { - border-bottom-color: $mainColor; -} - -.reveal .controls div.down { - border-top-color: $mainColor; -} - +.reveal .controls div.left, .reveal .controls div.left.enabled { + border-right-color: $linkColor; +} + +.reveal .controls div.right, +.reveal .controls div.right.enabled { + border-left-color: $linkColor; +} + +.reveal .controls div.up, +.reveal .controls div.up.enabled { + border-bottom-color: $linkColor; +} + +.reveal .controls div.down, +.reveal .controls div.down.enabled { + border-top-color: $linkColor; +} + +.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 7fb4f9a..278d5e8 100644 --- 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="";f.wrapper.appendChild(ao);}if(!f.wrapper.querySelector(".controls")&&R.controls){var an=document.createElement("aside");an.classList.add("controls"); -an.innerHTML='◄►▲▼'; -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='
';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=[];