From 479ab3c545761994c15953bad5e0658c5ca950a5 Mon Sep 17 00:00:00 2001 From: Ole Eskild Steensen Date: Thu, 5 Oct 2023 18:16:25 +0200 Subject: [PATCH] Added dataview base styles --- src/site/styles/digital-garden-base.scss | 143 +++++++++++++++++++++++ 1 file changed, 143 insertions(+) diff --git a/src/site/styles/digital-garden-base.scss b/src/site/styles/digital-garden-base.scss index c79c57d1b..2cf1f1799 100644 --- a/src/site/styles/digital-garden-base.scss +++ b/src/site/styles/digital-garden-base.scss @@ -755,3 +755,146 @@ body.backlinks-note-icon .backlink[data-note-icon="3"]::before { overflow-x: auto; } } + +/* == Dataview specific styling == */ +.is-live-preview .block-language-dataviewjs > p, .is-live-preview .block-language-dataviewjs > span { + line-height: 1.0; +} + +/*****************/ +/** Table Views **/ +/*****************/ + +/* List View Default Styling; rendered internally as a table. */ +.table-view-table { + width: 100%; +} + +.table-view-table > thead > tr, .table-view-table > tbody > tr { + margin-top: 1em; + margin-bottom: 1em; + text-align: left; +} + +.table-view-table > tbody > tr:hover { + background-color: var(--text-selection) !important; +} + +.table-view-table > thead > tr > th { + font-weight: 700; + font-size: larger; + border-top: none; + border-left: none; + border-right: none; + border-bottom: solid; + + max-width: 100%; +} + +.table-view-table > tbody > tr > td { + text-align: left; + border: none; + font-weight: 400; + max-width: 100%; +} + +.table-view-table ul, .table-view-table ol { + margin-block-start: 0.2em !important; + margin-block-end: 0.2em !important; +} + +/** Rendered value styling for any view. */ +.dataview-result-list-root-ul { + padding: 0em !important; + margin: 0em !important; +} + +.dataview-result-list-ul { + margin-block-start: 0.2em !important; + margin-block-end: 0.2em !important; +} + +/** Generic grouping styling. */ +.dataview.result-group { + padding-left: 8px; +} + +/*******************/ +/** Inline Fields **/ +/*******************/ + +.dataview.inline-field-key { + padding-left: 8px; + padding-right: 8px; + font-family: var(--font-monospace); + background-color: var(--background-primary-alt); + color: var(--text-nav-selected); +} + +.dataview.inline-field-value { + padding-left: 8px; + padding-right: 8px; + font-family: var(--font-monospace); + background-color: var(--background-secondary-alt); + color: var(--text-nav-selected); +} + +.dataview.inline-field-standalone-value { + padding-left: 8px; + padding-right: 8px; + font-family: var(--font-monospace); + background-color: var(--background-secondary-alt); + color: var(--text-nav-selected); +} + +/***************/ +/** Task View **/ +/***************/ + +.dataview.task-list-item, .dataview.task-list-basic-item { + margin-top: 3px; + margin-bottom: 3px; + transition: 0.4s; +} + +.dataview.task-list-item:hover, .dataview.task-list-basic-item:hover { + background-color: var(--text-selection); + box-shadow: -40px 0 0 var(--text-selection); + cursor: pointer; +} + +/*****************/ +/** Error Views **/ +/*****************/ + +div.dataview-error-box { + width: 100%; + min-height: 150px; + display: flex; + align-items: center; + justify-content: center; + border: 4px dashed var(--background-secondary); +} + +.dataview-error-message { + color: var(--text-muted); + text-align: center; +} + +/*************************/ +/** Additional Metadata **/ +/*************************/ + +.dataview.small-text { + font-size: smaller; + color: var(--text-muted); + margin-left: 3px; +} + +.dataview.small-text::before { + content: "("; +} + +.dataview.small-text::after { + content: ")"; +} \ No newline at end of file