mbkbucket 1.5.1 → 2.0.0

package/public/bucketadmin.css

@@ -48,6 +48,12 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    cursor: pointer;
+    transition: background 0.25s ease, box-shadow 0.25s ease;
+}
+
+.upload-card-header:hover {
+    background: linear-gradient(122deg, #064c47 0%, #0b6b64 52%, #0f7e75 100%);
 }
 
 .collapse-btn {
@@ -73,16 +79,53 @@
 }
 
 .collapsible-content {
-    padding: 0rem !important;
+    padding: 0 !important;
     max-height: 0;
     overflow: hidden;
-    transition: max-height 0.3s ease-out;
+    opacity: 0;
+    transform: translateY(-10px);
+    border-top: 1px solid transparent;
+    background: linear-gradient(180deg, rgba(247, 255, 252, 0.45) 0%, rgba(238, 250, 246, 0.72) 100%);
+    transition:
+        max-height 0.34s ease,
+        opacity 0.25s ease,
+        transform 0.3s ease,
+        padding 0.24s ease,
+        border-color 0.24s ease;
 }
 
 .collapsible-content.expanded {
-    padding: 1rem !important;
+    padding: 1.15rem !important;
     max-height: 2000px;
-    transition: max-height 0.3s ease-in;
+    opacity: 1;
+    transform: translateY(0);
+    border-top-color: rgba(11, 107, 100, 0.22);
+}
+
+.dashboard-card.upload-panel-open {
+    box-shadow: 0 22px 42px rgba(7, 54, 51, 0.22);
+    border-color: rgba(11, 107, 100, 0.3);
+}
+
+.dashboard-card.upload-panel-open .upload-card-header {
+    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.14);
+}
+
+.dashboard-card.upload-panel-open .card-title {
+    letter-spacing: 0.015em;
+}
+
+.dashboard-card.upload-panel-open .card-icon {
+    background: rgba(255, 255, 255, 0.34);
+    border: 1px solid rgba(255, 255, 255, 0.4);
+}
+
+.dashboard-card.upload-panel-open .form-label {
+    color: #12413d;
+}
+
+.dashboard-card.upload-panel-open .form-text {
+    color: #245651;
 }
 
 /* File Stats Card - Welcome Style */
@@ -133,6 +176,120 @@
     letter-spacing: 0.02em;
 }
 
+.bucket-switcher-wrap {
+    margin-left: auto;
+}
+
+.bucket-switcher {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    min-width: 230px;
+}
+
+.bucket-switcher-label {
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 0.76rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+}
+
+.bucket-switcher-control {
+    position: relative;
+    display: flex;
+    align-items: center;
+    background: rgba(255, 255, 255, 0.18);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 0.65rem;
+    padding-left: 0.6rem;
+    transition: var(--transition-fast-ml);
+}
+
+.bucket-switcher-control:focus-within {
+    background: rgba(255, 255, 255, 0.26);
+    border-color: rgba(255, 255, 255, 0.9);
+    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
+}
+
+.bucket-switcher-icon {
+    color: rgba(255, 255, 255, 0.9);
+    margin-right: 0.5rem;
+}
+
+.bucket-switcher-select {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background: transparent;
+    border: none;
+    color: #ffffff;
+    font-weight: 600;
+    padding: 0.5rem 2rem 0.5rem 0;
+    min-width: 180px;
+    box-shadow: none;
+}
+
+.bucket-switcher-select:focus {
+    box-shadow: none;
+    outline: none;
+}
+
+.bucket-switcher-select option {
+    color: var(--dark-color-ml);
+}
+
+.bucket-switcher-caret {
+    position: absolute;
+    right: 0.65rem;
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 0.8rem;
+    pointer-events: none;
+}
+
+.bucket-switcher-select:disabled {
+    opacity: 0.75;
+    cursor: not-allowed;
+}
+
+.bucket-switcher-status {
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 0.72rem;
+    letter-spacing: 0.02em;
+}
+
+.quick-filter-group {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+    flex-wrap: wrap;
+}
+
+.quick-filter-btn {
+    background: rgba(255, 255, 255, 0.08);
+    color: #ffffff;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 999px;
+    padding: 0.36rem 0.72rem;
+    font-size: 0.78rem;
+    line-height: 1;
+    min-height: 30px;
+}
+
+.quick-filter-btn:hover {
+    background: rgba(255, 255, 255, 0.16);
+    color: #ffffff;
+    border-color: rgba(255, 255, 255, 0.5);
+    box-shadow: none;
+}
+
+.quick-filter-btn.active {
+    background: #ffffff;
+    color: var(--primary-color-ml);
+    border-color: #ffffff;
+    font-weight: 700;
+}
+
 /* Form styling - Modern approach */
 .form-control {
     border: 1px solid var(--gray-light-color-ml);
@@ -144,6 +301,34 @@
     background: white;
 }
 
