react-kofi/src/kofi.css

Ko-fi buttons, modals, and react components built with Radix for React.js projects (unofficial)

img.kofiimg {
    display: initial ;
    vertical-align: middle;
    height: 13px ;
    width: 20px ;
    padding-top: 0;
    padding-bottom: 0;
    border: none;
    margin-top: 0;
    margin-right: 2px;
    margin-left: 0;
    margin-bottom: 0px;
    content: url("https://ko-fi.com/img/cup-border.png");
  }
  .kofiimg:after {
    vertical-align: middle;
    height: 25px;
    padding-top: 0;
    padding-bottom: 0;
    border: none;
    margin-top: 0;
    margin-right: 6px;
    margin-left: 0;
    margin-bottom: 4px ;
    content: url("https://ko-fi.com/img/whitelogo.svg");
  }
  .btn-container {
    display: inline-block ;
    white-space: nowrap;
    /* min-width: 160px; */
  }
  span.kofitext {
    color: #fff ;
    letter-spacing: -0.15px ;
    vertical-align: middle;
    line-height: 33px ;
    padding: 0;
    text-align: center;
    text-decoration: none ;
    text-shadow: 0 1px 1px rgba(34, 34, 34, 0.05);
  }
  .kofitext a {
    color: #fff ;
    text-decoration: none ;
  }
  .kofitext a:hover {
    color: #fff ;
    text-decoration: none;
  }
  a.kofi-button {
    box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
    line-height: unset ;
    display: inline-block ;
    background-color: #29abe0;
    padding: 2px 12px ;
    text-align: center ;
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    overflow-wrap: break-word;
    vertical-align: middle;
    border: 0 none #fff ;
    font-family: "Quicksand", Helvetica, Century Gothic, sans-serif ;
    text-decoration: none;
    text-shadow: none;
    font-weight: 700 ;
    font-size: 14px ;
  }
  a.kofi-button:visited {
    color: #fff ;
    text-decoration: none ;
  }
  a.kofi-button:hover {
    opacity: 0.85;
    color: #f5f5f5 ;
    text-decoration: none ;
  }
  a.kofi-button:active {
    color: #f5f5f5 ;
    text-decoration: none ;
  }
  .kofitext img.kofiimg {
    height: auto ;
    width: 22px ;
    margin-right: 6px;
    margin-bottom: 2px;
    display: initial;
    animation: kofi-wiggle 3s infinite;
  }
  @keyframes kofi-wiggle {
    0% {
      transform: rotate(0) scale(1);
    }
    60% {
      transform: rotate(0) scale(1);
    }
    75% {
      transform: rotate(0) scale(1.12);
    }
    80% {
      transform: rotate(0) scale(1.1);
    }
    84% {
      transform: rotate(-10deg) scale(1.1);
    }
    88% {
      transform: rotate(10deg) scale(1.1);
    }
    92% {
      transform: rotate(-10deg) scale(1.1);
    }
    96% {
      transform: rotate(10deg) scale(1.1);
    }
    100% {
      transform: rotate(0) scale(1);
    }
  }