From a1b2a90ddf0e9f5357acdac5c982c9870272ae7c Mon Sep 17 00:00:00 2001 From: root Date: Sat, 3 Aug 2019 07:39:07 +0000 Subject: [PATCH] update comment textarea style --- comments.php | 2 +- inc/decorate.php | 6 +++++- style.css | 33 +++++++++++++++++++++++++++++++-- 3 files changed, 37 insertions(+), 4 deletions(-) diff --git a/comments.php b/comments.php index cd78188..01f8df4 100644 --- a/comments.php +++ b/comments.php @@ -59,7 +59,7 @@ 'title_reply_to' => '
' . esc_html__('Leave a Reply to', 'akina') . ' %s' . '
', 'cancel_reply_link' => esc_html__('Cancel Reply', 'akina'), 'label_submit' => esc_html__('BiuBiuBiu~', 'akina'), - 'comment_field' => '

Markdown Supported while Forbidden

+ 'comment_field' => '

Markdown Supported while Forbidden

diff --git a/inc/decorate.php b/inc/decorate.php index 5fe56f7..9abdcbb 100644 --- a/inc/decorate.php +++ b/inc/decorate.php @@ -15,10 +15,14 @@ if ( akina_option('theme_skin') ) { ?> #aplayer-float .aplayer-lrc-current { color: !important} -.is-active-link::before { +.is-active-link::before, .commentbody:not(:placeholder-shown)~.input-label, .commentbody:focus~.input-label { background-color: !important } +.commentbody:focus { + border-color: !important +} + .insert-image-tips:hover, .insert-image-tips-hover{ color: ; border: 1px solid diff --git a/style.css b/style.css index 412d15f..e994785 100644 --- a/style.css +++ b/style.css @@ -3446,7 +3446,7 @@ a.page-numbers { margin-bottom: 10px; color: #535a63; border: 1px solid #ddd; - background-color: rgba(255, 255, 255, 0) + background-color: transparent } .comment-respond textarea { @@ -3454,10 +3454,39 @@ a.page-numbers { background-size: contain; background-repeat: no-repeat; background-position: right; - background-color: rgba(255, 255, 255, 0); resize: vertical } +.comment-textarea { + position: relative +} + +.commentbody:placeholder-shown::placeholder { + color: transparent +} + +.commentbody:focus { + border-color: orange; + transition: border-color .25s +} + +.input-label { + position: absolute; + left: 16px; + top: 20px; + padding: 0 6px; + transform-origin: 0 0; + pointer-events: none; + transition: all .25s +} + +.commentbody:not(:placeholder-shown)~.input-label, .commentbody:focus~.input-label { + color: #fff; + background-color: orange; + transform: scale(.75) translate(-2px, -37px); + border-radius: 3px +} + .comment-respond .form-submit { clear: both; display: block;