new optional controls aligned to screen edges
This commit is contained in:
Hakim El Hattab
parent
963e5c8678
commit
1319016957
15 changed files with 494 additions and 241 deletions
125
css/reveal.css
125
css/reveal.css
|
|
@ -189,7 +189,7 @@ body {
|
|||
/*********************************************
|
||||
* CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls {
|
||||
.reveal .controls[data-controls-type="bottom-right"] {
|
||||
display: none;
|
||||
position: fixed;
|
||||
width: 110px;
|
||||
|
|
@ -198,8 +198,7 @@ body {
|
|||
right: 10px;
|
||||
bottom: 10px;
|
||||
-webkit-user-select: none; }
|
||||
|
||||
.reveal .controls button {
|
||||
.reveal .controls[data-controls-type="bottom-right"] button {
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
opacity: 0.05;
|
||||
|
|
@ -213,46 +212,128 @@ body {
|
|||
transition: all 0.2s ease;
|
||||
-webkit-appearance: none;
|
||||
-webkit-tap-highlight-color: transparent; }
|
||||
|
||||
.reveal .controls .enabled {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .enabled {
|
||||
opacity: 0.7;
|
||||
cursor: pointer; }
|
||||
|
||||
.reveal .controls .enabled:active {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .enabled:active {
|
||||
margin-top: 1px; }
|
||||
|
||||
.reveal .controls .navigate-left {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left {
|
||||
top: 42px;
|
||||
border-right-width: 22px;
|
||||
border-right-color: #000; }
|
||||
|
||||
.reveal .controls .navigate-left.fragmented {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.fragmented {
|
||||
opacity: 0.3; }
|
||||
|
||||
.reveal .controls .navigate-right {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-right {
|
||||
left: 74px;
|
||||
top: 42px;
|
||||
border-left-width: 22px;
|
||||
border-left-color: #000; }
|
||||
|
||||
.reveal .controls .navigate-right.fragmented {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-right.fragmented {
|
||||
opacity: 0.3; }
|
||||
|
||||
.reveal .controls .navigate-up {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-up {
|
||||
left: 42px;
|
||||
border-bottom-width: 22px;
|
||||
border-bottom-color: #000; }
|
||||
|
||||
.reveal .controls .navigate-up.fragmented {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.fragmented {
|
||||
opacity: 0.3; }
|
||||
|
||||
.reveal .controls .navigate-down {
|
||||
.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 .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; }
|
||||
|
||||
/*********************************************
|
||||
|
|
|
|||
151
css/reveal.scss
151
css/reveal.scss
|
|
@ -235,7 +235,7 @@ body {
|
|||
* CONTROLS
|
||||
*********************************************/
|
||||
|
||||
.reveal .controls {
|
||||
.reveal .controls[data-controls-type="bottom-right"] {
|
||||
display: none;
|
||||
position: fixed;
|
||||
width: 110px;
|
||||
|
|
@ -245,9 +245,8 @@ body {
|
|||
bottom: 10px;
|
||||
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.reveal .controls button {
|
||||
button {
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
opacity: 0.05;
|
||||
|
|
@ -259,58 +258,178 @@ body {
|
|||
transition: all 0.2s ease;
|
||||
-webkit-appearance: none;
|
||||
-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
|
||||
}
|
||||
}
|
||||
|
||||
.reveal .controls .enabled {
|
||||
.enabled {
|
||||
opacity: 0.7;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.reveal .controls .enabled:active {
|
||||
.enabled:active {
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.reveal .controls .navigate-left {
|
||||
.navigate-left {
|
||||
top: 42px;
|
||||
|
||||
border-right-width: 22px;
|
||||
border-right-color: #000;
|
||||
}
|
||||
.reveal .controls .navigate-left.fragmented {
|
||||
.navigate-left.fragmented {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.reveal .controls .navigate-right {
|
||||
.navigate-right {
|
||||
left: 74px;
|
||||
top: 42px;
|
||||
|
||||
border-left-width: 22px;
|
||||
border-left-color: #000;
|
||||
}
|
||||
.reveal .controls .navigate-right.fragmented {
|
||||
.navigate-right.fragmented {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.reveal .controls .navigate-up {
|
||||
.navigate-up {
|
||||
left: 42px;
|
||||
|
||||
border-bottom-width: 22px;
|
||||
border-bottom-color: #000;
|
||||
}
|
||||
.reveal .controls .navigate-up.fragmented {
|
||||
.navigate-up.fragmented {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.reveal .controls .navigate-down {
|
||||
.navigate-down {
|
||||
left: 42px;
|
||||
top: 74px;
|
||||
|
||||
border-top-width: 22px;
|
||||
border-top-color: #000;
|
||||
}
|
||||
.reveal .controls .navigate-down.fragmented {
|
||||
.navigate-down.fragmented {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
|
|
|
|||
|
|
@ -255,34 +255,38 @@ body {
|
|||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls .navigate-left,
|
||||
.reveal .controls .navigate-left.enabled {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
|
||||
border-right-color: #8b743d; }
|
||||
|
||||
.reveal .controls .navigate-right,
|
||||
.reveal .controls .navigate-right.enabled {
|
||||
.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 .navigate-up,
|
||||
.reveal .controls .navigate-up.enabled {
|
||||
.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 .navigate-down,
|
||||
.reveal .controls .navigate-down.enabled {
|
||||
.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 .navigate-left.enabled:hover {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
|
||||
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; }
|
||||
|
||||
.reveal .controls .navigate-up.enabled:hover {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
|
||||
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; }
|
||||
|
||||
.reveal .controls[data-controls-type="edges"] button:before,
|
||||
.reveal .controls[data-controls-type="edges"] button:after {
|
||||
background-color: #333; }
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
|
|
|
|||
|
|
@ -251,34 +251,38 @@ body {
|
|||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls .navigate-left,
|
||||
.reveal .controls .navigate-left.enabled {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
|
||||
border-right-color: #42affa; }
|
||||
|
||||
.reveal .controls .navigate-right,
|
||||
.reveal .controls .navigate-right.enabled {
|
||||
.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 .navigate-up,
|
||||
.reveal .controls .navigate-up.enabled {
|
||||
.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 .navigate-down,
|
||||
.reveal .controls .navigate-down.enabled {
|
||||
.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 .navigate-left.enabled:hover {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
|
||||
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; }
|
||||
|
||||
.reveal .controls .navigate-up.enabled:hover {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
|
||||
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; }
|
||||
|
||||
.reveal .controls[data-controls-type="edges"] button:before,
|
||||
.reveal .controls[data-controls-type="edges"] button:after {
|
||||
background-color: #fff; }
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
|
|
|
|||
|
|
@ -254,34 +254,38 @@ body {
|
|||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls .navigate-left,
|
||||
.reveal .controls .navigate-left.enabled {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
|
||||
border-right-color: #a23; }
|
||||
|
||||
.reveal .controls .navigate-right,
|
||||
.reveal .controls .navigate-right.enabled {
|
||||
.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 .navigate-up,
|
||||
.reveal .controls .navigate-up.enabled {
|
||||
.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 .navigate-down,
|
||||
.reveal .controls .navigate-down.enabled {
|
||||
.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 .navigate-left.enabled:hover {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
|
||||
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; }
|
||||
|
||||
.reveal .controls .navigate-up.enabled:hover {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
|
||||
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; }
|
||||
|
||||
.reveal .controls[data-controls-type="edges"] button:before,
|
||||
.reveal .controls[data-controls-type="edges"] button:after {
|
||||
background-color: #eee; }
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
|
|
|
|||
|
|
@ -257,34 +257,38 @@ body {
|
|||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls .navigate-left,
|
||||
.reveal .controls .navigate-left.enabled {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
|
||||
border-right-color: #13DAEC; }
|
||||
|
||||
.reveal .controls .navigate-right,
|
||||
.reveal .controls .navigate-right.enabled {
|
||||
.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 .navigate-up,
|
||||
.reveal .controls .navigate-up.enabled {
|
||||
.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 .navigate-down,
|
||||
.reveal .controls .navigate-down.enabled {
|
||||
.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 .navigate-left.enabled:hover {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
|
||||
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; }
|
||||
|
||||
.reveal .controls .navigate-up.enabled:hover {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
|
||||
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; }
|
||||
|
||||
.reveal .controls[data-controls-type="edges"] button:before,
|
||||
.reveal .controls[data-controls-type="edges"] button:after {
|
||||
background-color: #eee; }
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
|
|
|
|||
|
|
@ -255,34 +255,38 @@ body {
|
|||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls .navigate-left,
|
||||
.reveal .controls .navigate-left.enabled {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
|
||||
border-right-color: #268bd2; }
|
||||
|
||||
.reveal .controls .navigate-right,
|
||||
.reveal .controls .navigate-right.enabled {
|
||||
.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 .navigate-up,
|
||||
.reveal .controls .navigate-up.enabled {
|
||||
.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 .navigate-down,
|
||||
.reveal .controls .navigate-down.enabled {
|
||||
.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 .navigate-left.enabled:hover {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
|
||||
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; }
|
||||
|
||||
.reveal .controls .navigate-up.enabled:hover {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
|
||||
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; }
|
||||
|
||||
.reveal .controls[data-controls-type="edges"] button:before,
|
||||
.reveal .controls[data-controls-type="edges"] button:after {
|
||||
background-color: #93a1a1; }
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
|
|
|
|||
|
|
@ -249,34 +249,38 @@ body {
|
|||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls .navigate-left,
|
||||
.reveal .controls .navigate-left.enabled {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
|
||||
border-right-color: #e7ad52; }
|
||||
|
||||
.reveal .controls .navigate-right,
|
||||
.reveal .controls .navigate-right.enabled {
|
||||
.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 .navigate-up,
|
||||
.reveal .controls .navigate-up.enabled {
|
||||
.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 .navigate-down,
|
||||
.reveal .controls .navigate-down.enabled {
|
||||
.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 .navigate-left.enabled:hover {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
|
||||
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; }
|
||||
|
||||
.reveal .controls .navigate-up.enabled:hover {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
|
||||
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; }
|
||||
|
||||
.reveal .controls[data-controls-type="edges"] button:before,
|
||||
.reveal .controls[data-controls-type="edges"] button:after {
|
||||
background-color: #eee; }
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
|
|
|
|||
|
|
@ -251,34 +251,38 @@ body {
|
|||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls .navigate-left,
|
||||
.reveal .controls .navigate-left.enabled {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
|
||||
border-right-color: #51483D; }
|
||||
|
||||
.reveal .controls .navigate-right,
|
||||
.reveal .controls .navigate-right.enabled {
|
||||
.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 .navigate-up,
|
||||
.reveal .controls .navigate-up.enabled {
|
||||
.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 .navigate-down,
|
||||
.reveal .controls .navigate-down.enabled {
|
||||
.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 .navigate-left.enabled:hover {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
|
||||
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; }
|
||||
|
||||
.reveal .controls .navigate-up.enabled:hover {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
|
||||
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; }
|
||||
|
||||
.reveal .controls[data-controls-type="edges"] button:before,
|
||||
.reveal .controls[data-controls-type="edges"] button:after {
|
||||
background-color: #000; }
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
|
|
|
|||
|
|
@ -254,34 +254,38 @@ body {
|
|||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls .navigate-left,
|
||||
.reveal .controls .navigate-left.enabled {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
|
||||
border-right-color: #00008B; }
|
||||
|
||||
.reveal .controls .navigate-right,
|
||||
.reveal .controls .navigate-right.enabled {
|
||||
.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 .navigate-up,
|
||||
.reveal .controls .navigate-up.enabled {
|
||||
.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 .navigate-down,
|
||||
.reveal .controls .navigate-down.enabled {
|
||||
.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 .navigate-left.enabled:hover {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
|
||||
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; }
|
||||
|
||||
.reveal .controls .navigate-up.enabled:hover {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
|
||||
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; }
|
||||
|
||||
.reveal .controls[data-controls-type="edges"] button:before,
|
||||
.reveal .controls[data-controls-type="edges"] button:after {
|
||||
background-color: #000; }
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
|
|
|
|||
|
|
@ -258,34 +258,38 @@ body {
|
|||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls .navigate-left,
|
||||
.reveal .controls .navigate-left.enabled {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
|
||||
border-right-color: #3b759e; }
|
||||
|
||||
.reveal .controls .navigate-right,
|
||||
.reveal .controls .navigate-right.enabled {
|
||||
.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 .navigate-up,
|
||||
.reveal .controls .navigate-up.enabled {
|
||||
.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 .navigate-down,
|
||||
.reveal .controls .navigate-down.enabled {
|
||||
.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 .navigate-left.enabled:hover {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
|
||||
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; }
|
||||
|
||||
.reveal .controls .navigate-up.enabled:hover {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
|
||||
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; }
|
||||
|
||||
.reveal .controls[data-controls-type="edges"] button:before,
|
||||
.reveal .controls[data-controls-type="edges"] button:after {
|
||||
background-color: #333; }
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
|
|
|
|||
|
|
@ -255,34 +255,38 @@ body {
|
|||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls .navigate-left,
|
||||
.reveal .controls .navigate-left.enabled {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
|
||||
border-right-color: #268bd2; }
|
||||
|
||||
.reveal .controls .navigate-right,
|
||||
.reveal .controls .navigate-right.enabled {
|
||||
.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 .navigate-up,
|
||||
.reveal .controls .navigate-up.enabled {
|
||||
.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 .navigate-down,
|
||||
.reveal .controls .navigate-down.enabled {
|
||||
.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 .navigate-left.enabled:hover {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
|
||||
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; }
|
||||
|
||||
.reveal .controls .navigate-up.enabled:hover {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
|
||||
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; }
|
||||
|
||||
.reveal .controls[data-controls-type="edges"] button:before,
|
||||
.reveal .controls[data-controls-type="edges"] button:after {
|
||||
background-color: #657b83; }
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
|
|
|
|||
|
|
@ -297,42 +297,47 @@ body {
|
|||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
|
||||
.reveal .controls .navigate-left,
|
||||
.reveal .controls .navigate-left.enabled {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
|
||||
border-right-color: $linkColor;
|
||||
}
|
||||
|
||||
.reveal .controls .navigate-right,
|
||||
.reveal .controls .navigate-right.enabled {
|
||||
.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 .navigate-up,
|
||||
.reveal .controls .navigate-up.enabled {
|
||||
.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 .navigate-down,
|
||||
.reveal .controls .navigate-down.enabled {
|
||||
.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 .navigate-left.enabled:hover {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
|
||||
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;
|
||||
}
|
||||
|
||||
.reveal .controls .navigate-up.enabled:hover {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
|
||||
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;
|
||||
}
|
||||
|
||||
.reveal .controls[data-controls-type="edges"] button:before,
|
||||
.reveal .controls[data-controls-type="edges"] button:after {
|
||||
background-color: $mainColor;
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
|
|
|
|||
|
|
@ -251,34 +251,38 @@ body {
|
|||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls .navigate-left,
|
||||
.reveal .controls .navigate-left.enabled {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
|
||||
border-right-color: #2a76dd; }
|
||||
|
||||
.reveal .controls .navigate-right,
|
||||
.reveal .controls .navigate-right.enabled {
|
||||
.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 .navigate-up,
|
||||
.reveal .controls .navigate-up.enabled {
|
||||
.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 .navigate-down,
|
||||
.reveal .controls .navigate-down.enabled {
|
||||
.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 .navigate-left.enabled:hover {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
|
||||
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; }
|
||||
|
||||
.reveal .controls .navigate-up.enabled:hover {
|
||||
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
|
||||
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; }
|
||||
|
||||
.reveal .controls[data-controls-type="edges"] button:before,
|
||||
.reveal .controls[data-controls-type="edges"] button:after {
|
||||
background-color: #222; }
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
|
|
|
|||
14
js/reveal.js
14
js/reveal.js
|
|
@ -516,7 +516,7 @@
|
|||
dom.progressbar = dom.progress.querySelector( 'span' );
|
||||
|
||||
// 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-right" aria-label="next slide"></button>' +
|
||||
'<button class="navigate-up" aria-label="above slide"></button>' +
|
||||
|
|
@ -533,9 +533,6 @@
|
|||
// Overlay graphic which is displayed during the paused mode
|
||||
createSingletonNode( dom.wrapper, 'div', 'pause-overlay', null );
|
||||
|
||||
// Cache references to elements
|
||||
dom.controls = document.querySelector( '.reveal .controls' );
|
||||
|
||||
dom.wrapper.setAttribute( 'role', 'application' );
|
||||
|
||||
// There can be multiple instances of controls throughout the page
|
||||
|
|
@ -789,7 +786,7 @@
|
|||
|
||||
// If no node was found, create it now
|
||||
var node = document.createElement( tagname );
|
||||
node.classList.add( classname );
|
||||
node.className = classname;
|
||||
if( typeof innerHTML === 'string' ) {
|
||||
node.innerHTML = innerHTML;
|
||||
}
|
||||
|
|
@ -1001,6 +998,13 @@
|
|||
dom.controls.style.display = config.controls ? '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 ) {
|
||||
shuffle();
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue