Initial commit — Rosary Presenter App
Full source for loveandrosary.com: slide-based Rosary/novena/Divine Mercy Chaplet presentation tool with multi-user roles, SVG bead ring, audio uploads, donate strip, and public session profiles. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,532 @@
|
||||
/* =========================================================
|
||||
present.css — Full-screen presentation styles
|
||||
========================================================= */
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--bg: #0a0a1a;
|
||||
--text: #f0f0f0;
|
||||
--gold: #FFD700;
|
||||
--blue: #87CEEB;
|
||||
--mystery: #c8a84b;
|
||||
--dim: rgba(255,255,255,0.35);
|
||||
--nav-bg: rgba(0,0,0,0.55);
|
||||
--font-prayer: Georgia, 'Times New Roman', serif;
|
||||
--font-ui: system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: var(--font-prayer);
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
Rosary overlay
|
||||
---------------------------------------------------------------- */
|
||||
#rosary-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
#rosary-overlay svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
Presenter wrapper
|
||||
---------------------------------------------------------------- */
|
||||
#presenter {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 48px 72px 80px; /* space for bead ring */
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
Slide content area
|
||||
---------------------------------------------------------------- */
|
||||
#slide-content {
|
||||
width: 100%;
|
||||
max-width: 1100px;
|
||||
flex: 1;
|
||||
min-height: 0; /* CRITICAL: without this, flex:1 never shrinks below
|
||||
content height, so overflow-y:auto never activates */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
/* Thin, dark scrollbar — unobtrusive on a presentation screen */
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(255,255,255,0.15) transparent;
|
||||
-webkit-overflow-scrolling: touch; /* iOS momentum scroll */
|
||||
}
|
||||
#slide-content::-webkit-scrollbar { width: 4px; }
|
||||
#slide-content::-webkit-scrollbar-track { background: transparent; }
|
||||
#slide-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
Cover slide
|
||||
---------------------------------------------------------------- */
|
||||
.cover-slide {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
#cover-photo-wrap {
|
||||
max-height: 38vh;
|
||||
overflow: hidden;
|
||||
border-radius: 6px;
|
||||
position: relative;
|
||||
}
|
||||
#cover-photo {
|
||||
max-height: 38vh;
|
||||
max-width: 60vw;
|
||||
border-radius: 6px;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
/* Vignette effect */
|
||||
mask-image: radial-gradient(ellipse 90% 90% at center, black 60%, transparent 100%);
|
||||
-webkit-mask-image: radial-gradient(ellipse 90% 90% at center, black 60%, transparent 100%);
|
||||
}
|
||||
#cover-photo-wrap.no-photo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#cover-title {
|
||||
font-size: 2.6rem;
|
||||
font-weight: normal;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--gold);
|
||||
text-shadow: 0 0 20px rgba(255,215,0,0.4);
|
||||
}
|
||||
|
||||
#cover-body {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.7;
|
||||
white-space: pre-line;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
Prayer slide
|
||||
---------------------------------------------------------------- */
|
||||
#prayer-slide {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
#slide-title {
|
||||
font-size: 1.1rem;
|
||||
font-family: var(--font-ui);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.15em;
|
||||
color: var(--dim);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
#slide-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
#leader-wrap, #all-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-family: var(--font-ui);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
.leader-label { color: var(--gold); }
|
||||
.all-label { color: var(--blue); }
|
||||
|
||||
#leader-text, #all-text,
|
||||
#litany-leader, #litany-all {
|
||||
font-size: clamp(1.6rem, 3.2vw, 2.4rem);
|
||||
line-height: 1.65;
|
||||
white-space: pre-line;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* When only one section is present, increase size */
|
||||
.single-section #leader-text,
|
||||
.single-section #all-text,
|
||||
.single-section #litany-leader,
|
||||
.single-section #litany-all {
|
||||
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
Mystery slide
|
||||
---------------------------------------------------------------- */
|
||||
#mystery-slide {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.mystery-number {
|
||||
font-family: var(--font-ui);
|
||||
font-size: 0.9rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
color: var(--mystery);
|
||||
}
|
||||
|
||||
#mystery-slide h2 {
|
||||
font-size: 2.4rem;
|
||||
font-weight: normal;
|
||||
color: var(--gold);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
#mystery-fruit {
|
||||
font-size: 1.5rem;
|
||||
color: var(--blue);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
Litany slide
|
||||
---------------------------------------------------------------- */
|
||||
#litany-slide {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
#litany-title {
|
||||
font-size: 1.1rem;
|
||||
font-family: var(--font-ui);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.15em;
|
||||
color: var(--dim);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
#litany-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 22px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#litany-leader-wrap, #litany-all-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
Closing slide
|
||||
---------------------------------------------------------------- */
|
||||
#closing-slide {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
#closing-photo-wrap {
|
||||
max-height: 34vh;
|
||||
overflow: hidden;
|
||||
border-radius: 6px;
|
||||
}
|
||||
#closing-photo {
|
||||
max-height: 34vh;
|
||||
max-width: 55vw;
|
||||
border-radius: 6px;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
mask-image: radial-gradient(ellipse 90% 90% at center, black 60%, transparent 100%);
|
||||
-webkit-mask-image: radial-gradient(ellipse 90% 90% at center, black 60%, transparent 100%);
|
||||
}
|
||||
|
||||
.closing-cross {
|
||||
font-size: 2.8rem;
|
||||
color: var(--gold);
|
||||
text-shadow: 0 0 30px rgba(255,215,0,0.5);
|
||||
}
|
||||
|
||||
#closing-slide h2 {
|
||||
font-size: 1.9rem;
|
||||
font-weight: normal;
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
#closing-subtitle {
|
||||
font-size: 1.1rem;
|
||||
color: var(--dim);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#closing-body {
|
||||
font-size: clamp(1.5rem, 3vw, 2.2rem);
|
||||
line-height: 1.75;
|
||||
white-space: pre-line;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
Navigation bar
|
||||
---------------------------------------------------------------- */
|
||||
#presenter-nav {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
background: var(--nav-bg);
|
||||
backdrop-filter: blur(8px);
|
||||
border-radius: 40px;
|
||||
padding: 10px 24px;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
/* Thin vertical divider inside the nav pill */
|
||||
.nav-sep {
|
||||
width: 1px;
|
||||
height: 18px;
|
||||
background: rgba(255,255,255,0.18);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Exit button — smaller and muted vs the main nav buttons */
|
||||
.nav-exit {
|
||||
font-size: 1.1rem;
|
||||
color: rgba(255,255,255,0.4);
|
||||
padding: 6px 10px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.nav-exit:hover:not(:disabled) {
|
||||
background: rgba(255,255,255,0.08);
|
||||
color: rgba(255,255,255,0.85);
|
||||
}
|
||||
|
||||
/* Audio toggle button */
|
||||
.nav-audio {
|
||||
font-size: 1.1rem;
|
||||
color: rgba(255,255,255,0.4);
|
||||
padding: 6px 10px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.nav-audio:hover:not(:disabled) {
|
||||
background: rgba(255,255,255,0.08);
|
||||
color: rgba(255,255,255,0.85);
|
||||
}
|
||||
.nav-audio.audio-on {
|
||||
color: #c9973d;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text);
|
||||
font-size: 1.4rem;
|
||||
cursor: pointer;
|
||||
padding: 6px 14px;
|
||||
border-radius: 6px;
|
||||
transition: background 0.15s;
|
||||
line-height: 1;
|
||||
}
|
||||
.nav-btn:hover:not(:disabled) {
|
||||
background: rgba(255,255,255,0.12);
|
||||
}
|
||||
.nav-btn:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#slide-counter {
|
||||
font-family: var(--font-ui);
|
||||
font-size: 0.9rem;
|
||||
color: var(--dim);
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
Resume toast — auto-fades after resume
|
||||
---------------------------------------------------------------- */
|
||||
#resume-toast {
|
||||
position: fixed;
|
||||
top: 14px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(255,215,0,0.12);
|
||||
border: 1px solid rgba(255,215,0,0.3);
|
||||
color: var(--gold);
|
||||
font-family: var(--font-ui);
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.06em;
|
||||
padding: 5px 18px;
|
||||
border-radius: 20px;
|
||||
z-index: 30;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
#resume-toast.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
Keyboard hint
|
||||
---------------------------------------------------------------- */
|
||||
#key-hint {
|
||||
position: fixed;
|
||||
top: 12px;
|
||||
right: 16px;
|
||||
font-family: var(--font-ui);
|
||||
font-size: 0.7rem;
|
||||
color: rgba(255,255,255,0.2);
|
||||
z-index: 20;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
Slide transitions
|
||||
---------------------------------------------------------------- */
|
||||
#slide-content > div {
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(6px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
Fullscreen state — hide nav hint
|
||||
---------------------------------------------------------------- */
|
||||
:fullscreen #key-hint,
|
||||
:-webkit-full-screen #key-hint {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
Repeat-run badge — shows "2 of 3" when same content repeats.
|
||||
Lives inside the slide panel, above the title (inline, not fixed).
|
||||
---------------------------------------------------------------- */
|
||||
.repeat-badge {
|
||||
display: block;
|
||||
align-self: center;
|
||||
background: rgba(255, 215, 0, 0.12);
|
||||
border: 1px solid rgba(255, 215, 0, 0.35);
|
||||
color: var(--gold);
|
||||
font-family: var(--font-ui);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
padding: 4px 14px;
|
||||
border-radius: 20px;
|
||||
pointer-events: none;
|
||||
animation: badgePulse 0.4s ease;
|
||||
}
|
||||
|
||||
@keyframes badgePulse {
|
||||
from { opacity: 0; transform: scale(0.85); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
Mobile — tablets and phones (≤ 768 px)
|
||||
---------------------------------------------------------------- */
|
||||
@media (max-width: 768px) {
|
||||
/* Tighter inset: beads sit 28 px from edge (center) + 10 px radius = 38 px.
|
||||
48 px padding gives 10 px clearance on all sides. */
|
||||
#presenter {
|
||||
padding: 44px 48px 68px;
|
||||
}
|
||||
|
||||
/* Shrink fixed-size text that doesn't use clamp() */
|
||||
#cover-title { font-size: 1.9rem; }
|
||||
#cover-body { font-size: 1.25rem; }
|
||||
#mystery-slide h2 { font-size: 1.8rem; }
|
||||
#mystery-fruit { font-size: 1.15rem; }
|
||||
#closing-slide h2 { font-size: 1.5rem; }
|
||||
#closing-body { font-size: 1.1rem; }
|
||||
|
||||
/* Compact nav pill */
|
||||
#presenter-nav {
|
||||
padding: 8px 14px;
|
||||
gap: 8px;
|
||||
bottom: 14px;
|
||||
}
|
||||
.nav-exit { font-size: 1rem; padding: 6px 8px; }
|
||||
|
||||
/* WCAG 2.5.5 minimum 44 × 44 px touch target */
|
||||
.nav-btn {
|
||||
font-size: 1.4rem;
|
||||
padding: 6px 14px;
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
#slide-counter {
|
||||
min-width: 76px;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
/* Keyboard hint is irrelevant on touch devices */
|
||||
#key-hint { display: none; }
|
||||
|
||||
/* Cover photo — a bit smaller on portrait phones */
|
||||
#cover-photo-wrap,
|
||||
#cover-photo { max-height: 32vh; }
|
||||
|
||||
#closing-photo-wrap,
|
||||
#closing-photo { max-height: 28vh; }
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
Mobile — phones (≤ 480 px)
|
||||
---------------------------------------------------------------- */
|
||||
@media (max-width: 480px) {
|
||||
#presenter {
|
||||
padding: 44px 40px 66px;
|
||||
}
|
||||
|
||||
#cover-title { font-size: 1.4rem; }
|
||||
#mystery-slide h2 { font-size: 1.4rem; }
|
||||
#mystery-fruit { font-size: 1.05rem; }
|
||||
|
||||
/* Slightly smaller slide title label */
|
||||
#slide-title,
|
||||
#litany-title { font-size: 0.9rem; }
|
||||
}
|
||||
@@ -0,0 +1,617 @@
|
||||
/* public.css — Clean public-facing styles */
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
|
||||
:root {
|
||||
--navy: #1e3a5f;
|
||||
--gold: #c9973d;
|
||||
--text: #111827;
|
||||
--muted: #6b7280;
|
||||
--bg: #f9fafb;
|
||||
--white: #ffffff;
|
||||
--border:#e5e7eb;
|
||||
--radius:8px;
|
||||
--shadow:0 1px 4px rgba(0,0,0,.08);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* ── Nav ── */
|
||||
.pub-nav {
|
||||
background: var(--navy);
|
||||
color: #fff;
|
||||
padding: 0 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 56px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,.15);
|
||||
}
|
||||
|
||||
.pub-nav-brand {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
letter-spacing: .01em;
|
||||
}
|
||||
|
||||
.pub-nav-brand span { color: var(--gold); }
|
||||
|
||||
.pub-nav-links {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pub-nav-links a {
|
||||
color: rgba(255,255,255,.85);
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
padding: 6px 14px;
|
||||
border-radius: 6px;
|
||||
transition: background .15s;
|
||||
}
|
||||
|
||||
.pub-nav-links a:hover { background: rgba(255,255,255,.12); }
|
||||
|
||||
.pub-nav-links a.btn-nav {
|
||||
background: var(--gold);
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.pub-nav-links a.btn-nav:hover { background: #b8872e; }
|
||||
|
||||
/* ── Hero ── */
|
||||
.pub-hero {
|
||||
background: linear-gradient(135deg, var(--navy) 0%, #2d5a8e 100%);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 64px 24px 56px;
|
||||
}
|
||||
|
||||
.pub-hero h1 {
|
||||
font-size: clamp(28px, 5vw, 48px);
|
||||
font-weight: 800;
|
||||
margin: 0 0 12px;
|
||||
letter-spacing: -.01em;
|
||||
}
|
||||
|
||||
.pub-hero p {
|
||||
font-size: 18px;
|
||||
color: rgba(255,255,255,.8);
|
||||
margin: 0;
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* ── Section ── */
|
||||
.pub-section {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 48px 24px;
|
||||
}
|
||||
|
||||
.pub-section h2 {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: var(--navy);
|
||||
margin: 0 0 24px;
|
||||
border-bottom: 2px solid var(--gold);
|
||||
padding-bottom: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* ── Card grid ── */
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.rosary-card {
|
||||
background: var(--white);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
border: 1px solid var(--border);
|
||||
overflow: hidden;
|
||||
color: var(--text);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.rosary-card-photo {
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
background: #e5e7eb;
|
||||
}
|
||||
|
||||
.rosary-card-photo-placeholder {
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
background: linear-gradient(135deg, var(--navy) 0%, #2d5a8e 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 48px;
|
||||
color: rgba(255,255,255,.5);
|
||||
}
|
||||
|
||||
.rosary-card-body {
|
||||
padding: 16px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.rosary-card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 4px;
|
||||
color: var(--navy);
|
||||
}
|
||||
|
||||
.rosary-card-meta {
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.rosary-card-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid var(--border);
|
||||
padding-top: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.rosary-card-by {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.rosary-card-link {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--navy);
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.rosary-card-link:hover {
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
.badge-novena {
|
||||
display: inline-block;
|
||||
background: #ede9fe;
|
||||
color: #5b21b6;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
padding: 2px 8px;
|
||||
border-radius: 99px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .04em;
|
||||
}
|
||||
|
||||
/* ── Profile header ── */
|
||||
.profile-header {
|
||||
background: var(--white);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 32px 24px;
|
||||
}
|
||||
|
||||
.profile-header-inner {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.profile-avatar {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 50%;
|
||||
background: var(--navy);
|
||||
color: #fff;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.profile-info h1 {
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
margin: 0 0 2px;
|
||||
color: var(--navy);
|
||||
}
|
||||
|
||||
.profile-info p {
|
||||
font-size: 14px;
|
||||
color: var(--muted);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ── Empty state ── */
|
||||
.pub-empty {
|
||||
text-align: center;
|
||||
padding: 56px 24px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.pub-empty .cross {
|
||||
font-size: 48px;
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
opacity: .3;
|
||||
}
|
||||
|
||||
.pub-empty p {
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ── Donate strip ── */
|
||||
.donate-strip {
|
||||
text-align: center;
|
||||
padding: 28px 24px 32px;
|
||||
background: var(--white);
|
||||
border-top: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.donate-strip-text {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: .03em;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.donate-strip-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
letter-spacing: .01em;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
background: linear-gradient(135deg, var(--navy) 0%, #2d5a8e 100%);
|
||||
padding: 11px 28px;
|
||||
border-radius: 99px;
|
||||
box-shadow: 0 2px 10px rgba(30,58,95,.25);
|
||||
transition: transform .15s, box-shadow .15s, background .15s;
|
||||
}
|
||||
|
||||
.donate-strip-link:hover {
|
||||
background: linear-gradient(135deg, #c9973d 0%, #b8872e 100%);
|
||||
box-shadow: 0 4px 16px rgba(201,151,61,.35);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* ── Footer ── */
|
||||
.pub-footer {
|
||||
text-align: center;
|
||||
padding: 24px;
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
border-top: 1px solid var(--border);
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
/* ── Novena hero (day-picker page) ── */
|
||||
.novena-hero {
|
||||
background: linear-gradient(135deg, var(--navy) 0%, #2d5a8e 100%);
|
||||
color: #fff;
|
||||
padding: 48px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.novena-hero-photo-wrap {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.novena-hero-photo {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
border: 3px solid rgba(255,255,255,.25);
|
||||
display: block;
|
||||
mask-image: radial-gradient(ellipse 90% 90% at center, black 60%, transparent 100%);
|
||||
-webkit-mask-image: radial-gradient(ellipse 90% 90% at center, black 60%, transparent 100%);
|
||||
}
|
||||
|
||||
.novena-hero-cross {
|
||||
font-size: 72px;
|
||||
color: rgba(255,255,255,.3);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.novena-hero-text {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.novena-hero-label {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .12em;
|
||||
color: var(--gold);
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.novena-hero-title {
|
||||
font-size: clamp(24px, 4vw, 40px);
|
||||
font-weight: 800;
|
||||
margin: 0 0 8px;
|
||||
letter-spacing: -.01em;
|
||||
}
|
||||
|
||||
.novena-hero-subject {
|
||||
font-size: 18px;
|
||||
margin: 0 0 4px;
|
||||
color: rgba(255,255,255,.9);
|
||||
}
|
||||
|
||||
.novena-hero-dates {
|
||||
font-size: 14px;
|
||||
color: rgba(255,255,255,.6);
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.novena-hero-by {
|
||||
font-size: 13px;
|
||||
color: rgba(255,255,255,.5);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ── Novena day grid ── */
|
||||
.novena-days-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.novena-day-card {
|
||||
background: var(--white);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 20px 18px;
|
||||
box-shadow: var(--shadow);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.novena-day-missing {
|
||||
background: #f9fafb;
|
||||
opacity: .55;
|
||||
}
|
||||
|
||||
.novena-day-number {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .08em;
|
||||
color: var(--navy);
|
||||
}
|
||||
|
||||
.novena-day-mysteries {
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.novena-day-link {
|
||||
display: inline-block;
|
||||
margin-top: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--navy);
|
||||
text-decoration: none;
|
||||
border-top: 1px solid var(--border);
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.novena-day-link:hover {
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
/* ── Search bar ── */
|
||||
.search-wrap {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 28px 24px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.home-search-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: var(--white);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 40px;
|
||||
padding: 0 18px;
|
||||
box-shadow: var(--shadow);
|
||||
transition: border-color .15s, box-shadow .15s;
|
||||
}
|
||||
|
||||
.home-search-row:focus-within {
|
||||
border-color: var(--navy);
|
||||
box-shadow: 0 0 0 3px rgba(30,58,95,.1);
|
||||
}
|
||||
|
||||
.home-search-icon {
|
||||
color: var(--muted);
|
||||
font-size: 15px;
|
||||
flex-shrink: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.home-search-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
font-size: 15px;
|
||||
font-family: inherit;
|
||||
color: var(--text);
|
||||
padding: 13px 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.home-search-input::placeholder { color: var(--muted); }
|
||||
|
||||
.home-search-clear {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--muted);
|
||||
font-size: 16px;
|
||||
padding: 4px 6px;
|
||||
border-radius: 4px;
|
||||
display: none;
|
||||
line-height: 1;
|
||||
transition: color .15s;
|
||||
}
|
||||
.home-search-clear:hover { color: var(--text); }
|
||||
.home-search-clear.visible { display: block; }
|
||||
|
||||
/* User profile links that appear when search matches a user */
|
||||
.search-user-results {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.search-user-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: var(--white);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 99px;
|
||||
padding: 5px 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--navy);
|
||||
text-decoration: none;
|
||||
box-shadow: var(--shadow);
|
||||
transition: background .15s, border-color .15s;
|
||||
}
|
||||
.search-user-pill:hover {
|
||||
background: var(--navy);
|
||||
color: #fff;
|
||||
border-color: var(--navy);
|
||||
}
|
||||
|
||||
/* No-results message */
|
||||
.search-no-results {
|
||||
display: none;
|
||||
text-align: center;
|
||||
padding: 40px 24px;
|
||||
color: var(--muted);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/* ── Pinned / Featured section ── */
|
||||
.pinned-section {
|
||||
background: linear-gradient(180deg, #fefdf6 0%, var(--bg) 100%);
|
||||
border-bottom: 1px solid #e8dfc0;
|
||||
}
|
||||
|
||||
.pinned-section .pub-section {
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
.pinned-section .pub-section h2 {
|
||||
color: #8a6820;
|
||||
border-bottom-color: var(--gold);
|
||||
}
|
||||
|
||||
/* Gold top-border on pinned cards */
|
||||
.rosary-card.is-pinned {
|
||||
border-top: 3px solid var(--gold);
|
||||
}
|
||||
|
||||
/* Pin/unpin toggle button — floats top-right of card, admin-only */
|
||||
.rosary-card {
|
||||
position: relative; /* anchor for .pin-btn */
|
||||
}
|
||||
|
||||
.pin-btn {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
background: rgba(255,255,255,.88);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 3px 7px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
color: var(--muted);
|
||||
transition: background .15s, color .15s, border-color .15s;
|
||||
z-index: 2;
|
||||
}
|
||||
.pin-btn:hover {
|
||||
background: var(--gold);
|
||||
border-color: var(--gold);
|
||||
color: #fff;
|
||||
}
|
||||
.pin-btn.is-pinned {
|
||||
color: #8a6820;
|
||||
border-color: var(--gold);
|
||||
background: #fff9e6;
|
||||
}
|
||||
|
||||
/* Badge for Divine Mercy Novena */
|
||||
.badge-divine-mercy {
|
||||
display: inline-block;
|
||||
background: #fce7e7;
|
||||
color: #9b1c1c;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
padding: 2px 8px;
|
||||
border-radius: 99px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .04em;
|
||||
}
|
||||
|
||||
/* ── Responsive ── */
|
||||
@media (max-width: 600px) {
|
||||
.pub-nav { padding: 0 16px; }
|
||||
.pub-hero { padding: 40px 16px; }
|
||||
.pub-section { padding: 32px 16px; }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
.search-wrap { padding: 20px 16px 0; }
|
||||
}
|
||||
@@ -0,0 +1,576 @@
|
||||
/* =========================================================
|
||||
setup.css — Admin / setup page styles
|
||||
========================================================= */
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--bg: #f8f9fb;
|
||||
--bg-card: #ffffff;
|
||||
--border: #d0d5dd;
|
||||
--text: #1d2027;
|
||||
--muted: #6b7280;
|
||||
--primary: #2563eb;
|
||||
--primary-h: #1d4ed8;
|
||||
--danger: #dc2626;
|
||||
--danger-h: #b91c1c;
|
||||
--gold: #b8860b;
|
||||
--success-bg: #f0fdf4;
|
||||
--success-border: #86efac;
|
||||
--error-bg: #fef2f2;
|
||||
--error-border: #fca5a5;
|
||||
--radius: 8px;
|
||||
--font: system-ui, -apple-system, 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
html, body {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: var(--font);
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
Login page
|
||||
---------------------------------------------------------------- */
|
||||
.login-page {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.login-box {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 40px 48px;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.06);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-box h1 {
|
||||
font-size: 1.6rem;
|
||||
color: var(--gold);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.login-box h2 {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
color: var(--muted);
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
Admin container & header
|
||||
---------------------------------------------------------------- */
|
||||
.admin-container {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px 60px;
|
||||
}
|
||||
|
||||
.admin-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.admin-header h1 {
|
||||
font-size: 1.4rem;
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
main h2 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
Buttons
|
||||
---------------------------------------------------------------- */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 8px 18px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
border: 1px solid transparent;
|
||||
transition: background 0.15s, border-color 0.15s, opacity 0.15s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
|
||||
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
}
|
||||
.btn-primary:hover:not(:disabled) { background: var(--primary-h); }
|
||||
|
||||
.btn-secondary {
|
||||
background: #fff;
|
||||
color: var(--text);
|
||||
border-color: var(--border);
|
||||
}
|
||||
.btn-secondary:hover:not(:disabled) { background: #f3f4f6; }
|
||||
|
||||
.btn-danger {
|
||||
background: var(--danger);
|
||||
color: #fff;
|
||||
}
|
||||
.btn-danger:hover:not(:disabled) { background: var(--danger-h); }
|
||||
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
border-color: transparent;
|
||||
}
|
||||
.btn-ghost:hover:not(:disabled) { background: #f3f4f6; color: var(--text); }
|
||||
|
||||
.btn-full { width: 100%; }
|
||||
.btn-large { padding: 12px 28px; font-size: 1rem; }
|
||||
|
||||
.btn-sm {
|
||||
padding: 5px 12px;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
Forms
|
||||
---------------------------------------------------------------- */
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-size: 0.88rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="file"],
|
||||
select,
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 9px 13px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
font-size: 0.95rem;
|
||||
font-family: var(--font);
|
||||
background: #fff;
|
||||
color: var(--text);
|
||||
outline: none;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
max-width: 520px;
|
||||
}
|
||||
input[type="file"] {
|
||||
padding: 6px 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input:focus, select:focus {
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
|
||||
}
|
||||
|
||||
.required {
|
||||
color: var(--danger);
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.help-text {
|
||||
margin-top: 5px;
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-top: 32px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
Alerts
|
||||
---------------------------------------------------------------- */
|
||||
.alert {
|
||||
padding: 12px 16px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 20px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
.alert-error {
|
||||
background: var(--error-bg);
|
||||
border-color: var(--error-border);
|
||||
color: #991b1b;
|
||||
}
|
||||
.alert-success {
|
||||
background: var(--success-bg);
|
||||
border-color: var(--success-border);
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
Novena auto-create notice
|
||||
---------------------------------------------------------------- */
|
||||
.novena-auto-notice {
|
||||
padding: 12px 16px;
|
||||
background: #f0f9ff;
|
||||
border: 1px solid #bae6fd;
|
||||
color: #0c4a6e;
|
||||
border-radius: 6px;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Read-only field value display */
|
||||
.form-static {
|
||||
padding: 9px 13px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: #f8f9fb;
|
||||
font-size: 0.95rem;
|
||||
color: var(--muted);
|
||||
max-width: 520px;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
Upload status
|
||||
---------------------------------------------------------------- */
|
||||
.upload-status {
|
||||
margin-top: 8px;
|
||||
font-size: 0.85rem;
|
||||
padding: 6px 10px;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
.upload-status.uploading { background: #eff6ff; color: #1d4ed8; }
|
||||
.upload-status.success { background: var(--success-bg); color: #166534; }
|
||||
.upload-status.error { background: var(--error-bg); color: #991b1b; }
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
Photo preview in edit mode
|
||||
---------------------------------------------------------------- */
|
||||
.photo-preview {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.photo-preview img {
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
Sessions table
|
||||
---------------------------------------------------------------- */
|
||||
.sessions-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.sessions-table th {
|
||||
text-align: left;
|
||||
padding: 10px 14px;
|
||||
border-bottom: 2px solid var(--border);
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sessions-table td {
|
||||
padding: 13px 14px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.sessions-table tbody tr:hover {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.session-name {
|
||||
font-weight: 600;
|
||||
}
|
||||
.subject-name {
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
font-size: 0.82rem;
|
||||
color: var(--muted);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
Novena group rows — index.php
|
||||
---------------------------------------------------------------- */
|
||||
.novena-group-row {
|
||||
background: rgba(37, 99, 235, 0.03);
|
||||
}
|
||||
.novena-group-row td:first-child {
|
||||
font-weight: 600;
|
||||
}
|
||||
.novena-group-icon {
|
||||
color: var(--gold);
|
||||
margin-right: 4px;
|
||||
}
|
||||
.novena-badge {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
padding: 1px 8px;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
border-radius: 20px;
|
||||
background: rgba(37, 99, 235, 0.1);
|
||||
color: var(--primary);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
Cards — novena_group.php
|
||||
---------------------------------------------------------------- */
|
||||
.card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 28px 32px;
|
||||
}
|
||||
.card-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
Breadcrumb — novena_group.php
|
||||
---------------------------------------------------------------- */
|
||||
.breadcrumb {
|
||||
font-size: 0.88rem;
|
||||
color: var(--muted);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.breadcrumb a {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
.breadcrumb a:hover { text-decoration: underline; }
|
||||
.bc-sep {
|
||||
margin: 0 8px;
|
||||
color: var(--border);
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
Missing day row
|
||||
---------------------------------------------------------------- */
|
||||
.day-missing td {
|
||||
color: var(--muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
Alert banners
|
||||
---------------------------------------------------------------- */
|
||||
.alert {
|
||||
border-radius: var(--radius);
|
||||
padding: 14px 18px;
|
||||
margin-bottom: 24px;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
.alert-success {
|
||||
background: var(--success-bg);
|
||||
border: 1px solid var(--success-border);
|
||||
color: #166534;
|
||||
}
|
||||
.alert-error {
|
||||
background: var(--error-bg);
|
||||
border: 1px solid var(--error-border);
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
Form grid (two columns on wider screens)
|
||||
---------------------------------------------------------------- */
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0 32px;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.form-grid { grid-template-columns: 1fr; }
|
||||
.card { padding: 20px 16px; }
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
Photo preview
|
||||
---------------------------------------------------------------- */
|
||||
.photo-preview-wrap {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.photo-preview {
|
||||
max-height: 120px;
|
||||
max-width: 200px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border);
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
Form label helpers
|
||||
---------------------------------------------------------------- */
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 0.88rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
color: var(--text);
|
||||
}
|
||||
.form-help {
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted);
|
||||
margin-top: 4px;
|
||||
}
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 9px 13px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
font-size: 0.95rem;
|
||||
font-family: var(--font);
|
||||
background: var(--bg-card);
|
||||
color: var(--text);
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
|
||||
}
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.radio-row {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.radio-row label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
Empty state
|
||||
---------------------------------------------------------------- */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 24px;
|
||||
color: var(--muted);
|
||||
}
|
||||
.empty-state p {
|
||||
margin-bottom: 16px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
Mobile — tablets and phones (≤ 768 px)
|
||||
---------------------------------------------------------------- */
|
||||
@media (max-width: 768px) {
|
||||
.admin-container {
|
||||
padding: 0 16px 40px;
|
||||
}
|
||||
|
||||
.admin-header {
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
padding: 14px 0;
|
||||
}
|
||||
|
||||
.admin-header h1 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
/* Make the sessions table horizontally scrollable */
|
||||
.sessions-table-wrap {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
margin: 0 -16px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.sessions-table {
|
||||
min-width: 560px; /* keep columns readable while allowing scroll */
|
||||
}
|
||||
|
||||
/* Stack action buttons vertically */
|
||||
.actions {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Forms: full-width inputs on small screens */
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="file"],
|
||||
select,
|
||||
textarea {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.form-actions .btn {
|
||||
flex: 1 1 auto;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user