diff --git a/assets/css/torchlight.css b/assets/css/torchlight.css index d5b2edd..e3d8efb 100644 --- a/assets/css/torchlight.css +++ b/assets/css/torchlight.css @@ -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;