This CSS kills Obsidians ability to do custom CSS

goodsignal · June 6, 2020, 11:07am

My dutifully crafted custom obsidian.css seems to kill Obsidian’s custom CSS capability. I have no idea what in here is causing the problem. I’ve tried to isolate the offending code. All the ideas in here are grabbed from other themes. I’m just posting here because I don’t know what else to do with this.

When this theme is activated, the only customization are
Editor window

Heading underlines across whole page

Preview window:

Heading suffix symbol
Normalized font size for headings
Nested list padding

Things that don’t seem to work at all:

Most font colors
Font sizes in Edit window
Default body font sizes
Font style/family

So far my experience is that I can activate a community theme. And that will work. And if I then copy my CSS into the community generated CSS file, my customization will work but then will stop on it’s own at some future date. It will also stop working if I make any changes to something like a color code in the obsidian.css.

The problem shows on two different computers of mine. They are running different builds of windows 10.

If I uninstall and scrub by system of all obsidian files. Then reinstall with v0.6.7, the problem persists.

The issue first showed itself in v0.6.5. And I temporarily fixed it by building my CSS file again, piece by piece from scratch. I never had the problem before v065. Other than that, I have no idea if it’s related to version.

I reduced my CSS down to a very small set of changes and tried to resolve it on discord, where I used someones else’s working CSS code but it would not work on either of my installations. At that point it just seemed too strange.

The only thing I can think of is that there’s something in this CSS that trips Obsidian up enough to not recognized edits in CSS unless it is drastically replaced with a completely different them from the community.

I don’t know if any of this is helpful but I figured that I should at least document it as much as I could.

.theme-dark {
	--background-primary: #2f3136;
	--background-primary-alt: #36393f;
	--background-secondary: #202225;
	--background-secondary-alt: #0c1018d1;
	--text-normal: #bbc0c5;
	--text-faint: #a09b80;
	--text-link: #59a2c5;
	--text-a: #59a2c5;
	--text-a-hover: #b3a14b;
	--text-mark: #d79921;
	--pre-code: #272524d9;
	--text-highlight-bg: rgba(255, 255, 0, 0.2);
	--interactive-accent: #92A1A1;
	--interactive-before: #5e6565;
	--background-modifier-border: #92a1a17a;
	--blockquote-border: rgba(77, 60, 166, .6);
	--text-accent: #ff9640ba;
	--interactive-accent-rgb: #fe8019;

/* Gabe Mods */
	--text-color-code: #c9655e;
	--text-title-h1: #a79645;
	--text-title-h2: #939bd6;
	--text-title-h3: #ba6ea0;
	--text-title-h4: #b78b60;
	--text-title-h5: #859679;
	--text-title-h6: #95a679;
	--text-muted: #888;
	--text-faint: #555;	
	--font-heading-normaized: 22px;
	--heading-symbol-size: 16px;
	--font-family-editor: Candara;
	--font-family-preview: Candara;	
}


/******************/
/* editor section */
/******************/

/* normal text outside of headings and code */
.cm-s-obsidian
{
  font-family: var(--font-family-editor);
  font-size: 15px;
}

.mod-single-child .cm-s-obsidian
{
  font-family: var(--font-family-editor);
  font-size: 15px;
  color: var(--text-normal);
}

/* code color */
.cm-s-obsidian span.cm-inline-code {
  color: var(--text-color-code);
}

/*## headings ##*/
/* Universal Mods */

/* Allows for full page header underline to define sections more clearly */
.cm-s-obsidian pre.HyperMD-header {
  line-height: 1.4 !important;
  border-bottom: thin solid var(--text-faint);
}

.cm-header-1,
.cm-header-2,
.cm-header-3,
.cm-header-4,
.cm-header-5,
.cm-header-6
{
  font-family: var(--font-family-editor);
  /* font-weight: 500; */
  /* font-weight: bold; */
  /* border-bottom: thin solid var(--text-faint); */
}

/* Individual Mods */
.cm-header-1
{
  font-size: var(--font-heading-normaized);
  color: var(--text-title-h1);
}

.cm-header-2
{
  font-size: var(--font-heading-normaized);
  color: var(--text-title-h2);
}

.cm-header-3
{
  font-size: var(--font-heading-normaized);
  color: var(--text-title-h3);
}

.cm-header-4
{
  font-size: var(--font-heading-normaized);
  color: var(--text-title-h4);
}

.cm-header-5
{
  font-size: var(--font-heading-normaized);
  color: var(--text-title-h5);
}

.cm-header-6
{
  font-size: var(--font-heading-normaized);
  color: var(--text-title-h6);
}



/******************/
/* preview section */
/******************/

/* normal text outside of headings and code */
.markdown-preview-view
{
  font-family: var(--font-family-preview);
  font-size: 15px;
  color: var(--text-normal);
  /* padding-left: 10% !important; */
  /* padding-right: 10% !important; */
}

.mod-single-child .markdown-preview-view
{
  font-family: var(--font-family-preview);
  font-size: 15px;
  color: var(--text-normal);
  /* padding-left: 20% !important; */
  /* padding-right: 20% !important; */
}

