Add dark mode and compact chapter links
This commit is contained in:
+209
-11
@@ -386,29 +386,37 @@ textarea:focus-visible {
|
||||
|
||||
.chapter-tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
gap: 3px;
|
||||
max-height: 38px;
|
||||
gap: 0;
|
||||
max-width: 100%;
|
||||
max-height: 18px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.chapter-tabs button {
|
||||
min-width: 22px;
|
||||
min-height: 20px;
|
||||
padding: 2px 5px;
|
||||
border-color: #cfc4ad;
|
||||
background: #f2ead8;
|
||||
color: #4c422f;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
padding: 0 3px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: #6f5a24;
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
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;
|
||||
background: transparent;
|
||||
color: #151510;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: #d6a84f;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
.page-columns {
|
||||
@@ -1291,6 +1299,196 @@ textarea:focus-visible {
|
||||
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 .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 {
|
||||
border-color: #3f493f;
|
||||
background: #20251f;
|
||||
}
|
||||
|
||||
.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 .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 .session-facts dt,
|
||||
.theme-dark .about-list dt,
|
||||
.theme-dark .modal-section label,
|
||||
.theme-dark .page-controls label {
|
||||
color: #aaa996;
|
||||
}
|
||||
|
||||
.theme-dark .strong-focus h4,
|
||||
.theme-dark .strong-focus p,
|
||||
.theme-dark .commentary-list h3,
|
||||
.theme-dark .dictionary-list h3,
|
||||
.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 .tool-rail,
|
||||
.theme-dark .notes-drawer-grip {
|
||||
background: #111511;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
Reference in New Issue
Block a user