Spaces:
Sleeping
Sleeping
| :root { | |
| --font-family: 'Outfit', sans-serif; | |
| --bg: #F8FAFC; | |
| --bg-color: var(--bg); | |
| --card: #FFFFFF; | |
| --panel-bg: var(--card); | |
| --border-color: #E2E8F0; | |
| --text: #0F172A; | |
| --text-main: var(--text); | |
| --muted: #64748B; | |
| --text-muted: var(--muted); | |
| --primary: #10B981; | |
| --primary-color: var(--primary); | |
| --primary-light: #D1FAE5; | |
| --primary-hover: #059669; | |
| --primary-gradient: linear-gradient(90deg, var(--primary-color), #34d399); | |
| --danger-color: #EF4444; | |
| --folder-color: #f59e0b; | |
| --file-color: #F59E0B; | |
| --hover-bg: #F1F5F9; | |
| --accent-color: #F59E0B; | |
| --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.03); | |
| --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06); | |
| --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05); | |
| --shadow-xl: 0 20px 40px -10px rgba(0, 0, 0, 0.15), 0 10px 20px -5px rgba(0, 0, 0, 0.08); | |
| } | |
| /* ── Reset ── */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: var(--font-family); | |
| background-color: var(--bg-color); | |
| color: var(--text-main); | |
| background-image: | |
| radial-gradient(circle at 15% 50%, rgba(16, 185, 129, 0.04), transparent 30%), | |
| radial-gradient(circle at 85% 30%, rgba(59, 130, 246, 0.03), transparent 30%); | |
| min-height: 100vh; | |
| overflow: hidden; | |
| } | |
| .glass-panel { | |
| background: var(--panel-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: 16px; | |
| box-shadow: var(--shadow-md); | |
| } | |
| /* ── LAYOUT ── */ | |
| .app-container { | |
| display: flex; | |
| height: 100vh; | |
| width: 100%; | |
| } | |
| /* ── SIDEBAR ── */ | |
| .sidebar { | |
| width: 270px; | |
| background: #ffffff; | |
| border-right: 1px solid var(--border-color); | |
| display: flex; | |
| flex-direction: column; | |
| padding: 24px; | |
| z-index: 10; | |
| box-shadow: var(--shadow-sm); | |
| flex-shrink: 0; | |
| } | |
| .logo-container { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| margin-bottom: 36px; | |
| } | |
| .logo-icon { | |
| font-size: 32px; | |
| color: var(--primary-color); | |
| } | |
| .logo-text { | |
| font-size: 24px; | |
| font-weight: 700; | |
| letter-spacing: -0.5px; | |
| color: var(--text-main); | |
| } | |
| /* ── "+ New" Button Dropdown ── */ | |
| .new-btn-wrapper { | |
| position: relative; | |
| margin-bottom: 28px; | |
| } | |
| .new-btn { | |
| width: 100%; | |
| padding: 13px; | |
| background: var(--primary-color); | |
| color: white; | |
| border: none; | |
| border-radius: 12px; | |
| font-size: 15px; | |
| font-weight: 600; | |
| font-family: inherit; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25); | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .new-btn:hover { | |
| background: var(--primary-hover); | |
| transform: translateY(-1px); | |
| } | |
| .new-dropdown { | |
| position: absolute; | |
| top: calc(100% + 6px); | |
| left: 0; | |
| right: 0; | |
| background: #ffffff; | |
| border: 1px solid var(--border-color); | |
| border-radius: 12px; | |
| z-index: 200; | |
| box-shadow: var(--shadow-lg); | |
| overflow: hidden; | |
| opacity: 0; | |
| pointer-events: none; | |
| transform: translateY(-8px); | |
| transition: all 0.2s ease; | |
| } | |
| .new-dropdown.active { | |
| opacity: 1; | |
| pointer-events: auto; | |
| transform: translateY(0); | |
| } | |
| .new-dropdown-item { | |
| width: 100%; | |
| padding: 13px 16px; | |
| background: none; | |
| border: none; | |
| color: var(--text-main); | |
| font-family: inherit; | |
| font-size: 14px; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| cursor: pointer; | |
| text-align: left; | |
| transition: background-color 0.15s ease; | |
| } | |
| .new-dropdown-item:hover { | |
| background: var(--hover-bg); | |
| } | |
| .new-dropdown-item i { | |
| font-size: 18px; | |
| } | |
| .new-dropdown-item .ph-folder-plus { | |
| color: var(--primary-color); | |
| } | |
| .new-dropdown-item .ph-upload-simple { | |
| color: var(--file-color); | |
| } | |
| /* ── SIDEBAR NAV ── */ | |
| .sidebar-nav { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| flex-grow: 1; | |
| } | |
| .nav-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 11px 14px; | |
| color: var(--text-muted); | |
| text-decoration: none; | |
| border-radius: 10px; | |
| font-weight: 500; | |
| position: relative; | |
| font-size: 14px; | |
| transition: all 0.15s ease; | |
| } | |
| .nav-item i { | |
| font-size: 20px; | |
| } | |
| .nav-item:hover { | |
| background: var(--hover-bg); | |
| color: var(--text-main); | |
| } | |
| .nav-item.active { | |
| background: var(--primary-light); | |
| color: var(--primary-color); | |
| font-weight: 600; | |
| border-left: 4px solid var(--primary-color); | |
| } | |
| /* ── STORAGE ── */ | |
| .sidebar-bottom { | |
| margin-top: auto; | |
| padding-top: 20px; | |
| border-top: 1px solid var(--border-color); | |
| } | |
| .storage-dashboard { | |
| background: #ffffff; | |
| padding: 16px; | |
| border-radius: 16px; | |
| border: 1px solid var(--border-color); | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.03); | |
| } | |
| .storage-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-weight: 700; | |
| font-size: 14px; | |
| margin-bottom: 12px; | |
| color: var(--text-main); | |
| } | |
| .storage-progress { | |
| height: 8px; | |
| background: #f1f5f9; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| margin-bottom: 10px; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: var(--primary-gradient); | |
| border-radius: 10px; | |
| transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .storage-text { | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| font-weight: 500; | |
| display: block; | |
| text-align: center; | |
| margin-top: 2px; | |
| } | |
| .hf-badge { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| margin-top: 14px; | |
| padding: 9px 14px; | |
| background: var(--hover-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: 10px; | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| font-weight: 500; | |
| } | |
| .hf-emoji { | |
| font-size: 15px; | |
| } | |
| /* ── TOP HEADER ── */ | |
| .main-content { | |
| flex-grow: 1; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| .top-header { | |
| height: 72px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0 40px; | |
| border-bottom: 1px solid var(--border-color); | |
| background: #ffffff; | |
| flex-shrink: 0; | |
| } | |
| /* ── SEARCH BAR ── */ | |
| .search-bar { | |
| display: flex; | |
| align-items: center; | |
| background: #f5f7fa; | |
| border: none; | |
| border-radius: 30px; | |
| padding: 12px 20px; | |
| width: 520px; | |
| transition: all 0.2s ease; | |
| } | |
| .search-bar:focus-within { | |
| background: #ffffff; | |
| box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15); | |
| } | |
| .search-bar i { | |
| color: var(--text-muted); | |
| font-size: 18px; | |
| margin-right: 12px; | |
| flex-shrink: 0; | |
| } | |
| .search-bar input { | |
| background: none; | |
| border: none; | |
| color: var(--text-main); | |
| outline: none; | |
| width: 100%; | |
| font-family: inherit; | |
| font-size: 14px; | |
| } | |
| .search-bar input::placeholder { | |
| color: var(--text-muted); | |
| } | |
| /* ── USER ACTIONS ── */ | |
| .user-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .icon-btn { | |
| background: none; | |
| border: none; | |
| color: var(--text-muted); | |
| font-size: 22px; | |
| cursor: pointer; | |
| padding: 8px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.15s ease; | |
| } | |
| .icon-btn:hover { | |
| background: var(--hover-bg); | |
| color: var(--text-main); | |
| transform: scale(1.05); | |
| } | |
| .icon-btn.active { | |
| color: var(--primary-color); | |
| background: var(--primary-light); | |
| } | |
| .avatar { | |
| width: 38px; | |
| height: 38px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, var(--primary-color), #2dd4bf); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: 700; | |
| font-size: 14px; | |
| cursor: pointer; | |
| color: white; | |
| box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3); | |
| } | |
| /* ── BREADCRUMBS ── */ | |
| .breadcrumbs { | |
| padding: 28px 40px 8px; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 20px; | |
| font-weight: 700; | |
| } | |
| .breadcrumb-item { | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| padding: 4px 8px; | |
| border-radius: 6px; | |
| font-size: 18px; | |
| transition: all 0.15s ease; | |
| } | |
| .breadcrumb-item:hover { | |
| background: var(--hover-bg); | |
| color: var(--primary-color); | |
| } | |
| .breadcrumb-item.active { | |
| color: var(--text-main); | |
| pointer-events: none; | |
| } | |
| .breadcrumb-separator { | |
| color: var(--text-muted); | |
| font-size: 14px; | |
| opacity: 0.5; | |
| } | |
| /* ── CONTENT ── */ | |
| .content-area { | |
| flex-grow: 1; | |
| padding: 0 40px 40px; | |
| overflow-y: auto; | |
| position: relative; | |
| } | |
| .content-area.drag-over::after { | |
| content: 'Drop files here to upload'; | |
| position: fixed; | |
| inset: 0; | |
| border: 4px dashed var(--primary-color); | |
| pointer-events: none; | |
| background: rgba(16, 185, 129, 0.06); | |
| z-index: 500; | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 22px; | |
| font-weight: 700; | |
| color: var(--primary-color); | |
| } | |
| /* ── SECTION HEADERS ── */ | |
| .section-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| padding-top: 12px; | |
| } | |
| .section-header h2 { | |
| font-size: 12px; | |
| font-weight: 700; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .view-toggles { | |
| display: flex; | |
| gap: 4px; | |
| background: var(--hover-bg); | |
| padding: 4px; | |
| border-radius: 10px; | |
| border: 1px solid var(--border-color); | |
| } | |
| .view-toggles .icon-btn { | |
| border-radius: 7px; | |
| padding: 5px 9px; | |
| font-size: 18px; | |
| color: var(--text-muted); | |
| } | |
| .view-toggles .icon-btn.active { | |
| background: #ffffff; | |
| color: var(--primary-color); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .mt-8 { | |
| margin-top: 44px; | |
| } | |
| .grid-container, | |
| .files-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); | |
| gap: 20px; | |
| } | |
| .list-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| padding: 8px 0; | |
| } | |
| /* ── FOLDER CARDS ── */ | |
| .folder-card { | |
| background: var(--card); | |
| border: 1px solid var(--border-color); | |
| border-radius: 16px; | |
| padding: 24px 20px 20px 20px; | |
| position: relative; | |
| cursor: pointer; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| box-shadow: var(--shadow-sm); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 16px; | |
| min-height: 180px; | |
| animation: cardFadeIn 0.4s ease-out forwards; | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| @keyframes cardFadeIn { | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .folder-card:hover { | |
| transform: translateY(-4px) scale(1.02); | |
| box-shadow: var(--shadow-lg); | |
| border-color: var(--primary-color); | |
| } | |
| .folder-card:active { | |
| transform: translateY(-2px) scale(0.98); | |
| transition-duration: 0.1s; | |
| } | |
| .card-top-row { | |
| width: 100%; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| } | |
| .card-menu { | |
| position: relative; | |
| } | |
| .folder-icon-container { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .folder-info { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 6px; | |
| width: 100%; | |
| } | |
| .folder-name { | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--text-main); | |
| text-align: center; | |
| word-break: break-word; | |
| line-height: 1.4; | |
| transition: color 0.2s ease; | |
| } | |
| .folder-card:hover .folder-name { | |
| color: var(--primary-color); | |
| } | |
| .folder-meta { | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| text-align: center; | |
| } | |
| .folder-actions { | |
| position: absolute; | |
| top: 16px; | |
| right: 16px; | |
| } | |
| .action-btn { | |
| width: 36px; | |
| height: 36px; | |
| border: 1px solid var(--border-color); | |
| border-radius: 10px; | |
| background: rgba(255, 255, 255, 0.92); | |
| color: var(--text-muted); | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: all 0.15s ease; | |
| } | |
| .action-btn:hover { | |
| color: var(--text-main); | |
| background: var(--hover-bg); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .item-icon { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .item-name { | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--text-main); | |
| text-align: center; | |
| word-break: break-word; | |
| line-height: 1.4; | |
| transition: color 0.2s ease; | |
| } | |
| .folder-card:hover .item-name { | |
| color: var(--primary-color); | |
| } | |
| .item-meta { | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| text-align: center; | |
| } | |
| /* ── FILE CARDS ── */ | |
| .file-card { | |
| background: var(--card); | |
| border: 1px solid var(--border-color); | |
| border-radius: 16px; | |
| overflow: hidden; | |
| cursor: pointer; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| box-shadow: var(--shadow-sm); | |
| position: relative; | |
| animation: cardFadeIn 0.4s ease-out forwards; | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| .file-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: var(--shadow-lg); | |
| border-color: var(--primary-color); | |
| } | |
| .file-card:active { | |
| transform: translateY(-2px) scale(0.98); | |
| transition-duration: 0.1s; | |
| } | |
| .file-preview { | |
| height: 140px; | |
| background: linear-gradient(135deg, #f8fafc, #eef2ff); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| overflow: hidden; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .file-preview img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .file-icon { | |
| font-size: 48px; | |
| opacity: 0.8; | |
| } | |
| .file-info { | |
| padding: 16px; | |
| } | |
| .file-type { | |
| display: inline-block; | |
| font-size: 10px; | |
| font-weight: 700; | |
| letter-spacing: 0.5px; | |
| padding: 3px 8px; | |
| border-radius: 6px; | |
| margin-bottom: 8px; | |
| text-transform: uppercase; | |
| } | |
| .file-name { | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--text-main); | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| margin-bottom: 4px; | |
| } | |
| .file-meta { | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| } | |
| .file-actions { | |
| position: absolute; | |
| top: 12px; | |
| right: 12px; | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.9); | |
| backdrop-filter: blur(4px); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 16px; | |
| color: var(--text-muted); | |
| opacity: 0; | |
| transition: opacity 0.2s ease; | |
| cursor: pointer; | |
| border: 1px solid var(--border-color); | |
| } | |
| .file-card:hover .file-actions { | |
| opacity: 1; | |
| } | |
| .quick-actions { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| display: flex; | |
| justify-content: center; | |
| gap: 8px; | |
| padding: 10px; | |
| background: linear-gradient(transparent, rgba(255, 255, 255, 0.95)); | |
| opacity: 0; | |
| transform: translateY(8px); | |
| transition: all 0.2s ease; | |
| } | |
| .file-card:hover .quick-actions { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .quick-btn { | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 50%; | |
| border: 1px solid var(--border-color); | |
| background: #ffffff; | |
| color: var(--text-muted); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| font-size: 16px; | |
| transition: all 0.15s ease; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .quick-btn:hover { | |
| background: var(--primary-color); | |
| color: white; | |
| border-color: var(--primary-color); | |
| transform: scale(1.1); | |
| } | |
| /* ── LIST VIEW ITEMS ── */ | |
| .file-list-item { | |
| display: flex; | |
| align-items: center; | |
| padding: 12px 16px; | |
| background: #ffffff; | |
| border: 1px solid var(--border-color); | |
| border-radius: 12px; | |
| gap: 16px; | |
| transition: all 0.2s ease; | |
| cursor: pointer; | |
| } | |
| .file-list-item:hover { | |
| background: var(--hover-bg); | |
| transform: translateX(4px); | |
| } | |
| .list-icon { | |
| font-size: 24px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 40px; | |
| height: 40px; | |
| background: var(--hover-bg); | |
| border-radius: 10px; | |
| flex-shrink: 0; | |
| } | |
| .list-info { | |
| flex-grow: 1; | |
| min-width: 0; | |
| } | |
| .list-name { | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--text-main); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| margin-bottom: 2px; | |
| } | |
| .list-meta { | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| } | |
| .list-actions { | |
| display: flex; | |
| gap: 4px; | |
| opacity: 0; | |
| transition: opacity 0.2s ease; | |
| } | |
| .file-list-item:hover .list-actions { | |
| opacity: 1; | |
| } | |
| .list-actions .icon-btn { | |
| width: 32px; | |
| height: 32px; | |
| font-size: 18px; | |
| } | |
| .list-actions .icon-btn:hover { | |
| background: #ffffff; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| /* ── MODALS ── */ | |
| .modal-overlay { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0, 0, 0, 0.4); | |
| backdrop-filter: blur(4px); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 1000; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.25s ease; | |
| } | |
| .modal-overlay.active { | |
| opacity: 1; | |
| pointer-events: auto; | |
| } | |
| .modal { | |
| background: var(--card); | |
| border-radius: 20px; | |
| padding: 32px; | |
| width: 90%; | |
| max-width: 440px; | |
| box-shadow: var(--shadow-xl); | |
| position: relative; | |
| transform: scale(0.95) translateY(10px); | |
| transition: transform 0.25s ease; | |
| } | |
| .modal-overlay.active .modal { | |
| transform: scale(1) translateY(0); | |
| } | |
| .modal h3 { | |
| font-size: 18px; | |
| font-weight: 700; | |
| color: var(--text-main); | |
| margin-bottom: 24px; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .close-modal { | |
| position: absolute; | |
| top: 16px; | |
| right: 16px; | |
| background: none; | |
| border: none; | |
| color: var(--text-muted); | |
| font-size: 20px; | |
| cursor: pointer; | |
| padding: 4px; | |
| border-radius: 8px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.15s ease; | |
| } | |
| .close-modal:hover { | |
| background: var(--hover-bg); | |
| color: var(--text-main); | |
| } | |
| .input-group { | |
| margin-bottom: 24px; | |
| } | |
| .input-label { | |
| display: block; | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| margin-bottom: 8px; | |
| } | |
| .input-group input { | |
| width: 100%; | |
| padding: 12px 16px; | |
| border: 2px solid var(--border-color); | |
| border-radius: 12px; | |
| font-family: inherit; | |
| font-size: 14px; | |
| color: var(--text-main); | |
| background: var(--bg-color); | |
| outline: none; | |
| transition: all 0.2s ease; | |
| } | |
| .input-group input:focus { | |
| border-color: var(--primary-color); | |
| box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12); | |
| } | |
| .modal-footer { | |
| display: flex; | |
| justify-content: flex-end; | |
| gap: 12px; | |
| } | |
| /* ── BUTTONS ── */ | |
| .btn-primary { | |
| padding: 10px 20px; | |
| background: var(--primary-color); | |
| color: white; | |
| border: none; | |
| border-radius: 10px; | |
| font-family: inherit; | |
| font-size: 14px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| transition: all 0.15s ease; | |
| } | |
| .btn-primary:hover { | |
| background: var(--primary-hover); | |
| transform: translateY(-1px); | |
| } | |
| .btn-secondary { | |
| padding: 10px 20px; | |
| background: transparent; | |
| color: var(--text-muted); | |
| border: 1px solid var(--border-color); | |
| border-radius: 10px; | |
| font-family: inherit; | |
| font-size: 14px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.15s ease; | |
| } | |
| .btn-secondary:hover { | |
| background: var(--hover-bg); | |
| color: var(--text-main); | |
| } | |
| .btn-danger { | |
| padding: 10px 20px; | |
| background: var(--danger-color); | |
| color: white; | |
| border: none; | |
| border-radius: 10px; | |
| font-family: inherit; | |
| font-size: 14px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| transition: all 0.15s ease; | |
| } | |
| .btn-danger:hover { | |
| background: #dc2626; | |
| transform: translateY(-1px); | |
| } | |
| /* ── SPINNER ── */ | |
| .spinner { | |
| width: 40px; | |
| height: 40px; | |
| border: 4px solid var(--border-color); | |
| border-top-color: var(--primary-color); | |
| border-radius: 50%; | |
| animation: spin 0.8s linear infinite; | |
| } | |
| .spinner-sm { | |
| width: 20px; | |
| height: 20px; | |
| border: 3px solid var(--border-color); | |
| border-top-color: var(--primary-color); | |
| border-radius: 50%; | |
| animation: spin 0.8s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| .loading-state { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 16px; | |
| padding: 40px; | |
| color: var(--text-muted); | |
| } | |
| /* ── DELETE MODAL ── */ | |
| .delete-icon-wrap { | |
| text-align: center; | |
| font-size: 56px; | |
| color: var(--danger-color); | |
| margin-bottom: 20px; | |
| animation: pulse-danger 1.5s infinite; | |
| } | |
| @keyframes pulse-danger { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.06); } | |
| } | |
| /* ── UPLOAD PROGRESS ── */ | |
| .upload-progress { | |
| position: fixed; | |
| bottom: -100px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: #ffffff; | |
| border: 1px solid var(--border-color); | |
| border-radius: 14px; | |
| padding: 16px 24px; | |
| z-index: 1100; | |
| box-shadow: var(--shadow-lg); | |
| min-width: 300px; | |
| transition: bottom 0.3s ease; | |
| } | |
| .upload-progress.active { | |
| bottom: 28px; | |
| } | |
| .upload-progress-inner { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| } | |
| .upload-progress-inner span { | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--text-main); | |
| } | |
| /* ── TOAST ── */ | |
| .toast-container { | |
| position: fixed; | |
| top: 28px; | |
| right: 28px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| z-index: 1200; | |
| } | |
| .toast { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| background: #ffffff; | |
| border: 1px solid var(--border-color); | |
| border-radius: 12px; | |
| padding: 14px 18px; | |
| box-shadow: var(--shadow-lg); | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--text-main); | |
| transform: translateX(110%); | |
| opacity: 0; | |
| max-width: 360px; | |
| transition: all 0.3s ease; | |
| } | |
| .toast.show { | |
| transform: translateX(0); | |
| opacity: 1; | |
| } | |
| .toast i { | |
| font-size: 20px; | |
| flex-shrink: 0; | |
| } | |
| .toast-success { border-left: 4px solid var(--primary-color); } | |
| .toast-success i { color: var(--primary-color); } | |
| .toast-error { border-left: 4px solid var(--danger-color); } | |
| .toast-error i { color: var(--danger-color); } | |
| .toast-warning { border-left: 4px solid #f59e0b; } | |
| .toast-warning i { color: #f59e0b; } | |
| .toast-info { border-left: 4px solid var(--file-color); } | |
| .toast-info i { color: var(--file-color); } | |
| /* ── SCROLLBAR ── */ | |
| ::-webkit-scrollbar { width: 8px; } | |
| ::-webkit-scrollbar-track { background: var(--bg-color); } | |
| ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; } | |
| ::-webkit-scrollbar-thumb:hover { background: #9ca3af; } | |
| /* ── DROPDOWN MENU (3-dot) ── */ | |
| .dropdown-menu { | |
| position: absolute; | |
| top: 100%; | |
| right: 0; | |
| background: var(--card); | |
| border: 1px solid var(--border-color); | |
| border-radius: 12px; | |
| box-shadow: var(--shadow-lg); | |
| min-width: 140px; | |
| opacity: 0; | |
| visibility: hidden; | |
| transform: translateY(-8px); | |
| transition: all 0.2s ease; | |
| z-index: 100; | |
| overflow: hidden; | |
| } | |
| .dropdown-menu.open { | |
| opacity: 1; | |
| visibility: visible; | |
| transform: translateY(0); | |
| } | |
| .dropdown-item { | |
| width: 100%; | |
| padding: 10px 14px; | |
| background: none; | |
| border: none; | |
| color: var(--text-main); | |
| font-family: inherit; | |
| font-size: 13px; | |
| font-weight: 500; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| cursor: pointer; | |
| text-align: left; | |
| transition: background-color 0.15s ease; | |
| } | |
| .dropdown-item:hover { | |
| background: var(--hover-bg); | |
| } | |
| .dropdown-item i { | |
| font-size: 16px; | |
| width: 16px; | |
| flex-shrink: 0; | |
| } | |
| .dropdown-item.danger { | |
| color: var(--danger-color); | |
| } | |
| .dropdown-item.danger:hover { | |
| background: rgba(239, 68, 68, 0.1); | |
| } | |
| /* File actions menu (appended to body) */ | |
| .file-menu-dropdown { | |
| position: fixed; | |
| background: var(--card); | |
| border: 1px solid var(--border-color); | |
| border-radius: 12px; | |
| box-shadow: var(--shadow-lg); | |
| min-width: 140px; | |
| z-index: 1000; | |
| overflow: hidden; | |
| animation: fadeInScale 0.15s ease; | |
| } | |
| .file-menu-dropdown .menu-item { | |
| width: 100%; | |
| padding: 10px 14px; | |
| background: none; | |
| border: none; | |
| color: var(--text-main); | |
| font-family: inherit; | |
| font-size: 13px; | |
| font-weight: 500; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| cursor: pointer; | |
| text-align: left; | |
| transition: background-color 0.15s ease; | |
| } | |
| .file-menu-dropdown .menu-item:hover { | |
| background: var(--hover-bg); | |
| } | |
| .file-menu-dropdown .menu-item i { | |
| font-size: 16px; | |
| width: 16px; | |
| flex-shrink: 0; | |
| } | |
| .file-menu-dropdown .menu-item.danger { | |
| color: var(--danger-color); | |
| } | |
| .file-menu-dropdown .menu-item.danger:hover { | |
| background: rgba(239, 68, 68, 0.1); | |
| } | |
| .menu-divider { | |
| height: 1px; | |
| background: var(--border-color); | |
| margin: 4px 0; | |
| } | |
| @keyframes fadeInScale { | |
| from { | |
| opacity: 0; | |
| transform: scale(0.95); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| } | |
| /* ── PREVIEW MODAL ── */ | |
| .preview-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 16px 20px; | |
| border-bottom: 1px solid var(--border-color); | |
| background: #ffffff; | |
| border-radius: 16px 16px 0 0; | |
| flex-shrink: 0; | |
| } | |
| .preview-title { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-weight: 600; | |
| font-size: 15px; | |
| color: var(--text-main); | |
| overflow: hidden; | |
| } | |
| .preview-title span { | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| max-width: 600px; | |
| } | |
| .preview-icon { | |
| font-size: 22px; | |
| flex-shrink: 0; | |
| color: var(--primary-color); | |
| } | |
| .preview-body { | |
| flex: 1; | |
| overflow: auto; | |
| background: #f8fafc; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| position: relative; | |
| } | |
| .preview-iframe { | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| display: block; | |
| } | |
| .preview-image { | |
| max-width: 100%; | |
| max-height: 100%; | |
| object-fit: contain; | |
| border-radius: 4px; | |
| display: block; | |
| } | |
| .preview-text { | |
| width: 100%; | |
| height: 100%; | |
| padding: 24px 28px; | |
| font-family: 'Fira Code', 'Consolas', monospace; | |
| font-size: 13px; | |
| line-height: 1.7; | |
| color: var(--text-main); | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| background: #f8fafc; | |
| overflow: auto; | |
| margin: 0; | |
| align-self: flex-start; | |
| min-height: 100%; | |
| } | |
| .preview-fallback { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 12px; | |
| padding: 60px 32px; | |
| text-align: center; | |
| color: var(--text-muted); | |
| } | |
| .preview-fallback i { | |
| font-size: 72px; | |
| } | |
| .preview-fallback p { | |
| font-size: 15px; | |
| font-weight: 500; | |
| } | |
| /* ── SKELETON LOADING ── */ | |
| .skeleton { | |
| background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); | |
| background-size: 200% 100%; | |
| animation: skeletonLoading 1.5s infinite; | |
| border-radius: 16px; | |
| } | |
| @keyframes skeletonLoading { | |
| 0% { background-position: 200% 0; } | |
| 100% { background-position: -200% 0; } | |
| } | |
| .skeleton-card { | |
| height: 140px; | |
| border-radius: 16px; | |
| border: 1px solid var(--border-color); | |
| } | |
| /* ── EMPTY STATE ── */ | |
| .empty-state { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 60px 20px; | |
| text-align: center; | |
| color: var(--text-muted); | |
| animation: fadeInUp 0.6s ease-out; | |
| grid-column: 1 / -1; | |
| } | |
| @keyframes fadeInUp { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .empty-state i { | |
| font-size: 48px; | |
| margin-bottom: 16px; | |
| opacity: 0.6; | |
| animation: bounceIn 0.8s ease-out; | |
| } | |
| @keyframes bounceIn { | |
| 0% { opacity: 0; transform: scale(0.3); } | |
| 50% { opacity: 1; transform: scale(1.05); } | |
| 70% { transform: scale(0.9); } | |
| 100% { opacity: 1; transform: scale(1); } | |
| } | |
| .empty-state h3 { | |
| font-size: 18px; | |
| font-weight: 600; | |
| margin-bottom: 8px; | |
| color: var(--text-main); | |
| } | |
| .empty-state p { | |
| font-size: 14px; | |
| line-height: 1.5; | |
| max-width: 280px; | |
| } | |
| /* ── RESPONSIVE ── */ | |
| @media (max-width: 768px) { | |
| .sidebar { width: 220px; padding: 16px; } | |
| .top-header { padding: 0 20px; } | |
| .search-bar { width: 100%; } | |
| .content-area { padding: 0 20px 20px; } | |
| .breadcrumbs { padding: 20px 20px 8px; } | |
| .folder-card { padding: 16px; min-height: 120px; } | |
| } | |