mbkbucket 1.2.0 → 1.3.0

package/public/{css/bucketadmin.css → bucketadmin.css}

@@ -43,12 +43,54 @@
     padding: 1rem;
 }
 
+/* Collapsible Upload Section */
+.upload-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.collapse-btn {
+    background: none;
+    border: none;
+    color: white;
+    padding: 0.5rem;
+    border-radius: 4px;
+    transition: all 0.3s ease;
+    cursor: pointer;
+}
+
+.collapse-btn:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.collapse-btn i {
+    transition: transform 0.3s ease;
+}
+
+.collapse-btn.expanded i {
+    transform: rotate(180deg);
+}
+
+.collapsible-content {
+    padding: 0rem !important;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease-out;
+}
+
+.collapsible-content.expanded {
+    padding: 1rem !important;
+    max-height: 2000px;
+    transition: max-height 0.3s ease-in;
+}
+
 /* File Stats Card - Welcome Style */
 .file-stats {
     background: linear-gradient(135deg, var(--primary-color-ml) 0%, var(--primary-dark-color-ml) 100%);
     color: white;
     border: none;
-    margin-bottom: 2rem;
+    margin-bottom: 1rem;
 }
 
 .stats-content {
@@ -121,6 +163,57 @@
     gap: 0.5rem;
 }
 
