Add map and KJV audio playback UI
This commit is contained in:
+236
-2
@@ -741,7 +741,9 @@ textarea:focus-visible {
|
||||
}
|
||||
|
||||
.commentary-card,
|
||||
.dictionary-card {
|
||||
.dictionary-card,
|
||||
.map-card,
|
||||
.audio-card {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
@@ -787,6 +789,211 @@ textarea:focus-visible {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.map-card {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.context-map {
|
||||
position: relative;
|
||||
min-height: 190px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #d9cfbd;
|
||||
border-radius: 6px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(47, 111, 94, 0.12), transparent 34%),
|
||||
linear-gradient(0deg, rgba(214, 168, 79, 0.18), transparent 42%),
|
||||
#eef1e6;
|
||||
}
|
||||
|
||||
.map-grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(68, 76, 65, 0.12) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(68, 76, 65, 0.12) 1px, transparent 1px);
|
||||
background-size: 25% 25%;
|
||||
}
|
||||
|
||||
.map-marker {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
border: 2px solid #fffef8;
|
||||
border-radius: 50%;
|
||||
background: #2f6f5e;
|
||||
color: #fffef8;
|
||||
font-size: 11px;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
transform: translate(-50%, -50%);
|
||||
box-shadow: 0 2px 7px rgba(22, 26, 20, 0.26);
|
||||
}
|
||||
|
||||
.map-marker.selected {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: #d6a84f;
|
||||
color: #141510;
|
||||
}
|
||||
|
||||
.place-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.place-list section {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
padding: 7px;
|
||||
border: 1px solid #e4dccd;
|
||||
border-radius: 5px;
|
||||
background: #fbf8ef;
|
||||
}
|
||||
|
||||
.place-list h3 {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
color: #252821;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.place-list p {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
margin: 0;
|
||||
color: #657061;
|
||||
font-size: 11px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.place-list small {
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.route-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
align-items: center;
|
||||
color: #657061;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.route-list span {
|
||||
display: inline-flex;
|
||||
gap: 5px;
|
||||
align-items: center;
|
||||
max-width: 100%;
|
||||
padding: 4px 6px;
|
||||
border: 1px solid #d8cfbf;
|
||||
border-radius: 999px;
|
||||
background: #fbf8ef;
|
||||
color: #252821;
|
||||
font-size: 11px;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.route-list small {
|
||||
color: #657061;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.map-attribution {
|
||||
margin: 0;
|
||||
color: #657061;
|
||||
font-size: 11px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.audio-card {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.audio-controls {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.audio-controls button {
|
||||
min-width: 0;
|
||||
min-height: 30px;
|
||||
padding: 5px 7px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.audio-controls .secondary-button {
|
||||
border-color: #d8cfbf;
|
||||
background: #fbf8ef;
|
||||
color: #252821;
|
||||
}
|
||||
|
||||
.audio-sliders {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(90px, 0.45fr);
|
||||
gap: 8px;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.audio-sliders label {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
color: #657061;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.audio-sliders select {
|
||||
grid-column: 2 / 4;
|
||||
}
|
||||
|
||||
.audio-sliders input[type='range'] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.audio-status {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
color: #3f443d;
|
||||
font-size: 12px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.audio-status strong {
|
||||
flex: 0 0 auto;
|
||||
color: #657061;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.audio-status span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.notes-workspace {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -1381,11 +1588,28 @@ textarea:focus-visible {
|
||||
|
||||
.theme-dark .original-language-verse,
|
||||
.theme-dark .english-strong-line,
|
||||
.theme-dark .resource-card {
|
||||
.theme-dark .resource-card,
|
||||
.theme-dark .place-list section,
|
||||
.theme-dark .route-list span,
|
||||
.theme-dark .audio-controls .secondary-button {
|
||||
border-color: #3f493f;
|
||||
background: #20251f;
|
||||
}
|
||||
|
||||
.theme-dark .context-map {
|
||||
border-color: #3f493f;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(58, 122, 105, 0.22), transparent 34%),
|
||||
linear-gradient(0deg, rgba(199, 150, 63, 0.2), transparent 42%),
|
||||
#1c241e;
|
||||
}
|
||||
|
||||
.theme-dark .map-grid {
|
||||
background-image:
|
||||
linear-gradient(rgba(199, 213, 190, 0.13) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(199, 213, 190, 0.13) 1px, transparent 1px);
|
||||
}
|
||||
|
||||
.theme-dark .margin-section-header {
|
||||
background: #2b332a;
|
||||
}
|
||||
@@ -1420,6 +1644,14 @@ textarea:focus-visible {
|
||||
.theme-dark .timeline-canvas small,
|
||||
.theme-dark .note-helper small,
|
||||
.theme-dark .note-placeholder small,
|
||||
.theme-dark .place-list p,
|
||||
.theme-dark .place-list small,
|
||||
.theme-dark .route-list,
|
||||
.theme-dark .route-list small,
|
||||
.theme-dark .map-attribution,
|
||||
.theme-dark .audio-sliders label,
|
||||
.theme-dark .audio-status,
|
||||
.theme-dark .audio-status strong,
|
||||
.theme-dark .session-facts dt,
|
||||
.theme-dark .about-list dt,
|
||||
.theme-dark .modal-section label,
|
||||
@@ -1431,6 +1663,8 @@ textarea:focus-visible {
|
||||
.theme-dark .strong-focus p,
|
||||
.theme-dark .commentary-list h3,
|
||||
.theme-dark .dictionary-list h3,
|
||||
.theme-dark .place-list h3,
|
||||
.theme-dark .route-list span,
|
||||
.theme-dark .commentary-list p,
|
||||
.theme-dark .dictionary-list p,
|
||||
.theme-dark .linked-line-text,
|
||||
|
||||
Reference in New Issue
Block a user