OLD | NEW |
(Empty) | |
| 1 pre[data-line] { |
| 2 position: relative; |
| 3 padding: 1em 0 1em 3em; |
| 4 } |
| 5 |
| 6 .line-highlight { |
| 7 position: absolute; |
| 8 left: 0; |
| 9 right: 0; |
| 10 padding: inherit 0; |
| 11 margin-top: 1em; /* Same as .prism’s padding-top */ |
| 12 |
| 13 background: hsla(24, 20%, 50%,.08); |
| 14 background: -moz-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(2
4, 20%, 50%,0)); |
| 15 background: -webkit-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsl
a(24, 20%, 50%,0)); |
| 16 background: -o-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24,
20%, 50%,0)); |
| 17 background: linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20
%, 50%,0)); |
| 18 |
| 19 pointer-events: none; |
| 20 |
| 21 line-height: inherit; |
| 22 white-space: pre; |
| 23 } |
| 24 |
| 25 .line-highlight:before, |
| 26 .line-highlight[data-end]:after { |
| 27 content: attr(data-start); |
| 28 position: absolute; |
| 29 top: .4em; |
| 30 left: .6em; |
| 31 min-width: 1em; |
| 32 padding: 0 .5em; |
| 33 background-color: hsla(24, 20%, 50%,.4); |
| 34 color: hsl(24, 20%, 95%); |
| 35 font: bold 65%/1.5 sans-serif; |
| 36 text-align: center; |
| 37 vertical-align: .3em; |
| 38 border-radius: 999px; |
| 39 text-shadow: none; |
| 40 box-shadow: 0 1px white; |
| 41 } |
| 42 |
| 43 .line-highlight[data-end]:after { |
| 44 content: attr(data-end); |
| 45 top: auto; |
| 46 bottom: .4em; |
| 47 } |
OLD | NEW |