+/* Upload Drop Zone */
+.upload-drop-zone {
+    border: 2px dashed var(--gray-color-ml);
+    border-radius: var(--border-radius-lg-ml);
+    background-color: #f8fafc;
+    min-height: 160px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    text-align: center;
+    transition: all 0.2s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.upload-drop-zone:hover,
+.upload-drop-zone.dragover {
+    border-color: var(--primary-color-ml);
+    background-color: #f0fdfa;
+}
+
+.drop-zone-content {
+    pointer-events: none;
+    padding: 2rem;
+}
+
+.drop-zone-content i {
+    font-size: 3rem;
+    color: var(--primary-color-ml);
+    margin-bottom: 1rem;
+    opacity: 0.8;
+    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.upload-drop-zone:hover .drop-zone-content i {
+    opacity: 1;
+}
+
+.drop-text {
+    font-weight: 600;
+    font-size: 1.1rem;
+    color: var(--dark-color-ml);
+    margin-bottom: 0.5rem;
+}
+
+.drop-hint {
+    font-size: 0.85rem;
+    color: var(--gray-color-ml);
+}
+
 /* Button styling - Modern hover effects */
 .btn {
     background: var(--primary-color-ml);
@@ -347,64 +440,74 @@
 /* Table styling - Modern clean design */
 .table-responsive {
     overflow-x: auto;
-    box-shadow: inset 0 0 0 1px var(--gray-light-color-ml);
+    border-radius: var(--border-radius-lg-ml);
+    box-shadow: none;
 }
 
 .table {
     width: 100%;
     margin-bottom: 0;
     background: white;
-    border-collapse: collapse;
+    border-collapse: separate;
+    border-spacing: 0;
 }
 
 .table thead {
-    background: linear-gradient(135deg, var(--dark-color-ml) 0%, #2d3748 100%);
-    color: white;
+    background: var(--light-color-ml);
+    color: var(--dark-color-ml);
+    position: sticky;
+    top: 0;
+    z-index: 10;
 }
 
 .table th,
 .table td {
-    padding: 0.5rem 0.75rem;
+    padding: 0.5rem 1.25rem;
     vertical-align: middle;
     border-bottom: 1px solid var(--gray-light-color-ml);
-    font-size: 0.9rem;
+    font-size: 0.95rem;
 }
 
 .table th {
-    font-weight: 600;
-    text-transform: uppercase;
-    font-size: 0.75rem;
-    letter-spacing: 0.05em;
+    font-weight: 700;
+    text-transform: none;
+    font-size: 0.85rem;
+    letter-spacing: 0.02em;
+    color: var(--text-muted-color-ml);
+    border-bottom: 2px solid var(--gray-light-color-ml);
 }
 
 .table tbody tr {
-    transition: all 0.2s ease;
+    transition: background-color 0.2s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
     position: relative;
+    background-color: white;
 }
 
 .table tbody tr:hover {
-    background: linear-gradient(90deg, rgba(13, 148, 136, 0.03) 0%, transparent 100%);
+    background-color: var(--light-color-ml);
 }
 
 .file-row {
     border-left: 3px solid transparent;
-    transition: all 0.2s ease;
 }
 
 .file-row:hover {
     border-left-color: var(--primary-color-ml);
-    background: linear-gradient(90deg, rgba(13, 148, 136, 0.05) 0%, transparent 100%);
+    background-color: #f0fdfa;
+    /* Very light teal */
+    z-index: 1;
 }
 
 .folder-row {
     border-left: 3px solid transparent;
-    transition: all 0.2s ease;
     cursor: pointer;
 }
 
 .folder-row:hover {
     border-left-color: #f59e0b;
-    background: linear-gradient(90deg, rgba(245, 158, 11, 0.05) 0%, transparent 100%);
+    background-color: #fffbeb;
+    /* Very light amber */
+    z-index: 1;
 }
 
 .folder-row .file-icon {
@@ -414,12 +517,11 @@
 }
 
 .folder-row:hover .file-icon {
-    transform: scale(1.1);
     box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
 }
 
 .breadcrumb-nav {
-    padding: 1rem 1.5rem;
+    padding: 0.5rem 1.5rem;
     background: linear-gradient(135deg, var(--light-color-ml) 0%, #f9fafb 100%);
     border-bottom: 1px solid var(--gray-light-color-ml);
     display: flex;
@@ -459,8 +561,8 @@
 }
 
 .file-icon {
-    width: 52px;
-    height: 52px;
+    width: 40px;
+    height: 40px;
     background: linear-gradient(135deg, var(--primary-light-color-ml) 0%, rgba(13, 148, 136, 0.08) 100%);
     border-radius: 10px;
     display: flex;
@@ -474,7 +576,6 @@
 }
 
 .file-row:hover .file-icon {
-    transform: scale(1.1);
     box-shadow: 0 2px 8px rgba(13, 148, 136, 0.2);
 }
 
@@ -609,7 +710,7 @@
 }
 
 .empty-state i {
-    font-size: 5rem;
+    font-size: 1.5rem;
     margin-bottom: 1.5rem;
     opacity: 0.3;
     background: linear-gradient(135deg, var(--primary-color-ml), var(--primary-dark-color-ml));
@@ -618,6 +719,12 @@
     background-clip: text;
 }
 
+.fa-add:before,
+.fa-plus:before {
+    color: #fff !important;
+    align-items: center;
+}
+
 .empty-state h4 {
     color: var(--dark-color-ml);
     margin-bottom: 0.75rem;
@@ -1012,39 +1119,57 @@
     align-items: center;
 }
 
-/* Skeleton loaders */
+/* Skeleton loaders - tuned grid to equalize column spacing visually */
 .skeleton-row {
-    display: flex;
+    display: grid;
+    grid-template-columns: 48px minmax(120px, 1fr) minmax(120px, 1fr) minmax(120px, 240px); /* icon + 3 columns with balanced min widths */
     gap: 1rem;
     padding: 1rem;
+    align-items: center;
+    justify-items: stretch; /* make cells span their tracks evenly */
 }
 
+/* make skeleton boxes flexible and responsive */
 .skeleton-box {
     background: linear-gradient(90deg, #f5f7fa, #eef2f6);
     border-radius: 6px;
-}
-
-.skeleton-box.s-80 {
-    width: 80px;
     height: 16px;
+    width: 100%;
+    min-width: 0;
+    justify-self: stretch;
 }
 
-.skeleton-box.s-200 {
-    width: 200px;
-    height: 16px;
-}
+/* semantic size hints (max widths) and alignment to ensure visual balance */
+.skeleton-box.s-40 { max-width: 48px; justify-self: start; }
+.skeleton-box.s-80 { max-width: 160px; justify-self: center; }
+.skeleton-box.s-200 { max-width: 220px; justify-self: end; }
 
-.skeleton-box.s-40 {
+.skeleton-row .file-icon {
     width: 40px;
-    height: 16px;
+    height: 40px;
+    border-radius: 8px;
 }
 
-.skeleton-row .file-icon {
-    width: 44px;
-    height: 44px;
-    border-radius: 8px;
+/* Responsive adjustments */
+@media (max-width: 992px) {
+    .skeleton-row {
+        grid-template-columns: 40px minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 200px);
+        gap: 0.9rem;
+    }
+    .skeleton-box.s-200 { max-width: 180px; }
+}
+
+@media (max-width: 768px) {
+    .skeleton-row {
+        grid-template-columns: 40px 1fr 1fr 1fr;
+        gap: 0.75rem;
+    }
+    .skeleton-box.s-80 { justify-self: start; }
+    .skeleton-box.s-200 { max-width: 140px; justify-self: end; }
 }
 
+
+
 .btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
@@ -1122,12 +1247,21 @@
     }
 
     .stats-content {
-        flex-direction: column;
-        text-align: center;
+        gap: 0.75rem;
     }
 
     .stats-icon {
-        margin: 0 auto;
+        width: 50px;
+        height: 50px;
+        font-size: 1.3rem;
+    }
+
+    .stats-text h2 {
+        font-size: 1.3rem;
+    }
+
+    .stats-text p {
+        font-size: 0.85rem;
     }
 
     .filter-form {
@@ -1144,8 +1278,23 @@
         padding: 1rem;
     }
 
+    .stats-content {
+        gap: 0.5rem;
+    }
+
+    .stats-icon {
+        width: 40px;
+        height: 40px;
+        font-size: 1.2rem;
+    }
+
     .stats-text h2 {
-        font-size: 1.35rem;
+        font-size: 1.2rem;
+    }
+
+    .stats-text p {
+        font-size: 0.8rem;
+        margin: 0.25rem 0 0;
     }
 
     .btn-group {
@@ -1195,8 +1344,8 @@
     }
 
     .file-row td:nth-child(2) .file-icon {
-        width: 56px;
-        height: 56px;
+        width: 40px;
+        height: 40px;
         font-size: 1.25rem;
         border-radius: 10px;
     }
@@ -1298,8 +1447,8 @@
 
     /* Make folder icon and name more prominent on mobile */
     .folder-row .file-icon {
-        width: 48px;
-        height: 48px;
+        width: 40px;
+        height: 40px;
         font-size: 1.2rem;
         margin-right: 0.75rem;
     }
@@ -1324,8 +1473,8 @@
     }
 
     .file-icon {
-        width: 48px;
-        height: 48px;
+        width: 40px;
+        height: 40px;
         font-size: 1.2rem;
         margin-right: 0.85rem;
     }
@@ -1355,7 +1504,7 @@
     }
 
     .breadcrumb-nav {
-        padding: 0.85rem 1rem;
+        padding: 0.5rem 1rem;
         font-size: 0.85rem;
     }
 
@@ -1379,7 +1528,7 @@
     }
 
     .empty-state i {
-        font-size: 4rem;
+        font-size: 1.5rem;
     }
 
     .modal-dialog {
@@ -1410,4 +1559,75 @@
     .file-stats .stats-text p {
         font-size: 0.85rem;
     }
+}
+
+.dtm {
+    display: none;
+}
+
+/* Additional utility classes for removing inline styles */
+.file-list-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.search-inline {
+    flex: 1;
+    max-width: 640px;
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    justify-content: center;
+}
+
+.view-btn-left {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.view-btn-right {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.pagination-container {
+    display: none;
+    padding: 1rem;
+    border-top: 1px solid var(--gray-light-color-ml);
+    background: var(--light-color-ml);
+}
+
+.modal-body-text-style {
+    color: var(--gray-color-ml);
+    margin-bottom: 0;
+}
+
+.modal-body-text-top {
+    color: var(--gray-color-ml);
+    margin-top: 0.5rem;
+    margin-bottom: 0;
+}
+
+.modal-header-spacing {
+    margin-top: 0.5rem;
+    color: var(--gray-color-ml);
+}
+
+.toast-container {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 1050;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+@media (max-width: 768px) {
+    .dtm {
+        display: block;
+    }
 }