- Fix but not finished lobby page
    - Add Button nav bar functionality
This commit is contained in:
Mathis Degryck
2024-09-17 20:54:15 +02:00
parent 53441d4785
commit 9491d795bf
6 changed files with 76 additions and 40 deletions

View File

@ -3,10 +3,10 @@
/* ::: :::::::: */
/* liveChat.css :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: marvin <marvin@student.42.fr> +#+ +:+ +#+ */
/* By: madegryc <madegryc@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/30 13:53:39 by edbernar #+# #+# */
/* Updated: 2024/09/17 14:13:56 by marvin ### ########.fr */
/* Updated: 2024/09/17 18:04:08 by madegryc ### ########.fr */
/* */
/* ************************************************************************** */
@ -16,11 +16,11 @@
cursor : pointer;
z-index: 10;
bottom: 40px;
left: 60px;
left: 70px;
background-color: #020202;
border-radius: 50%;
height: 70px;
width: 70px;
height: 60px;
width: 60px;
display: flex;
flex-direction: row;
align-items: center;
@ -33,8 +33,8 @@
}
#chatButton img{
width: 45px;
height: 45px;
width: 35px;
height: 35px;
}
#chatDiv {

View File

@ -57,7 +57,7 @@ body {
}
.main{
padding-top: 80px;
padding-block: 25px;
padding-inline: 150px;
display: flex;
flex-direction: row;
@ -180,17 +180,29 @@ body {
border: 5px solid white;
}
#topBar {
#topBarLobby {
display: flex;
flex-direction: row;
margin-block: 25px;
padding: 0;
padding-inline: 50px;
display: flex;
background-color: transparent;
gap: 2rem;
align-items: center;
justify-content: center;
inset-inline: 0;
top: 0;
z-index: 500;
}
#topBarLobby h1 {
padding: 0;
padding-top: 4px;
font-size: 35px;
color: white;
font-family: 'Poppins';
font-style: italic;
font-weight: bold;
}
.game-mode {
@ -199,7 +211,7 @@ body {
}
.mode-card {
background-color: #d3d3d3;
background-color: white;
color: #000;
padding: 20px;
width: 300px;
@ -216,8 +228,10 @@ body {
.search-container {
display: flex;
align-items: center;
align-items: flex-start;
justify-content: center;
width: 40%;
padding-top: 20px;
}
.search-input {
@ -251,20 +265,35 @@ body {
flex-direction: row;
justify-content: space-between;
align-items: center;
justify-content: center;
width: 100%;
margin-block: 25px;
}
.buttonStartGame {
background-color: white;
padding: 10px;
cursor: pointer;
width: 150px;
text-align: center;
transition: transform 0.3s ease;
}
.buttonStartGame:hover {
background-color: rgb(186, 186, 186);
transform: scale(1.1);
}
#popMenuLoginButtonLobby {
background-color: white;
position: absolute;
z-index: 500;
width: 130px;
text-align: center;
display: none;
flex-direction: column;
justify-content: center;
}
@keyframes startGameAnim {
0% {
transform: translateX(-0%);