john/runtimeterror
1
0
Fork 0
mirror of https://github.com/jbowdre/runtimeterror.git synced 2024-09-19 15:45:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

spruce up torchlight css

Browse source
This commit is contained in:
John Bowdre 2023-11-08 22:04:06 -06:00
parent d53c726126
commit a62d564dd8
1 changed files with 33 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
assets/css/torchlight.css
View file

@ -1,3 +1,7 @@
/*********************************************
* Basic styling for Torchlight code blocks. *
**********************************************/
/* /*
Margin and rounding are personal preferences, Margin and rounding are personal preferences,
overflow-x-auto is recommended. overflow-x-auto is recommended.
@ -40,10 +44,36 @@ pre.torchlight .summary-caret {
margin-right: 1rem; 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 { .torchlight summary:focus {
outline: none; outline: none;
} }
/*********************************************
* Collapse styling *
**********************************************/
/* Hide the default markers, as we provide our own */ /* Hide the default markers, as we provide our own */
.torchlight details > summary::marker, .torchlight details > summary::marker,
.torchlight details > summary::-webkit-details-marker { .torchlight details > summary::-webkit-details-marker {
@ -81,23 +111,9 @@ pre.torchlight .summary-caret {
display: initial; display: initial;
} }
/* /*********************************************
Blur and dim the lines that don't have the `.line-focus` class, * Additional styling *
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 { .highlight div {
overflow-x: visible; overflow-x: visible;