xobs/lca2019-talk
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

new optional controls aligned to screen edges

Browse Source
This commit is contained in:
Hakim El Hattab
2016-04-20 13:45:03 +02:00
parent 963e5c8678
commit 1319016957
15 changed files with 494 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
css/reveal.css
View File

@@ -189,7 +189,7 @@ body {
/********************************************* /*********************************************
* CONTROLS * CONTROLS
*********************************************/ *********************************************/
.reveal .controls { .reveal .controls[data-controls-type="bottom-right"] {
display: none; display: none;
position: fixed; position: fixed;
width: 110px; width: 110px;
@@ -198,8 +198,7 @@ body {
right: 10px; right: 10px;
bottom: 10px; bottom: 10px;
-webkit-user-select: none; } -webkit-user-select: none; }
.reveal .controls[data-controls-type="bottom-right"] button {
.reveal .controls button {
padding: 0; padding: 0;
position: absolute; position: absolute;
opacity: 0.05; opacity: 0.05;
@@ -213,46 +212,128 @@ body {
transition: all 0.2s ease; transition: all 0.2s ease;
-webkit-appearance: none; -webkit-appearance: none;
-webkit-tap-highlight-color: transparent; } -webkit-tap-highlight-color: transparent; }
.reveal .controls[data-controls-type="bottom-right"] .enabled {
.reveal .controls .enabled {
opacity: 0.7; opacity: 0.7;
cursor: pointer; } cursor: pointer; }
.reveal .controls[data-controls-type="bottom-right"] .enabled:active {
.reveal .controls .enabled:active {
margin-top: 1px; } margin-top: 1px; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-left {
.reveal .controls .navigate-left {
top: 42px; top: 42px;
border-right-width: 22px; border-right-width: 22px;
border-right-color: #000; } border-right-color: #000; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.fragmented {
.reveal .controls .navigate-left.fragmented {
opacity: 0.3; } opacity: 0.3; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-right {
.reveal .controls .navigate-right {
left: 74px; left: 74px;
top: 42px; top: 42px;
border-left-width: 22px; border-left-width: 22px;
border-left-color: #000; } border-left-color: #000; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-right.fragmented {
.reveal .controls .navigate-right.fragmented {
opacity: 0.3; } opacity: 0.3; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-up {
.reveal .controls .navigate-up {
left: 42px; left: 42px;
border-bottom-width: 22px; border-bottom-width: 22px;
border-bottom-color: #000; } border-bottom-color: #000; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.fragmented {
.reveal .controls .navigate-up.fragmented {
opacity: 0.3; } opacity: 0.3; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-down {
.reveal .controls .navigate-down {
left: 42px; left: 42px;
top: 74px; top: 74px;
border-top-width: 22px; border-top-width: 22px;
border-top-color: #000; } border-top-color: #000; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-down.fragmented {
opacity: 0.3; }
.reveal .controls .navigate-down.fragmented { .reveal .controls[data-controls-type="edges"] {
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0; }
.reveal .controls[data-controls-type="edges"] button {
position: absolute;
padding: 0;
width: 36px;
height: 36px;
background-color: transparent;
border: 0;
outline: 0;
cursor: pointer;
opacity: 0;
-webkit-transform: scale(0.9999);
transform: scale(0.9999);
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
z-index: 2;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent; }
.reveal .controls[data-controls-type="edges"] button:before,
.reveal .controls[data-controls-type="edges"] button:after {
content: '';
position: absolute;
top: 40%;
left: 0;
width: 36px;
height: 5px;
border-radius: 2.5px;
background: #fff;
-webkit-transition: all 0.15s ease;
transition: all 0.15s ease;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%; }
.reveal .controls[data-controls-type="edges"] button:before {
-webkit-transform: translate(0, -1px) rotate(40deg);
transform: translate(0, -1px) rotate(40deg); }
.reveal .controls[data-controls-type="edges"] button:after {
-webkit-transform: translate(0, 1px) rotate(-40deg);
transform: translate(0, 1px) rotate(-40deg); }
.reveal .controls[data-controls-type="edges"] button:hover:before {
-webkit-transform: translate(0, -1px) rotate(36deg);
transform: translate(0, -1px) rotate(36deg); }
.reveal .controls[data-controls-type="edges"] button:hover:after {
-webkit-transform: translate(0, 1px) rotate(-36deg);
transform: translate(0, 1px) rotate(-36deg); }
.reveal .controls[data-controls-type="edges"] button:active:before {
-webkit-transform: translate(0, -1px) rotate(34deg);
transform: translate(0, -1px) rotate(34deg); }
.reveal .controls[data-controls-type="edges"] button:active:after {
-webkit-transform: translate(0, 1px) rotate(-34deg);
transform: translate(0, 1px) rotate(-34deg); }
.reveal .controls[data-controls-type="edges"] .enabled {
opacity: 0.7;
cursor: pointer; }
.reveal .controls[data-controls-type="edges"] .enabled:hover {
opacity: 1; }
.reveal .controls[data-controls-type="edges"] .navigate-left {
top: 50%;
left: 18px;
margin-top: -18px; }
.reveal .controls[data-controls-type="edges"] .navigate-left.fragmented {
opacity: 0.3; }
.reveal .controls[data-controls-type="edges"] .navigate-right {
top: 50%;
right: 18px;
margin-top: -18px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg); }
.reveal .controls[data-controls-type="edges"] .navigate-right.fragmented {
opacity: 0.3; }
.reveal .controls[data-controls-type="edges"] .navigate-up {
top: 18px;
left: 50%;
margin-left: -18px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg); }
.reveal .controls[data-controls-type="edges"] .navigate-up.fragmented {
opacity: 0.3; }
.reveal .controls[data-controls-type="edges"] .navigate-down {
bottom: 18px;
left: 50%;
margin-left: -18px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg); }
.reveal .controls[data-controls-type="edges"] .navigate-down.fragmented {
opacity: 0.3; } opacity: 0.3; }
/********************************************* /*********************************************

145
css/reveal.scss
View File

@@ -235,7 +235,7 @@ body {
* CONTROLS * CONTROLS
*********************************************/ *********************************************/
.reveal .controls { .reveal .controls[data-controls-type="bottom-right"] {
display: none; display: none;
position: fixed; position: fixed;
width: 110px; width: 110px;
@@ -245,9 +245,8 @@ body {
bottom: 10px; bottom: 10px;
-webkit-user-select: none; -webkit-user-select: none;
}
.reveal .controls button { button {
padding: 0; padding: 0;
position: absolute; position: absolute;
opacity: 0.05; opacity: 0.05;
@@ -261,56 +260,176 @@ body {
-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 ); -webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
} }
.reveal .controls .enabled { .enabled {
opacity: 0.7; opacity: 0.7;
cursor: pointer; cursor: pointer;
} }
.reveal .controls .enabled:active { .enabled:active {
margin-top: 1px; margin-top: 1px;
} }
.reveal .controls .navigate-left { .navigate-left {
top: 42px; top: 42px;
border-right-width: 22px; border-right-width: 22px;
border-right-color: #000; border-right-color: #000;
} }
.reveal .controls .navigate-left.fragmented { .navigate-left.fragmented {
opacity: 0.3; opacity: 0.3;
} }
.reveal .controls .navigate-right { .navigate-right {
left: 74px; left: 74px;
top: 42px; top: 42px;
border-left-width: 22px; border-left-width: 22px;
border-left-color: #000; border-left-color: #000;
} }
.reveal .controls .navigate-right.fragmented { .navigate-right.fragmented {
opacity: 0.3; opacity: 0.3;
} }
.reveal .controls .navigate-up { .navigate-up {
left: 42px; left: 42px;
border-bottom-width: 22px; border-bottom-width: 22px;
border-bottom-color: #000; border-bottom-color: #000;
} }
.reveal .controls .navigate-up.fragmented { .navigate-up.fragmented {
opacity: 0.3; opacity: 0.3;
} }
.reveal .controls .navigate-down { .navigate-down {
left: 42px; left: 42px;
top: 74px; top: 74px;
border-top-width: 22px; border-top-width: 22px;
border-top-color: #000; border-top-color: #000;
} }
.reveal .controls .navigate-down.fragmented { .navigate-down.fragmented {
opacity: 0.3; opacity: 0.3;
} }
}
.reveal .controls[data-controls-type="edges"] {
$size: 36px;
$spacing: 18px;
$thickness: 5px;
$angle: 40deg;
$angleHover: 36deg;
$angleActive: 34deg;
@mixin arrowTransform( $angle, $x: 0, $y: 0 ) {
&:before {
transform: translate( $x, $y ) rotate( $angle );
}
&:after {
transform: translate( $x, -$y ) rotate( -$angle );
}
}
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
button {
position: absolute;
padding: 0;
width: $size;
height: $size;
background-color: transparent;
border: 0;
outline: 0;
cursor: pointer;
opacity: 0;
transform: scale(.9999);
transition: all 0.2s ease;
z-index: 2; // above slides
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
}
button:before,
button:after {
content: '';
position: absolute;
top: 40%;
left: 0;
width: $size;
height: $thickness;
border-radius: $thickness / 2;
background: #fff;
transition: all 0.15s ease;
transform-origin: 0% 50%;
}
button {
@include arrowTransform( $angle, 0, -1px );
&:hover {
@include arrowTransform( $angleHover, 0, -1px );
}
&:active {
@include arrowTransform( $angleActive, 0, -1px );
}
}
.enabled {
opacity: 0.7;
cursor: pointer;
}
.enabled:hover {
opacity: 1;
}
.navigate-left {
top: 50%;
left: $spacing;
margin-top: -$size/2;
}
.navigate-left.fragmented {
opacity: 0.3;
}
.navigate-right {
top: 50%;
right: $spacing;
margin-top: -$size/2;
transform: rotate( 180deg );
}
.navigate-right.fragmented {
opacity: 0.3;
}
.navigate-up {
top: $spacing;
left: 50%;
margin-left: -$size/2;
transform: rotate( 90deg );
}
.navigate-up.fragmented {
opacity: 0.3;
}
.navigate-down {
bottom: $spacing;
left: 50%;
margin-left: -$size/2;
transform: rotate( -90deg );
}
.navigate-down.fragmented {
opacity: 0.3;
}
}
/********************************************* /*********************************************

28
css/theme/beige.css
View File

@@ -255,34 +255,38 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls .navigate-left, .reveal .controls[data-controls-type="bottom-right"] .navigate-left,
.reveal .controls .navigate-left.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
border-right-color: #8b743d; } border-right-color: #8b743d; }
.reveal .controls .navigate-right, .reveal .controls[data-controls-type="bottom-right"] .navigate-right,
.reveal .controls .navigate-right.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
border-left-color: #8b743d; } border-left-color: #8b743d; }
.reveal .controls .navigate-up, .reveal .controls[data-controls-type="bottom-right"] .navigate-up,
.reveal .controls .navigate-up.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
border-bottom-color: #8b743d; } border-bottom-color: #8b743d; }
.reveal .controls .navigate-down, .reveal .controls[data-controls-type="bottom-right"] .navigate-down,
.reveal .controls .navigate-down.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
border-top-color: #8b743d; } border-top-color: #8b743d; }
.reveal .controls .navigate-left.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
border-right-color: #c0a86e; } border-right-color: #c0a86e; }
.reveal .controls .navigate-right.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
border-left-color: #c0a86e; } border-left-color: #c0a86e; }
.reveal .controls .navigate-up.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
border-bottom-color: #c0a86e; } border-bottom-color: #c0a86e; }
.reveal .controls .navigate-down.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
border-top-color: #c0a86e; } border-top-color: #c0a86e; }
.reveal .controls[data-controls-type="edges"] button:before,
.reveal .controls[data-controls-type="edges"] button:after {
background-color: #333; }
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/

28
css/theme/black.css
View File

@@ -251,34 +251,38 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls .navigate-left, .reveal .controls[data-controls-type="bottom-right"] .navigate-left,
.reveal .controls .navigate-left.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
border-right-color: #42affa; } border-right-color: #42affa; }
.reveal .controls .navigate-right, .reveal .controls[data-controls-type="bottom-right"] .navigate-right,
.reveal .controls .navigate-right.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
border-left-color: #42affa; } border-left-color: #42affa; }
.reveal .controls .navigate-up, .reveal .controls[data-controls-type="bottom-right"] .navigate-up,
.reveal .controls .navigate-up.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
border-bottom-color: #42affa; } border-bottom-color: #42affa; }
.reveal .controls .navigate-down, .reveal .controls[data-controls-type="bottom-right"] .navigate-down,
.reveal .controls .navigate-down.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
border-top-color: #42affa; } border-top-color: #42affa; }
.reveal .controls .navigate-left.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
border-right-color: #8dcffc; } border-right-color: #8dcffc; }
.reveal .controls .navigate-right.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
border-left-color: #8dcffc; } border-left-color: #8dcffc; }
.reveal .controls .navigate-up.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
border-bottom-color: #8dcffc; } border-bottom-color: #8dcffc; }
.reveal .controls .navigate-down.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
border-top-color: #8dcffc; } border-top-color: #8dcffc; }
.reveal .controls[data-controls-type="edges"] button:before,
.reveal .controls[data-controls-type="edges"] button:after {
background-color: #fff; }
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/

28
css/theme/blood.css
View File

@@ -254,34 +254,38 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls .navigate-left, .reveal .controls[data-controls-type="bottom-right"] .navigate-left,
.reveal .controls .navigate-left.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
border-right-color: #a23; } border-right-color: #a23; }
.reveal .controls .navigate-right, .reveal .controls[data-controls-type="bottom-right"] .navigate-right,
.reveal .controls .navigate-right.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
border-left-color: #a23; } border-left-color: #a23; }
.reveal .controls .navigate-up, .reveal .controls[data-controls-type="bottom-right"] .navigate-up,
.reveal .controls .navigate-up.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
border-bottom-color: #a23; } border-bottom-color: #a23; }
.reveal .controls .navigate-down, .reveal .controls[data-controls-type="bottom-right"] .navigate-down,
.reveal .controls .navigate-down.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
border-top-color: #a23; } border-top-color: #a23; }
.reveal .controls .navigate-left.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
border-right-color: #dd5566; } border-right-color: #dd5566; }
.reveal .controls .navigate-right.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
border-left-color: #dd5566; } border-left-color: #dd5566; }
.reveal .controls .navigate-up.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
border-bottom-color: #dd5566; } border-bottom-color: #dd5566; }
.reveal .controls .navigate-down.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
border-top-color: #dd5566; } border-top-color: #dd5566; }
.reveal .controls[data-controls-type="edges"] button:before,
.reveal .controls[data-controls-type="edges"] button:after {
background-color: #eee; }
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/

28
css/theme/league.css
View File

@@ -257,34 +257,38 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls .navigate-left, .reveal .controls[data-controls-type="bottom-right"] .navigate-left,
.reveal .controls .navigate-left.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
border-right-color: #13DAEC; } border-right-color: #13DAEC; }
.reveal .controls .navigate-right, .reveal .controls[data-controls-type="bottom-right"] .navigate-right,
.reveal .controls .navigate-right.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
border-left-color: #13DAEC; } border-left-color: #13DAEC; }
.reveal .controls .navigate-up, .reveal .controls[data-controls-type="bottom-right"] .navigate-up,
.reveal .controls .navigate-up.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
border-bottom-color: #13DAEC; } border-bottom-color: #13DAEC; }
.reveal .controls .navigate-down, .reveal .controls[data-controls-type="bottom-right"] .navigate-down,
.reveal .controls .navigate-down.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
border-top-color: #13DAEC; } border-top-color: #13DAEC; }
.reveal .controls .navigate-left.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
border-right-color: #71e9f4; } border-right-color: #71e9f4; }
.reveal .controls .navigate-right.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
border-left-color: #71e9f4; } border-left-color: #71e9f4; }
.reveal .controls .navigate-up.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
border-bottom-color: #71e9f4; } border-bottom-color: #71e9f4; }
.reveal .controls .navigate-down.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
border-top-color: #71e9f4; } border-top-color: #71e9f4; }
.reveal .controls[data-controls-type="edges"] button:before,
.reveal .controls[data-controls-type="edges"] button:after {
background-color: #eee; }
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/

28
css/theme/moon.css
View File

@@ -255,34 +255,38 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls .navigate-left, .reveal .controls[data-controls-type="bottom-right"] .navigate-left,
.reveal .controls .navigate-left.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
border-right-color: #268bd2; } border-right-color: #268bd2; }
.reveal .controls .navigate-right, .reveal .controls[data-controls-type="bottom-right"] .navigate-right,
.reveal .controls .navigate-right.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
border-left-color: #268bd2; } border-left-color: #268bd2; }
.reveal .controls .navigate-up, .reveal .controls[data-controls-type="bottom-right"] .navigate-up,
.reveal .controls .navigate-up.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
border-bottom-color: #268bd2; } border-bottom-color: #268bd2; }
.reveal .controls .navigate-down, .reveal .controls[data-controls-type="bottom-right"] .navigate-down,
.reveal .controls .navigate-down.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
border-top-color: #268bd2; } border-top-color: #268bd2; }
.reveal .controls .navigate-left.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
border-right-color: #78b9e6; } border-right-color: #78b9e6; }
.reveal .controls .navigate-right.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
border-left-color: #78b9e6; } border-left-color: #78b9e6; }
.reveal .controls .navigate-up.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
border-bottom-color: #78b9e6; } border-bottom-color: #78b9e6; }
.reveal .controls .navigate-down.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
border-top-color: #78b9e6; } border-top-color: #78b9e6; }
.reveal .controls[data-controls-type="edges"] button:before,
.reveal .controls[data-controls-type="edges"] button:after {
background-color: #93a1a1; }
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/

28
css/theme/night.css
View File

@@ -249,34 +249,38 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls .navigate-left, .reveal .controls[data-controls-type="bottom-right"] .navigate-left,
.reveal .controls .navigate-left.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
border-right-color: #e7ad52; } border-right-color: #e7ad52; }
.reveal .controls .navigate-right, .reveal .controls[data-controls-type="bottom-right"] .navigate-right,
.reveal .controls .navigate-right.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
border-left-color: #e7ad52; } border-left-color: #e7ad52; }
.reveal .controls .navigate-up, .reveal .controls[data-controls-type="bottom-right"] .navigate-up,
.reveal .controls .navigate-up.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
border-bottom-color: #e7ad52; } border-bottom-color: #e7ad52; }
.reveal .controls .navigate-down, .reveal .controls[data-controls-type="bottom-right"] .navigate-down,
.reveal .controls .navigate-down.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
border-top-color: #e7ad52; } border-top-color: #e7ad52; }
.reveal .controls .navigate-left.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
border-right-color: #f3d7ac; } border-right-color: #f3d7ac; }
.reveal .controls .navigate-right.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
border-left-color: #f3d7ac; } border-left-color: #f3d7ac; }
.reveal .controls .navigate-up.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
border-bottom-color: #f3d7ac; } border-bottom-color: #f3d7ac; }
.reveal .controls .navigate-down.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
border-top-color: #f3d7ac; } border-top-color: #f3d7ac; }
.reveal .controls[data-controls-type="edges"] button:before,
.reveal .controls[data-controls-type="edges"] button:after {
background-color: #eee; }
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/

28
css/theme/serif.css
View File

@@ -251,34 +251,38 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls .navigate-left, .reveal .controls[data-controls-type="bottom-right"] .navigate-left,
.reveal .controls .navigate-left.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
border-right-color: #51483D; } border-right-color: #51483D; }
.reveal .controls .navigate-right, .reveal .controls[data-controls-type="bottom-right"] .navigate-right,
.reveal .controls .navigate-right.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
border-left-color: #51483D; } border-left-color: #51483D; }
.reveal .controls .navigate-up, .reveal .controls[data-controls-type="bottom-right"] .navigate-up,
.reveal .controls .navigate-up.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
border-bottom-color: #51483D; } border-bottom-color: #51483D; }
.reveal .controls .navigate-down, .reveal .controls[data-controls-type="bottom-right"] .navigate-down,
.reveal .controls .navigate-down.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
border-top-color: #51483D; } border-top-color: #51483D; }
.reveal .controls .navigate-left.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
border-right-color: #8b7c69; } border-right-color: #8b7c69; }
.reveal .controls .navigate-right.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
border-left-color: #8b7c69; } border-left-color: #8b7c69; }
.reveal .controls .navigate-up.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
border-bottom-color: #8b7c69; } border-bottom-color: #8b7c69; }
.reveal .controls .navigate-down.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
border-top-color: #8b7c69; } border-top-color: #8b7c69; }
.reveal .controls[data-controls-type="edges"] button:before,
.reveal .controls[data-controls-type="edges"] button:after {
background-color: #000; }
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/

28
css/theme/simple.css
View File

@@ -254,34 +254,38 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls .navigate-left, .reveal .controls[data-controls-type="bottom-right"] .navigate-left,
.reveal .controls .navigate-left.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
border-right-color: #00008B; } border-right-color: #00008B; }
.reveal .controls .navigate-right, .reveal .controls[data-controls-type="bottom-right"] .navigate-right,
.reveal .controls .navigate-right.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
border-left-color: #00008B; } border-left-color: #00008B; }
.reveal .controls .navigate-up, .reveal .controls[data-controls-type="bottom-right"] .navigate-up,
.reveal .controls .navigate-up.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
border-bottom-color: #00008B; } border-bottom-color: #00008B; }
.reveal .controls .navigate-down, .reveal .controls[data-controls-type="bottom-right"] .navigate-down,
.reveal .controls .navigate-down.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
border-top-color: #00008B; } border-top-color: #00008B; }
.reveal .controls .navigate-left.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
border-right-color: #0000f1; } border-right-color: #0000f1; }
.reveal .controls .navigate-right.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
border-left-color: #0000f1; } border-left-color: #0000f1; }
.reveal .controls .navigate-up.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
border-bottom-color: #0000f1; } border-bottom-color: #0000f1; }
.reveal .controls .navigate-down.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
border-top-color: #0000f1; } border-top-color: #0000f1; }
.reveal .controls[data-controls-type="edges"] button:before,
.reveal .controls[data-controls-type="edges"] button:after {
background-color: #000; }
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/

28
css/theme/sky.css
View File

@@ -258,34 +258,38 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls .navigate-left, .reveal .controls[data-controls-type="bottom-right"] .navigate-left,
.reveal .controls .navigate-left.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
border-right-color: #3b759e; } border-right-color: #3b759e; }
.reveal .controls .navigate-right, .reveal .controls[data-controls-type="bottom-right"] .navigate-right,
.reveal .controls .navigate-right.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
border-left-color: #3b759e; } border-left-color: #3b759e; }
.reveal .controls .navigate-up, .reveal .controls[data-controls-type="bottom-right"] .navigate-up,
.reveal .controls .navigate-up.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
border-bottom-color: #3b759e; } border-bottom-color: #3b759e; }
.reveal .controls .navigate-down, .reveal .controls[data-controls-type="bottom-right"] .navigate-down,
.reveal .controls .navigate-down.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
border-top-color: #3b759e; } border-top-color: #3b759e; }
.reveal .controls .navigate-left.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
border-right-color: #74a7cb; } border-right-color: #74a7cb; }
.reveal .controls .navigate-right.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
border-left-color: #74a7cb; } border-left-color: #74a7cb; }
.reveal .controls .navigate-up.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
border-bottom-color: #74a7cb; } border-bottom-color: #74a7cb; }
.reveal .controls .navigate-down.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
border-top-color: #74a7cb; } border-top-color: #74a7cb; }
.reveal .controls[data-controls-type="edges"] button:before,
.reveal .controls[data-controls-type="edges"] button:after {
background-color: #333; }
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/

28
css/theme/solarized.css
View File

@@ -255,34 +255,38 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls .navigate-left, .reveal .controls[data-controls-type="bottom-right"] .navigate-left,
.reveal .controls .navigate-left.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
border-right-color: #268bd2; } border-right-color: #268bd2; }
.reveal .controls .navigate-right, .reveal .controls[data-controls-type="bottom-right"] .navigate-right,
.reveal .controls .navigate-right.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
border-left-color: #268bd2; } border-left-color: #268bd2; }
.reveal .controls .navigate-up, .reveal .controls[data-controls-type="bottom-right"] .navigate-up,
.reveal .controls .navigate-up.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
border-bottom-color: #268bd2; } border-bottom-color: #268bd2; }
.reveal .controls .navigate-down, .reveal .controls[data-controls-type="bottom-right"] .navigate-down,
.reveal .controls .navigate-down.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
border-top-color: #268bd2; } border-top-color: #268bd2; }
.reveal .controls .navigate-left.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
border-right-color: #78b9e6; } border-right-color: #78b9e6; }
.reveal .controls .navigate-right.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
border-left-color: #78b9e6; } border-left-color: #78b9e6; }
.reveal .controls .navigate-up.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
border-bottom-color: #78b9e6; } border-bottom-color: #78b9e6; }
.reveal .controls .navigate-down.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
border-top-color: #78b9e6; } border-top-color: #78b9e6; }
.reveal .controls[data-controls-type="edges"] button:before,
.reveal .controls[data-controls-type="edges"] button:after {
background-color: #657b83; }
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/

29
css/theme/template/theme.scss
View File

@@ -297,42 +297,47 @@ body {
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls .navigate-left, .reveal .controls[data-controls-type="bottom-right"] .navigate-left,
.reveal .controls .navigate-left.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
border-right-color: $linkColor; border-right-color: $linkColor;
} }
.reveal .controls .navigate-right, .reveal .controls[data-controls-type="bottom-right"] .navigate-right,
.reveal .controls .navigate-right.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
border-left-color: $linkColor; border-left-color: $linkColor;
} }
.reveal .controls .navigate-up, .reveal .controls[data-controls-type="bottom-right"] .navigate-up,
.reveal .controls .navigate-up.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
border-bottom-color: $linkColor; border-bottom-color: $linkColor;
} }
.reveal .controls .navigate-down, .reveal .controls[data-controls-type="bottom-right"] .navigate-down,
.reveal .controls .navigate-down.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
border-top-color: $linkColor; border-top-color: $linkColor;
} }
.reveal .controls .navigate-left.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
border-right-color: $linkColorHover; border-right-color: $linkColorHover;
} }
.reveal .controls .navigate-right.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
border-left-color: $linkColorHover; border-left-color: $linkColorHover;
} }
.reveal .controls .navigate-up.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
border-bottom-color: $linkColorHover; border-bottom-color: $linkColorHover;
} }
.reveal .controls .navigate-down.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
border-top-color: $linkColorHover; border-top-color: $linkColorHover;
} }
.reveal .controls[data-controls-type="edges"] button:before,
.reveal .controls[data-controls-type="edges"] button:after {
background-color: $mainColor;
}
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR

28
css/theme/white.css
View File

@@ -251,34 +251,38 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls .navigate-left, .reveal .controls[data-controls-type="bottom-right"] .navigate-left,
.reveal .controls .navigate-left.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
border-right-color: #2a76dd; } border-right-color: #2a76dd; }
.reveal .controls .navigate-right, .reveal .controls[data-controls-type="bottom-right"] .navigate-right,
.reveal .controls .navigate-right.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
border-left-color: #2a76dd; } border-left-color: #2a76dd; }
.reveal .controls .navigate-up, .reveal .controls[data-controls-type="bottom-right"] .navigate-up,
.reveal .controls .navigate-up.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
border-bottom-color: #2a76dd; } border-bottom-color: #2a76dd; }
.reveal .controls .navigate-down, .reveal .controls[data-controls-type="bottom-right"] .navigate-down,
.reveal .controls .navigate-down.enabled { .reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
border-top-color: #2a76dd; } border-top-color: #2a76dd; }
.reveal .controls .navigate-left.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
border-right-color: #6ca0e8; } border-right-color: #6ca0e8; }
.reveal .controls .navigate-right.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
border-left-color: #6ca0e8; } border-left-color: #6ca0e8; }
.reveal .controls .navigate-up.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
border-bottom-color: #6ca0e8; } border-bottom-color: #6ca0e8; }
.reveal .controls .navigate-down.enabled:hover { .reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
border-top-color: #6ca0e8; } border-top-color: #6ca0e8; }
.reveal .controls[data-controls-type="edges"] button:before,
.reveal .controls[data-controls-type="edges"] button:after {
background-color: #222; }
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/

14
js/reveal.js
View File

@@ -516,7 +516,7 @@
dom.progressbar = dom.progress.querySelector( 'span' ); dom.progressbar = dom.progress.querySelector( 'span' );
// Arrow controls // Arrow controls
createSingletonNode( dom.wrapper, 'aside', 'controls', dom.controls = createSingletonNode( dom.wrapper, 'aside', 'controls',
'<button class="navigate-left" aria-label="previous slide"></button>' + '<button class="navigate-left" aria-label="previous slide"></button>' +
'<button class="navigate-right" aria-label="next slide"></button>' + '<button class="navigate-right" aria-label="next slide"></button>' +
'<button class="navigate-up" aria-label="above slide"></button>' + '<button class="navigate-up" aria-label="above slide"></button>' +
@@ -533,9 +533,6 @@
// Overlay graphic which is displayed during the paused mode // Overlay graphic which is displayed during the paused mode
createSingletonNode( dom.wrapper, 'div', 'pause-overlay', null ); createSingletonNode( dom.wrapper, 'div', 'pause-overlay', null );
// Cache references to elements
dom.controls = document.querySelector( '.reveal .controls' );
dom.wrapper.setAttribute( 'role', 'application' ); dom.wrapper.setAttribute( 'role', 'application' );
// There can be multiple instances of controls throughout the page // There can be multiple instances of controls throughout the page
@@ -789,7 +786,7 @@
// If no node was found, create it now // If no node was found, create it now
var node = document.createElement( tagname ); var node = document.createElement( tagname );
node.classList.add( classname ); node.className = classname;
if( typeof innerHTML === 'string' ) { if( typeof innerHTML === 'string' ) {
node.innerHTML = innerHTML; node.innerHTML = innerHTML;
} }
@@ -1001,6 +998,13 @@
dom.controls.style.display = config.controls ? 'block' : 'none'; dom.controls.style.display = config.controls ? 'block' : 'none';
dom.progress.style.display = config.progress ? 'block' : 'none'; dom.progress.style.display = config.progress ? 'block' : 'none';
var controlsType = typeof config.controls === 'string' ? config.controls : 'bottom-right';
dom.controls.setAttribute( 'data-controls-type', controlsType );
if( typeof config.controls === 'string' ) {
dom.controls.classList.add( config.controls );
}
if( config.shuffle ) { if( config.shuffle ) {
shuffle(); shuffle();
} }