242 lines
22 KiB
CSS
242 lines
22 KiB
CSS
|
/* src/styles.scss */
|
||
|
|
.hk-codeblock {
|
||
|
|
position: relative;
|
||
|
|
margin-top: var(--hk-codeblock-margin);
|
||
|
|
margin-bottom: var(--hk-codeblock-margin);
|
||
|
|
}
|
||
|
|
.hk-codeblock {
|
||
|
|
--hk-codeblock-margin: 1em;
|
||
|
|
--hk-codeblock-horizontal-padding: 16px;
|
||
|
|
--hk-codeblock-vertical-padding: 8px;
|
||
|
|
--hk-codeblock-background-color: var(--code-background);
|
||
|
|
--hk-codeblock-border-color: var(--divider-color);
|
||
|
|
--hk-codeblock-font-family: var(--font-monospace);
|
||
|
|
--hk-codeblock-font-size: var(--code-size);
|
||
|
|
--hk-codeblock-text-color: var(--code-normal);
|
||
|
|
--hk-codeblock-title-text-font: var(--hk-codeblock-font-family);
|
||
|
|
--hk-codeblock-title-text-color: var(--hk-codeblock-text-color);
|
||
|
|
--hk-codeblock-title-text-size: var(--hk-codeblock-font-size);
|
||
|
|
--hk-codeblock-linenos-text-font: var(--hk-codeblock-font-family);
|
||
|
|
--hk-codeblock-linenos-text-color: var(--hk-codeblock-text-color);
|
||
|
|
--hk-codeblock-linenos-text-size: var(--hk-codeblock-font-size);
|
||
|
|
--hk-codeblock-language-text-font: var(--hk-codeblock-font-family);
|
||
|
|
--hk-codeblock-language-text-color: var(--hk-codeblock-text-color);
|
||
|
|
--hk-codeblock-language-text-size: calc(var(--hk-codeblock-font-size) * 0.9);
|
||
|
|
--hk-codeblock-copy-btn-text-font: var(--hk-codeblock-font-family);
|
||
|
|
--hk-codeblock-copy-btn-text-color: var(--hk-codeblock-text-color);
|
||
|
|
--hk-codeblock-copy-btn-text-size: calc(var(--hk-codeblock-font-size) * 0.9);
|
||
|
|
--hk-codeblock-prompt-text-font: var(--hk-codeblock-font-family);
|
||
|
|
--hk-codeblock-prompt-text-color: var(--hk-codeblock-text-color);
|
||
|
|
--hk-codeblock-prompt-text-size: var(--hk-codeblock-font-size);
|
||
|
|
--hk-codeblock-result-text-font: var(--hk-codeblock-font-family);
|
||
|
|
--hk-codeblock-result-text-color: var(--hk-codeblock-text-color);
|
||
|
|
--hk-codeblock-result-text-size: var(--hk-codeblock-font-size);
|
||
|
|
}
|
||
|
|
.hk-codeblock pre {
|
||
|
|
position: relative;
|
||
|
|
border-radius: initial;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
margin: 0;
|
||
|
|
min-height: 0;
|
||
|
|
padding-top: var(--hk-codeblock-vertical-padding);
|
||
|
|
padding-bottom: var(--hk-codeblock-vertical-padding);
|
||
|
|
padding-left: var(--hk-codeblock-horizontal-padding);
|
||
|
|
padding-right: var(--hk-codeblock-horizontal-padding);
|
||
|
|
background-color: var(--hk-codeblock-background-color);
|
||
|
|
font-family: var(--hk-codeblock-font-family);
|
||
|
|
color: var(--hk-codeblock-text-color);
|
||
|
|
}
|
||
|
|
.hk-codeblock pre code.hk-codeblock-code {
|
||
|
|
white-space: pre;
|
||
|
|
overflow-x: auto;
|
||
|
|
padding: 0;
|
||
|
|
background-color: var(--hk-codeblock-background-color);
|
||
|
|
font-family: var(--hk-codeblock-font-family);
|
||
|
|
color: var(--hk-codeblock-text-color);
|
||
|
|
font-size: var(--hk-codeblock-font-size);
|
||
|
|
}
|
||
|
|
.hk-codeblock.hk-codeblock-show-title .hk-codeblock-title {
|
||
|
|
padding-top: var(--hk-codeblock-vertical-padding);
|
||
|
|
padding-bottom: var(--hk-codeblock-vertical-padding);
|
||
|
|
padding-left: var(--hk-codeblock-horizontal-padding);
|
||
|
|
padding-right: var(--hk-codeblock-horizontal-padding);
|
||
|
|
background-color: var(--hk-codeblock-background-color);
|
||
|
|
border-bottom: 1px solid var(--hk-codeblock-border-color);
|
||
|
|
font-family: var(--hk-codeblock-title-text-font);
|
||
|
|
color: var(--hk-codeblock-title-text-color);
|
||
|
|
font-size: var(--hk-codeblock-title-text-size);
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.hk-codeblock.hk-codeblock-show-title .hk-codeblock-title ~ pre {
|
||
|
|
margin-top: 0;
|
||
|
|
}
|
||
|
|
.hk-codeblock.hk-codeblock-show-title.hk-codeblock-collapsible .hk-codeblock-title {
|
||
|
|
cursor: pointer;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.hk-codeblock.hk-codeblock-show-title.hk-codeblock-collapsible .hk-codeblock-title .hk-codeblock-collapse-btns {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
margin-right: 2px;
|
||
|
|
position: relative;
|
||
|
|
top: -1px;
|
||
|
|
left: -3px;
|
||
|
|
}
|
||
|
|
.hk-codeblock.hk-codeblock-show-title.hk-codeblock-collapsible .hk-codeblock-title .hk-codeblock-collapse-btns .hk-codeblock-collapse-btn {
|
||
|
|
width: var(--hk-codeblock-title-text-size);
|
||
|
|
height: var(--hk-codeblock-title-text-size);
|
||
|
|
fill: var(--hk-codeblock-title-text-color);
|
||
|
|
stroke: var(--hk-codeblock-title-text-color);
|
||
|
|
stroke-width: 2;
|
||
|
|
opacity: 0.2;
|
||
|
|
}
|
||
|
|
.hk-codeblock.hk-codeblock-show-title.hk-codeblock-collapsible .hk-codeblock-title .hk-codeblock-collapse-btns .hk-codeblock-collapse-btn.hk-codeblock-collapsed-btn {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.hk-codeblock.hk-codeblock-show-title.hk-codeblock-collapsible .hk-codeblock-title .hk-codeblock-collapse-btns .hk-codeblock-collapse-btn.hk-codeblock-expanded-btn {
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
.hk-codeblock.hk-codeblock-show-title.hk-codeblock-collapsible.hk-codeblock-collapsed .hk-codeblock-title {
|
||
|
|
border-bottom: none;
|
||
|
|
}
|
||
|
|
.hk-codeblock.hk-codeblock-show-title.hk-codeblock-collapsible.hk-codeblock-collapsed .hk-codeblock-title .hk-codeblock-collapse-btns .hk-codeblock-collapse-btn.hk-codeblock-collapsed-btn {
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
.hk-codeblock.hk-codeblock-show-title.hk-codeblock-collapsible.hk-codeblock-collapsed .hk-codeblock-title .hk-codeblock-collapse-btns .hk-codeblock-collapse-btn.hk-codeblock-expanded-btn {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.hk-codeblock.hk-codeblock-show-title.hk-codeblock-collapsible.hk-codeblock-collapsed pre {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.hk-codeblock.hk-codeblock-show-linenos pre .hk-codeblock-linenos {
|
||
|
|
flex-shrink: 0;
|
||
|
|
flex-grow: 0;
|
||
|
|
text-align: right;
|
||
|
|
padding: 0;
|
||
|
|
padding-right: 1em;
|
||
|
|
opacity: 0.6;
|
||
|
|
user-select: none;
|
||
|
|
white-space: pre;
|
||
|
|
font-family: var(--hk-codeblock-linenos-text-font);
|
||
|
|
color: var(--hk-codeblock-linenos-text-color);
|
||
|
|
font-size: var(--hk-codeblock-linenos-text-size);
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
.hk-codeblock.hk-codeblock-show-linenos pre .hk-codeblock-linenos.show-splitter {
|
||
|
|
border-right: 1px solid var(--hk-codeblock-border-color);
|
||
|
|
margin-right: 1em;
|
||
|
|
}
|
||
|
|
.hk-codeblock.hk-codeblock-show-highlight pre .hk-codeblock-highlight {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
pointer-events: none;
|
||
|
|
user-select: none;
|
||
|
|
padding-top: var(--hk-codeblock-vertical-padding);
|
||
|
|
padding-bottom: var(--hk-codeblock-vertical-padding);
|
||
|
|
opacity: 0.2;
|
||
|
|
font-family: var(--hk-codeblock-linenos-text-font);
|
||
|
|
font-size: var(--hk-codeblock-linenos-text-font);
|
||
|
|
color: var(--hk-codeblock-linenos-text-color);
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
.hk-codeblock.hk-codeblock-show-highlight pre .hk-codeblock-highlight .line.highlight {
|
||
|
|
background-color: var(--hk-codeblock-highlight-background-color);
|
||
|
|
}
|
||
|
|
.hk-codeblock.hk-codeblock-show-language pre .hk-codeblock-language {
|
||
|
|
opacity: 0.4;
|
||
|
|
user-select: none;
|
||
|
|
z-index: 1;
|
||
|
|
margin: 6px;
|
||
|
|
padding-top: 6px;
|
||
|
|
padding-bottom: 6px;
|
||
|
|
padding-left: 8px;
|
||
|
|
padding-right: 8px;
|
||
|
|
background-color: transparent;
|
||
|
|
box-shadow: none;
|
||
|
|
font-family: var(--hk-codeblock-language-text-font);
|
||
|
|
color: var(--hk-codeblock-language-text-color);
|
||
|
|
font-size: var(--hk-codeblock-language-text-size);
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
}
|
||
|
|
.hk-codeblock.hk-codeblock-show-language pre:hover .hk-codeblock-language {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.hk-codeblock.hk-codeblock-show-copybtn pre .copy-code-button {
|
||
|
|
cursor: pointer;
|
||
|
|
opacity: 0.4;
|
||
|
|
user-select: none;
|
||
|
|
z-index: 1;
|
||
|
|
margin: 6px;
|
||
|
|
padding-top: 6px;
|
||
|
|
padding-bottom: 6px;
|
||
|
|
padding-left: 8px;
|
||
|
|
padding-right: 8px;
|
||
|
|
background-color: transparent;
|
||
|
|
box-shadow: none;
|
||
|
|
font-family: var(--hk-codeblock-copy-btn-text-font);
|
||
|
|
color: var(--hk-codeblock-copy-btn-text-color);
|
||
|
|
font-size: var(--hk-codeblock-copy-btn-text-size);
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
}
|
||
|
|
.hk-codeblock.hk-codeblock-show-copybtn pre .copy-code-button:hover {
|
||
|
|
opacity: 1;
|
||
|
|
background-color: rgba(255, 255, 255, 0.0745098039);
|
||
|
|
}
|
||
|
|
.hk-codeblock.hk-codeblock-show-copybtn pre .copy-code-button:active {
|
||
|
|
opacity: 1;
|
||
|
|
background-color: rgba(255, 255, 255, 0.1490196078);
|
||
|
|
}
|
||
|
|
.hk-codeblock.hk-codeblock-show-prompt pre .hk-codeblock-prompt {
|
||
|
|
flex-shrink: 0;
|
||
|
|
flex-grow: 0;
|
||
|
|
text-align: right;
|
||
|
|
padding-top: 0;
|
||
|
|
padding-bottom: 0;
|
||
|
|
padding-left: 0;
|
||
|
|
padding-right: 0.8em;
|
||
|
|
opacity: 0.6;
|
||
|
|
user-select: none;
|
||
|
|
color: var(--hk-codeblock-prompt-text-color);
|
||
|
|
white-space: pre;
|
||
|
|
font-family: var(--hk-codeblock-prompt-text-font);
|
||
|
|
font-size: var(--hk-codeblock-prompt-text-size);
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
.hk-codeblock.hk-codeblock-result {
|
||
|
|
margin-top: calc(var(--hk-codeblock-margin) * -1);
|
||
|
|
border-top: 1px solid var(--hk-codeblock-border-color);
|
||
|
|
background-color: var(--hk-codeblock-background-color);
|
||
|
|
}
|
||
|
|
.hk-codeblock.hk-codeblock-result .hk-codeblock-result-prompt {
|
||
|
|
color: var(--hk-codeblock-result-text-color);
|
||
|
|
opacity: 0.4;
|
||
|
|
font-size: 0.8em;
|
||
|
|
padding-top: var(--hk-codeblock-vertical-padding);
|
||
|
|
padding-left: var(--hk-codeblock-horizontal-padding);
|
||
|
|
padding-right: var(--hk-codeblock-horizontal-padding);
|
||
|
|
user-select: none;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
.hk-codeblock.hk-codeblock-result pre {
|
||
|
|
margin-top: 0;
|
||
|
|
}
|
||
|
|
.hk-codeblock.hk-codeblock-result pre .hk-codeblock-result-code {
|
||
|
|
color: var(--hk-codeblock-result-text-color);
|
||
|
|
font-family: var(--hk-codeblock-result-text-font);
|
||
|
|
font-size: var(--hk-codeblock-result-text-size);
|
||
|
|
}
|
||
|
|
/*# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiLi4vc3JjL3N0eWxlcy5zY3NzIl0sCiAgInNvdXJjZXNDb250ZW50IjogWyIuaGstY29kZWJsb2NrIHtcbiAgJiB7XG4gICAgLy8gdmFyaWFibGVzXG4gICAgLS1oay1jb2RlYmxvY2stbWFyZ2luOiAxZW07XG4gICAgLS1oay1jb2RlYmxvY2staG9yaXpvbnRhbC1wYWRkaW5nOiAxNnB4O1xuICAgIC0taGstY29kZWJsb2NrLXZlcnRpY2FsLXBhZGRpbmc6IDhweDtcbiAgICAtLWhrLWNvZGVibG9jay1iYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1jb2RlLWJhY2tncm91bmQpO1xuICAgIC0taGstY29kZWJsb2NrLWJvcmRlci1jb2xvcjogdmFyKC0tZGl2aWRlci1jb2xvcik7IC8vIGFwcGxpZWQgdG8gdGl0bGUsIGxpbmVub3MsIGFuZCByZXN1bHRcbiAgICAtLWhrLWNvZGVibG9jay1mb250LWZhbWlseTogdmFyKC0tZm9udC1tb25vc3BhY2UpO1xuICAgIC0taGstY29kZWJsb2NrLWZvbnQtc2l6ZTogdmFyKC0tY29kZS1zaXplKTtcbiAgICAtLWhrLWNvZGVibG9jay10ZXh0LWNvbG9yOiB2YXIoLS1jb2RlLW5vcm1hbCk7XG5cbiAgICAtLWhrLWNvZGVibG9jay10aXRsZS10ZXh0LWZvbnQ6IHZhcigtLWhrLWNvZGVibG9jay1mb250LWZhbWlseSk7XG4gICAgLS1oay1jb2RlYmxvY2stdGl0bGUtdGV4dC1jb2xvcjogdmFyKC0taGstY29kZWJsb2NrLXRleHQtY29sb3IpO1xuICAgIC0taGstY29kZWJsb2NrLXRpdGxlLXRleHQtc2l6ZTogdmFyKC0taGstY29kZWJsb2NrLWZvbnQtc2l6ZSk7XG5cbiAgICAtLWhrLWNvZGVibG9jay1saW5lbm9zLXRleHQtZm9udDogdmFyKC0taGstY29kZWJsb2NrLWZvbnQtZmFtaWx5KTtcbiAgICAtLWhrLWNvZGVibG9jay1saW5lbm9zLXRleHQtY29sb3I6IHZhcigtLWhrLWNvZGVibG9jay10ZXh0LWNvbG9yKTtcbiAgICAtLWhrLWNvZGVibG9jay1saW5lbm9zLXRleHQtc2l6ZTogdmFyKC0taGstY29kZWJsb2NrLWZvbnQtc2l6ZSk7XG5cbiAgICAtLWhrLWNvZGVibG9jay1sYW5ndWFnZS10ZXh0LWZvbnQ6IHZhcigtLWhrLWNvZGVibG9jay1mb250LWZhbWlseSk7IFxuICAgIC0taGstY29kZWJsb2NrLWxhbmd1YWdlLXRleHQtY29sb3I6IHZhcigtLWhrLWNvZGVibG9jay10ZXh0LWNvbG9yKTsgXG4gICAgLS1oay1jb2RlYmxvY2stbGFuZ3VhZ2UtdGV4dC1zaXplOiBjYWxjKHZhcigtLWhrLWNvZGVibG9jay1mb250LXNpemUpICogMC45KTtcblxuICAgIC0taGstY29kZWJsb2NrLWNvcHktYnRuLXRleHQtZm9udDogdmFyKC0taGstY29kZWJsb2NrLWZvbnQtZmFtaWx5KTtcbiAgICAtLWhrLWNvZGVibG9jay1jb3B5LWJ0bi10ZXh0LWNvbG9yOiB2YXIoLS1oay1jb2RlYmxvY2stdGV4dC1jb2xvcik7XG4gICAgLS1oay1jb2RlYmxvY2stY29weS1idG4tdGV4dC1zaXplOiBjYWxjKHZhcigtLWhrLWNvZGVibG9jay1mb250LXNpemUpICogMC45KTtcblxuICAgIC0taGstY29kZWJsb2NrLXByb21wdC10ZXh0LWZvbnQ6IHZhcigtLWhrLWNvZGVibG9jay1mb250LWZhbWlseSk7XG4gICAgLS1oay1jb2RlYmxvY2stcHJvbXB0LXRleHQtY29sb3I6IHZhcigtLWhrLWNvZGVibG9jay10ZXh0LWNvbG9yKTtcbiAgICAtLWhrLWNvZGVibG9jay1wcm9tcHQtdGV4dC1zaXplOiB2YXIoLS1oay1jb2RlYmxvY2stZm9udC1zaXplKTtcblxuICAgIC0taGstY29kZWJsb2NrLXJlc3VsdC10ZXh0LWZvbnQ6IHZhcigtLWhrLWNvZGVibG9jay1mb250LWZhbWlseSk7XG4gICAgLS1oay1jb2RlYmxvY2stcmVzdWx0LXRleHQtY29sb3I6IHZhcigtLWhrLWNvZGVibG9jay10ZXh0LWNvbG9yKTtcbiAgICAtLWhrLWNvZGVibG9jay1yZXN1bHQtdGV4dC1zaXplOiB2YXIoLS1oay1jb2RlYmxvY2stZm9udC1zaXplKTtcbiAgfVxuXG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuICBtYXJnaW46IHtcbiAgICB0b3A6IHZhcigtLWhrLWNvZGVibG9jay1tYXJnaW4pO1xuICAgIGJvdHRvbTogdmFyKC0taGstY29kZWJsb2NrLW1hcmdpbik7XG4gIH1cblxuICBwcmUge1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBib3JkZXItcmFkaXVzOiBpbml0aWFsO1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZmxleC1kaXJlY3Rpb246IHJvdztcbiAgICBtYXJnaW46IDA7XG4gICAgbWluLWhlaWdodDogMDtcblxuICAgIHBhZGRpbmc6IHtcbiAgICAgIHRvcDogdmFyKC0taGstY29kZWJsb2NrLXZlcnRpY2FsLXBhZGRpbmcpO1xuICAgICAgYm90dG9tOiB2YXIoLS1oay1jb2RlYmxvY2stdmVydGljYWwtcGFkZGluZyk7XG4gICAgICBsZWZ0OiB2YXIoLS1oay1jb2RlYmxvY2staG9yaXpvbnRhbC1wYWRkaW5nKTtcbiAgICAgIHJpZ2h0OiB2YXIoLS1oay1jb2RlYmxvY2staG9yaXpvbnRhbC1wYWRkaW5nKTtcbiAgICB9XG5cbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1oay1jb2RlYmxvY2stYmFja2dyb3VuZC1jb2xvcik7XG4gICAgZm9udC1mYW1pbHk6IHZhcigtLWhrLWNvZGVibG9jay1mb250LWZhbWlseSk7XG4gICAgY29sb3I6IHZhcigtLWhrLWNvZGVibG9jay10ZXh0LWNvbG9yKTtcbiAgICAvL2ZvbnQtc2l6ZTogdmFyKC0taGstY29kZWJsb2NrLWZvbnQtc2l6ZSk7IC8vIGlmIHRoZSBzaXplIGlzIHByb3ZpZGVkIHdpdGggdGhlIGVtIHVuaXQsIHRoaXMgY2FuIGNhdXNlIHRleHQgYmVpbmcgdG9vIHNtYWxsXG5cbiAgICBjb2RlLmhrLWNvZGVibG9jay1jb2RlIHtcbiAgICAgIHdoaXRlLXNwYWNlOiBwcmU7XG4gICAgICBvdmVyZmxvdy14OiBhdXRvO1xuICAgICAgcGFkZGluZzogMDtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWhrLWNvZGVibG9jay1iYWNrZ3JvdW5kLWNvbG9yKTtcbiAgICAgIGZvbnQtZmFtaWx5OiB2YXIoLS1oay1jb2RlYmxvY2stZm9udC1mYW1pbHkpO1xuICAgICAgY29sb3I6IHZhcigtLWhrLWNvZGVibG9jay10ZXh0LWNvbG9yKTtcbiAgICAgIGZvbnQtc2l6ZTogdmFyKC0taGstY29kZWJsb2NrLWZvbnQtc2l6ZSk7XG4gICAgfVxuICB9XG59XG5cbi8qIHRpdGxlICovXG4uaGstY29kZWJsb2NrLmhrLWNvZ
|