mirror of
https://github.com/jbowdre/runtimeterror.git
synced 2024-12-24 11:52:19 +00:00
spruce up torchlight css
This commit is contained in:
parent
7200935d96
commit
2e6bfe0010
1 changed files with 33 additions and 17 deletions
|
@ -1,3 +1,7 @@
|
|||
/*********************************************
|
||||
* Basic styling for Torchlight code blocks. *
|
||||
**********************************************/
|
||||
|
||||
/*
|
||||
Margin and rounding are personal preferences,
|
||||
overflow-x-auto is recommended.
|
||||
|
@ -40,10 +44,36 @@ pre.torchlight .summary-caret {
|
|||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* Focus styling *
|
||||
**********************************************/
|
||||
|
||||
/*
|
||||
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;
|
||||
}
|
||||
|
||||
.torchlight summary:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* Collapse styling *
|
||||
**********************************************/
|
||||
|
||||
/* Hide the default markers, as we provide our own */
|
||||
.torchlight details > summary::marker,
|
||||
.torchlight details > summary::-webkit-details-marker {
|
||||
|
@ -81,23 +111,9 @@ pre.torchlight .summary-caret {
|
|||
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;
|
||||
}
|
||||
/*********************************************
|
||||
* Additional styling *
|
||||
**********************************************/
|
||||
|
||||
.highlight div {
|
||||
overflow-x: visible;
|
||||
|
|
Loading…
Reference in a new issue