ft_transcendence/containers/react/src/styles/Profile.css
2023-06-24 00:51:36 +02:00

162 lines
2.5 KiB
CSS

/* Container style */
.file-upload-container {
margin-left: 2rem;
font-size: 1.7rem;
/* background: #5843e4; */
/* color:#f5f5f5; */
margin: 0 16px;
text-decoration: none;
padding: 10px 16px;
border-radius: 20px;
display: flex;
align-items: center;
gap: 10px;
}
/* File input style */
.file-input {
/* background: #5843e4; */
/* color:#f5f5f5; */
display: none; /* Hide the default file input */
}
.file-label {
padding: 8px 12px;
background-color: #f2f2f2;
color: #555;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.file-label:hover {
background-color: #e0e0e0;
}
/* Button style */
.upload-button {
padding: 8px 12px;
background-color: #5843e4;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.upload-button:hover {
background-color: #0056b3;
}
.page {
text-align: center;
overflow-y: scroll;
/* height: 80vh; */
/* height: 50vh; */
/* width: 50vh; */
/* background-color: black; */
}
.profile {
align-items: center;
text-align: center;
flex-direction: row;
color: white;
}
.profile-pic {
height: 350px;
width: 350px;
border-radius: 50%;
border: thick;
border-color: red;
margin-left: 20px;
/* border-image: linear-gradient(90deg, #5843e4, #5a0760); */
}
.home{
/* margin-top: -100px; */
/* display:inline-block; */
/* flex-direction: column; */
/* position: absolute; */
background-color: black;
text-align: center;
}
.history{
display:inline-block;
color: white;
background-color: #5843e4;
border-radius: 20px;
padding: 1.3% 30%;
font-size: 1.7rem;
text-decoration: none;
font-weight: bold;
}
.div_history {
flex-direction: row;
align-items: center;
/* margin-top: -80px; */
}
.edit_name {
margin-left: 2rem;
font-size: 1.7rem;
background: #5843e4;
color:#f5f5f5;
margin: 0 16px;
text-decoration: none;
padding: 10px 16px;
border-radius: 20px;
}
.modal {
position:initial;
width: 400px;
height: 150px;
margin: auto;
padding: 0 2rem;
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
background-color: rgb(42, 41, 41);
}
.text {
background-color: black;
color: grey;
margin-bottom: 10px;
}
.button{
display: inline-block;
color: white;
background-color: #5843e4;
border-radius: 15px;
padding: 8px;
font-size: 20px;
text-decoration: none;
font-weight: bold;
}
/* canvas {
margin-top: 20px;
border: solid 0px #ccc;
background-color: #000;
border-radius: 3%;
} */