gatsby-code-buttons-dracula/styles.css

Dracula code buttons theme for Gatsby

.gatsby-code-button-container {
  position: relative;
  z-index: 200;
  display: flex;
  justify-content: flex-end;
  top: 24px;
  pointer-events: none; }

.gatsby-code-button {
  padding: 0 6px;
  color: #282a36;
  background-color: #6272a4;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
  pointer-events: initial; }
  .gatsby-code-button:after {
    visibility: hidden;
    display: none;
    position: absolute;
    content: attr(data-tooltip);
    color: #282a36;
    background-color: #bd93f9;
    font-size: 12px;
    white-space: nowrap; }
  .gatsby-code-button[data-tooltip]:after {
    top: 0;
    right: 28px; }
  .gatsby-code-button[data-tooltip]:hover:after, .gatsby-code-button[data-tooltip]:focus:after {
    visibility: visible;
    z-index: 200;
    display: block;
    padding: 0 6px;
    font-weight: 100;
    animation: fadeIn 0.25s; }

.gatsby-code-button-icon {
  position: relative;
  top: 2px;
  width: 16px;
  height: 16px;
  fill: #282a36; }

@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }