| 1 | div.code-toolbar {
|
|---|
| 2 | position: relative;
|
|---|
| 3 | }
|
|---|
| 4 |
|
|---|
| 5 | div.code-toolbar > .toolbar {
|
|---|
| 6 | position: absolute;
|
|---|
| 7 | z-index: 10;
|
|---|
| 8 | top: .3em;
|
|---|
| 9 | right: .2em;
|
|---|
| 10 | transition: opacity 0.3s ease-in-out;
|
|---|
| 11 | opacity: 0;
|
|---|
| 12 | }
|
|---|
| 13 |
|
|---|
| 14 | div.code-toolbar:hover > .toolbar {
|
|---|
| 15 | opacity: 1;
|
|---|
| 16 | }
|
|---|
| 17 |
|
|---|
| 18 | /* Separate line b/c rules are thrown out if selector is invalid.
|
|---|
| 19 | IE11 and old Edge versions don't support :focus-within. */
|
|---|
| 20 | div.code-toolbar:focus-within > .toolbar {
|
|---|
| 21 | opacity: 1;
|
|---|
| 22 | }
|
|---|
| 23 |
|
|---|
| 24 | div.code-toolbar > .toolbar > .toolbar-item {
|
|---|
| 25 | display: inline-block;
|
|---|
| 26 | }
|
|---|
| 27 |
|
|---|
| 28 | div.code-toolbar > .toolbar > .toolbar-item > a {
|
|---|
| 29 | cursor: pointer;
|
|---|
| 30 | }
|
|---|
| 31 |
|
|---|
| 32 | div.code-toolbar > .toolbar > .toolbar-item > button {
|
|---|
| 33 | background: none;
|
|---|
| 34 | border: 0;
|
|---|
| 35 | color: inherit;
|
|---|
| 36 | font: inherit;
|
|---|
| 37 | line-height: normal;
|
|---|
| 38 | overflow: visible;
|
|---|
| 39 | padding: 0;
|
|---|
| 40 | -webkit-user-select: none; /* for button */
|
|---|
| 41 | -moz-user-select: none;
|
|---|
| 42 | -ms-user-select: none;
|
|---|
| 43 | }
|
|---|
| 44 |
|
|---|
| 45 | div.code-toolbar > .toolbar > .toolbar-item > a,
|
|---|
| 46 | div.code-toolbar > .toolbar > .toolbar-item > button,
|
|---|
| 47 | div.code-toolbar > .toolbar > .toolbar-item > span {
|
|---|
| 48 | color: #bbb;
|
|---|
| 49 | font-size: .8em;
|
|---|
| 50 | padding: 0 .5em;
|
|---|
| 51 | background: #f5f2f0;
|
|---|
| 52 | background: rgba(224, 224, 224, 0.2);
|
|---|
| 53 | box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
|
|---|
| 54 | border-radius: .5em;
|
|---|
| 55 | }
|
|---|
| 56 |
|
|---|
| 57 | div.code-toolbar > .toolbar > .toolbar-item > a:hover,
|
|---|
| 58 | div.code-toolbar > .toolbar > .toolbar-item > a:focus,
|
|---|
| 59 | div.code-toolbar > .toolbar > .toolbar-item > button:hover,
|
|---|
| 60 | div.code-toolbar > .toolbar > .toolbar-item > button:focus,
|
|---|
| 61 | div.code-toolbar > .toolbar > .toolbar-item > span:hover,
|
|---|
| 62 | div.code-toolbar > .toolbar > .toolbar-item > span:focus {
|
|---|
| 63 | color: inherit;
|
|---|
| 64 | text-decoration: none;
|
|---|
| 65 | }
|
|---|
