prism-toolbar.css 1.5 KB

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