|
|
: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; |
|
|
} |
|
|
} |
|
|
|
