Skip to content
Snippets Groups Projects
Commit db99345a authored by ea654's avatar ea654
Browse files

Replace style.css

parent 85a39bff
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 120 additions and 14 deletions
public/style.css
+ 120
− 14
View file @ db99345a
...@@ -26,7 +26,7 @@ body { ...@@ -26,7 +26,7 @@ body {
font-size: 32px; font-size: 32px;
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
font-weight: 700; font-weight: bold;
filter: drop-shadow(0 0 5px #09001d); filter: drop-shadow(0 0 5px #09001d);
} }
...@@ -34,7 +34,7 @@ body { ...@@ -34,7 +34,7 @@ body {
font-size: 18px; font-size: 18px;
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
font-weight: 500; font-weight: bold;
margin-left: 35px; margin-left: 35px;
} }
...@@ -67,15 +67,17 @@ body { ...@@ -67,15 +67,17 @@ body {
.home-content h1 { .home-content h1 {
font-size: 85px; font-size: 85px;
font-weight: 700; font-weight: bold;
text-shadow: 0 0 10px rgba(0, 0, 0, .3); text-shadow: 0 0 10px rgba(0, 0, 0, .3);
margin-bottom: 20px;
} }
.home-content p { .home-content p {
font-weight: bold;
font-size: 20px; font-size: 20px;
text-align: center; text-align: center;
text-shadow: 0 0 10px rgba(0, 0, 0, .3); text-shadow: 0 0 10px rgba(0, 0, 0, .3);
margin-bottom: 30px; margin-bottom: 20px;
} }
.home-content .start-button { .home-content .start-button {
...@@ -92,6 +94,7 @@ body { ...@@ -92,6 +94,7 @@ body {
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: .5s; transition: .5s;
margin-top: 40px;
} }
.home-content .start-button:hover { .home-content .start-button:hover {
...@@ -104,27 +107,38 @@ body { ...@@ -104,27 +107,38 @@ body {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100vw;
height: 100vh; height: 100vh;
text-align: center; text-align: center;
margin: 0;
padding-top: 200px; padding-top: 200px;
padding-left: 200px;
} }
#question { #question {
font-size: 36px;
font-weight: bold;
display: flex;
flex-direction: column;
align-items: center;
font-size: 28px; font-size: 28px;
margin-bottom: 20px; margin-bottom: 20px;
max-width: 80%;
line-height: 1.5; line-height: 1.5;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.3); text-align: center;
width: auto;
} }
#options { #options {
font-size: 18px;
font-weight: bold;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
gap: 15px; gap: 15px;
width: 80%; width: auto;
text-align: center;
} }
#options button { #options button {
padding: 10px 20px; padding: 10px 20px;
font-size: 18px; font-size: 18px;
...@@ -134,6 +148,8 @@ body { ...@@ -134,6 +148,8 @@ body {
background-color: blue; background-color: blue;
color: white; color: white;
transition: background-color 0.3s; transition: background-color 0.3s;
min-width: 600px;
text-align: center;
} }
#options button:hover { #options button:hover {
...@@ -143,8 +159,9 @@ body { ...@@ -143,8 +159,9 @@ body {
#score { #score {
position: absolute; position: absolute;
top: 20px; top: 20px;
right: 20px; left: 20px;
font-size: 18px; font-size: 36px;
font-weight: bold;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
color: #fff; color: #fff;
padding: 10px 15px; padding: 10px 15px;
...@@ -155,8 +172,9 @@ body { ...@@ -155,8 +172,9 @@ body {
#timer { #timer {
position: absolute; position: absolute;
top: 20px; top: 20px;
left: 20px; right: 20px;
font-size: 18px; font-size: 36px;
font-weight: bold;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
color: #fff; color: #fff;
padding: 10px 15px; padding: 10px 15px;
...@@ -165,3 +183,91 @@ body { ...@@ -165,3 +183,91 @@ body {
z-index: 100; z-index: 100;
} }
#gameSettings label {
font-size: 18px;
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-content {
background: #fff;
padding: 40px;
border-radius: 10px;
text-align: center;
color: #000;
width: 400px;
max-width: 90%;
}
.modal-content input {
width: 100%;
margin: 10px 0;
padding: 8px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
}
.modal-content button {
padding: 10px 20px;
background: blue;
color: #fff;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
flex: 1;
margin: 0 10px;
}
.modal-content button:hover {
background: darkblue;
}
.modal-content h2 {
margin-bottom: 20px;
}
#roomCreatedModal .modal-content {
background: #fff;
padding: 40px;
border-radius: 10px;
text-align: center;
color: #000;
width: 400px;
max-width: 90%;
}
#roomCreatedModal .modal-content h2 {
margin-bottom: 30px;
}
#roomCodeDisplay {
font-size: 18px;
margin-bottom: 30px;
}
#roomCreatedContinueButton {
padding: 10px 20px;
background: blue;
color: white;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
}
#roomCreatedContinueButton:hover {
background: darkblue;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment