From db99345ae6fd16788f22f71edc769f8511c31925 Mon Sep 17 00:00:00 2001 From: ea654 <ea654@drexel.edu> Date: Sun, 8 Dec 2024 03:52:14 +0000 Subject: [PATCH] Replace style.css --- public/style.css | 134 ++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 120 insertions(+), 14 deletions(-) diff --git a/public/style.css b/public/style.css index aff2b96..94e71e6 100644 --- a/public/style.css +++ b/public/style.css @@ -26,7 +26,7 @@ body { font-size: 32px; color: #fff; text-decoration: none; - font-weight: 700; + font-weight: bold; filter: drop-shadow(0 0 5px #09001d); } @@ -34,7 +34,7 @@ body { font-size: 18px; color: #fff; text-decoration: none; - font-weight: 500; + font-weight: bold; margin-left: 35px; } @@ -67,15 +67,17 @@ body { .home-content h1 { font-size: 85px; - font-weight: 700; + font-weight: bold; text-shadow: 0 0 10px rgba(0, 0, 0, .3); + margin-bottom: 20px; } .home-content p { + font-weight: bold; font-size: 20px; text-align: center; text-shadow: 0 0 10px rgba(0, 0, 0, .3); - margin-bottom: 30px; + margin-bottom: 20px; } .home-content .start-button { @@ -92,6 +94,7 @@ body { font-weight: 600; cursor: pointer; transition: .5s; + margin-top: 40px; } .home-content .start-button:hover { @@ -104,27 +107,38 @@ body { flex-direction: column; justify-content: center; align-items: center; + width: 100vw; height: 100vh; text-align: center; + margin: 0; padding-top: 200px; - padding-left: 200px; } #question { + font-size: 36px; + font-weight: bold; + display: flex; + flex-direction: column; + align-items: center; font-size: 28px; - margin-bottom: 20px; - max-width: 80%; + margin-bottom: 20px; line-height: 1.5; - text-shadow: 0 0 10px rgba(0, 0, 0, 0.3); + text-align: center; + width: auto; } #options { + font-size: 18px; + font-weight: bold; display: flex; - flex-direction: column; + flex-direction: column; + align-items: center; gap: 15px; - width: 80%; + width: auto; + text-align: center; } + #options button { padding: 10px 20px; font-size: 18px; @@ -134,6 +148,8 @@ body { background-color: blue; color: white; transition: background-color 0.3s; + min-width: 600px; + text-align: center; } #options button:hover { @@ -143,8 +159,9 @@ body { #score { position: absolute; top: 20px; - right: 20px; - font-size: 18px; + left: 20px; + font-size: 36px; + font-weight: bold; background: rgba(0, 0, 0, 0.6); color: #fff; padding: 10px 15px; @@ -155,8 +172,9 @@ body { #timer { position: absolute; top: 20px; - left: 20px; - font-size: 18px; + right: 20px; + font-size: 36px; + font-weight: bold; background: rgba(0, 0, 0, 0.6); color: #fff; padding: 10px 15px; @@ -165,3 +183,91 @@ body { 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; +} -- GitLab