| /* Copy buttons */ |
| a.copybtn { |
| position: absolute; |
| top: .2em; |
| right: .2em; |
| width: 1em; |
| height: 1em; |
| opacity: .3; |
| transition: opacity 0.5s; |
| border: none; |
| user-select: none; |
| } |
| |
| div.highlight { |
| position: relative; |
| } |
| |
| a.copybtn > img { |
| vertical-align: top; |
| margin: 0; |
| top: 0; |
| left: 0; |
| position: absolute; |
| } |
| |
| .highlight:hover .copybtn { |
| opacity: 1; |
| } |
| |
| /** |
| * A minimal CSS-only tooltip copied from: |
| * https://codepen.io/mildrenben/pen/rVBrpK |
| * |
| * To use, write HTML like the following: |
| * |
| * <p class="o-tooltip--left" data-tooltip="Hey">Short</p> |
| */ |
| .o-tooltip--left { |
| position: relative; |
| } |
| |
| .o-tooltip--left:after { |
| opacity: 0; |
| visibility: hidden; |
| position: absolute; |
| content: attr(data-tooltip); |
| padding: 2px; |
| top: 0; |
| left: -.2em; |
| background: grey; |
| font-size: 1rem; |
| color: white; |
| white-space: nowrap; |
| z-index: 2; |
| border-radius: 2px; |
| transform: translateX(-102%) translateY(0); |
| transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); |
| } |
| |
| .o-tooltip--left:hover:after { |
| display: block; |
| opacity: 1; |
| visibility: visible; |
| transform: translateX(-100%) translateY(0); |
| transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); |
| transition-delay: .5s; |
| } |