use borders to generate control arrows (closes #137)
This commit is contained in:
Hakim El Hattab
parent
7f4e5fc6bf
commit
aefe981040
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
7
js/reveal.min.js
vendored
7
js/reveal.min.js
vendored
|
|
@ -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="#">◄</a><a class="right" href="#">►</a><a class="up" href="#">▲</a><a class="down" href="#">▼</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=[];
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user