diff --git a/frontend-react/src/styles/person-icon.png b/frontend-react/src/styles/person-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..7eded7e2a82cf5ac3ce5bd6de5845ae0198deb6e
Binary files /dev/null and b/frontend-react/src/styles/person-icon.png differ
diff --git a/frontend-react/src/styles/recipe.jpeg b/frontend-react/src/styles/recipe.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..6345498511721b64741f9e4b688e139580a5bd3d
Binary files /dev/null and b/frontend-react/src/styles/recipe.jpeg differ
diff --git a/frontend-react/src/styles/refresh.jpg b/frontend-react/src/styles/refresh.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ba27e68bc63fb20b75be0ccf9cb53c43643036e8
Binary files /dev/null and b/frontend-react/src/styles/refresh.jpg differ
diff --git a/frontend-react/src/styles/style.css b/frontend-react/src/styles/style.css
index 4e24414bd9e3e0d9ab5a507d63ba042ddb44a175..cc38bcc0373c77fe712ce27e5e2b7fbf5b26270f 100644
--- a/frontend-react/src/styles/style.css
+++ b/frontend-react/src/styles/style.css
@@ -3,12 +3,11 @@ body{
margin: 0;
}
-
.main {
transition: margin 400ms cubic-bezier(0.17,0.04,0.03,0.94);
position: relative;
- height: calc(100vh - 40px);
- max-width: 900px;
+ height: calc(90vh - 0px);
+ max-width: 700px;
margin: auto;
margin-top: 20px;
background-color: #d0d0d0;
@@ -17,110 +16,6 @@ body{
overflow: hidden;
}
-#sidebar {
- background: linear-gradient(135deg, #be7819 0%, #fd8d00 100%);
- position: absolute;
- top: -250px;
- left: 0;
- width: 100%;
- height: 250px;
- box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
- transition: top 400ms cubic-bezier(0.17,0.04,0.03,0.94);
- color: white;
- font-family: 'Times New Roman';
-}
-
-.down_label {
- display: block;
- position: absolute;
- right: 50px;
- top: 0;
- cursor: pointer;
- background: #fd8d00;
- width: 30px;
- height: 20px;
- border-radius: 0 0 5px 5px;
- color: white;
- font-size: 1em;
- text-align: center;
- cursor: pointer;
- transition: all 400ms cubic-bezier(0.17,0.04,0.03,0.94);
- box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
- padding: 10px;
- z-index: 100;
-}
-
-
-.down_label:hover {
- box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15)
-}
-
-
-.down_label:after, .down_button:checked + .down_label {
- content: "=";
- font-family: "Arial";
-}
-
-
-.down_button:checked ~ #sidebar {
- top: 0
-}
-
-
-.down_button:checked ~ .down_label {
- top: 250px;
- background-color: #f1ed04;
-}
-
-
-.down_button:checked ~ .main {
- margin-top: 300px
-}
-
-
-ul{
- margin: 0;
- padding: 0;
- background: linear-gradient(135deg, #be7819 0%, #fd8d00 100%);
- color: white;
-}
-li{
- list-style-type: none;
- display: inline-block;
- color: inherit;
-}
-.bar{
- margin-left: 30px;
- padding: 8px;
- border: none;
- cursor: pointer;
- background: none;
- font-size: 1.3em;
- color: inherit;
- font-family: "Arial";
-}
-
-#home{
- cursor: default;
-}
-.bar:hover{
- transition: 0.3s;
- background: #b5c7c3;
-}
-#dark_theme{
- position: absolute;
- right: 30px;
- margin-top: 0;
- margin-bottom: 0;
-}
-
-#text{
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
-}
-
footer{
margin: 20px;
color: #5b5b5b;
@@ -130,69 +25,29 @@ footer{
color: white;
}
-.msg_area{
+.msg_section{
position: absolute;
width: 100%;
height: calc(100% - 103px);
- background-image: url("light.jpeg");
+ background-image: url("dark.jpeg");
background-size: cover;
overflow: auto;
}
-.msg_area.black{
- background-image: url("dark.jpeg");
-}
.header{
margin: auto;
padding: 10px;
text-align: center;
- font-size: 1.5em;
- color: rgb(255, 115, 0);
- background: rgb(211, 170, 130);
+ font-size: 1.6em;
+ color: rgb(255, 255, 255);
+ background: rgb(255,255,255);
+ background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(129,129,129,1) 35%, rgba(0,0,0,1) 100%);
border-bottom: 3px solid rgb(255, 255, 255);
border-top-left-radius: 30px;
border-top-right-radius: 30px;
font-family: 'Times New Roman', Times, serif;
- font-size: 1.6em;
-}
-.refresh {
- position: absolute;
- top: 10px;
- width: 30px;
- height: 22px;
- right: 20px;
- border: none;
- cursor: pointer;
- appearance: none;
- background-color: inherit;
-}
-.update {
- position: absolute;
- right: 0;
- top: 0;
- left: 0;
- bottom: 0;
- width: 30px;
- height: 22px;
- transition: .2s;
-}
-.update.hover {
- position: absolute;
- top: 0;
- right: 0;
- left: 0;
- bottom: 0;
- opacity: 0;
- transition: opacity .2s;
-}
-.refresh:hover .update.hover {
- opacity: 1;
- transform: rotate(180deg);
-}
-.refresh:hover .update {
- opacity: 0;
- transform: rotate(180deg);
}
+
.left_message{
display: flex;
max-width: 80%;
@@ -221,13 +76,13 @@ footer{
.msg.left{
margin-left: 10px;
border-bottom-right-radius: 10px;
- background: linear-gradient(135deg, #d7a858 0%, #ca7b47 100%);
+ background: linear-gradient(135deg, #ffffff 0%, #818181 100%);
}
.msg.right{
margin-right: 10px;
border-bottom-left-radius: 10px;
color: white;
- background: linear-gradient(135deg, #d7a858 0%, #ca7b47 100%);
+ background: linear-gradient(135deg, #818181 0%, #ffffff 100%);
}
.mes_info{
display: flex;
@@ -265,12 +120,12 @@ footer{
background-repeat: no-repeat;
background-position: center;
background-size: cover;
- background-image: url(person1.png);
+ background-image: url(person-icon.png);
border-radius: 50%;
}
.icon.left{
- background-image: url("person.png")
+ background-image: url(person-icon.png)
}
@@ -280,12 +135,14 @@ footer{
width: 100%;
height: 50px;
bottom: 0;
- background: rgb(211, 170, 130);
+ background: rgb(255,255,255);
+ background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(129,129,129,1) 35%, rgba(0,0,0,1) 100%);
border-top: 3px solid white;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}
-#input_area{
+
+#input_section{
display: flex;
width: 60%;
flex: 1;
@@ -298,6 +155,7 @@ footer{
overflow-y: auto;
resize: none;
}
+
.send_button{
width: 60px;
margin: 8px 8px 8px 3px;
@@ -305,13 +163,14 @@ footer{
border: none;
border-radius: 5px 5px 15px 5px;
color: #ffffff;
- background-color: #d89a4e;
+ background-color: #818181;
transition-duration: 0.3s;
overflow: hidden;
text-align: center;
}
+
.send_button:hover{
- background-color: #ffffff;
+ background-color: #e3e2f3;
}
footer{
@@ -319,37 +178,4 @@ footer{
margin-bottom: 5px;
margin-left: 20px;
color: #000000;
-}
-
-@media (max-width: 767px) {
- .mes_text{
- font-size: 2em;
- }
- .mes_info{
- font-size: 2.5em;
- }
- .msg_area{
- height: calc(100% - 93px);
- }
- .header{
- padding: 5px;
- }
- .refresh{
- top: 5px;
- }
- .bar {
- padding: 6px;
- margin-left: 10px;
- font-size: 0.8em;
- }
-
- #dark_theme {
- right: 10px;
- top: 0.3px;
- }
-
- #text{
- font-size: 0.8em;
- }
-
}
\ No newline at end of file