🎨 Align checkbox snippet / lists with snippetor

ebullient · Jan 22, 2022 · 3c2e1e4 · 3c2e1e4
1 parent 99771d6
commit 3c2e1e4
Show file tree

Hide file tree

Showing 6 changed files with 131 additions and 70 deletions.
diff --git a/README.md b/README.md
@@ -22,6 +22,8 @@ Some light styling has also been applied for the following community plugins:
 - timelines
 - tracker
 
+This theme is compatible with custom task snippets from the [Snippitor](https://github.com/ebullient/obsidian-snippetor).
+
 ## Style Settings
 
 This theme does support style settings. Settable attributes: 
@@ -47,6 +49,10 @@ This theme does support style settings. Settable attributes:
 - (0.2.7) Tag brightness (dark/light mode)
     Select a brightness or contrast level for tags.
 
+- (0.3.4) Use default theme list indent
+    This theme condenses whitespace padding in ordered and unordered lists. This toggle allows you to 
+    disable that, and preserve list spaceing consistent with the default theme.
+
 ## Admonitions
 
 As of version 6.5.1, you can disable the color picker for admonitions (globally or per-admonition) to have colors picked up from CSS styles instead. All of the default admonitions, in addition to two additional custom types, have been styled.

diff --git a/src/ebullientworks.scss b/src/ebullientworks.scss
@@ -17,21 +17,27 @@ name: Ebullientworks theme settings
 id: ebullientworks-theme
 settings:
   -
-    id: ebullientworks-show-edit-mode-external-links
-    title: Show external links in edit mode
-    description: If true, external links (or the content of markdown links) will be shown in edit mode. External links are hidden by default.
+    id: ebullientworks-use-default-list-indent
+    title: Use the default indent for lists
+    description: This theme compresses list indent whitespace by default. Enable this to use the indent spacing from the default theme.
     type: class-toggle
     default: false
   -
     id: ebullientworks-nix-checkbox
-    title: Suppress or Remove this theme's checkbox styles
-    description: Set this to true if you are going to use other themes to manage the style for your lists and checkboxes.
+    title: Suppress/Remove this checkbox styles
+    description: Set this to true if you are going to use your own task snippet
     type: class-toggle
     default: false
   -
-    id: ebullientworks-floating-frontmatter
-    title: Float front-matter in a box to the right
-    description: If true, front-matter in preview mode will be collapsed in a top-right container.
+    id: ebullientworks-show-hide
+    title: Showing and Hiding content
+    type: heading
+    level: 3
+    collapsed: true
+  -
+    id: ebullientworks-show-edit-mode-external-links
+    title: Show external links in edit mode
+    description: If true, external links (or the content of markdown links) will be shown in edit mode. External links are hidden by default.
     type: class-toggle
     default: false
   -
@@ -40,12 +46,24 @@ settings:
     description: If true, hide collapse indicators in all three modes unless they are hovered over or the line is active.
     type: class-toggle
     default: false
+  -
+    id: ebullientworks-floating-frontmatter
+    title: Float front-matter in a box to the right
+    description: If true, front-matter in preview mode will be collapsed in a top-right container.
+    type: class-toggle
+    default: false
   -
     id: ebullientworks-table-width
     title: Prevent table content from extending beyond the width of the page
     description: If true, tables will have a maximum width set. Cell content will be wrapped (mid-word if necessary).
     type: class-toggle
     default: false
+  -
+    id: ebullientworks-fonts
+    title: Fonts
+    type: heading
+    level: 3
+    collapsed: true
   -
     title: Headings
     description: Font for text headings (h1 to h6)
@@ -69,6 +87,12 @@ settings:
     id: font-monospace
     type: variable-text
     default: "'Fira Code', 'Source Code Pro', Jetbrains Mono, SFMono-Regular, Consolas, 'Roboto Mono', monospace"
+  -
+    id: ebullientworks-colors
+    title: Colors
+    type: heading
+    level: 3
+    collapsed: true
   -
     title: Primary accent color
     id: ebullientworks-primary-accent

diff --git a/src/fragments/03c-modal-input.scss b/src/fragments/03c-modal-input.scss
@@ -115,6 +115,10 @@ input[type='number'] {
     color: var(--text-on-accent);
   }
 }
