Front/src/theme/css/share.less
@import (reference) "base.less";

@font-face {
  font-family: social-share;
  src: url(../font/iconfont.woff) format("woff");
}

.share-icon(@content, @color) {
  .text(@color: @color);
  .border(@color: @color);

  &:before {
    content: @content;
  }
}

#share {
  position: absolute;
  .margin(@t: -2em);
  .size(@w: 60px);

  .icon-share {
    .text(@size: 3em);
    .font-icon(before, share);
  }
}

#share-modal {
  .icon {
    display: inline-block;
    word-break: normal;
    position: relative;
    .margin(@l: 10px, @t: 10px);
    .size(50px, 50px);
    .text(@size: 30px, @style: normal, @align: center);
    line-height: 50px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    vertical-align: middle;
    .autoprefix-transition(background @duration-time ease-out);
    font-family: social-share !important;

    &:hover {
      background: #666;
      color: #fff;
    }
  }

  .weibo {
    .share-icon("\f12a", #ff763b);
  }

  .tencent {
    .share-icon("\f07a", #56b6e7);
  }

  .qq {
    .share-icon("\f11a", #56b6e7);
  }

  .qzone {
    .share-icon("\f08a", #fdbe3d);
  }

  .douban {
    .share-icon("\f10a", #33b045);
  }

  .linkedin {
    .share-icon("\f01a", #0077b5);
  }

  .facebook {
    .share-icon("\f03a", #44619D);
  }

  .google {
    .share-icon("\f04a", #db4437);
  }

  .twitter {
    .share-icon("\f06a", #55acee);
  }
}

@media (min-width: 960px) {
  #share {
    .position(@r: 20%);
  }
}

@media (max-width: 960px) {
  #share {
    .position(@r: 0);
  }
}
