styles.css
1 /** Live Preview padding fixes, specifically for DataviewJS custom HTML elements. */ 2 .is-live-preview .block-language-dataviewjs > p, .is-live-preview .block-language-dataviewjs > span { 3 line-height: 1.0; 4 } 5 6 .block-language-dataview { 7 overflow-y: auto; 8 } 9 10 /*****************/ 11 /** Table Views **/ 12 /*****************/ 13 14 /* List View Default Styling; rendered internally as a table. */ 15 .table-view-table { 16 width: 100%; 17 } 18 19 .table-view-table > thead > tr, .table-view-table > tbody > tr { 20 margin-top: 1em; 21 margin-bottom: 1em; 22 text-align: left; 23 } 24 25 .table-view-table > tbody > tr:hover { 26 background-color: var(--table-row-background-hover); 27 } 28 29 .table-view-table > thead > tr > th { 30 font-weight: 700; 31 font-size: larger; 32 border-top: none; 33 border-left: none; 34 border-right: none; 35 border-bottom: solid; 36 37 max-width: 100%; 38 } 39 40 .table-view-table > tbody > tr > td { 41 text-align: left; 42 border: none; 43 font-weight: 400; 44 max-width: 100%; 45 } 46 47 .table-view-table ul, .table-view-table ol { 48 margin-block-start: 0.2em !important; 49 margin-block-end: 0.2em !important; 50 } 51 52 /** Rendered value styling for any view. */ 53 .dataview-result-list-root-ul { 54 padding: 0em !important; 55 margin: 0em !important; 56 } 57 58 .dataview-result-list-ul { 59 margin-block-start: 0.2em !important; 60 margin-block-end: 0.2em !important; 61 } 62 63 /** Generic grouping styling. */ 64 .dataview.result-group { 65 padding-left: 8px; 66 } 67 68 /*******************/ 69 /** Inline Fields **/ 70 /*******************/ 71 72 .dataview.inline-field-key { 73 padding-left: 8px; 74 padding-right: 8px; 75 font-family: var(--font-monospace); 76 background-color: var(--background-primary-alt); 77 color: var(--text-nav-selected); 78 } 79 80 .dataview.inline-field-value { 81 padding-left: 8px; 82 padding-right: 8px; 83 font-family: var(--font-monospace); 84 background-color: var(--background-secondary-alt); 85 color: var(--text-nav-selected); 86 } 87 88 .dataview.inline-field-standalone-value { 89 padding-left: 8px; 90 padding-right: 8px; 91 font-family: var(--font-monospace); 92 background-color: var(--background-secondary-alt); 93 color: var(--text-nav-selected); 94 } 95 96 /***************/ 97 /** Task View **/ 98 /***************/ 99 100 .dataview.task-list-item, .dataview.task-list-basic-item { 101 margin-top: 3px; 102 margin-bottom: 3px; 103 transition: 0.4s; 104 } 105 106 .dataview.task-list-item:hover, .dataview.task-list-basic-item:hover { 107 background-color: var(--text-selection); 108 box-shadow: -40px 0 0 var(--text-selection); 109 cursor: pointer; 110 } 111 112 /*****************/ 113 /** Error Views **/ 114 /*****************/ 115 116 div.dataview-error-box { 117 width: 100%; 118 min-height: 150px; 119 display: flex; 120 align-items: center; 121 justify-content: center; 122 border: 4px dashed var(--background-secondary); 123 } 124 125 .dataview-error-message { 126 color: var(--text-muted); 127 text-align: center; 128 } 129 130 /*************************/ 131 /** Additional Metadata **/ 132 /*************************/ 133 134 .dataview.small-text { 135 font-size: smaller; 136 color: var(--text-muted); 137 margin-left: 3px; 138 } 139 140 .dataview.small-text::before { 141 content: "("; 142 } 143 144 .dataview.small-text::after { 145 content: ")"; 146 }