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; }
|
||||
}
|
||||
Reference in New Issue
Block a user