/* code color */
.markdown-preview-view code {
  color: var(--text-color-code);
}

/* headings */
.markdown-preview-view h1
{
  font-family: var(--font-family-preview);
  font-weight: 500;
  font-size: var(--font-heading-normaized);
  font-weight: bold;
  color: var(--text-title-h1);
}

.markdown-preview-view h2
{
  font-family: var(--font-family-preview);
  font-weight: 500;
  font-size: var(--font-heading-normaized);
  font-weight: bold;
  color: var(--text-title-h2);
}

.markdown-preview-view h3
{
  font-family: var(--font-family-preview);
  font-weight: 500;
  font-size: var(--font-heading-normaized);
  font-weight: bold;
  color: var(--text-title-h3);
}

.markdown-preview-view h4
{
  font-family: var(--font-family-preview);
  font-weight: 500;
  font-size: var(--font-heading-normaized);
  font-weight: bold;
  color: var(--text-title-h4);
}

.markdown-preview-view h5,
{
  font-family: var(--font-family-preview);
  font-weight: 500;
  font-size: var(--font-heading-normaized);
  font-weight: bold;
  color: var(--text-title-h5);
}

.markdown-preview-view h6
{
  font-family: var(--font-family-preview);
  font-weight: 500;
  font-size: var(--font-heading-normaized);
  font-weight: bold;
  color: var(--text-title-h6);
}

/* Header Suffix by Gabe*/
	/* There's a (U+3000) space character before the ❶*/
	h1::after
	{
	  content: ' ❶';
	  font-size: var(--heading-symbol-size);
	  color: var(--text-muted);
	}
	h2::after
	{
	  content: ' ❷';
	  font-size: var(--heading-symbol-size);
	  color: var(--text-muted);
	}  
	h3::after
	{
	  content: ' ❸';
	  font-size: var(--heading-symbol-size);
	  color: var(--text-muted);
	}
	h4::after
	{
	  content: ' ❹';
	  font-size: var(--heading-symbol-size);
	  color: var(--text-muted);
	}
	h5::after
	{
	  content: ' ❺';
	  font-size: var(--heading-symbol-size);
	  color: var(--text-muted);
	}
	h6::after
	{
	  content: ' ❻';
	  font-size: var(--heading-symbol-size);
	  color: var(--text-muted);
	}

/* ### Bullet Style ###	 */
ol {
	padding-inline-start: 18px;
}
ul {
	padding-inline-start: 18px;
	list-style-type: disc;
}

/* ### Checklist Style correction from Bullet Style changes###	 */
.markdown-preview-view .task-list-item {
    margin-left: -.2em;
}

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

rsdimitrov · June 6, 2020, 4:05pm

I ran your code through a CSS validator. Here is what it found:

That comma shouldn’t be there. Does removing it this still kill the custom CSS?

goodsignal · June 6, 2020, 6:49pm

That’s a great idea to run it trough a validator! I wasn’t aware of those yet. I appreciate you pushing it through and finding that flaw. I was really excited and hopeful to discover an error that could be culprit. Unfortunately fixing the comma doesn’t seem to help.

I also found --text-faint: listed twice in the variables too. Removed one of them, but that didn’t help.

As a test, I just broke up the CSS here into separate sections, each as their own CSS file in an effor to isolate whatever is problematic. But all the parts work individually. But still, when combined as the original file, something doesn’t work.

Earlier today, this theme had broken Obsidian so that I couldn’t get a replacement subset to work either. But right now Obsidian is gracefully working with various CSS as they are introduced. Just not the CSS combination posted here.

It’s so strange.

@rsdimitrov would you post a link to a validator that you like. It just seems like a good resource to have posted here, for others to find.

rsdimitrov · June 7, 2020, 7:46am

@goodsignal I used this one http://jigsaw.w3.org/css-validator/#validate_by_input but it is poorly suited for the obsidian css, because it shows the CSS variables as errors. If I find a better one I’ll post it later.

Silver · June 14, 2020, 4:05am

@goodsignal Moving to Obsidian category since it doesn’t seem like a reproducible issue.

This is what I tried:

Use a community theme, which works;
Replace obsidian.css with your provided CSS, save. CSS works;
Replace --background-primary with the value purple, which works.

Am I missing anything to reproduce this issue? Do you consistently run into this bug when you change color values, or do you have to wait until a random future date?

I used Sublime Text on Windows 10 to test by the way. The editor you use could play a role too…

goodsignal · June 15, 2020, 12:53pm

The issue came up seemingly at random. And then persisted once it started. Sometimes, a color switch would trigger it. Sometimes a restart would trigger it. It was too weird and I couldn’t find a reliable pattern to report.

So, I gave up and started over with a different base community theme and did the smallest amount of mods that I could to get an aesthetic I liked enough to work in.

@Silver it was too weird to spend any more time on. Again, I only posted this in the slim chance that others came across a similar issue. Maybe the additional account could have been useful. I didn’t mean for you to waste any more time on it. Sorry.