@tomiaa/comment/es/style.css

基于 gitee Issue 评论的 JS 插件库

.k-comment{--border-color: rgba(0, 0, 0, .12);--space: 8px;--main-color: #409eff;--hovar-color: #ecf5ff;display:flex;flex-direction:column;max-width:1000px;margin:1em auto}.k-comment ul,.k-comment li{list-style:none;margin:0;padding:0}.k-comment a{text-decoration:none;color:inherit}.k-comment img{display:block}.k-comment .k-comment__textarea{padding:var(--space);min-height:100px;margin:0 var(--space);outline:none;border-radius:4px;transition:all .3s;border:1px solid var(--border-color);resize:none}.k-comment .k-comment__textarea:focus{min-height:150px;box-shadow:0 0 12px var(--border-color)}.k-comment .k-comment__login{text-align:right;padding:var(--space) var(--space) 0}.k-comment .k-comment__login button{background-color:transparent;border:1px solid #dcdfe6;padding:var(--space) 15px;line-height:1;height:32px;border-radius:4px;cursor:pointer;transition:all .3s}.k-comment .k-comment__login button:hover,.k-comment .k-comment__login button:focus{background-color:var(--hovar-color)}.k-comment .k-comment__login button:active{border-color:var(--main-color);color:var(--main-color)}.k-comment .k-comment__login button:disabled{cursor:not-allowed}.k-comment .k-comment__ul li{display:flex;border-radius:4px;margin:var(--space);padding:12px;transition:all .3s;box-shadow:0 0 2px var(--border-color)}.k-comment .k-comment__ul li:hover{box-shadow:0 0 12px var(--border-color)}.k-comment .k-comment__ul li .user{text-align:center}.k-comment .k-comment__ul li .user img{width:64px;height:64px;border-radius:50%;transition:all .3s;margin:auto}.k-comment .k-comment__ul li .user .name{margin:.4em 0;transition:all .3s;width:70px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.k-comment .k-comment__ul li .user:hover img{border-radius:5%;transform:scale(1.1)}.k-comment .k-comment__ul li .user:hover .name{color:var(--main-color)}.k-comment .k-comment__ul li .body{display:flex;flex-direction:column;padding:0 20px;box-sizing:border-box;flex:1}.k-comment .k-comment__ul li .body .info{flex:1}.k-comment .k-comment__ul li .body time{display:block;text-align:right;color:#a3aac2}