Spaces:
Running
Running
| :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); | |
| --radius-sm: 12px; | |
| --radius-md: 16px; | |
| --radius-lg: 20px; | |
| --space-1: 8px; | |
| --space-2: 16px; | |
| --space-3: 24px; | |
| --space-4: 32px; | |
| } | |
| /* ── 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); | |
| } | |
| .new-dropdown-item .ph-link-plus { | |
| color: #3b82f6; | |
| } | |
| /* ── 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); | |
| } | |
| .links-view { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-3); | |
| padding-top: var(--space-2); | |
| } | |
| .links-hero { | |
| background: | |
| radial-gradient(circle at 28% 0%, rgba(73, 143, 255, 0.2), transparent 26%), | |
| radial-gradient(circle at 72% 46%, rgba(21, 190, 175, 0.14), transparent 18%), | |
| linear-gradient(90deg, #18315f 0%, #1c2e68 48%, #146d83 100%); | |
| color: #f8fafc; | |
| border-radius: 24px; | |
| padding: 34px 40px; | |
| min-height: 220px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: var(--space-3); | |
| box-shadow: var(--shadow-lg); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .links-hero::after { | |
| content: ''; | |
| position: absolute; | |
| width: 120px; | |
| height: 120px; | |
| top: 46px; | |
| left: 58%; | |
| opacity: 0.22; | |
| pointer-events: none; | |
| background: | |
| radial-gradient(circle, rgba(255, 255, 255, 0.14) 1.4px, transparent 1.5px); | |
| background-size: 14px 14px; | |
| } | |
| .links-hero-copy { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .links-eyebrow { | |
| display: inline-flex; | |
| font-size: 14px; | |
| letter-spacing: 0.4px; | |
| text-transform: uppercase; | |
| color: #8cf0d0; | |
| margin-bottom: var(--space-2); | |
| font-weight: 700; | |
| } | |
| .links-hero h2 { | |
| font-size: clamp(28px, 3.5vw, 48px); | |
| line-height: 1.1; | |
| letter-spacing: -1.4px; | |
| margin-bottom: 16px; | |
| max-width: 670px; | |
| } | |
| .links-hero p { | |
| max-width: 560px; | |
| color: rgba(241, 245, 249, 0.86); | |
| line-height: 1.55; | |
| font-size: 15px; | |
| } | |
| .links-hero .btn-primary { | |
| position: relative; | |
| z-index: 1; | |
| min-width: 156px; | |
| min-height: 52px; | |
| justify-content: center; | |
| border-radius: 16px; | |
| } | |
| .links-hero-art { | |
| flex: 0 0 320px; | |
| height: 160px; | |
| position: relative; | |
| z-index: 1; | |
| margin-left: auto; | |
| } | |
| .hero-orb { | |
| position: absolute; | |
| border-radius: 50%; | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| } | |
| .hero-orb-one { | |
| width: 92px; | |
| height: 92px; | |
| right: 16px; | |
| top: 18px; | |
| } | |
| .hero-orb-two { | |
| width: 10px; | |
| height: 10px; | |
| left: 36px; | |
| top: 52px; | |
| background: rgba(140, 240, 208, 0.5); | |
| border: none; | |
| } | |
| .hero-card { | |
| position: absolute; | |
| border: 3px solid rgba(136, 170, 214, 0.24); | |
| border-radius: 18px; | |
| background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); | |
| } | |
| .hero-card-back { | |
| width: 172px; | |
| height: 132px; | |
| right: 136px; | |
| top: 0; | |
| transform: rotate(-4deg); | |
| } | |
| .hero-card-back::before, | |
| .hero-card-back::after { | |
| content: ''; | |
| position: absolute; | |
| left: 18px; | |
| height: 8px; | |
| border-radius: 999px; | |
| background: rgba(175, 202, 236, 0.34); | |
| } | |
| .hero-card-back::before { | |
| width: 94px; | |
| top: 24px; | |
| } | |
| .hero-card-back::after { | |
| width: 62px; | |
| top: 40px; | |
| } | |
| .hero-card-front { | |
| width: 156px; | |
| height: 110px; | |
| right: 82px; | |
| top: 54px; | |
| transform: rotate(-4deg); | |
| } | |
| .hero-card-front::before { | |
| content: ''; | |
| position: absolute; | |
| top: -18px; | |
| left: 22px; | |
| width: 58px; | |
| height: 26px; | |
| border-radius: 10px 10px 0 0; | |
| border: 3px solid rgba(136, 170, 214, 0.24); | |
| border-bottom: none; | |
| background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)); | |
| } | |
| .hero-link-glyph { | |
| position: absolute; | |
| inset: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: #2eb8d3; | |
| font-size: 56px; | |
| } | |
| .hero-globe { | |
| position: absolute; | |
| right: 42px; | |
| top: 18px; | |
| font-size: 44px; | |
| color: rgba(133, 171, 214, 0.3); | |
| } | |
| .links-toolbar { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(360px, 1.45fr); | |
| gap: var(--space-2); | |
| align-items: stretch; | |
| } | |
| .links-insights { | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| gap: 18px; | |
| margin-top: -2px; | |
| } | |
| .links-note-chip { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| padding: 14px 18px; | |
| border-radius: 18px; | |
| background: #ffffff; | |
| border: 1px solid var(--border-color); | |
| color: var(--text-muted); | |
| font-size: 12px; | |
| font-weight: 500; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .links-note-icon { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 14px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| font-size: 20px; | |
| } | |
| .links-note-copy { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .links-note-copy strong { | |
| font-size: 16px; | |
| color: #18315f; | |
| } | |
| .links-note-copy span { | |
| font-size: 14px; | |
| color: #62748e; | |
| } | |
| .links-stat-card, | |
| .links-search { | |
| background: var(--card); | |
| border: 1px solid var(--border-color); | |
| border-radius: 20px; | |
| padding: 16px 20px; | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); | |
| transition: all 0.2s ease; | |
| } | |
| .links-stat-card { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| min-height: 100px; | |
| justify-content: flex-start; | |
| } | |
| .links-stat-card:hover, | |
| .links-search:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .links-stat-icon { | |
| width: 58px; | |
| height: 58px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 26px; | |
| flex-shrink: 0; | |
| } | |
| .links-stat-copy { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .links-stat-label { | |
| font-size: 12px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.6px; | |
| color: #71819b; | |
| font-weight: 700; | |
| } | |
| .links-stat-card strong { | |
| font-size: 24px; | |
| line-height: 1.1; | |
| color: #0f2b63; | |
| } | |
| .links-stat-subtitle { | |
| font-size: 13px; | |
| color: #62748e; | |
| } | |
| .links-search { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 14px; | |
| min-height: 100px; | |
| border-color: #d7e2ee; | |
| padding: 16px 18px; | |
| } | |
| .links-search-input { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| min-height: 56px; | |
| flex: 1; | |
| border: 1px solid #e6edf5; | |
| border-radius: 16px; | |
| padding: 0 18px; | |
| background: linear-gradient(180deg, #ffffff, #fbfdff); | |
| } | |
| .links-search-input i { | |
| color: #6b778a; | |
| font-size: 22px; | |
| } | |
| .links-search input { | |
| width: 100%; | |
| border: none; | |
| background: transparent; | |
| outline: none; | |
| font-family: inherit; | |
| font-size: 16px; | |
| color: var(--text-main); | |
| } | |
| .links-search-input:focus-within { | |
| border-color: #c7d8eb; | |
| box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.08); | |
| } | |
| .links-filter-btn { | |
| min-height: 46px; | |
| padding: 0 18px; | |
| border-radius: 999px; | |
| border: 1px solid #dce7f2; | |
| background: #ffffff; | |
| color: #4b5b72; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-family: inherit; | |
| font-size: 14px; | |
| font-weight: 700; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .links-filter-btn:hover { | |
| background: #f8fbff; | |
| border-color: #c8d8e8; | |
| } | |
| .tint-green { | |
| background: #dff8ec; | |
| color: #10b981; | |
| } | |
| .tint-blue { | |
| background: #e6f0ff; | |
| color: #2f80ed; | |
| } | |
| .tint-green-soft { | |
| background: #dff8ec; | |
| color: #11b87f; | |
| } | |
| .tint-blue-soft { | |
| background: #e8f1ff; | |
| color: #2d7ef0; | |
| } | |
| .tint-purple-soft { | |
| background: #efe8ff; | |
| color: #7c57eb; | |
| } | |
| .link-preview-panel { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| padding: 14px 16px; | |
| border: 1px solid var(--border-color); | |
| border-radius: 14px; | |
| background: linear-gradient(180deg, #f8fafc, #f1f5f9); | |
| margin-bottom: 20px; | |
| transition: all 0.2s ease; | |
| } | |
| .link-preview-panel.is-valid { | |
| border-color: rgba(16, 185, 129, 0.35); | |
| background: linear-gradient(180deg, #ecfdf5, #f0fdf4); | |
| } | |
| .link-preview-panel.is-invalid { | |
| border-color: rgba(239, 68, 68, 0.35); | |
| background: linear-gradient(180deg, #fef2f2, #fff7ed); | |
| } | |
| .link-preview-icon { | |
| width: 44px; | |
| height: 44px; | |
| border-radius: 12px; | |
| background: #ffffff; | |
| color: var(--primary-color); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 20px; | |
| box-shadow: var(--shadow-sm); | |
| flex-shrink: 0; | |
| } | |
| .link-preview-panel.is-invalid .link-preview-icon { | |
| color: var(--danger-color); | |
| } | |
| .link-preview-content { | |
| min-width: 0; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .link-preview-content strong { | |
| font-size: 14px; | |
| color: var(--text-main); | |
| } | |
| .link-preview-content span { | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| word-break: break-word; | |
| } | |
| /* ── SECTION HEADERS ── */ | |
| .section-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: var(--space-2); | |
| padding-top: var(--space-1); | |
| } | |
| .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-actions .card-menu-btn { | |
| width: 100%; | |
| height: 100%; | |
| padding: 0; | |
| border-radius: 50%; | |
| font-size: 16px; | |
| } | |
| .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-help { | |
| margin-top: 8px; | |
| font-size: 12px; | |
| line-height: 1.5; | |
| color: var(--text-muted); | |
| } | |
| .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; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| } | |
| .shortcut-hint { | |
| margin-right: auto; | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| } | |
| /* ── BUTTONS ── */ | |
| .btn-primary { | |
| padding: 10px 20px; | |
| background: #12c989; | |
| color: white; | |
| border: none; | |
| border-radius: var(--radius-sm); | |
| font-family: inherit; | |
| font-size: 14px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| transition: all 0.2s ease; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
| } | |
| .btn-primary:hover { | |
| background: #0fb67b; | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 18px rgba(16, 185, 129, 0.22); | |
| } | |
| .btn-secondary { | |
| padding: 10px 20px; | |
| background: transparent; | |
| color: var(--text-muted); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-sm); | |
| font-family: inherit; | |
| font-size: 14px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .btn-secondary:hover { | |
| background: var(--hover-bg); | |
| color: var(--text-main); | |
| transform: translateY(-1px); | |
| } | |
| .btn-link-secondary { | |
| border-color: rgba(18, 201, 137, 0.3); | |
| color: #0f9f70; | |
| background: #ffffff; | |
| box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05); | |
| } | |
| .btn-link-secondary:hover { | |
| background: #ecfdf5; | |
| border-color: #12c989; | |
| color: #0d8e63; | |
| } | |
| .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: stretch; | |
| justify-content: stretch; | |
| position: relative; | |
| } | |
| .preview-iframe { | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| display: block; | |
| } | |
| .preview-pdf-wrap { | |
| flex: 1; | |
| min-height: 0; | |
| } | |
| .preview-pdf-frame { | |
| width: 100%; | |
| height: 100%; | |
| border: 0; | |
| display: block; | |
| flex: 1; | |
| } | |
| .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; | |
| } | |
| /* ── BUTTON LOADING STATE ── */ | |
| .btn-primary.loading, | |
| .btn-secondary.loading, | |
| .btn-danger.loading { | |
| position: relative; | |
| color: transparent ; | |
| pointer-events: none; | |
| } | |
| .btn-primary.loading::after, | |
| .btn-secondary.loading::after, | |
| .btn-danger.loading::after { | |
| content: ""; | |
| position: absolute; | |
| width: 18px; | |
| height: 18px; | |
| top: calc(50% - 9px); | |
| left: calc(50% - 9px); | |
| border: 2px solid rgba(255, 255, 255, 0.3); | |
| border-radius: 50%; | |
| border-top-color: white; | |
| animation: spin 0.6s linear infinite; | |
| } | |
| .btn-secondary.loading::after { | |
| border-top-color: var(--primary-color); | |
| border-color: rgba(0, 0, 0, 0.1); | |
| } | |
| @keyframes spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| /* ── RESPONSIVE ── */ | |
| @media (max-width: 992px) { | |
| .app-container { | |
| gap: 12px; | |
| padding: 10px; | |
| } | |
| .sidebar { | |
| width: 224px; | |
| } | |
| .search-bar { | |
| width: 100%; | |
| max-width: 420px; | |
| } | |
| .grid-container { | |
| grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); | |
| } | |
| .links-hero { | |
| padding: 32px 28px; | |
| min-height: 220px; | |
| } | |
| .links-hero-art { | |
| flex-basis: 250px; | |
| transform: scale(0.82); | |
| transform-origin: right center; | |
| } | |
| .links-toolbar { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| .links-search { | |
| grid-column: 1 / -1; | |
| } | |
| .links-insights { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .sidebar { | |
| position: fixed; | |
| left: -260px; | |
| height: 100vh; | |
| transition: left 0.3s ease; | |
| box-shadow: var(--shadow-xl); | |
| border-radius: 0 20px 20px 0; | |
| } | |
| .sidebar.mobile-open { | |
| left: 0; | |
| } | |
| .main-content { | |
| margin-left: 0; | |
| border-radius: 18px; | |
| } | |
| .top-header { | |
| padding: 0 12px; | |
| min-height: 62px; | |
| gap: 8px; | |
| } | |
| .search-bar { | |
| width: 100%; | |
| margin: 0 6px; | |
| padding: 10px 14px; | |
| } | |
| .user-actions { | |
| gap: 8px; | |
| } | |
| .content-area { | |
| padding: 0 12px 14px; | |
| } | |
| .breadcrumbs { | |
| padding: 14px 12px 8px; | |
| font-size: 16px; | |
| } | |
| .breadcrumb-item { | |
| font-size: 14px; | |
| } | |
| .section-header { | |
| margin-bottom: 14px; | |
| } | |
| .grid-container { | |
| grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); | |
| gap: 10px; | |
| } | |
| .folder-card { | |
| padding: 12px; | |
| min-height: 136px; | |
| } | |
| .file-card { | |
| border-radius: 16px; | |
| } | |
| .file-preview { | |
| height: 92px; | |
| } | |
| .links-hero { | |
| padding: 24px 20px; | |
| flex-direction: column; | |
| align-items: flex-start; | |
| min-height: auto; | |
| } | |
| .links-hero::after { | |
| left: auto; | |
| right: 18px; | |
| top: 120px; | |
| } | |
| .links-hero-art { | |
| width: 100%; | |
| height: 132px; | |
| flex: none; | |
| margin-left: 0; | |
| transform: scale(0.8); | |
| transform-origin: left center; | |
| } | |
| .links-hero h2 { | |
| font-size: 24px; | |
| } | |
| .links-toolbar { | |
| grid-template-columns: 1fr; | |
| } | |
| .links-stat-card { | |
| min-height: auto; | |
| padding: 20px; | |
| } | |
| .links-stat-card strong { | |
| font-size: 24px; | |
| } | |
| .links-search { | |
| flex-direction: column; | |
| align-items: stretch; | |
| } | |
| .links-search-input { | |
| min-height: 64px; | |
| } | |
| .links-filter-btn { | |
| width: fit-content; | |
| align-self: flex-end; | |
| } | |
| .links-note-chip { | |
| width: 100%; | |
| } | |
| .links-container { | |
| padding: 16px; | |
| border-radius: 20px; | |
| } | |
| .link-card-topline { | |
| flex-direction: column; | |
| } | |
| .shortcut-hint { | |
| width: 100%; | |
| margin-right: 0; | |
| } | |
| /* Mobile Menu Toggle */ | |
| .menu-toggle { | |
| display: flex ; | |
| align-items: center; | |
| justify-content: center; | |
| width: 40px; | |
| height: 40px; | |
| background: var(--hover-bg); | |
| border-radius: 10px; | |
| color: var(--text-main); | |
| cursor: pointer; | |
| } | |
| .sidebar-bottom { | |
| padding-top: 14px; | |
| } | |
| .storage-dashboard { | |
| padding: 12px; | |
| } | |
| .hf-badge { | |
| padding: 9px 10px; | |
| font-size: 11px; | |
| } | |
| } | |
| /* Add menu toggle to header if it doesn't exist */ | |
| .menu-toggle { | |
| display: none; | |
| } | |
| /* ── VERSION HISTORY ── */ | |
| .history-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| margin-top: 10px; | |
| } | |
| .history-item { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 12px 16px; | |
| background: var(--bg-color); | |
| border: 1px solid var(--border-color); | |
| border-radius: 12px; | |
| transition: all 0.2s ease; | |
| } | |
| .history-item:hover { | |
| border-color: var(--primary-color); | |
| background: #ffffff; | |
| } | |
| .history-info { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| min-width: 0; | |
| } | |
| .history-commit-msg { | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--text-main); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .history-meta { | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| } | |
| .history-actions { | |
| display: flex; | |
| gap: 8px; | |
| align-items: center; | |
| } | |
| .restore-btn { | |
| padding: 8px 14px; | |
| font-size: 13px; | |
| border: none; | |
| border-radius: 10px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| white-space: nowrap; | |
| } | |
| .restore-btn.copy { | |
| background: var(--primary-light); | |
| color: var(--primary-color); | |
| } | |
| .restore-btn.copy:hover { | |
| background: var(--primary-color); | |
| color: white; | |
| transform: translateY(-1px); | |
| } | |
| .restore-btn.overwrite { | |
| background: #f1f5f9; | |
| color: var(--text-muted); | |
| } | |
| .restore-btn.overwrite:hover { | |
| background: var(--danger-color); | |
| color: white; | |
| transform: translateY(-1px); | |
| } | |
| .current-version-badge { | |
| padding: 6px 12px; | |
| background: var(--hover-bg); | |
| color: var(--text-muted); | |
| border-radius: 8px; | |
| font-size: 12px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| } | |
| .loading-state-sm { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| padding: 20px; | |
| color: var(--text-muted); | |
| font-size: 13px; | |
| } | |
| /* ── LINKS SECTION ── */ | |
| .links-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); | |
| gap: 24px; | |
| margin-top: var(--space-2); | |
| background: #ffffff; | |
| border: 1px solid #e8edf4; | |
| border-radius: 28px; | |
| min-height: 300px; | |
| padding: 32px; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .link-card { | |
| background: var(--card); | |
| border: 1px solid var(--border-color); | |
| border-radius: 14px; | |
| padding: 18px; | |
| 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; | |
| gap: 12px; | |
| animation: cardFadeIn 0.4s ease-out forwards; | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| .link-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: var(--shadow-lg); | |
| border-color: var(--primary-color); | |
| } | |
| .link-card-header { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 12px; | |
| } | |
| .link-card-content { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .link-card-topline { | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| gap: 10px; | |
| margin-bottom: 6px; | |
| } | |
| .link-icon { | |
| width: 40px; | |
| height: 40px; | |
| background: var(--primary-light); | |
| border-radius: 10px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--primary-color); | |
| font-size: 20px; | |
| flex-shrink: 0; | |
| } | |
| .link-title { | |
| font-size: 15px; | |
| font-weight: 600; | |
| color: var(--text-main); | |
| word-break: break-word; | |
| line-height: 1.3; | |
| } | |
| .link-domain-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| white-space: nowrap; | |
| padding: 5px 10px; | |
| border-radius: 999px; | |
| background: var(--hover-bg); | |
| color: var(--text-muted); | |
| border: 1px solid var(--border-color); | |
| font-size: 11px; | |
| font-weight: 700; | |
| letter-spacing: 0.3px; | |
| } | |
| .link-url { | |
| font-size: 12px; | |
| color: var(--primary-color); | |
| word-break: break-all; | |
| text-decoration: none; | |
| line-height: 1.4; | |
| overflow: hidden; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 1; | |
| -webkit-box-orient: vertical; | |
| } | |
| .link-description { | |
| font-size: 13px; | |
| color: var(--text-muted); | |
| line-height: 1.5; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| } | |
| .link-description.muted { | |
| color: #94a3b8; | |
| font-style: italic; | |
| } | |
| .link-meta { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px 16px; | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| } | |
| .link-meta span { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .link-actions { | |
| display: flex; | |
| gap: 8px; | |
| justify-content: space-between; | |
| flex-wrap: wrap; | |
| padding-top: 8px; | |
| border-top: 1px solid var(--border-color); | |
| } | |
| .link-action-btn { | |
| flex: 1 1 140px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 6px; | |
| padding: 8px 12px; | |
| background: var(--hover-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: 8px; | |
| color: var(--text-muted); | |
| font-size: 13px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.15s ease; | |
| text-decoration: none; | |
| } | |
| .link-action-btn:hover { | |
| background: var(--primary-light); | |
| color: var(--primary-color); | |
| border-color: var(--primary-color); | |
| } | |
| .link-action-btn.delete:hover { | |
| background: rgba(239, 68, 68, 0.1); | |
| color: var(--danger-color); | |
| border-color: var(--danger-color); | |
| } | |
| .links-empty { | |
| grid-column: 1 / -1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 78px 24px 84px; | |
| text-align: center; | |
| color: var(--text-muted); | |
| animation: fadeInUp 0.6s ease-out; | |
| } | |
| .links-empty-illustration { | |
| width: 84px; | |
| height: 84px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: var(--space-3); | |
| background: linear-gradient(180deg, #eef2f7, #e5ebf4); | |
| position: relative; | |
| } | |
| .links-empty-illustration i { | |
| font-size: 38px; | |
| color: #7d8798; | |
| opacity: 1; | |
| animation: bounceIn 0.8s ease-out; | |
| } | |
| .links-empty-illustration::after { | |
| content: '+'; | |
| position: absolute; | |
| right: -4px; | |
| bottom: 4px; | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 50%; | |
| background: #ffffff; | |
| border: 2px solid #95a2b5; | |
| color: #64748b; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 16px; | |
| font-weight: 700; | |
| } | |
| .links-empty h3 { | |
| font-size: 18px; | |
| font-weight: 700; | |
| line-height: 1.2; | |
| margin-bottom: 12px; | |
| color: #25324a; | |
| } | |
| .links-empty p { | |
| font-size: 14px; | |
| line-height: 1.6; | |
| max-width: 420px; | |
| margin-bottom: 18px; | |
| color: #72839a; | |
| } | |
| .input-group textarea { | |
| 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; | |
| resize: vertical; | |
| transition: all 0.2s ease; | |
| } | |
| .input-group textarea:focus { | |
| border-color: var(--primary-color); | |
| box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12); | |
| } |