Wave changes
This commit is contained in:
0
assets/styles/bigger-picture.min.css
vendored
Executable file → Normal file
0
assets/styles/bigger-picture.min.css
vendored
Executable file → Normal file
0
assets/styles/comments.css
Executable file → Normal file
0
assets/styles/comments.css
Executable file → Normal file
0
assets/styles/kanban.css
Executable file → Normal file
0
assets/styles/kanban.css
Executable file → Normal file
0
assets/styles/media.css
Executable file → Normal file
0
assets/styles/media.css
Executable file → Normal file
65
assets/styles/misc.css
Executable file → Normal file
65
assets/styles/misc.css
Executable file → Normal file
@@ -232,21 +232,23 @@ nav {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* Push search to the far right */
|
||||
/* SEARCH */
|
||||
#search-input,
|
||||
#search-btn {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* Input styling */
|
||||
#search-input {
|
||||
width: 12rem;
|
||||
padding: 0.3rem 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
border: 1px solid var(--border-color, #ccc);
|
||||
border-radius: 4px;
|
||||
background: var(--bg-color, #fff);
|
||||
color: var(--text-color, #000);
|
||||
font-family: var(--font-body);
|
||||
font-weight: 300;
|
||||
background-color: var(--kb-card-bg);
|
||||
color: var(--fg);
|
||||
|
||||
}
|
||||
|
||||
/* Button styling */
|
||||
@@ -363,3 +365,58 @@ mark {
|
||||
.search-result.active mark {
|
||||
background: rgba(255, 230, 150, 0.9);
|
||||
}
|
||||
|
||||
|
||||
/* Table of contents */
|
||||
#table-of-contents{
|
||||
float: left;
|
||||
width: var(--margin);
|
||||
/* margin-left: calc(-1 * ( (95vw - var(--content)) / 2 )); */
|
||||
margin-left: calc(-1 * ((100vi - var(--content)) / 2));
|
||||
padding-left: var(--gutter);
|
||||
box-sizing: border-box;
|
||||
|
||||
position: sticky;
|
||||
top: 5.5rem;
|
||||
max-height: calc(100vh - 6rem);
|
||||
overflow: auto;
|
||||
|
||||
font-size: .95rem;
|
||||
border-right: 1px solid var(--border, #d7d7d7);
|
||||
padding-top: .25rem;
|
||||
}
|
||||
|
||||
#table-of-contents > h2{
|
||||
margin: 0 0 .5rem;
|
||||
font-size: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .02em;
|
||||
color: var(--muted, #666);
|
||||
}
|
||||
|
||||
#text-table-of-contents ul{
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
#text-table-of-contents li{
|
||||
margin: .25rem 0;
|
||||
}
|
||||
#text-table-of-contents a{
|
||||
text-decoration: none;
|
||||
}
|
||||
#text-table-of-contents a:hover{
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#text-table-of-contents ul ul { margin-left: .75rem; opacity: .9; }
|
||||
|
||||
h2[id], h3[id], h4[id] { scroll-margin-top: 6.5rem; }
|
||||
|
||||
#text-table-of-contents a.is-active{
|
||||
/* font-weight: 700; */
|
||||
text-decoration: underline;
|
||||
background-color: var(--active-toc);
|
||||
/* border: 1px solid var(--border, #ccc); */
|
||||
}
|
||||
|
||||
|
||||
0
assets/styles/org-syntax.css
Executable file → Normal file
0
assets/styles/org-syntax.css
Executable file → Normal file
39
assets/styles/style.css
Executable file → Normal file
39
assets/styles/style.css
Executable file → Normal file
@@ -24,6 +24,7 @@
|
||||
--chip-fg: #444;
|
||||
--muted: #666;
|
||||
|
||||
--font-body: 'DM Sans', system-ui, sans-serif;
|
||||
--kb-bg-completed: #e6f4ea;
|
||||
--kb-bg-manager-review: #fff4e5;
|
||||
--kb-bg-in-progress: #e8f0fe;
|
||||
@@ -535,3 +536,41 @@ body.no-sidenotes {
|
||||
}
|
||||
}
|
||||
|
||||
/* Mermaid container for zooming and panning */
|
||||
.mermaid-container {
|
||||
overflow: auto; /* allow scrolling */
|
||||
width: 100%;
|
||||
max-height: 800px; /* adjust to your page */
|
||||
border: 1px solid #ccc; /* optional, visual boundary */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Make SVG scale properly */
|
||||
.mermaid-container .mermaid svg {
|
||||
transform-origin: top left; /* needed for scaling */
|
||||
transition: transform 0.2s ease; /* smooth zoom */
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Zoom buttons */
|
||||
.mermaid-zoom-controls {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.mermaid-zoom-controls button {
|
||||
padding: 5px 10px;
|
||||
margin-left: 5px;
|
||||
background: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mermaid-zoom-controls button:hover {
|
||||
background: #0056b3;
|
||||
}
|
||||
|
||||
@@ -1,53 +0,0 @@
|
||||
#table-of-contents{
|
||||
float: left;
|
||||
width: var(--margin);
|
||||
/* margin-left: calc(-1 * ( (95vw - var(--content)) / 2 )); */
|
||||
margin-left: calc(-1 * ((100vi - var(--content)) / 2));
|
||||
padding-left: var(--gutter);
|
||||
box-sizing: border-box;
|
||||
|
||||
position: sticky;
|
||||
top: 5.5rem;
|
||||
max-height: calc(100vh - 6rem);
|
||||
overflow: auto;
|
||||
|
||||
font-size: .95rem;
|
||||
border-right: 1px solid var(--border, #d7d7d7);
|
||||
padding-top: .25rem;
|
||||
}
|
||||
|
||||
#table-of-contents > h2{
|
||||
margin: 0 0 .5rem;
|
||||
font-size: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .02em;
|
||||
color: var(--muted, #666);
|
||||
}
|
||||
|
||||
#text-table-of-contents ul{
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
#text-table-of-contents li{
|
||||
margin: .25rem 0;
|
||||
}
|
||||
#text-table-of-contents a{
|
||||
text-decoration: none;
|
||||
}
|
||||
#text-table-of-contents a:hover{
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#text-table-of-contents ul ul { margin-left: .75rem; opacity: .9; }
|
||||
|
||||
h2[id], h3[id], h4[id] { scroll-margin-top: 6.5rem; }
|
||||
|
||||
#text-table-of-contents a.is-active{
|
||||
/* font-weight: 700; */
|
||||
text-decoration: underline;
|
||||
background-color: var(--active-toc);
|
||||
/* border: 1px solid var(--border, #ccc); */
|
||||
|
||||
}
|
||||
|
||||
@@ -27,20 +27,25 @@
|
||||
--wird-shadow: 0 1px 4px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.22);
|
||||
}
|
||||
|
||||
/* App shell */
|
||||
#wird-app {
|
||||
display: grid;
|
||||
gap: 2.5rem;
|
||||
margin-top: 2rem;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Shared panel */
|
||||
.wird-panel {
|
||||
background: var(--wird-card-bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--wird-radius);
|
||||
padding: 1.5rem;
|
||||
box-shadow: var(--wird-shadow);
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wird-panel-header {
|
||||
@@ -58,14 +63,12 @@
|
||||
font-size: 1.15rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
/* colour comes from h2 { color: var(--heading) } in styles.css */
|
||||
}
|
||||
|
||||
/* Today header */
|
||||
#today-date {
|
||||
font-size: .95rem;
|
||||
font-style: italic;
|
||||
color: var(--muted) !important; /* override heading colour */
|
||||
color: var(--muted) !important;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
}
|
||||
@@ -99,7 +102,6 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Wird cards grid */
|
||||
#wird-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
@@ -173,7 +175,6 @@
|
||||
color: var(--bg);
|
||||
}
|
||||
|
||||
/* Trend controls */
|
||||
#trend-controls { display: flex; gap: .5rem; flex-wrap: wrap; }
|
||||
|
||||
#trend-controls select {
|
||||
@@ -216,7 +217,6 @@
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* History table */
|
||||
#history-table-wrap { overflow-x: auto; }
|
||||
|
||||
#history-table {
|
||||
@@ -249,7 +249,6 @@
|
||||
|
||||
.loading-cell { color: var(--muted); font-style: italic; }
|
||||
|
||||
/* status badges extend chip pattern from styles.css */
|
||||
.badge {
|
||||
display: inline-block;
|
||||
font-family: monospace;
|
||||
@@ -264,7 +263,6 @@
|
||||
.badge.over { background: color-mix(in oklab, var(--wird-accent) 16%, var(--bg)); color: var(--wird-accent); }
|
||||
.badge.miss { background: color-mix(in oklab, var(--wird-red) 16%, var(--bg)); color: var(--wird-red); }
|
||||
|
||||
/* Primary button matches site pill style */
|
||||
.btn-primary {
|
||||
font-family: inherit;
|
||||
font-size: .78rem;
|
||||
@@ -280,7 +278,6 @@
|
||||
}
|
||||
.btn-primary:hover { opacity: .78; }
|
||||
|
||||
/* Modal */
|
||||
dialog {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
@@ -300,7 +297,6 @@ dialog::backdrop {
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
/* Modal inner layout — header / scrollable body / footer */
|
||||
dialog form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -314,10 +310,8 @@ dialog h3 {
|
||||
padding: 1.5rem 1.75rem 1.25rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
/* colour from styles.css h3 { color: var(--heading) } */
|
||||
}
|
||||
|
||||
/* Scrollable body area */
|
||||
.modal-body {
|
||||
padding: 1.4rem 1.75rem;
|
||||
overflow-y: auto;
|
||||
@@ -367,7 +361,6 @@ dialog h3 {
|
||||
box-shadow: 0 0 0 3px color-mix(in oklab, var(--wird-accent) 18%, transparent);
|
||||
}
|
||||
|
||||
/* toggle switch */
|
||||
.toggle-row { display: flex; align-items: center; gap: .52rem; }
|
||||
|
||||
input[type="checkbox"][role="switch"] {
|
||||
@@ -394,7 +387,6 @@ input[type="checkbox"][role="switch"]::after {
|
||||
input[type="checkbox"][role="switch"]:checked { background: var(--wird-green); }
|
||||
input[type="checkbox"][role="switch"]:checked::after { left: 18px; }
|
||||
|
||||
/* Shared modal footer / action row */
|
||||
.modal-footer,
|
||||
#modal-actions,
|
||||
#khatm-modal-actions,
|
||||
@@ -409,7 +401,6 @@ input[type="checkbox"][role="switch"]:checked::after { left: 18px; }
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* Cancel button — shared */
|
||||
#modal-cancel,
|
||||
#khatm-cancel,
|
||||
#motalah-cancel {
|
||||
@@ -430,13 +421,6 @@ input[type="checkbox"][role="switch"]:checked::after { left: 18px; }
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 520px) {
|
||||
#wird-cards { grid-template-columns: 1fr; }
|
||||
.wird-panel-header { flex-direction: column; align-items: flex-start; }
|
||||
}
|
||||
|
||||
/* Shaykh Meeting Panel */
|
||||
#meeting-status-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -494,7 +478,6 @@ input[type="checkbox"][role="switch"]:checked::after { left: 18px; }
|
||||
color: var(--chip-fg);
|
||||
}
|
||||
|
||||
/* 3-week cycle table */
|
||||
#meeting-cycles h3 {
|
||||
font-size: .88rem;
|
||||
color: var(--muted);
|
||||
@@ -531,14 +514,6 @@ input[type="checkbox"][role="switch"]:checked::after { left: 18px; }
|
||||
background: color-mix(in oklab, var(--bg) 90%, var(--fg) 10%);
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
#meeting-status-row { flex-direction: column; align-items: flex-start; }
|
||||
#meeting-status-msg { margin-left: 0; }
|
||||
}
|
||||
|
||||
/* Rating pips (card + modal) */
|
||||
|
||||
/* Inline card pips clickable */
|
||||
.rating-pips {
|
||||
display: flex;
|
||||
gap: .38rem;
|
||||
@@ -567,7 +542,6 @@ input[type="checkbox"][role="switch"]:checked::after { left: 18px; }
|
||||
border-color: var(--wird-accent);
|
||||
}
|
||||
|
||||
/* The target pip gets a subtle ring */
|
||||
.rating-pip.target-pip {
|
||||
box-shadow: 0 0 0 2px color-mix(in oklab, var(--wird-green) 40%, transparent);
|
||||
}
|
||||
@@ -588,7 +562,6 @@ input[type="checkbox"][role="switch"]:checked::after { left: 18px; }
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* Static pips in history table */
|
||||
.rating-pip-static {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
@@ -606,7 +579,6 @@ input[type="checkbox"][role="switch"]:checked::after { left: 18px; }
|
||||
border-color: var(--wird-accent);
|
||||
}
|
||||
|
||||
/* Modal pips larger, more tap-friendly */
|
||||
.modal-pips {
|
||||
display: flex;
|
||||
gap: .55rem;
|
||||
@@ -634,13 +606,10 @@ input[type="checkbox"][role="switch"]:checked::after { left: 18px; }
|
||||
border-color: var(--wird-accent);
|
||||
}
|
||||
|
||||
/* Pip labels on hover via title tooltip are enough,
|
||||
but add a subtle numeric hint below each pip */
|
||||
.modal-pips {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Wuqkf Qalb+ rating card pips */
|
||||
.card-pips {
|
||||
display: flex;
|
||||
gap: .4rem;
|
||||
@@ -659,7 +628,6 @@ input[type="checkbox"][role="switch"]:checked::after { left: 18px; }
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* minimum threshold marker small tick below the pip */
|
||||
.card-pip.min-marker::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@@ -683,7 +651,6 @@ input[type="checkbox"][role="switch"]:checked::after { left: 18px; }
|
||||
margin-top: .1rem;
|
||||
}
|
||||
|
||||
/* Modal pip picker */
|
||||
.modal-pips {
|
||||
display: flex;
|
||||
gap: .5rem;
|
||||
@@ -731,11 +698,6 @@ input[type="checkbox"][role="switch"]:checked::after { left: 18px; }
|
||||
|
||||
.modal-pip.selected .pip-lbl { color: var(--wird-accent); }
|
||||
|
||||
@media (max-width: 380px) {
|
||||
.pip-lbl { display: none; }
|
||||
.modal-pip { flex: unset; }
|
||||
}
|
||||
/* ── Mutāla'ah Panel ─────────────────────────────────────── */
|
||||
#motalah-today-row {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
@@ -763,7 +725,6 @@ input[type="checkbox"][role="switch"]:checked::after { left: 18px; }
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* sessions list */
|
||||
.motalah-session {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
@@ -815,17 +776,6 @@ input[type="checkbox"][role="switch"]:checked::after { left: 18px; }
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* motalah-modal-actions and cancel now in shared modal footer block above */
|
||||
|
||||
|
||||
|
||||
/* ============================================================
|
||||
Append to wird-tracker.css
|
||||
============================================================ */
|
||||
|
||||
|
||||
/* ── Nafl Prayers ────────────────────────────────────────── */
|
||||
|
||||
#nafl-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
|
||||
@@ -926,13 +876,6 @@ input[type="checkbox"][role="switch"]:checked::after { left: 18px; }
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
#nafl-cards { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
|
||||
/* ── Khatm Tracker ───────────────────────────────────────── */
|
||||
|
||||
#khatm-stats-row {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
@@ -971,7 +914,6 @@ input[type="checkbox"][role="switch"]:checked::after { left: 18px; }
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Every 10th khatm */
|
||||
.khatm-item.milestone .khatm-num {
|
||||
background: var(--wird-green);
|
||||
box-shadow: 0 0 0 3px color-mix(in oklab, var(--wird-green) 28%, transparent);
|
||||
@@ -1014,11 +956,6 @@ input[type="checkbox"][role="switch"]:checked::after { left: 18px; }
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* khatm-modal-actions and cancel now in shared modal footer block above */
|
||||
|
||||
|
||||
/* ── Heatmap ─────────────────────────────────────────────── */
|
||||
|
||||
#heatmap-panel .wird-panel-header select {
|
||||
font-family: monospace;
|
||||
font-size: .72rem;
|
||||
@@ -1033,18 +970,19 @@ input[type="checkbox"][role="switch"]:checked::after { left: 18px; }
|
||||
#heatmap-wrap { overflow-x: auto; padding-bottom: .4rem; }
|
||||
|
||||
#heatmap-month-labels {
|
||||
display: flex;
|
||||
padding-left: 28px; /* width of dow column */
|
||||
position: relative;
|
||||
padding-left: 28px;
|
||||
margin-bottom: .3rem;
|
||||
min-width: max-content;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.hm-month-lbl {
|
||||
font-family: monospace;
|
||||
font-size: .6rem;
|
||||
color: var(--muted);
|
||||
flex-shrink: 0;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#heatmap-grid {
|
||||
@@ -1136,7 +1074,6 @@ input[type="checkbox"][role="switch"]:checked::after { left: 18px; }
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
/* ── Book Search (Motalah modal) ──────────────────────────── */
|
||||
|
||||
.book-search-wrap {
|
||||
position: relative;
|
||||
@@ -1238,7 +1175,6 @@ input[type="checkbox"][role="switch"]:checked::after { left: 18px; }
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Selected books chips row */
|
||||
#selected-books-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -1280,4 +1216,521 @@ input[type="checkbox"][role="switch"]:checked::after { left: 18px; }
|
||||
color: var(--muted);
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
wird-mobile.css
|
||||
Mobile-specific fixes and overrides for wird-tracker.
|
||||
Include this AFTER wird-tracker.css.
|
||||
|
||||
Addresses:
|
||||
- Full-width overflow from heatmap / table / chart
|
||||
- Breakpoint gap between site (600px) and wird (520/540px)
|
||||
- Tap-target sizes across all interactive elements
|
||||
- Modal sheet usability
|
||||
- Grid reflowing on small screens
|
||||
============================================================ */
|
||||
|
||||
#wird-app {
|
||||
overflow-x: hidden;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
|
||||
#wird-app {
|
||||
gap: 1.25rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.wird-panel {
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.wird-panel-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: .5rem;
|
||||
}
|
||||
|
||||
#wird-cards,
|
||||
#nafl-cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
#history-table-wrap,
|
||||
#heatmap-wrap,
|
||||
#trend-chart {
|
||||
overflow-x: auto;
|
||||
max-width: 100%;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
#heatmap-month-labels,
|
||||
#heatmap-grid {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
#heatmap-month-labels {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#trend-chart {
|
||||
max-width: 100% !important;
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
#trend-stats,
|
||||
#heatmap-stats,
|
||||
#khatm-stats-row,
|
||||
#motalah-today-row {
|
||||
gap: .6rem;
|
||||
}
|
||||
|
||||
.stat-chip .stat-val,
|
||||
.motalah-today-val {
|
||||
font-size: .88rem;
|
||||
}
|
||||
|
||||
#today-progress-wrap {
|
||||
flex-wrap: wrap;
|
||||
gap: .4rem;
|
||||
}
|
||||
|
||||
#today-progress-bar {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
#meeting-status-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: .75rem;
|
||||
}
|
||||
|
||||
#meeting-status-msg {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#history-table th,
|
||||
#history-table td {
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
#history-table th {
|
||||
font-size: .62rem;
|
||||
padding: .28rem .4rem;
|
||||
}
|
||||
|
||||
#history-table td {
|
||||
font-size: .8rem;
|
||||
padding: .38rem .4rem;
|
||||
}
|
||||
|
||||
.khatm-item {
|
||||
gap: .5rem;
|
||||
}
|
||||
|
||||
.khatm-note {
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
text-overflow: unset;
|
||||
}
|
||||
|
||||
#trend-controls {
|
||||
gap: .4rem;
|
||||
}
|
||||
|
||||
#trend-controls select {
|
||||
font-size: .7rem;
|
||||
padding: .3rem .5rem;
|
||||
}
|
||||
|
||||
#nafl-completion-bar-wrap {
|
||||
flex-wrap: wrap;
|
||||
gap: .4rem;
|
||||
}
|
||||
|
||||
#book-search-results {
|
||||
max-height: 160px;
|
||||
}
|
||||
|
||||
.card-log-btn,
|
||||
.nafl-toggle {
|
||||
padding: .38rem .75rem;
|
||||
font-size: .74rem;
|
||||
min-height: 36px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rating-pip {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.card-pip {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
|
||||
dialog {
|
||||
position: fixed;
|
||||
inset: auto 0 0 0;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
border-radius: 16px 16px 0 0;
|
||||
border-bottom: none;
|
||||
margin: 0;
|
||||
max-height: 92dvh;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
dialog::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 36px;
|
||||
height: 4px;
|
||||
border-radius: 99px;
|
||||
background: var(--border);
|
||||
margin: .75rem auto .25rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
dialog form {
|
||||
max-height: calc(92dvh - 1.25rem);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
dialog h3 {
|
||||
padding: .9rem 1.1rem .85rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 1rem 1.1rem;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.modal-footer,
|
||||
#modal-actions,
|
||||
#khatm-modal-actions,
|
||||
#motalah-modal-actions {
|
||||
flex-direction: column-reverse;
|
||||
padding: .85rem 1.1rem 1.25rem;
|
||||
gap: .5rem;
|
||||
}
|
||||
|
||||
.modal-footer > *,
|
||||
#modal-actions > *,
|
||||
#khatm-modal-actions > *,
|
||||
#motalah-modal-actions > * {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#modal-cancel,
|
||||
#khatm-cancel,
|
||||
#motalah-cancel {
|
||||
padding: .65rem 1rem;
|
||||
font-size: .9rem;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
padding: .65rem 1rem;
|
||||
font-size: .9rem;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.field-group input[type="text"],
|
||||
.field-group input[type="number"],
|
||||
.field-group input[type="date"],
|
||||
.field-group select,
|
||||
.field-group textarea,
|
||||
#motalah-book-search {
|
||||
font-size: 1rem;
|
||||
padding: .72rem .8rem;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.modal-pip {
|
||||
padding: .4rem .25rem;
|
||||
}
|
||||
|
||||
.pip-dot {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 380px) {
|
||||
|
||||
.wird-panel {
|
||||
padding: .75rem;
|
||||
}
|
||||
|
||||
.wird-panel-header h2 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.card-name {
|
||||
font-size: .82rem;
|
||||
}
|
||||
|
||||
.stat-chip .stat-val,
|
||||
.motalah-today-val {
|
||||
font-size: .82rem;
|
||||
}
|
||||
|
||||
.nafl-card {
|
||||
padding: .7rem .8rem;
|
||||
}
|
||||
|
||||
.nafl-name {
|
||||
font-size: .84rem;
|
||||
}
|
||||
|
||||
.khatm-num {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-size: .62rem;
|
||||
}
|
||||
|
||||
.meeting-cycle-table {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.motalah-session {
|
||||
flex-wrap: wrap;
|
||||
gap: .3rem;
|
||||
}
|
||||
|
||||
.pip-lbl { display: none; }
|
||||
.modal-pip { flex: unset; }
|
||||
}
|
||||
/* ============================================================
|
||||
wird-export.css
|
||||
Styles for the PDF export button and modal.
|
||||
Add to wird-tracker.css (or a separate stylesheet).
|
||||
============================================================ */
|
||||
|
||||
/* ── Export button ─────────────────────────────────────── */
|
||||
.btn-export {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .42rem;
|
||||
font-family: inherit;
|
||||
font-size: .78rem;
|
||||
font-weight: 500;
|
||||
color: var(--wird-accent);
|
||||
background: transparent;
|
||||
border: 1.5px solid var(--wird-accent);
|
||||
border-radius: 999px;
|
||||
padding: .34rem .82rem;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background var(--wird-t),
|
||||
color var(--wird-t),
|
||||
box-shadow var(--wird-t),
|
||||
transform var(--wird-t);
|
||||
white-space: nowrap;
|
||||
/* Accessible focus */
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.btn-export:hover {
|
||||
background: var(--wird-accent);
|
||||
color: var(--bg);
|
||||
box-shadow: 0 2px 8px color-mix(in oklab, var(--wird-accent) 30%, transparent);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-export:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.btn-export:focus-visible {
|
||||
outline: 2px solid var(--wird-accent);
|
||||
}
|
||||
|
||||
.btn-export svg {
|
||||
flex-shrink: 0;
|
||||
transition: transform var(--wird-t);
|
||||
}
|
||||
|
||||
.btn-export:hover svg {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
/* ── Export modal ──────────────────────────────────────── */
|
||||
.export-modal-desc {
|
||||
font-size: .85rem;
|
||||
color: var(--muted);
|
||||
margin: 0 0 1.25rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
/* Date row: two pickers side by side */
|
||||
.export-date-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: .75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.export-date-row .field-group {
|
||||
flex: 1;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.export-date-sep {
|
||||
font-family: monospace;
|
||||
font-size: .9rem;
|
||||
color: var(--muted);
|
||||
padding-bottom: .65rem;
|
||||
flex-shrink: 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Quick presets */
|
||||
.export-presets {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .4rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.export-preset {
|
||||
font-family: monospace;
|
||||
font-size: .68rem;
|
||||
padding: .2rem .55rem;
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--code-bg);
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
transition: border-color var(--wird-t), color var(--wird-t), background var(--wird-t);
|
||||
}
|
||||
|
||||
.export-preset:hover {
|
||||
border-color: var(--wird-accent);
|
||||
color: var(--wird-accent);
|
||||
}
|
||||
|
||||
.export-preset:focus-visible {
|
||||
outline: 2px solid var(--wird-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.export-preset.active {
|
||||
border-color: var(--wird-accent);
|
||||
background: color-mix(in oklab, var(--wird-accent) 12%, var(--bg));
|
||||
color: var(--wird-accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Checkbox options */
|
||||
.export-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .55rem;
|
||||
padding: .85rem 1rem;
|
||||
border-radius: var(--wird-radius);
|
||||
background: color-mix(in oklab, var(--bg) 90%, var(--fg) 10%);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.export-option-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .55rem;
|
||||
font-size: .85rem;
|
||||
color: var(--fg);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.export-option-row input[type="checkbox"] {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
accent-color: var(--wird-accent);
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#export-modal-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: .75rem;
|
||||
padding: 1.1rem 1.75rem 1.4rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
#export-cancel {
|
||||
font-family: inherit;
|
||||
font-size: .82rem;
|
||||
background: none;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
padding: .44rem 1rem;
|
||||
cursor: pointer;
|
||||
color: var(--muted);
|
||||
transition: border-color var(--wird-t), color var(--wird-t);
|
||||
}
|
||||
|
||||
#export-cancel:hover {
|
||||
border-color: var(--fg);
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
#export-submit:disabled {
|
||||
opacity: .6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Mobile overrides */
|
||||
@media (max-width: 600px) {
|
||||
.export-date-row {
|
||||
flex-direction: column;
|
||||
gap: .5rem;
|
||||
}
|
||||
|
||||
.export-date-sep { display: none; }
|
||||
|
||||
.export-presets { gap: .35rem; }
|
||||
|
||||
.export-preset {
|
||||
padding: .3rem .6rem;
|
||||
font-size: .72rem;
|
||||
}
|
||||
|
||||
#export-modal-actions {
|
||||
flex-direction: column-reverse;
|
||||
padding: .85rem 1.1rem 1.25rem;
|
||||
gap: .5rem;
|
||||
}
|
||||
|
||||
#export-modal-actions > * {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#export-cancel {
|
||||
padding: .65rem 1rem;
|
||||
font-size: .9rem;
|
||||
min-height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
1520
assets/styles/wird-tracker.sync-conflict-20260325-231826-NE5VEIB.css
Normal file
1520
assets/styles/wird-tracker.sync-conflict-20260325-231826-NE5VEIB.css
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user