+.modal button:not(.mod-cta):not(.mod-warning) {
+  background-color: var(--interactive-accent);
+  color: var(--text-on-accent);
+}
 .graph-controls {
   .checkbox-container {
     background-color: var(--modal-checkbox-bg);

diff --git a/src/fragments/06-lists-checkboxes.scss b/src/fragments/06-lists-checkboxes.scss
@@ -27,15 +27,18 @@
   }
 }
 
-body:not(.ebullientworks-nix-checkbox) {
+body:not(.ebullientworks-default-list-indent) {
   /** Condense whitespace */
   .markdown-preview-view {
+    ol,
     ul {
       margin-inline-start: 0px;
       margin-inline-end: 0px;
       padding-inline-start: 20px;
     }
   }
+}
 
+body:not(.ebullientworks-nix-checkbox) {
   @import '06a-checkboxes.scss';
 }
diff --git a/src/fragments/06a-checkboxes.scss b/src/fragments/06a-checkboxes.scss
@@ -11,56 +11,80 @@
 .markdown-preview-view input.task-list-item-checkbox {
   -webkit-appearance: none;
   box-sizing: border-box;
-  border: 1px solid var(--text-normal);
-  position: relative;
-  width: 13px;
-  height: 13px;
-  margin: 0;
-  margin-right: 4px;
-  margin-bottom: 1px;
   transition: background-color 200ms ease-out 0s;
   cursor: pointer;
   filter: none;
+  border: 1px solid var(--text-normal);
   border-radius: 2px;
+  position: relative;
+}
+.markdown-preview-view input.task-list-item-checkbox {
+  margin-top: 2px;
+  margin-bottom: 1px;
+}
+.markdown-source-view.mod-cm6 input.task-list-item-checkbox {
+  margin-top: 3px;
+  margin-bottom: 3px;
 }
 .markdown-source-view.mod-cm6 input.task-list-item-checkbox:checked::before,
 .markdown-preview-view input.task-list-item-checkbox:checked::before {
+  font-family: var(--font-monospace);
   position: absolute;
   text-align: center;
-  font-weight: 600;
-  line-height: 12px;
-  font-size: 12px;
+  font-weight: 500;
+  line-height: 14px;
+  font-size: 14px;
   left: 1px;
   right: 1px;
 }
-
+.markdown-source-view.mod-cm6 input.task-list-item-checkbox::before,
+.markdown-preview-view ul > li > input.task-list-item-checkbox:checked::before,
+.markdown-preview-view ul > li > p > input.task-list-item-checkbox:checked::before {
+  content: "✓";
+  color: var(--text-normal);
+}
+.markdown-source-view.mod-cm6 input.task-list-item-checkbox,
+.markdown-preview-view ul > li > input.task-list-item-checkbox,
+.markdown-preview-view ul > li > p > input.task-list-item-checkbox {
+  border-color: var(--text-normal);
+  color: var(--text-normal);
+}
 .markdown-preview-view ul > li.task-list-item {
   font-weight: normal;
   color: var(--text-normal);
 }
-.markdown-source-view.mod-cm6 input.task-list-item-checkbox[data-task="X"]::before,
+.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task]:not([data-task=" "]),
+.markdown-source-view.mod-cm6 input.task-list-item-checkbox + span,
+.markdown-source-view.mod-cm6 input.task-list-item-checkbox + span + span,
+.markdown-preview-view ul > li.task-list-item.is-checked {
+  color: var(--text-normal);
+  text-decoration: none;
+}
+
+/* 'x' for completed task ('- [x]') */
 .markdown-source-view.mod-cm6 input.task-list-item-checkbox[data-task="x"]::before,
