website/public/assets/css/elements/HTMLCodeDemoElement.css

70 lines
No EOL
1.7 KiB
CSS

code-demo {
--primer-color-base: 31, 31, 31;
--color-base: rgb(var(--primer-color-base));
--height: calc(var(--padding) * 2.5);
min-width: 700px;
border-radius: 12px;
background-color: var(--color-base);
}
/* # Header */
code-demo .header {
display: flex;
height: var(--height);
border-bottom: solid 1px rgba(255, 255, 255, .1);
}
code-demo .header button.inline {
border: solid 1px rgba(255, 255, 255, .1);
border-bottom: unset;
border-radius: unset;
box-shadow: unset;
}
code-demo .header button.inline:hover {
box-shadow: unset;
}
code-demo .header button:first-child {
margin-left: var(--height);
}
code-demo .header button.inline + button.inline {
border-left: unset;
}
/* # Body */
code-demo .body {
padding: var(--padding);
}
/* # Syntax highliting */
code-demo .mtk1 { color: #cccccc; }
code-demo .mtk2 { color: #1f1f1f; }
code-demo .mtk3 { color: #d4d4d4; }
code-demo .mtk4 { color: #000080; }
code-demo .mtk5 { color: #6a9955; }
code-demo .mtk6 { color: #569cd6; }
code-demo .mtk7 { color: #b5cea8; }
code-demo .mtk8 { color: #646695; }
code-demo .mtk9 { color: #d7ba7d; }
code-demo .mtk10 { color: #9cdcfe; }
code-demo .mtk11 { color: #f44747; }
code-demo .mtk12 { color: #ce9178; }
code-demo .mtk13 { color: #6796e6; }
code-demo .mtk14 { color: #808080; }
code-demo .mtk15 { color: #d16969; }
code-demo .mtk16 { color: #dcdcaa; }
code-demo .mtk17 { color: #4ec9b0; }
code-demo .mtk18 { color: #c586c0; }
code-demo .mtk19 { color: #4fc1ff; }
code-demo .mtk20 { color: #c8c8c8; }
code-demo .mtk21 { color: #cd9731; }
code-demo .mtk22 { color: #b267e6; }
code-demo .mtki { font-style: italic; }
code-demo .mtkb { font-weight: bold; }
code-demo .mtks { text-decoration: line-through; }