artalk 2.7.0 → 2.7.2

package/src/style/comment.scss

@@ -1,360 +0,0 @@
-.atk-comment-wrap {
-  overflow: hidden;
-  position: relative;
-  border-bottom: 1px solid transparent;
-
-  &.atk-flash-once {
-    animation: atkFlashOnce 1s ease-in-out 0s;
-
-    @keyframes atkFlashOnce {
-      from { background: rgba(0, 131, 255, 0.2); }
-      to { background: transparent; }
-    }
-  }
-
-  &.atk-unread:before {
-    content: ' ';
-    position: absolute;
-    left: 0;
-    top: 10%;
-    width: 3px;
-    height: 80%;
-    background: var(--at-color-main);
-  }
-
-  &.atk-openable {
-    cursor: pointer;
-
-    &:hover {
-      background: var(--at-color-bg-grey);
-    }
-
-    .atk-height-limit:after {
-      background: transparent !important;
-    }
-  }
-
-  &:last-child {
-    border-bottom: none;
-  }
-}
-
-.atk-comment {
-  display: block;
-  padding: 10px;
-
-  & > .atk-avatar {
-    display: block;
-    padding: 2px 0;
-    float: left;
-
-    img {
-      width: 50px;
-      height: 50px;
-      border-radius: calc($block-radius / 2);
-    }
-  }
-
-  & > .atk-main {
-    display: block;
-    margin-left: 63px;
-
-    & > .atk-header {
-      line-height: 1.5;
-      font-size: 13px;
-      margin-bottom: .5em;
-      overflow: hidden;
-      position: relative;
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-
-      .atk-item {
-        display: flex;
-        align-items: center;
-        margin-top: 2px;
-        margin-bottom: 2px;
-        color: var(--at-color-meta);
-
-        &:not(:last-child) {
-          margin-right: 6px;
-        }
-
-        &.atk-nick, &.atk-nick a {
-          font-size: 14px;
-          color: var(--at-color-main);
-          text-decoration: none;
-        }
-
-        &.atk-reply-at {
-          margin-left: 2px;
-
-          & > .atk-arrow:before {
-            content: '';
-            vertical-align: middle;
-            transform: rotate(90deg);
-            border-bottom: 4px solid var(--at-color-grey);
-            border-left: 3px solid transparent;
-            border-right: 3px solid transparent;
-            display: inline-block;
-            margin-top: -1px;
-          }
-
-          & > .atk-nick {
-            color: var(--at-color-main);
-            cursor: pointer;
-            margin-left: 6px;
-          }
-        }
-      }
-
-      .badge {
-        display: inline-block;
-        color: var(--at-color-meta);
-        background: var(--at-color-bg-grey);
-        padding: 0px 6px;
-        line-height: 17px;
-        border-radius: calc($block-radius / 2);
-
-        &:not(:last-child) {
-          margin-right: 6px;
-        }
-      }
-
-      .atk-badge-wrap > *:last-child {
-        margin-right: 6px;
-      }
-
-      .atk-badge {
-        @extend .badge;
-        color: #fff;
-      }
-
-      .atk-region-badge {
-        @extend .badge;
-      }
-
-      .atk-pinned-badge {
-        @extend .badge;
-        color: #fff;
-        background: #f44336;
-      }
-
-      .atk-ua {
-        @extend .badge;
-      }
-
-      .atk-ua-wrap {
-        @media only screen and (max-width: 768px) {
-          display: block;
-        }
-      }
-    }
-
-    & > .atk-body {
-      display: block;
-      overflow: hidden;
-      position: relative;
-
-      img {
-        max-width: 100%;
-      }
-
-      & > .atk-content {
-        word-break: break-all;
-
-        &.atk-type-collapsed {
-          border: 3px solid var(--at-color-bg-grey);
-          border-bottom: 0;
-          padding: 5px 10px;
-          border-radius: $block-radius $block-radius 0 0;
-          margin-bottom: -5px;
-        }
-
-        & > *:first-child {
-          margin-top: 0;
-        }
-
-        & > *:last-child {
-          margin-bottom: 0;
-        }
-
-        .atk-height-limit-btn {
-          bottom: 5px;
-        }
-      }
-
-      & > .atk-pending {
-        color: var(--at-color-meta);
-        margin: 3px 0;
-        font-size: 13px;
-        padding: 10px 18px;
-        display: block;
-        background: var(--at-color-bg-grey);
-        border-left: 4px solid #f44336;
-      }
-
-      & > .atk-reply-to {
-        padding: 5px 15px;
-        border-left: 3px solid var(--at-color-border);
-        margin-bottom: 10px;
-        position: relative;
-        margin-top: 10px;
-
-        .atk-meta {
-          font-size: 15px;
-
-          .atk-nick {
-            color: var(--at-color-main)
-          }
-        }
-
-        .atk-content {
-          margin-top: 5px;
-        }
-      }
-
-      & > .atk-collapsed {
-        margin: 3px 0;
-        font-size: 13px;
-        padding: 10px 18px;
-        display: block;
-        background: var(--at-color-bg-grey);
-        border-radius: $block-radius;
-
-        .atk-text {
-          color: var(--at-color-meta);
-        }
-
-        .atk-show-btn {
-          color: var(--at-color-main);
-          cursor: pointer;
-          user-select: none;
-          margin-left: 3px;
-          &:hover {
-            color: var(--at-color-main);
-          }
-        }
-      }
-    }
-
-    & > .atk-footer {
-      margin-top: 5px;
-
-      .atk-actions {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        flex-wrap: wrap;
-
-        & > span {
-          color: var(--at-color-meta);
-          font-size: 13px;
-          line-height: 25px;
-          display: inline-flex;
-          cursor: pointer;
-          user-select: none;
-
-          &.atk-error, &.atk-error:hover {
-            color: var(--at-color-red);
-          }
-
-          &:not(:last-child):not(.atk-hide) {
-            margin-right: 16px;
-          }
-
-          &:hover {
-            color: var(--at-color-deep);
-          }
-        }
-      }
-    }
-  }
-
-  /** 内容限高 **/
-  .atk-height-limit:after {
-    position: absolute;
-    z-index: 1;
-    display: block;
-    overflow: hidden;
-    width: 100%;
-    content: " ";
-    bottom: 0;
-    height: 80px;
-    background: var(--at-color-gradient);
-  }
-
-  .atk-height-limit-btn {
-    z-index: 2;
-    position: absolute;
-    left: 50%;
-    bottom: 10px;
-    transform: translateX(-50%);
-    cursor: pointer;
-    border: 1px solid var(--at-color-border);
-    border-radius: $block-radius;
-    background: var(--at-color-bg);
-    padding: 1px 20px;
-    font-size: 15px;
-    color: var(--at-color-meta);
-    user-select: none;
-
-    &:hover {
-      background: var(--at-color-bg-grey);
-    }
-  }
-
-  // 避免重复显示按钮
-  .atk-height-limit .atk-height-limit .atk-height-limit-btn {
-    display: none;
-  }
-
-  // 限高可滚动
-  .atk-height-limit-scroll {
-    // @extend .atk-slim-scrollbar;
-    margin-top: 10px;
-    overflow-y: auto;
-    $cBorder: var(--at-color-border);
-    $cOverwrite: var(--at-color-bg);
-    background:
-      /* Shadow covers */
-      linear-gradient($cOverwrite 1px, transparent 1px calc(100% - 1px)) center top,
-      linear-gradient(transparent calc(100% - 1px), $cOverwrite calc(100% - 1px) 1px) center bottom,
-      /* Shadows */
-      linear-gradient($cBorder 1px, transparent 1px calc(100% - 1px)) center top,
-      linear-gradient(transparent calc(100% - 1px), $cBorder calc(100% - 1px) 1px) center bottom;
-    background-repeat: no-repeat;
-    background-color: transparent;
-    background-size: 100% 1px, 100% 1px, 100% 1px, 100% 1px;
-    /* Opera doesn't support this in the shorthand */
-    background-attachment: local, local, scroll, scroll;
-  }
-}
-
-/** 子评论区域 **/
-.atk-comment-children {
-  & > .atk-comment-wrap {
-    margin-top: 10px;
-    border-left: 1px dashed transparent;
-    border-bottom-color: transparent;
-    &:not(:last-child) {
-      margin-bottom: 10px;
-    }
-
-    & > .atk-comment {
-      padding: 0;
-
-      & > .atk-avatar img {
-        width: 36px;
-        height: 36px;
-      }
-
-      & > .atk-main {
-        margin-left: 47px;
-
-        & > .atk-body > .atk-content {
-        }
-      }
-    }
-  }
-}

