diff --git a/README.md b/README.md index a86a6e2..0b63ffe 100644 --- 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 index d34269a..4baf22b 100644 --- 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 index 946d198..df91a1a 100644 --- 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 index a90357f..33b3e54 100644 --- 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 index 2274479..1c7a218 100644 --- 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 index 9233c31..857feed 100644 --- 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'; - -