+@media (max-width: 768px) {
+    .stats-content {
+        align-items: flex-start;
+        flex-wrap: wrap;
+    }
+
+    .bucket-switcher-wrap {
+        width: 100%;
+        margin-left: 0;
+    }
+
+    .bucket-switcher {
+        width: 100%;
+        max-width: 100%;
+    }
+
+    .bucket-switcher-select {
+        width: 100%;
+        min-width: 0;
+    }
+
+    .quick-filter-group {
+        width: 100%;
+        justify-content: flex-start;
+        margin-top: 0.35rem;
+    }
+}
+
 .form-control:focus {
     border-color: var(--primary-color-ml);
     box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1);
@@ -821,6 +1006,24 @@
     background: var(--light-color-ml);
 }
 
+.virtualized-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.75rem 1rem;
+    background: #f8fafc;
+    border-top: 1px solid var(--gray-light-color-ml);
+    color: var(--gray-color-ml);
+    font-size: 0.85rem;
+}
+
+.virtualized-actions {
+    display: inline-flex;
+    gap: 0.5rem;
+    align-items: center;
+}
+
 .toast-close-btn {
     background: none;
     border: none;
@@ -997,8 +1200,9 @@
     color: white;
     padding: 0.5rem;
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     justify-content: space-between;
+    gap: 0.75rem;
 }
 
 .modal-title {
@@ -1008,15 +1212,55 @@
     display: flex;
     align-items: center;
     gap: 0.75rem;
+    flex: 1;
+    min-width: 0;
+    line-height: 1.2;
+}
+
+#previewModal .modal-title i {
+    flex-shrink: 0;
 }
 
 /* Allow preview filename to wrap and break long words */
 #previewModal .modal-title #previewFileName {
     display: inline-block;
