From 72400c51653e2e4984cc3a1d75158e25b06ebe92 Mon Sep 17 00:00:00 2001 From: efemkay Date: Sat, 12 Aug 2023 16:40:54 +0800 Subject: [PATCH] release 0.6.0 --- README.md | 32 +-- manifest.json | 2 +- package.json | 2 +- theme.css | 636 ++++++++++++++++++++++++++++++++++++-------------- versions.json | 2 +- 5 files changed, 464 insertions(+), 210 deletions(-) diff --git a/README.md b/README.md index 58fd845..58cd94e 100644 --- a/README.md +++ b/README.md @@ -2,41 +2,16 @@ > Outliner focused theme with differentiated header style and subtle interface for atomic notes with insight-based points - - ![](https://img.shields.io/github/v/release/efemkay/obsidian-listive-theme) ![](https://img.shields.io/github/release-date/efemkay/obsidian-listive-theme) ![](https://img.shields.io/github/license/efemkay/obsidian-listive-theme) - - ![Listive screenshot](Listive.jpg) Customisation I did for this theme (started off as a personal theme) are now optional / revert-able to cater for wider userbase. I follows this Guiding Principles, and you may log a feature request as long as it doesn’t sway away for it. Anyway, you might benefit more using this theme together with [Modular CSS Layout (MCL)](https://github.com/efemkay/obsidian-modular-css-layout) snippets for added functionality on multi columns, cards layout, gallery and image control. +> Note that this theme is meant to complement Outliner plugin. It cannot replace the features which the plugin can provide + ### Table of Contents @@ -167,7 +142,8 @@ These are the plugins I use personally on frequent basis, and with that, I make ## Credits - chrisgrieser (aka pseudometa) for [Theme Design Utilities](https://github.com/chrisgrieser/obsidian-theme-design-utilities) plugin that I use frequently to test mobile UIUX as well helps given in discord -- [Obsidian You theme](https://github.com) for the FAB I adopted (because I find it very useful when using on a phone) +- [Obsidian You theme](https://github.com/selfire1/obsidian-you-theme) for the FAB I adopted (because I find it very useful when using on a phone) +- [Border theme](https://github.com/Akifyss/obsidian-border) for the alternate checkboxes I borrowed here and there (coz i cannot figure out how to customise the SVGs) ## Support Me diff --git a/manifest.json b/manifest.json index 60fedb5..dfee9c7 100644 --- a/manifest.json +++ b/manifest.json @@ -1,6 +1,6 @@ { "name": "Listive", - "version": "0.5.0", + "version": "0.6.0", "minAppVersion": "1.1.9", "author": "efemkay", "authorUrl": "https://efemkay.github.io/" diff --git a/package.json b/package.json index 2155373..0caa281 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "listive", - "version": "0.5.0", + "version": "0.6.0", "scripts": { "version": "node version-bump.mjs && git add manifest.json versions.json" } diff --git a/theme.css b/theme.css index 8b7fd42..6d2a1f1 100644 --- a/theme.css +++ b/theme.css @@ -1,4 +1,10 @@ -/* === Listive Theme - v0.4.1 by Efemkay === *//* updated 16Jun2023 *//* +/* === Listive Theme - v0.6.0 by Efemkay === *//* updated 12Aug2023 *//* + 0.6.0 (updated 12Aug2023) + - adjust heading spacing for 1.3.7 (plan to make it adjustable) + - improved SNW support for headers in list + - blockquote LP improvement + - customisation on Properties + 0.5.0 - “Collapsed” frontmatter in Live Preview. Show on hover/active. - Fixes on rounded note pane (for when tab title disabled) @@ -7,18 +13,6 @@ - Improved FAB - control to (a) adjust position and (b) enable/disable - Various small UI refinement for mobile (tablet and phone) - - 0.4.1 - - add theme identifier using css class `listive-theme` at body level - - refined stacked tab UI. remove legacy mcl grid - - Smaller UI font size and adjustable via Style Settings - - Style Settings option for adjusting (a) line height and (b) list indent spacing - - Stacked Tab minor UI adjustment - - Improved support for Outliner plugin - - “Enable List Embed Vault-Wide” option Style Settings now off by default - - remove customisation that require Contextual Typography plugin - - adjustment to line height - - improve support on :has() */ @import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap'); @@ -443,19 +437,43 @@ /* === Margin, Padding and Line Height === */ /* for list's margin/padding go to (12) Section for Content Core Customisation */ + + /* -- for Normal Heading / Header -- */ + body { + --h2-top-spacing: 1.4rem; + --heading-spacing: var(--h2-top-spacing); /* override obsidian 1.3.7 introduction of top margin */ + --h2-bottom-spacing: 0.3rem; + --h2-top-spacing-edit: calc(var(--h2-top-spacing) + var(--list-spacing) + var(--list-spacing)/2 ); + --h2-bottom-spacing-edit: var(--h2-bottom-spacing); + + --h4-bottom-spacing: 0.1rem; + } /* -- margin/padding for normal header (not for header in list) - Editing View only */ - .cm-s-obsidian :is(.HyperMD-header-2, .HyperMD-header-3).cm-line { padding-block: 0.6em 0.3em;} + .cm-s-obsidian :is(.HyperMD-header-1, .HyperMD-header-2, .HyperMD-header-3).cm-line { padding-block: 0.6em var(--h2-bottom-spacing);} /* -- margin/padding for normal header (not for header in list) - Reading View only */ - :is(*, .markdown-rendered) :not(li) :is(h1, h2, h3) { margin-block: 1.4rem 0.3rem;} - :is(*, .markdown-rendered) :not(li) :is(h4, h5, h6) { margin-bottom: 0.1rem; } - - /* -- margin/padding for headers in list */ - .mod-cm6 .HyperMD-list-line:has(> :is(.cm-header-1, .cm-header-2)).cm-line { padding-top: 0.4rem; padding-bottom: 0.3rem; } - :is(*, .markdown-rendered) :is(ul h1, ul h2) { margin-top: 0.4rem; margin-bottom: 0.3rem; } - .mod-cm6 .HyperMD-list-line:has(> .cm-header-3).cm-line { padding-top: 0.2rem; padding-bottom: 0.2rem; } - :is(*, .markdown-rendered) ul h3 { margin-top: 0.2rem; margin-bottom: 0.2rem; } + :is(*, .markdown-rendered) :not(li) :is(h1, h2, h3) { margin-block: var(--h2-top-spacing) var(--h2-bottom-spacing);} + :is(*, .markdown-rendered) :not(li) :is(h4, h5, h6) { margin-bottom: var(--h4-bottom-spacing); } + + + /* -- For List Heading / Headers -- */ + body .HyperMD-list-line, + body ul { + --h2-top-spacing: 0.4rem; + --h2-bottom-spacing: 0.3rem; + --h2-top-spacing-edit: calc(var(--h2-top-spacing) + var(--list-spacing) + var(--list-spacing)/2 ); + --h2-bottom-spacing-edit: var(--h2-bottom-spacing); + + --h3-top-spacing: 0.2rem; + --h3-bottom-spacing: 0.2rem; + --h3-top-spacing-edit: calc( var(--h3-top-spacing) + var(--list-spacing) ); + --h3-bottom-spacing-edit: var(--h3-bottom-spacing); + } + .mod-cm6 .HyperMD-list-line:has(> :is(.cm-header-1, .cm-header-2)).cm-line { padding-top: var(--h2-top-spacing-edit); padding-bottom: var(--h2-bottom-spacing-edit); } + :is(*, .markdown-rendered) :is(ul h1, ul h2) { margin-top: var(--h2-top-spacing); margin-bottom: var(--h2-bottom-spacing); } + .mod-cm6 .HyperMD-list-line:has(> .cm-header-3).cm-line { padding-top: var(--h3-top-spacing-edit); padding-bottom: var(--h3-bottom-spacing-edit); } + :is(*, .markdown-rendered) ul h3 { margin-top: var(--h3-top-spacing); margin-bottom: var(--h3-bottom-spacing); } - /* -- padding between header text and bottom border. Editing View and Reading View. Normal header and header in list */ + /* -- For Normal Heading padding between header text and bottom border. Editing View and Reading View. Normal header and header in list */ .markdown-rendered h1, .markdown-rendered h2 { padding-bottom: 0.1rem; } /* for distancing the border bottom */ .cm-s-obsidian .HyperMD-header-1::after, .cm-s-obsidian .HyperMD-header-2::after, @@ -467,7 +485,9 @@ .markdown-rendered li h6 {margin-top: 0; margin-bottom: 0;} /* -- margin (reduce) when header is collapsed -- */ - .markdown-preview-section > div.is-collapsed + div:has(> [data-heading]) :is(h1,h2,h3) { margin-top: 0.4em;} + /* .markdown-preview-section > div.is-collapsed + div:has(> [data-heading]) :is(h1,h2,h3) { margin-top: 0.4em;} */ + .markdown-preview-section > div.is-collapsed:has(h2) + div:has(h2) { margin-top: 0.4em;} + .markdown-preview-section > div.is-collapsed:has(h3) + div:has(h3) { margin-top: 0.4em;} .markdown-preview-section > div.is-collapsed :is(h2) { margin-bottom: 0.8rem;} :is(li.is-collapsed + li.is-collapsed, li.is-collapsed + li) h3 { margin-top: 0; } @@ -475,19 +495,29 @@ .HyperMD-header.HyperMD-header-3 + .HyperMD-header.HyperMD-header-3 {padding-top: 0.3em;} - /* -- margin for ul after headers */ - div:has([data-heading]) + div > ul {margin-top: 0;} - [data-heading] + div[class*="block-language-dataview"] ul {margin-top: 0;} + /* -- margin for ul after headers. (1) Normal reading view, (2) Dataview lists, and (3) Inside callout */ + div:has([data-heading]) + div > ul, + [data-heading] + div[class*="block-language-dataview"] ul, + .callout-content [data-heading] + ul + { margin-top: 0; } - /* -- margin for (1) bottom of p, (2) p after ul/ol, and (3) p after headers */ + /* -- margin (Reading View only) for (1) bottom of p, (2) p or codeblock/pre after ul/ol or headers */ body { --lst-p-ul-margin: 0.4em; } - p { margin-block-end: var(--lst-p-ul-margin); } - div:has(p) + div:has(ul) > ul { margin-block-start: var(--lst-p-ul-margin); } + .markdown-rendered p { margin-block-end: var(--lst-p-ul-margin); } + .markdown-rendered blockquote > p + ul, + .markdown-rendered div:has(p) + div:has(ul) > ul + { margin-block-start: var(--lst-p-ul-margin); } /* li p { margin-block: 0; } */ - :is(h3, h4) + p, div:has(> h3, > h4) + div:has(p) > p { margin-block-start: 0.6em; } + :is(h1, h2) + p, + div:has(> h1, > h2) + div:has(p) > p + { margin-block-start: 0.8em; } + + .markdown-rendered :is(h3, h4, h5, h6) + p, + .markdown-rendered div:has(> h3, > h4, > h5, > h6) + div:has(p,pre) > :is(p,pre) + { margin-block-start: 0.6em; } @@ -518,7 +548,16 @@ /* === Markdown bold / strong === */ - :is(.cm-s-obsidian .cm-strong, b, strong) { color: var(--h1-color); } + /* :is(.cm-s-obsidian .cm-strong, b, strong) { color: var(--h1-color); } */ + body { + --bold-weight: var(--font-bold); + --bold-color: var(--h1-color); + } + .cm-strong.cm-header { + font-weight: var(--bold-weight); + color: var(--bold-color); + } + /* === Markdown Highlights === */ @@ -535,7 +574,6 @@ /* === Tags / Hashtags === */ - body { --tag-size: 12px; /* 11px for 14px normal font, else 12px for 15px */ --tag-color: #111; @@ -548,7 +586,7 @@ body:is(*,.is-mobile):is(.theme-light,.theme-dark) { /* for tag colors */ --tag-background: hsla(var(--tag-bg-accent-hsl), 0.7); - --tag-background-hover: hsla(var(--tag-bg-accent-hsl), 0.45); */ + --tag-background-hover: hsla(var(--tag-bg-accent-hsl), 0.45); } .HyperMD-list-line .cm-hashtag { font-size: var(--tag-size); } /* to override 1.1.x header setting trumps .cm-hastag */ @@ -563,8 +601,6 @@ } - - /* === INTERNAL LINK === */ .markdown-preview-view .internal-link { text-decoration: none; } @@ -574,7 +610,6 @@ - /* ============================================================================= (12) Section for Content Core Customisation - line spacing, default margins/paddings (not for headers/typography) @@ -583,7 +618,6 @@ /* === General Line Spacing, Margin & Padding === */ - /* -- line height and list spacing. using obsidian variables */ body { --line-height-normal: 1.35; @@ -603,8 +637,12 @@ .cm-s-obsidian .cm-formatting-link { font-weight: 300; } /* Active Line */ - .cm-active:not(.HyperMD-list-line) { background-color: var(--background-active-line); } - .cm-active.HyperMD-list-line { background-color: var(--background-active-line); } + /* (1) normal active line that's not list, not header. (2) active list that's not list header. (3) header and list header */ + .cm-active:not(.HyperMD-quote)::before { content: ''; position: absolute; width: 100%; height: 100%; z-index: -30; top: 0; left: 0; background-color: var(--background-active-line); } + /* .cm-active.HyperMD-list-line::before { content:''; position: absolute; width: 100%; height: 100%; z-index: -30; top: 0; left: 0; background-color: var(--background-active-line); } */ + /* .cm-active.HyperMD-list-line:not(:has(.cm-header))::after { content:''; position: absolute; width: 100%; height: 100%; z-index: -30; top: 0; left: 0; background-color: var(--background-active-line); } */ + /* .cm-active:is(.HyperMD-header) { background-color: var(--background-active-line); } */ + /* .cm-active:is(.HyperMD-header,.HyperMD-list-line:has(.cm-header)) { background-color: var(--background-active-line); } */ /* === Backlinks & Results area === */ @@ -670,7 +708,7 @@ /* --- Clean Embed in Lists -- General effect to hide the link --- */ .HyperMD-list-line .internal-embed.is-loaded, - .internal-embed:not(.image-embed) + :is(.HyperMD-list-line,li) .internal-embed:not(.image-embed) {display: inline-grid;} /* --- Clean Embed in Lists (on by default) --- */ @@ -713,17 +751,14 @@ /* === Custom CSS Class to control page width using `cssClass: wide-page` */ .wide-page:is(.markdown-source-view, .markdown-preview-view) { --file-line-width: 1400px; } + /* i add this for some list or sth, cannot remember. i comment out first + p { margin-block-end: 0.5em; } + */ - /* i add this for some list or sth, cannot remember. i comment out first - p { margin-block-end: 0.5em; } - */ - - - /* make it accommodate two lines */ - .status-bar { padding-top: 0.1em; padding-bottom: 0.1em; line-height: 1em; max-height: unset; } - - + /* === Status bar === */ + /* make it accommodate two lines */ + .status-bar { padding-top: 0.1em; padding-bottom: 0.1em; line-height: 1em; max-height: unset; } /* === General Declaration / Definition === */ @@ -776,18 +811,20 @@ .markdown-rendered:is(*,.show-indentation-guide) :is(h2[data-heading^="Journal"], h3[data-heading^="on "]) + ul ul ul ul::before { left: calc( var(--ig-left-4) + var(--list-guide-adj) - 4px); } /* .show-indentation-guide :is(h2[data-heading^="Journal"], h3[data-heading^="on "]) + ul ul::before { left: calc(-13px + var(--list-guide-adj) - 3px); } */ + /* === List Indent adjustment === */ - body { - --list-indent-first: 1.6em; - } - .markdown-preview-view > div ul:not(ul ul) { - padding-inline-start: var(--list-indent-first); - } + body { + --list-indent-first: 1.6em; + } + .markdown-preview-view > div ul:not(ul ul) { + padding-inline-start: var(--list-indent-first); + } /* ============================================================================= (13) Section for Markdown (Basic + Extended) Components Customisation - - blockquote, callout, codeblock, graph view, mermaid, table + - alternate checkbox, blockquote, callout, codeblock, frontmatter, + graph view, mermaid, properties, and table ============================================================================= */ @@ -799,43 +836,37 @@ --blockquote-font-style: italic; --blockquote-style: var(--blockquote-font-style); /* fix obsidian not apply their variable in editing view */ } - /* add padding to the right */ - .markdown-source-view.mod-cm6 .HyperMD-quote, .markdown-preview-view blockquote {padding-right: 0.5em;} - /* add border radius and adjust padding but only for reading view */ - .markdown-preview-view blockquote { border-radius: 2px 0 0 2px; } - .markdown-preview-view blockquote { padding-left: var(--size-4-4); padding-block: var(--size-4-2); } - /* blockquote in list - margin. Reading only */ - .markdown-rendered ul li blockquote { margin: 0; padding-left: var(--size-4-3); } - - /* make code block in list padding more natural. too experimental, need to wait for :has support *//* - .HyperMD-codeblock-begin.HyperMD-list-line.HyperMD-list-line-nobullet span.ig-tab::after {content: ""; margin-left: 5px;} - .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-codeblock + .HyperMD-codeblock .ig-tab::after, - .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-codeblock + .HyperMD-codeblock + .HyperMD-codeblock .ig-tab::after, - .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-codeblock + .HyperMD-codeblock + .HyperMD-codeblock + .HyperMD-codeblock .ig-tab::after, - .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-codeblock + .HyperMD-codeblock + .HyperMD-codeblock + .HyperMD-codeblock + .HyperMD-codeblock .ig-tab::after, - .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-codeblock + .HyperMD-codeblock + .HyperMD-codeblock + .HyperMD-codeblock + .HyperMD-codeblock + .HyperMD-codeblock .ig-tab::after - { content: ""; margin-left: -4px;} - - .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-codeblock, - .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-codeblock + .HyperMD-codeblock, - .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-codeblock + .HyperMD-codeblock + .HyperMD-codeblock, - .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-codeblock + .HyperMD-codeblock + .HyperMD-codeblock + .HyperMD-codeblock, - .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-codeblock + .HyperMD-codeblock + .HyperMD-codeblock + .HyperMD-codeblock + .HyperMD-codeblock, - .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-codeblock + .HyperMD-codeblock + .HyperMD-codeblock + .HyperMD-codeblock + .HyperMD-codeblock + .HyperMD-codeblock - { padding-left: var(--size-4-1);} + /* -- padding and left side bar */ + /* main code */ + :is(.markdown-source-view, .markdown-preview-view) blockquote { padding-left: var(--size-4-4); padding-block: var(--size-4-2); border-radius: 4px 0 0 4px; } + /* main code, special for padding right only */ + .markdown-source-view.mod-cm6 .HyperMD-quote, .markdown-preview-view blockquote {padding-right: 0.5em;} + /* LP only adjustment to match Reading View */ + .cm-line:not(.HyperMD-quote) + .HyperMD-quote { padding-top: var(--size-4-2); } + .cm-line:not(.HyperMD-quote) + .HyperMD-quote::before { border-top-left-radius: 4px; } + .HyperMD-quote:has(+ .cm-line:not(.HyperMD-quote)), + .HyperMD-quote.cm-line:last-child + { padding-bottom: var(--size-4-2); } + .HyperMD-quote:has(+ .cm-line:not(.HyperMD-quote))::before, + .HyperMD-quote.cm-line:last-child::before + { border-bottom-left-radius: 4px; } + + /* -- padding and margin for blockquote in list. Reading only */ + .markdown-rendered ul li blockquote { margin: 0; padding-left: var(--size-4-3); } /* === CALLOUT BLOCKS === */ /* General adjustments (on paddings and margins) - added callout padding on the right (12px to 16px) - define callout content padding, initially 0 */ - body { - --callout-content-padding: 10px 0 5px 0; /* i remove first, */ - --callout-padding: var(--size-4-4) var(--size-4-4) var(--size-4-3) var(--size-4-5); /* give additional padding on the right side */ + body .callout { + --callout-content-padding: var(--size-4-2) 0 var(--size-4-1) 0; /* i remove first, */ + --callout-padding: var(--size-4-4) var(--size-4-4) var(--size-4-3) var(--size-4-4); /* give additional padding on the right side */ } .callout .callout-content > *:first-child {margin-top: 0;} .callout ul:last-of-type {margin-bottom: 0;} + .cm-s-obsidian .cm-hmd-callout.cm-formatting { color: var(--text-muted); } /* Change icons for default "Note" callout and others */ .callout { --callout-icon: lucide-edit-3; } @@ -856,6 +887,9 @@ .callout[data-callout-metadata*="no-title"] > .callout-title > .callout-title-inner { display: none; } .callout[data-callout-metadata*="no-title"] > .callout-content { padding-block: 0; padding-right: 2em;} + /* -- Callout Title Aesthetics */ + .callout-title-inner { font-weight: var(--font-semibold); } + /* no margin for callout in a list */ li > .callout { margin: 0; } @@ -885,6 +919,9 @@ } /* Common (only for Info / Higlights) - Include lock the state for mouse click */ input[data-task="I"]:checked, li[data-task="I"] > input:checked, li[data-task="I"] > p > input:checked, + input[data-task="i"]:checked, li[data-task="i"] > input:checked, li[data-task="i"] > p > input:checked, + input[data-task="\""]:checked, li[data-task="\""] > input:checked, li[data-task="\""] > p > input:checked, + input[data-task="“"]:checked, li[data-task="“"] > input:checked, li[data-task="“"] > p > input:checked, input[data-task="!"]:checked, li[data-task="!"] > input:checked, li[data-task="!"] > p > input:checked, input[data-task="*"]:checked, li[data-task="*"] > input:checked, li[data-task="*"] > p > input:checked { --checkbox-marker-color: transparent; @@ -894,6 +931,9 @@ } label.task-list-label:has(> input[data-task="I"]:checked), label.task-list-label:has(> input[data-task="!"]:checked), + label.task-list-label:has(> input[data-task="\""]:checked), + label.task-list-label:has(> input[data-task="“"]:checked), + label.task-list-label:has(> input[data-task="!"]:checked), label.task-list-label:has(> input[data-task="*"]:checked) { pointer-events: none; } @@ -927,6 +967,7 @@ /* For [<] "<" i.e. Schedule or Meeting */ input[data-task="<"]:checked, li[data-task="<"]>input:checked, li[data-task="<"]>p>input:checked { color: var(--text-faint); + border: none; -webkit-mask-image: url('data:image/svg+xml;utf8,'); } @@ -938,11 +979,51 @@ color: var(--color-yellow); -webkit-mask-image: url('data:image/svg+xml;utf8,'); } + + /* For [i] "i" i.e. info */ + input[data-task="i"]:checked, li[data-task="i"]>input:checked, li[data-task="i"]>p>input:checked { + --checkbox-color-hover: var(--color-cyan); + color: var(--color-cyan); + -webkit-mask-image: url('data:image/svg+xml;utf8,'); + } + + /* For [!] "!" i.e. warning */ input[data-task="!"]:checked, li[data-task="!"]>input:checked, li[data-task="!"]>p>input:checked { --checkbox-color-hover: var(--color-red); color: var(--color-orange); -webkit-mask-image: url('data:image/svg+xml;utf8,'); } + + /* For ["] or "“" i.e. citation, my version */ + input[type=checkbox][data-task="\""]:is(*,:hover,:active), + input[type=checkbox][data-task="“"]:is(*,:hover,:active), + li[data-task="\""] > input:checked, + li[data-task="\""] > p > input:checked, + li[data-task="“"] > input:checked, + li[data-task="“"] > p > input:checked + { background-color: transparent; } + input[type=checkbox][data-task="“"]:checked::after, + li[data-task="“"] > input:checked::after, + li[data-task="“"] > p > input:checked::after { + content: "❝"; + font-size: 1.6em; + text-align: center; + top: -3px; + left: 0; + color: rgba(var(--callout-quote), 1); + background-color: transparent; + -webkit-mask-image: revert; + } + li[data-task="“"] > input:checked::after, + li[data-task="“"] > p > input:checked::after + { top: -5px; } + /* cite *//* + input[data-task="“"]:checked, li[data-task="“"]>input:checked, li[data-task="“"]>p>input:checked { + --checkbox-color-hover: var(--color-purple); + color: var(--color-purple); + -webkit-mask-image: url('data:image/svg+xml;utf8,'); + } + /* For [*] "*" i.e. Star or Favourites */ input[data-task="*"]:checked, li[data-task="*"]>input:checked, li[data-task="*"]>p>input:checked { --checkbox-color-hover: var(--color-yellow); @@ -950,6 +1031,97 @@ -webkit-mask-image: url('data:image/svg+xml;utf8,'); } + /* -- background option. for info/highlight alternate checkbox */ + + /* setting the color for each label */ + .HyperMD-list-line:has(> .task-list-label > [data-task="I"])::after, + li[data-task="I"]::after + { background: rgba(var(--color-yellow-rgb), 0.18); } + .HyperMD-list-line:has(> .task-list-label > [data-task="i"])::after, + li[data-task="i"]::after + { background: rgba(var(--color-purple-rgb), 0.18); } + .HyperMD-list-line:has(> .task-list-label > [data-task="\""])::after, + .HyperMD-list-line:has(> .task-list-label > [data-task="“"])::after, + li[data-task="\""]::after, + li[data-task="“"]::after + { background: rgba(var(--callout-quote), 0.18); } + .HyperMD-list-line:has(> .task-list-label > [data-task="!"])::after, + li[data-task="!"]::after + { background: rgba(var(--color-red-rgb), 0.18); } + .HyperMD-list-line:has(> .task-list-label > [data-task="*"])::after, + li[data-task="*"]::after + { background: rgba(var(--color-orange-rgb), 0.18); } + + /* adjust the background position, common to all types */ + body { + --alt-checkbox-bg-content: ''; + } + .HyperMD-list-line:has(> .task-list-label > [data-task="I"])::after, + .HyperMD-list-line:has(> .task-list-label > [data-task="i"])::after, + .HyperMD-list-line:has(> .task-list-label > [data-task="\""])::after, + .HyperMD-list-line:has(> .task-list-label > [data-task="“"])::after, + .HyperMD-list-line:has(> .task-list-label > [data-task="!"])::after, + .HyperMD-list-line:has(> .task-list-label > [data-task="*"])::after { + content: var(--alt-checkbox-bg-content); position: absolute; + inset: 0 0em 0 1.6em; + height: 100%; width: calc(100% - 1.6em); + z-index: -1; + border-radius: var(--size-4-1) + } + + /* move the background in line with list level */ + .HyperMD-list-line-2:has(> .task-list-label > [data-task="I"])::after, + .HyperMD-list-line-2:has(> .task-list-label > [data-task="i"])::after, + .HyperMD-list-line-2:has(> .task-list-label > [data-task="\""])::after, + .HyperMD-list-line-2:has(> .task-list-label > [data-task="“"])::after, + .HyperMD-list-line-2:has(> .task-list-label > [data-task="!"])::after, + .HyperMD-list-line-2:has(> .task-list-label > [data-task="*"])::after { + left: 3em; + width: calc(100% - 3em); + } + .HyperMD-list-line-3:has(> .task-list-label > [data-task="I"])::after, + .HyperMD-list-line-3:has(> .task-list-label > [data-task="i"])::after, + .HyperMD-list-line-3:has(> .task-list-label > [data-task="\""])::after, + .HyperMD-list-line-3:has(> .task-list-label > [data-task="“"])::after, + .HyperMD-list-line-3:has(> .task-list-label > [data-task="!"])::after, + .HyperMD-list-line-3:has(> .task-list-label > [data-task="*"])::after { + left: 4.6em; + width: calc(100% - 4.6em); + } + .HyperMD-list-line-4:has(> .task-list-label > [data-task="I"])::after, + .HyperMD-list-line-4:has(> .task-list-label > [data-task="i"])::after, + .HyperMD-list-line-4:has(> .task-list-label > [data-task="\""])::after, + .HyperMD-list-line-4:has(> .task-list-label > [data-task="“"])::after, + .HyperMD-list-line-4:has(> .task-list-label > [data-task="!"])::after, + .HyperMD-list-line-4:has(> .task-list-label > [data-task="*"])::after { + left: 6.2em; + width: calc(100% - 6.2em); + } + + /* general setup for background in reading view */ + li[data-task="I"], + li[data-task="i"], + li[data-task="\""], + li[data-task="“"], + li[data-task="!"], + li[data-task="*"] { + position: relative; + z-index: 30; + } + li[data-task="I"]::after, + li[data-task="i"]::after, + li[data-task="\""]::after, + li[data-task="“"]::after, + li[data-task="!"]::after, + li[data-task="*"]::after { + content: ''; position: absolute; + top:0; left: -0.25em; + height: 100%; width: calc(100% + 0.25em); + z-index: -1; + border-radius: var(--size-4-1) + } + + /* === Codeblock / Code block === */ /* put border but not for yaml */ @@ -971,11 +1143,18 @@ /* .markdown-preview-view pre { margin: 0.1em 0 1em; } */ .markdown-preview-view li pre { margin: 0.1em 0 0.1em; } + /* -- Improved UI in LP for Code Block in List + /* padding more natural. experimental, using :has(). in personal staging */ + + + /* === Code Comment === */ .HyperMD-list-line .cm-comment {color: var(--code-comment); font-weight: normal; font-family: var(--font-text); font-size: var(--font-text-size);} .HyperMD-header .cm-comment {color: var(--code-comment); font-weight: normal; font-family: var(--font-text); font-size: var(--font-text-size) !important;} + /* === Frontmatter/YAML Metadata === */ + /* for Obsidian up to 1.3.7 only. V1.4.0 already introduce Properties */ :is(.lst-fm-compact, .lst-fm-std) .frontmatter-container .frontmatter-container-header:hover {color: var(--text-muted);} body:is(.lst-fm-compact,*) .frontmatter-container { position: relative; display: flex; flex-wrap: wrap; font-size: 0.8rem; background-color: var(--code-background); border-radius: var(--size-4-1); padding: var(--size-4-1) var(--size-4-2);} @@ -992,7 +1171,6 @@ body.lst-fm-std .frontmatter-container .frontmatter-section-label {font-family: var(--font-monospace); font-size: 0.8rem; flex: 0 1 4em; color: var(--text-faint);} body.lst-fm-std .frontmatter-container.is-collapsed .frontmatter-container-header { border-bottom-width: 0px;} - /* Hide YAML/Frontmatter in LP*/ body.lst-fm-lp-hide .markdown-source-view.is-live-preview .cm-line:has(.cm-hmd-frontmatter:not(.cm-def)):not(.cm-active), body.lst-fm-lp-hide .markdown-source-view.is-live-preview .cm-line:has(.cm-def) ~ .cm-line:has(.cm-def) @@ -1009,7 +1187,6 @@ { content: ""; } - /* === Graph View Mods ===*/ /* to style the new nodes in the 0.9.1+ */ .theme-light .graph-view.color-arrow { color: #5cc863; } @@ -1053,7 +1230,6 @@ .list-d-c-s .markdown-rendered ul ul ul ul ul ul .list-bullet::after, .list-d-c-s .markdown-rendered ul ul ul ul ul ul ul ul ul .list-bullet::after { width: var(--list-bullet-size); height: var(--list-bullet-size); outline: none; background-color: var(--list-marker-color); border-radius: 0%; } - .list-d-c-s .markdown-rendered ul.has-list-bullet, .list-d-c-s .markdown-rendered ul ul ul ul.has-list-bullet, .list-d-c-s .markdown-rendered ul ul ul ul ul ul ul.has-list-bullet { list-style-type: disc;} @@ -1109,6 +1285,67 @@ /* = Table Margin with code block immediately after */ div:has(table) + div > p:has(>code) {margin-top: -0.8em;} + /* === Properties === */ + body { + --metadata-border-radius: var(--size-4-2); + --metadata-background: var(--background-secondary-alt); + --metadata-padding: var(--size-4-2); + --metadata-label-width: 8em; + } + body:is(.lst-prop-super-compact, .lst-prop-compact) .mod-root { + --metadata-gap: 0px; + } + body .metadata-container:has(.is-collapsed) { + --metadata-padding: 0; + } + body :is(.mod-left-split, .mod-right-split) { + --metadata-background: none; + } + /* attempt for compact v2 */ + .metadata-property { + --input-height: 1.5rem; + } + + .markdown-source-view .metadata-container { + margin-block-end: 0.5rem; + } + /* -- Reposition Properties Title and Add Property button and customise them */ + .metadata-container .metadata-properties-heading { + position: absolute; z-index: 30; + top: -0.5em; right: 0.5em; + font-size: var(--metadata-label-font-size); + background: var(--metadata-background); + border-radius: var(--size-4-3); + } + /* change properties title font color */ + .metadata-properties-title { color: var(--text-muted); margin-bottom: 0; padding-inline: var(--size-4-2); } + .metadata-properties-heading:hover .metadata-properties-title { color: var(--text-normal); } + body:is(.lst-prop-super-compact, .lst-prop-compact) .mod-root .metadata-container .metadata-add-button { + position: absolute; + margin-top: 0; + top: -0.6em; right: 8em; + padding: 1px 8px 1px 4px; + height: unset; + background: var(--metadata-background); + border-radius: var(--size-4-3); + } + .metadata-container .metadata-properties-heading:hover, + body:is(.lst-prop-super-compact, .lst-prop-compact) .mod-root .metadata-container .metadata-add-button:hover { + background: var(--background-modifier-hover); + } + /* make the properties compact */ + body.lst-prop-super-compact .metadata-properties { flex-direction: row; flex-wrap: wrap; } + .metadata-property { flex-grow: 1; flex-shrink: 1; min-width: calc(50% - var(--metadata-gap)); } + + /* somewhat prevent edit/remove when in reading view */ + body.lst-prop-rv-noedit .markdown-reading-view .metadata-container .metadata-add-button { display: none; } + body.lst-prop-rv-noedit .markdown-reading-view .metadata-property input { pointer-events: none; } + body.lst-prop-rv-noedit .markdown-reading-view .multi-select-pill .multi-select-pill-remove-button { visibility: collapse; } + + /* remove the remove button special for tags property */ + body.lst-prop-rv-noedit .markdown-reading-view .metadata-property[data-property-key="tags"] .multi-select-pill-remove-button { display: none; } + body.lst-prop-rv-noedit .markdown-reading-view .metadata-property[data-property-key="tags"] .multi-select-pill-content { margin-right: var(--pill-padding-x); } + /* ============================================================================= @@ -1116,14 +1353,35 @@ - datavew dv-card / dv-list-nav ============================================================================= */ + /* === Background for Common Sections === */ + + /* -- for Journal (H2 in a list) */ + h2[data-heading^="Journal"] + ul > li, + h3[data-heading^="on "] + ul > li { + width: 100%; + border-radius: 0.3rem; + margin-block: 0.2rem; + background-color: var(--background-accent); + padding: 0.1rem 0.2rem; + } + + /* -- for metadata at the top (H4 in a list) */ + h4[data-heading^="Metadata"] + ul + { background-color: var(--background-accent); border-radius: 0.3rem; } + + /* -- for metadata at the bottom (normal H4 followed by ul) */ + div:has(> [data-heading^="Metadata"]) + div ul { + background-color: var(--background-accent); border-radius: 0.4rem; + } + /* === Core Plugin: Search sidebar nav icon margin/padding === */ /* using .mod-left-split to target only for the side bar */ .mod-left-split .nav-action-button { margin-inline: 1px; } .mod-left-split .nav-header { padding-inline: 10px; } - /* === Clear Float === */ + /* === Clear Float === */ div:has(> p > [href*="#lst/clear-float"]), div:has(> [data-heading] > [href*="#lst/clear-float"]), .cm-line:has(.cm-tag-lstclear-float) { clear: both; } @@ -1142,7 +1400,7 @@ /* -- hide the headings */ .markdown-embed-heading div[data-tag-name*="h"] {display: none;} - /* -- testing Timeline in lists */ + /* -- testing Timeline in lists *//* to be deleted post 31 Dec 2023 .tag-mcltimeline > ul > li {padding-bottom: 0.5em; } .tag-mcltimeline > ul > li > *:not(ul) { text-align: center; align-self: baseline; } .tag-mcltimeline > ul > li { @@ -1160,16 +1418,18 @@ } .tag-mcltimeline > ul > li > ul { grid-area: details; text-align: left; padding-right: 1em; } - /* squeezed the bullet/indicator in the indicator area with 0 width */ + /* squeezed the bullet/indicator in the indicator area with 0 width *//* .tag-mcltimeline > ul > li > .list-bullet { grid-area: indicator; } .tag-mcltimeline > ul > li > .collapse-indicator { grid-area: indicator; } /* === image modifier === */ - .workspace-leaf-content :is(.HyperMD-list-line,ul) img:not([width]) { max-width: 300px; } + .workspace-leaf-content :is(.HyperMD-list-line,li) img:not([width]) { max-width: 300px; } + .workspace-leaf-content :is(.HyperMD-list-line,li):has(img[src]~img[src]) img:not([width]) { max-width: 270px; } /* to ensure image with transparency have some background color, specify "bgcolor" in alt text */ img[alt*="bgcolor"] { background-color: var(--h2-color); } + /* === special formatting for path/steps ===*/ span.path, span.option, span.selection { background-color: DarkSlateGray; border-radius: 0.2em; padding-inline: 0.2em; font-weight: 600; font-family: var(--font-monospace); } @@ -1181,6 +1441,7 @@ } /* === Mod for float image in lists === */ + /* to be deleted post 31 Sep 2023 .tag-mcllist-float-img ul img {float: right; margin-left: 0.5em;} img[alt*="right"] {float: right; margin-left: 0.5em;} @@ -1208,11 +1469,14 @@ .callout[data-callout-metadata*="dv-list-button"] li a:hover { background-color: var(--background-modifier-hover); } .callout[data-callout-metadata*="dv-list-button"] { --link-decoration: none; --link-decoration-hover: none;} + + /* ============================================================================= (22) Section for Mobile Only Features - FAB ============================================================================= */ + /* === Floating Action Button FAB === */ /* FAB option allow to select which Page Header button to be used for FAB 2nd button */ @@ -1247,8 +1511,8 @@ } /* recolor icon for commander button */ .view-action.cmdr-page-header svg { color: var(--icon-color); } - /* make sure FAB is higher than backlinks control */ - .view-header { z-index: 2; } + /* make sure FAB is higher than (a) backlinks control, and (b) alt checkbox background */ + .view-header { z-index: 60; } /* change background-color when hover */ body.is-mobile:not(.custom-page-header) div.view-actions > .view-action.clickable-icon:hover { background-color: var(--background-accent); } @@ -1267,6 +1531,7 @@ - Spaced Repetition ============================================================================= */ + /* This is for adjusting visuals other than main contents i.e. sidebar items spacing and color theme. not sure, but could be checklist plugin */ header.svelte-128mhjl { font-size: 1em !important; } @@ -1338,7 +1603,6 @@ } - /* === Plugin: Omnisearch === */ .omnisearch-modal .modal-title {padding: 1em 1em 0;} @@ -1366,6 +1630,7 @@ /* === Plugin: Strange New Word (SNW) === */ + /* references .snw-sidepane-container / .snw-popover-container --> .snw-ref-area --> .snw-ref-item-container @@ -1373,12 +1638,16 @@ --> .snw-ref-item-collection-items.search-result-file-matches --> .snw-ref-item-info.search-result-file-match */ - /* General UI */ - :is(.snw-ref-title-side-pane, .snw-ref-title-popover).tree-item-self:is(*, :hover) { border: none; font-weight: bold; font-family: var(--h1-font); } - .snw-ref-title-popover.tree-item-self:is(*, :hover) { padding-block: 2px 5px; margin-bottom: 5px; } - /* give some separator between entries */ - .snw-ref-item-container { background-color: var(--background-secondary-alt); margin-bottom: var(--size-4-1); } - .search-result-file-match { padding-top: var(--size-4-1); border-bottom-style: dashed; } + /* -- General UI */ + /* make sure snw reference on header still formatted using --font-text */ + .snw-reference { font-family: var(--font-text); } + :is(.snw-ref-title-side-pane, .snw-ref-title-popover).tree-item-self:is(*, :hover) { border: none; font-weight: bold; font-family: var(--h1-font); } + .snw-ref-title-popover.tree-item-self:is(*, :hover) { padding-block: 2px 5px; margin-bottom: 5px; } + /* give some separator between entries */ + .snw-ref-item-container { background-color: var(--background-secondary-alt); margin-bottom: var(--size-4-1); } + .search-result-file-match { padding-top: var(--size-4-1); border-bottom-style: dashed; } + /* make the numbers not bold */ + .snw-reference {font-weight: normal;} /* adjustment for SNW plugin -- follow exactly per app.css but remove the `.markdown-rendered` */ @@ -1394,33 +1663,30 @@ { width: calc(100% - 25px); } - /* Hide SNW reference counter inside embedded notes (that maybe recursive in nature) */ - [alt*="list-embed"] .markdown-preview-section > div > ul > li > .snw-reference.snw-block-preview, - .list-embed-global :is(.HyperMD-list-line, ul) .internal-embed.is-loaded .markdown-preview-section > div > ul > li > .snw-reference.snw-block-preview { display: none;} + /* -- hide SNW reference counter inside embedded notes (that maybe recursive in nature) */ + [alt*="list-embed"] .markdown-preview-section > div > ul > li > .snw-reference.snw-block-preview, + .list-embed-global :is(.HyperMD-list-line, ul) .internal-embed.is-loaded .markdown-preview-section > div > ul > li > .snw-reference.snw-block-preview { display: none;} /* tag */ .snw-ref-item-info a.tag:not(.token) {color: var(--tag-color) !important; } .snw-ref-item-info a.tag:not(.token):hover {color: var(--tag-color-hover) !important; } - /* need to figure what's this for ... */ - ul li {position: relative;} - /* li .snw-reference.snw-block-preview { position:absolute; top: 1em; right: 0; } */ + + /* -- for header in list (as it is not part of display block) */ + /* ul li:has([data-heading],.snw-block-preview) {position: relative;} */ + li:has([data-heading]):has(.snw-block-preview) .snw-reference.snw-block-preview { position:absolute; top: 1em; right: 0; } .snw-reference.snw-embed + br {display: none;} - /* make the numbers not bold */ - .snw-reference {font-weight: normal;} /* inclusion of standard typography formatting to support SNW */ .snw-ref-area :is(li h1, li h2, li h3, li h4, li h5) { margin-top: 0; } .snw-ref-area ul li {padding-block: 0.2em 0.1em; } - /* == Propagate standard UI for SNW -- list indent */ - .snw-ref-area :is(ol, ul) { - padding-inline-start: var(--list-indent) - } - /* == Propagate standard UI for SNW -- Indentation guide adjustment */ - .is-css-guide .snw-ref-area :is(ul ul, ol ul, ul ol, ol ol)::before { left: calc(-12px + var(--list-guide-adj)); } + /* == Propagate standard UI for SNW (for SNW popup window renders) */ + /* adjust the indent padding for list and the indentation guide drawing */ + .snw-ref-area :is(ol, ul) { padding-inline-start: var(--list-indent) } + .is-css-guide .snw-ref-area :is(ul ul, ol ul, ul ol, ol ol)::before { left: calc(-12px + var(--list-guide-adj)); } /* make SNW reference embed inline-block */ .snw-ref-item-container .internal-embed.search-result-file-matched-text {display: inline-block;} @@ -1474,29 +1740,6 @@ -/* === Listive Theme - Outliner features - updated 12Nov2022 === *//* - - adjustment on bullets (incl list style) and bullets indent - - indentation guides including adj for plugin related - - - -/* == Code Block Related == */ - - - - - - - - - - -/* === Listive Theme - Auxiliary features - updated 12Nov2022 === *//* - - custom css helper - - floating action button for mobile - - additional plugins adjustment (non outliner plugins) -*/ - /* === DASHBOARD -- General Settings */ @@ -1570,48 +1813,13 @@ border-bottom: 1px solid DarkSlateGray; } -/* === Background for Common Sections === */ - h2[data-heading^="Journal"] + ul > li, - h3[data-heading^="on "] + ul > li { - width: 100%; - border-radius: 0.3rem; - margin-block: 0.2rem; - background-color: var(--background-accent); - padding: 0.1rem 0.2rem; - } - - /* fixed for indentation lines */ - /* no longer required as of v0.16.0 - h2[data-heading^="Journal"] + ul ul::before { left: -1.1rem; } - h2[data-heading^="Journal"] + ul ul ul::before { left: -0.95rem; } - - /* for metadata */ - h4[data-heading^="Metadata"] + ul - { background-color: var(--background-accent); border-radius: 0.3rem; } - div:has(> [data-heading^="Metadata"]) + div ul { - background-color: var(--background-accent); border-radius: 0.4rem; - } +.dv-sublist-cols ul.dataview.list-view-ul > li > ul { + columns: 10rem; + column-gap: 2rem; +} -/* === ARCHIVE === */ - -/* === DASHBOARD - Yearly === */ -/* float 1st level li so that it form 3 columns */ -/* - .dashboard.yearly div > ul > li { - width: 28%; - max-width: 100%; - min-width: 20rem; - float: left; - margin-right: 3rem; - } -*/ - /* needed to give some padding after using float */ /* - .dashboard.yearly div > ul > li:last-child { - margin-bottom: 1rem; - } -*/ @@ -1637,7 +1845,7 @@ settings: - id: general-ui-scheme-title title: General UI and Color Scheme - description: theme variant, ui font size, line-height, note's width etc. + description: Theme variant, ui font size, line-height, note's width etc. type: heading level: 1 collapsed: true @@ -1925,7 +2133,7 @@ settings: - id: listive-outliner-title title: Outliner and List Customisation - description: indentation guide, list embed, list style, etc. + description: Indentation guide, list embed, list style, etc. type: heading level: 1 collapsed: true @@ -2033,11 +2241,31 @@ settings: - id: features-title title: Content Elements look and feel - description: callout style, frontmatter, gutter, tabs style, etc. + description: Callout style, frontmatter, gutter, tabs style, etc. type: heading level: 1 collapsed: true + - + id: alternate-checkboxes-title + title: Alternate Checkboxes + type: heading + level: 2 + collapsed: true + - + id: alt-checkbox-bg-content + title: Background Option + description: Only for non task related checkboxes + type: variable-select + allowEmpty: false + default: "''" + options: + - + label: Enable + value: "''" + - + label: Disable + value: none - id: blockquote-title @@ -2147,6 +2375,56 @@ settings: label: Right value: right + - + id: properties-title + title: Properties + description: Applies to in document only (not applicable to the side pane) + type: heading + level: 2 + collapsed: true + - + id: properties-style + title: Properties Style + type: class-select + allowEmpty: false + default: lst-prop-super-compact + options: + - + label: Super Compact + value: lst-prop-super-compact + - + label: Compact + value: lst-prop-compact + - + label: Standard + value: lst-prop-std + - + id: lst-prop-rv-noedit + title: Prevent Accidental Clicks in Reading View + description: Removes "x" button and disable checkbox state change + type: class-toggle + default: true + - + id: metadata-background + title: Properties Background + type: variable-themed-color + format: hsl + default-light: '#' + default-dark: '#' + - + id: metadata-label-width + title: Properties Label Width (in em) + type: variable-number + default: 8 + format: em + - + id: metadata-divider-width + title: Properties Divider Width (in px) + description: Bottom border for each Property + type: variable-number + default: 0 + format: px + - id: tabs-title title: Tabs diff --git a/versions.json b/versions.json index 3437395..0a11b2e 100644 --- a/versions.json +++ b/versions.json @@ -1,3 +1,3 @@ { - "0.5.0": "1.1.9" + "0.6.0": "1.1.9" }