-.markdown-preview-view ul > li[data-task=X] > input.task-list-item-checkbox:checked::before,
-.markdown-preview-view ul > li[data-task=X] > p > input.task-list-item-checkbox:checked::before,
-.markdown-preview-view ul > li[data-task=x] > input.task-list-item-checkbox:checked::before,
-.markdown-preview-view ul > li[data-task=x] > p > input.task-list-item-checkbox:checked::before {
+.markdown-preview-view ul > li[data-task="X"] > input.task-list-item-checkbox:checked::before,
+.markdown-preview-view ul > li[data-task="X"] > p > input.task-list-item-checkbox:checked::before,
+.markdown-preview-view ul > li[data-task="x"] > input.task-list-item-checkbox:checked::before,
+.markdown-preview-view ul > li[data-task="x"] > p > input.task-list-item-checkbox:checked::before {
   content: "✓";
   color: var(--checkbox-checked);
 }
 .markdown-source-view.mod-cm6 input.task-list-item-checkbox[data-task="X"],
 .markdown-source-view.mod-cm6 input.task-list-item-checkbox[data-task="x"],
-.markdown-preview-view ul > li[data-task=X] > input.task-list-item-checkbox,
-.markdown-preview-view ul > li[data-task=X] > p > input.task-list-item-checkbox,
-.markdown-preview-view ul > li[data-task=x] > input.task-list-item-checkbox,
-.markdown-preview-view ul > li[data-task=x] > p > input.task-list-item-checkbox {
+.markdown-preview-view ul > li[data-task="X"] > input.task-list-item-checkbox,
+.markdown-preview-view ul > li[data-task="X"] > p > input.task-list-item-checkbox,
+.markdown-preview-view ul > li[data-task="x"] > input.task-list-item-checkbox,
+.markdown-preview-view ul > li[data-task="x"] > p > input.task-list-item-checkbox {
   border-color: var(--checkbox-checked);
   color: var(--checkbox-checked);
 }
 
+/* '-' for completed task ('- [-]') */
 .markdown-source-view.mod-cm6 input.task-list-item-checkbox[data-task="-"]::before,
 .markdown-preview-view ul > li[data-task="-"] > input.task-list-item-checkbox:checked::before,
 .markdown-preview-view ul > li[data-task="-"] > p > input.task-list-item-checkbox:checked::before {
-  content: "−";
+  content: "-";
   color: var(--checkbox-cancelled);
 }
 .markdown-source-view.mod-cm6 input.task-list-item-checkbox[data-task="-"],
@@ -69,7 +93,15 @@
   border-color: var(--checkbox-cancelled);
   color: var(--checkbox-cancelled);
 }
+.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="-"],
+.markdown-source-view.mod-cm6 input.task-list-item-checkbox[data-task="-"] + span,
+.markdown-source-view.mod-cm6 input.task-list-item-checkbox[data-task="-"] + span + span,
+.markdown-preview-view ul > li[data-task="-"].task-list-item.is-checked {
+  text-decoration: line-through;
+  color: var(--checkbox-cancelled);
+}
 
+/* '>' for completed task ('- [>]') */
 .markdown-source-view.mod-cm6 input.task-list-item-checkbox[data-task=">"]::before,
 .markdown-preview-view ul > li[data-task=">"] > input.task-list-item-checkbox:checked::before,
 .markdown-preview-view ul > li[data-task=">"] > p > input.task-list-item-checkbox:checked::before {
@@ -83,6 +115,7 @@
   color: var(--checkbox-deferred);
 }
 
+/* '?' for completed task ('- [?]') */
 .markdown-source-view.mod-cm6 input.task-list-item-checkbox[data-task="?"]::before,
 .markdown-preview-view ul > li[data-task="?"] > input.task-list-item-checkbox:checked::before,
 .markdown-preview-view ul > li[data-task="?"] > p > input.task-list-item-checkbox:checked::before {
@@ -96,20 +129,22 @@
   color: var(--checkbox-question);
 }
 
