Meta Post - Common CSS Hacks

Don’t worry, I’ll cover for you!

The border color is from me as I posted a half-baked solution for the same issue on the Discord. Sadly it couldn’t show more than level one line and worked in edit mode only.

This one is much more elaborate and it actually works all the way, but only in Preview! Seems like we can’t have it everywhere. Still, thanks for this @death.au

Block cursor

image
0.7.3 Dark + Light theme Compatible

.CodeMirror-cursor { 
  border-left-width: 0.5em;
  opacity: 0.75;
}
3 Likes

Auto fade note controls

Minimal Series

Before:
image

After:
image

Note, the note controls are still there, but will increase contrast, i.e. get to the before state, on hover.

0.7.3 compatible

.view-header:not(:hover) .view-actions {
  opacity: 0.1;
  transition: opacity .25s ease-in-out;
}

Auto fade status bar

Minimal Series

0.7.3 compatible

Reduced status bar contrast.

With this code snippet you get this:
image

and on hover you get this:
image

/* auto fades status bar items */
.status-bar:not(:hover) .status-bar-item {
  opacity: 0.25;
  transition: opacity .25s ease-in-out;
}

Smaller horizontal and vertical scrollbars

Minimal Series

0.7.3 compatible

.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, ::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

Subtler code folding arrows

Minimal Series

0.7.3 compatible

Increases the size of the folding gutter arrows and decreases their opacity until hovered.

Without this code:
image

After this code:
image

/* Make subtler folding gutter arrows */
.CodeMirror-foldgutter-folded:after, .CodeMirror-foldgutter-open:after {
    opacity: 0.5;
    font-size: 60%;
}

.CodeMirror-foldgutter-folded:hover:after, .CodeMirror-foldgutter-open:hover:after {
    opacity: 1;
}

.CodeMirror-foldgutter-folded:after {
    content: "\25BA";    
}

.CodeMirror-foldgutter-open:after {
    content: "\25BC";    
}

12 Likes

@death.au oops!

Hi there! I’m a total newbie at css. Could anyone tell me if it’s possible to change how the tags look? I’d like to highlight certain important tags (for example #complete as green, #inprogress as yellow, etc)

2 Likes

this worked for me :

.tag[href="#important"] {
  color : red;
}

Tag Pills

0.73
Obsidian_7eMo0E8BFS

.tag {
  background-color: var(--text-accent);
  border: none;
  color: white;
  font-size: 11px;
  padding: 1px 8px;
  text-align: center;
  text-decoration: none;
  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;
}
23 Likes

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