markugen
Version:
Markdown to HTML/PDF static site generation tool
631 lines (618 loc) • 51.9 kB
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Styles</title>
<link rel="stylesheet" href="../markugen.css">
</head>
<body>
<h1 id="styles">Styles</h1>
<p>Markugen uses a complete set of CSS styles to make your generated HTML look
sleek and modern. All styles defined by Markugen (classes and IDs) are
prepended with <code>markugen-</code> to avoid conflicts with other styles. There are,
however, a few styles that do not follow this convention due to them being
generated and used by extensions not developed by Markugen. For example, all
styles defined for syntax highlighting of code blocks uses
<a target="_blank" href="https://highlightjs.org/">highlight.js</a> which prepends its styles with <code>hljs-</code>.</p>
<p>The following stylesheet shows all of the styles that will be provided to
your generated files:</p>
<div class="markugen-code">
<div class="markugen-code-toolbar">
<div class="markugen-code-title">markugen.template.css</div>
<div title="Copy to Clipboard" class="markugen-code-copy" onclick="markugen.copyToClipboard('copy-save-26', this)">
<svg height="24px" viewBox="0 -960 960 960" width="24px" fill="var(--markugen-color)">
<path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h167q11-35 43-57.5t70-22.5q40 0 71.5 22.5T594-840h166q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560h-80v120H280v-120h-80v560Zm280-560q17 0 28.5-11.5T520-800q0-17-11.5-28.5T480-840q-17 0-28.5 11.5T440-800q0 17 11.5 28.5T480-760Z"/>
</svg>
</div>
<div title="Save to markugen.template.css" class="markugen-code-save" onclick="markugen.saveToFile('copy-save-26', 'markugen.template.css', this)">
<svg height="24px" viewBox="0 -960 960 960" width="24px" fill="var(--markugen-color)">
<path d="M840-680v480q0 33-23.5 56.5T760-120H200q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h480l160 160Zm-80 34L646-760H200v560h560v-446ZM480-240q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35ZM240-560h360v-160H240v160Zm-40-86v446-560 114Z"/>
</svg>
</div>
</div>
<pre class="markugen-code-content"><code id="copy-save-26" class="hljs language-css"><span class="hljs-selector-tag">html</span><span class="hljs-selector-class">.light</span> {
<span class="hljs-comment">/* Syntax highlight styles */</span>
<span class="hljs-attr">--hljs-attr</span>: <span class="hljs-number">#0072b5</span>;
<span class="hljs-attr">--hljs-punctuation</span>: black;
<span class="hljs-attr">--hljs-string</span>: <span class="hljs-number">#b55a30</span>;
<span class="hljs-attr">--hljs-keyword</span>: blue;
<span class="hljs-attr">--hljs-number</span>: <span class="hljs-number">#8b8000</span>;
<span class="hljs-attr">--hljs-comment</span>: <span class="hljs-number">#00a170</span>;
<span class="hljs-comment">/* Markdown alert styles */</span>
<span class="hljs-attr">--color-border-default</span>: <span class="hljs-number">#d0d7de</span>;
<span class="hljs-attr">--color-accent-fg</span>: <span class="hljs-number">#0969da</span>;
<span class="hljs-attr">--color-accent-emphasis</span>: <span class="hljs-number">#0969da</span>;
<span class="hljs-attr">--color-accent-bg</span>: <span class="hljs-number">#0969da22</span>;
<span class="hljs-attr">--color-danger-fg</span>: <span class="hljs-number">#d1242f</span>;
<span class="hljs-attr">--color-danger-emphasis</span>: <span class="hljs-number">#cf222e</span>;
<span class="hljs-attr">--color-danger-bg</span>: <span class="hljs-number">#cf222e22</span>;
<span class="hljs-attr">--color-attention-fg</span>: <span class="hljs-number">#9a6700</span>;
<span class="hljs-attr">--color-attention-emphasis</span>: <span class="hljs-number">#9a6700</span>;
<span class="hljs-attr">--color-attention-bg</span>: <span class="hljs-number">#9a670022</span>;
<span class="hljs-attr">--color-done-fg</span>: <span class="hljs-number">#8250df</span>;
<span class="hljs-attr">--color-done-emphasis</span>: <span class="hljs-number">#8250df</span>;
<span class="hljs-attr">--color-done-bg</span>: <span class="hljs-number">#8250df22</span>;
<span class="hljs-attr">--color-success-fg</span>: <span class="hljs-number">#1a7f37</span>;
<span class="hljs-attr">--color-success-emphasis</span>: <span class="hljs-number">#1f883d</span>;
<span class="hljs-attr">--color-success-bg</span>: <span class="hljs-number">#1f883d22</span>;
<span class="hljs-comment">/* Markugen theme */</span>
{{
let css = '';
for (const <span class="hljs-selector-attr">[key, value]</span> of <span class="hljs-selector-tag">Object</span><span class="hljs-selector-class">.entries</span>(vars<span class="hljs-selector-class">.theme</span><span class="hljs-selector-class">.light</span>))
css += ` <span class="hljs-attr">--markugen-</span>${key}: ${value};\n`;
return css;
}}
}
<span class="hljs-selector-tag">html</span><span class="hljs-selector-class">.dark</span> {
<span class="hljs-comment">/* Syntax highlight styles */</span>
<span class="hljs-attr">--hljs-attr</span>: lightblue;
<span class="hljs-attr">--hljs-punctuation</span>: <span class="hljs-number">#b58900</span>;
<span class="hljs-attr">--hljs-string</span>: <span class="hljs-number">#e9897e</span>;
<span class="hljs-attr">--hljs-keyword</span>: <span class="hljs-number">#0096ff</span>;
<span class="hljs-attr">--hljs-number</span>: <span class="hljs-number">#fdac53</span>;
<span class="hljs-attr">--hljs-comment</span>: <span class="hljs-number">#00a170</span>;
<span class="hljs-comment">/* Markdown alert styles */</span>
<span class="hljs-attr">--color-border-default</span>: <span class="hljs-number">#30363d</span>;
<span class="hljs-attr">--color-accent-fg</span>: <span class="hljs-number">#58a6ff</span>;
<span class="hljs-attr">--color-accent-emphasis</span>: <span class="hljs-number">#1f6feb</span>;
<span class="hljs-attr">--color-accent-bg</span>: <span class="hljs-number">#1f6feb22</span>;
<span class="hljs-attr">--color-danger-fg</span>: <span class="hljs-number">#f85149</span>;
<span class="hljs-attr">--color-danger-emphasis</span>: <span class="hljs-number">#da3633</span>;
<span class="hljs-attr">--color-danger-bg</span>: <span class="hljs-number">#da363322</span>;
<span class="hljs-attr">--color-attention-fg</span>: <span class="hljs-number">#d29922</span>;
<span class="hljs-attr">--color-attention-emphasis</span>: <span class="hljs-number">#9e6a03</span>;
<span class="hljs-attr">--color-attention-bg</span>: <span class="hljs-number">#9e6a0322</span>;
<span class="hljs-attr">--color-done-fg</span>: <span class="hljs-number">#a371f7</span>;
<span class="hljs-attr">--color-done-emphasis</span>: <span class="hljs-number">#8957e5</span>;
<span class="hljs-attr">--color-done-bg</span>: <span class="hljs-number">#8957e522</span>;
<span class="hljs-attr">--color-success-fg</span>: <span class="hljs-number">#3fb950</span>;
<span class="hljs-attr">--color-success-emphasis</span>: <span class="hljs-number">#238636</span>;
<span class="hljs-attr">--color-success-bg</span>: <span class="hljs-number">#23863622</span>;
<span class="hljs-comment">/* Markugen theme */</span>
{{
let css = '';
for (const <span class="hljs-selector-attr">[key, value]</span> of <span class="hljs-selector-tag">Object</span><span class="hljs-selector-class">.entries</span>(vars<span class="hljs-selector-class">.theme</span><span class="hljs-selector-class">.dark</span>))
css += ` <span class="hljs-attr">--markugen-</span>${key}: ${value};\n`;
return css;
}}
}
<span class="hljs-selector-tag">html</span> {
<span class="hljs-attribute">background</span>: <span class="hljs-built_in">var</span>(--markugen-bgColor);
<span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--markugen-color);
<span class="hljs-attribute">scrollbar-color</span>: <span class="hljs-built_in">var</span>(--markugen-borderColor) <span class="hljs-built_in">var</span>(--markugen-bgColorSecondary);
<span class="hljs-attribute">font-family</span>: <span class="hljs-built_in">var</span>(--markugen-fontFamily);
<span class="hljs-attr">--markugen-boxShadowTop</span>: <span class="hljs-number">0px</span> -<span class="hljs-number">6px</span> <span class="hljs-number">16px</span> <span class="hljs-number">0px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0.2</span>);
<span class="hljs-attr">--markugen-boxShadowBottom</span>: <span class="hljs-number">0px</span> <span class="hljs-number">6px</span> <span class="hljs-number">16px</span> <span class="hljs-number">0px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0.2</span>);
}
<span class="hljs-selector-tag">body</span> {
<span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;
<span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;
}
<span class="hljs-selector-tag">a</span> {
<span class="hljs-attribute">text-decoration</span>: none;
}
<span class="hljs-selector-tag">a</span><span class="hljs-selector-pseudo">:link</span>, <span class="hljs-selector-tag">a</span><span class="hljs-selector-pseudo">:visited</span> {
<span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--markugen-accentColor);
}
<span class="hljs-selector-tag">h1</span>, <span class="hljs-selector-tag">h2</span> {
<span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">1px</span> solid <span class="hljs-built_in">var</span>(--markugen-color);
<span class="hljs-attribute">padding-bottom</span>: <span class="hljs-number">5px</span>;
}
<span class="hljs-selector-tag">h1</span>, <span class="hljs-selector-tag">h2</span>, <span class="hljs-selector-tag">h3</span>, <span class="hljs-selector-tag">h4</span>, <span class="hljs-selector-tag">h5</span>, <span class="hljs-selector-tag">h6</span>, <span class="hljs-selector-tag">th</span>,
<span class="hljs-selector-id">#markugen-navbar-title</span>, <span class="hljs-selector-class">.markugen-tab-label</span> {
<span class="hljs-attribute">font-family</span>: <span class="hljs-built_in">var</span>(--markugen-fontFamilyHeaders);
}
<span class="hljs-comment">/* Default table styles */</span>
<span class="hljs-selector-tag">table</span> {
<span class="hljs-attribute">border-collapse</span>: collapse;
<span class="hljs-attribute">text-align</span>: center;
<span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-built_in">var</span>(--markugen-borderColorSecondary);
}
<span class="hljs-selector-tag">th</span>, <span class="hljs-selector-tag">td</span> {
<span class="hljs-attribute">border-collapse</span>: collapse;
<span class="hljs-attribute">padding</span>: <span class="hljs-number">5px</span> <span class="hljs-number">10px</span>;
<span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-built_in">var</span>(--markugen-borderColorSecondary);
}
<span class="hljs-selector-tag">th</span> {
<span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">var</span>(--markugen-bgColorSecondary);
}
<span class="hljs-comment">/* Utility classes */</span>
<span class="hljs-selector-class">.markugen-center</span> {
<span class="hljs-attribute">max-width</span>: fit-content;
<span class="hljs-attribute">margin-left</span>: auto;
<span class="hljs-attribute">margin-right</span>: auto;
}
<span class="hljs-selector-class">.markugen-vheader</span> {
<span class="hljs-attribute">text-align</span>: left;
}
<span class="hljs-selector-class">.markugen-indent</span> {
<span class="hljs-attribute">position</span>: relative;
<span class="hljs-attribute">left</span>: <span class="hljs-number">50px</span>;
}
<span class="hljs-selector-class">.markugen-hidden</span> {
<span class="hljs-attribute">display</span>: none;
}
<span class="hljs-selector-class">.markugen-printable</span> {
<span class="hljs-attribute">display</span>: none;
}
<span class="hljs-comment">/* main content styles */</span>
<span class="hljs-selector-id">#markugen-body</span> {
<span class="hljs-attribute">min-height</span>: <span class="hljs-number">100%</span>;
<span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;
<span class="hljs-attribute">min-width</span>: <span class="hljs-number">100%</span>;
}
<span class="hljs-selector-id">#markugen-content-row</span> {
<span class="hljs-attribute">display</span>: flex;
<span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;
<span class="hljs-attribute">min-height</span>: <span class="hljs-built_in">calc</span>(<span class="hljs-number">100vh</span> - <span class="hljs-number">72px</span>);
<span class="hljs-attribute">margin-top</span>: <span class="hljs-number">41px</span>;
}
<span class="hljs-selector-id">#markugen-content-left</span>, <span class="hljs-selector-id">#markugen-content-right</span> {
<span class="hljs-attribute">flex</span>: <span class="hljs-number">1</span>;
<span class="hljs-attribute">width</span>: <span class="hljs-number">250px</span>;
<span class="hljs-attribute">min-width</span>: <span class="hljs-number">250px</span>;
<span class="hljs-attribute">max-width</span>: <span class="hljs-number">250px</span>;
<span class="hljs-attribute">min-height</span>: <span class="hljs-built_in">calc</span>(<span class="hljs-number">100vh</span> - <span class="hljs-number">72px</span>);
<span class="hljs-attribute">max-height</span>: <span class="hljs-built_in">calc</span>(<span class="hljs-number">100vh</span> - <span class="hljs-number">72px</span>);
}
<span class="hljs-selector-id">#markugen-content</span> {
<span class="hljs-attribute">padding-left</span>: <span class="hljs-number">25px</span>;
<span class="hljs-attribute">padding-right</span>: <span class="hljs-number">25px</span>;
<span class="hljs-attribute">padding-bottom</span>: <span class="hljs-number">30px</span>;
<span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
}
<span class="hljs-selector-id">#markugen-content</span> <span class="hljs-selector-tag">img</span> {
<span class="hljs-attribute">object-fit</span>: contain;
<span class="hljs-attribute">max-width</span>: <span class="hljs-number">100%</span>;
<span class="hljs-attribute">border-radius</span>: <span class="hljs-number">10px</span>;
<span class="hljs-attribute">margin-top</span>: <span class="hljs-number">10px</span>;
<span class="hljs-attribute">margin-bottom</span>: <span class="hljs-number">10px</span>;
}
<span class="hljs-selector-id">#markugen-header</span> {
<span class="hljs-attribute">font</span>: bold <span class="hljs-number">2em</span> <span class="hljs-built_in">var</span>(--markugen-fontFamilyHeaders);
<span class="hljs-attribute">display</span>: flex;
<span class="hljs-attribute">align-items</span>: center;
<span class="hljs-attribute">justify-content</span>: center;
}
<span class="hljs-selector-id">#markugen-footer</span> {
<span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">var</span>(--markugen-bgColorSecondary);
<span class="hljs-attribute">border-top</span>: <span class="hljs-number">1px</span> solid <span class="hljs-built_in">var</span>(--markugen-borderColor);
<span class="hljs-attribute">box-shadow</span>: <span class="hljs-built_in">var</span>(--markugen-boxShadowTop);
<span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
<span class="hljs-attribute">max-height</span>: <span class="hljs-number">30px</span>;
<span class="hljs-attribute">height</span>: <span class="hljs-number">30px</span>;
<span class="hljs-attribute">display</span>: flex;
<span class="hljs-attribute">align-items</span>: center;
<span class="hljs-attribute">justify-content</span>: center;
<span class="hljs-attribute">font-size</span>: <span class="hljs-number">12px</span>;
<span class="hljs-attribute">position</span>: fixed;
<span class="hljs-attribute">bottom</span>: <span class="hljs-number">0px</span>;
<span class="hljs-attribute">left</span>: <span class="hljs-number">0px</span>;
}
<span class="hljs-comment">/* navbar styles */</span>
<span class="hljs-selector-id">#markugen-navbar</span> {
<span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">var</span>(--markugen-bgColorSecondary);
<span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--markugen-color);
<span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">1px</span> solid <span class="hljs-built_in">var</span>(--markugen-borderColor);
<span class="hljs-attribute">position</span>: fixed;
<span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>;
<span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
<span class="hljs-attribute">z-index</span>: <span class="hljs-number">900</span>;
<span class="hljs-attribute">height</span>: <span class="hljs-number">40px</span>;
<span class="hljs-attribute">box-shadow</span>: <span class="hljs-built_in">var</span>(--markugen-boxShadowBottom);
}
<span class="hljs-selector-id">#markugen-navbar-content</span> {
<span class="hljs-attribute">margin</span>: <span class="hljs-number">5px</span> <span class="hljs-number">15px</span>;
<span class="hljs-attribute">height</span>: <span class="hljs-number">30px</span>;
<span class="hljs-attribute">display</span>: flex;
}
<span class="hljs-selector-id">#markugen-navbar-menu</span>, <span class="hljs-selector-id">#markugen-navbar-toc</span> {
<span class="hljs-attribute">cursor</span>: pointer;
<span class="hljs-attribute">height</span>: <span class="hljs-number">30px</span>;
<span class="hljs-attribute">flex</span>: <span class="hljs-number">1</span>;
}
<span class="hljs-selector-id">#markugen-navbar-title</span> {
<span class="hljs-attribute">height</span>: <span class="hljs-number">30px</span>;
<span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
<span class="hljs-attribute">font-size</span>: <span class="hljs-number">1.5em</span>;
<span class="hljs-attribute">padding-left</span>: <span class="hljs-number">15px</span>;
<span class="hljs-attribute">padding-right</span>: <span class="hljs-number">15px</span>;
<span class="hljs-attribute">white-space</span>: nowrap;
<span class="hljs-attribute">overflow</span>: hidden;
<span class="hljs-attribute">text-overflow</span>: ellipsis;
}
<span class="hljs-selector-id">#markugen-navbar-title</span> > <span class="hljs-selector-tag">a</span>, <span class="hljs-selector-id">#markugen-navbar-title</span> > <span class="hljs-selector-tag">a</span><span class="hljs-selector-pseudo">:visited</span> {
<span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--markugen-color);
}
<span class="hljs-selector-id">#markugen-navbar-title</span> > <span class="hljs-selector-tag">a</span><span class="hljs-selector-pseudo">:hover</span> {
<span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--markugen-accentColor);
}
<span class="hljs-selector-id">#markugen-navbar-toolbar</span> {
<span class="hljs-attribute">height</span>: <span class="hljs-number">30px</span>;
<span class="hljs-attribute">flex</span>: <span class="hljs-number">1</span>;
<span class="hljs-attribute">display</span>: flex;
<span class="hljs-attribute">gap</span>: <span class="hljs-number">10px</span>;
}
<span class="hljs-selector-id">#markugen-theme-toggle</span> {
<span class="hljs-attribute">cursor</span>: pointer;
<span class="hljs-attribute">padding-top</span>: <span class="hljs-number">5px</span>;
}
<span class="hljs-comment">/* sitemap styles */</span>
<span class="hljs-selector-class">.markugen-sitemap-entry</span> {
<span class="hljs-attribute">padding</span>: <span class="hljs-number">5px</span> <span class="hljs-number">10px</span>;
<span class="hljs-attribute">border-right</span>: <span class="hljs-number">4px</span> solid transparent;
<span class="hljs-attribute">display</span>: flex;
}
<span class="hljs-selector-class">.markugen-sitemap-entry</span><span class="hljs-selector-class">.active</span> {
<span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--markugen-accentColor);
<span class="hljs-attribute">border-right</span>: <span class="hljs-number">4px</span> solid <span class="hljs-built_in">var</span>(--markugen-accentColor);
}
<span class="hljs-selector-class">.markugen-sitemap-entry</span><span class="hljs-selector-class">.link</span> {
<span class="hljs-attribute">cursor</span>: pointer;
}
<span class="hljs-selector-class">.markugen-sitemap-entry</span><span class="hljs-selector-class">.link</span><span class="hljs-selector-pseudo">:hover</span> {
<span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">var</span>(--markugen-accentColor);
<span class="hljs-attribute">transition</span>: all <span class="hljs-number">1s</span>;
}
<span class="hljs-selector-class">.markugen-sitemap-title</span> {
<span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
}
<span class="hljs-selector-class">.markugen-sitemap-expander</span> {
<span class="hljs-attribute">flex</span>: <span class="hljs-number">1</span>;
<span class="hljs-attribute">cursor</span>: pointer;
}
<span class="hljs-selector-id">#markugen-sitemap-menu</span> {
<span class="hljs-attribute">border-right</span>: <span class="hljs-number">1px</span> solid <span class="hljs-built_in">var</span>(--markugen-borderColor);
<span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">var</span>(--markugen-bgColorSecondary);
<span class="hljs-attribute">position</span>: fixed;
<span class="hljs-attribute">top</span>: <span class="hljs-number">41px</span>;
<span class="hljs-attribute">left</span>: <span class="hljs-number">0px</span>;
<span class="hljs-attribute">min-height</span>: <span class="hljs-built_in">calc</span>(<span class="hljs-number">100vh</span> - <span class="hljs-number">92px</span>);
<span class="hljs-attribute">max-height</span>: <span class="hljs-built_in">calc</span>(<span class="hljs-number">100vh</span> - <span class="hljs-number">92px</span>);
<span class="hljs-attribute">overflow-y</span>: auto;
<span class="hljs-attribute">padding-top</span>: <span class="hljs-number">10px</span>;
<span class="hljs-attribute">padding-bottom</span>: <span class="hljs-number">10px</span>;
<span class="hljs-attribute">min-width</span>: <span class="hljs-number">250px</span>;
<span class="hljs-attribute">max-width</span>: <span class="hljs-number">250px</span>;
}
<span class="hljs-comment">/* table of contents styles */</span>
<span class="hljs-selector-id">#markugen-toc</span> {
<span class="hljs-attribute">border-left</span>: <span class="hljs-number">1px</span> solid <span class="hljs-built_in">var</span>(--markugen-borderColor);
<span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">var</span>(--markugen-bgColorSecondary);
<span class="hljs-attribute">position</span>: fixed;
<span class="hljs-attribute">top</span>: <span class="hljs-number">41px</span>;
<span class="hljs-attribute">right</span>: <span class="hljs-number">0px</span>;
<span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;
<span class="hljs-attribute">min-height</span>: <span class="hljs-built_in">calc</span>(<span class="hljs-number">100vh</span> - <span class="hljs-number">72px</span>);
<span class="hljs-attribute">max-height</span>: <span class="hljs-built_in">calc</span>(<span class="hljs-number">100vh</span> - <span class="hljs-number">72px</span>);
<span class="hljs-attribute">min-width</span>: <span class="hljs-number">250px</span>;
<span class="hljs-attribute">max-width</span>: <span class="hljs-number">250px</span>;
}
<span class="hljs-selector-id">#markugen-toc-content</span> {
<span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;
<span class="hljs-attribute">max-height</span>: <span class="hljs-built_in">calc</span>(<span class="hljs-number">100vh</span> - <span class="hljs-number">144px</span>);
<span class="hljs-attribute">overflow-y</span>: auto;
<span class="hljs-attribute">padding-top</span>: <span class="hljs-number">5px</span>;
<span class="hljs-attribute">padding-bottom</span>: <span class="hljs-number">5px</span>;
}
<span class="hljs-selector-id">#markugen-toc-title</span> {
<span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">1px</span> solid <span class="hljs-built_in">var</span>(--markugen-borderColor);
<span class="hljs-attribute">min-height</span>: <span class="hljs-number">30px</span>;
<span class="hljs-attribute">max-height</span>: <span class="hljs-number">30px</span>;
<span class="hljs-attribute">display</span>: flex;
<span class="hljs-attribute">align-items</span>: center;
<span class="hljs-attribute">justify-content</span>: center;
}
<span class="hljs-selector-id">#markugen-toc-back</span> {
<span class="hljs-attribute">border-top</span>: <span class="hljs-number">1px</span> solid <span class="hljs-built_in">var</span>(--markugen-borderColor);
<span class="hljs-attribute">min-height</span>: <span class="hljs-number">30px</span>;
<span class="hljs-attribute">max-height</span>: <span class="hljs-number">30px</span>;
<span class="hljs-attribute">display</span>: flex;
<span class="hljs-attribute">align-items</span>: center;
<span class="hljs-attribute">justify-content</span>: center;
}
<span class="hljs-selector-class">.markugen-toc-link</span> {
<span class="hljs-attribute">padding</span>: <span class="hljs-number">5px</span> <span class="hljs-number">10px</span>;
<span class="hljs-attribute">border-left</span>: <span class="hljs-number">4px</span> solid transparent;
<span class="hljs-attribute">cursor</span>: pointer;
}
<span class="hljs-selector-class">.markugen-toc-link</span><span class="hljs-selector-pseudo">:hover</span> {
<span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">var</span>(--markugen-accentColor);
<span class="hljs-attribute">transition</span>: all <span class="hljs-number">1s</span>;
}
<span class="hljs-selector-class">.markugen-toc-link</span><span class="hljs-selector-class">.active</span> {
<span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--markugen-accentColor);
<span class="hljs-attribute">border-left</span>: <span class="hljs-number">4px</span> solid <span class="hljs-built_in">var</span>(--markugen-accentColor);
}
<span class="hljs-selector-class">.markugen-toc-link</span><span class="hljs-selector-class">.active</span><span class="hljs-selector-pseudo">:hover</span> {
<span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--markugen-color);
}
<span class="hljs-comment">/* Tab styles */</span>
<span class="hljs-selector-class">.markugen-tabs-container</span> {
<span class="hljs-attribute">margin</span>: <span class="hljs-number">10px</span> <span class="hljs-number">0px</span>;
}
<span class="hljs-selector-class">.markugen-tabs</span> {
<span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">var</span>(--markugen-bgColorSecondary);
<span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-built_in">var</span>(--markugen-borderColorSecondary);
<span class="hljs-attribute">border-bottom-left-radius</span>: <span class="hljs-number">10px</span>;
<span class="hljs-attribute">border-bottom-right-radius</span>: <span class="hljs-number">10px</span>;
<span class="hljs-attribute">border-top-right-radius</span>: <span class="hljs-number">10px</span>;
<span class="hljs-attribute">box-shadow</span>: <span class="hljs-built_in">var</span>(--markugen-boxShadowBottom);
<span class="hljs-attribute">display</span>: grid;
<span class="hljs-attribute">margin-top</span>: -<span class="hljs-number">1px</span>;
}
<span class="hljs-selector-class">.markugen-tab</span> {
<span class="hljs-attribute">grid-column</span>: <span class="hljs-number">1</span>;
<span class="hljs-attribute">grid-row</span>: <span class="hljs-number">1</span>;
<span class="hljs-attribute">padding</span>: <span class="hljs-number">10px</span>;
}
<span class="hljs-selector-class">.markugen-tabs-labels</span> {
<span class="hljs-attribute">display</span>: flex;
}
<span class="hljs-selector-class">.markugen-tab-label</span> {
<span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">var</span>(--markugen-bgColorSecondary);
<span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-built_in">var</span>(--markugen-borderColorSecondary);
<span class="hljs-attribute">border-top-right-radius</span>: <span class="hljs-number">5px</span>;
<span class="hljs-attribute">border-top-left-radius</span>: <span class="hljs-number">5px</span>;
<span class="hljs-attribute">padding</span>: <span class="hljs-number">5px</span> <span class="hljs-number">10px</span>;
<span class="hljs-attribute">cursor</span>: pointer;
<span class="hljs-attribute">transition</span>: all <span class="hljs-number">1s</span>;
}
<span class="hljs-selector-class">.markugen-tab-label</span><span class="hljs-selector-class">.active</span> {
<span class="hljs-attribute">cursor</span>: auto;
<span class="hljs-attribute">border-bottom</span>: none;
}
<span class="hljs-selector-class">.markugen-tab-label</span><span class="hljs-selector-pseudo">:not</span>(<span class="hljs-selector-class">.active</span>)<span class="hljs-selector-pseudo">:hover</span> {
<span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">var</span>(--markugen-accentColor);
}
<span class="hljs-comment">/* Next and Previous styles */</span>
<span class="hljs-selector-id">#markugen-prev-next-container</span> {
<span class="hljs-attribute">margin-top</span>: <span class="hljs-number">25px</span>;
<span class="hljs-attribute">margin-bottom</span>: <span class="hljs-number">25px</span>;
<span class="hljs-attribute">display</span>: flex;
<span class="hljs-attribute">gap</span>: <span class="hljs-number">25px</span>;
}
<span class="hljs-selector-class">.markugen-prev-next</span> {
<span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-built_in">var</span>(--markugen-borderColor);
<span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">var</span>(--markugen-bgColorSecondary);
<span class="hljs-attribute">border-radius</span>: <span class="hljs-number">10px</span>;
<span class="hljs-attribute">box-shadow</span>: <span class="hljs-built_in">var</span>(--markugen-boxShadowBottom);
<span class="hljs-attribute">padding</span>: <span class="hljs-number">10px</span>;
<span class="hljs-attribute">flex</span>: <span class="hljs-number">1</span>;
}
<span class="hljs-selector-class">.markugen-prev-next</span><span class="hljs-selector-pseudo">:hover</span> {
<span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--markugen-color);
<span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">var</span>(--markugen-accentColor);
<span class="hljs-attribute">cursor</span>: pointer;
<span class="hljs-attribute">transition</span>: all <span class="hljs-number">1s</span>;
}
<span class="hljs-selector-class">.markugen-prev-next</span><span class="hljs-selector-pseudo">:hover</span> <span class="hljs-selector-tag">a</span> {
<span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--markugen-color);
}
<span class="hljs-selector-class">.markugen-prev-next-link</span> {
<span class="hljs-attribute">font-size</span>: <span class="hljs-number">1.2em</span>;
<span class="hljs-attribute">padding-left</span>: <span class="hljs-number">5px</span>;
<span class="hljs-attribute">padding-right</span>: <span class="hljs-number">5px</span>;
}
<span class="hljs-selector-class">.markugen-prev-next-title</span> {
<span class="hljs-attribute">display</span>: flex;
<span class="hljs-attribute">max-width</span>: fit-content;
<span class="hljs-attribute">gap</span>: <span class="hljs-number">5px</span>;
<span class="hljs-attribute">padding-bottom</span>: <span class="hljs-number">5px</span>;
}
<span class="hljs-selector-class">.markugen-prev-next-title</span><span class="hljs-selector-class">.next</span> {
<span class="hljs-attribute">margin-left</span>: auto;
<span class="hljs-attribute">margin-right</span>: <span class="hljs-number">0px</span>;
}
<span class="hljs-selector-class">.markugen-prev-next</span><span class="hljs-selector-class">.next</span> {
<span class="hljs-attribute">text-align</span>: right;
}
<span class="hljs-comment">/* Code Blocks */</span>
<span class="hljs-selector-class">.markugen-code</span> {
<span class="hljs-attribute">margin</span>: <span class="hljs-number">10px</span> <span class="hljs-number">0px</span>;
<span class="hljs-attribute">max-width</span>: fit-content;
<span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">var</span>(--markugen-bgColorSecondary);
<span class="hljs-attribute">border-radius</span>: <span class="hljs-number">10px</span>;
<span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-built_in">var</span>(--markugen-borderColor);
<span class="hljs-attribute">box-shadow</span>: <span class="hljs-built_in">var</span>(--markugen-boxShadowBottom);
}
<span class="hljs-selector-class">.markugen-code-toolbar</span> {
<span class="hljs-attribute">display</span>: flex;
<span class="hljs-attribute">gap</span>: <span class="hljs-number">10px</span>;
<span class="hljs-attribute">padding-top</span>: <span class="hljs-number">5px</span>;
<span class="hljs-attribute">padding-left</span>: <span class="hljs-number">10px</span>;
<span class="hljs-attribute">padding-right</span>: <span class="hljs-number">10px</span>;
<span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">1px</span> solid <span class="hljs-built_in">var</span>(--markugen-borderColor);
<span class="hljs-attribute">min-height</span>: <span class="hljs-number">30px</span>;
<span class="hljs-attribute">max-height</span>: <span class="hljs-number">30px</span>;
}
<span class="hljs-selector-class">.markugen-code-title</span> {
<span class="hljs-attribute">flex</span>: <span class="hljs-number">1</span>;
}
<span class="hljs-selector-class">.markugen-code-copy</span>, <span class="hljs-selector-class">.markugen-code-save</span> {
<span class="hljs-attribute">cursor</span>: pointer;
}
<span class="hljs-selector-class">.markugen-code-content</span> {
<span class="hljs-attribute">padding</span>: <span class="hljs-number">10px</span>;
<span class="hljs-attribute">margin</span>: <span class="hljs-number">0px</span>;
<span class="hljs-attribute">white-space</span>: pre-wrap;
<span class="hljs-attribute">max-height</span>: <span class="hljs-built_in">var</span>(--markugen-codeMaxHeight);
<span class="hljs-attribute">width</span>: fit-content;
<span class="hljs-attribute">max-width</span>: <span class="hljs-number">100%</span>;
<span class="hljs-attribute">overflow</span>: auto;
}
<span class="hljs-selector-pseudo">:not</span>(pre) > <span class="hljs-selector-tag">code</span> {
<span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">var</span>(--markugen-bgColorSecondary);
<span class="hljs-attribute">border-radius</span>: <span class="hljs-number">0.33em</span>;
<span class="hljs-attribute">padding-left</span>: <span class="hljs-number">0.33em</span>;
<span class="hljs-attribute">padding-right</span>: <span class="hljs-number">0.33em</span>;
}
<span class="hljs-comment">/* Syntax highlighter */</span>
<span class="hljs-selector-class">.hljs-attr</span>, <span class="hljs-selector-class">.hljs-attribute</span> {
<span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--hljs-attr);
}
<span class="hljs-selector-class">.hljs-punctuation</span> {
<span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--hljs-punctuation);
}
<span class="hljs-selector-class">.hljs-string</span>, <span class="hljs-selector-class">.hljs-selector-class</span>, <span class="hljs-selector-class">.hljs-selector-pseudo</span> {
<span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--hljs-string);
}
<span class="hljs-selector-class">.hljs-keyword</span>, <span class="hljs-selector-class">.hljs-literal</span>, <span class="hljs-selector-class">.hljs-built_in</span>,
<span class="hljs-selector-class">.hljs-section</span>, <span class="hljs-selector-class">.hljs-selector-tag</span>, <span class="hljs-selector-class">.hljs-meta</span> {
<span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--hljs-keyword);
}
<span class="hljs-selector-class">.hljs-link</span>, <span class="hljs-selector-class">.hljs-selector-id</span> {
<span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--markugen-accentColor);
}
<span class="hljs-selector-class">.hljs-number</span>, <span class="hljs-selector-class">.hljs-title</span> {
<span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--hljs-number);
}
<span class="hljs-selector-class">.hljs-comment</span>, <span class="hljs-selector-class">.hljs-quote</span> {
<span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--hljs-comment);
}
<span class="hljs-selector-class">.hljs-emphasis</span> {
<span class="hljs-attribute">font-style</span>: italic;
}
<span class="hljs-selector-class">.hljs-strong</span> {
<span class="hljs-attribute">font-weight</span>: bold;
}
<span class="hljs-comment">/* Markdown alerts */</span>
<span class="hljs-selector-class">.markdown-alert</span> {
<span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-built_in">var</span>(--borderColor-default, <span class="hljs-built_in">var</span>(--color-border-default));
<span class="hljs-attribute">color</span>: inherit;
<span class="hljs-attribute">border-radius</span>: <span class="hljs-number">10px</span>;
<span class="hljs-attribute">padding</span>: <span class="hljs-number">0px</span> <span class="hljs-number">10px</span> <span class="hljs-number">10px</span> <span class="hljs-number">10px</span>;
<span class="hljs-attribute">font-size</span>: <span class="hljs-number">1.1em</span>;
<span class="hljs-attribute">margin-top</span>: <span class="hljs-number">10px</span>;
<span class="hljs-attribute">margin-bottom</span>: <span class="hljs-number">10px</span>;
<span class="hljs-attribute">box-shadow</span>: <span class="hljs-built_in">var</span>(--markugen-boxShadowBottom);
}
<span class="hljs-selector-class">.markdown-alert</span>><span class="hljs-selector-pseudo">:last-child</span> {
<span class="hljs-attribute">margin-bottom</span>: <span class="hljs-number">0</span><span class="hljs-meta">!important</span>
}
<span class="hljs-selector-class">.markdown-alert</span> <span class="hljs-selector-class">.markdown-alert-title</span> {
<span class="hljs-attribute">align-items</span>: center;
<span class="hljs-attribute">display</span>: flex;
<span class="hljs-attribute">line-height</span>: <span class="hljs-number">1</span>;
<span class="hljs-attribute">text-transform</span>: capitalize;
}
<span class="hljs-selector-class">.markdown-alert</span> <span class="hljs-selector-class">.markdown-alert-title</span> <span class="hljs-selector-tag">svg</span><span class="hljs-selector-class">.octicon</span> {
<span class="hljs-attribute">margin-right</span>: <span class="hljs-number">8px</span><span class="hljs-meta">!important</span>;
<span class="hljs-attribute">margin-right</span>: <span class="hljs-built_in">var</span>(--base-size-<span class="hljs-number">8</span>,<span class="hljs-number">8px</span>) <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">fill</span>: currentColor;
}
<span class="hljs-selector-class">.markdown-alert</span><span class="hljs-selector-class">.markdown-alert-note</span> {
<span class="hljs-attribute">border-color</span>: <span class="hljs-built_in">var</span>(--borderColor-accent-emphasis,<span class="hljs-built_in">var</span>(--color-accent-emphasis));
<span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">var</span>(--color-accent-bg);
}
<span class="hljs-selector-class">.markdown-alert</span><span class="hljs-selector-class">.markdown-alert-note</span> <span class="hljs-selector-class">.markdown-alert-title</span> {
<span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--color-accent-fg);
<span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--fgColor-accent,<span class="hljs-built_in">var</span>(--color-accent-fg))
}
<span class="hljs-selector-class">.markdown-alert</span><span class="hljs-selector-class">.markdown-alert-tip</span> {
<span class="hljs-attribute">border-color</span>: <span class="hljs-built_in">var</span>(--borderColor-success-emphasis,<span class="hljs-built_in">var</span>(--color-success-emphasis));
<span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">var</span>(--color-success-bg);
}
<span class="hljs-selector-class">.markdown-alert</span><span class="hljs-selector-class">.markdown-alert-tip</span> <span class="hljs-selector-class">.markdown-alert-title</span> {
<span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--color-success-fg);
<span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--fgColor-success,<span class="hljs-built_in">var</span>(--color-success-fg))
}
<span class="hljs-selector-class">.markdown-alert</span><span class="hljs-selector-class">.markdown-alert-important</span> {
<span class="hljs-attribute">border-color</span>: <span class="hljs-built_in">var</span>(--borderColor-done-emphasis,<span class="hljs-built_in">var</span>(--color-done-emphasis));
<span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">var</span>(--color-done-bg);
}
<span class="hljs-selector-class">.markdown-alert</span><span class="hljs-selector-class">.markdown-alert-important</span> <span class="hljs-selector-class">.markdown-alert-title</span> {
<span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--color-done-fg);
<span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--fgColor-done,<span class="hljs-built_in">var</span>(--color-done-fg))
}
<span class="hljs-selector-class">.markdown-alert</span><span class="hljs-selector-class">.markdown-alert-warning</span> {
<span class="hljs-attribute">border-color</span>: <span class="hljs-built_in">var</span>(--borderColor-attention-emphasis,<span class="hljs-built_in">var</span>(--color-attention-emphasis));
<span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">var</span>(--color-attention-bg);
}
<span class="hljs-selector-class">.markdown-alert</span><span class="hljs-selector-class">.markdown-alert-warning</span> <span class="hljs-selector-class">.markdown-alert-title</span> {
<span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--color-attention-fg);
<span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--fgColor-attention,<span class="hljs-built_in">var</span>(--color-attention-fg))
}
<span class="hljs-selector-class">.markdown-alert</span><span class="hljs-selector-class">.markdown-alert-caution</span> {
<span class="hljs-attribute">border-color</span>: <span class="hljs-built_in">var</span>(--borderColor-danger-emphasis,<span class="hljs-built_in">var</span>(--color-danger-emphasis));
<span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">var</span>(--color-danger-bg);
}
<span class="hljs-selector-class">.markdown-alert</span><span class="hljs-selector-class">.markdown-alert-caution</span> <span class="hljs-selector-class">.markdown-alert-title</span> {
<span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--color-danger-fg);
<span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--fgColor-danger,<span class="hljs-built_in">var</span>(--color-danger-fg))
}
<span class="hljs-comment">/* styles when printing */</span>
<span class="hljs-keyword">@media</span> print {
<span class="hljs-selector-tag">body</span> {
<span class="hljs-attribute">color</span>: black <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">background-color</span>: white <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">box-shadow</span>: none <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">border-color</span>: black <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-tag">h1</span>, <span class="hljs-selector-tag">h2</span> {
<span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">1px</span> solid black <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-id">#markugen-content-row</span> {
<span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span> <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">min-height</span>: <span class="hljs-number">100%</span> <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">margin</span>: <span class="hljs-number">0px</span> <span class="hljs-number">0px</span> <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-id">#markugen-content</span> {
<span class="hljs-attribute">padding</span>: <span class="hljs-number">0px</span> <span class="hljs-number">0px</span> <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">margin</span>: <span class="hljs-number">0px</span> <span class="hljs-number">0px</span> <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">max-width</span>: <span class="hljs-number">100%</span> <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">color</span>: black <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">background-color</span>: white <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-id">#markugen-footer</span> {
<span class="hljs-attribute">position</span>: static <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">color</span>: black <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">background-color</span>: white <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">box-shadow</span>: none <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">border-top</span>: <span class="hljs-number">1px</span> solid black <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-tag">table</span> {
<span class="hljs-attribute">border-color</span>: black <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">color</span>: black <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-tag">th</span>, <span class="hljs-selector-tag">td</span> {
<span class="hljs-attribute">border-color</span>: black <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-tag">th</span> {
<span class="hljs-attribute">background-color</span>: lightgrey <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-class">.markugen-tab-label</span> {
<span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid black <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">border-top-right-radius</span>: <span class="hljs-number">10px</span> <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">border-top-left-radius</span>: <span class="hljs-number">10px</span> <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-class">.markugen-tab</span> {
<span class="hljs-attribute">border-left</span>: <span class="hljs-number">1px</span> solid black <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">border-right</span>: <span class="hljs-number">1px</span> solid black <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">1px</span> solid black <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">border-bottom-right-radius</span>: <span class="hljs-number">10px</span> <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">border-bottom-left-radius</span>: <span class="hljs-number">10px</span> <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-class">.markdown-alert</span> {
<span class="hljs-attribute">box-shado