init

user/plugins/admin/themes/grav/scss/template/_media.scss

@@ -0,0 +1,331 @@
+/* Media */
+$dark-text: #333;
+
+.pages-list-container {
+    width: 30%;
+    flex: none!important;
+    padding: 0!important;
+
+    .pages-list {
+        width: 100%;
+
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &.depth-0 .row {
+            padding-left: .5rem;
+        }
+
+        .depth-1 .row {
+            padding-left: 1rem;
+        }
+
+        .page-item {
+            .page-link {
+                cursor: pointer;
+            }
+        }
+
+        .row.active {
+            background-color: rgba(#00a6cf, 0.1);
+        }
+    }
+}
+
+.media-page-dropzone {
+    width: 100%;
+    margin-bottom: 20px;
+}
+
+.media-container {
+    &.size-2-3 {
+        flex: none!important;
+        width: 70%;
+    }
+
+
+    .filters {
+        padding-bottom: 30px;
+        width: 100%;
+
+
+        .filter-wrapper {
+            margin-left: 10px;
+            margin-right: 10px;
+
+            &:after {
+                margin-top: -25px;
+                border: 0px none;
+                content: "\f078";
+                font-family: "FontAwesome";
+                right: 12px;
+                top: 50%;
+                line-height: 0;
+                color: #9BA2A6;
+                pointer-events: none;
+                float: right;
+                padding-right: 10px;
+            }
+        }
+
+        .filter {
+            option {
+                padding: 8px;
+            }
+        }
+    }
+
+    .files {
+        padding-left: 30px;
+        padding-right: 30px;
+
+    }
+
+    .admin-media-title {
+
+        color: $dark-text;
+        margin: 0px;
+        font-size: .8rem;
+        line-height: 1.3;
+
+    }
+
+    .card-item {
+        width: 49%;
+
+        &.empty-space {
+
+            background: rgba(255,255,255,0.4);
+            border: 1px solid rgba(0,0,0,0.1) !important;
+
+            color: rgba(0,0,0,0.3);
+
+            max-width: none;
+            display: block;
+            text-align: center;
+
+            top: 20%;
+            height: 10rem !important;
+            width: 50% !important;
+            margin: 0 auto !important;
+            font-size: 2rem;
+            line-height: 8rem;
+            transform: translateY(-50%);
+
+
+        }
+    }
+
+    .media-details {
+        text-align: center;
+        img {
+            width: 50%;
+        }
+        h2 {
+            margin: 0;
+            font-size: 1.8rem;
+        }
+        h5 {
+            color: #9BA2A6;
+            font-size: 1.1rem;
+            margin: 0;
+        }
+    }
+
+
+    h1 {
+        padding: 0 2rem 0.5rem!important;
+    }
+
+    .admin-form-wrapper {
+        width: 100%;
+        padding-bottom: 20px;
+    }
+}
+
+.spinning-wheel {
+    text-align: center;
+}
+
+/* Media in-page modal */
+
+.media-container.in-modal {
+    h1 {
+        font-size: 30px!important;
+        margin-top: 0px;
+    }
+
+    a {
+        color: #333;
+    }
+
+    .pages-list li {
+        list-style-type: none;
+        margin-left: 0;
+    }
+}
+
+//Mediapicker field
+.remodal.remodal-mediapicker {
+  max-width: 70vw;
+  padding: 0;
+}
+
+.media-container {
+  height: 70vh;
+
+
+  .grid {
+    justify-content: flex-start;
+  }
+
+
+  &.in-modal {
+
+      .gm-scrollbar {
+          background: rgba(255,255,255,0.2);
+
+          .thumb {
+              background-color: rgba(0,0,0,0.2) !important;
+              &:hover, &.active {
+                  background-color: rgba(0,0,0,0.3) !important;
+              }
+          }
+      }
+  }
+
+  h5 {
+    border-bottom: 1px solid #ddd;
+    padding: 0.5rem 15px;
+    margin: 0;
+    height: 55px;
+  }
+
+  .filter-wrapper {
+    float: right;
+    margin-right: 5px;
+    margin-top: 10px;
+  }
+
+  .filter-date {
+    width: 150px;
+
+  }
+
+  .filter-type {
+    width: 100px;
+    margin-right: 15px;
+  }
+
+  .pages-list-container {
+    position: relative;
+
+    .pages-list {
+      border-top: 0;
+      padding-right: 10px;
+      font-size: 90%;
+
+      .row {
+        transition: none !important;
+        line-height: 2rem;
+      }
+
+      @for $i from 1 to 10 {
+        .depth-#{$i} .row {
+          padding-left: 1rem * ($i + 1);
+        }
+
+      }
+
+    }
+
+    .mediapicker-scroll {
+      position: absolute;
+      top: 55px;
+      bottom: 3px;
+      height: inherit;
+    }
+  }
+
+  .thumbs-list-container {
+    position: relative;
+
+    .media-range {
+        position: absolute;
+        right: 15px;
+        bottom: 5px;
+    }
+
+    .mediapicker-scroll {
+      position: absolute;
+      top: 55px;
+      bottom: 30px;
+      height: inherit;
+    }
+
+      .gm-scrollbar.-horizontal {
+          display: none;
+      }
+
+  }
+
+
+  #admin-media {
+
+    padding: 15px;
+    height: 100%;
+
+    align-items: flex-start;
+    align-content: flex-start;
+
+    .card-item {
+      width: 100px;
+      padding: 2px;
+      margin: 0 5px 5px 0;
+      border: 0;
+
+      img {
+        display: block;
+      }
+    }
+
+    .admin-media-details {
+      position: relative;
+
+      .admin-media-title {
+        position: absolute;
+        width: 100%;
+        bottom: 0;
+        background: rgba(0,0,0,0.3);
+        color: #fff;
+        font-size: 10px;
+        overflow: hidden;
+        line-height: 2;
+        text-indent: 2px;
+        white-space: nowrap;
+      }
+    }
+  }
+}
+
+[data-remodal-id="metadata"] {
+    h1 > * {
+        vertical-align: middle;
+    }
+    h1 strong {
+        @include ellipsis(75%);
+    }
+    .metadata-preview {
+        display: flex;
+        margin: 0 3rem;
+
+        .meta-preview {
+            max-width: 200px;
+        }
+
+        .meta-content ul {
+            margin: 0;
+        }
+    }
+}