halo-theme-dream/src/css/dshare.less

梦之城，童话梦境，动漫类型博客主题。

@charset "utf-8";
/* CSS Document */
@font-face {
  font-family: "dshare";
  src: url("../font/dshare.woff2") format("woff2")
}

.dshare {
  &-container {
    font-family: "dshare" !important;

    .dshare-icon {
      width: 32px;
      height: 32px;
      margin: 4px;
      font-size: 20px;
      line-height: 32px;
      border: 1px solid;
      text-align: center;
      vertical-align: middle;
      display: inline-block;
      border-radius: 50%;
      transition: background 0.6s ease-out 0s;

      &:hover {
        color: #fff;
      }
    }

    .icon-qq {
      color: #56b6e7;
      border-color: #56b6e7;

      &:before {
        content: '\f01a';
      }

      &:hover {
        background: #56b6e7;
      }
    }

    .icon-qzone {
      color: #FDBE3D;
      border-color: #FDBE3D;

      &:before {
        content: '\f02a';
      }

      &:hover {
        background: #FDBE3D;
      }
    }

    .icon-wechat {
      position: relative;
      color: #7bc549;
      border-color: #7bc549;

      &:before {
        content: '\f03a';
      }

      &:hover {
        background: #7bc549;

        .wechat-qrcode {
          opacity: 1;
          transform: translateY(-15px);
        }
      }
    }

    .icon-weibo {
      color: #ff763b;
      border-color: #ff763b;

      &:before {
        content: '\f04a';
      }

      &:hover {
        background: #ff763b;
      }
    }

    .icon-douban {
      color: #33b045;
      border-color: #33b045;

      &:before {
        content: '\f05a';
      }

      &:hover {
        background: #33b045;
      }
    }

    .icon-linkedin {
      color: #0077B5;
      border-color: #0077B5;

      &:before {
        content: '\f06a';
      }

      &:hover {
        background: #0077B5;
      }
    }

    .icon-facebook {
      color: #44619D;
      border-color: #44619D;

      &:before {
        content: '\f07a';
      }

      &:hover {
        background: #44619D;
      }
    }

    .icon-twitter {
      color: #55acee;
      border-color: #55acee;

      &:before {
        content: '\f08a';
      }

      &:hover {
        background: #55acee;
      }
    }

    .icon-google {
      color: #db4437;
      border-color: #db4437;

      &:before {
        content: '\f09a';
      }

      &:hover {
        background: #db4437;
      }
    }

    .icon-link {
      color: var(--theme);
      border-color: var(--theme);

      &:before {
        content: '\f10a';
      }

      &:hover {
        background: var(--theme);
      }
    }

    .icon-poster {
      color: var(--theme);
      border-color: var(--theme);

      &:before {
        content: '\f11a';
      }

      &:hover {
        background: var(--theme);
      }
    }

    .wechat-qrcode {
      opacity: 0;
      position: absolute;
      height: 165px;
      width: 140px;
      top: -150px;
      left: -54px;
      font-size: 12px;
      border: 1px solid #eee;
      border-radius: 5px;
      background: #fff;
      box-shadow: 0 2px 10px #aaa;
      pointer-events: none;
      transition: all 0.3s;

      &:after {
        content: '';
        position: absolute;
        left: 50%;
        margin-left: -8px;
        bottom: -13px;
        width: 0;
        height: 0;
        border-width: 8px 8px 6px 8px;
        border-style: solid;
        border-color: #fff transparent transparent transparent;
      }

      h4 {
        margin: 0;
        padding: 0;
        height: 25px;
        line-height: 25px;
        color: #777;
        background-color: #f3f3f3;
      }

      img {
        width: 100%;
      }
    }
  }

  &-poster {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 99999;
    transition: all 0.3s;
    background: rgba(0, 0, 0, 0.3);

    &.close-animation {
      opacity: 0;

      .dshare-poster-container > * {
        transform: scale(0.4);
      }
    }

    &-container {
      top: 50%;
      left: 50%;
      display: grid;
      position: absolute;
      width: 360px;
      max-width: 90%;
      transform: translate(-50%, -50%);
    }

    &-download {
      width: 50px;
      height: 50px;
      margin-top: 20px;
      line-height: 50px;
      font-size: 24px;
      cursor: pointer;
      background: var(--theme);
      border-radius: 50%;
      color: #fff;
      text-align: center;
      transition: all 0.3s;
      justify-self: center;
    }

    &-crad {
      overflow: hidden;
      background: #fff;
      border-radius: 6px;
      user-select: none;
      transition: all 0.3s;
      font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    &-cover {
      position: relative;
      margin-bottom: -68px;

      &:after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 100%;
        height: 140px;
        background: linear-gradient(180deg,transparent,#fff);
      }

      img{
        width: 100%;
        min-height: 180px;
        max-height: 340px;
        object-fit: cover;
      }
    }

    &-content {
      padding: 10px;
    }

    &-title {
      color: #333;
      position: relative;
      margin-top: 8px;
      padding-bottom: 14px;
      font-size: 18px;

      &:before {
        content: '';
        position: absolute;
        width: 20%;
        height: 2px;
        left: 0;
        bottom: 8px;
        border-radius: 5px;
        background: var(--theme);
      }

      &:after {
        content: '';
        position: absolute;
        width: 63%;
        height: 2px;
        left: 0;
        bottom: 1px;
        border-radius: 5px;
        background: var(--theme);
      }
    }

    &-desc {
      margin-top: 12px;
      text-indent: 2em;
      color: var(--main);
      line-height: 1.6em;
    }

    &-footer {
      margin-top: 28px;
      border: 1px #ccc dashed;
      border-radius: 5px;
      display: flex;
    }

    &-qrcode {
      width: 70px;

      &-info {
        margin: auto 0 auto 8px;
      }

      &-site {
        font-size: 16px;
      }

      &-msg {
        margin-top: 4px;
        color: #999;
      }
    }
  }
}