Giter Club home page Giter Club logo

Comments (6)

nousernameavailableanymore avatar nousernameavailableanymore commented on August 20, 2024 1

That worked. Thank you very much.

from obsidian-theme-mado-miniflow.

hydescarf avatar hydescarf commented on August 20, 2024

Do you mind sharing your snippets over here? I can try to test the snippets and see what I can help out with.

from obsidian-theme-mado-miniflow.

nousernameavailableanymore avatar nousernameavailableanymore commented on August 20, 2024

Sure.
I made some modifications to the color scheme and added some comments for me.
Most of the variables are defined in another .css file.

I also made everything bold, as I find it easier to read with Lexend Deca font.

Please be aware, I have no clue about css, I just copy trial and error 😅

body{
	/* --accent-h: 210; */
	/* --accent-s: 93%; */
	/* --accent-l: 62%; */
	--accent-h: 254;
	--accent-s: 80%;
	--accent-l: 68%;
	
	--titlebar-background:var(--background-secondary);
	--titlebar-background-focused:var(--background-secondary);
	
	--background-modifier-hover:var(--color-base-hover);
	
	--bold-weight:var(--font-bold);
	--italic-color:var(--text-muted);
	--code-normal:var(--text-muted);
	--blockquote-color:var(--color-muted);
	
	--background-primary:var(--color-base-00);
	--background-secondary:var(--color-base-20);
	--checklist-done-color:var(--color-base-50);
	
	--icon-m:20px;
	--icon-l:20px;	
	--divider-width: 4px;
	/* --callout-padding:17px 17px; */
	/* --callout-content-padding:0 12px 0 27px; */
	
	/* --embed-padding:13px 23px; */
	/* --list-indent:37px; */
	
	--header-height:43px;
	--tab-stacked-header-width:53px;
	
	
	/* custom */
	--border:0px solid var(--tab-outline-color);
	--button-radius:4px;
	--panel-radius:8px;
	--window-radius:23px;
	--button-padding-icon:7px;
	--button-padding-long:7px 15px;
	
	--background-fourth:var(--color-base-00-0);
	--background-fifth:var(--color-base-20-0);
	--panel-shadow:0 1px 3px var(--color-base-shadow);
	--panel-shadow-hover:0 3px 5px var(--color-base-shadow-hover);
	--window-shadow:0 0 9px var(--color-base-shadow-hover);
	--window-shadow-left:-4px 0 5px var(--color-base-shadow-hover);
	--window-shadow-right:4px 0 5px var(--color-base-shadow-hover);
	
	--sidebar-size-left:270px;
	--sidebar-size-right:270px;
	
	
	--color-strikethrough:var(--text-faint);
	--italic-color:var(--color-italic);
	--inline-code-color:var(--color-red);
	--indentation-guide-color: var(--sne-gold-trans3);
	--button-padding-long: 5px 1px !important; 
	
	
}
body.is-translucent{
	--background-primary:var(--color-base-00-trans);
	--background-secondary:var(--color-base-20-trans);
	--background-fourth:var(--color-base-00-0-trans);
}
body.toggle-tab-height{
	--header-height:35px;
}

.theme-dark,
.is-mobile.theme-dark,
.is-tablet.theme-dark{
	--color-base-00: #242618; /* Hintergrund Hauptfenster */
	--color-base-10: var(--sne-code); /* Code snippet Hintergrund */
	
	--color-base-05: var(--sne-rahmen); /* zb. Hintergrundfarbe gehoverter Tabs */
	--color-base-20: #1e2014; /* restlicher Hintergrund außenrum */
	
	
	--color-base-00-trans:hsla(215, 17%, 19%, 0.5); /*for transparency background*/
	--color-base-20-trans:hsla(214, 24%, 15%, 0.5);
	--color-base-00-0:hsla(212, 17%, 22%, 0.9); /* very white */
	--color-base-20-0:hsla(207, 10%, 10%, 0.1); /* hovered version for above */
	--color-base-00-0-trans:hsla(212, 17%, 22%, 0.5);
	--color-base-shadow:hsla(207, 10%, 10%, 0.1); /* shadow */
	--color-base-shadow-hover:hsla(212, 17%, 0%, 0.3); /* shadow hover*/
	--color-base-hover:var(--color-base-05); /* hover*/
	
	--color-base-30: var(--sne-rahmen); /* horizontale Linie --- */
	--color-base-35: #000000;
	--color-base-40: var(--sne-rahmen);  /* Rahmen um Modals, also zb. Settings Fenster */
	--color-base-50: #126d0e; /* Bullet Points und nicht ausgewählte Tabs Text */
	--color-base-70: #126d0e90;	/* text-muted, so ziemlich alles, was sonst nicht ausgewählt ist */
	--color-base-100: var(--sne-text); /* text-normal color */
  
	--color-accent: hsl(calc(var(--accent-h) - 0), calc(var(--accent-s) + 13%), calc(var(--accent-l) + 3%));
	--color-accent-1: #;
	--color-accent-2: hsl(calc(var(--accent-h) - 0), calc(var(--accent-s) + 7%), calc(var(--accent-l) + 2%));

	--color-red:hsla(365, 90%, 65%, 1); /* Code Snippet Text Farbe */
	--color-muted: #126d0e99;
	--color-italic:hsla(215, 33%, 60%, 1);
	
	--color-highlight: #000000; /* for highlight text color */
	--text-highlight-bg: #000000; /* for highlight text underline color */
	--text-on-accent: var(--sne-gold-trans);
}
.theme-dark:is(.THT-background,.THT-underline-light){
	--color-highlight: #000000;
}

