Skip to content
Snippets Groups Projects
Unverified Commit f6f1236f authored by Avanish Singh's avatar Avanish Singh Committed by GitHub
Browse files

Add files via upload

parent 5353d8d4
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend-react/src/styles/person-icon.png 0 → 100644
+ 0
− 0
View file @ f6f1236f
frontend-react/src/styles/person-icon.png

32.3 KiB

frontend-react/src/styles/recipe.jpeg 0 → 100644
+ 0
− 0
View file @ f6f1236f
frontend-react/src/styles/recipe.jpeg

98.1 KiB

frontend-react/src/styles/refresh.jpg 0 → 100644
+ 0
− 0
View file @ f6f1236f
frontend-react/src/styles/refresh.jpg

10.6 KiB

frontend-react/src/styles/style.css
+ 21
− 195
View file @ f6f1236f
......@@ -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
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