/* styles.css — Hermes Document Converter Custom polish trên top của Tailwind utilities. Dark mode: dùng class="dark" trên . */ :root { --bg: #ffffff; --text: #111827; --border: #e5e7eb; --muted: #6b7280; --primary: #3B82F6; --secondary: #10B981; --accent: #8B5CF6; --bg-soft: #F9FAFB; --shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.06); } .dark { --bg: #111827; --text: #f3f4f6; --border: #374151; --muted: #9ca3af; --bg-soft: #1f2937; --shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2); } body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; background: var(--bg); color: var(--text); transition: background-color 200ms ease, color 200ms ease; } /* ============ Brand gradient ============ */ .brand-gradient { background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%); } .brand-gradient-text { background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .icon-gradient { background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%); } /* ============ Hero blob ============ */ .hero-blob { background: radial-gradient(circle at 30% 20%, rgba(59,130,246,0.18), transparent 50%), radial-gradient(circle at 70% 80%, rgba(139,92,246,0.15), transparent 50%); } .dark .hero-blob { background: radial-gradient(circle at 30% 20%, rgba(59,130,246,0.12), transparent 50%), radial-gradient(circle at 70% 80%, rgba(139,92,246,0.10), transparent 50%); } /* ============ Drop zone (enhanced) ============ */ .drop-zone { transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .drop-zone::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(59,130,246,0.04), rgba(139,92,246,0.04)); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; } .drop-zone:hover::before { opacity: 1; } .drop-zone.dragover { background: rgba(59,130,246,0.12) !important; border-color: #3B82F6 !important; transform: scale(1.015); box-shadow: 0 0 0 4px rgba(59,130,246,0.15); } .drop-zone.dragover::before { opacity: 1; } /* Upload icon pulse when dragover */ .drop-zone.dragover .upload-icon { animation: pulse-scale 1s ease-in-out infinite; } @keyframes pulse-scale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } /* ============ Progress bar (enhanced) ============ */ .progress-bar { transition: width 0.3s ease; background: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 50%, #3B82F6 100%); background-size: 200% 100%; animation: progress-shimmer 1.5s linear infinite; position: relative; overflow: hidden; } .progress-bar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%); animation: progress-glint 1.5s linear infinite; } @keyframes progress-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @keyframes progress-glint { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* ============ Spinner ============ */ .spinner { border: 3px solid rgba(0,0,0,0.08); border-left-color: #3B82F6; border-radius: 50%; width: 24px; height: 24px; animation: spin 0.8s linear infinite; display: inline-block; vertical-align: middle; } .dark .spinner { border-color: rgba(255,255,255,0.15); border-left-color: #60a5fa; } @keyframes spin { to { transform: rotate(360deg); } } /* ============ Toast ============ */ .toast { position: fixed; bottom: 20px; right: 20px; z-index: 100; display: flex; flex-direction: column-reverse; gap: 8px; pointer-events: none; } .toast > * { pointer-events: auto; animation: toast-in 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 10px 25px rgba(0,0,0,0.15); } .toast > .toast-out { animation: toast-out 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; } @keyframes toast-in { from { opacity: 0; transform: translateX(20px) translateY(0); } to { opacity: 1; transform: translateX(0) translateY(0); } } @keyframes toast-out { to { opacity: 0; transform: translateX(20px); } } /* ============ File row hover ============ */ .file-row { transition: background-color 0.15s ease; } .file-row:hover { background-color: rgba(59,130,246,0.06); } .dark .file-row:hover { background-color: rgba(59,130,246,0.10); } /* ============ Per-file format select (batch) ============ */ .batch-file-format { padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.75rem; font-weight: 500; cursor: pointer; transition: border-color 0.15s ease; } .batch-file-format:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,130,246,0.15); } /* ============ File history list ============ */ .history-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 8px; font-size: 0.875rem; transition: background-color 0.15s ease; } .history-row:hover { background-color: rgba(59,130,246,0.06); } .dark .history-row:hover { background-color: rgba(59,130,246,0.10); } /* ============ Tool card ============ */ .tool-card { cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .tool-card:hover { transform: translateY(-2px); } /* ============ History dropdown ============ */ .history-dropdown { position: absolute; right: 0; top: calc(100% + 8px); background: var(--bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.10); min-width: 320px; max-width: 380px; max-height: 400px; overflow-y: auto; z-index: 50; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; } .history-dropdown.open { opacity: 1; transform: translateY(0); pointer-events: auto; } .history-empty { padding: 24px 16px; text-align: center; color: var(--muted); font-size: 0.875rem; } /* ============ Theme toggle ============ */ #theme-toggle { transition: transform 0.2s ease; } #theme-toggle:hover { transform: rotate(20deg); } /* ============ Utility ============ */ .hidden { display: none !important; } /* ============ Landing drop zone (iLovePDF style) ============ */ .landing-drop-zone { transition: all 0.2s ease; position: relative; overflow: hidden; } .landing-drop-zone::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(59,130,246,0.05) 0%, rgba(139,92,246,0.05) 100%); opacity: 0; transition: opacity 0.2s; pointer-events: none; } .landing-drop-zone:hover::before { opacity: 1; } .landing-drop-zone.drag-over { border-color: var(--primary) !important; background: rgba(59, 130, 246, 0.08) !important; transform: scale(1.02); box-shadow: 0 20px 50px rgba(59, 130, 246, 0.25); } .landing-drop-zone.drag-over::before { opacity: 1; } /* Animated dashed border */ @keyframes border-dance { 0% { background-position: 0 0, 100% 0, 0 100%, 0 0; } 100% { background-position: 24px 0, calc(100% - 24px) 0, 0 calc(100% - 24px), 0 24px; } } .landing-drop-zone.drag-over { background-image: linear-gradient(90deg, var(--primary) 50%, transparent 50%), linear-gradient(90deg, var(--primary) 50%, transparent 50%), linear-gradient(0deg, var(--primary) 50%, transparent 50%), linear-gradient(0deg, var(--primary) 50%, transparent 50%); background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; background-size: 24px 3px, 24px 3px, 3px 24px, 3px 24px; background-position: 0 0, 100% 0, 0 100%, 0 0; animation: border-dance 1s linear infinite; }