obsidian-plugin/scotttomaszewski_obsidian-disciples-journal
1
0
Fork 0
mirror of https://github.com/scotttomaszewski/obsidian-disciples-journal.git synced 2026-07-22 05:42:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: styles for verse highlight and action bar

Browse source
This commit is contained in:
Scott Tomaszewski 2026-06-02 22:18:44 -04:00
parent 4cab57f53e
commit 1be2f41afc
1 changed files with 87 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
styles.css
View file

@ -527,3 +527,90 @@ button.clear-input-button {
.disciples-journal-book-suggest-input {
padding-right: 1.5em;
}
/* ===== Verse selection ===== */
.dj-selectable .dj-verse {
cursor: pointer;
border-radius: var(--radius-s);
}
.dj-selectable .dj-verse:hover {
background: var(--background-modifier-hover);
}
.dj-verse-selected,
.dj-selectable .dj-verse-selected:hover {
background: var(--text-selection);
box-shadow: inset 0 0 0 1px var(--text-accent);
}
/* Floating action bar (appears only while verses are selected) */
.dj-verse-action-bar {
position: fixed;
z-index: var(--layer-popover);
display: flex;
align-items: center;
gap: var(--size-4-2);
padding: var(--size-4-2) var(--size-4-3);
border-radius: var(--radius-m);
background: var(--background-secondary);
box-shadow: var(--shadow-l);
}
.dj-verse-action-label {
font-weight: var(--font-bold);
margin-right: var(--size-4-1);
}
.dj-verse-action-bar button {
cursor: pointer;
}
.dj-split-button {
display: inline-flex;
}
.dj-split-button .dj-split-main {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.dj-split-button .dj-split-chevron {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
padding-left: var(--size-4-1);
padding-right: var(--size-4-1);
}
.dj-format-toggle {
display: inline-flex;
gap: var(--size-2-1);
margin-right: var(--size-4-1);
}
.dj-format-toggle button.is-active {
background: var(--interactive-accent);
color: var(--text-on-accent);
}
.dj-verse-action-bar button:focus-visible {
outline: 2px solid var(--interactive-accent);
outline-offset: 2px;
}
/* Bottom-dock and enlarge touch targets on narrow / mobile layouts */
@media (max-width: 600px) {
.dj-verse-action-bar {
left: var(--size-4-2) !important;
right: var(--size-4-2);
top: auto !important;
bottom: var(--size-4-3);
justify-content: center;
flex-wrap: wrap;
}
.dj-verse-action-bar button {
min-height: 44px;
min-width: 44px;
}
}