UNPKG

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