twikoo icon indicating copy to clipboard operation
twikoo copied to clipboard

功能添加与修改

Open HcGys opened this issue 1 year ago • 0 comments

  1. 添加单个评论内容的限高
  2. 将评论框位置从楼中楼最底调整到评论的下面(感觉更符合评论的逻辑,不然楼中楼太长的情况不会默认跳转而且隔着评论会很难受),并且点击评论图标会跳转到评论的位置
  3. 每次评论之后会跳转到新评论的位置
  4. 点击折叠的楼中楼中漏出来的评论图标会让已经折叠的楼中楼展开(默认好像是直接截断的),评论结束之后会还原成原来的状态
  5. 在折叠打开按钮外面套了一层div,用于用户自己配置按钮+背景渐变效果,或者可以定义为使用黑白主题均适配的背景色(比如按钮的背景色来做?) 例如: 这里的渐变背景比较浅 image image
.tk-collapse-wrap, .tk-expand-wrap {
    position: relative;
}
.tk-expand-wrap::after {
    position: absolute;
    z-index: 1;
    display: block;
    overflow: hidden;
    width: 100%;
    content: " ";
    bottom: 0;
    height: 80px;
    background: linear-gradient(180deg, transparent, var(--blur-bg));
    border-radius: 8px;
}
.tk-expand {
    z-index: 2;
    position: absolute;
    left: 50%;
    bottom: 10px;
    text-align: center;
    transform: translate(-50%);
    border: 1px solid var(--block-border);
    border-radius: 6px;
    background: var(--block);
    padding: 1px 20px !important;
    font-size: 15px !important;
    color: var(--text-p3);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: fit-content !important;
    line-height: 1.6;
    height: 28px;
    transition: background .5s !important;
}
.tk-collapse-wrap::before {
    position: absolute;
    z-index: 1;
    display: block;
    overflow: hidden;
    width: 100%;
    content: " ";
    bottom: 0;
    height: 100%;
    background: linear-gradient(transparent calc(50% - 1px), var(--block-border) 1px, transparent calc(50%));
}
.tk-expand._collapse {
    bottom: 0;
    position: relative;
}

HcGys avatar May 16 '24 17:05 HcGys