Meta Post - Common CSS Hacks

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

Nicer checkboxes in preview by @kepano

And here is my remix, nicer checkboxes in Editor:

/* Round checkbxes in preview and editor */
input[type=checkbox], .cm-formatting-task {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 50%;
    border: 1px solid var(--text-faint);
    padding: 0;
    vertical-align: middle;    
}

.cm-s-obsidian span.cm-formatting-task {
    color: transparent;
    width: 1.25em !important;
    height: 1.25em;
    display: inline-block;
}

input[type=checkbox]:focus{
  outline:0;
}
input[type=checkbox]:checked, .cm-formatting-task.cm-property {
    background-color: var(--text-accent-hover);
    border: 1px solid var(--text-accent-hover);
    background-position: center;
    background-size: 70%;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml; utf8, <svg width="12px" height="10px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-4.000000, -6.000000)" fill="%23ffffff"><path d="M8.1043257,14.0367999 L4.52468714,10.5420499 C4.32525014,10.3497722 4.32525014,10.0368095 4.52468714,9.8424863 L5.24777413,9.1439454 C5.44721114,8.95166768 5.77142411,8.95166768 5.97086112,9.1439454 L8.46638057,11.5903727 L14.0291389,6.1442083 C14.2285759,5.95193057 14.5527889,5.95193057 14.7522259,6.1442083 L15.4753129,6.84377194 C15.6747499,7.03604967 15.6747499,7.35003511 15.4753129,7.54129009 L8.82741268,14.0367999 C8.62797568,14.2290777 8.3037627,14.2290777 8.1043257,14.0367999"></path></g></g></svg>');
}

Looks like this:
image

Since the contents of the element are transparent, to check/uncheck a checkbox, place your cursor right after it:
image
Press left arrow once, then press backspace.

To check an item:
Press your cursor behind the checkbox, press left arrow once, press backspace, type ‘x’ and it will turn into a checkbox.

Here is how it works in practice
ezgif-1-1cb6fc8b02cf

This makes long checklists in Edit more way more understandable and reduces my need to switch to Preview!

8 Likes

Nice. Nevertheless, the procedure

Press your cursor behind the checkbox, press left arrow once, press backspace, type ‘x’ and it will turn into a checkbox.

I like the idea of not having to switch to Preview, but to implement it is not practical if you don’t use checkboxes regularly. If I go back 1 week from now I’ll have to look it up how to do it. Nahh.

The procedure is the same one you would use with a normal todo item in edit mode. I’m just listing it out step by step, as it isn’t visually obvious with the new styling.

Maybe I misunderstand you, but the normal step to create a checkbox:

  1. type -, then space;
  2. type [, then space, then ], then space again;
  3. still on the same line type a text for the checkbox.

Now, to place a checkmark, click once on the checkbox when in Preview. This is the normal step when one encounters a checkbox on a webpage.

That’s all there is to it, and it is intuitive. TBH, I don’t find your procedure intuitive.

Minimalistic Red / Green checkboxes

Screenshot 2020-07-03 at 19.43.24

/* CHECKBOX: Green / Red color */

.markdown-preview-view .task-list-item-checkbox{
    -webkit-appearance: none;
  box-sizing: border-box;
  border: 1px solid var(--text-muted);
  border-radius: 2px;
  position: relative;
  width: 1.3em;
  height: 1.3em;
  margin: 0;
  outline: none;
  margin-right: 4px;
  margin-bottom: 2px;
  cursor: pointer;
  vertical-align: baseline;

  background-color: #d068688f;
}

.markdown-preview-view .task-list-item-checkbox:checked {
  background-color: #68d0688f;
}
1 Like

Stylish blockquotes

0.7.6 / 0.8.4 / 0.8.5 Compatible

Add quotation mark before quote

/* Add quotation character before quote */
blockquote:before {
  font: 14px/20px italic Times, serif;
  content: "“";
  font-size: 3em;
  line-height: 0.1em;
  vertical-align: -0.4em;
}
blockquote p { display: inline; }

Remove left margin

/* Remove blockquote left margin */
blockquote {
  margin-inline-start: 0;
}
7 Likes