2466 lines
41 KiB
CSS
2466 lines
41 KiB
CSS
.app-shell {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
min-height: 100vh;
|
|
overflow: hidden;
|
|
background: #ece9df;
|
|
color: #202124;
|
|
}
|
|
|
|
.login-shell {
|
|
display: grid;
|
|
min-height: 100vh;
|
|
place-items: center;
|
|
padding: 28px;
|
|
background:
|
|
linear-gradient(135deg, rgba(47, 111, 94, 0.16), transparent 36%),
|
|
#ece9df;
|
|
color: #202124;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.login-panel {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
|
|
gap: 28px;
|
|
width: min(760px, 100%);
|
|
padding: 28px;
|
|
border: 1px solid #d4cdbd;
|
|
border-radius: 8px;
|
|
background: #fffef8;
|
|
box-shadow: 0 20px 50px rgba(44, 48, 42, 0.14);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.login-panel h1 {
|
|
margin: 12px 0 10px;
|
|
font-size: 42px;
|
|
line-height: 1.05;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.login-panel p {
|
|
margin: 0;
|
|
color: #657061;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.login-panel form,
|
|
.login-panel label {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.login-panel form {
|
|
align-content: start;
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.login-panel label {
|
|
color: #657061;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.login-panel input {
|
|
min-height: 40px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.login-panel button {
|
|
min-height: 40px;
|
|
background: #2f6f5e;
|
|
color: #fffef8;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.login-error {
|
|
padding: 10px 12px;
|
|
border: 1px solid #d6a5a0;
|
|
border-radius: 6px;
|
|
background: #fff4f2;
|
|
color: #8b231a;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.app-shell.menu-open .reader {
|
|
filter: brightness(0.94);
|
|
}
|
|
|
|
.brand-mark {
|
|
display: grid;
|
|
flex: 0 0 auto;
|
|
place-items: center;
|
|
width: 42px;
|
|
height: 42px;
|
|
border-radius: 8px;
|
|
background: #d6a84f;
|
|
color: #161711;
|
|
font-weight: 800;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.reader {
|
|
display: grid;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
gap: 10px;
|
|
min-width: 0;
|
|
height: 100vh;
|
|
padding: 10px 10px 12px;
|
|
box-sizing: border-box;
|
|
transition: filter 160ms ease;
|
|
}
|
|
|
|
.top-bar {
|
|
display: grid;
|
|
gap: 6px;
|
|
align-items: stretch;
|
|
min-width: 0;
|
|
}
|
|
|
|
.bible-top-tools {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.42fr) minmax(160px, 1fr);
|
|
gap: 6px;
|
|
align-items: end;
|
|
min-width: 0;
|
|
}
|
|
|
|
.study-top-tools {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
min-width: 0;
|
|
padding: 4px 8px;
|
|
border: 1px solid #d4cdbd;
|
|
border-radius: 8px;
|
|
background: #fbf8ef;
|
|
color: #657061;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.study-top-tools button {
|
|
min-height: 28px;
|
|
padding: 5px 9px;
|
|
background: #2f6f5e;
|
|
color: #fffef8;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.split-spacer {
|
|
min-width: 0;
|
|
}
|
|
|
|
.study-margin h2,
|
|
.notes-workspace h2,
|
|
.strong-focus h4 {
|
|
margin: 0;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.eyebrow {
|
|
color: #657061;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
letter-spacing: 0;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.search-box {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: 5px;
|
|
}
|
|
|
|
input,
|
|
select,
|
|
textarea {
|
|
width: 100%;
|
|
min-width: 0;
|
|
border: 1px solid #bdb8aa;
|
|
border-radius: 6px;
|
|
padding: 5px 8px;
|
|
background: #fffef9;
|
|
color: #202124;
|
|
font: inherit;
|
|
font-size: 12px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
textarea {
|
|
min-height: 420px;
|
|
resize: none;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
button {
|
|
border: 1px solid transparent;
|
|
border-radius: 6px;
|
|
padding: 6px 9px;
|
|
background: #d6a84f;
|
|
color: #141510;
|
|
font: inherit;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.62;
|
|
}
|
|
|
|
button:focus-visible,
|
|
input:focus-visible,
|
|
select:focus-visible,
|
|
textarea:focus-visible {
|
|
outline: 2px solid #5d7f71;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.page-controls {
|
|
display: grid;
|
|
grid-template-columns: 34px minmax(62px, 0.8fr) minmax(92px, 1.25fr) minmax(54px, 0.55fr) minmax(50px, 0.5fr) minmax(80px, 0.82fr);
|
|
gap: 5px;
|
|
align-items: end;
|
|
max-width: none;
|
|
}
|
|
|
|
.top-menu-button {
|
|
display: grid;
|
|
align-self: end;
|
|
justify-self: stretch;
|
|
place-items: center;
|
|
gap: 3px;
|
|
width: 34px;
|
|
height: 31px;
|
|
padding: 0;
|
|
border-color: #d8cfbf;
|
|
background: #fbf8ef;
|
|
color: #252821;
|
|
}
|
|
|
|
.top-menu-button span {
|
|
display: block;
|
|
width: 16px;
|
|
height: 2px;
|
|
border-radius: 999px;
|
|
background: currentColor;
|
|
}
|
|
|
|
.menu-popover-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 35;
|
|
background: rgba(24, 26, 22, 0.18);
|
|
}
|
|
|
|
.menu-popover {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
display: grid;
|
|
gap: 8px;
|
|
width: min(300px, calc(100vw - 20px));
|
|
padding: 12px;
|
|
border: 1px solid #d4cdbd;
|
|
border-radius: 8px;
|
|
background: #fffef8;
|
|
box-shadow: 0 20px 50px rgba(17, 20, 17, 0.24);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.menu-popover header,
|
|
.menu-popover button {
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: center;
|
|
}
|
|
|
|
.menu-popover header {
|
|
padding-bottom: 8px;
|
|
border-bottom: 1px solid #e4e0d6;
|
|
}
|
|
|
|
.menu-popover header div,
|
|
.menu-popover button {
|
|
min-width: 0;
|
|
}
|
|
|
|
.menu-popover strong,
|
|
.menu-popover small {
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.menu-popover small {
|
|
color: #657061;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.menu-popover button {
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
padding: 10px;
|
|
border-color: #ded6c7;
|
|
background: #fbf8ef;
|
|
color: #202124;
|
|
text-align: left;
|
|
}
|
|
|
|
.page-controls label {
|
|
display: grid;
|
|
gap: 2px;
|
|
color: #657061;
|
|
font-size: 9px;
|
|
font-weight: 800;
|
|
letter-spacing: 0;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.study-desk {
|
|
display: grid;
|
|
gap: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
.study-desk.page,
|
|
.study-desk.study,
|
|
.study-desk.notes,
|
|
.study-desk.compare {
|
|
grid-template-columns: minmax(0, 40fr) 6px minmax(0, 20fr) 6px minmax(0, 40fr);
|
|
}
|
|
|
|
.split-resizer {
|
|
width: 6px;
|
|
min-width: 6px;
|
|
cursor: col-resize;
|
|
background: linear-gradient(90deg, transparent, #cfc6b4 45%, #cfc6b4 55%, transparent);
|
|
}
|
|
|
|
.split-resizer:hover,
|
|
.split-resizer:focus-visible {
|
|
background: #d6a84f;
|
|
outline: none;
|
|
}
|
|
|
|
.page-system,
|
|
.notes-workspace,
|
|
.status-panel {
|
|
border: 1px solid #d4cdbd;
|
|
border-radius: 8px;
|
|
background: #fffef8;
|
|
box-shadow: 0 12px 30px rgba(44, 48, 42, 0.08);
|
|
}
|
|
|
|
.page-system {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
grid-template-rows: minmax(0, 1fr) auto auto auto;
|
|
min-height: 0;
|
|
overflow: visible;
|
|
perspective: 1400px;
|
|
}
|
|
|
|
.page-system.compare-system {
|
|
display: block;
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.bible-page {
|
|
display: grid;
|
|
grid-column: 1;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
min-height: 0;
|
|
padding: 22px 26px;
|
|
}
|
|
|
|
.bible-page header,
|
|
.page-turner {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
align-items: center;
|
|
color: #6b675d;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.page-turner {
|
|
grid-column: 1;
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
padding: 8px 26px 6px;
|
|
border-top: 1px solid #e8e2d4;
|
|
background: #fffef8;
|
|
text-transform: none;
|
|
}
|
|
|
|
.page-turner span {
|
|
color: #6b675d;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.page-turner button {
|
|
align-self: start;
|
|
min-height: 26px;
|
|
padding: 4px 9px;
|
|
}
|
|
|
|
.page-position {
|
|
display: grid;
|
|
gap: 4px;
|
|
justify-items: center;
|
|
min-width: 0;
|
|
}
|
|
|
|
.chapter-tabs {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
justify-content: center;
|
|
gap: 3px;
|
|
max-width: 100%;
|
|
min-height: 25px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.chapter-tabs button {
|
|
flex: 0 0 auto;
|
|
min-width: 28px;
|
|
min-height: 22px;
|
|
padding: 2px 6px;
|
|
border: 1px solid #dfd6c2;
|
|
border-radius: 5px;
|
|
background: #fbf8ef;
|
|
color: #6f5a24;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
line-height: 1.1;
|
|
text-decoration: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.chapter-tabs button.active,
|
|
.chapter-tabs button:hover,
|
|
.chapter-tabs button:focus-visible {
|
|
background: #d6a84f;
|
|
color: #151510;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.chapter-tabs .tab-scroll-button {
|
|
min-width: 24px;
|
|
padding: 2px 5px;
|
|
background: #fffef8;
|
|
color: #657061;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.chapter-tabs .tab-scroll-button:disabled,
|
|
.book-tabs .tab-scroll-button:disabled {
|
|
opacity: 0.32;
|
|
cursor: default;
|
|
}
|
|
|
|
.page-columns {
|
|
column-count: 2;
|
|
column-gap: 34px;
|
|
column-rule: 1px solid #eee7d8;
|
|
overflow: hidden;
|
|
padding: 22px 0;
|
|
font-family: Georgia, 'Times New Roman', serif;
|
|
}
|
|
|
|
.page-system.turn-forward .bible-page {
|
|
animation: page-turn-forward 480ms ease;
|
|
}
|
|
|
|
.page-system.turn-back .bible-page {
|
|
animation: page-turn-back 480ms ease;
|
|
}
|
|
|
|
.page-verse {
|
|
position: relative;
|
|
break-inside: avoid;
|
|
margin: 0 0 9px;
|
|
padding: 3px 4px 3px 16px;
|
|
color: #1f211e;
|
|
font-size: 18px;
|
|
line-height: 1.58;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.page-verse.selected {
|
|
border-radius: 5px;
|
|
background: #f4ecd8;
|
|
}
|
|
|
|
.page-verse.previewed {
|
|
border-radius: 5px;
|
|
background: #f8f2e4;
|
|
}
|
|
|
|
.page-verse.has-margin-note::before,
|
|
.page-verse.range-anchored::before {
|
|
position: absolute;
|
|
top: 5px;
|
|
bottom: 5px;
|
|
left: 2px;
|
|
width: 7px;
|
|
border-top: 1px solid rgba(47, 111, 94, 0.45);
|
|
border-bottom: 1px solid rgba(47, 111, 94, 0.45);
|
|
border-left: 2px solid rgba(47, 111, 94, 0.48);
|
|
border-radius: 7px 0 0 7px;
|
|
content: '';
|
|
}
|
|
|
|
.verse-note-markers {
|
|
display: inline-grid;
|
|
place-items: center;
|
|
min-width: 16px;
|
|
min-height: 16px;
|
|
margin-right: 5px;
|
|
border: 1px solid rgba(47, 111, 94, 0.32);
|
|
border-radius: 50%;
|
|
background: rgba(47, 111, 94, 0.1);
|
|
color: #225446;
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
font-size: 10px;
|
|
font-weight: 900;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.page-verse sup {
|
|
margin-right: 5px;
|
|
color: #8a6d2e;
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
font-size: 10px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.strong-token {
|
|
display: inline;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.strong-token.highlight,
|
|
.strong-token.numbers {
|
|
border-radius: 3px;
|
|
box-shadow: inset 0 -0.45em 0 rgba(214, 168, 79, 0.22);
|
|
}
|
|
|
|
.strong-token:hover,
|
|
.strong-token:focus-visible {
|
|
box-shadow: inset 0 -1.1em 0 rgba(214, 168, 79, 0.34);
|
|
outline: none;
|
|
}
|
|
|
|
.strong-token.active {
|
|
box-shadow: inset 0 -1.1em 0 rgba(47, 111, 94, 0.3);
|
|
}
|
|
|
|
.strong-code {
|
|
margin-left: 2px;
|
|
color: #735c0f;
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
font-size: 9px;
|
|
font-weight: 800;
|
|
line-height: 0;
|
|
vertical-align: super;
|
|
}
|
|
|
|
.strong-token.active .strong-code {
|
|
color: #225446;
|
|
}
|
|
|
|
.study-margin,
|
|
.notes-workspace {
|
|
min-height: 0;
|
|
overflow: auto;
|
|
padding: 10px;
|
|
}
|
|
|
|
.study-margin {
|
|
min-width: 0;
|
|
border: 1px solid #d4cdbd;
|
|
border-radius: 8px;
|
|
background: #fbf8ef;
|
|
box-shadow: 0 12px 30px rgba(44, 48, 42, 0.08);
|
|
}
|
|
|
|
.panel-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
align-items: center;
|
|
padding-bottom: 8px;
|
|
border-bottom: 1px solid #e4e0d6;
|
|
}
|
|
|
|
.panel-header h2,
|
|
.notes-workspace h2 {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.panel-header span,
|
|
.margin-reference,
|
|
.translit,
|
|
.pronunciation {
|
|
color: #657061;
|
|
font-size: 13px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.margin-reference {
|
|
margin: 8px 0;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.margin-resource-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: 8px;
|
|
align-items: start;
|
|
}
|
|
|
|
.original-language-verse {
|
|
display: grid;
|
|
gap: 5px;
|
|
min-width: 0;
|
|
margin: 0;
|
|
padding: 8px;
|
|
overflow: hidden;
|
|
border: 1px solid #dfd6c2;
|
|
border-radius: 6px;
|
|
background: #fffdf6;
|
|
}
|
|
|
|
.margin-section-header {
|
|
display: flex;
|
|
gap: 6px;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin: -5px -5px 1px;
|
|
padding: 4px 6px;
|
|
border-radius: 5px;
|
|
background: #f5efe1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.margin-section-header:hover,
|
|
.margin-section-header:focus-visible {
|
|
background: #efe5d0;
|
|
outline: none;
|
|
}
|
|
|
|
.collapse-button,
|
|
.mini-settings {
|
|
border: 0;
|
|
background: transparent;
|
|
color: #657061;
|
|
font-size: 10px;
|
|
font-weight: 800;
|
|
letter-spacing: 0;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.collapse-button {
|
|
flex: 1;
|
|
padding: 0;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.mini-settings {
|
|
width: auto;
|
|
height: auto;
|
|
padding: 2px 5px;
|
|
border: 1px solid #d8cfbf;
|
|
border-radius: 4px;
|
|
background: #fbf8ef;
|
|
}
|
|
|
|
.original-language-verse h3 {
|
|
margin: 0;
|
|
color: #657061;
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
letter-spacing: 0;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.original-language-verse p {
|
|
min-width: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.lemma-line-text {
|
|
display: block;
|
|
max-width: 100%;
|
|
overflow-wrap: anywhere;
|
|
color: #1f211e;
|
|
font-family: Georgia, 'Times New Roman', serif;
|
|
font-size: 20px;
|
|
line-height: 1.45;
|
|
white-space: normal;
|
|
word-break: normal;
|
|
}
|
|
|
|
.lemma-line-text[dir='rtl'] {
|
|
direction: rtl;
|
|
text-align: right;
|
|
unicode-bidi: isolate;
|
|
}
|
|
|
|
.lemma-word {
|
|
display: inline;
|
|
overflow-wrap: anywhere;
|
|
padding: 0 2px;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.lemma-word + .lemma-word {
|
|
margin-inline-start: 0.35em;
|
|
}
|
|
|
|
.lemma-word:hover,
|
|
.lemma-word:focus-visible,
|
|
.lemma-word.active {
|
|
background: rgba(47, 111, 94, 0.16);
|
|
outline: none;
|
|
}
|
|
|
|
.english-strong-line {
|
|
display: grid;
|
|
gap: 5px;
|
|
margin: 0;
|
|
padding: 8px;
|
|
border: 1px solid #dfd6c2;
|
|
border-radius: 6px;
|
|
background: #fffdf6;
|
|
}
|
|
|
|
.linked-line-text {
|
|
margin: 0;
|
|
color: #202124;
|
|
line-height: 1.45;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.linked-word {
|
|
display: inline;
|
|
padding: 0 2px;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.linked-word + .linked-word {
|
|
margin-inline-start: 0.35em;
|
|
}
|
|
|
|
.linked-word:hover,
|
|
.linked-word:focus-visible,
|
|
.linked-word.active {
|
|
background: rgba(214, 168, 79, 0.25);
|
|
outline: none;
|
|
}
|
|
|
|
.strong-focus {
|
|
display: grid;
|
|
gap: 6px;
|
|
padding: 8px;
|
|
border: 1px solid #b9cabf;
|
|
border-radius: 8px;
|
|
background: #eef6f1;
|
|
}
|
|
|
|
.strong-focus div {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
align-items: center;
|
|
color: #657061;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.strong-focus > .margin-section-header span {
|
|
color: #657061;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.strong-focus h4 {
|
|
color: #1f211e;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.strong-focus p {
|
|
margin: 0;
|
|
color: #3f443d;
|
|
font-size: 12px;
|
|
line-height: 1.38;
|
|
}
|
|
|
|
.strong-focus button {
|
|
justify-self: start;
|
|
margin-top: 4px;
|
|
background: #2f6f5e;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.resource-card {
|
|
display: grid;
|
|
gap: 6px;
|
|
margin-top: 0;
|
|
padding: 8px;
|
|
border: 1px solid #dfd6c2;
|
|
border-radius: 6px;
|
|
background: #fffdf6;
|
|
}
|
|
|
|
.commentary-card,
|
|
.dictionary-card,
|
|
.map-card,
|
|
.audio-card,
|
|
.margin-note-card {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.margin-note-card {
|
|
background: #fffdf8;
|
|
}
|
|
|
|
.marker-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.marker-row button {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: 0;
|
|
border-color: #d8cfbf;
|
|
background: #fbf8ef;
|
|
color: #225446;
|
|
font-size: 15px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.marker-row button.active {
|
|
border-color: #2f6f5e;
|
|
background: #2f6f5e;
|
|
color: #fffef8;
|
|
}
|
|
|
|
.margin-note-input {
|
|
min-height: 94px;
|
|
resize: vertical;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.commentary-list,
|
|
.dictionary-list {
|
|
display: grid;
|
|
gap: 9px;
|
|
}
|
|
|
|
.commentary-list section,
|
|
.dictionary-list section {
|
|
display: grid;
|
|
gap: 4px;
|
|
}
|
|
|
|
.commentary-list h3,
|
|
.dictionary-list h3 {
|
|
margin: 0;
|
|
color: #252821;
|
|
font-size: 13px;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.commentary-list p,
|
|
.dictionary-list p {
|
|
margin: 0;
|
|
color: #3f443d;
|
|
font-size: 12px;
|
|
line-height: 1.38;
|
|
}
|
|
|
|
.commentary-list small {
|
|
color: #657061;
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.dictionary-list p strong {
|
|
display: block;
|
|
margin-bottom: 2px;
|
|
color: #657061;
|
|
font-size: 11px;
|
|
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;
|
|
gap: 14px;
|
|
}
|
|
|
|
.study-stack {
|
|
display: grid;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
.study-stack.pinned {
|
|
grid-template-columns: 58px minmax(0, 1fr);
|
|
}
|
|
|
|
.study-stack.unpinned {
|
|
position: relative;
|
|
z-index: 18;
|
|
width: 58px;
|
|
}
|
|
|
|
.study-stack.unpinned .study-stack-panel {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 58px;
|
|
width: min(560px, calc(100vw - 104px));
|
|
height: 100vh;
|
|
box-shadow: -18px 0 42px rgba(17, 20, 17, 0.24);
|
|
}
|
|
|
|
.study-stack-tabs {
|
|
display: grid;
|
|
grid-auto-rows: minmax(54px, auto);
|
|
gap: 0;
|
|
align-content: start;
|
|
min-height: 0;
|
|
border: 1px solid #d1cab9;
|
|
border-radius: 8px 0 0 8px;
|
|
background: #1f231f;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.study-stack-tabs button {
|
|
width: 100%;
|
|
min-height: 54px;
|
|
padding: 7px 4px;
|
|
border: 0;
|
|
border-bottom: 1px solid #3c4239;
|
|
border-radius: 0;
|
|
background: #252b25;
|
|
color: #f6f3eb;
|
|
font-size: 12px;
|
|
line-height: 1.05;
|
|
writing-mode: vertical-rl;
|
|
text-orientation: mixed;
|
|
}
|
|
|
|
.study-stack-tabs button.active {
|
|
background: #d6a84f;
|
|
color: #141510;
|
|
}
|
|
|
|
.study-stack-tabs .pin-stack {
|
|
background: #2f6f5e;
|
|
color: #fffef8;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.study-stack-tabs .stack-tab-notebook {
|
|
background: #2f6f5e;
|
|
}
|
|
|
|
.study-stack-tabs .stack-tab-dictionary {
|
|
background: #735c0f;
|
|
}
|
|
|
|
.study-stack-tabs .stack-tab-lexicon {
|
|
background: #245ba7;
|
|
}
|
|
|
|
.study-stack-tabs .stack-tab-atlas {
|
|
background: #6a7b34;
|
|
}
|
|
|
|
.study-stack-tabs .stack-tab-commentary {
|
|
background: #8b4f2f;
|
|
}
|
|
|
|
.study-stack-tabs .stack-tab-audio {
|
|
background: #6e4f8f;
|
|
}
|
|
|
|
.study-stack-tabs .stack-tab-search {
|
|
background: #5b6570;
|
|
}
|
|
|
|
.study-stack-tabs button.active,
|
|
.study-stack-tabs button:hover,
|
|
.study-stack-tabs button:focus-visible {
|
|
filter: brightness(1.18) saturate(1.08);
|
|
outline: none;
|
|
}
|
|
|
|
.study-stack-panel {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
border: 1px solid #d4cdbd;
|
|
border-left: 0;
|
|
border-radius: 0 8px 8px 0;
|
|
background: #fffef8;
|
|
box-shadow: 0 12px 30px rgba(44, 48, 42, 0.08);
|
|
}
|
|
|
|
.stack-book {
|
|
display: grid;
|
|
gap: 14px;
|
|
align-content: start;
|
|
min-height: 100%;
|
|
padding: 18px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.stack-book > header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
align-items: start;
|
|
padding-bottom: 12px;
|
|
border-bottom: 1px solid #e4e0d6;
|
|
}
|
|
|
|
.stack-book h2,
|
|
.stack-book h3,
|
|
.stack-book h4 {
|
|
margin: 0;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.stack-book > header h2 {
|
|
color: #202124;
|
|
font-size: 24px;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.stack-book > header span:last-child {
|
|
color: #657061;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.notebook-book textarea {
|
|
min-height: 360px;
|
|
resize: vertical;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.article-book article {
|
|
display: grid;
|
|
gap: 10px;
|
|
padding-bottom: 18px;
|
|
border-bottom: 1px solid #eee7d8;
|
|
}
|
|
|
|
.article-book h3 {
|
|
color: #202124;
|
|
font-size: 24px;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.article-book h4 {
|
|
color: #657061;
|
|
font-size: 12px;
|
|
font-weight: 900;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.article-book p {
|
|
margin: 0;
|
|
color: #3f443d;
|
|
font-size: 15px;
|
|
line-height: 1.58;
|
|
}
|
|
|
|
.article-kicker,
|
|
.article-pronunciation {
|
|
color: #657061;
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.wiki-article-list {
|
|
display: grid;
|
|
gap: 20px;
|
|
}
|
|
|
|
.wiki-article-list article section {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.stack-token-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.stack-token-grid button {
|
|
display: grid;
|
|
gap: 3px;
|
|
justify-items: start;
|
|
border-color: #ded6c7;
|
|
background: #fbf8ef;
|
|
text-align: left;
|
|
}
|
|
|
|
.stack-token-grid button.active {
|
|
border-color: #2f6f5e;
|
|
background: #eef6f1;
|
|
}
|
|
|
|
.stack-token-grid span {
|
|
color: #657061;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.search-result-list {
|
|
display: grid;
|
|
gap: 8px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.search-result-list button {
|
|
display: grid;
|
|
gap: 4px;
|
|
justify-items: start;
|
|
padding: 10px;
|
|
border-color: #ded6c7;
|
|
background: #fbf8ef;
|
|
color: #202124;
|
|
text-align: left;
|
|
}
|
|
|
|
.search-result-list button.active {
|
|
border-color: #2f6f5e;
|
|
background: #eef6f1;
|
|
}
|
|
|
|
.search-result-list span {
|
|
color: #3f443d;
|
|
font-weight: 500;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.notes-drawer {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 28;
|
|
display: grid;
|
|
grid-template-columns: 42px minmax(380px, 30vw);
|
|
width: min(560px, calc(100vw - 92px));
|
|
height: 100vh;
|
|
transform: translateX(calc(100% - 42px));
|
|
transition: transform 190ms ease, box-shadow 190ms ease;
|
|
}
|
|
|
|
.notes-drawer.open,
|
|
.notes-drawer.pinned,
|
|
.notes-drawer:focus-within {
|
|
transform: translateX(0);
|
|
box-shadow: -18px 0 42px rgba(17, 20, 17, 0.24);
|
|
}
|
|
|
|
.notes-drawer-grip {
|
|
display: grid;
|
|
align-content: center;
|
|
justify-items: center;
|
|
gap: 5px;
|
|
border-left: 1px solid #d1cab9;
|
|
border-right: 1px solid #3c4239;
|
|
background: #1f231f;
|
|
color: #f6f3eb;
|
|
font-size: 10px;
|
|
font-weight: 900;
|
|
letter-spacing: 0;
|
|
cursor: pointer;
|
|
width: 42px;
|
|
height: 100%;
|
|
padding: 0;
|
|
border-top: 0;
|
|
border-bottom: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.notes-workspace > header {
|
|
display: flex;
|
|
align-items: start;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
|
|
.pin-notes {
|
|
background: #2f6f5e;
|
|
color: #fffef8;
|
|
}
|
|
|
|
.notes-drawer .notes-workspace {
|
|
border: 1px solid #d4cdbd;
|
|
border-right: 0;
|
|
border-radius: 8px 0 0 8px;
|
|
background: #fffef8;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.session-manager {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
|
|
gap: 8px;
|
|
align-items: end;
|
|
}
|
|
|
|
.session-manager label {
|
|
display: grid;
|
|
gap: 4px;
|
|
color: #657061;
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
letter-spacing: 0;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.tag-editor,
|
|
.reader-tags {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.reader-tags {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.reader-tags span {
|
|
border-radius: 999px;
|
|
color: white;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
padding: 5px 9px;
|
|
}
|
|
|
|
.footnote-strip,
|
|
.status-panel {
|
|
padding: 14px 18px;
|
|
color: #3f443d;
|
|
}
|
|
|
|
.footnote-strip {
|
|
display: flex;
|
|
grid-column: 1;
|
|
gap: 12px;
|
|
align-items: flex-start;
|
|
min-height: 50px;
|
|
border-top: 1px solid #e7dfcf;
|
|
background: #fffef8;
|
|
box-shadow: inset 0 8px 16px rgba(44, 48, 42, 0.03);
|
|
}
|
|
|
|
.footnote-strip strong {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.footnote-strip span {
|
|
color: #657061;
|
|
}
|
|
|
|
.footnote-list {
|
|
display: grid;
|
|
gap: 5px;
|
|
}
|
|
|
|
.footnote-list p {
|
|
margin: 0;
|
|
color: #3f443d;
|
|
font-size: 14px;
|
|
line-height: 1.42;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.footnote-list p span {
|
|
display: inline-block;
|
|
margin-right: 7px;
|
|
color: #735c0f;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.footnote-list p:hover,
|
|
.footnote-list p:focus-visible {
|
|
color: #202124;
|
|
outline: none;
|
|
text-decoration: underline;
|
|
text-decoration-color: #d6a84f;
|
|
text-underline-offset: 3px;
|
|
}
|
|
|
|
.note-helper {
|
|
display: grid;
|
|
grid-template-columns: 74px minmax(0, 1fr);
|
|
gap: 12px;
|
|
align-items: center;
|
|
margin-top: auto;
|
|
padding: 12px;
|
|
border-color: #ded6c7;
|
|
background: #fbf8ef;
|
|
color: #202124;
|
|
text-align: left;
|
|
}
|
|
|
|
.notes-quick-panels {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
gap: 8px;
|
|
margin-top: auto;
|
|
}
|
|
|
|
.notes-quick-panels .note-helper {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.note-placeholder {
|
|
display: grid;
|
|
align-content: center;
|
|
gap: 4px;
|
|
width: 100%;
|
|
padding: 12px;
|
|
border-color: #ded6c7;
|
|
background: #fbf8ef;
|
|
color: #202124;
|
|
text-align: left;
|
|
}
|
|
|
|
.note-placeholder small {
|
|
color: #657061;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.note-helper strong,
|
|
.note-helper small {
|
|
display: block;
|
|
}
|
|
|
|
.note-helper small {
|
|
color: #657061;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.note-helper-figure {
|
|
position: relative;
|
|
display: block;
|
|
width: 64px;
|
|
height: 58px;
|
|
}
|
|
|
|
.helper-head,
|
|
.helper-body,
|
|
.helper-notebook,
|
|
.helper-pencil {
|
|
position: absolute;
|
|
display: block;
|
|
}
|
|
|
|
.helper-head {
|
|
top: 2px;
|
|
left: 20px;
|
|
width: 26px;
|
|
height: 22px;
|
|
border: 2px solid #252821;
|
|
border-radius: 8px;
|
|
background: #d6a84f;
|
|
}
|
|
|
|
.helper-head::before,
|
|
.helper-head::after {
|
|
position: absolute;
|
|
top: 8px;
|
|
width: 4px;
|
|
height: 4px;
|
|
border-radius: 50%;
|
|
background: #252821;
|
|
content: '';
|
|
}
|
|
|
|
.helper-head::before {
|
|
left: 6px;
|
|
}
|
|
|
|
.helper-head::after {
|
|
right: 6px;
|
|
}
|
|
|
|
.helper-body {
|
|
top: 27px;
|
|
left: 17px;
|
|
width: 32px;
|
|
height: 22px;
|
|
border-radius: 8px 8px 5px 5px;
|
|
background: #2f6f5e;
|
|
}
|
|
|
|
.helper-notebook {
|
|
right: 2px;
|
|
bottom: 3px;
|
|
width: 34px;
|
|
height: 22px;
|
|
border: 2px solid #c9baa0;
|
|
border-radius: 3px;
|
|
background: #fffef8;
|
|
transform: rotate(-4deg);
|
|
}
|
|
|
|
.helper-notebook::before {
|
|
position: absolute;
|
|
top: 6px;
|
|
left: 5px;
|
|
width: 20px;
|
|
height: 2px;
|
|
background: #d8cfbf;
|
|
box-shadow: 0 5px 0 #d8cfbf;
|
|
content: '';
|
|
}
|
|
|
|
.helper-pencil {
|
|
right: 18px;
|
|
bottom: 21px;
|
|
width: 24px;
|
|
height: 4px;
|
|
border-radius: 999px;
|
|
background: #735c0f;
|
|
transform-origin: right center;
|
|
animation: helper-writing 900ms ease-in-out infinite;
|
|
}
|
|
|
|
.book-tabs {
|
|
display: flex;
|
|
grid-column: 1;
|
|
gap: 5px;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
padding: 0 14px 10px;
|
|
overflow: hidden;
|
|
background: #ece9df;
|
|
}
|
|
|
|
.book-tabs.turn-forward {
|
|
animation: tab-window-forward 320ms ease;
|
|
}
|
|
|
|
.book-tabs.turn-back {
|
|
animation: tab-window-back 320ms ease;
|
|
}
|
|
|
|
.book-tabs button {
|
|
flex: 0 0 auto;
|
|
min-width: 52px;
|
|
height: 34px;
|
|
padding: 5px 8px;
|
|
border-color: #c8bea9;
|
|
border-top: 0;
|
|
border-radius: 0 0 7px 7px;
|
|
background: #efe4c9;
|
|
color: #4c422f;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
line-height: 1.05;
|
|
white-space: nowrap;
|
|
box-shadow: 0 5px 10px rgba(44, 48, 42, 0.08);
|
|
}
|
|
|
|
.book-tabs .tab-scroll-button {
|
|
min-width: 30px;
|
|
height: 31px;
|
|
padding: 4px 6px;
|
|
background: #fbf8ef;
|
|
color: #657061;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.book-tabs button:hover,
|
|
.book-tabs button:focus-visible,
|
|
.book-tabs button.active {
|
|
background: #d6a84f;
|
|
color: #151510;
|
|
}
|
|
|
|
.modal-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 40;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 24px;
|
|
background: rgba(18, 21, 18, 0.46);
|
|
}
|
|
|
|
.modal-panel {
|
|
display: grid;
|
|
gap: 18px;
|
|
width: min(920px, 100%);
|
|
max-height: calc(100vh - 48px);
|
|
overflow: auto;
|
|
padding: 22px;
|
|
border: 1px solid #d4cdbd;
|
|
border-radius: 8px;
|
|
background: #fffef8;
|
|
box-shadow: 0 22px 60px rgba(18, 21, 18, 0.3);
|
|
}
|
|
|
|
.modal-panel > header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
align-items: start;
|
|
padding-bottom: 14px;
|
|
border-bottom: 1px solid #e7dfcf;
|
|
}
|
|
|
|
.modal-panel h2,
|
|
.modal-panel h3 {
|
|
margin: 0;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.modal-panel h2 {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.modal-panel h3 {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.close-button {
|
|
background: #2c302a;
|
|
color: #fffef8;
|
|
}
|
|
|
|
.modal-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
gap: 16px;
|
|
}
|
|
|
|
.modal-section {
|
|
display: grid;
|
|
gap: 12px;
|
|
align-content: start;
|
|
padding: 16px;
|
|
border: 1px solid #e0d8c8;
|
|
border-radius: 8px;
|
|
background: #fbf8ef;
|
|
}
|
|
|
|
.modal-section label {
|
|
display: grid;
|
|
gap: 5px;
|
|
color: #657061;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.session-facts,
|
|
.about-list {
|
|
display: grid;
|
|
gap: 8px;
|
|
margin: 0;
|
|
}
|
|
|
|
.session-facts div,
|
|
.about-list div {
|
|
display: grid;
|
|
grid-template-columns: 120px minmax(0, 1fr);
|
|
gap: 12px;
|
|
}
|
|
|
|
.session-facts dt,
|
|
.about-list dt {
|
|
color: #657061;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.session-facts dd,
|
|
.about-list dd {
|
|
margin: 0;
|
|
color: #252821;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.resource-toggles {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.session-portability,
|
|
.nextcloud-export {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.session-actions {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
gap: 8px;
|
|
}
|
|
|
|
.hidden-file-input {
|
|
display: none;
|
|
}
|
|
|
|
.export-status {
|
|
margin: 0;
|
|
color: #657061;
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.resource-toggles label {
|
|
display: flex;
|
|
gap: 9px;
|
|
align-items: center;
|
|
color: #252821;
|
|
font-size: 14px;
|
|
text-transform: none;
|
|
}
|
|
|
|
.resource-toggles input {
|
|
width: auto;
|
|
}
|
|
|
|
.resource-disabled {
|
|
margin: 0;
|
|
color: #657061;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.about-modal {
|
|
width: min(760px, 100%);
|
|
}
|
|
|
|
.timeline-modal {
|
|
width: min(1080px, 100%);
|
|
}
|
|
|
|
.settings-modal {
|
|
width: min(780px, 100%);
|
|
}
|
|
|
|
.settings-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.settings-grid .modal-section:last-child {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.settings-grid input[type='range'] {
|
|
padding: 0;
|
|
}
|
|
|
|
.margin-order-list {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.margin-order-list div {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto auto;
|
|
gap: 6px;
|
|
align-items: center;
|
|
padding: 6px;
|
|
border: 1px solid #ded6c7;
|
|
border-radius: 6px;
|
|
background: #fbf8ef;
|
|
}
|
|
|
|
.margin-order-list span {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
color: #3f443d;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.margin-order-list button {
|
|
min-height: 26px;
|
|
padding: 4px 7px;
|
|
border-color: #d8cfbf;
|
|
background: #fffef8;
|
|
}
|
|
|
|
.checkbox-row {
|
|
display: flex !important;
|
|
gap: 9px !important;
|
|
align-items: center;
|
|
color: #252821 !important;
|
|
font-size: 14px !important;
|
|
text-transform: none !important;
|
|
}
|
|
|
|
.checkbox-row input {
|
|
width: auto;
|
|
}
|
|
|
|
.segmented-control {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 4px;
|
|
padding: 3px;
|
|
border: 1px solid #d8cfbf;
|
|
border-radius: 7px;
|
|
background: #fffef8;
|
|
}
|
|
|
|
.segmented-control button {
|
|
background: transparent;
|
|
color: #3f443d;
|
|
}
|
|
|
|
.segmented-control button.active {
|
|
background: #2f6f5e;
|
|
color: #fffef8;
|
|
}
|
|
|
|
.theme-dark {
|
|
background: #161a18;
|
|
color: #eee8d8;
|
|
}
|
|
|
|
.theme-dark.login-shell {
|
|
background:
|
|
linear-gradient(135deg, rgba(47, 111, 94, 0.24), transparent 36%),
|
|
#161a18;
|
|
}
|
|
|
|
.theme-dark .login-panel {
|
|
border-color: #3f493f;
|
|
background: #222820;
|
|
color: #eee8d8;
|
|
}
|
|
|
|
.theme-dark .login-panel p,
|
|
.theme-dark .login-panel label {
|
|
color: #c4cbbb;
|
|
}
|
|
|
|
.theme-dark .login-error {
|
|
border-color: #71443d;
|
|
background: #35221f;
|
|
color: #f2b0a8;
|
|
}
|
|
|
|
.theme-dark .reader {
|
|
background: #161a18;
|
|
}
|
|
|
|
.theme-dark .page-system,
|
|
.theme-dark .notes-workspace,
|
|
.theme-dark .status-panel,
|
|
.theme-dark .bible-page,
|
|
.theme-dark .page-turner,
|
|
.theme-dark .footnote-strip,
|
|
.theme-dark .modal-panel,
|
|
.theme-dark .study-margin,
|
|
.theme-dark .study-top-tools,
|
|
.theme-dark .modal-section,
|
|
.theme-dark .note-helper,
|
|
.theme-dark .note-placeholder,
|
|
.theme-dark .segmented-control,
|
|
.theme-dark input,
|
|
.theme-dark select,
|
|
.theme-dark textarea {
|
|
border-color: #3f493f;
|
|
background: #222820;
|
|
color: #eee8d8;
|
|
}
|
|
|
|
.theme-dark .bible-page,
|
|
.theme-dark .page-turner,
|
|
.theme-dark .footnote-strip {
|
|
background: #1d221c;
|
|
}
|
|
|
|
.theme-dark .page-columns {
|
|
column-rule-color: #333b32;
|
|
}
|
|
|
|
.theme-dark .page-verse {
|
|
color: #f2eadb;
|
|
}
|
|
|
|
.theme-dark .page-verse.selected {
|
|
background: #3a3322;
|
|
}
|
|
|
|
.theme-dark .page-verse sup,
|
|
.theme-dark .chapter-tabs button,
|
|
.theme-dark .footnote-list p span {
|
|
color: #ddb763;
|
|
}
|
|
|
|
.theme-dark .chapter-tabs button.active,
|
|
.theme-dark .chapter-tabs button:hover,
|
|
.theme-dark .chapter-tabs button:focus-visible {
|
|
color: #fff7df;
|
|
}
|
|
|
|
.theme-dark .original-language-verse,
|
|
.theme-dark .english-strong-line,
|
|
.theme-dark .resource-card,
|
|
.theme-dark .margin-order-list div,
|
|
.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;
|
|
}
|
|
|
|
.theme-dark .margin-section-header:hover,
|
|
.theme-dark .margin-section-header:focus-visible {
|
|
background: #344031;
|
|
}
|
|
|
|
.theme-dark .strong-focus {
|
|
border-color: #3b5a50;
|
|
background: #1f302b;
|
|
}
|
|
|
|
.theme-dark .panel-header {
|
|
border-bottom-color: #3f493f;
|
|
}
|
|
|
|
.theme-dark .panel-header span,
|
|
.theme-dark .margin-reference,
|
|
.theme-dark .translit,
|
|
.theme-dark .pronunciation,
|
|
.theme-dark .eyebrow,
|
|
.theme-dark .collapse-button,
|
|
.theme-dark .mini-settings,
|
|
.theme-dark .resource-disabled,
|
|
.theme-dark .commentary-list small,
|
|
.theme-dark .dictionary-list p strong,
|
|
.theme-dark .page-turner span,
|
|
.theme-dark .footnote-strip span,
|
|
.theme-dark .timeline-canvas time,
|
|
.theme-dark .timeline-canvas span,
|
|
.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,
|
|
.theme-dark .page-controls label,
|
|
.theme-dark .margin-order-list span {
|
|
color: #aaa996;
|
|
}
|
|
|
|
.theme-dark .strong-focus h4,
|
|
.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,
|
|
.theme-dark .lemma-line-text,
|
|
.theme-dark .session-facts dd,
|
|
.theme-dark .about-list dd,
|
|
.theme-dark .about-modal p,
|
|
.theme-dark .resource-toggles label,
|
|
.theme-dark .checkbox-row,
|
|
.theme-dark .segmented-control button {
|
|
color: #eee8d8 !important;
|
|
}
|
|
|
|
.theme-dark .segmented-control button.active,
|
|
.theme-dark .study-top-tools button,
|
|
.theme-dark .pin-notes,
|
|
.theme-dark .strong-focus button,
|
|
.theme-dark .about-links a {
|
|
background: #3a7a69;
|
|
color: #fffdf6 !important;
|
|
}
|
|
|
|
.theme-dark .modal-backdrop {
|
|
background: rgba(5, 7, 5, 0.68);
|
|
}
|
|
|
|
.theme-dark .close-button,
|
|
.theme-dark .notes-drawer-grip {
|
|
background: #111511;
|
|
}
|
|
|
|
.theme-dark .top-menu-button,
|
|
.theme-dark .menu-popover,
|
|
.theme-dark .menu-popover button {
|
|
border-color: #3f493f;
|
|
background: #222820;
|
|
color: #eee8d8;
|
|
}
|
|
|
|
.theme-dark .menu-popover header {
|
|
border-bottom-color: #3f493f;
|
|
}
|
|
|
|
.theme-dark .book-tabs {
|
|
background: #161a18;
|
|
}
|
|
|
|
.theme-dark .book-tabs button {
|
|
border-color: #4b422f;
|
|
background: #312c20;
|
|
color: #ddc17f;
|
|
}
|
|
|
|
.theme-dark .book-tabs button:hover,
|
|
.theme-dark .book-tabs button:focus-visible,
|
|
.theme-dark .book-tabs button.active {
|
|
background: #c7963f;
|
|
color: #141510;
|
|
}
|
|
|
|
.theme-dark .split-resizer {
|
|
background: linear-gradient(90deg, transparent, #4b5448 45%, #4b5448 55%, transparent);
|
|
}
|
|
|
|
.theme-dark .split-resizer:hover,
|
|
.theme-dark .split-resizer:focus-visible {
|
|
background: #c7963f;
|
|
}
|
|
|
|
.about-modal p {
|
|
margin: 0;
|
|
color: #3f443d;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.about-links {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
|
|
.about-links a {
|
|
border-radius: 6px;
|
|
padding: 9px 11px;
|
|
background: #2f6f5e;
|
|
color: white;
|
|
font-weight: 800;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.timeline-canvas {
|
|
overflow-x: auto;
|
|
padding: 30px 4px 12px;
|
|
}
|
|
|
|
.timeline-canvas ol {
|
|
position: relative;
|
|
display: flex;
|
|
gap: 18px;
|
|
min-width: max-content;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.timeline-canvas ol::before {
|
|
position: absolute;
|
|
top: 18px;
|
|
right: 0;
|
|
left: 0;
|
|
height: 3px;
|
|
border-radius: 999px;
|
|
background: #d6a84f;
|
|
content: '';
|
|
}
|
|
|
|
.timeline-canvas li {
|
|
position: relative;
|
|
width: 190px;
|
|
padding-top: 30px;
|
|
}
|
|
|
|
.timeline-dot {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 16px;
|
|
z-index: 1;
|
|
width: 18px;
|
|
height: 18px;
|
|
border: 3px solid #fffef8;
|
|
border-radius: 50%;
|
|
background: #2f6f5e;
|
|
box-shadow: 0 0 0 2px #d6a84f;
|
|
}
|
|
|
|
.timeline-canvas button {
|
|
display: grid;
|
|
gap: 5px;
|
|
width: 100%;
|
|
min-height: 120px;
|
|
align-content: start;
|
|
border-color: #ded6c7;
|
|
background: #fbf8ef;
|
|
color: #202124;
|
|
text-align: left;
|
|
}
|
|
|
|
.timeline-canvas button:disabled {
|
|
cursor: default;
|
|
opacity: 1;
|
|
}
|
|
|
|
.timeline-canvas time,
|
|
.timeline-canvas span,
|
|
.timeline-canvas small {
|
|
color: #657061;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.timeline-canvas small {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.empty-timeline {
|
|
display: grid;
|
|
gap: 12px;
|
|
justify-items: center;
|
|
padding: 30px;
|
|
color: #657061;
|
|
}
|
|
|
|
@keyframes page-turn-forward {
|
|
0% {
|
|
opacity: 0.8;
|
|
transform: translateX(18px) rotateY(-4deg);
|
|
}
|
|
55% {
|
|
opacity: 1;
|
|
transform: translateX(-6px) rotateY(2deg);
|
|
}
|
|
100% {
|
|
transform: translateX(0) rotateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes page-turn-back {
|
|
0% {
|
|
opacity: 0.8;
|
|
transform: translateX(-18px) rotateY(4deg);
|
|
}
|
|
55% {
|
|
opacity: 1;
|
|
transform: translateX(6px) rotateY(-2deg);
|
|
}
|
|
100% {
|
|
transform: translateX(0) rotateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes tab-window-forward {
|
|
0% {
|
|
transform: translateX(18px);
|
|
opacity: 0.65;
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes tab-window-back {
|
|
0% {
|
|
transform: translateX(-18px);
|
|
opacity: 0.65;
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes helper-writing {
|
|
0%,
|
|
100% {
|
|
transform: translate(0, 0) rotate(-18deg);
|
|
}
|
|
50% {
|
|
transform: translate(5px, 3px) rotate(-10deg);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.page-system.turn-forward .bible-page,
|
|
.page-system.turn-back .bible-page,
|
|
.book-tabs.turn-forward,
|
|
.book-tabs.turn-back,
|
|
.helper-pencil {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
.status-panel.error {
|
|
border-color: #b42318;
|
|
color: #b42318;
|
|
}
|
|
|
|
.compare-pages {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
min-height: 0;
|
|
}
|
|
|
|
.compare-pages .bible-page + .bible-page {
|
|
border-left: 1px solid #e4dece;
|
|
}
|
|
|
|
.compare-placeholder {
|
|
align-content: start;
|
|
gap: 24px;
|
|
background: #fbf8ef;
|
|
}
|
|
|
|
.compare-placeholder h2 {
|
|
margin: 0 0 10px;
|
|
color: #252821;
|
|
font-size: 22px;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.compare-placeholder p {
|
|
max-width: 36rem;
|
|
margin: 0;
|
|
color: #657061;
|
|
font-size: 15px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.study-desk,
|
|
.study-desk.notes,
|
|
.study-desk.study,
|
|
.study-desk.compare {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.page-system.study,
|
|
.page-system.notes,
|
|
.compare-pages {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.study-margin,
|
|
.compare-pages .bible-page + .bible-page {
|
|
grid-column: 1;
|
|
grid-row: auto;
|
|
border-top: 1px solid #e4dece;
|
|
border-left: 0;
|
|
}
|
|
|
|
.reader {
|
|
height: auto;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.bible-page {
|
|
min-height: 760px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.login-shell {
|
|
padding: 18px;
|
|
}
|
|
|
|
.login-panel {
|
|
grid-template-columns: 1fr;
|
|
gap: 22px;
|
|
padding: 22px;
|
|
}
|
|
|
|
.login-panel h1 {
|
|
font-size: 34px;
|
|
}
|
|
|
|
.app-shell {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.top-bar {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.page-controls {
|
|
grid-template-columns: 34px 1fr 1fr;
|
|
}
|
|
|
|
.page-columns {
|
|
column-count: 1;
|
|
}
|
|
}
|