/* ====== Imports & Variables ====== */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@400;700&family=Poppins:wght@400;600&display=swap'); :root { /* Light Theme (Default) */ --bg-primary: #f8f9fa; --bg-secondary: #ffffff; --text-primary: #212529; --text-secondary: #6c757d; --accent-primary: #007bff; --accent-primary-hover: #0056b3; --border-color: #dee2e6; --shadow-color: rgba(0, 0, 0, 0.1); --highlight-bg: #fff3cd; --font-primary: 'Poppins', sans-serif; --font-hebrew: 'Noto Sans Hebrew', sans-serif; --spacing-unit: 8px; --border-radius: 4px; --shadow-sm: 0 1px 2px var(--shadow-color); --shadow-md: 0 4px 6px var(--shadow-color); } /* Dark Theme (can be toggled with a class on ) */ body.dark-theme { --bg-primary: #121212; --bg-secondary: #1e1e1e; --text-primary: #e0e0e0; --text-secondary: #a0a0a0; --accent-primary: #4dabf7; --accent-primary-hover: #1e88e5; --border-color: #444; --shadow-color: rgba(255, 255, 255, 0.1); --highlight-bg: #4a412a; } /* ====== General Styles ====== */ * { box-sizing: border-box; } body { font-family: var(--font-primary); background: var(--bg-primary); color: var(--text-primary); margin: 0; line-height: 1.6; padding-bottom: 60px; } h2, h3 { font-weight: 600; color: var(--text-primary); } .hidden { display: none !important; } .bg-transparent { background: transparent; } /* ====== Navigation ====== */ .navbar { background: #02066a94; color: var(--text-primary); padding: 0 var(--spacing-unit); display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; left: 0; right: 0; height: 60px; border-bottom: 1px solid var(--border-color); box-shadow: var(--shadow-sm); z-index: 1000; } .nav-left { flex: 1; justify-content: flex-start; } .nav-center { flex: 2; text-align: center; } #navbar-title { margin: 0; font-size: 1.2em; color: var(--bg-primary); } .nav-right { flex: 1; justify-content: flex-end; } .navbar .nav-left, .navbar .nav-right { display: flex; align-items: center; gap: calc(var(--spacing-unit) * 2); } .navbar #nav-user { font-weight: 600; } .navbar.bottom-navbar { position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: 72px; background: #02066a94; backdrop-filter: blur(12px); border-radius: 24px 24px 0 0; box-shadow: 0 -4px 24px 0 rgba(0,0,0,0.08); border-bottom: none; border-top: 1px solid var(--border-color); z-index: 1000; display: flex; justify-content: space-between; align-items: center; padding: 0 32px; max-width: 600px; margin: 0 auto; flex-direction: row; align-items: center; justify-content: space-between; } .bottom-navbar .nav-left, .bottom-navbar .nav-right, .bottom-navbar .nav-center { display: flex; align-items: center; flex: 1 1 0; min-width: 0; justify-content: center; } .bottom-navbar .nav-center { flex: 0 1 auto; } .bottom-navbar .nav-left { justify-content: flex-start; } .bottom-navbar .nav-right { justify-content: flex-end; } .bottom-navbar button { background: none; border: none; box-shadow: none; padding: 0; margin: 0 4px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background 0.2s; cursor: pointer; } .bottom-navbar button:focus { outline: 2px solid var(--accent-primary); } .bottom-navbar button:hover { background: rgba(0,0,0,0.04); } .bottom-navbar svg { color: var(--bg-primary); width: 28px; height: 28px; display: block; pointer-events: none; transition: color 0.2s; } /* ====== Container ====== */ .container { max-width: 900px; margin: calc(var(--spacing-unit) * 4) auto; background: var(--bg-secondary); padding: calc(var(--spacing-unit) * 3); border-radius: calc(var(--border-radius) * 2); box-shadow: var(--shadow-md); padding-bottom: 150px; } /* ====== Buttons ====== */ .btn { background: var(--accent-primary); color: #fff; border: none; padding: calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 2.5); border-radius: var(--border-radius); cursor: pointer; font-family: var(--font-primary); font-weight: 600; transition: background-color 0.2s ease, transform 0.2s ease; display: inline-flex; align-items: center; gap: var(--spacing-unit); } .btn:hover { background: var(--accent-primary-hover); transform: translateY(-1px); } .btn:disabled { background: #aaa; cursor: not-allowed; transform: none; } .btn-secondary { background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-color); } .btn-secondary:hover { background: var(--border-color); } /* ====== Forms & Inputs ====== */ input, select { width: 100%; padding: calc(var(--spacing-unit) * 1.25); margin-bottom: calc(var(--spacing-unit) * 2); border: 1px solid var(--border-color); border-radius: var(--border-radius); background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-primary); } input:focus, select:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 2px rgba(0,123,255,0.25); } .form-group { margin-bottom: calc(var(--spacing-unit) * 2); } .form-group label { display: block; margin-bottom: var(--spacing-unit); font-weight: 600; } #login-form, #register-form { max-width: 400px; margin: 0 auto; } .form-actions { display: flex; gap: var(--spacing-unit); } /* ====== Lists (Groups & Chapters) ====== */ .tab-container { border-bottom: 1px solid var(--border-color); margin-bottom: calc(var(--spacing-unit) * 2); } .tab { display: inline-block; margin-right: calc(var(--spacing-unit) * 2); cursor: pointer; padding: var(--spacing-unit) calc(var(--spacing-unit) * 2); border-bottom: 3px solid transparent; transition: all 0.2s ease; } .tab.active { border-bottom-color: var(--accent-primary); color: var(--accent-primary); font-weight: 600; } .group-list, .chapter-list { list-style: none; padding: 0; } .group-list li, .chapter-list li { padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2); border: 1px solid var(--border-color); margin-bottom: var(--spacing-unit); border-radius: var(--border-radius); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; display: flex; justify-content: space-between; align-items: center; } .group-list li:hover, .chapter-list li:hover { background: var(--bg-primary); border-left: 4px solid var(--accent-primary); padding-left: calc(calc(var(--spacing-unit) * 2) - 4px); } .chapter-list .status { font-size: 0.85em; color: var(--text-secondary); font-style: italic; background-color: var(--bg-primary); padding: calc(var(--spacing-unit) / 2) var(--spacing-unit); border-radius: var(--border-radius); } .chapter-list .status-read { font-weight: normal; color: var(--text-secondary); } .chapter-list .status-unread { font-weight: 600; color: var(--text-primary); } .chapter-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .chapter-actions { display: flex; gap: var(--spacing-unit); flex-shrink: 0; } .chapter-actions .btn-sm { padding: calc(var(--spacing-unit) / 2) var(--spacing-unit); font-size: 0.85em; } /* ====== Reading Screen ====== */ #screen-reading { line-height: 2; } .reading-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: calc(var(--spacing-unit) * 2); } .reading-status-top { margin-bottom: var(--spacing-unit); text-align: center; } .reading-actions { display: flex; justify-content: space-between; align-items: center; margin-top: calc(var(--spacing-unit) * 2); gap: var(--spacing-unit); } .reading-status-bottom { flex: 1; } .reading-status-buttons { display: flex; gap: var(--spacing-unit); flex-shrink: 0; align-items: center; } .mark-as-label { font-weight: 500; color: var(--text-secondary); white-space: nowrap; } .reading-status-buttons .btn, .chapter-actions .btn, .chapter-actions .btn-sm { background: rgba(255,255,255,0.18); border-radius: 50%; width: 48px; height: 48px; min-width: 48px; min-height: 48px; max-width: 48px; max-height: 48px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.10); border: none; margin: 0 6px; transition: background 0.2s, box-shadow 0.2s, transform 0.1s; color: #111; padding: 0; font-size: 1.5rem; } .reading-status-buttons .btn:hover, .chapter-actions .btn:hover, .chapter-actions .btn-sm:hover, .reading-status-buttons .btn:focus, .chapter-actions .btn:focus, .chapter-actions .btn-sm:focus { background: rgba(255,255,255,0.32); box-shadow: 0 4px 16px rgba(0,0,0,0.18); outline: none; transform: scale(1.08); } .reading-status-buttons .btn span, .chapter-actions .btn span, .chapter-actions .btn-sm span { font-size: 1.7rem; color: #111; line-height: 1; display: block; } .psalm-hebrew { font-family: var(--font-hebrew); font-size: 2.2em; direction: rtl; text-align: right; margin: calc(var(--spacing-unit) * 3) 0; color: var(--text-primary); font-weight: 700; flex-grow: 1; } .psalm-translation { margin: calc(var(--spacing-unit) * 2) 0; color: var(--text-secondary); font-style: italic; font-size: 1.1em; padding-left: var(--spacing-unit); border-left: 3px solid var(--border-color); } .status-bar { margin: var(--spacing-unit) 0; padding: var(--spacing-unit) calc(var(--spacing-unit) * 1.5); font-size: 0.9em; color: var(--text-secondary); background: var(--bg-primary); border-radius: var(--border-radius); border-left: 4px solid var(--accent-primary); } .commentary { font-size: 1em; color: var(--text-secondary); margin: var(--spacing-unit) 0; padding: calc(var(--spacing-unit) * 2); background: var(--bg-primary); border-radius: var(--border-radius); } .audio-controls { margin: calc(var(--spacing-unit) * 3) 0; padding: calc(var(--spacing-unit) * 2); background: var(--bg-primary); border-radius: var(--border-radius); display: flex; flex-direction: column; gap: calc(var(--spacing-unit) * 1.5); } /* Audio controls row: always horizontal, align center */ .audio-controls-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .control-label { margin: 0 8px 0 0; font-weight: 500; display: inline-block; min-width: 120px; } .switch { margin: 0 16px 0 0; } .auto-pause-settings { margin-top: var(--spacing-unit); padding: var(--spacing-unit); background: var(--bg-secondary); border-radius: var(--border-radius); border-left: 3px solid var(--accent-primary); } /* Translation Drawer Styles */ .translation-drawer { margin-top: var(--spacing-unit); } .translation-settings-content { margin-top: var(--spacing-unit); padding: var(--spacing-unit); background: var(--bg-secondary); border-radius: var(--border-radius); border-left: 3px solid var(--accent-primary); animation: slideDown 0.3s ease-out; } .translation-settings-content .psalm-translation { margin-top: var(--spacing-unit); padding: var(--spacing-unit); background: var(--bg-primary); border-radius: var(--border-radius); border: 1px solid var(--border-color); } .translation-settings-content.hidden { display: none; } #btn-toggle-translation { display: flex; justify-content: space-between; align-items: center; text-align: left; } #translation-toggle-icon { transition: transform 0.3s ease; } #translation-toggle-icon.rotated { transform: rotate(180deg); } @keyframes slideDown { from { opacity: 0; max-height: 0; overflow: hidden; } to { opacity: 1; max-height: 200px; overflow: visible; } } /* ====== Responsive Design ====== */ @media (max-width: 768px) { body { padding-bottom: 100px; } .container { margin: var(--spacing-unit) auto; padding: var(--spacing-unit); border-radius: 0; box-shadow: none; padding-bottom: 150px; } .navbar { padding: 0 var(--spacing-unit); } .audio-controls { flex-direction: column; align-items: stretch; } .audio-controls-row { flex-direction: column; align-items: stretch; gap: var(--spacing-unit); } .control-label { justify-content: space-between; } .reading-actions { flex-direction: row; align-items: center; gap: var(--spacing-unit); } .reading-status-bottom { text-align: center; } .reading-status-buttons { justify-content: center; flex-wrap: wrap; } .mark-as-label { width: 100%; text-align: center; margin-bottom: var(--spacing-unit); } .reading-status-buttons .btn { flex: 1; min-width: 80px; min-height: 80px; } .chapter-list li { /*flex-direction: column;*/ align-items: stretch; gap: var(--spacing-unit); } .chapter-actions { justify-content: flex-end; } .chapter-actions .btn-sm { padding: var(--spacing-unit); font-size: 0.9em; } .navbar.bottom-navbar { padding: 0 8px; height: 64px; border-radius: 16px 16px 0 0; } .bottom-navbar button { width: 44px; height: 44px; } .bottom-navbar svg { width: 22px; height: 22px; } #login-form h3, #register-form h3 { text-align: center; } #login-form .form-actions, #register-form .form-actions { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; } } @media (max-width: 600px) { .navbar { flex-direction: column; height: auto; } .navbar .nav-left, .navbar .nav-right { width: 100%; justify-content: space-around; padding: var(--spacing-unit) 0; } .psalm-hebrew { font-size: 1.8em; } .navbar.bottom-navbar { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; height: 56px; padding: 0 2px; border-radius: 12px 12px 0 0; max-width: 100vw; min-width: 0; } .bottom-navbar .nav-left, .bottom-navbar .nav-right { gap: 8px; } .bottom-navbar button { width: 36px; height: 36px; } .bottom-navbar svg { width: 18px; height: 18px; } .audio-controls-row { flex-wrap: wrap; gap: 12px; } .control-label { min-width: 90px; font-size: 0.98em; } .settings-field-row { justify-content: space-between !important; max-width: 100% !important; width: 100% !important; gap: 8px; } } .clickable-word { cursor: pointer; transition: all 0.2s ease; border-radius: 4px; padding: 2px 4px; margin: 0 1px; } .clickable-word:hover { background: var(--accent-primary); color: white; transform: scale(1.05); } .clickable-word:active { transform: scale(0.95); } .psalm-container { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--spacing-unit) * 2); } .psalm-nav-btn { font-size: 1.5em; padding: var(--spacing-unit) calc(var(--spacing-unit) * 1.5); line-height: 1; flex-shrink: 0; } .main-player-controls { display: flex; justify-content: center; align-items: center; gap: calc(var(--spacing-unit) * 4); margin: calc(var(--spacing-unit) * 2) 0; } .main-player-controls .btn { background: #02066a94; border-radius: 50%; width: 56px; height: 56px; min-width: 56px; min-height: 56px; max-width: 56px; max-height: 56px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.10); border: none; margin: 0 8px; transition: background 0.2s, box-shadow 0.2s, transform 0.1s; color: #f2f9fb; padding: 0; font-size: 1.5rem; } .main-player-controls .btn:hover, .main-player-controls .btn:focus { background: #02066a52; box-shadow: 0 4px 16px rgba(0,0,0,0.18); outline: none; transform: scale(1.08); } .main-player-controls .btn svg { width: 32px; height: 32px; fill: #fff; color: #fff; display: block; pointer-events: none; } .chapter-nav-btn { font-size: 2em; background: transparent; border: none; color: var(--text-secondary); } .chapter-nav-btn:hover { color: var(--text-primary); background: var(--bg-primary); } /* Generic Drawer Styles */ .drawer { margin-bottom: var(--spacing-unit); } .drawer-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; text-align: left; } .drawer-icon { transition: transform 0.3s ease; } .drawer-toggle.active .drawer-icon { transform: rotate(180deg); } .drawer-content { margin-top: var(--spacing-unit); padding: calc(var(--spacing-unit) * 2); background: var(--bg-primary); border-radius: var(--border-radius); border-left: 3px solid var(--accent-primary); animation: slideDown 0.3s ease-out; } .drawer-content .audio-controls-row { justify-content: space-between; } .drawer-content > div { margin-bottom: var(--spacing-unit); } .drawer-content > div:last-child { margin-bottom: 0; } .highlight { background: var(--highlight-bg); color: var(--text-primary); padding: 2px 4px; border-radius: 4px; font-weight: bold; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .segment-highlight { background: #ff6b6b !important; color: white !important; font-weight: bold; padding: 3px 6px; border-radius: 6px; box-shadow: 0 3px 6px rgba(255, 107, 107, 0.4); animation: pulse 1s infinite; } .segment-completed { background: #4ecdc4 !important; color: white !important; font-weight: bold; padding: 2px 4px; border-radius: 4px; box-shadow: 0 2px 4px rgba(78, 205, 196, 0.3); } .segment-pending { background: #ffe66d !important; color: #333 !important; font-weight: bold; padding: 2px 4px; border-radius: 4px; box-shadow: 0 2px 4px rgba(255, 230, 109, 0.3); } .pause-highlight { background: #9b59b6 !important; color: white !important; font-weight: bold; padding: 3px 6px; border-radius: 6px; box-shadow: 0 3px 6px rgba(155, 89, 182, 0.4); animation: pause-pulse 2s infinite; } .pause-completed { background: #3498db !important; color: white !important; font-weight: bold; padding: 2px 4px; border-radius: 4px; box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3); } .pause-pending { background: #f39c12 !important; color: white !important; font-weight: bold; padding: 2px 4px; border-radius: 4px; box-shadow: 0 2px 4px rgba(243, 156, 18, 0.3); } @keyframes pause-pulse { 0% { box-shadow: 0 3px 6px rgba(155, 89, 182, 0.4); } 50% { box-shadow: 0 3px 12px rgba(155, 89, 182, 0.6); } 100% { box-shadow: 0 3px 6px rgba(155, 89, 182, 0.4); } } @keyframes pulse { 0% { box-shadow: 0 3px 6px rgba(255, 107, 107, 0.4); } 50% { box-shadow: 0 3px 12px rgba(255, 107, 107, 0.6); } 100% { box-shadow: 0 3px 6px rgba(255, 107, 107, 0.4); } } /* Center chapter status in chapter list */ .chapter-status { text-align: center; margin: 0 auto; display: block; } /* Switch (toggle) styles */ .switch { appearance: none; width: 40px; height: 22px; background: #ccc; border-radius: 22px; position: relative; outline: none; cursor: pointer; transition: background 0.2s; vertical-align: middle; margin: 0 8px 0 0; } .switch:checked { background: var(--accent-primary); } .switch::before { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.12); } .switch:checked::before { transform: translateX(18px); } /* Range slider styles */ input[type=range] { width: 120px; height: 4px; background: var(--border-color); border-radius: 2px; outline: none; transition: background 0.2s; margin: 0 8px; } input[type=range]:focus { background: var(--accent-primary); } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-primary); cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.15); transition: background 0.2s; } input[type=range]:focus::-webkit-slider-thumb { background: var(--accent-primary-hover); } input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--accent-primary); cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.15); transition: background 0.2s; } input[type=range]:focus::-moz-range-thumb { background: var(--accent-primary-hover); } input[type=range]::-ms-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--accent-primary); cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.15); transition: background 0.2s; } input[type=range]:focus::-ms-thumb { background: var(--accent-primary-hover); } input[type=range]::-webkit-slider-thumb { box-shadow: 0 2px 6px rgba(0,0,0,0.15); } input[type=range]:focus::-webkit-slider-thumb { background: var(--accent-primary-hover); } input[type=range]::-ms-fill-lower { background: var(--accent-primary); } input[type=range]::-ms-fill-upper { background: var(--border-color); } input[type=range]:focus::-ms-fill-lower { background: var(--accent-primary-hover); } input[type=range]:focus::-ms-fill-upper { background: var(--border-color); } input[type=range]:focus { outline: none; } .settings-field-row { display: flex; align-items: center; gap: 12px; margin: 4px 0; max-width: 340px; width: 100%; justify-content: flex-start; } @media (max-width: 600px) { .settings-field-row { justify-content: space-between !important; max-width: 100% !important; width: 100% !important; gap: 8px; } } #profile-logged-in h2, #div-username { text-align: center; width: 100%; margin: 0 0 24px 0; } #profile-logged-in .settings-form { display: flex; flex-direction: column; align-items: center; } #profile-logged-in .settings-form button[type="submit"], #profile-logged-in .settings-form #btn-save-settings { display: flex; justify-content: center; align-items: center; margin: 16px auto 0 auto; } #profile-logout-btn { float: right; margin-top: 0; margin-bottom: 24px; } .settings-form-container { display: flex; justify-content: space-around; gap: 40px; align-items: flex-start; margin-bottom: 32px; } #voice-upload-form { display: flex; flex-direction: column; align-items: center; } #password-reset-section { text-align: center; margin-top: 24px; margin-bottom: 24px; } @media (max-width: 900px) { .settings-form-container { flex-direction: column; gap: 24px; align-items: stretch; } } /* Modal overlay for reader settings */ #reader-settings-modal.modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 2000; background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; } #reader-settings-modal[style*="display: none"] { display: none !important; } .settings-modal-content { background: var(--bg-secondary); border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); padding: 32px 24px; min-width: 320px; max-width: 95vw; max-height: 90vh; overflow-y: auto; position: relative; } .modal-close { position: absolute; top: 12px; right: 16px; background: none; border: none; font-size: 2rem; color: var(--text-secondary); cursor: pointer; z-index: 10; } /* ====== Ring Loader for Play Button ====== */ .ring-loader { position: absolute; top: calc(50% - 4px); left: calc(50% - 4px); width: 64px; height: 64px; transform: translate(-50%, -50%); pointer-events: none; z-index: 2; display: block; } .ring-loader::before { content: ''; display: block; width: 100%; height: 100%; border-radius: 50%; border: 4px solid var(--accent-primary); opacity: 0.15; position: absolute; top: 0; left: 0; } .ring-loader::after { content: ''; display: block; width: 100%; height: 100%; border-radius: 50%; border: 4px solid var(--accent-primary); border-color: var(--accent-primary) var(--accent-primary) var(--accent-primary) transparent; position: absolute; top: 0; left: 0; transform: rotate(-90deg); z-index: 1; opacity: 1; /* Animate the stroke-dasharray to create the progress effect */ --progress: calc(var(--ring-progress, 0) * 251.2); /* 2 * PI * r (r=40-4=36) */ stroke-dasharray: 251.2; stroke-dashoffset: calc(251.2 - var(--progress)); background: none; box-sizing: border-box; /* Use a conic-gradient for smooth progress */ background: conic-gradient(var(--accent-primary) calc(var(--ring-progress, 0) * 100%), transparent 0); mask-image: radial-gradient(circle, white 60%, transparent 61%); } .ring-loader:not(.active) { display: none; } .ring-loader.complete::after { background: var(--accent-primary); opacity: 0.5; } /* Ensure play button is positioned relative for ring */ #btn-audio-play { position: relative; z-index: 1; } .unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }