Hi, how are you? I’d like your help optimizing this Obsidian snippet. I was searching and optimizing, and I finally figured out how to make the titles centered and rainbow-colored. However, in view mode, the note looks fine, but in edit mode, it looks horrible, and the titles are too big.
Here’s a comparison photo:
editing view
reading view
I’d also like to add that I use the anuppuccin theme. Could this snippet cause a bug with the plugin?
I’m new to snipping and only got it right through trial and error.
This is the code for my snippet:
/* @ MARKDOWN A1: Headers */
.theme-dark {
--bg-green: rgba(32, 225, 180, 0.4);
--bg-blue: rgba(29, 174, 226, 0.4);
--bg-purple: rgba(165, 26, 234, 0.4);
--bg-magenta: rgba(231, 60, 126, 0.45);
--bg-orange: rgba(255, 132, 0, 0.43);
--fcolor-header: white;
}
.theme-light {
--bg-green: rgba(1, 224, 172, 0.5);
--bg-blue: rgba(9, 168, 225, 0.45);
--bg-purple: rgba(150, 8, 220, 0.4);
--bg-magenta: rgba(220, 10, 90, 0.45);
--bg-orange: rgba(255, 132, 0, 0.5);
--fcolor-header: rgb(0, 0, 0);
}
.cm-header, h1, h2, h3, h4, h5, h6 {
letter-spacing: 0.15px !important;
word-spacing: 1px;
text-align: center;
font-weight: 650;
color: var(--fcolor-header) !important;
}
/* Collapse arrow of headers */
.markdown-preview-view .heading-collapse-indicator {
margin-left: -15px;
padding: 0 6px;
}
/**/
.cm-s-obsidian .HyperMD-header {
text-align: center;
line-height: 1.5;
padding-bottom: 0.35em !important;
padding-top: 0.3em;
}
.HyperMD-header-1, .markdown-preview-section h1, .cm-header-1 {
font-size: 18.5px !important;
font-weight: 700;
margin: 30px 0px 3px 0px;
padding-top: 6px;
padding-bottom: 6px;
text-decoration: none;
border-radius: 0px;
font-family: 'Inter';
background: linear-gradient(
271deg,
transparent,
var(--bg-green),
var(--bg-blue),
var(--bg-purple),
var(--bg-magenta),
var(--bg-orange),
transparent
);
}
.HyperMD-header-2, .markdown-preview-section h2, .cm-header-2 { font-weight: 700;
text-decoration: none;
text-align: center;
font-size: 18.25px;
margin: 30px 0px 3px 0px;
padding-top: 6px;
padding-bottom: 6px;
border-radius: 0px;
padding-right: 5px;
padding-left: 5px;
font-family: 'Inter';
background: linear-gradient(
271deg,
transparent,
var(--bg-orange),
rgba(255, 140, 0, 0.51),
var(--bg-orange),
transparent
);
}
.HyperMD-header-3, .markdown-preview-section h3, .cm-header-3 { font-weight: 700;
text-decoration: none;
text-align: center;
font-size: 17.85px;
margin: 28px 0px 5px 0px;
padding-top: 6px;
padding-bottom: 6px;
border-radius: 0px;
padding-right: 5px;
padding-left: 5px;
font-family: 'Inter';
background:
radial-gradient(
circle,
var(--bg-magenta) 50%,
transparent 100%
);
}
.HyperMD-header-4, .markdown-preview-section h4, .cm-header-4 { font-weight: 700;
text-decoration: none;
text-align: center;
font-size: 17.5px;
margin: 28px 0px 5px 0px;
padding-top: 6px;
padding-bottom: 6px;
border-radius: 0px;
padding-right: 5px;
padding-left: 5px;
font-family: 'Inter';
background: radial-gradient(
circle,
var(--bg-purple) 50%,
transparent 100%
);
}
.HyperMD-header-5, .markdown-preview-section h5, .cm-header-5 { font-weight: 700;
text-decoration: none;
text-align: center;
font-size: 17px;
margin: 28px 0px 5px 0px;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 0px;
padding-right: 5px;
padding-left: 5px;
font-family: 'Inter';
background: radial-gradient(
circle,
var(--bg-blue) 50%,
transparent 100%
);
}
.HyperMD-header-6, .markdown-preview-section h6, .cm-header-6 { font-weight: 700;
text-decoration: none;
text-align: center;
font-size: 17px;
margin: 30px 0px 5px 0px;
padding-top: 4px;
padding-bottom: 4px;
border-radius: 0px;
padding-right: 5px;
padding-left: 5px;
font-family: 'Inter';
background: radial-gradient(
circle,
var(--bg-green) 50%,
transparent 100%
);
}
