UNPKG

1.56 kBCSSView Raw
1div.code-toolbar {
2 position: relative;
3}
4
5div.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
14div.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. */
20div.code-toolbar:focus-within > .toolbar {
21 opacity: 1;
22}
23
24div.code-toolbar > .toolbar > .toolbar-item {
25 display: inline-block;
26}
27
28div.code-toolbar > .toolbar > .toolbar-item > a {
29 cursor: pointer;
30}
31
32div.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
45div.code-toolbar > .toolbar > .toolbar-item > a,
46div.code-toolbar > .toolbar > .toolbar-item > button,
47div.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
57div.code-toolbar > .toolbar > .toolbar-item > a:hover,
58div.code-toolbar > .toolbar > .toolbar-item > a:focus,
59div.code-toolbar > .toolbar > .toolbar-item > button:hover,
60div.code-toolbar > .toolbar > .toolbar-item > button:focus,
61div.code-toolbar > .toolbar > .toolbar-item > span:hover,
62div.code-toolbar > .toolbar > .toolbar-item > span:focus {
63 color: inherit;
64 text-decoration: none;
65}