copybutton.css 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. /* Copy buttons */
  2. button.copybtn {
  3. position: absolute;
  4. display: flex;
  5. top: .3em;
  6. right: .3em;
  7. width: 1.7em;
  8. height: 1.7em;
  9. opacity: 0;
  10. transition: opacity 0.3s, border .3s, background-color .3s;
  11. user-select: none;
  12. padding: 0;
  13. border: none;
  14. outline: none;
  15. border-radius: 0.4em;
  16. /* The colors that GitHub uses */
  17. border: #1b1f2426 1px solid;
  18. background-color: #f6f8fa;
  19. color: #57606a;
  20. }
  21. button.copybtn.success {
  22. border-color: #22863a;
  23. color: #22863a;
  24. }
  25. button.copybtn svg {
  26. stroke: currentColor;
  27. width: 1.5em;
  28. height: 1.5em;
  29. padding: 0.1em;
  30. }
  31. div.highlight {
  32. position: relative;
  33. }
  34. .highlight:hover button.copybtn {
  35. opacity: 1;
  36. }
  37. .highlight button.copybtn:hover {
  38. background-color: rgb(235, 235, 235);
  39. }
  40. .highlight button.copybtn:active {
  41. background-color: rgb(187, 187, 187);
  42. }
  43. /**
  44. * A minimal CSS-only tooltip copied from:
  45. * https://codepen.io/mildrenben/pen/rVBrpK
  46. *
  47. * To use, write HTML like the following:
  48. *
  49. * <p class="o-tooltip--left" data-tooltip="Hey">Short</p>
  50. */
  51. .o-tooltip--left {
  52. position: relative;
  53. }
  54. .o-tooltip--left:after {
  55. opacity: 0;
  56. visibility: hidden;
  57. position: absolute;
  58. content: attr(data-tooltip);
  59. padding: .2em;
  60. font-size: .8em;
  61. left: -.2em;
  62. background: grey;
  63. color: white;
  64. white-space: nowrap;
  65. z-index: 2;
  66. border-radius: 2px;
  67. transform: translateX(-102%) translateY(0);
  68. transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
  69. }
  70. .o-tooltip--left:hover:after {
  71. display: block;
  72. opacity: 1;
  73. visibility: visible;
  74. transform: translateX(-100%) translateY(0);
  75. transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
  76. transition-delay: .5s;
  77. }
  78. /* By default the copy button shouldn't show up when printing a page */
  79. @media print {
  80. button.copybtn {
  81. display: none;
  82. }
  83. }