-.markdown-source-view.mod-cm6 input.task-list-item-checkbox[data-task=R]::before,
-.markdown-preview-view ul > li[data-task=R] > input.task-list-item-checkbox:checked::before,
-.markdown-preview-view ul > li[data-task=R] > p > input.task-list-item-checkbox:checked::before {
+/* 'R' for completed task ('- [R]') */
+.markdown-source-view.mod-cm6 input.task-list-item-checkbox[data-task="R"]::before,
+.markdown-preview-view ul > li[data-task="R"] > input.task-list-item-checkbox:checked::before,
+.markdown-preview-view ul > li[data-task="R"] > p > input.task-list-item-checkbox:checked::before {
   content: "👀";
   font-size: 0.7em;
   color: var(--checkbox-review);
 }
-.markdown-source-view.mod-cm6 input.task-list-item-checkbox[data-task=R],
-.markdown-preview-view ul > li[data-task=R] > input.task-list-item-checkbox,
-.markdown-preview-view ul > li[data-task=R] > p > input.task-list-item-checkbox {
+.markdown-source-view.mod-cm6 input.task-list-item-checkbox[data-task="R"],
+.markdown-preview-view ul > li[data-task="R"] > input.task-list-item-checkbox,
+.markdown-preview-view ul > li[data-task="R"] > p > input.task-list-item-checkbox {
   border-color: var(--checkbox-review);
   color: var(--checkbox-review);
 }
 
+/* '!' for completed task ('- [!]') */
 .markdown-source-view.mod-cm6 input.task-list-item-checkbox[data-task="!"]::before,
 .markdown-preview-view ul > li[data-task="!"] > input.task-list-item-checkbox:checked::before,
 .markdown-preview-view ul > li[data-task="!"] > p > input.task-list-item-checkbox:checked::before {
@@ -122,12 +157,19 @@
   border-color: var(--checkbox-important);
   color: var(--checkbox-important);
 }
+.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="!"],
+.markdown-source-view.mod-cm6 input.task-list-item-checkbox[data-task="!"] + span,
+.markdown-source-view.mod-cm6 input.task-list-item-checkbox[data-task="!"] + span + span,
+.markdown-preview-view ul > li[data-task="!"].task-list-item.is-checked {
+  color: var(--checkbox-important);
+  font-weight: 900;
+}
 
+/* '/' for completed task ('- [/]') */
 .markdown-source-view.mod-cm6 input.task-list-item-checkbox[data-task="/"]::before,
 .markdown-preview-view ul > li[data-task="/"] > input.task-list-item-checkbox:checked::before,
 .markdown-preview-view ul > li[data-task="/"] > p > input.task-list-item-checkbox:checked::before {
   content: " ";
-  font-family: var(--font-monospace);
   line-height: 18px;
 }
 .markdown-source-view.mod-cm6 input.task-list-item-checkbox[data-task="/"],
@@ -136,43 +178,26 @@
   border-color: var(--checkbox-in-progress);
   background: linear-gradient(135deg, transparent 50%, var(--checkbox-in-progress) 50%);
 }
-.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task]:not([data-task=" "]),
-.markdown-source-view.mod-cm6 input.task-list-item-checkbox + span,
-.markdown-source-view.mod-cm6 input.task-list-item-checkbox + span + span,
-.markdown-preview-view ul > li.task-list-item.is-checked {
-  color: var(--text-normal);
-  text-decoration: none;
-}
-.markdown-source-view.mod-cm6 input.task-list-item-checkbox[data-task="!"] + span,
-.markdown-source-view.mod-cm6 input.task-list-item-checkbox[data-task="!"] + span + span,
-.markdown-preview-view ul > li[data-task="!"].task-list-item.is-checked {
-  font-weight: 900;
-}
-.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="-"],
-.markdown-source-view.mod-cm6 input.task-list-item-checkbox[data-task="-"] + span,
-.markdown-source-view.mod-cm6 input.task-list-item-checkbox[data-task="-"] + span + span,
-.markdown-preview-view ul > li[data-task="-"].task-list-item.is-checked {
-  color: var(--checkbox-cancelled);
-  text-decoration: line-through;
-}
+
+/* Consistent hover colors */
 .markdown-source-view.mod-cm6 input.task-list-item-checkbox:hover,
 .markdown-source-view.mod-cm6 input.task-list-item-checkbox:checked:hover,
