new optional controls aligned to screen edges

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

View File

@ -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
*********************************************/

View File

@ -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
*********************************************/

View File

@ -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
*********************************************/

View File

@ -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
*********************************************/

View File

@ -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
*********************************************/

View File

@ -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
*********************************************/

View File

@ -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
*********************************************/

View File

@ -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
*********************************************/

View File

@ -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
*********************************************/

View File

@ -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
*********************************************/

View File

@ -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

View File

@ -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
*********************************************/