twikoo
twikoo copied to clipboard
功能添加与修改
- 添加单个评论内容的限高
- 将评论框位置从楼中楼最底调整到评论的下面(感觉更符合评论的逻辑,不然楼中楼太长的情况不会默认跳转而且隔着评论会很难受),并且点击评论图标会跳转到评论的位置
- 每次评论之后会跳转到新评论的位置
- 点击折叠的楼中楼中漏出来的评论图标会让已经折叠的楼中楼展开(默认好像是直接截断的),评论结束之后会还原成原来的状态
- 在折叠打开按钮外面套了一层div,用于用户自己配置按钮+背景渐变效果,或者可以定义为使用黑白主题均适配的背景色(比如按钮的背景色来做?)
例如:
这里的渐变背景比较浅
.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;
}