v0.12.2
Delay the popover preview on mouse over.
/* Delay popover */
@keyframes fadeIn {
0%
{
visibility: hidden;
}
50%
{
visibility: hidden;
opacity: 0;
}
100%
{
visibility: visible;
opacity: 1;
}
}
.popover{
animation: fadeIn 2.3s;
}Same problem here.
I can’t get it work with any height bigger than 330px, because then just the size of the box increases, but the size of the text-area (with the scrollbar) doesn’t follow. 
Any hint how to change that would be welcome!
This may also work with MacOS & Windows.
I write a lot of documentation (using Pandoc and LaTeX usually), and regularly need Linux, Mac & Windows key symbols as well as mouse symbols.
My usual choice is the free Linux Biolinum Keyboard O font for this purpose, in Markdown and HTML activated by <kbd>…</kbd> tags, like in many forums and elsewhere.
So I made a little CSS snippet to use this font in preview mode (haven’t found out how to do this for edit mode), and here it is. Remember the font must be installed on your system(s) first! No problem for me, because I use it often anyway, with LibreOffice, LaTeX and others.
/*
kbd-font.css snippet
Activates use of (locally installed) "Linux Biolinum Keyboard O" font,
for using keyboard symbols in <kbd>…</kbd> HTML tags.
2021-05-16 Matthias C. Hormann (Moonbase59)
Testing whether to use 'revert' or 'initial' or 'unset'.
'revert' seems most compatible.
*/
kbd {
font-family: 'Linux Biolinum Keyboard O';
border-radius: revert;
font-size: revert;
background-color: revert;
padding: revert;
}
Name it kbd-font.css, activate it under Settings → Appearance → CSS snippets and you’re good to go.
Here’s the test text I used in the document shown:
<kbd>Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich.</kbd>
<kbd>ABCDEFGHIJKLMNOPQRSTUVWXYZÄÖÜẞ</kbd>
<kbd>abcdefghijklmnopqrstuvwxyzäöüß</kbd>
<kbd>1234567890.:,;(*!?')</kbd>
<kbd>"'»«›‹„“”‚‘’</kbd>
<kbd>⍽⎀ ⌘⌥⌦⌧⌫ ↥↧ ←↑→↓ </kbd>
<kbd> </kbd>
<kbd> </kbd>
Press <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd>, oder drücken Sie <kbd>Strg</kbd>+<kbd>Alt</kbd>+<kbd>Entf</kbd>!
Looks rather odd in the forum, but nice if you copy-paste it into a test document. 
Can you fix this please? It isn’t working anymore on v0.12.3. The buttons disappear but the thick bar is still there (on both sides).
Thanks.
Is there a way to have this for Numbered lists as well?
When using the dark theme, marking the text has a low contrast. Can I adjust the colour of the text selection (background) in CSS? (see CSS: Changing the colour of the text selection)
Thanks a lot!
Yes, you can add it as a snippet:
.theme-dark {
–text-selection: yellow;
}
Change the yellow to the color of your choice. You can put a snippet inside your VAULTFOLDER/.obsidian/snippets directory. For example: VAULTFOLDER/.obsidian/snippets/text-selection.css
Don’t forget to enable the snippet in the settings.
been out of the obsidian loop for a while so this might have been addressed already.
/* scrollable workspace */
.workspace-split.mod-root {width: 100%;overflow: scroll;}
.workspace-leaf {min-width:360px;}
@_ph: it is easier to use tabs or sliding panes because then you can see what you have open.
Thanks for the reply. I added the code to a snippet I already use for my custom CSS. Unfortunately, that did not work, neither in edit nor in preview mode. Can there be used another CSS selector or has anyone another hint? Thanks again!
I’m not sure what you’re trying to do, @AtrusRiven. Different themes have different selectors. Although, you might try re-typing what @Ka_upkah suggested, except with two DASHES at the beginning of the variable.
.theme-dark {
--text-selection: yellow;
}
I just want to change the background color of selected text. Thus, I guess the method you and @Ka_upkah mentioned basically is the right way. I just wondered if the reason why it doesn’t work with me (even with two dashes) is that a selector is wrong. I use the standard dark theme with a simple custom CSS.
Well, @AtrusRiven, I’m not able to replicate the problem you’re having. When you say, background of selected text, do you mean when you click drag your curser over some text, the highlighted portion?
Assuming so,
.theme-dark {
--text-selection: rgba(122, 20, 20, 0.4);
}
This works for me. It could be your custom CSS causing a conflict. Try turning it off and writing a separate CSS with just the above, place it in your Snippets folder, then activate that under Snippets. If it works, then you know your other CSS stylesheet may have statements that are conflicting.
Also, if you already have a .theme-dark {} section in your CSS, just add the --text-selection: rgba(122, 20, 20, 0.4); part to it, instead of the whole thing.
Now, if none of that works, try this:
.CodeMirror-selected {
background-color: goldenrod;
}
That’s the CSS variable --text-selection: is calling this. Just add it to your CSS and be sure it’s enabled.
Sometimes you want to construct a larger “master document” from its parts, say chapters. And it should look like it’s been made of one piece.
None of the existing tips & tricks could fulfill this requirement, so I came up with my own. It is to be used with cssclass: clean-embeds in the frontmatter, so it won’t interfere with other pages that might use the “normal” type of embeds.
A sample document could look like this (simplified):
---
cssclass: clean-embeds
---
# Test Embeds
- Enable `clean-embeds` under *Settings → Appearance → CSS snippets*.
- Use `cssclass: clean-embeds` in YAML frontmatter to enable "clean" embedding.
![[Test Quote]]
![[Blindtext - Lorem Ipsum]]
## Document continued here
With “normal” embeds, it would look like this:
Using cssclass: clean-embeds, it looks like this:
Note it has the same margins and styling as the embedding document, and all embed horizontal rulers, titles, links and scrollbars removed.
clean-embeds.css
/*
clean-embeds.css snippet
Removes title, link, padding, margins from embeds,
so they really look like the same note.
To be used with `cssclass: clean-embeds` in YAML frontmatter.
2021-08-24 Matthias C. Hormann (Moonbase59)
TODO: Find out how to correct PDF export. L/R margins & vspace too large on embeds.
*/
/* remove title and the table from the "Metatable" plugin */
.markdown-preview-view.clean-embeds .markdown-embed-title,
.markdown-preview-view.clean-embeds .obsidian-metatable {
display: none;
}
/*
For links to embeds NOT to be shown, uncomment the following
and comment out the other section below.
*/
/*
.markdown-preview-view.clean-embeds .markdown-embed-link,
.markdown-preview-view.clean-embeds .file-embed-link {
display: none;
}
*/
/*
For links to embeds to BE shown, uncomment the following
until the "End link show/hide stuff" comment
and comment out the section above.
*/
/* Link icon */
.markdown-preview-view.clean-embeds .markdown-embed-link,
.markdown-preview-view.clean-embeds .file-embed-link {
top: 0;
right: 0;
left: unset;
text-align: right;
border: none;
margin: 0;
width: 24px;
height: 24px;
color: var(--text-faint);
cursor: pointer;
}
/* for Ars Magna theme and others that change ::before */
.markdown-preview-view.clean-embeds .markdown-embed-link::before,
.markdown-preview-view.clean-embeds .file-embed-link::before {
display: none;
}
/* Link icon size & hide */
.markdown-preview-view.clean-embeds .file-embed-link svg,
.markdown-preview-view.clean-embeds .markdown-embed-link svg {
height: 24px;
width: 24px;
opacity: 0;
display: unset;
}
/* show on hover */
.markdown-preview-view.clean-embeds .markdown-embed:hover .file-embed-link svg,
.markdown-preview-view.clean-embeds .markdown-embed:hover .markdown-embed-link svg {
opacity: 1;
}
/* change background on hover, to exactly see what’s embedded */
.markdown-preview-view.clean-embeds .markdown-embed:hover,
.markdown-preview-view.clean-embeds .file-embed:hover {
background-color: var(--background-secondary) !important;
}
/* End link show/hide stuff */
/* remove border and scroll */
/* unfortunately needs !important for some themes */
.markdown-preview-view.clean-embeds .markdown-embed,
.markdown-preview-view.clean-embeds .file-embed {
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
.markdown-preview-view.clean-embeds .markdown-embed-content,
.markdown-preview-view.clean-embeds .markdown-embed-content > .markdown-preview-view {
max-height: unset;
padding: 0 !important; /* !important for "Pisum" theme */
margin: 0;
border: 0;
}
/* remove <br> between internal embeds */
.clean-embeds .markdown-preview-section div > br {
display: none;
}
/* remove vertical space added by markdown-preview-sizer */
.clean-embeds div.markdown-preview-sizer.markdown-preview-section {
min-height: unset !important;
padding-bottom: 0 !important;
}
/* special considerations for printing (PDF export) */
@media print {
/* remove frontmatter box if "Show frontmatter" was enabled */
/* Also remove metadata table from "Metatable" plugin */
pre.frontmatter,
.obsidian-metatable {
display: none;
}
}
Copy the CSS code and save it into your vault’s .obsidian/snippets folder under the name clean-embeds.css.
Restart Obsidian.
Enable clean-embeds under Settings → Appearance → CSS snippets.
Add this to your YAML frontmatter for notes that should use clean embeds:
cssclass: clean-embeds
Voilà! Clean embedding for your “master document”!
<br> between internal embedsmarkdown-preview-sizer
!important) (forced linebreak) didn’t produce a newline. This is now fixed (thanks @pseudometa for the help!).There is now also a 10-minute showdown video available that shows both clean-embeds.css and clean-embeds-all at work, tested with several themes!
It’s an ad-hoc video, made totally unprepared, in a rather slow pace, and taken on a noisy laptop, so please excuse the quality. I thought a quick screen recording might answer many questions and show you what to expect.
Yes!! Thank you!
Perfect! Exactly what I need to bring long policy document together after the ‘bits and pieces’ are finalised!
@Moonbase59 : I have wanted something like this for a long time. Unfortunately, I have not been able to get it to work, even in the default theme with only your snippet enabled.
@Klaas: Sorry to hear, have tested this with my vault (default light theme, many plugins, several CSS snippets installed) and the help vault, see screenshot.
CSS can be rather fragile, especially when a software changes, different themes and/or CSS snippets are used, or different options selected that influence how the parser builds HTML.
I’d suggest you try to test with the help vault first (its just 2 files: the snippet & a minimal note, plus one setting). If that works, try your vault using the default theme, no community plugins and no CSS snippets first, and work up from there.
Maybe it’s just a theme, plugin or snippet you use that makes the selectors in my snippet fail. The snippet isn’t long, after all, so I’m sure it can be made to work with your vault.
EDIT:
N.B.: I forgot to ask the most simple question: Did you add cssclass: clean-embeds to the note(s) you try this with?
“Clean embeds” was meant not as a “change-them-all” snippet but for single “master documents” only where you want a different embed style, so it requires the cssclass. It will not change anything on “normal” notes.
@Moonbase59: thanks for your feedback.
1st off: yes, I did add cssclass: clean-embed in the YAML, and I did enable the snippet after restarting Obs.
I tried the Help file, but am not sure if I did it right.
Since it works at your end I must be doing something wrong.
I created a new folder snippets in Librar/Application support/obsidian/Obsidian Help.
Then I added your snippet, restarted OBs, and enabled the snippet in the Help vault’s settings.
I created an embed myself. But there was no effect.
