#462

You mean the :link: 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
#463

Folder Outline

/* 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
#464

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.
    Indicators
    Indicators292×760 20.4 KB 
/* 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
#465

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

shorter links

/* 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;
}
6 Likes
#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 » ?

#467

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;
}
#468

@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
#469

Yes, it does, thank you.

#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
#471

Thanks for this. Works nicely in preview but not for me in editor. Any idea what I’m doing wrong?

image
image848×1066 76.8 KB

image
image790×520 38.3 KB

#472

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! :slight_smile:

5 Likes
#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
#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?

#475

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 :wink:

#476

@Moonbase59 thanks Kurakart (:wink:), I installed Garble Text yesterday.
I am not sure what you mean by qyzpinging me for the Github”?

#477

So that you could add my garble-text.css snippet to your GitHub repo :wink:

#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?

#479

You can, but it works equally well when just using app.garbleText() :slight_smile:

The plugin makes it much easier, though. Especially on iOS devices. I understand they have no dev console …

#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?

#481

Dev console?

app.garbleText()

app.dom.appContainerEl.removeClass("is-text-garbled")