mirror of
https://codeberg.org/vegvisir/website.git
synced 2025-09-13 16:33:42 +02:00
109 lines
No EOL
2.5 KiB
CSS
109 lines
No EOL
2.5 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;
|
|
}
|
|
|
|
/* ## Active */
|
|
|
|
code-demo .header button.active {
|
|
border-top: solid 4px var(--color-accent);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* ## Languages */
|
|
|
|
code-demo .header button[data-lang="js"] {
|
|
--primer-color-accent: 241, 224, 90;
|
|
--color-accent: rgb(var(--primer-color-accent));
|
|
}
|
|
|
|
code-demo .header button[data-lang="css"] {
|
|
--primer-color-accent: 81, 154, 186;
|
|
--color-accent: rgb(var(--primer-color-accent));
|
|
}
|
|
|
|
code-demo .header button[data-lang="php"] {
|
|
--primer-color-accent: 160, 116, 196;
|
|
--color-accent: rgb(var(--primer-color-accent));
|
|
}
|
|
|
|
code-demo .header button[data-lang="html"] {
|
|
--primer-color-accent: 221, 120, 49;
|
|
--color-accent: rgb(var(--primer-color-accent));
|
|
}
|
|
|
|
/* # Body */
|
|
|
|
code-demo .body {
|
|
padding: var(--padding);
|
|
}
|
|
|
|
/* ## Tabs */
|
|
|
|
code-demo .body [data-file] {
|
|
display: none;
|
|
}
|
|
|
|
code-demo .body [data-file].active {
|
|
display: initial;
|
|
}
|
|
|
|
/* # 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; } |