admin/TafsirQuran
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish ayah UX with fixed player dock and progressive skeletons.
build-and-deploy / deploy (push) Successful in 4m45s
Details

Browse Source 
Compact header, sidebar surah list, closed notes, resume CTA, and larger ayah typography.
This commit is contained in:
admin
2026-10-10 02:15:35 +03:30
parent f95c118efb
commit 3ca743ca12
11 changed files with 567 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/TafsirQuran.UI/wwwroot/css/app.css
+90 -4
View File
@@ -118,6 +118,7 @@ button, input { font: inherit; }
.user-chip { padding: 0.5rem 0.9rem; color: #c7d8ce; font-size: 0.9rem; }
.content { padding: 1.25rem 1rem 2.5rem; max-width: 980px; margin: 0 auto; }
.app-shell.has-player-dock .content { padding-bottom: 8.5rem; }
.home { padding-top: 1.5rem; }
.tile-grid { display: grid; gap: 1rem; }
@@ -181,11 +182,18 @@ button, input { font: inherit; }
.ayah-block { margin-bottom: 1rem; }
.ayah-ar {
font-family: var(--font-ar);
font-size: clamp(1.4rem, 3vw, 1.9rem);
line-height: 2;
margin: 0 0 0.5rem;
font-size: clamp(1.75rem, 4.2vw, 2.35rem);
line-height: 2.05;
margin: 0 0 0.65rem;
color: #14261e;
font-weight: 700;
}
.ayah-fa {
margin: 0;
font-size: clamp(1.05rem, 2.6vw, 1.28rem);
line-height: 1.95;
color: #3a4a42;
}
.ayah-fa { margin: 0; color: var(--muted); }
.audio-player { display: flex; flex-direction: column; gap: 0.85rem; }
.player-title { font-weight: 600; }
@@ -272,3 +280,81 @@ button, input { font: inherit; }
padding: 0.9rem 1rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
}
.chip:disabled { opacity: 0.45; cursor: default; }
.page-header-row {
display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
margin-bottom: 1rem;
}
.page-title-inline {
margin: 0; font-size: clamp(1.15rem, 3.5vw, 1.45rem); font-weight: 700;
display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem;
}
.title-author { font-weight: 500; color: var(--muted); font-size: 0.92em; }
.back-btn {
flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
border: 1px solid var(--line); background: #fff; cursor: pointer;
font-size: 1.25rem; line-height: 1; color: var(--brand-deep);
}
.skeleton-stack { display: grid; gap: 0.65rem; margin: 0.5rem 0 1rem; }
.skeleton-line, .skeleton-card, .skeleton-block {
background: linear-gradient(90deg, rgba(28,43,36,0.07), rgba(28,43,36,0.14), rgba(28,43,36,0.07));
background-size: 200% 100%;
animation: skeleton-shine 1.2s ease-in-out infinite;
border-radius: 10px;
}
.skeleton-line { height: 14px; }
.skeleton-card { height: 64px; border-radius: 14px; }
.skeleton-block { height: 120px; }
@keyframes skeleton-shine {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
.player-dock {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
padding: 0.65rem 0.85rem calc(0.65rem + env(safe-area-inset-bottom));
background: rgba(243, 239, 230, 0.94);
backdrop-filter: blur(14px);
border-top: 1px solid var(--line);
box-shadow: 0 -10px 28px rgba(28, 43, 36, 0.08);
}
.dock-player {
max-width: 980px; margin: 0 auto;
border: 1px solid var(--line);
background: #fff;
border-radius: 18px;
padding: 0.75rem 0.9rem 0.85rem;
direction: rtl;
text-align: right;
}
.dock-top {
display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
margin-bottom: 0.55rem;
}
.dock-title {
border: 0; background: transparent; padding: 0; cursor: pointer;
font-weight: 700; font-size: 0.98rem; color: var(--ink); text-align: right;
}
.dock-actions { display: flex; gap: 0.35rem; flex-shrink: 0; }
.icon-chip {
width: 36px; height: 36px; border-radius: 10px;
border: 1px solid var(--line); background: #fff; cursor: pointer;
color: var(--muted); font-size: 1rem;
}
.icon-chip.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.rtl-controls {
display: grid; grid-template-columns: auto 1fr auto; gap: 0.65rem; align-items: center;
direction: rtl;
}
.dock-empty { margin: 0; font-size: 0.9rem; }
.resume-btn {
width: 100%; margin: 0 0 1rem; padding: 1rem 1.1rem;
border: 1px solid rgba(31,107,74,0.35); border-radius: 18px;
background: linear-gradient(135deg, rgba(31,107,74,0.12), rgba(31,107,74,0.04));
cursor: pointer; text-align: right;
display: flex; flex-direction: column; gap: 0.25rem;
}
.resume-label { font-weight: 700; color: var(--brand-deep); }
.resume-meta { color: var(--muted); font-size: 0.9rem; }