/ .obsidian / plugins / dataview / styles.css
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  }