| :root { |
| --bg: #f4f6fb; |
| --primary: #2563eb; |
| --primary2: #60a5fa; |
| --primary-soft: rgba(37, 99, 235, 0.06); |
| --primary-soft2: rgba(37, 99, 235, 0.14); |
| --card-bg: #ffffff; |
| --text-main: #111827; |
| --text-muted: #6b7280; |
| --radius-xl: 22px; |
| --shadow-soft: 0 10px 24px rgba(15, 23, 42, 0.05); |
| --font: "Tajawal", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
| --transition: 0.18s ease; |
| } |
|
|
| *, |
| *::before, |
| *::after { |
| box-sizing: border-box; |
| } |
|
|
| body { |
| margin: 0; |
| font-family: var(--font); |
| background: |
| radial-gradient(circle at top left, rgba(96, 165, 250, 0.16), transparent 55%), |
| radial-gradient(circle at top right, rgba(129, 140, 248, 0.12), transparent 60%), |
| var(--bg); |
| color: var(--text-main); |
| } |
|
|
| .page { |
| min-height: 100vh; |
| max-width: 980px; |
| margin: 0 auto; |
| padding: 22px 16px 26px; |
| display: flex; |
| flex-direction: column; |
| gap: 14px; |
| } |
|
|
| |
|
|
| .topbar { |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| padding: 9px 18px; |
| background: #ffffff; |
| border-radius: 999px; |
| box-shadow: var(--shadow-soft); |
| border: 1px solid rgba(226, 232, 240, 0.96); |
| } |
|
|
| .credit { |
| font-size: 10.5px; |
| color: #374151; |
| padding: 4px 14px; |
| border-radius: 999px; |
| background-color: #eef2ff; |
| border: 1px solid rgba(129, 140, 248, 0.45); |
| } |
|
|
| |
|
|
| .main { |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| align-items: center; |
| } |
|
|
| |
|
|
| .hero { |
| text-align: center; |
| background: |
| radial-gradient(circle at right top, rgba(96, 165, 250, 0.16), transparent), |
| #ffffff; |
| padding: 18px 18px 14px; |
| border-radius: var(--radius-xl); |
| box-shadow: var(--shadow-soft); |
| border: 1px solid rgba(226, 232, 240, 0.96); |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| gap: 8px; |
| width: 100%; |
| } |
|
|
| .hero .logo-mark { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| width: 44px; |
| height: 44px; |
| border-radius: 16px; |
| background: linear-gradient(135deg, var(--primary), var(--primary2)); |
| color: #ffffff; |
| font-weight: 700; |
| font-size: 16px; |
| box-shadow: 0 6px 18px rgba(37, 99, 235, 0.38); |
| } |
|
|
| .hero h1 { |
| margin: 0; |
| font-size: 20px; |
| font-weight: 600; |
| } |
|
|
| .hero p { |
| margin: 0; |
| font-size: 12.5px; |
| color: var(--text-muted); |
| max-width: 640px; |
| } |
|
|
| |
|
|
| .steps { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); |
| gap: 8px; |
| width: 100%; |
| } |
|
|
| .step { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| padding: 8px 10px; |
| border-radius: 16px; |
| background: #ffffff; |
| box-shadow: 0 4px 10px rgba(15, 23, 42, 0.03); |
| border: 1px solid rgba(229, 231, 235, 0.98); |
| justify-content: center; |
| text-align: center; |
| } |
|
|
| .step-number { |
| width: 20px; |
| height: 20px; |
| border-radius: 999px; |
| background: var(--primary); |
| color: #ffffff; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 11px; |
| font-weight: 600; |
| } |
|
|
| .step-text { |
| font-size: 10.5px; |
| color: #4b5563; |
| } |
|
|
| |
|
|
| .card { |
| background: var(--card-bg); |
| border-radius: var(--radius-xl); |
| padding: 14px 14px 12px; |
| box-shadow: var(--shadow-soft); |
| border: 1px solid rgba(226, 232, 240, 0.98); |
| } |
|
|
| .main-card { |
| display: flex; |
| flex-direction: column; |
| width: 100%; |
| max-width: 960px; |
| margin: 0 auto; |
| } |
|
|
| |
|
|
| .card-section { |
| padding: 10px 6px; |
| } |
|
|
| .card-section + .card-section { |
| border-top: 1px solid rgba(229, 231, 235, 0.9); |
| } |
|
|
| |
|
|
| .card-row { |
| display: flex; |
| flex-direction: column; |
| gap: 5px; |
| } |
|
|
| .card-row.inline { |
| flex-direction: row; |
| align-items: center; |
| gap: 10px; |
| } |
|
|
| .card-title { |
| font-size: 14px; |
| font-weight: 600; |
| margin: 0 0 2px; |
| text-align: center; |
| } |
|
|
| .hint { |
| margin: 0; |
| font-size: 10.5px; |
| color: var(--text-muted); |
| text-align: center; |
| } |
|
|
| |
|
|
| .file-picker { |
| margin-top: 6px; |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| padding: 9px 16px; |
| border-radius: 999px; |
| border: 1px solid rgba(209, 213, 219, 1); |
| background: linear-gradient(to right, #f9fafb, #eef2ff); |
| cursor: pointer; |
| transition: all var(--transition); |
| align-self: center; |
| } |
|
|
| .file-picker:hover { |
| background: linear-gradient(to right, #eef2ff, #e0f2fe); |
| border-color: var(--primary); |
| box-shadow: 0 8px 18px rgba(148, 163, 253, 0.25); |
| transform: translateY(-1px); |
| } |
|
|
| .file-picker-icon { |
| font-size: 15px; |
| } |
|
|
| .file-picker-text { |
| font-size: 11.5px; |
| } |
|
|
| .file-picker input { |
| display: none; |
| } |
|
|
| |
|
|
| .file-list { |
| margin-top: 2px; |
| padding: 8px 8px; |
| border-radius: 14px; |
| background-color: #f9fafb; |
| border: 1px solid rgba(229, 231, 235, 1); |
| max-height: 220px; |
| overflow-y: auto; |
| transition: box-shadow var(--transition), transform var(--transition); |
| } |
|
|
| .file-list.hidden { |
| display: none; |
| } |
|
|
| .file-list-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: baseline; |
| font-size: 10.5px; |
| margin-bottom: 3px; |
| } |
|
|
| .file-note { |
| font-size: 9px; |
| color: var(--text-muted); |
| } |
|
|
| .mode-label { |
| font-size: 9.5px; |
| color: #1d4ed8; |
| background-color: #eff6ff; |
| border-radius: 999px; |
| padding: 3px 8px; |
| display: inline-block; |
| margin: 0 0 4px; |
| } |
|
|
| |
|
|
| .file-list-ul { |
| list-style: none; |
| padding: 0; |
| margin: 0; |
| display: flex; |
| flex-direction: column; |
| gap: 2px; |
| } |
|
|
| .file-list-ul li { |
| display: grid; |
| grid-template-columns: 18px minmax(0, 1fr) auto auto; |
| align-items: center; |
| gap: 6px; |
| padding: 3px 4px; |
| border-radius: 7px; |
| font-size: 9.5px; |
| transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition); |
| } |
|
|
| .file-list-ul li:nth-child(odd) { |
| background: #eef2ff; |
| } |
|
|
| |
| .file-list-ul li:hover { |
| background: #dbeafe; |
| box-shadow: 0 2px 6px rgba(148, 163, 253, 0.35); |
| transform: translateY(-1px); |
| cursor: pointer; |
| } |
|
|
| .index { |
| text-align: center; |
| color: var(--primary); |
| font-weight: 600; |
| } |
|
|
| .name { |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
|
|
| .size { |
| color: var(--text-muted); |
| font-size: 8.5px; |
| } |
|
|
| |
|
|
| .row-actions { |
| display: flex; |
| align-items: center; |
| gap: 2px; |
| } |
|
|
| .move-btn, |
| .delete-btn { |
| background: transparent; |
| border: none; |
| cursor: pointer; |
| font-size: 10px; |
| padding: 1px 4px; |
| border-radius: 6px; |
| transition: all var(--transition); |
| color: #6b7280; |
| } |
|
|
| .move-btn:hover { |
| color: var(--primary); |
| background-color: rgba(219, 234, 254, 0.9); |
| transform: translateY(-1px); |
| } |
|
|
| .delete-btn:hover { |
| color: #b91c1c; |
| background-color: #fee2e2; |
| transform: scale(1.05); |
| } |
|
|
| |
|
|
| .card-label { |
| font-size: 10.5px; |
| color: #4b5563; |
| } |
|
|
| .output-input { |
| flex: 1; |
| padding: 7px 10px; |
| font-size: 10.5px; |
| border-radius: 999px; |
| border: 1px solid rgba(209, 213, 219, 1); |
| outline: none; |
| transition: all var(--transition); |
| } |
|
|
| .output-input:focus { |
| border-color: var(--primary); |
| box-shadow: 0 0 0 3px var(--primary-soft2); |
| } |
|
|
| |
|
|
| .actions { |
| margin-top: 6px; |
| display: flex; |
| gap: 8px; |
| flex-wrap: wrap; |
| justify-content: center; |
| } |
|
|
| .btn-main { |
| flex: 1; |
| padding: 9px 0; |
| max-width: 420px; |
| font-size: 12.5px; |
| font-weight: 600; |
| border: none; |
| border-radius: 999px; |
| background: linear-gradient(90deg, var(--primary), var(--primary2)); |
| color: #ffffff; |
| cursor: pointer; |
| box-shadow: 0 10px 22px rgba(37, 99, 235, 0.34); |
| transition: all var(--transition); |
| text-align: center; |
| } |
|
|
| .btn-main:hover { |
| transform: translateY(-1px); |
| box-shadow: 0 14px 30px rgba(37, 99, 235, 0.42); |
| } |
|
|
| .btn-main:active { |
| transform: translateY(1px); |
| box-shadow: 0 6px 14px rgba(15, 23, 42, 0.34); |
| } |
|
|
| .btn-main.disabled, |
| .btn-main:disabled { |
| opacity: 0.45; |
| cursor: default; |
| box-shadow: none; |
| } |
|
|
| .btn-secondary { |
| padding: 9px 16px; |
| font-size: 11px; |
| border-radius: 999px; |
| border: 1px solid #d1d5db; |
| background-color: #ffffff; |
| color: #6b7280; |
| cursor: pointer; |
| transition: all var(--transition); |
| } |
|
|
| .btn-secondary:hover { |
| background-color: #eff6ff; |
| color: #1d4ed8; |
| border-color: #93c5fd; |
| } |
|
|
| |
|
|
| .status { |
| margin-top: 4px; |
| padding: 6px 9px; |
| font-size: 10px; |
| border-radius: 11px; |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| } |
|
|
| .status.ok { |
| background: #ecfdf5; |
| color: #15803d; |
| border: 1px solid #bbf7d0; |
| } |
|
|
| .status.error { |
| background: #fef2f2; |
| color: #b91c1c; |
| border: 1px solid #fecaca; |
| } |
|
|
| .status.loading { |
| background: #eff6ff; |
| color: #1d4ed8; |
| border: 1px solid #bfdbfe; |
| } |
|
|
| .status.warning { |
| background: #fffbeb; |
| color: #92400e; |
| border: 1px solid #fed7aa; |
| } |
|
|
| |
|
|
| .progress { |
| margin-top: 6px; |
| display: flex; |
| flex-direction: column; |
| gap: 4px; |
| } |
|
|
| .progress.hidden { |
| display: none; |
| } |
|
|
| .progress-text { |
| font-size: 9.5px; |
| color: #374151; |
| } |
|
|
| .progress-bar { |
| width: 100%; |
| height: 6px; |
| background-color: #e5e7eb; |
| border-radius: 999px; |
| overflow: hidden; |
| } |
|
|
| .progress-fill { |
| height: 100%; |
| width: 0%; |
| background: linear-gradient(90deg, var(--primary), var(--primary2)); |
| transition: width 0.18s ease; |
| } |
|
|
| |
|
|
| @media (max-width: 640px) { |
| .page { |
| padding: 16px 10px 20px; |
| } |
|
|
| .actions { |
| flex-direction: column; |
| } |
|
|
| .btn-main, |
| .btn-secondary { |
| width: 100%; |
| max-width: none; |
| } |
| } |
| .footer-credit{ |
| text-align: center; |
| margin: 18px 0 6px; |
| font-size: 13px; |
| color: #6b7280; |
| } |
