overleaf/services/web/frontend/stylesheets/app/bonus.less

@twitter-color : #1DA1F2;
@facebook-color : #3B5998;
@email-color : #808B9A;
@link-to-us-color : #406EB3;

.bonus {
  margin-top: 15px;
  .page-header h1 {
    text-align: center;
  }

  h2 {
    text-align: center;
    font-size: 20px;
    line-height: 28px;
    margin-bottom: @line-height-computed;
    margin-top: 0;
    &.direct-link {
      margin-top: @line-height-computed;
    }
  }

  .bonus-banner {
    .bonus-top {
      border-bottom: 1px solid lighten(@blue, 40%);
    }
    .title {
      a {
        display: flex;
        align-items: center;
        font-size: 18px;
        padding: 20px;
        background-color: white;
        border-bottom: 1px solid lighten(@blue, 40%);
        color: @blue;
        > i {
          margin-right: 10px;
        }
        &:hover,
        &:focus {
          background-color: lighten(@blue, 45%);
          text-decoration: none;
        }
      }
    }
    a.twitter > i {
      color: @twitter-color;
    }
    a.facebook > i {
      color: @facebook-color;
    }
    a.email > i {
      color: @email-color;
    }
    a.link > i {
      color: @link-to-us-color;
    }
    h2.direct-link {
    }
  }

  p.thanks {
    font-size: 18px;
    line-height: 28px;
    margin-top: 10px;
    text-align: center;
  }

  .number {
    position: absolute;
    margin-left: -13px;
    width: 26px;
    padding: 3px 0;
    text-align: center;
    background-color: #ddd;
    &.active {
      background-color: @blue;
      color: white;
    }
    border-radius: 3px;
  }

  .progress {
    margin-top: @line-height-computed / 2;
    margin-left: -15px;
    margin-right: -15px;
    height: 30px;
  }

  .perk {
    position: absolute;
    background-color: #ddd;
    border-radius: 5px;
    text-align: center;
    padding: 5px 5px;
    min-width: min-content;
    width: 110px;
    margin-left: -50px;
    font-size: 14px;
    &:before {
      border-bottom: 8px solid #ddd;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      content: '';
      position: absolute;
      left: 42px;
      top: -8px;
    }
    &.active {
      color: white;
      background-color: @blue;
      &:before {
        border-bottom: 8px solid @blue;
      }
    }
  }
}

.link-modal {
  text-align: center;
  textarea {
    width: 95%;
    margin-bottom: 0;
  }
}