gallery.css in servel-0.22.0

- old
+ new

@@ -1,10 +1,21 @@
 #gallery {
   background: #333;
   display: none;
+  flex-direction: column;
+}
+
+body.has-gallery.gallery #gallery {
+  display: flex;
+}
+
+#content {
+  display: flex;
   align-items: center;
   justify-content: center;
+  flex-grow: 1;
+  padding-top: 75px;
 }
 
 #image, #video, #audio, #text {
   display: none;
   max-width: 100%;
@@ -22,14 +33,10 @@
 #text {
   color: #000000;
   background-color: #ffffff;
 }
 
-#gallery.video, #gallery.audio, #gallery.text {
-  padding: 0 100px;
-}
-
 #gallery.video #video {
   display: block;
 }
 
 #gallery.image #image {
@@ -44,156 +51,58 @@
   display: block;
 }
 
 #controls {
   position: fixed;
-  top: 0;
-  right: 0;
   left: 0;
-  pointer-events: none;
+  right: 0;
+  display: flex;
 }
 
 .paginator {
-  position: absolute;
-  width: 100px;
-  opacity: 0;
-  font-size: 20px;
-  font-weight: bold;
-  text-align: center;
-  color: #ffffff;
-
   display: flex;
   align-items: center;
   justify-content: center;
-  pointer-events: auto;
-}
+  width: 100px;
+  height: 75px;
 
-.paginator:active {
+  font-size: 2em;
+  font-weight: bold;
+  text-align: center;
   background-color: #000000;
-  opacity: 0.7;
-}
+  color: #ffffff;
 
-#page-back {
-  top: 0;
-  bottom: 100px;
-  left: 0;
+  opacity: 0.4;
+  cursor: pointer;
 }
 
-#page-next {
-  top: 0;
-  bottom: 100px;
-  right: 0;
-}
-
-#page-back-10 {
-  bottom: 0;
-  left: 0;
-  height: 100px;
-}
-
-#page-next-10 {
-  bottom: 0;
-  right: 0;
-  height: 100px;
-}
-
 #page-jump-listing {
-  right: 100px;
-  bottom: 0;
-  left: 100px;
-  height: 100px;
+  flex-grow: 1;
   width: auto;
 }
 
-#page-max-item {
-  top: 0;
-  left: 100px;
-  height: 100px;
-}
-
 @media screen and (max-width: 767px) {
   #gallery.video, #gallery.audio, #gallery.text {
     padding: 0;
   }
 
-  #page-back-10 {
-    top: 0;
-    bottom: auto;
-    left: 120px;
-    height: 75px;
-    width: 100px;
+  .paginator {
+    width: 75px;
+    font-size: 20px;
   }
-
-  #page-next-10 {
-    top: 0;
-    right: 120px;
-    bottom: auto;
-    height: 75px;
-    width: 100px;
-  }
-
-  #page-back {
-    bottom: auto;
-    height: 75px;
-    width: 100px;
-  }
-
-  #page-next {
-    bottom: auto;
-    height: 75px;
-    width: 100px;
-  }
-
-  #page-jump-listing {
-    top: 0;
-    right: 220px;
-    bottom: auto;
-    left: 220px;
-    height: 75px;
-  }
-
-  #page-max-item {
-    top: 75px;
-    left: 0;
-    height: 75px;
-  }
 }
 
 @media screen and (max-width: 479px) {
   #page-back-10 {
-    left: 80px;
-    width: 75px;
+    display: none;
   }
 
   #page-next-10 {
-    right: 80px;
-    width: 75px;
+    display: none;
   }
-
-  #page-back {
-    width: 75px;
-  }
-
-  #page-next {
-    width: 75px;
-  }
-
-  #page-jump-listing {
-    top: auto;
-    right: auto;
-    bottom: 0;
-    left: 0;
-    width: 75px;
-  }
-
-  #page-max-item {
-    width: 75px;
-  }
 }
 
 @media screen and (min-width: 768px) {
   .paginator:hover {
-    background-color: #000000;
-    opacity: 0.4;
-    cursor: pointer;
+    opacity: 0.7;
   }
 }
\ No newline at end of file