95 lines
2.0 KiB
HTML
95 lines
2.0 KiB
HTML
<style>
|
|
/* Modernizing the container */
|
|
.comment-card {
|
|
background: #ffffff;
|
|
border: 1px solid #e1e4e8;
|
|
border-radius: 8px;
|
|
padding: 24px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.comment-card h4 {
|
|
margin-top: 0;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* Styling the inputs */
|
|
.comment-card .form-control {
|
|
border-radius: 6px;
|
|
border: 1px solid #d1d5da;
|
|
box-shadow: none;
|
|
transition:
|
|
border-color 0.2s,
|
|
box-shadow 0.2s;
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.comment-card .form-control:focus {
|
|
border-color: #007bff;
|
|
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
|
|
outline: none;
|
|
}
|
|
|
|
.comment-card form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.comment-btn {
|
|
margin-top: 15px; /* Positive space after textarea */
|
|
float: right;
|
|
padding: 8px 12px; /* Taller button */
|
|
align-self: flex-end;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.comment-btn:hover {
|
|
color: #333;
|
|
background-color: #ffffff;
|
|
border-color: #007bff;
|
|
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
|
|
}
|
|
</style>
|
|
|
|
<div class="comment-card">
|
|
<h4>Leave a Comment</h4>
|
|
<form
|
|
role="form"
|
|
method="POST"
|
|
action="{{ url_for('post_comment', post_id=post.id) }}"
|
|
>
|
|
<div class="form-group">
|
|
<input
|
|
type="text"
|
|
name="author"
|
|
class="form-control"
|
|
placeholder="^ Name ^"
|
|
required
|
|
style="margin-bottom: 15px"
|
|
/>
|
|
|
|
<input
|
|
type="text"
|
|
name="honeypot"
|
|
style="display: none !important"
|
|
tabindex="-1"
|
|
autocomplete="off"
|
|
/>
|
|
|
|
<textarea
|
|
name="content"
|
|
class="form-control"
|
|
rows="4"
|
|
placeholder=" /\_/\ ( o.o ) > ^ < Comments may need one day to appear..."
|
|
required
|
|
></textarea>
|
|
</div>
|
|
|
|
<button type="submit" class="btn-read-more comment-btn">
|
|
Post Comment
|
|
</button>
|
|
</form>
|
|
</div>
|