159 lines
2.8 KiB
SCSS
159 lines
2.8 KiB
SCSS
.code-block {
|
|
white-space: pre-wrap;
|
|
background-color: var(--color-code-bg);
|
|
margin: 0;
|
|
padding: 0.5rem;
|
|
margin-block: 0.25rem;
|
|
border-radius: 4px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
&:hover {
|
|
.code-overlay {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&.no-word-wrap {
|
|
white-space: pre;
|
|
padding-bottom: 0.25rem;
|
|
}
|
|
|
|
html.theme-light & {
|
|
--color-type: #0053d4;
|
|
--color-keyword: #388e22;
|
|
--color-class: #3e6c20;
|
|
--color-string: #9a1111;
|
|
--color-template: #9A5334;
|
|
--color-selector: #9A5334;
|
|
--color-function: #a753b7;
|
|
--color-comment: #616161;
|
|
--color-section: #9a1111;
|
|
--color-variable: #BD63C5;
|
|
--color-attribute: #276b8f;
|
|
--color-link: #276b8f;
|
|
--color-tag: #000000;
|
|
}
|
|
|
|
html.theme-dark :not(.own) & {
|
|
--color-type: #56b6c2;
|
|
--color-keyword: #c678dd;
|
|
--color-class: #e06c75;
|
|
--color-string: #98c379;
|
|
--color-template: #d19a66;
|
|
--color-selector: #e06c75;
|
|
--color-function: #61aeee;
|
|
--color-comment: #5c6370;
|
|
--color-section: #e06c75;
|
|
--color-variable: #d19a66;
|
|
--color-attribute: #d19a66;
|
|
--color-link: #d19a66;
|
|
--color-tag: #e06c75;
|
|
}
|
|
|
|
html.theme-dark .own & {
|
|
--color-type: #9EFFFF;
|
|
--color-keyword: #ffe900;
|
|
--color-class: #b2f5ff;
|
|
--color-string: #fedcad;
|
|
--color-template: #ffe900;
|
|
--color-selector: #b2f5ff;
|
|
--color-function: #87ff91;
|
|
--color-comment: #cbcbcb;
|
|
--color-section: #b2f5ff;
|
|
--color-variable: #ffe900;
|
|
--color-attribute: #ffe900;
|
|
--color-link: #ffe900;
|
|
--color-tag: #b2f5ff;
|
|
}
|
|
|
|
|
|
.hljs {
|
|
display: block;
|
|
overflow-x: auto;
|
|
color: var(--color-text);
|
|
}
|
|
}
|
|
|
|
.hljs-keyword,
|
|
.hljs-literal,
|
|
.hljs-symbol,
|
|
.hljs-name {
|
|
color: var(--color-keyword);
|
|
}
|
|
.hljs-link {
|
|
color: var(--color-link);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.hljs-built_in,
|
|
.hljs-type {
|
|
color: var(--color-type);
|
|
}
|
|
|
|
.hljs-number,
|
|
.hljs-class {
|
|
color: var(--color-class);
|
|
}
|
|
|
|
.hljs-string,
|
|
.hljs-meta .hljs-string {
|
|
color: var(--color-string);
|
|
}
|
|
|
|
.hljs-regexp,
|
|
.hljs-template-tag {
|
|
color: var(--color-template);
|
|
}
|
|
|
|
.hljs-subst,
|
|
.hljs-function,
|
|
.hljs-title,
|
|
.hljs-params,
|
|
.hljs-formula {
|
|
color: var(--color-function);
|
|
}
|
|
|
|
.hljs-comment,
|
|
.hljs-quote {
|
|
color: var(--color-comment);
|
|
font-style: italic;
|
|
}
|
|
|
|
.hljs-meta,
|
|
.hljs-meta .hljs-keyword,
|
|
.hljs-tag, .hljs-doctag {
|
|
color: var(--color-tag);
|
|
}
|
|
|
|
.hljs-variable,
|
|
.hljs-template-variable {
|
|
color: var(--color-variable);
|
|
}
|
|
|
|
.hljs-attr,
|
|
.hljs-attribute {
|
|
color: var(--color-attribute);
|
|
}
|
|
|
|
.hljs-section {
|
|
color: var(--color-section);
|
|
}
|
|
|
|
.hljs-emphasis {
|
|
font-style: italic;
|
|
}
|
|
|
|
.hljs-strong {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.hljs-bullet,
|
|
.hljs-selector-tag,
|
|
.hljs-selector-id,
|
|
.hljs-selector-class,
|
|
.hljs-selector-attr,
|
|
.hljs-selector-pseudo {
|
|
color: var(--color-selector);
|
|
}
|