-.markdown-preview-view li[data-task=X] > input.task-list-item-checkbox:checked:hover,
-.markdown-preview-view li[data-task=X] > p > input.task-list-item-checkbox:checked:hover,
-.markdown-preview-view li[data-task=x] > input.task-list-item-checkbox:checked:hover,
-.markdown-preview-view li[data-task=x] > p > input.task-list-item-checkbox:checked:hover,
+.markdown-preview-view li[data-task="!"] > input.task-list-item-checkbox:checked:hover,
+.markdown-preview-view li[data-task="!"] > p > input.task-list-item-checkbox:checked:hover,
 .markdown-preview-view li[data-task="-"] > input.task-list-item-checkbox:checked:hover,
 .markdown-preview-view li[data-task="-"] > p > input.task-list-item-checkbox:checked:hover,
+.markdown-preview-view li[data-task="/"] > input.task-list-item-checkbox:checked:hover,
+.markdown-preview-view li[data-task="/"] > p > input.task-list-item-checkbox:checked:hover,
 .markdown-preview-view li[data-task=">"] > input.task-list-item-checkbox:checked:hover,
 .markdown-preview-view li[data-task=">"] > p > input.task-list-item-checkbox:checked:hover,
 .markdown-preview-view li[data-task="?"] > input.task-list-item-checkbox:checked:hover,
 .markdown-preview-view li[data-task="?"] > p > input.task-list-item-checkbox:checked:hover,
-.markdown-preview-view li[data-task=R] > input.task-list-item-checkbox:checked:hover,
-.markdown-preview-view li[data-task=R] > p > input.task-list-item-checkbox:checked:hover,
-.markdown-preview-view li[data-task="/"] > input.task-list-item-checkbox:checked:hover,
-.markdown-preview-view li[data-task="/"] > p > input.task-list-item-checkbox:checked:hover,
-.markdown-preview-view li[data-task="!"] > input.task-list-item-checkbox:checked:hover,
-.markdown-preview-view li[data-task="!"] > p > input.task-list-item-checkbox:checked:hover,
+.markdown-preview-view li[data-task="R"] > input.task-list-item-checkbox:checked:hover,
+.markdown-preview-view li[data-task="R"] > p > input.task-list-item-checkbox:checked:hover,
+.markdown-preview-view li[data-task="X"] > input.task-list-item-checkbox:checked:hover,
+.markdown-preview-view li[data-task="X"] > p > input.task-list-item-checkbox:checked:hover,
+.markdown-preview-view li[data-task="x"] > input.task-list-item-checkbox:checked:hover,
+.markdown-preview-view li[data-task="x"] > p > input.task-list-item-checkbox:checked:hover,
 .markdown-preview-view input.task-list-item-checkbox:hover {
   color: var(--text-on-accent);
   background-color: var(--checkbox-hover);

diff --git a/src/tasks-snippet.scss b/src/tasks-snippet.scss
@@ -21,11 +21,10 @@ Ebullientworks tasks $version$ by @ebullient
 }
 
 /** Clear background from minimal theme */
-.checklist-plugin-main .group .compact>.toggle .checked,
-.is-flashing input[type=checkbox]:checked, input[type=checkbox]:checked {
+.checklist-plugin-main .group .compact > .toggle .checked,
+.is-flashing input[type="checkbox"]:checked,
+input[type="checkbox"]:checked {
   background-color: unset !important;
 }
 
 @import 'fragments/06a-checkboxes.scss';
-
-