Smoother looking embedded search (CSS snippet)

Share & showcase
1

Embedded searches are a handy way to gather or filter pieces of note content, but they look like the sidebar search widget plopped into a note. I prefer something that looks more integrated, so I use these CSS snippets to do that.

Example (the colored text comes from an unrelated snippet):

IMG_8237
IMG_82372039×1529 184 KB

Embedded search body-style text.css

/* Style embedded search text like body text instead of small and faint. 

Courtesy of sailkite: https://discord.com/channels/686053708261228577/702656734631821413/1141541070686134392 
*/
.internal-query .search-result-file-matches {
    color: var(--text-normal);
    font-size: var(--font-text-size);
}

/* De emphasize the search terms at top of embedded searches by giving them the default style of results.

Courtesy of sailkite: https://discord.com/channels/686053708261228577/702656734631821413/1141542427069521920 
*/
.internal-query .internal-query-header-title {
    color: var(--text-muted);
    font-size: var(--font-ui-smaller);
}

/* Remove match highlighting from embedded search.

Courtesy of trainbuffer: https://discord.com/channels/686053708261228577/702656734631821413/1141532971136983160

"And you could remove the `.internal-query` bit if you'd like to change the sidebar Search/Backlinks/etc. matched text as well. A `unset` could work here for no color"
*/
.internal-query .search-result-file-matched-text {
background-color: unset; /*default: var(--text-highlight-bg);*/
}

Embedded search edit icon visible.css

/* Make embedded search edit icon visible. This is only a problem for me on mobile, and I havent yet checked whether it's a bug or a side effect of a snippet. 

Courtesy of sailkite: https://discord.com/channels/686053708261228577/702656734631821413/1141540399018676286 
*/
.markdown-source-view.mod-cm6 .internal-query + .edit-block-button {
    opacity: 1;
}

Embedded search unlimited height.css

/* Allow full height of embedded searches instead of limiting to a scrolling box.

Courtesy of sailKite: https://discord.com/channels/686053708261228577/702656734631821413/1141539855969550437 
*/
.internal-query .search-result-container {
    max-height: unset;
}

Another person’s snippet

For more options, here is another embedded search snippet: Improving embed queries integration.

1 Like
2

i didn’t even realize an embedded search was possible. unless this is only for some plugin?

3

It’s a built in feature: https://help.obsidian.md/embeds#Embed+search+results. (And I’ve now added that link to the main post. Thanks!)

Here’s a use I recently found for it: "Embed" a note's outline.

1 Like
4

I’ll add another to the list.

Unless you are directly over the collapse icon, when clicking on the search-result-file-title the query is expanded:

Obsidian_luqka9cxZW

With assistance from sailKite (originally for backlinks - Discord link), I have a collection of these now. Here’s one to expand the collapse click area across the entire title:

Obsidian_VcE6X1sBbu

/* make internal query file arrow click behavior appear to cover entire title */
.internal-query .tree-item.search-result > .tree-item-self > .tree-item-icon {
    width: 100%;
    height: 100%;
    top: -1px;
    right: 0px;
    padding-left: 7px;
    justify-content: flex-start; 
}

※ Depending on the device(s) you are using you may need to play around with the top, right, padding-left values to get the icon lined up to your eye, but it’s a nice QOL addition.

1 Like