Improving embed queries integration

Share & showcase
1

I want to share you a css snippet that improves the integration of embed queries in notes.

Use case

I love the dataview plugin, but sometime its to complicated for certain searches, to search in the body of notes, without dvFiels and without knowing javascript. So I often use embed queries to obtain the result of a search in a note.

However, the embed queries really stand out from the rest of the note with the highlights and gray background, so I created this snippet that removes the gray background, hides the search icon, extends the embed query container so you don’t have to scroll and makes the text apprence similar to the note.

I use it in combination with the obsidian query control.

Usage

All the embeded queries will have improvements. You can put 2 cssclass to better improve:

  • query-list: removes the number of matches on the right, and removes the borders from the results; a setting with the style setting plugin lets you quickly remove or restore them.
  • query-neutral: removes highlighting from matching text

The snippet


/* voir l'ensemble des résultats sur la page sans scroller */

.internal-query .search-result-container {
    height: fit-content;
    min-height: fit-content;
    max-height: none;
}

.markdown-preview-view .internal-query .search-result-container {
    height: fit-content;
    min-height: fit-content;
    max-height: none;
}

/* Cache l'icone de recherche */
.internal-query .internal-query-header-icon {
    display: none;
}

/* cache l'icone de recherche */
.markdown-preview-view .internal-query .internal-query-header-icon {
    display: none;
}

/* Modifie les embed query */

.search-empty-state {
    color: var(--text-normal);
	border: none;
    font-size: 0;
    margin: 0 0 0;
    padding-left: 0;
}

.tree-item-inner {
    color: var(--text-normal);
}

.internal-query .search-result-container {
    padding: var(--size-4-2);
    border: 0px solid var(--background-modifier-border);
    background-color: var(--background-primary);
    border-radius: var(--radius-m);
	min-width: 0;
}

.internal-query {
    margin: 0;
    border-top: 0px solid var(--background-modifier-border);
}

.search-result-file-matches {
    color: var(--text-normal);

}
.internal-query .search-result-container {
    border: 0px solid var(--background-modifier-border) !important;
}

.query-list .search-result-file-matches {
    box-shadow: 0 0 0 var(--embed-query-border) var(--background-modifier-border); 
}

.query-list .tree-item-flair {
    font-size: 0;
	--background-modifier-hover: none;
}


.query-list .tree-item-flair:hover {
    font-size: 0;
	--background-modifier-hover: none;
	background-color: var(--background-primary);
}

.query-neutral .search-result-file-matched-text {
    background-color: transparent !important;
}

/* @settings

name: control embed query
id: hide-control-embed-query
settings:
  -
    id: embed-query-border
    title: largeur de la bordure
    description: largeur de la bordure autour des résultats, 0 pour pas de bordure, 1 pour des bordures
    type: variable-number
    default: 0
    format: px
*/

Exemples

image
image1213Ă—251 8.85 KB

with renderMarkdown by query control

image
image1168Ă—374 15 KB

And in a list:

image
image1251Ă—892 20.3 KB

1 Like
2

I don’t know if you’re aware of this plugin Better Search Views. It has come out of beta and now available on the community marketplace. It doesn’t have all the features of Query Control but it also adds some interesting features such as hierarchy in results. If you decided to you it, I’d be interested in the CSS version for it. Thank you!

3

I don’t think I’ll use it, because it doesn’t really do what I want, but I installed it to try out my snippet with it, and the snippet seems to work the same way. The embed query is well integrated. Can you try it out and let me know if there’s a problem?

1 Like
4

It works well with the Better Search Views plugin :smiley: thank you!

5

I made a little addition. If someone is looking to make just a list of files obtained with a search in the body of the note, he can add this snippet and the cssclass query-collapse This will hide the collapse icon:

.query-collapse .tree-item-self .tree-item-icon {
    display:none;
}
6

Wow, I’ve been wanting a snippet like this for months. This week I finally asked for one on Discord and was going to share the result here, and now you post this! :laughing: I’ll have to try yours, and I’ll link to it when I post mine.

7

Oh that’s funny, I’m also on discord but I haven’t seen your posts about it.
If you have any improvements or corrections to what I’ve written, I’d love you to share them.

I saw that I forgot to remove a border in my snippet, I added this :

.query-list .search-result-file-match {
    border-bottom: 0px;
}

And I also forot to change the font size , and the color of the file names.
I added this:

.internal-query .search-result .tree-item-inner {
    color: var(--text-normal);
    font-size: var(--font-text-size);
}
1 Like
8

The conversation starts at Discord and ends at a big thumbs-up emoji if you’re curious (it’s multiple little snippets; I kept them that way in my vault).

1 Like
9

Here is some additional info regarding this snippet, for any other css snippet beginners like me.

In the Usage instructions, it talks about invoking the “query-list” and “query-neutral” properties, which I didn’t understand how to do. Turns out this is done by adding them as “cssclasses” file properties. Here is obsidian help article on adding file properties, but briefly:

triple dots on the note tab > add file property > property name: cssclasses > property value: query-list and/or query-neutral

or in source mode view, use yaml at top of page:

---
cssclasses:
  - query-neutral
  - query-list
---