package/src/style/editor.scss

@@ -1,194 +0,0 @@
-.atk-main-editor {
-  $editor-padding: 10px;
-  position: relative;
-  overflow: hidden;
-  background: var(--at-color-bg);
-  border: 1px solid var(--at-color-border);
-  border-radius: $block-radius;
-  margin-bottom: 10px;
-
-  @media only screen and (max-width: 768px) {
-    margin-bottom: 7px;
-  }
-
-  &.editor-traveling {
-    margin-top: 5px;
-    margin-bottom: 10px;
-  }
-
-  & > .atk-header {
-    display: flex;
-    flex-direction: row;
-    padding: 10px 14px 0;
-
-    input {
-      flex: 1;
-      width: 100%;
-      font-size: 14px;
-      background: transparent;
-      border: 2px solid transparent;
-      border-radius: calc($block-radius / 2);
-      padding: 6px 5px;
-      resize: none;
-      outline: none;
-
-      &:not(:last-child) {
-        margin-right: 2px;
-      }
-    }
-  }
-
-  & > .atk-textarea-wrap {
-    position: relative;
-
-    & > .atk-textarea {
-      display: block;
-      overflow: hidden;
-      color: var(--at-color-font);
-      font-size: 15px;
-      background-color: var(--at-color-bg);
-      border: 2px solid transparent;
-      border-radius: calc($block-radius / 2);
-      width: 100%;
-      min-height: 120px;
-      margin-top: 2px;
-      padding: 10px 20px;
-      resize: none;
-      word-wrap: break-word;
-      outline: none;
-    }
-
-    & > .atk-comment-closed {
-      pointer-events: none;
-      color: var(--at-color-meta);
-      font-size: 12px;
-      background-color: var(--at-color-bg);
-      border-top: 1px solid var(--at-color-border);
-      padding: 5px 15px;
-      margin-top: 10px;
-      // background: repeating-linear-gradient(145deg, #f2f2f2, #f2f2f2 15px, #fff 0, #fff 30px);
-    }
-
-    & > .atk-send-reply {
-      z-index: 2;
-      position: absolute;
-      right: 7px;
-      bottom: 2px;
-      max-width: calc(100% - 20px);
-      height: 30px;
-      line-height: 30px;
-      font-size: 14px;
-      background: var(--at-color-bg-grey-transl);
-      padding: 0 30px 0 10px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      cursor: pointer;
-      border-radius: calc($block-radius / 2);
-
-      .atk-text {
-      }
-
-      .atk-cancel {
-        position: absolute;
-        right: 0;
-        bottom: 0;
-        height: 30px;
-        text-align: center;
-        width: 30px;
-        line-height: 30px;
-        font-weight: 700;
-
-        &:hover {
-          color: var(--at-color-deep);
-        }
-      }
-    }
-  }
-
-  & > .atk-plug-panel-wrap {
-    position: relative;
-    height: 180px;
-    width: 100%;
-    overflow: hidden;
-    border-top: 1px solid var(--at-color-border);
-    animation: 0.3s both atkFadeIn;
-    transition: 0.2s height ease-in-out;
-  }
-
-  & > .atk-bottom {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    padding: 5px 5px 5px 10px;
-
-    & > .atk-item {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-    }
-
-    .atk-plug-btn {
-      padding: 0 8px;
-      line-height: 24px;
-      cursor: pointer;
-      color: var(--at-color-grey);
-      font-size: $font-size;
-      user-select: none;
-      border-radius: calc($block-radius / 2);
-
-      &:not(:last-child) {
-        margin-right: 2px;
-      }
-
-      &:hover {
-        background: var(--at-color-bg-grey);
-      }
-
-      &.active {
-        color: var(--at-color-main);
-
-        svg.markdown path {
-          fill: var(--at-color-main);
-        }
-      }
-
-      i {
-        color: var(--at-color-grey);
-        display: inline-flex;
-        vertical-align: sub;
-        margin-left: 4px;
-        svg.markdown path {
-          fill: var(--at-color-grey);
-        }
-      }
-    }
-
-    .atk-send-btn {
-      background: var(--at-color-main);
-      color: #fff;
-      font-size: $font-size;
-      border: none;
-      margin: 0;
-      height: 30px;
-      width: 8em;
-      cursor: pointer;
-      transition: opacity 0.3s ease-in-out;
-      outline: none;
-      border-radius: calc($block-radius / 2);
-
-      &:active {
-        opacity: 0.9;
-      }
-    }
-  }
-
-  & > .atk-notify-wrap {
-    z-index: 3;
-    position: absolute;
-    right: -2px;
-    bottom: 40px;
-    width: 225px;
-    opacity: 0.83;
-  }
-}