1 line
4.5 KiB
CSS
1 line
4.5 KiB
CSS
.article-page{background:#fff;display:flex;flex-direction:column;min-height:100vh}.article-nav{backdrop-filter:blur(.5rem);-webkit-backdrop-filter:blur(.5rem);background:hsla(0,0%,100%,.9);border-bottom:.025rem solid rgba(0,0,0,.06);left:0;position:fixed;right:0;top:0;z-index:100}.article-nav .nav-content{align-items:center;display:flex;height:1.1rem;padding:0 .6rem;position:relative}.article-nav .nav-content .nav-back{align-items:center;display:flex;height:1.5rem;justify-content:center;margin-left:-.25rem;width:1.5rem}.article-nav .nav-content .nav-title{color:#1a1a1a;font-size:.8rem;font-weight:500;left:50%;position:absolute;transform:translateX(-50%)}.article-nav .nav-content .nav-placeholder{flex-shrink:0;width:1.25rem}.article-scroll{flex:1}.article-content{padding:.6rem .8rem}.article-title{color:#1a1a1a;display:block;font-size:1rem;font-weight:600;line-height:1.4;margin-bottom:.5rem}.article-meta{align-items:center;border-bottom:.025rem solid #f2f3f5;color:#969799;display:flex;font-size:.65rem;margin-bottom:.8rem;padding-bottom:.6rem}.article-meta .meta-source{color:#1989fa;margin-right:.5rem}.article-meta .meta-time{margin-right:.5rem}.article-meta .meta-read{flex:1;text-align:right}.article-body{margin-bottom:.6rem}.article-paragraph{color:#323233;display:block;font-size:.8rem;line-height:1.85;margin-bottom:.5rem;text-align:justify}.article-images{margin-bottom:.6rem}.article-images .article-img{border-radius:.2rem;margin-bottom:.4rem;width:100%}.action-bar{align-items:center;background:#f7f8fa;border-radius:.4rem;display:flex;justify-content:space-around;margin:0 .8rem;padding:.7rem .8rem}.action-bar .action-item{align-items:center;display:flex;gap:.2rem}.action-bar .action-item .action-text{color:#646566;font-size:.7rem}.comment-section{margin-top:.8rem;padding:0 .8rem}.comment-header{align-items:baseline;display:flex;margin-bottom:.6rem}.comment-header .comment-title{color:#1a1a1a;font-size:.85rem;font-weight:600}.comment-header .comment-count{color:#969799;font-size:.7rem;margin-left:.2rem}.comment-list .comment-item{border-bottom:.025rem solid #f2f3f5;display:flex;padding:.6rem 0}.comment-list .comment-item .comment-avatar{border-radius:50%;flex-shrink:0;height:1.8rem;width:1.8rem}.comment-list .comment-item .comment-body{flex:1;margin-left:.5rem}.comment-list .comment-item .comment-top{align-items:center;display:flex;justify-content:space-between;margin-bottom:.25rem}.comment-list .comment-item .comment-top .comment-name{color:#323233;font-size:.7rem;font-weight:500}.comment-list .comment-item .comment-top .comment-time{color:#c8c9cc;font-size:.6rem}.comment-list .comment-item .comment-text{color:#323233;display:block;font-size:.75rem;line-height:1.6;margin-bottom:.3rem}.comment-list .comment-item .comment-actions{align-items:center;display:flex}.comment-list .comment-item .comment-actions .comment-like{align-items:center;display:flex;gap:.1rem;padding:.1rem 0}.comment-list .comment-item .comment-actions .comment-like .like-count{color:#969799;font-size:.6rem}.comment-list .comment-item .comment-actions .comment-like .like-count.liked{color:#ee0a24}.comment-list .reply-list{background:#f7f8fa;border-radius:.3rem;margin-top:.4rem;padding:.4rem .5rem}.comment-list .reply-item{display:flex;padding:.3rem 0}.comment-list .reply-item + .reply-item{border-top:.025rem solid #ebedf0}.comment-list .reply-item .reply-avatar{border-radius:50%;flex-shrink:0;height:1.4rem;width:1.4rem}.no-comments{color:#c8c9cc;font-size:.7rem;padding:1.5rem 0;text-align:center}.comment-input-bar{align-items:center;background:#fff;border-top:.025rem solid #f2f3f5;display:flex;gap:.4rem;padding:.4rem .6rem}.comment-input-bar .input-wrap{background:#f7f8fa;border-radius:1rem;flex:1;padding:.3rem .6rem}.comment-input-bar .input-wrap .comment-input{font-size:.7rem;height:1.1rem;line-height:1.1rem}.comment-input-bar .send-btn{background:#1989fa;border-radius:1rem;flex-shrink:0;padding:.3rem .7rem}.comment-input-bar .send-btn .send-text{color:#fff;font-size:.7rem;font-weight:500}.comment-bottom-safe{height:2.5rem}.empty-article-wrap{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:5rem .8rem 0}.empty-article-wrap .empty-article-icon{font-size:2rem;margin-bottom:.6rem;opacity:.4}.empty-article-wrap .empty-article-text{color:#969799;font-size:.75rem;margin-bottom:.8rem}.empty-article-wrap .empty-article-back-btn{background:#1989fa;border-radius:1rem;padding:.4rem 1.2rem}.empty-article-wrap .empty-article-back-text{color:#fff;font-size:.7rem;font-weight:500}:root,page{--primary-color:#07c160} |