improve: dark theme for inline todo #21

SeptemberHX · Oct 25, 2022 · 63eb99c · 63eb99c
1 parent 99a5497
commit 63eb99c
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 3 deletions.
diff --git a/src/inlineTodo/panelHtml.ts b/src/inlineTodo/panelHtml.ts
@@ -346,6 +346,7 @@ function createFilterPanelBody(project: string, tag: string, due: string, items:
 function createHTMLForTodoItem(todoItem: Todo, showDescription: boolean) {
     let result = `
             <li class="list-group-item priority-${todoItem.priority}">
+            <div class="todo-item">
                 <input class="form-check-input me-1" type="checkbox" value="" id="${todoItem.note}-${todoItem.index}" onchange="todoItemChanged(this.id, this.checked)">
                 <p class="form-check-label" for="${todoItem.note}-${todoItem.index}" onclick="todoItemClicked('${todoItem.note}-${todoItem.index}')">${md.renderInline(todoItem.msg)}</p>
         `;
@@ -399,6 +400,6 @@ function createHTMLForTodoItem(todoItem: Todo, showDescription: boolean) {
         result += `<span class="badge bg-primary">${dateString}</span>`
     }
     result += `</div>`;
-    result += `</div></li>`;
+    result += `</div></div></li>`;
     return result;
 }
diff --git a/src/readcube/panelHtml.ts b/src/readcube/panelHtml.ts
@@ -45,7 +45,7 @@ export function panelHtml(currItem: PaperItem, currAnnos: AnnotationItem[], pape
     result.push('</ul>')
 
     result.push(`<div class="tab-content" id="pills-tabContent">`);
-    result.push(`<div class="tab-pane fade show ${currTabIndex === 1 ? 'active' : ''}" id="pills-paper-info" role="tabpanel" aria-labelledby="pills-paper-info-tab" tabindex="0"><ul class="list-group">`);
+    result.push(`<div class="tab-pane fade show ${currTabIndex === 1 ? 'active' : ''}" id="pills-paper-info" role="tabpanel" aria-labelledby="pills-paper-info-tab" tabindex="0"><ul class="list-group paper-list">`);
     result.push(generatePaperInfoPage(currItem, currNotes));
     result.push('</ul></div>');
     result.push(`<div class="tab-pane fade show ${currTabIndex === 2 ? 'active' : ''}" id="pills-paper-anno" role="tabpanel" aria-labelledby="pills-paper-anno-tab" tabindex="0">`);

diff --git a/src/scripts/readcube/readcube.css b/src/scripts/readcube/readcube.css
@@ -225,3 +225,7 @@ div.paper-refs-list .ref-info-title {
     margin-top: 1em;
     padding-bottom: 1em;
 }
+
+ul.list-group.paper-list {
+    border: transparent;
+}
diff --git a/src/scripts/relatedNotes/relatedNotes.css b/src/scripts/relatedNotes/relatedNotes.css
@@ -35,7 +35,7 @@ span.related-element-parent.badge.text-bg-light {
     word-break: break-word;
     hyphens: auto;
     font-size: smaller;
-    opacity: 0.6;
+    opacity: 0.8;
 }
 
 .related-notes-div .related-element-title {

diff --git a/src/scripts/sidebars/custom.css b/src/scripts/sidebars/custom.css
@@ -55,8 +55,16 @@ div.spinner-border {
 }
 
 .list-group {
+    --bs-list-group-border-color: var(--joplin-divider-color);
     --bs-list-group-color: var(--joplin-color);
     --bs-list-group-bg: var(--joplin-background-color);
+    border: 1px solid var(--bs-list-group-border-color);
+}
+
+.list-group-item {
+    border-right: none;
+    border-top: none;
+    --bs-list-group-border-color: var(--joplin-divider-color);
 }
 
 html {
@@ -106,3 +114,18 @@ div.info-line .info-line-spans {
 div.info-line span {
     padding-left: 0.25em;
 }
+
+.card {
+    --bs-card-bg: var(--joplin-background-color);
+    --bs-card-border-color: var(--joplin-divider-color);
+}
+
+input.form-control, input.form-control:focus {
+    background-color: var(--joplin-background-color);
+    color: var(--joplin-color);
+}
+
+select.form-select {
+    background-color: var(--joplin-background-color);
+    color: var(--joplin-color);
+}