Styling

ui/v2.5/src/index.scss

@@ -3,6 +3,7 @@
 
 @import "styles/shared/details";
 
+@import "styles/range";
 @import "styles/scrollbars";
 @import "styles/variables";
 
@@ -17,7 +18,6 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   height: 100vh;
-  background: $dark-gray2;
 }
 
 code {
@@ -37,10 +37,6 @@ code {
     margin: 0;
   }
 
-  & .bp3-button.favorite .bp3-icon {
-    color: #ff7373 !important
-  }
-
   & .performer-list-thumbnail {
     min-width: 50px;
     height: 100px;
@@ -55,58 +51,59 @@ code {
     text-align: center;
     vertical-align: middle;
   }
-}
 
-.grid-item {
-  // flex: auto;
-  width: 320px;
-  min-width: 185px;
-  margin: 0px 0 $pt-grid-size $pt-grid-size;
-  overflow: hidden;
+  .card {
+    margin: 0 0 10px 10px;
+    overflow: hidden;
 
-  &.wall {
-    width: calc(20%);
-    margin: 0;
-  }
+    &.zoom-0 {
+      width: 15rem;
 
-  &.zoom-0 {
-    width: 240px;
+      & .previewable {
+        max-height: 11.25rem;
+      }
+      & .previewable.portrait {
+        max-height: 11.25rem;
+      }
+    }
+    &.zoom-1 {
+      width: 20rem;
 
-    & .previewable {
-      max-height: 180px;
+      & .previewable {
+        max-height: 15rem;
+      }
+      & .previewable.portrait {
+        height: 15rem;
+      }
     }
-    & .previewable.portrait {
-      height: 180px;
-    }
-  }
-  &.zoom-1 {
-    width: 320px;
+    &.zoom-2 {
+      width: 30rem;
 
-    & .previewable {
-      max-height: 240px;
+      & .previewable {
+        max-height: 22.5rem;
+      }
+      & .previewable.portrait {
+        height: 22.5rem;
+      }
     }
-    & .previewable.portrait {
-      height: 240px;
-    }
-  }
-  &.zoom-2 {
-    width: 480px;
+    &.zoom-3 {
+      width: 40rem;
 
-    & .previewable {
-      max-height: 360px;
+      & .previewable {
+        max-height: 30rem;
+      }
+      & .previewable.portrait {
+        height: 30rem;
+      }
     }
-    & .previewable.portrait {
-      height: 360px;
-    }
-  }
-  &.zoom-3 {
-    width: 640px;
 
-    & .previewable {
-      max-height: 480px;
-    }
-    & .previewable.portrait {
-      height: 480px;
+    .card-select {
+      position: absolute;
+      padding-left: 15px;
+      margin-top: -12px;
+      z-index: 1;
+      opacity: 0.5;
+      width: 1.2rem;
     }
   }
 }
@@ -125,14 +122,6 @@ code {
   height: 240px;
 }
 
-.grid-item label.card-select {
-  position: absolute;
-  padding-left: 15px;
-  margin-top: -12px;
-  z-index: 9;
-  opacity: 0.5;
-}
-
 .video-container {
   width: 100%;
   height: 100%;
@@ -336,6 +325,7 @@ span.block {
 
 .performer-tag-container {
   margin: 5px;
+  display: inline-block;
 }
 
 .performer-tag.image {
@@ -548,7 +538,7 @@ span.block {
     background-color: #30404d;
     border-radius: 3px;
     box-shadow: 0 0 0 1px rgba(16,22,26,.4), 0 0 0 rgba(16,22,26,0), 0 0 0 rgba(16,22,26,0);
-    padding: 20px;
+    padding: 20px 20px 0px 20px;
 }
 
 .toast-container {