xobs/lca2020-pay-it-forward
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

use borders to generate control arrows (closes #137)

Browse Source
This commit is contained in:
Hakim El Hattab
2012-10-22 23:16:14 -04:00
parent 7f4e5fc6bf
commit aefe981040
8 changed files with 160 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
css/reveal.css
View File

@ -316,8 +316,8 @@ body {
.reveal .controls {
display: none;
position: fixed;
width: 90px;
height: 90px;
width: 110px;
height: 110px;
z-index: 30;
right: 10px;
bottom: 10px;
@ -329,10 +329,17 @@ body {
width: 0;
height: 0;
border: 12px solid transparent;
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
-ms-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
.reveal .controls div.enabled {
opacity: 0.6;
cursor: pointer;
}
.reveal .controls div.enabled:active {
@ -340,28 +347,32 @@ body {
}
.reveal .controls div.left {
top: 30px;
top: 42px;
border-right-width: 22px;
border-right-color: #eee;
}
.reveal .controls div.right {
left: 60px;
top: 30px;
left: 74px;
top: 42px;
border-left-width: 22px;
border-left-color: #eee;
}
.reveal .controls div.up {
left: 30px;
left: 42px;
border-bottom-width: 22px;
border-bottom-color: #eee;
}
.reveal .controls div.down {
left: 30px;
top: 60px;
left: 42px;
top: 74px;
border-top-width: 22px;
border-top-color: #eee;
}

42
css/theme/beige.css
View File

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

42
css/theme/default.css
View File

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

42
css/theme/serif.css
View File

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

42
css/theme/simple.css
View File

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

42
css/theme/sky.css
View File

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

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

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