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

new controls are used by default, add config options

Browse Source
This commit is contained in:
Hakim El Hattab
2016-04-29 10:06:43 +02:00
parent 8a09557699
commit a9fcaa6f9e
15 changed files with 160 additions and 575 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
css/reveal.css
View File

@@ -189,69 +189,14 @@ body {
/********************************************* /*********************************************
* CONTROLS * CONTROLS
*********************************************/ *********************************************/
.reveal .controls[data-controls-type="bottom-right"] { .reveal .controls {
display: none;
position: fixed;
width: 110px;
height: 110px;
z-index: 30;
right: 10px;
bottom: 10px;
-webkit-user-select: none; }
.reveal .controls[data-controls-type="bottom-right"] button {
padding: 0;
position: absolute;
opacity: 0.05;
width: 0;
height: 0;
background-color: transparent;
border: 12px solid transparent;
-webkit-transform: scale(0.9999);
transform: scale(0.9999);
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent; }
.reveal .controls[data-controls-type="bottom-right"] .enabled {
opacity: 0.7;
cursor: pointer; }
.reveal .controls[data-controls-type="bottom-right"] .enabled:active {
margin-top: 1px; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-left {
top: 42px;
border-right-width: 22px;
border-right-color: #000; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.fragmented {
opacity: 0.3; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-right {
left: 74px;
top: 42px;
border-left-width: 22px;
border-left-color: #000; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-right.fragmented {
opacity: 0.3; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-up {
left: 42px;
border-bottom-width: 22px;
border-bottom-color: #000; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.fragmented {
opacity: 0.3; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-down {
left: 42px;
top: 74px;
border-top-width: 22px;
border-top-color: #000; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-down.fragmented {
opacity: 0.3; }
.reveal .controls[data-controls-type="edges"] {
display: none; display: none;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; } left: 0; }
.reveal .controls[data-controls-type="edges"] button { .reveal .controls button {
position: absolute; position: absolute;
padding: 0; padding: 0;
width: 50px; width: 50px;
@@ -268,8 +213,8 @@ body {
z-index: 2; z-index: 2;
-webkit-appearance: none; -webkit-appearance: none;
-webkit-tap-highlight-color: transparent; } -webkit-tap-highlight-color: transparent; }
.reveal .controls[data-controls-type="edges"] button:before, .reveal .controls button:before,
.reveal .controls[data-controls-type="edges"] button:after { .reveal .controls button:after {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
@@ -282,81 +227,116 @@ body {
transition: all 0.15s ease, background-color 0.8s ease; transition: all 0.15s ease, background-color 0.8s ease;
-webkit-transform-origin: 2.5px 50%; -webkit-transform-origin: 2.5px 50%;
transform-origin: 2.5px 50%; } transform-origin: 2.5px 50%; }
.reveal .controls[data-controls-type="edges"] button:before { .reveal .controls button:before {
-webkit-transform: translateX(10px) translateY(22.5px) rotate(44deg); -webkit-transform: translateX(10px) translateY(22.5px) rotate(44deg);
transform: translateX(10px) translateY(22.5px) rotate(44deg); } transform: translateX(10px) translateY(22.5px) rotate(44deg); }
.reveal .controls[data-controls-type="edges"] button:after { .reveal .controls button:after {
-webkit-transform: translateX(10px) translateY(22.5px) rotate(-44deg); -webkit-transform: translateX(10px) translateY(22.5px) rotate(-44deg);
transform: translateX(10px) translateY(22.5px) rotate(-44deg); } transform: translateX(10px) translateY(22.5px) rotate(-44deg); }
.reveal .controls[data-controls-type="edges"] button:hover:before { .reveal .controls button:hover:before {
-webkit-transform: translateX(10px) translateY(22.5px) rotate(40deg); -webkit-transform: translateX(10px) translateY(22.5px) rotate(40deg);
transform: translateX(10px) translateY(22.5px) rotate(40deg); } transform: translateX(10px) translateY(22.5px) rotate(40deg); }
.reveal .controls[data-controls-type="edges"] button:hover:after { .reveal .controls button:hover:after {
-webkit-transform: translateX(10px) translateY(22.5px) rotate(-40deg); -webkit-transform: translateX(10px) translateY(22.5px) rotate(-40deg);
transform: translateX(10px) translateY(22.5px) rotate(-40deg); } transform: translateX(10px) translateY(22.5px) rotate(-40deg); }
.reveal .controls[data-controls-type="edges"] button:active:before { .reveal .controls button:active:before {
-webkit-transform: translateX(10px) translateY(22.5px) rotate(36deg); -webkit-transform: translateX(10px) translateY(22.5px) rotate(36deg);
transform: translateX(10px) translateY(22.5px) rotate(36deg); } transform: translateX(10px) translateY(22.5px) rotate(36deg); }
.reveal .controls[data-controls-type="edges"] button:active:after { .reveal .controls button:active:after {
-webkit-transform: translateX(10px) translateY(22.5px) rotate(-36deg); -webkit-transform: translateX(10px) translateY(22.5px) rotate(-36deg);
transform: translateX(10px) translateY(22.5px) rotate(-36deg); } transform: translateX(10px) translateY(22.5px) rotate(-36deg); }
.reveal .controls[data-controls-type="edges"] .enabled { .reveal .controls .navigate-left {
opacity: 0.7;
cursor: pointer; }
.reveal .controls[data-controls-type="edges"] .enabled.fragmented {
opacity: 0.3; }
.reveal .controls[data-controls-type="edges"] .enabled:hover,
.reveal .controls[data-controls-type="edges"] .enabled.fragmented:hover {
opacity: 1; }
.reveal .controls[data-controls-type="edges"] .navigate-left {
top: 50%; top: 50%;
left: 18px; left: 18px;
-webkit-transform: translateY(-50%); -webkit-transform: translateY(-50%);
transform: translateY(-50%); } transform: translateY(-50%); }
.reveal .controls[data-controls-type="edges"] .navigate-right { .reveal .controls .navigate-right {
top: 50%; top: 50%;
right: 18px; right: 18px;
-webkit-transform: translateY(-50%) rotate(180deg); -webkit-transform: translateY(-50%) rotate(180deg);
transform: translateY(-50%) rotate(180deg); } transform: translateY(-50%) rotate(180deg); }
.reveal .controls[data-controls-type="edges"] .navigate-up { .reveal .controls .navigate-up {
top: 18px; top: 18px;
left: 50%; left: 50%;
-webkit-transform: translateX(-50%) rotate(90deg); -webkit-transform: translateX(-50%) rotate(90deg);
transform: translateX(-50%) rotate(90deg); } transform: translateX(-50%) rotate(90deg); }
.reveal .controls[data-controls-type="edges"] .navigate-down { .reveal .controls .navigate-down {
bottom: 18px; bottom: 18px;
left: 50%; left: 50%;
-webkit-transform: translateX(-50%) rotate(-90deg); -webkit-transform: translateX(-50%) rotate(-90deg);
transform: translateX(-50%) rotate(-90deg); } transform: translateX(-50%) rotate(-90deg); }
@media screen and (max-width: 500px) { .reveal .controls.soften-back-arrows .navigate-left.enabled,
.reveal .controls[data-controls-type="edges"] { .reveal .controls.soften-back-arrows .navigate-up.enabled {
opacity: 0.3; }
.reveal .controls.soften-back-arrows .navigate-left.enabled:hover,
.reveal .controls.soften-back-arrows .navigate-up.enabled:hover {
opacity: 1; }
.reveal .controls .enabled {
opacity: 0.7;
cursor: pointer; }
.reveal .controls .enabled.fragmented {
opacity: 0.3; }
.reveal .controls .enabled:hover,
.reveal .controls .enabled.fragmented:hover {
opacity: 1; }
.reveal .controls[data-controls-placement="bottom-right"] {
bottom: 18px; bottom: 18px;
right: 18px; } right: 18px;
.reveal .controls[data-controls-type="edges"] .navigate-left, -webkit-transform: scale(0.85);
.reveal .controls[data-controls-type="edges"] .navigate-right, transform: scale(0.85);
.reveal .controls[data-controls-type="edges"] .navigate-up, -webkit-transform-origin: 100% 100%;
.reveal .controls[data-controls-type="edges"] .navigate-down { transform-origin: 100% 100%; }
.reveal .controls[data-controls-placement="bottom-right"] .navigate-left,
.reveal .controls[data-controls-placement="bottom-right"] .navigate-right,
.reveal .controls[data-controls-placement="bottom-right"] .navigate-up,
.reveal .controls[data-controls-placement="bottom-right"] .navigate-down {
top: auto; top: auto;
left: auto; } left: auto; }
.reveal .controls[data-controls-type="edges"] .navigate-left { .reveal .controls[data-controls-placement="bottom-right"] .navigate-left {
right: 86px; right: 86px;
bottom: 18px; } bottom: 18px; }
.reveal .controls[data-controls-type="edges"] .navigate-right { .reveal .controls[data-controls-placement="bottom-right"] .navigate-right {
right: 0; right: 0;
bottom: 18px; } bottom: 18px; }
.reveal .controls[data-controls-type="edges"] .navigate-up { .reveal .controls[data-controls-placement="bottom-right"] .navigate-up {
right: 18px; right: 18px;
bottom: 86px; } bottom: 86px; }
.reveal .controls[data-controls-type="edges"] .navigate-down { .reveal .controls[data-controls-placement="bottom-right"] .navigate-down {
right: 18px;
bottom: 0; }
@media screen and (max-width: 500px) {
.reveal .controls {
bottom: 18px;
right: 18px;
-webkit-transform: scale(0.85);
transform: scale(0.85);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%; }
.reveal .controls .navigate-left,
.reveal .controls .navigate-right,
.reveal .controls .navigate-up,
.reveal .controls .navigate-down {
top: auto;
left: auto; }
.reveal .controls .navigate-left {
right: 86px;
bottom: 18px; }
.reveal .controls .navigate-right {
right: 0;
bottom: 18px; }
.reveal .controls .navigate-up {
right: 18px;
bottom: 86px; }
.reveal .controls .navigate-down {
right: 18px; right: 18px;
bottom: 0; } } bottom: 0; } }
.reveal.has-dark-background .controls[data-controls-type="edges"] button:after, .reveal.has-dark-background .controls button:after,
.reveal.has-dark-background .controls[data-controls-type="edges"] button:before { .reveal.has-dark-background .controls button:before {
background-color: #fff; } background-color: #fff; }
.reveal.has-light-background .controls[data-controls-type="edges"] button:after, .reveal.has-light-background .controls button:after,
.reveal.has-light-background .controls[data-controls-type="edges"] button:before { .reveal.has-light-background .controls button:before {
background-color: #000; } background-color: #000; }
/********************************************* /*********************************************

143
css/reveal.scss
View File

@@ -235,85 +235,7 @@ body {
* CONTROLS * CONTROLS
*********************************************/ *********************************************/
.reveal .controls[data-controls-type="bottom-right"] { .reveal .controls {
display: none;
position: fixed;
width: 110px;
height: 110px;
z-index: 30;
right: 10px;
bottom: 10px;
-webkit-user-select: none;
button {
padding: 0;
position: absolute;
opacity: 0.05;
width: 0;
height: 0;
background-color: transparent;
border: 12px solid transparent;
transform: scale(.9999);
transition: all 0.2s ease;
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
}
.enabled {
opacity: 0.7;
cursor: pointer;
}
.enabled:active {
margin-top: 1px;
}
.navigate-left {
top: 42px;
border-right-width: 22px;
border-right-color: #000;
}
.navigate-left.fragmented {
opacity: 0.3;
}
.navigate-right {
left: 74px;
top: 42px;
border-left-width: 22px;
border-left-color: #000;
}
.navigate-right.fragmented {
opacity: 0.3;
}
.navigate-up {
left: 42px;
border-bottom-width: 22px;
border-bottom-color: #000;
}
.navigate-up.fragmented {
opacity: 0.3;
}
.navigate-down {
left: 42px;
top: 74px;
border-top-width: 22px;
border-top-color: #000;
}
.navigate-down.fragmented {
opacity: 0.3;
}
}
.reveal .controls[data-controls-type="edges"] {
$size: 50px; $size: 50px;
$length: floor($size * 0.6); $length: floor($size * 0.6);
$spacing: 18px; $spacing: 18px;
@@ -383,20 +305,6 @@ body {
} }
} }
.enabled {
opacity: 0.7;
cursor: pointer;
}
.enabled.fragmented {
opacity: 0.3;
}
.enabled:hover,
.enabled.fragmented:hover {
opacity: 1;
}
.navigate-left { .navigate-left {
top: 50%; top: 50%;
left: $spacing; left: $spacing;
@@ -421,10 +329,41 @@ body {
transform: translateX(-50%) rotate( -90deg ); transform: translateX(-50%) rotate( -90deg );
} }
@media screen and (max-width: 500px) { // The soften back arrows option strongly deemphasizes
// backwards navigation in favor of drawing attention
// forwards
&.soften-back-arrows .navigate-left.enabled,
&.soften-back-arrows .navigate-up.enabled {
opacity: 0.3;
&:hover {
opacity: 1;
}
}
// Any control button that can be clicked is "enabled"
.enabled {
opacity: 0.7;
cursor: pointer;
}
// Any control button that leads to showing or hiding
// a fragment
.enabled.fragmented {
opacity: 0.3;
}
.enabled:hover,
.enabled.fragmented:hover {
opacity: 1;
}
@mixin bottom-right-controls() {
& { & {
bottom: $spacing; bottom: $spacing;
right: $spacing; right: $spacing;
transform: scale(0.85);
transform-origin: 100% 100%;
} }
.navigate-left, .navigate-left,
@@ -452,15 +391,23 @@ body {
bottom: 0; bottom: 0;
} }
} }
&[data-controls-placement="bottom-right"] {
@include bottom-right-controls()
} }
.reveal.has-dark-background .controls[data-controls-type="edges"] button:after, @media screen and (max-width: 500px) {
.reveal.has-dark-background .controls[data-controls-type="edges"] button:before { @include bottom-right-controls()
}
}
.reveal.has-dark-background .controls button:after,
.reveal.has-dark-background .controls button:before {
background-color: #fff; background-color: #fff;
} }
.reveal.has-light-background .controls[data-controls-type="edges"] button:after, .reveal.has-light-background .controls button:after,
.reveal.has-light-background .controls[data-controls-type="edges"] button:before { .reveal.has-light-background .controls button:before {
background-color: #000; background-color: #000;
} }

34
css/theme/beige.css
View File

@@ -255,37 +255,9 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls[data-controls-type="bottom-right"] .navigate-left, .reveal .controls button:before,
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled { .reveal .controls button:after {
border-right-color: #8b743d; } background-color: #8b743d; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-right,
.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
border-left-color: #8b743d; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-up,
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
border-bottom-color: #8b743d; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-down,
.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
border-top-color: #8b743d; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
border-right-color: #c0a86e; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
border-left-color: #c0a86e; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
border-bottom-color: #c0a86e; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
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

34
css/theme/black.css
View File

@@ -251,37 +251,9 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls[data-controls-type="bottom-right"] .navigate-left, .reveal .controls button:before,
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled { .reveal .controls button:after {
border-right-color: #42affa; } background-color: #42affa; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-right,
.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
border-left-color: #42affa; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-up,
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
border-bottom-color: #42affa; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-down,
.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
border-top-color: #42affa; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
border-right-color: #8dcffc; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
border-left-color: #8dcffc; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
border-bottom-color: #8dcffc; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
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

34
css/theme/blood.css
View File

@@ -254,37 +254,9 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls[data-controls-type="bottom-right"] .navigate-left, .reveal .controls button:before,
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled { .reveal .controls button:after {
border-right-color: #a23; } background-color: #a23; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-right,
.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
border-left-color: #a23; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-up,
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
border-bottom-color: #a23; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-down,
.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
border-top-color: #a23; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
border-right-color: #dd5566; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
border-left-color: #dd5566; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
border-bottom-color: #dd5566; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
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

34
css/theme/league.css
View File

@@ -257,37 +257,9 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls[data-controls-type="bottom-right"] .navigate-left, .reveal .controls button:before,
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled { .reveal .controls button:after {
border-right-color: #13DAEC; } background-color: #13DAEC; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-right,
.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
border-left-color: #13DAEC; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-up,
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
border-bottom-color: #13DAEC; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-down,
.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
border-top-color: #13DAEC; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
border-right-color: #71e9f4; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
border-left-color: #71e9f4; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
border-bottom-color: #71e9f4; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
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

34
css/theme/moon.css
View File

@@ -255,37 +255,9 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls[data-controls-type="bottom-right"] .navigate-left, .reveal .controls button:before,
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled { .reveal .controls button:after {
border-right-color: #268bd2; } background-color: #268bd2; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-right,
.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
border-left-color: #268bd2; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-up,
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
border-bottom-color: #268bd2; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-down,
.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
border-top-color: #268bd2; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
border-right-color: #78b9e6; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
border-left-color: #78b9e6; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
border-bottom-color: #78b9e6; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
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

34
css/theme/night.css
View File

@@ -249,37 +249,9 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls[data-controls-type="bottom-right"] .navigate-left, .reveal .controls button:before,
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled { .reveal .controls button:after {
border-right-color: #e7ad52; } background-color: #e7ad52; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-right,
.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
border-left-color: #e7ad52; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-up,
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
border-bottom-color: #e7ad52; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-down,
.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
border-top-color: #e7ad52; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
border-right-color: #f3d7ac; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
border-left-color: #f3d7ac; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
border-bottom-color: #f3d7ac; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
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

34
css/theme/serif.css
View File

@@ -251,37 +251,9 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls[data-controls-type="bottom-right"] .navigate-left, .reveal .controls button:before,
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled { .reveal .controls button:after {
border-right-color: #51483D; } background-color: #51483D; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-right,
.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
border-left-color: #51483D; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-up,
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
border-bottom-color: #51483D; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-down,
.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
border-top-color: #51483D; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
border-right-color: #8b7c69; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
border-left-color: #8b7c69; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
border-bottom-color: #8b7c69; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
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

34
css/theme/simple.css
View File

@@ -254,37 +254,9 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls[data-controls-type="bottom-right"] .navigate-left, .reveal .controls button:before,
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled { .reveal .controls button:after {
border-right-color: #00008B; } background-color: #00008B; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-right,
.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
border-left-color: #00008B; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-up,
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
border-bottom-color: #00008B; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-down,
.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
border-top-color: #00008B; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
border-right-color: #0000f1; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
border-left-color: #0000f1; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
border-bottom-color: #0000f1; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
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

34
css/theme/sky.css
View File

@@ -258,37 +258,9 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls[data-controls-type="bottom-right"] .navigate-left, .reveal .controls button:before,
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled { .reveal .controls button:after {
border-right-color: #3b759e; } background-color: #3b759e; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-right,
.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
border-left-color: #3b759e; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-up,
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
border-bottom-color: #3b759e; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-down,
.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
border-top-color: #3b759e; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
border-right-color: #74a7cb; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
border-left-color: #74a7cb; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
border-bottom-color: #74a7cb; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
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

34
css/theme/solarized.css
View File

@@ -255,37 +255,9 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls[data-controls-type="bottom-right"] .navigate-left, .reveal .controls button:before,
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled { .reveal .controls button:after {
border-right-color: #268bd2; } background-color: #268bd2; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-right,
.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
border-left-color: #268bd2; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-up,
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
border-bottom-color: #268bd2; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-down,
.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
border-top-color: #268bd2; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
border-right-color: #78b9e6; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
border-left-color: #78b9e6; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
border-bottom-color: #78b9e6; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
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

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

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

34
css/theme/white.css
View File

@@ -251,37 +251,9 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls[data-controls-type="bottom-right"] .navigate-left, .reveal .controls button:before,
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled { .reveal .controls button:after {
border-right-color: #2a76dd; } background-color: #2a76dd; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-right,
.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
border-left-color: #2a76dd; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-up,
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
border-bottom-color: #2a76dd; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-down,
.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
border-top-color: #2a76dd; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
border-right-color: #6ca0e8; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
border-left-color: #6ca0e8; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
border-bottom-color: #6ca0e8; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
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

@@ -52,6 +52,12 @@
// Display controls in the bottom right corner // Display controls in the bottom right corner
controls: true, controls: true,
// Determines where controls appear, either "bottom-right" or "edges"
controlsPlacement: 'edges',
// De-emphasizes backwards navigation controls
controlsSoftenBackArrows: true,
// Display a presentation progress bar // Display a presentation progress bar
progress: true, progress: true,
@@ -998,12 +1004,8 @@
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-placement', config.controlsPlacement );
dom.controls.setAttribute( 'data-controls-type', controlsType ); dom.controls.classList.toggle( 'soften-back-arrows', config.controlsSoftenBackArrows );
if( typeof config.controls === 'string' ) {
dom.controls.classList.add( config.controls );
}
if( config.shuffle ) { if( config.shuffle ) {
shuffle(); shuffle();