Commit f28254f9 authored by IronHammer Std's avatar IronHammer Std
Browse files

调整了样式和质感(玄学)

parent 85ad82ed
...@@ -236,7 +236,7 @@ function App() { ...@@ -236,7 +236,7 @@ function App() {
<> <>
<div className="submit-container"> <div className="submit-container">
<form id="todoForm" onSubmit={handleSubmit}> <form id="todoForm" onSubmit={handleSubmit}>
<h3>用户名称</h3> <div className='form-text'><h3>用户名称</h3></div>
<input <input
type="text" type="text"
id="username" id="username"
...@@ -245,7 +245,7 @@ function App() { ...@@ -245,7 +245,7 @@ function App() {
onChange={(e) => setUsername(e.target.value)} onChange={(e) => setUsername(e.target.value)}
required required
></input> ></input>
<h3>评论内容</h3> <div className='form-text'><h3>评论内容</h3></div>
<input <input
type="text" type="text"
id="comment" id="comment"
...@@ -254,13 +254,12 @@ function App() { ...@@ -254,13 +254,12 @@ function App() {
onChange={(e) => setComment(e.target.value)} onChange={(e) => setComment(e.target.value)}
required required
></input> ></input>
<div> <div className="submit-button">
<button type="submit">提交</button> <button type="submit">提交</button>
</div> </div>
</form> </form>
</div> </div>
<h2>评论列表</h2> <div className="comment-topbar">
<div className="refresh-button">
{comments.length !== 0 && <p>{commentCount}条评论</p>} {comments.length !== 0 && <p>{commentCount}条评论</p>}
{comments.length === 0 && <p>暂无评论</p>} {comments.length === 0 && <p>暂无评论</p>}
<button type="button" onClick={fetchComments} disabled={loading}> <button type="button" onClick={fetchComments} disabled={loading}>
......
...@@ -23,7 +23,7 @@ a:hover { ...@@ -23,7 +23,7 @@ a:hover {
} }
body { body {
background-color: #f7f7f7; background-color: #f2f2f2;
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
padding: 0; padding: 0;
margin: 0; margin: 0;
...@@ -63,28 +63,30 @@ body { ...@@ -63,28 +63,30 @@ body {
form { form {
justify-content: space-between; justify-content: space-between;
background-color: #eeeeee; background: linear-gradient(145deg, #f6ffff, #cfd6dc);
border: 1px solid #ccc; border: 1px solid #ccc;
margin-left: 1rem;
margin-right: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
padding: 1rem 4rem; padding: 0.5rem 2rem;
box-shadow: 14px 14px 20px #dde4ea,
-14px -14px 20px #eff8fe;
} }
input[type="text"] { input[type="text"] {
flex: 1; flex: 1;
padding: 0.5rem; padding: 0.5rem 4rem;
font-size: 1rem; font-size: 1rem;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 4px; border-radius: 4px;
background-color: #fff; background-color: #fff;
color: #111; color: #111;
margin-left: 1rem;
margin-right: 1rem;
} }
button { button {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
margin-top: 0.5rem; margin-top: 0.5rem;
margin-bottom: 1rem; margin-bottom: 0.5rem;
border: none; border: none;
background-color: #10c266; background-color: #10c266;
color: #fff; color: #fff;
...@@ -102,11 +104,23 @@ button:focus-visible { ...@@ -102,11 +104,23 @@ button:focus-visible {
outline: 4px auto -webkit-focus-ring-color; outline: 4px auto -webkit-focus-ring-color;
} }
.refresh-button { .form-text{
display: flex;
justify-content: flex-start;
margin-left: 1rem;
}
.submit-button {
display: flex;
justify-content: flex-end;
margin-top : 0.5rem;
}
.comment-topbar {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0; padding: 0.5rem 2rem;
} }
...@@ -124,6 +138,13 @@ button:focus-visible { ...@@ -124,6 +138,13 @@ button:focus-visible {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.comments-container ul li:hover {
border-left: #E00000 5px solid;
background: linear-gradient(145deg, #f6ffff, #cfd6dc);
box-shadow: 31px 31px 62px #c4cacf,
-31px -31px 62px #ffffff;
}
.comments-container ul li .comment-name { .comments-container ul li .comment-name {
display: flex; display: flex;
align-items: left; align-items: left;
...@@ -132,6 +153,10 @@ button:focus-visible { ...@@ -132,6 +153,10 @@ button:focus-visible {
color: #666; color: #666;
} }
.comments-container ul li:hover .comment-name {
border-bottom: 1px solid #BBBBBB;
}
.comments-container ul li .comment-delete { .comments-container ul li .comment-delete {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment