use borders to generate control arrows (closes #137)
This commit is contained in:
parent
7f4e5fc6bf
commit
aefe981040
8 changed files with 160 additions and 126 deletions
|
@ -110,35 +110,39 @@ body {
|
|||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls div.left {
|
||||
border-right-color: #333333;
|
||||
}
|
||||
|
||||
.reveal .controls div.right {
|
||||
border-left-color: #333333;
|
||||
}
|
||||
|
||||
.reveal .controls div.up {
|
||||
border-bottom-color: #333333;
|
||||
}
|
||||
|
||||
.reveal .controls div.down {
|
||||
border-top-color: #333333;
|
||||
}
|
||||
|
||||
.reveal .controls div.left,
|
||||
.reveal .controls div.left.enabled {
|
||||
border-right-color: #8b743d;
|
||||
}
|
||||
|
||||
.reveal .controls div.right,
|
||||
.reveal .controls div.right.enabled {
|
||||
border-left-color: #8b743d;
|
||||
}
|
||||
|
||||
.reveal .controls div.up,
|
||||
.reveal .controls div.up.enabled {
|
||||
border-bottom-color: #8b743d;
|
||||
}
|
||||
|
||||
.reveal .controls div.down,
|
||||
.reveal .controls div.down.enabled {
|
||||
border-top-color: #8b743d;
|
||||
}
|
||||
|
||||
.reveal .controls div.left.enabled:hover {
|
||||
border-right-color: #c0a86e;
|
||||
}
|
||||
|
||||
.reveal .controls div.right.enabled {
|
||||
.reveal .controls div.right.enabled:hover {
|
||||
border-left-color: #c0a86e;
|
||||
}
|
||||
|
||||
.reveal .controls div.up.enabled {
|
||||
.reveal .controls div.up.enabled:hover {
|
||||
border-bottom-color: #c0a86e;
|
||||
}
|
||||
|
||||
.reveal .controls div.down.enabled {
|
||||
.reveal .controls div.down.enabled:hover {
|
||||
border-top-color: #c0a86e;
|
||||
}
|
||||
|
||||
|
|
|
@ -110,35 +110,39 @@ body {
|
|||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls div.left {
|
||||
border-right-color: #eeeeee;
|
||||
}
|
||||
|
||||
.reveal .controls div.right {
|
||||
border-left-color: #eeeeee;
|
||||
}
|
||||
|
||||
.reveal .controls div.up {
|
||||
border-bottom-color: #eeeeee;
|
||||
}
|
||||
|
||||
.reveal .controls div.down {
|
||||
border-top-color: #eeeeee;
|
||||
}
|
||||
|
||||
.reveal .controls div.left,
|
||||
.reveal .controls div.left.enabled {
|
||||
border-right-color: #13daec;
|
||||
}
|
||||
|
||||
.reveal .controls div.right,
|
||||
.reveal .controls div.right.enabled {
|
||||
border-left-color: #13daec;
|
||||
}
|
||||
|
||||
.reveal .controls div.up,
|
||||
.reveal .controls div.up.enabled {
|
||||
border-bottom-color: #13daec;
|
||||
}
|
||||
|
||||
.reveal .controls div.down,
|
||||
.reveal .controls div.down.enabled {
|
||||
border-top-color: #13daec;
|
||||
}
|
||||
|
||||
.reveal .controls div.left.enabled:hover {
|
||||
border-right-color: #71e9f4;
|
||||
}
|
||||
|
||||
.reveal .controls div.right.enabled {
|
||||
.reveal .controls div.right.enabled:hover {
|
||||
border-left-color: #71e9f4;
|
||||
}
|
||||
|
||||
.reveal .controls div.up.enabled {
|
||||
.reveal .controls div.up.enabled:hover {
|
||||
border-bottom-color: #71e9f4;
|
||||
}
|
||||
|
||||
.reveal .controls div.down.enabled {
|
||||
.reveal .controls div.down.enabled:hover {
|
||||
border-top-color: #71e9f4;
|
||||
}
|
||||
|
||||
|
|
|
@ -97,35 +97,39 @@ body {
|
|||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls div.left {
|
||||
border-right-color: black;
|
||||
}
|
||||
|
||||
.reveal .controls div.right {
|
||||
border-left-color: black;
|
||||
}
|
||||
|
||||
.reveal .controls div.up {
|
||||
border-bottom-color: black;
|
||||
}
|
||||
|
||||
.reveal .controls div.down {
|
||||
border-top-color: black;
|
||||
}
|
||||
|
||||
.reveal .controls div.left,
|
||||
.reveal .controls div.left.enabled {
|
||||
border-right-color: #51483d;
|
||||
}
|
||||
|
||||
.reveal .controls div.right,
|
||||
.reveal .controls div.right.enabled {
|
||||
border-left-color: #51483d;
|
||||
}
|
||||
|
||||
.reveal .controls div.up,
|
||||
.reveal .controls div.up.enabled {
|
||||
border-bottom-color: #51483d;
|
||||
}
|
||||
|
||||
.reveal .controls div.down,
|
||||
.reveal .controls div.down.enabled {
|
||||
border-top-color: #51483d;
|
||||
}
|
||||
|
||||
.reveal .controls div.left.enabled:hover {
|
||||
border-right-color: #8b7c69;
|
||||
}
|
||||
|
||||
.reveal .controls div.right.enabled {
|
||||
.reveal .controls div.right.enabled:hover {
|
||||
border-left-color: #8b7c69;
|
||||
}
|
||||
|
||||
.reveal .controls div.up.enabled {
|
||||
.reveal .controls div.up.enabled:hover {
|
||||
border-bottom-color: #8b7c69;
|
||||
}
|
||||
|
||||
.reveal .controls div.down.enabled {
|
||||
.reveal .controls div.down.enabled:hover {
|
||||
border-top-color: #8b7c69;
|
||||
}
|
||||
|
||||
|
|
|
@ -99,35 +99,39 @@ body {
|
|||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls div.left {
|
||||
border-right-color: black;
|
||||
}
|
||||
|
||||
.reveal .controls div.right {
|
||||
border-left-color: black;
|
||||
}
|
||||
|
||||
.reveal .controls div.up {
|
||||
border-bottom-color: black;
|
||||
}
|
||||
|
||||
.reveal .controls div.down {
|
||||
border-top-color: black;
|
||||
}
|
||||
|
||||
.reveal .controls div.left,
|
||||
.reveal .controls div.left.enabled {
|
||||
border-right-color: darkblue;
|
||||
}
|
||||
|
||||
.reveal .controls div.right,
|
||||
.reveal .controls div.right.enabled {
|
||||
border-left-color: darkblue;
|
||||
}
|
||||
|
||||
.reveal .controls div.up,
|
||||
.reveal .controls div.up.enabled {
|
||||
border-bottom-color: darkblue;
|
||||
}
|
||||
|
||||
.reveal .controls div.down,
|
||||
.reveal .controls div.down.enabled {
|
||||
border-top-color: darkblue;
|
||||
}
|
||||
|
||||
.reveal .controls div.left.enabled:hover {
|
||||
border-right-color: #0000f1;
|
||||
}
|
||||
|
||||
.reveal .controls div.right.enabled {
|
||||
.reveal .controls div.right.enabled:hover {
|
||||
border-left-color: #0000f1;
|
||||
}
|
||||
|
||||
.reveal .controls div.up.enabled {
|
||||
.reveal .controls div.up.enabled:hover {
|
||||
border-bottom-color: #0000f1;
|
||||
}
|
||||
|
||||
.reveal .controls div.down.enabled {
|
||||
.reveal .controls div.down.enabled:hover {
|
||||
border-top-color: #0000f1;
|
||||
}
|
||||
|
||||
|
|
|
@ -103,35 +103,39 @@ body {
|
|||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls div.left {
|
||||
border-right-color: #333333;
|
||||
}
|
||||
|
||||
.reveal .controls div.right {
|
||||
border-left-color: #333333;
|
||||
}
|
||||
|
||||
.reveal .controls div.up {
|
||||
border-bottom-color: #333333;
|
||||
}
|
||||
|
||||
.reveal .controls div.down {
|
||||
border-top-color: #333333;
|
||||
}
|
||||
|
||||
.reveal .controls div.left,
|
||||
.reveal .controls div.left.enabled {
|
||||
border-right-color: #3b759e;
|
||||
}
|
||||
|
||||
.reveal .controls div.right,
|
||||
.reveal .controls div.right.enabled {
|
||||
border-left-color: #3b759e;
|
||||
}
|
||||
|
||||
.reveal .controls div.up,
|
||||
.reveal .controls div.up.enabled {
|
||||
border-bottom-color: #3b759e;
|
||||
}
|
||||
|
||||
.reveal .controls div.down,
|
||||
.reveal .controls div.down.enabled {
|
||||
border-top-color: #3b759e;
|
||||
}
|
||||
|
||||
.reveal .controls div.left.enabled:hover {
|
||||
border-right-color: #74a7cb;
|
||||
}
|
||||
|
||||
.reveal .controls div.right.enabled {
|
||||
.reveal .controls div.right.enabled:hover {
|
||||
border-left-color: #74a7cb;
|
||||
}
|
||||
|
||||
.reveal .controls div.up.enabled {
|
||||
.reveal .controls div.up.enabled:hover {
|
||||
border-bottom-color: #74a7cb;
|
||||
}
|
||||
|
||||
.reveal .controls div.down.enabled {
|
||||
.reveal .controls div.down.enabled:hover {
|
||||
border-top-color: #74a7cb;
|
||||
}
|
||||
|
||||
|
|
|
@ -106,35 +106,39 @@ body {
|
|||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
|
||||
.reveal .controls div.left {
|
||||
border-right-color: $mainColor;
|
||||
}
|
||||
|
||||
.reveal .controls div.right {
|
||||
border-left-color: $mainColor;
|
||||
}
|
||||
|
||||
.reveal .controls div.up {
|
||||
border-bottom-color: $mainColor;
|
||||
}
|
||||
|
||||
.reveal .controls div.down {
|
||||
border-top-color: $mainColor;
|
||||
}
|
||||
|
||||
.reveal .controls div.left,
|
||||
.reveal .controls div.left.enabled {
|
||||
border-right-color: $linkColor;
|
||||
}
|
||||
|
||||
.reveal .controls div.right,
|
||||
.reveal .controls div.right.enabled {
|
||||
border-left-color: $linkColor;
|
||||
}
|
||||
|
||||
.reveal .controls div.up,
|
||||
.reveal .controls div.up.enabled {
|
||||
border-bottom-color: $linkColor;
|
||||
}
|
||||
|
||||
.reveal .controls div.down,
|
||||
.reveal .controls div.down.enabled {
|
||||
border-top-color: $linkColor;
|
||||
}
|
||||
|
||||
.reveal .controls div.left.enabled:hover {
|
||||
border-right-color: $linkColorHover;
|
||||
}
|
||||
|
||||
.reveal .controls div.right.enabled {
|
||||
.reveal .controls div.right.enabled:hover {
|
||||
border-left-color: $linkColorHover;
|
||||
}
|
||||
|
||||
.reveal .controls div.up.enabled {
|
||||
.reveal .controls div.up.enabled:hover {
|
||||
border-bottom-color: $linkColorHover;
|
||||
}
|
||||
|
||||
.reveal .controls div.down.enabled {
|
||||
.reveal .controls div.down.enabled:hover {
|
||||
border-top-color: $linkColorHover;
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue