mirror of
https://github.com/lumargh/better-bujo.git
synced 2026-07-22 07:39:31 +00:00
209 lines
8.1 KiB
CSS
209 lines
8.1 KiB
CSS
/* Better Bujo — bullet-journal markers in place of Obsidian's checkboxes.
|
||
*
|
||
* Canonical glyph table (keyed on the `data-task` attribute Obsidian sets on
|
||
* each list item, in both Reading mode and Live Preview):
|
||
*
|
||
* - [ ] open task → • (a bullet point)
|
||
* - [x] done → x
|
||
* - [>] migrated (month) → >
|
||
* - [<] future log → <
|
||
* - [o] event → ⊙
|
||
* - [O] event done → ⊗
|
||
* - … plain list item → – (en dash, not a bullet)
|
||
* ~ … emotion/thought → styled line (the `~` glyph stays as typed)
|
||
*
|
||
* Every rule is scoped under `.better-bujo` (added to <body> on load) so
|
||
* disabling the plugin restores Obsidian's native rendering. */
|
||
|
||
.better-bujo {
|
||
--bb-marker-color: var(--text-muted);
|
||
--bb-event-color: var(--text-accent);
|
||
--bb-done-color: var(--text-faint);
|
||
/* Horizontal nudge that lines the Live Preview en dash up with the task /
|
||
event marker column. Cancels the `padding-inline-start` Obsidian puts on
|
||
`.cm-formatting-list-ul` (= --list-indent-editing, 0.75em by default).
|
||
Tweak if your theme's list metrics differ. */
|
||
--bb-lp-dash-shift: -1.1em;
|
||
}
|
||
|
||
/* ===========================================================================
|
||
* Task / event markers — replace the checkbox with a glyph.
|
||
* The glyph is emitted via ::before; the native <input> is hidden.
|
||
* ======================================================================== */
|
||
|
||
/* --- Reading mode -------------------------------------------------------- */
|
||
|
||
.better-bujo .markdown-rendered li.task-list-item {
|
||
list-style: none;
|
||
}
|
||
|
||
.better-bujo .markdown-rendered li.task-list-item input.task-list-item-checkbox {
|
||
display: none;
|
||
}
|
||
|
||
.better-bujo .markdown-rendered li.task-list-item::before {
|
||
content: "•"; /* open task — the default for any unrecognised marker */
|
||
display: inline-block;
|
||
width: 1.5em;
|
||
/* margin-left: -0.2em;
|
||
margin-right: 0.3em;
|
||
padding-right: 1em !important; */
|
||
text-align: center;
|
||
color: var(--bb-marker-color);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.better-bujo .markdown-rendered li.task-list-item[data-task="x"]::before,
|
||
.better-bujo .markdown-rendered li.task-list-item[data-task="X"]::before {
|
||
content: "\2A2F"; /* ⨯ */
|
||
color: var(--bb-done-color);
|
||
font-size: 1.3em;
|
||
}
|
||
.better-bujo .markdown-rendered li.task-list-item[data-task=">"]::before {
|
||
content: ">";
|
||
}
|
||
.better-bujo .markdown-rendered li.task-list-item[data-task="<"]::before {
|
||
content: "<";
|
||
}
|
||
.better-bujo .markdown-rendered li.task-list-item[data-task="o"]::before {
|
||
content: "\2299"; /* ⊙ */
|
||
/* color: var(--bb-event-color); */
|
||
}
|
||
.better-bujo .markdown-rendered li.task-list-item[data-task="O"]::before {
|
||
content: "\2297"; /* ⊗ */
|
||
/* color: var(--bb-done-color); */
|
||
}
|
||
.better-bujo .markdown-rendered li.task-list-item[data-task="~"]::before {
|
||
content: "~";
|
||
color: var(--bb-marker-color);
|
||
}
|
||
|
||
/* Plain "- " items reuse the exact same marker box as tasks, so the dash
|
||
shares the one marker column. Hide Obsidian's bullet disc and draw a dash. */
|
||
.better-bujo .markdown-rendered ul > li:not(.task-list-item) {
|
||
list-style: none;
|
||
}
|
||
.better-bujo .markdown-rendered ul > li:not(.task-list-item) > .list-bullet {
|
||
display: none;
|
||
}
|
||
.better-bujo .markdown-rendered ul > li:not(.task-list-item)::before {
|
||
content: "\2013"; /* – */
|
||
display: inline-block;
|
||
width: 1.5em;
|
||
text-align: center;
|
||
color: var(--bb-marker-color);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
/* --- Live Preview / Source mode ------------------------------------------ */
|
||
|
||
.better-bujo .markdown-source-view.mod-cm6 .HyperMD-task-line .task-list-label > input.task-list-item-checkbox {
|
||
display: none;
|
||
}
|
||
|
||
.better-bujo .markdown-source-view.mod-cm6 .HyperMD-task-line .task-list-label::before {
|
||
content: "•"; /* open task — default */
|
||
display: inline-block;
|
||
width: 1.2em;
|
||
text-align: center;
|
||
color: var(--bb-marker-color);
|
||
font-variant-numeric: tabular-nums;
|
||
margin-right: 0.4em;
|
||
}
|
||
|
||
.better-bujo .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="x"] .task-list-label::before,
|
||
.better-bujo .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="X"] .task-list-label::before {
|
||
content: "\2A2F"; /* ⨯ */
|
||
/* color: var(--bb-done-color); */
|
||
font-size: 1.7em;
|
||
margin-top: -1em;
|
||
margin-right: 0em;
|
||
margin-bottom: -1em;
|
||
padding-bottom: -1em;
|
||
margin-left: -0.2em;
|
||
}
|
||
.better-bujo .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=">"] .task-list-label::before {
|
||
content: ">";
|
||
}
|
||
.better-bujo .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="<"] .task-list-label::before {
|
||
content: "<";
|
||
}
|
||
.better-bujo .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="o"] .task-list-label::before {
|
||
content: "\2299"; /* ⊙ */
|
||
font-size: 1.4em !important;
|
||
margin-left: -0.15em;
|
||
margin-right: 0.1em;
|
||
margin-top: -1.1em;
|
||
/* color: var(--bb-event-color); */
|
||
}
|
||
.better-bujo .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="O"] .task-list-label::before {
|
||
content: "\2297"; /* ⊗ */
|
||
/* color: var(--bb-done-color); */
|
||
}
|
||
.better-bujo .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="~"] .task-list-label::before {
|
||
content: "~";
|
||
color: var(--bb-marker-color);
|
||
}
|
||
|
||
/* Non-standard markers (>, <, o, O, ~) are not a checkbox state, so clicking
|
||
them shouldn't toggle anything. The hidden <input> still forwards clicks via
|
||
its <label>, so make those labels non-interactive — a click just places the
|
||
cursor. The standard open/done pair ([ ] ↔ [x]) stays clickable. */
|
||
.better-bujo .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=">"] .task-list-label,
|
||
.better-bujo .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="<"] .task-list-label,
|
||
.better-bujo .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="o"] .task-list-label,
|
||
.better-bujo .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="O"] .task-list-label,
|
||
.better-bujo .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="~"] .task-list-label {
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* ===========================================================================
|
||
* Events (⊙ / ⊗) share one colour, size and font so the open and completed
|
||
* markers match in both modes.
|
||
* ======================================================================== */
|
||
|
||
.better-bujo .markdown-rendered li.task-list-item[data-task="o"]::before,
|
||
.better-bujo .markdown-rendered li.task-list-item[data-task="O"]::before,
|
||
.better-bujo .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="o"] .task-list-label::before,
|
||
.better-bujo .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="O"] .task-list-label::before {
|
||
/* color: var(--bb-event-color); */
|
||
font-family: var(--font-text);
|
||
font-size: 1em;
|
||
line-height: 1;
|
||
}
|
||
|
||
/* ===========================================================================
|
||
* Plain "- " list items → en dash instead of a bullet (Live Preview).
|
||
*
|
||
* Obsidian draws the bullet as a disc on `.list-bullet::after` (content is a
|
||
* zero-width space; the dot is `background-color` + `border-radius`). We
|
||
* neutralise that disc and put an en dash in its place rather than appending,
|
||
* then shift the dash into the marker column. (Reading mode is handled above
|
||
* via the shared marker box.)
|
||
* ======================================================================== */
|
||
|
||
.better-bujo .markdown-source-view.mod-cm6 .HyperMD-list-line:not(.HyperMD-task-line) .list-bullet::after {
|
||
content: "\2013"; /* – */
|
||
/* Relative positioning shifts only the dash glyph into the marker column;
|
||
the line's text stays put (a margin here is absorbed by the parent's
|
||
padding-inline-start, which is why it had no effect). */
|
||
position: relative;
|
||
inset-inline-start: var(--bb-lp-dash-shift);
|
||
margin-right: -0.5em; /* less negative = more space before the text */
|
||
width: auto;
|
||
height: auto;
|
||
border: none;
|
||
border-radius: 0;
|
||
background-color: transparent;
|
||
transform: none;
|
||
color: var(--bb-marker-color);
|
||
}
|
||
|
||
/* ===========================================================================
|
||
* Emotion / thought lines ("~ …"). Tagged with .bb-emotion by the plugin.
|
||
* ======================================================================== */
|
||
|
||
.better-bujo .bb-emotion {
|
||
font-style: italic;
|
||
color: var(--text-muted);
|
||
}
|