mirror of
https://github.com/jbowdre/runtimeterror.git
synced 2024-11-23 07:22:18 +00:00
119 lines
2.4 KiB
CSS
119 lines
2.4 KiB
CSS
|
/*
|
||
|
Margin and rounding are personal preferences,
|
||
|
overflow-x-auto is recommended.
|
||
|
*/
|
||
|
pre {
|
||
|
border-radius: 0.25rem;
|
||
|
margin-top: 1rem;
|
||
|
margin-bottom: 1rem;
|
||
|
overflow-x: auto;
|
||
|
padding: 0;
|
||
|
}
|
||
|
|
||
|
/*
|
||
|
Add some vertical padding and expand the width
|
||
|
to fill its container. The horizontal padding
|
||
|
comes at the line level so that background
|
||
|
colors extend edge to edge.
|
||
|
*/
|
||
|
pre.torchlight {
|
||
|
display: block;
|
||
|
padding-top: 1rem;
|
||
|
padding-bottom: 1rem;
|
||
|
}
|
||
|
|
||
|
/*
|
||
|
Horizontal line padding to match the vertical
|
||
|
padding from the code block above.
|
||
|
*/
|
||
|
pre.torchlight .line {
|
||
|
padding-left: 1rem;
|
||
|
padding-right: 1rem;
|
||
|
}
|
||
|
|
||
|
/*
|
||
|
Push the code away from the line numbers and
|
||
|
summary caret indicators.
|
||
|
*/
|
||
|
pre.torchlight .line-number,
|
||
|
pre.torchlight .summary-caret {
|
||
|
margin-right: 1rem;
|
||
|
}
|
||
|
|
||
|
.torchlight summary:focus {
|
||
|
outline: none;
|
||
|
}
|
||
|
|
||
|
/* Hide the default markers, as we provide our own */
|
||
|
.torchlight details > summary::marker,
|
||
|
.torchlight details > summary::-webkit-details-marker {
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
.torchlight details .summary-caret::after {
|
||
|
pointer-events: none;
|
||
|
}
|
||
|
|
||
|
/* Add spaces to keep everything aligned */
|
||
|
.torchlight .summary-caret-empty::after,
|
||
|
.torchlight details .summary-caret-middle::after,
|
||
|
.torchlight details .summary-caret-end::after {
|
||
|
content: " ";
|
||
|
}
|
||
|
|
||
|
/* Show a minus sign when the block is open. */
|
||
|
.torchlight details[open] .summary-caret-start::after {
|
||
|
content: "-";
|
||
|
}
|
||
|
|
||
|
/* And a plus sign when the block is closed. */
|
||
|
.torchlight details:not([open]) .summary-caret-start::after {
|
||
|
content: "+";
|
||
|
}
|
||
|
|
||
|
/* Hide the [...] indicator when open. */
|
||
|
.torchlight details[open] .summary-hide-when-open {
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
/* Show the [...] indicator when closed. */
|
||
|
.torchlight details:not([open]) .summary-hide-when-open {
|
||
|
display: initial;
|
||
|
}
|
||
|
|
||
|
/*
|
||
|
Blur and dim the lines that don't have the `.line-focus` class,
|
||
|
but are within a code block that contains any focus lines.
|
||
|
*/
|
||
|
.torchlight.has-focus-lines .line:not(.line-focus) {
|
||
|
transition: filter 0.35s, opacity 0.35s;
|
||
|
filter: blur(.095rem);
|
||
|
opacity: .65;
|
||
|
}
|
||
|
|
||
|
/*
|
||
|
When the code block is hovered, bring all the lines into focus.
|
||
|
*/
|
||
|
.torchlight.has-focus-lines:hover .line:not(.line-focus) {
|
||
|
filter: blur(0px);
|
||
|
opacity: 1;
|
||
|
}
|
||
|
|
||
|
.highlight div {
|
||
|
overflow-x: visible;
|
||
|
}
|
||
|
|
||
|
.cmd::before {
|
||
|
color: var(--base07);
|
||
|
content: "$ ";
|
||
|
}
|
||
|
|
||
|
.cmd_root::before {
|
||
|
color: var(--base08);
|
||
|
content: "# ";
|
||
|
}
|
||
|
|
||
|
.cmd_return {
|
||
|
webkit-user-select: none;
|
||
|
user-select: none;
|
||
|
}
|