seanwcom / Red-Graphite-for-Obsidian

A light theme for Obsidian.md, based on Bear.app's Red Graphite theme.
The Unlicense
196 stars 22 forks source link

CSS: How to adjust linespacing and the font size in mermaid block? #30

Open xsinbh opened 1 year ago

xsinbh commented 1 year ago

Request

image I want to adjust the linespacing between title-h2 编译原理 and ---. I hope to narrow it down. And the font size in the mermaid block is a little bit small for me. I hope to enlarge it, just in mermaid block while doesn't affect other fonts. Could you tell me how to add the css code to fit these? (╯▽╰ )

tips: The Custom Code

I've added some code in the local theme.css file in my computer. They are referenced from other obsidian themes.

/* Mermaid */
div.mermaid {
  margin-left: 0 !important;
  text-align: center;
  resize: both;
  overflow: auto;
  margin-bottom: 2px;
  position: relative;
  max-height: 600px;
  max-width: 100%;
  padding: 16px;
  border: 2px solid var(--color-base-20);/*如果找不到屏幕背景颜色的变量,就用取色器*/
}

div.mermaid:hover {
  border-radius: 6px;
  border: 2px solid #dddddd;
}

div.mermaid::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  right: 0;
  bottom: 0;
}

.mermaid svg {
  max-width: 100%;
  height: auto;
}

body {
  --color-base-black: #030006;
  --color-base-blue: #1080b9;
  --color-base-brown: #be8015;
  --color-base-green: #22a168;
  --color-base-red: #ea3535;
  --color-base-purple: #9d3cc1;

  --h1-color: var(--color-base-black);
  --h2-color: var(--color-base-blue);
  --h3-color: var(--color-base-brown);
  --h4-color: var(--color-base-green);
  --h5-color: var(--color-base-red);
  --h6-color: var(--color-base-purple);
}