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

This commit is contained in:
Russell Beattie 2012-10-22 14:49:22 -07:00
parent 143fc85c65
commit b373425b69
2 changed files with 41 additions and 31 deletions

View file

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

View file

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