| pre.code-toolbar { |
| position: relative; |
| } |
| |
| pre.code-toolbar > .toolbar { |
| position: absolute; |
| top: .3em; |
| right: .2em; |
| transition: opacity 0.3s ease-in-out; |
| opacity: 0; |
| } |
| |
| pre.code-toolbar:hover > .toolbar { |
| opacity: 1; |
| } |
| |
| pre.code-toolbar > .toolbar .toolbar-item { |
| display: inline-block; |
| } |
| |
| pre.code-toolbar > .toolbar a { |
| cursor: pointer; |
| } |
| |
| pre.code-toolbar > .toolbar button { |
| background: none; |
| border: 0; |
| color: inherit; |
| font: inherit; |
| line-height: normal; |
| overflow: visible; |
| padding: 0; |
| -webkit-user-select: none; /* for button */ |
| -moz-user-select: none; |
| -ms-user-select: none; |
| } |
| |
| pre.code-toolbar > .toolbar a, |
| pre.code-toolbar > .toolbar button, |
| pre.code-toolbar > .toolbar span { |
| color: #bbb; |
| font-size: .8em; |
| padding: 0 .5em; |
| background: #f5f2f0; |
| background: rgba(224, 224, 224, 0.2); |
| box-shadow: 0 2px 0 0 rgba(0,0,0,0.2); |
| border-radius: .5em; |
| } |
| |
| pre.code-toolbar > .toolbar a:hover, |
| pre.code-toolbar > .toolbar a:focus, |
| pre.code-toolbar > .toolbar button:hover, |
| pre.code-toolbar > .toolbar button:focus, |
| pre.code-toolbar > .toolbar span:hover, |
| pre.code-toolbar > .toolbar span:focus { |
| color: inherit; |
| text-decoration: none; |
| } |