update comment textarea style

This commit is contained in:
root 2019-08-03 07:39:07 +00:00
parent 9a8dbf8eb2
commit a1b2a90ddf
3 changed files with 37 additions and 4 deletions

View File

@ -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>', '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'), 'cancel_reply_link' => esc_html__('Cancel Reply', 'akina'),
'label_submit' => esc_html__('BiuBiuBiu~', '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> <div id="upload-img-show"></div>
<!--插入表情面版--> <!--插入表情面版-->
<p id="emotion-toggle" class="no-select"> <p id="emotion-toggle" class="no-select">

View File

@ -15,10 +15,14 @@ if ( akina_option('theme_skin') ) { ?>
#aplayer-float .aplayer-lrc-current { color: <?php echo akina_option('theme_skin'); ?> !important} #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 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{ .insert-image-tips:hover, .insert-image-tips-hover{
color: <?php echo akina_option('theme_skin'); ?>; color: <?php echo akina_option('theme_skin'); ?>;
border: 1px solid <?php echo akina_option('theme_skin'); ?> border: 1px solid <?php echo akina_option('theme_skin'); ?>

View File

@ -3446,7 +3446,7 @@ a.page-numbers {
margin-bottom: 10px; margin-bottom: 10px;
color: #535a63; color: #535a63;
border: 1px solid #ddd; border: 1px solid #ddd;
background-color: rgba(255, 255, 255, 0) background-color: transparent
} }
.comment-respond textarea { .comment-respond textarea {
@ -3454,10 +3454,39 @@ a.page-numbers {
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right; background-position: right;
background-color: rgba(255, 255, 255, 0);
resize: vertical 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 { .comment-respond .form-submit {
clear: both; clear: both;
display: block; display: block;