ShaneNZ
August 10, 2021, 8:17pm
462
You mean the icon? That’s for linked panes; if you link one pane to another (in the kebab dropdown menu) then that will appear in the header to indicate the pane is linked (and you can click it to unlink).
EDIT: just noticed that the icon for copy url and link pane are the same in the dropdown, that’s a bit confusing (I never noticed before, I don’t use copy url at all).
1 Like
Folder Outline
adds some outline-lines to your folders
/* outliner for folders */
.outline-heading-children{
border-left: 1px solid rgba(118,158,165,0.2);
border-radius:0 0px 0px 0;
transition:all 0.5s ease-in-out;
}
.outline-heading-children:hover{
border-left-color:rgba(118,158,165,0.4);
}
/* outliner for the file and folders */
.nav-folder,.nav-file{
margin:0 !important;
border-left: 1px solid rgba(118,158,165,0.2);
}
6 Likes
Indicators
If you have a lot of notes in a folder and scroll down the file explorer, it’s not really easy to recognize if those files are on the top level or if they belong to a folder
So I added an indicator in front of notes that are in subfolders (or in a specific one) of the vault.
/* Indicator for files in subfolders*/
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title + .nav-folder-children .nav-file-title-content::before{
content: "› ";
color: var(--text-faint);
}
4 Likes
Short links
reduces the size of links until you click on the affected line with this symbol: "(»)"
to close the brackets, just click on another line
to open the link, press control on your keyboard and click the symbol OR the link
/* Short Links */
div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-string.cm-url:not(.cm-formatting) {
font-size: 0;
}
div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-string.cm-url:not(.cm-formatting)::after {
content: '»';
font-size: 1rem;
}
7 Likes
Klaas
August 21, 2021, 4:12pm
466
@thats.eli
Thanks for that. When I click on »
it open the URL between the brackets. But when I click on the URL itself to return it to »
it does not. Other than reloading the note, is there a way to get it to go back to »
?
Vault title hider
hides the title of your vault above your file explorer
/* Hides the Vaults Title */
.nav-folder.mod-root > .nav-folder-title .nav-folder-title-content {
display: none;
color: var(--text-muted);
font-size: var(--small-font-size);
text-transform: uppercase;
margin-left: -2px;
}
.nav-folder.mod-root > .nav-folder-title:hover {
color: none;
cursor: pointer;
}
@Klaas
this snippet shows the url only if you click on the line where the link is in (otherwise the “»” symbol is there)
if you click on another line, the url disappears again and the “»” symbol appears
if you press control and click on the link OR the icon, the link will open in your browser
→ in short: the brackets only close when you click on another line
Does that answer your question?
1 Like
konhi
August 22, 2021, 2:12pm
470
.popover.hover-popover {
transform: scale(0.8); /* makes the content smaller */
max-height: 800px; /* was 300 */
min-height: 100px;
width: 500px; /* was 400 */
}
.popover.hover-popover .markdown-embed {
height: 800px;
}
This fixes it (checked on v0.12.12).
I’ve tried to investigate with the developer’s console, by I can’t have at the same time the popup and the pointer tool… maybe there’s a trick?
I moved DevTools to separate window and then Alt + Tabbed.
2 Likes
Thanks for this. Works nicely in preview but not for me in editor. Any idea what I’m doing wrong?
clean-embeds
and clean-embeds-all
updates!
Both clean-embeds.css
and clean-embeds-all.css
have received a bugfix and an enhancement . Please check their changelogs and upgrade .
@Klaas : You might want to update your GitHub, too!
6 Likes
gregp
August 24, 2021, 3:12pm
473
Just saw your last edit. Thank you for this. It really makes a big difference to any page with a lot of transclusions
2 Likes
dreue
August 24, 2021, 4:05pm
474
@anon41901724 Thank you for finding the answer to this. I use obsidian for fiction and needed a way to differentiate between paragraphs - success!. However, on mobile I can’t get the edit mode mirror to function (shame because mobile is my primary first draft tool). Curious if you’ve experienced this on mobile, and if so have you found a fix?
Although not a “pure” CSS post, I thought I’d mention Garble Text on screen to hide private info (with added features!) here, because
it contains a CSS, that (also)
shows how to embed fonts so it can be used offline .
And ping @Klaas for the GitHub
Klaas
August 25, 2021, 2:40pm
476
@Moonbase59 thanks Kurakart ( ), I installed Garble Text yesterday.
I am not sure what you mean by qyzpinging me for the Github”?
So that you could add my garble-text.css
snippet to your GitHub repo
Klaas
August 25, 2021, 3:04pm
478
@Moonbase59 : excellent idea. In there I should also mention that the assumption is that the user has the Garble Text plug-in installed too, right?
You can , but it works equally well when just using app.garbleText()
The plugin makes it much easier, though. Especially on iOS devices. I understand they have no dev console …
Klaas
August 25, 2021, 3:22pm
480
@Moonbase59 if you don’t have the plug-in installed you cannot use the hotkey combo to toggle garble/ungarble.
Or I should ask: without the plug-in installed and its hotkey combo set, how do you activate/deactivate garble-test.css?
Dev console?
app.garbleText()
app.dom.appContainerEl.removeClass("is-text-garbled")