From a1b2a90ddf0e9f5357acdac5c982c9870272ae7c Mon Sep 17 00:00:00 2001
From: root <root@eriri.sawamura>
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' => '<div class="graybar"><i class="fa fa-comments-o"></i>' . esc_html__('Leave a Reply to', 'akina') . ' %s' . '</div>',
 						'cancel_reply_link' => esc_html__('Cancel Reply', 'akina'),
 						'label_submit' => esc_html__('BiuBiuBiu~', 'akina'),
-						'comment_field' => '<p><i class="iconfont icon-markdown"></i> Markdown Supported while <i class="fa fa-code" aria-hidden="true"></i> Forbidden</p><textarea placeholder="' . esc_attr__('你是我一生只会遇见一次的惊喜', 'akina') . ' ..." name="comment" class="commentbody" id="comment" rows="5" tabindex="4"></textarea>
+						'comment_field' => '<p><i class="iconfont icon-markdown"></i> Markdown Supported while <i class="fa fa-code" aria-hidden="true"></i> Forbidden</p><div class="comment-textarea"><textarea placeholder="' . esc_attr__('你是我一生只会遇见一次的惊喜', 'akina') . ' ..." name="comment" class="commentbody" id="comment" rows="5" tabindex="4"></textarea><label class="input-label">你是我一生只会遇见一次的惊喜 ...</label></div>
                         <div id="upload-img-show"></div>
                         <!--插入表情面版-->
                         <p id="emotion-toggle" class="no-select">
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: <?php echo akina_option('theme_skin'); ?> !important}
 
-.is-active-link::before {
+.is-active-link::before, .commentbody:not(:placeholder-shown)~.input-label, .commentbody:focus~.input-label {
     background-color: <?php echo akina_option('theme_skin'); ?> !important
 }
 
+.commentbody:focus {
+    border-color: <?php echo akina_option('theme_skin'); ?> !important
+}
+
 .insert-image-tips:hover, .insert-image-tips-hover{ 
     color: <?php echo akina_option('theme_skin'); ?>;
     border: 1px solid <?php echo akina_option('theme_skin'); ?>
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;