mirror of
https://github.com/chrisgrieser/shimmering-focus.git
synced 2026-07-22 03:10:24 +00:00
274 lines
7.5 KiB
CSS
274 lines
7.5 KiB
CSS
/* ───────────────────────────────────────────────────
|
|
/** Longform Sidebar
|
|
─────────────────────────────────────────────────── */
|
|
|
|
.workspace-leaf-content[data-type="VIEW_TYPE_LONGFORM_EXPLORER"] .tab-panel-container {
|
|
padding: 0;
|
|
}
|
|
|
|
/* project picker */
|
|
.workspace-leaf-content .view-content div#project-picker-container {
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="VIEW_TYPE_LONGFORM_EXPLORER"] .current-draft-path {
|
|
display: none;
|
|
}
|
|
|
|
#project-picker {
|
|
background-color: var(--bg1);
|
|
border-top: var(--thin-border);
|
|
border-bottom: var(--thin-border);
|
|
}
|
|
|
|
div#select-projects select {
|
|
border-radius: 0;
|
|
padding: 6px;
|
|
font-size: var(--font-small);
|
|
font-weight: 700;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* sidebar buttons */
|
|
.longform-explorer .tab-button.tab-button {
|
|
&.selected.selected {
|
|
background-color: var(--bg4);
|
|
font-weight: 600;
|
|
border-top: var(--thin-border);
|
|
border-left: var(--thin-border);
|
|
border-right: var(--thin-border);
|
|
}
|
|
/* so tabs do not move around on selection */
|
|
border-right: 1px transparent solid;
|
|
border-left: 1px transparent solid;
|
|
}
|
|
|
|
.longform-explorer .tab-list {
|
|
padding: 0 2px;
|
|
border-bottom: var(--thin-muted-border);
|
|
}
|
|
|
|
/* Scene List */
|
|
.longform-explorer.longform-explorer div#scene-list {
|
|
margin: 0;
|
|
}
|
|
|
|
#scene-list .scene-container {
|
|
width: 100%;
|
|
padding: 3px 4px;
|
|
line-height: 1.2em;
|
|
white-space: normal;
|
|
border: none;
|
|
border-radius: 0;
|
|
--longform-indent-size: 1.75em;
|
|
|
|
& > div > div {
|
|
margin-left: 0;
|
|
}
|
|
|
|
/* biome-ignore-start lint/complexity/noImportantStyles: needed */
|
|
&[data-scene-indent="0"] {
|
|
padding-left: 6px !important;
|
|
}
|
|
|
|
&[data-scene-indent="1"] {
|
|
padding-left: calc(var(--longform-indent-size) * 1) !important;
|
|
}
|
|
|
|
&[data-scene-indent="2"] {
|
|
padding-left: calc(var(--longform-indent-size) * 2) !important;
|
|
}
|
|
|
|
&[data-scene-indent="3"] {
|
|
padding-left: calc(var(--longform-indent-size) * 3) !important;
|
|
}
|
|
|
|
&[data-scene-indent="4"] {
|
|
padding-left: calc(var(--longform-indent-size) * 4) !important;
|
|
}
|
|
/* biome-ignore-end lint/complexity/noImportantStyles: needed */
|
|
|
|
&.selected,
|
|
&.selected .longform-scene-number {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
&.selected {
|
|
background-color: var(--nav-item-background-active);
|
|
}
|
|
|
|
&:hover {
|
|
color: var(--hover-accent);
|
|
background-color: var(--nav-item-background-hover);
|
|
}
|
|
|
|
&:hover .longform-scene-number.longform-scene-number {
|
|
color: var(--hover-accent);
|
|
}
|
|
|
|
/* move folding arrows to the right */
|
|
flex-direction: row-reverse;
|
|
|
|
& > div {
|
|
margin-left: 0;
|
|
}
|
|
|
|
/* grayed out scenes. `{-}` in pandoc indicates a section not be included in the ToC */
|
|
[data-scene-path$=" {-}.md" i]:not(.selected, :hover) :is(div, .longform-scene-number) {
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
/* alternating row colors, factoring in the coloring */
|
|
li:nth-child(even) & {
|
|
background-color: var(--a-row);
|
|
}
|
|
}
|
|
|
|
/* Longform Compile */
|
|
button.longform-remove-step-button.longform-remove-step-button.longform-remove-step-button,
|
|
.longform-compile-container .options-button.options-button.options-button {
|
|
padding: 6px;
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
button.longform-remove-step-button.longform-remove-step-button.longform-remove-step-button {
|
|
height: unset;
|
|
padding: 2px;
|
|
}
|
|
|
|
/* new scene */
|
|
.longform-explorer .new-scene-container.new-scene-container {
|
|
background-color: var(--bg3);
|
|
border-top: var(--thin-muted-border);
|
|
border-bottom: var(--thin-muted-border);
|
|
padding: 4px 6px;
|
|
}
|
|
|
|
.longform-explorer.longform-explorer div#longform-unknown-files-wizard {
|
|
border-top: var(--thin-muted-border);
|
|
padding: 4px;
|
|
}
|
|
|
|
/* ───────────────────────────────────────────────────
|
|
/** Longform Editor
|
|
/** Writing cssclass
|
|
─────────────────────────────────────────────────── */
|
|
/* DOCS https://github.com/kevboh/longform#scene-only-styling */
|
|
|
|
/* font family and size */
|
|
.writing.markdown-preview-view,
|
|
:is(.writing, .longform-leaf) :is(.markdown-preview-view, .cm-contentContainer) {
|
|
/* for table cells */
|
|
--font-text: var(--longform-font-text-theme);
|
|
font-family: var(--longform-font-text-theme);
|
|
font-size: var(--longform-font-size);
|
|
letter-spacing: var(--longform-letter-spacing);
|
|
}
|
|
|
|
/* keep any code smaller */
|
|
.app-container.app-container.app-container.app-container.app-container.app-container :is(
|
|
.longform-leaf,
|
|
.writing
|
|
)
|
|
:is(
|
|
.frontmatter-container,
|
|
.cm-hmd-frontmatter,
|
|
.cm-formatting-task,
|
|
.HyperMD-codeblock,
|
|
code,
|
|
.cm-inline-code,
|
|
.HyperMD-table-row
|
|
) {
|
|
font-family: var(--font-monospace);
|
|
font-size: 95%;
|
|
}
|
|
|
|
/* justify text */
|
|
body:not(.longform-left-aligned) :is(.writing, .longform-leaf) {
|
|
hyphens: auto;
|
|
text-align: justify;
|
|
}
|
|
|
|
/* stuff not to justify */
|
|
body:not(.longform-left-aligned) :is(.writing, .longform-leaf)
|
|
:is(
|
|
.HyperMD-codeblock,
|
|
.HyperMD-header,
|
|
.inline-title,
|
|
.cm-hmd-frontmatter,
|
|
.HyperMD-table-2,
|
|
.table-cell-wrapper
|
|
) {
|
|
text-align: left;
|
|
}
|
|
|
|
/* headings */
|
|
.app-container :is(.writing, .longform-leaf)
|
|
:is(h1, h2, h3, h4, h5, h6, .cm-header, .inline-title) {
|
|
font-family: var(--longform-font-text-theme);
|
|
}
|
|
|
|
/* indented-text */
|
|
.longform-text-indent.longform-text-indent div:has(> p) + div > p {
|
|
margin-top: 0;
|
|
text-indent: 1.5em;
|
|
}
|
|
|
|
.longform-text-indent.longform-text-indent div:has(+ div > p) > p {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* line height */
|
|
/* long selector needed to target only lines outside of a table */
|
|
:is(.writing, .longform-leaf)
|
|
.view-content
|
|
> .cm-s-obsidian
|
|
> div
|
|
> .cm-scroller
|
|
> .cm-sizer
|
|
> .cm-contentContainer
|
|
> .cm-content
|
|
> .cm-line:not(.HyperMD-header) {
|
|
line-height: calc(var(--longform-base-line-height) + 0.35);
|
|
}
|
|
|
|
:is(.writing, .longform-leaf) :is(table, h1, h2, h3, h4, h5, h6, .inline-title),
|
|
:is(.writing, .longform-leaf) .table-wrapper .cm-line,
|
|
body:not(.is-popout-window)
|
|
:is(.writing, .longform-leaf)
|
|
.cm-line
|
|
> :is(.cm-header, .cm-hmd-frontmatter) {
|
|
line-height: var(--longform-base-line-height);
|
|
}
|
|
|
|
:is(.writing, .longform-leaf) .cm-header.cm-header {
|
|
line-height: calc(var(--longform-base-line-height) + 0.05);
|
|
}
|
|
|
|
/* de-emphasized tasks */
|
|
body.longform-tasks-different :is(.writing, .longform-leaf)
|
|
:is(.HyperMD-task-line, .HyperMD-task-line > *, ul.contains-task-list) {
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
/* fix for code block header hack */
|
|
.app-container :is(.writing, .longform-leaf) pre[class*="language-"]::before {
|
|
line-height: calc(var(--longform-base-line-height) + 0.3);
|
|
}
|
|
|
|
/* ───────────────────────────────────────────────── */
|
|
/** Longform Smart Word Count
|
|
──────────────────────────────────────────────────── */
|
|
|
|
/* Show Word Count only on writing cssclass and longform notes.
|
|
- Supports Word Count Core Plugin + Better Word Count Community Plugin.
|
|
- Caveat: also triggered when such a note is open is in a non-active tab, restricting
|
|
this to the active tab would require nested `:has()` which isn't supported */
|
|
.wordcount-only-when-writing:not(.is-mobile) .horizontal-main-container:not(
|
|
:has(:is(.writing, .longform-leaf))
|
|
)
|
|
+ .status-bar
|
|
:is(.plugin-word-count, .plugin-better-word-count) {
|
|
display: none;
|
|
}
|