Meta Post - Common CSS Hacks

[konhi]

.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.

[kenanmike]

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

[Moonbase59]

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!

[gregp]

Just saw your last edit. Thank you for this. It really makes a big difference to any page with a lot of transclusions

[dreue]

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

[Moonbase59]

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]

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

[Moonbase59]

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

[Klaas]

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

[Moonbase59]

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]

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

[Moonbase59]

Dev console?

app.garbleText()

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

[Klaas]

Dev console: OK, I understand, though would not know how to use that, and I guess most “average” users would not either.

So, to all intents and purposes that is not practical. So, like you said, your snippet should really be used in combination with the plug-in to be easier to use.

[Valery_Kondakoff]

Hello!

Anybody knows how to disable horizontal scroll in File Explorer pane, or (optional) display shortened file names? Both of these are implemented in Minimal theme, so it seems it’s possible.
Any glue?
Thanks!

[Valery_Kondakoff]

Was able to disable horizontal scroll and truncate long filenames by using this code from Minimal theme:

.nav-file-title {
	  width:calc(100% - 30px);
	  margin:0 8px 0 -4px;
	  padding:2px 2px;
	  border-width:0;
	  line-height:1.6;
	  border-color:var(--background-secondary);
	  border-radius:6px;
	  cursor:var(--cursor);
	}
	
.nav-file-title-content {
	  width:100%;
	  white-space:nowrap;
	  overflow:hidden;
	  text-overflow:ellipsis;
	  padding:0 5px;
	  vertical-align:middle;
	  cursor:var(--cursor);
	}

[Jopp]

Hello there
css is new to me, so please check out this code is good for daily usage.

/* Fat Checkboxes in and outside tables in preview mode */

input[type=checkbox], .markdown-preview-view .task-list-item-checkbox{
  -webkit-appearance: checkbox;
  width: 1.8em;
  height: 1.8em;
  margin-right: 4px;
  margin-bottom: 2px;
  cursor: pointer;
  vertical-align: baseline;

}

Two things:

1. the sanity of this code
2. the normal checkbox is violet and not blue #1976D2 as the checkbox in the tables

what do you think?

[chumido]

Hello. It not work with me right now, can you help me?

[Klaas]

@chumido I do not know the CSS code you are using, but this works for me:

/* Tag pills in edit mode */
.CodeMirror-line span.cm-hashtag-begin {
  background-color: var(--yellow59);
  color: white !important;
  border-top-left-radius: 4px; /* PB changed from 15 to go from rounded to rectangle */
  border-bottom-left-radius: 4px; /* PB changed from 15 to go from rounded to rectangle */
  padding-left:6px;
  padding-top: 1px;
  border-right:none;
  display: inline-block;
  text-decoration: none;
  font-size: 14px;
}

.CodeMirror-line span.cm-hashtag-end {
  background-color: var(--yellow59);
  color: white !important;
  border-top-right-radius: 4px; /* PB changed from 15 to go from rounded to rectangle */
  border-bottom-right-radius: 4px; /* PB changed from 15 to go from rounded to rectangle */
  padding-right:6px;
  padding-bottom: 1px;
  border-left:none;
  display: inline-block;
  text-decoration: none;
  font-size: 14px;
}

You might have to change the font size and paddings. Changing the border radius will affect the shape of the tage from a pill, as per your screenshot, to more rectangular, or to circular/disk-shaped.

[chumido]

Thank you for replying me. I’m using this code, where did i wrong?

div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hashtag-end:before {
  content: '#';
}
.tag, div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hashtag-end {
background-color: var(--text-accent);
border: none;
color: white !important;
font-size: 11px;
padding: 1px 8px;
text-align: center;
text-decoration: none !important;
display: inline-block;
margin: 0px 0px;
cursor: pointer;
border-radius: 14px;
}
.tag:hover {
color: white;
background-color: var(--text-accent-hover);
}
.tag[href^="#obsidian"] {
  background-color: #4d3ca6;
}
.tag[href^="#important"] {
  background-color: red;
}
.tag[href^="#complete"] {
  background-color: green;
}
.tag[href^="#inprogress"] {
  background-color: orange;
}

[Klaas]

@chumido : I am not a CSS expert so cannot say where you went wrong. Did you try my code?