Meta Post - Common CSS Hacks

Functional and Beautiful. I think I might need to make changes to this to work with the Zettelkasten theme that I’m using.

Lovely! Thank you very much!

1 Like

Im hoping/waiting for Collapsible indents feature in the preview mode as well!!

1 Like

Vim mode with line focus

/* Cursor color in normal vim mode and opacity */
.cm-fat-cursor .CodeMirror-cursor, .cm-animate-fat-cursor {
  width: 0.5em;
  background: #d65d0e;
  opacity: 60% !important;
}

/*an active line highlight in vim normal mode */
.cm-fat-cursor .CodeMirror-activeline .CodeMirror-linebackground{
  background-color: rgba(89, 75, 95, 0.99) !important;
}

/*if you want the highlight to present in both normal and insert mode of vim*/
.CodeMirror-activeline .CodeMirror-linebackground{
  background-color: rgba(89, 75, 95, 0.99) !important;
}

3 Likes

How can i make it work for both Light and Dark themes?

“Naked” Embeds by @death.au

/* Naked Embeds */
.markdown-embed-title { display: none; }
.markdown-preview-view .markdown-embed-content>:first-child { margin-top: 0;}
.markdown-preview-view .markdown-embed-content>:last-child { margin-bottom: 0;}

/*remove the following two line, you will get border and scroll*/
.markdown-preview-view .markdown-embed { border:none; padding:0; margin:0; }
.markdown-preview-view .markdown-embed-content { 
  max-height: unset;
  background-color: var(--background-secondary); /*define different bg color*/
}

/* the link on the top right corner*/
.markdown-embed-link {
color: var(--text-faint) !important;
}

.markdown-embed-link:hover {
color: var(--text-accent) !important;
}


To further remove the header, add the following part:

/* remove the first heading*/
.markdown-preview-view .markdown-embed-content>:first-child { display:none;}
1 Like

if you don’t add the .theme-dark or .theme-light selector, it will work for both mode.

Would it be possible to randomise the colours? from a palette?

I don’t know how to do that. Maybe possible with LESS/SASS extended css… if you find a way let me know.

can anyone share the code to change the default font to say Times New Roman in the preview mode ?

/* font for everything outside of editor/preview panes */
.app-container {
  font-family: var(--font-family-preview);
}

/* normal text outside of headings and code of editor */
.cm-s-obsidian, .mod-single-child .cm-s-obsidian {
  font-family: var(--font-family-editor);
}

/* normal text outside of headings and code of preview */
.markdown-preview-view, .mod-single-child .markdown-preview-view {
  font-family: var(--font-family-editor);
}
1 Like
/* _hyphenation_and_justification      */
/*-------------------------------------*/

.cm-s-obsidian, .markdown-preview-view {
  text-align: justify;
  hyphens: auto;

Got it from @Boyd.

6 Likes

@Klaas not sure what hyphenation and justification means in this context. Do you have a picture of the effect?

It will (a) justify the whole text and (b) breaking words into two lines if needed:

justify

3 Likes

@Boyd answered it. I just want to add that I like the hack, and use it even when I try out other themes.

In Edit mode the justification makes some awkward gaps, but in Preview mode that is corrected.

1 Like

Enlarge image on hover

.markdown-preview-view img {
  display: block;
  margin-top: 20pt;
  margin-bottom: 20pt;
  margin-left: auto;
  margin-right: auto;
  width: 50%;  /* experiment with values */
  transition:transform 0.25s ease;
}

.markdown-preview-view img:hover {
    -webkit-transform:scale(1.8); /* experiment with values */
    transform:scale(2);
    
}

7 Likes

In script I posted above: When I hover on picture then images is enlarged. But I would like to add strong blur to all elements in behind the image, kind of focus mode for images. Does somebody have idea how to make it?

Thank you.

Hi, i found a useful small hack to support RTL (for Hebrew and arabic) by @dorongol
may be you can add it to the list.

Current version: v0.7.3

.view-header{
direction: rtl;
text-align: right;
}
.view-content{
text-align: right;
direction: rtl;
}

Put country flags when you are using hashtag of ISO language code. You need to do it manually for each language.

Examples:

Czech language

.tag[href="#cze"]{

background: #b5fbac;
text-shadow:  20px 20px 60px #9ad592, 
             -20px -20px 60px #d0ffc6;
color: black;

}

.tag[href="#cze"]:before {
  
  color: white;
  content: "🇨🇿";
  padding: -20pt -20pt 15pt 5pt;
  margin: 0pt;
  font-size: 15pt;

}

.tag[href="#cze"]:hover {

border-radius: 14px;
background: #b5fbac;
box-shadow:  20px 20px 60px #9ad592, 
             -20px -20px 60px #d0ffc6;

}

English language

.tag[href="#eng"]{

  color: black;
  background: #b5fbac;
  text-shadow:  20px 20px 60px #9ad592, 
             -20px -20px 60px #d0ffc6;
}

.tag[href="#eng"]:before {
  
  color: white;
  content: "🇺🇸";
  padding: -20pt -20pt 15pt 5pt;
  margin: 0pt;
  font-size: 15pt;
}

.tag[href="#eng"]:hover {

border-radius: 14px;
background: #b5fbac;
box-shadow:  20px 20px 60px #9ad592, 
             -20px -20px 60px #d0ffc6;
}

:pray:t3: Somebody should make native plugin where user can define many replacements of the specific text tag into “icon tag” or combination of both.

4 Likes