Permalink
Browse files

Added nav arrows

  • Loading branch information...
1 parent d2e405b commit 0660c92cd6d5dd07b38513ae25d7b9b7fde3ca50 @samdunn samdunn committed Aug 12, 2012
View
@@ -50,6 +50,9 @@
<div id="ss-progress"></div>
</div>
+<div id="ss-next"><img src="theme/obsidian/img/btn-next.png"/></div>
+<div id="ss-prev"><img src="theme/obsidian/img/btn-prev.png"/></div>
+
<!-- Control Bar
========================= -->
<div id="ss-control-bar">
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -57,6 +57,34 @@ body {
font: bold 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 50px;
}
+#ss-next,
+#ss-prev {
+ position: absolute;
+ top: 50%;
+ margin-top: -20px;
+ padding: 10px 15px;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ -webkit-transition: all 200ms ease-in-out;
+ -moz-transition: all 200ms ease-in-out;
+ transition: all 200ms ease-in-out;
+}
+#ss-next img,
+#ss-prev img {
+ height: 40px;
+ width: auto;
+}
+#ss-next:hover,
+#ss-prev:hover {
+ background: rgba(0, 0, 0, 0.85);
+}
+#ss-next {
+ right: -5px;
+}
+#ss-prev {
+ left: -5px;
+}
#ss-progress-bar {
position: fixed;
top: 0;
@@ -66,6 +66,33 @@ body{
}
+// BUTTONS
+// --------------------------------------
+#ss-next,
+#ss-prev{
+ position:absolute;
+ top:50%;
+ margin-top:-20px;
+ padding:10px 15px;
+ .border-radius(3px);
+ @transition: all 200ms ease-in-out;
+ .transition(@transition);
+ img{
+ height:40px;
+ width:auto;
+ }
+ &:hover{
+ background:rgba(0,0,0,0.85);
+ }
+}
+#ss-next{
+ right:-5px;
+}
+#ss-prev{
+ left:-5px;
+}
+
+
// PROGRESS BAR
// --------------------------------------
#ss-progress-bar{
@@ -100,4 +127,18 @@ body{
-webkit-transition: @transition;
-moz-transition: @transition;
transition: @transition;
-}
+}
+
+// Border Radius
+.border-radius(@radius: 5px) {
+ -webkit-border-radius: @radius;
+ -moz-border-radius: @radius;
+ border-radius: @radius;
+}
+
+// Drop shadows
+.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
+ -webkit-box-shadow: @shadow;
+ -moz-box-shadow: @shadow;
+ box-shadow: @shadow;
+}

0 comments on commit 0660c92

Please sign in to comment.