-    max-width: calc(100% - 120px);
-    overflow-wrap: anywhere;
-    word-break: break-word;
-    white-space: normal;
+    max-width: 100%;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+#previewModal .preview-header-controls {
+    flex-shrink: 0;
+}
+
+.upload-item-meta-row {
+    min-width: 0;
+}
+
+.upload-file-icon {
+    width: 36px;
+    height: 36px;
+    margin-right: 0.6rem;
+    border-radius: 10px;
+    font-size: 1rem;
+    flex-shrink: 0;
+}
+
+.upload-item-name {
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 600;
+}
+
+@media (max-width: 768px) {
+    #previewModal .modal-title {
+        font-size: 1.05rem;
+    }
 }
 
 .modal-body {
@@ -1135,6 +1379,13 @@
     box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
+@media (max-width: 768px) {
+    .virtualized-info {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+}
+
 .progress-bar {
     height: 100%;
     background: linear-gradient(135deg, var(--primary-color-ml) 0%, var(--success-color-ml) 100%);
@@ -1234,11 +1485,13 @@
 /* Skeleton loaders - tuned grid to equalize column spacing visually */
 .skeleton-row {
     display: grid;
-    grid-template-columns: 48px minmax(120px, 1fr) minmax(120px, 1fr) minmax(120px, 240px); /* icon + 3 columns with balanced min widths */
+    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 */
+    justify-items: stretch;
+    /* make cells span their tracks evenly */
 }
 
 /* make skeleton boxes flexible and responsive */
@@ -1252,9 +1505,20 @@
 }
 
 /* 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 {
+    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-row .file-icon {
     width: 40px;
@@ -1268,7 +1532,10 @@
         grid-template-columns: 40px minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 200px);
         gap: 0.9rem;
     }
-    .skeleton-box.s-200 { max-width: 180px; }
+
+    .skeleton-box.s-200 {
+        max-width: 180px;
+    }
 }
 
 @media (max-width: 768px) {
@@ -1276,8 +1543,15 @@
         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; }
+
+    .skeleton-box.s-80 {
+        justify-self: start;
+    }
+
+    .skeleton-box.s-200 {
+        max-width: 140px;
+        justify-self: end;
+    }
 }
 
 
@@ -1326,6 +1600,162 @@
     transform: none;
 }
 
+/* v2 Visual System */
+:root {
+    --v2-accent: #0b6b64;
+    --v2-accent-strong: #084f4a;
+    --v2-highlight: #0ea5a0;
+    --v2-surface: #f4fcf9;
+    --v2-border: rgba(11, 107, 100, 0.28);
+}
+
+.content-area {
+    animation: v2FadeIn 0.45s ease;
+}
+
+.dashboard-card {
+    background: linear-gradient(180deg, #f7fffc 0%, #eefaf6 100%);
+    border: 1px solid rgba(11, 107, 100, 0.2);
+    box-shadow: 0 16px 30px rgba(7, 54, 51, 0.12);
+}
+
+.dashboard-card:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 18px 36px rgba(7, 54, 51, 0.2);
+}
+
+.card-header {
+    background: linear-gradient(122deg, #07544e 0%, #0b6b64 52%, #0f7e75 100%);
+}
+
+.card-title {
+    letter-spacing: 0.01em;
+}
+
+.card-icon {
+    background: rgba(255, 255, 255, 0.23);
+    border: 1px solid rgba(255, 255, 255, 0.35);
+}
+
+.file-stats {
+    background:
+        linear-gradient(132deg, #064640 0%, #0a5b54 46%, #0d6b63 100%);
+}
+
+.bucket-switcher-control {
+    background: rgba(255, 255, 255, 0.24);
+}
+
+.bucket-switcher-select {
+    font-size: 0.85rem;
+}
+
+.upload-drop-zone {
+    background:
+        linear-gradient(145deg, rgba(219, 247, 241, 0.9), rgba(226, 244, 241, 0.82));
+    border-color: rgba(11, 107, 100, 0.55);
+}
+
+.upload-drop-zone:hover,
+.upload-drop-zone.dragover {
+    border-color: var(--v2-highlight);
+    background:
+        linear-gradient(145deg, rgba(201, 244, 236, 0.95), rgba(224, 249, 242, 0.86));
+}
+
+.btn {
+    border-radius: 0.65rem;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, var(--v2-accent), var(--v2-accent-strong));
+}
+
+.btn-primary:hover {
+    background: linear-gradient(135deg, #064640, #073a36);
+}
+
+.btn-outline-secondary {
+    border-color: #9ca3af;
+    color: #1f2937;
+}
+
+.table thead {
+    background: linear-gradient(180deg, rgba(225, 242, 238, 0.95), rgba(210, 236, 230, 0.9));
+}
+
+.table th {
+    color: #23403d;
+}
+
+.file-row:hover {
+    background-color: #ddf2ed;
+}
+
+.folder-row:hover {
+    background-color: #d7efe9;
+}
+
+.search-inline .form-control {
+    border-color: rgba(15, 118, 110, 0.3);
+}
+
+.quick-filter-btn.active {
+    color: #ffffff;
+    background: linear-gradient(135deg, var(--v2-accent), var(--v2-accent-strong));
+    border-color: var(--v2-accent-strong);
+}
+
+.reveal-item {
+    opacity: 0;
+    transform: translateY(14px) scale(0.99);
+    animation: v2Rise 0.48s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
+}
+
+.reveal-delay-1 {
+    animation-delay: 0.05s;
+}
+
+.reveal-delay-2 {
+    animation-delay: 0.12s;
+}
+
+.reveal-delay-3 {
+    animation-delay: 0.2s;
+}
+
+.reveal-delay-4 {
+    animation-delay: 0.28s;
+}
+
+@keyframes v2FadeIn {
+    from {
+        opacity: 0.4;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes v2Rise {
+    from {
+        opacity: 0;
+        transform: translateY(14px) scale(0.99);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+@media (max-width: 768px) {
+    .card-header {
+        padding: 0.8rem;
+    }
+}
+
 .upload-success {
     color: var(--success-color-ml);
     font-weight: 600;