From 36814d516bb1b5ce90675b680dc73690b0ed4ec2 Mon Sep 17 00:00:00 2001 From: Eltrac <45323514+BigCoke233@users.noreply.github.com> Date: Wed, 22 Jan 2020 16:28:32 +0800 Subject: =?UTF-8?q?=F0=9F=91=8B=20Perf:=20=E8=AF=84=E8=AE=BA=E5=8C=BA?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=A4=A7=E6=94=B9=20+=20=E7=BB=86=E8=8A=82?= =?UTF-8?q?=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/main/comment.css | 142 +++++++++++++++++++++++++++++--------------- assets/css/main/dark.css | 13 ++-- assets/css/main/post.css | 6 +- assets/css/main/special.css | 2 +- 4 files changed, 107 insertions(+), 56 deletions(-) (limited to 'assets/css/main') diff --git a/assets/css/main/comment.css b/assets/css/main/comment.css index ec8e7bb..824ac5e 100644 --- a/assets/css/main/comment.css +++ b/assets/css/main/comment.css @@ -5,10 +5,19 @@ * License: MIT */ /* 评论 */ +.comment { + margin-top: 40px; + display: flex; + flex-direction: column-reverse; +} +.comment .row { + margin: -32px!important; +} .comment-title { + margin: 60px 0; + margin-top: 100!important; + font-size: 26px; text-align: center; - margin: 50px 0; - font-size: 26px } .comment-list,.comment-list li { list-style-type: none @@ -65,6 +74,7 @@ word-break: break-all; vertical-align: center; padding: 10px 16px; + line-height: 1.5 } .comment-content img { max-width: 100% @@ -102,17 +112,30 @@ -moz-box-shadow: 0 0 0 #fff; -webkit-box-shadow: 0 0 0 #fff; } -.comment-by-author > .comment-main > .bubble.comment-content { - background: var(--theme-color) +.comment-by-author > .comment-body-inner > .comment-main > .comment-meta > .comment-date:before { + content: '博主'; + color: gray; + font-size: 0.8em; + background: rgb(240,240,240); + border-radius: 3px; + padding: 2px 3px; + letter-spacing: 2px; + margin-right: 5px; +} +.comment-logined-sign { + margin: 0; + margin-left: -15px; } -.comment-by-author > .comment-main > .bubble.comment-content p { - color: #fff!important; +.at { + margin-left: 0; + color: gray; + margin-right: -10px; } -.comment-by-author > .comment-main > .bubble.comment-content:before { - border-right-color: var(--theme-color) +.comment-children .comment-content { + padding: 15px 25px!important; } -.comment-by-author > .row > .comment-main > .bubble.comment-content > .comment-reply a { - color:#fff!important; +.comment-children .comment-content p { + display: inline; } .comment-reply a { position: absolute; @@ -128,43 +151,79 @@ .comment-reply a:hover { color: rgb(150,150,150) } -.comment-submit button { - display: block; - margin: 10px 0; - border-radius: 6px; +/* 评论按钮 */ +.comment-submit { + display: inline-block; + margin: 0; + border-radius: 4px; border: none; - background: linear-gradient(to right,#00f,var(--theme-color)); - color: #fff; - padding: 16px 10px; - width: 100%; + background: rgb(237,237,237); + padding: 10px 16px; cursor: pointer; transition: opacity .2s; - margin-top: -14px + margin-top: -14px; + vertical-align: middle; + float: right; + transition: .2s; +} +.comment-submit:hover { + background: rgb(227,227,227) +} +.cancel-comment-reply a { + margin: 5px 1px; + background: #fff; + color: #000; + border-radius: 4px; + border: 1px solid #ddd; + padding: 2px 3px; +} +/* OwO */ +.owo-img { + height: 30px; + vertical-align: middle; + margin: 0 3px; +} +.OwO { + margin: 0; + display: inline-block; + vertical-align: middle; } -.comment-submit button:hover { - opacity: .9 +/* 评论表单 */ +#comment-form { + position: relative; + padding: 30px; + background: #fff; + box-sizing: border-box; } -.comment-input input,.comment-textarea { +.comment-textarea { + width: 100%; + border: none; + max-width: 100%; +} +.comment-input input { display: block; - resize: none; - border: 2px solid #ddd; - border-radius: 5px; width: 100%; - padding: 14px; + border: none; + resize: none; + outline: none; + padding: 10px 5px; + border-bottom: 1px dashed #ddd; + transition: .2s; +} +.comment-input input:hover { + border-bottom: 1px dashed #000; +} +.comment-input input, +.comment-textarea { + background: transparent; outline: none; } -.comment-input { - margin-top: -10px; - margin-bottom: -20px; -} + #comment-form label { display: none } -.comment-closed-alert { - text-align: center; -} .comment-pagenav { - margin-left: -20px; + margin-left: -40px; } .comment-pagenav li { list-style-type: none; @@ -199,22 +258,9 @@ background: #f1f1f1; padding: 20px; text-align: center; + border-radius: 2px; } #response { text-align: center; margin-top: 60px; -} - -/* OwO */ -.owo-img { - height: 34px; - vertical-align: middle; - margin: 0 3px; -} -.OwO { - margin-left: 15px; - margin-top: 0; -} -.owo-para { - margin-top: 0; } \ No newline at end of file diff --git a/assets/css/main/dark.css b/assets/css/main/dark.css index cf7e4ae..3d891ff 100644 --- a/assets/css/main/dark.css +++ b/assets/css/main/dark.css @@ -133,7 +133,8 @@ .body-dark .post-body, .body-dark .saying-item, .body-dark .post-item, -.body-dark .post-pagenav a { +.body-dark .post-pagenav a, +.body-dark #comment-form { box-shadow:0 0 36px #323232; -moz-box-shadow:0 0 36px #323232; -webkit-box-shadow:0 0 36px #323232 @@ -195,13 +196,15 @@ .body-dark .post-content th, .body-dark .post-item, .body-dark .post-pagenav a, -.body-dark .search-form input { +.body-dark .search-form input, +.body-dark #comment-form { background:#5a5a5a!important } /* Need #6e6e6e bg */ .body-dark .OwO-bar, .body-dark .OwO-item, -.body-dark .index-banner { +.body-dark .index-banner, +.body-dark .comment-submit { background-color:#6e6e6e!important } .body-dark .index-banner { @@ -247,7 +250,9 @@ .body-darl .login a, .body-dark .alert, .body-dark .banner-content.banner-font-black, -.body-dark .post-pagenav a { +.body-dark .post-pagenav a, +.body-dark .comment-submit, +.body-dark .header-meta a { color:#fafafa!important } .body-dark .options-theme-label { diff --git a/assets/css/main/post.css b/assets/css/main/post.css index d8471fe..5bdf454 100644 --- a/assets/css/main/post.css +++ b/assets/css/main/post.css @@ -14,7 +14,7 @@ .post-item { margin-bottom: 10px; } -.post-body,.post-item,.saying-item { +.post-body,.post-item,.saying-item,#comment-form { background: #fff; box-shadow: 0 0 36px var(--shadow-color); -moz-box-shadow: 0 0 36px var(--shadow-color); @@ -57,8 +57,7 @@ color: #c8c8c8; font-size: 14px; padding: 26px; - padding-top: 0; - margin-top: -20px + padding-top: 0!important; } .post-tags a { color: #bebebe; @@ -109,6 +108,7 @@ .post-content, .saying-inner { padding: 26px; + padding-bottom: 5px!important; line-height: 28px; letter-spacing: 2px; word-break: break-all diff --git a/assets/css/main/special.css b/assets/css/main/special.css index 1ae2867..8a85648 100644 --- a/assets/css/main/special.css +++ b/assets/css/main/special.css @@ -182,7 +182,7 @@ color: #000; text-align: center; margin: 0; - margin-top: 130px!important; + margin-top: 50px!important; padding: 25px 10px; line-height: 26px; width: 100%; -- cgit v1.2.3