use d3.js enter/exit; don't reload the whole page, just the part that is needed
[photo-tags.git] / style.css
index 75bea143862d0cdc567de9554415ac51aad6ae41..bf9e003c3aee411a1ad63609a64ffc7bc027f2cf 100644 (file)
--- a/style.css
+++ b/style.css
@@ -35,6 +35,12 @@ nav {
   height: 100px;
 }
 
+img.current {
+    position:relative;
+    top:1px;
+    border: 1px solid white;
+}
+
 .pics img.large{
   border: 1px solid white;
   margin: 2px;
@@ -54,9 +60,54 @@ footer {
 
 .debug { position: absolute; top:0; left:0}
 
+button.currentpage {
+   background-color: #aaa;
+}
+
 .nextprev ul li {
     display:inline;
 }
 .nextprev ul li img {
-    padding-right: 5px;
-}
\ No newline at end of file
+    margin-right: 5px;
+}
+
+.singlepic {
+    position: relative;
+    display: inline-block;
+}
+
+.singlepic:hover .left, .singlepic:hover .right {
+    display: inline-block;
+    opacity: 0.6;
+}
+
+.singlepic .left img, .singlepic .right img {
+    position: absolute;
+    top: 50%;
+    width: 50px;
+    height: 50px;
+    margin-top: -25px;
+    border: 0px solid white;
+}
+
+.singlepic .left, .singlepic .right {
+    display: none;
+    height: 500px;
+    width: 50px;
+    z-index:2;
+    opacity: 0.0;
+}
+.singlepic .left {
+    position: absolute;
+    left: 3px;
+    top: 3px;
+}
+.singlepic .right {
+    position: relative;
+    left: -56px;
+    top: -3px;
+}
+
+.singlepic .left:hover, .singlepic .right:hover {
+    opacity: 0.95;
+}