finalize convertion of existing plugins

6 files changed, 86 insertions, 66 deletions

diff --git a/style/plugins/activity-indicator.scss b/style/plugins/activity-indicator.scss
index d5df8c0..6fbc1db 100644
--- a/style/plugins/activity-indicator.scss
+++ b/style/plugins/activity-indicator.scss
@@ -8,7 +8,6 @@ $loadingbox-size: 20px;
 #imagelightbox-loading {
     box-shadow: rgba(0, 0, 0, .75) 0 0 $loadingbox-size*2;
 
-    background: #444; // Fallback
     background: rgba(0, 0, 0, .5);
     height: $loadingbox-size;
     left: 50%;
@@ -45,6 +44,10 @@ $loadingbox-size: 20px;
 }
 
 @keyframes fade-in {
-    0% { opacity: 0; }
-    100% { opacity: 1; }
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
 }
diff --git a/style/plugins/caption.scss b/style/plugins/caption.scss
new file mode 100644
index 0000000..fec2093
--- /dev/null
+++ b/style/plugins/caption.scss
@@ -0,0 +1,22 @@
+#imagelightbox-caption {
+    background-color: #666;
+    bottom: 0;
+    color: #fff;
+    left: 0;
+    padding: 10px;
+    position: fixed;
+    right: 0;
+    text-align: center;
+    z-index: 10001;
+    animation: fade-in .25s linear;
+}
+
+@keyframes fade-in {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
diff --git a/style/plugins/closebutton.scss b/style/plugins/closebutton.scss
index 68b813b..3106e04 100644
--- a/style/plugins/closebutton.scss
+++ b/style/plugins/closebutton.scss
@@ -13,6 +13,7 @@ $closebutton-size: 40px;
     transition: color .3s ease;
     width: $closebutton-size;
     z-index: 10002;
+    cursor: pointer;
 
     &:hover {
         background-color: #111;
@@ -42,8 +43,12 @@ $closebutton-size: 40px;
 }
 
 @keyframes fade-in {
-    0% { opacity: 0; }
-    100% { opacity: 1; }
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
 }
 
 @media only screen and (max-width: 660px) {
diff --git a/style/plugins/navigation.scss b/style/plugins/navigation.scss
new file mode 100644
index 0000000..207d396
--- /dev/null
+++ b/style/plugins/navigation.scss
@@ -0,0 +1,43 @@
+
+#imagelightbox-nav-sink {
+    display: flex;
+    justify-content: center;
+}
+#imagelightbox-nav {
+    border-radius: 20px;
+    animation: fade-in .25s linear;
+
+    background-color: rgba(0, 0, 0, .5);
+    bottom: 60px;
+    padding: 5px 2px 1px;
+    position: fixed;
+    z-index: 10001;
+
+    a {
+        border-radius: 50%;
+        border: 1px solid #fff;
+        display: inline-block;
+        height: 20px;
+        margin: 0 5px;
+        width: 20px;
+    }
+
+    .active {
+        background-color: #fff;
+    }
+}
+
+@media only screen and (max-width: 660px) {
+    #imagelightbox-nav {
+        bottom: 20px;
+    }
+}
+
+@keyframes fade-in {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
diff --git a/style/plugins/overlay.scss b/style/plugins/overlay.scss
index edbc05a..94dc431 100644
--- a/style/plugins/overlay.scss
+++ b/style/plugins/overlay.scss
@@ -1,6 +1,5 @@
 
 #imagelightbox-overlay {
-    background: #fff;
     background: rgba(255, 255, 255, .9);
     bottom: 0;
     left: 0;
@@ -12,6 +11,10 @@
 }
 
 @keyframes fade-in {
-    0% { opacity: 0; }
-    100% { opacity: 1; }
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
 }
diff --git a/style/touch-imagelightbox.scss b/style/touch-imagelightbox.scss
index ec6f006..8cd6df4 100644
--- a/style/touch-imagelightbox.scss
+++ b/style/touch-imagelightbox.scss
@@ -2,6 +2,8 @@
 @import "plugins/activity-indicator";
 @import "plugins/overlay";
 @import "plugins/closebutton";
+@import "plugins/navigation";
+@import "plugins/caption";
 
 @mixin touch-action($value) {
   -ms-touch-action: $value;
@@ -21,61 +23,3 @@ html {
   z-index: 10000;
 }
 
-#imagelightbox-caption {
-  background-color: #666;
-  bottom: 0;
-  color: #fff;
-  left: 0;
-  padding: 10px;
-  position: fixed;
-  right: 0;
-  text-align: center;
-  z-index: 10001;
-}
-
-// The nav bubbles
-#imagelightbox-nav {
-  border-radius: 20px;
-  translateX: -50%;
-
-  background-color: #444;
-  background-color: rgba(0, 0, 0, .5);
-  bottom: 60px; // 60
-  left: 50%;
-  padding: 5px 2px 1px;
-  position: fixed;
-  z-index: 10001;
-
-  a {
-    border-radius: 50%;
-    border: 1px solid #fff;
-    display: inline-block;
-    height: 20px;
-    margin: 0 5px;
-    width: 20px;
-  }
-
-  .active {
-    background-color: #fff;
-  }
-}
-
-#imagelightbox-caption,
-#imagelightbox-nav {
-  -moz-animation: fade-in .25s linear;
-  -o-animation: fade-in .25s linear;
-  -webkit-animation: fade-in .25s linear;
-  animation: fade-in .25s linear;
-}
-
-@keyframes fade-in {
-  0% { opacity: 0; }
-  100% { opacity: 1; }
-}
-
-@media only screen and (max-width: 660px) {
-
-  #imagelightbox-nav {
-    bottom: 20px;
-  }
-}