12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970 |
- pre[data-line] {
- position: relative;
- padding: 1em 0 1em 3em;
- }
- .line-highlight {
- position: absolute;
- left: 0;
- right: 0;
- padding: inherit 0;
- margin-top: 1em; /* Same as .prism’s padding-top */
- background: hsla(24, 20%, 50%,.08);
- background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
- pointer-events: none;
- line-height: inherit;
- white-space: pre;
- }
- @media print {
- .line-highlight {
- /*
- * This will prevent browsers from replacing the background color with white.
- * It's necessary because the element is layered on top of the displayed code.
- */
- -webkit-print-color-adjust: exact;
- color-adjust: exact;
- }
- }
- .line-highlight:before,
- .line-highlight[data-end]:after {
- content: attr(data-start);
- position: absolute;
- top: .4em;
- left: .6em;
- min-width: 1em;
- padding: 0 .5em;
- background-color: hsla(24, 20%, 50%,.4);
- color: hsl(24, 20%, 95%);
- font: bold 65%/1.5 sans-serif;
- text-align: center;
- vertical-align: .3em;
- border-radius: 999px;
- text-shadow: none;
- box-shadow: 0 1px white;
- }
- .line-highlight[data-end]:after {
- content: attr(data-end);
- top: auto;
- bottom: .4em;
- }
- .line-numbers .line-highlight:before,
- .line-numbers .line-highlight:after {
- content: none;
- }
- pre[id].linkable-line-numbers span.line-numbers-rows {
- pointer-events: all;
- }
- pre[id].linkable-line-numbers span.line-numbers-rows > span:before {
- cursor: pointer;
- }
- pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before {
- background-color: rgba(128, 128, 128, .2);
- }
|