/* Gap inbetween panes */
		.workspace-split.mod-vertical.mod-root,
		.workspace-split.mod-vertical.mod-root .workspace-split:not(.mod-horizontal){
			gap:14px;
		}



/* Abstand Note zu rechter Rand */
		body:not(.is-mobile) .workspace:not(.is-right-sidedock-open) .workspace-split.mod-vertical.mod-root {
				padding-right: 14px;
				height: auto;
		}
	
	
	
/* Abstand Note Inhalt zum Header */
		.ͼ1 .cm-scroller {
			margin-top: -2em;
		}
		
	
	
	
	.clickable-icon {
			color: var(--icon-color) !Important;
		}
	


/* 
---------------------------------- 
ALLES BOLD 
-------------------------------------------------- 
*/
		body *, .app-container * {
			font-weight: bold;
		}
		
		

		/* ---- Dataview inline Queries in Überschriften nicht bold ---- */
		.HyperMD-header > span,
		.HyperMD-header > .dataview-inline > span {
			font-weight: normal;
		}
		
		/* ---- Dataview inline Queries in Überschriften im Preview Popup nicht bold ---- */
		:is(h1, h2, h3, h4, h5, h6) > .dataview-inline-query,
		:is(h1, h2, h3, h4, h5, h6) > .dataview-inline-query > span {
			font-weight: normal !Important;
		}
		
		
		/* --------- Supercharged Links in Headings nicht fett ------- */		
		.HyperMD-header > .cm-header > .data-link-text > span {
			font-weight: normal !important;
		}
		
		
		/* -------------- Dataview Tables ----------------- */
		.markdown-source-view.mod-cm6 .dataview.table-view-table .table-view-tbody td {
			font-weight: bold;
		}

		/* ---------------- YAML nicht fett ---------------- */
		.markdown-source-view .cm-hmd-frontmatter, code.language-yaml {
			font-weight: normal !Important;
		}


	
		

from obsidian-theme-mado-miniflow.

hydescarf avatar hydescarf commented on August 20, 2024

I think the problem lies on the specific character .ͼ1 that caused the whole css to stop working on a new window. Removing that helps apply the other styles to the new window successfully.
The forum post you have linked also has that character in it, by the way.

As for why it does that:
https://discuss.codemirror.net/t/why-does-cm6-use-the-character-in-class-names/2821

These are generated anonymous classes. You shouldn’t be typing them, because targeting them with CSS rules isn’t going to work—they aren’t stable across page loads.

So, for the solution, I'm not sure what you want to style with it, but try and change the following code:

/* Abstand Note Inhalt zum Header */
		.ͼ1 .cm-scroller {
			margin-top: -2em;
		}

to

/* Abstand Note Inhalt zum Header */
		.cm-scroller {
			margin-top: -2em;
		}

from obsidian-theme-mado-miniflow.

nousernameavailableanymore avatar nousernameavailableanymore commented on August 20, 2024

Hmm, ok, that worked for the most part.
There were still some styles not applied, because they were in other CSS files, which also contained .ͼ1 character.

While it did not seem to make any difference in the example above, the following example does not seem to work for me without the .ͼ1 character.

This is for Live Preview

		.ͼ1 .cm-content {
		  width: 95% !Important;
		  max-width: 750px;
		  margin-left: auto;
		  margin-right: auto;
		}

from obsidian-theme-mado-miniflow.

hydescarf avatar hydescarf commented on August 20, 2024

Try to put !important on all of those 4 (and other elements that didn't work), that should work in most case.

.cm-content {
  width: 95%!important;
  max-width: 750px!important;
  margin-left: auto!important;
  margin-right: auto!important;
}

from obsidian-theme-mado-miniflow.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.