From e2b707b01671d53337ca507f26a0ebbf803ed3bf Mon Sep 17 00:00:00 2001 From: CANCI0 Date: Sun, 4 Feb 2024 22:14:01 +0100 Subject: [PATCH] =?UTF-8?q?Se=20han=20pulido=20m=C3=A1s=20errores=20de=20l?= =?UTF-8?q?a=20UI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- webapp/src/App.css | 3 ++- webapp/src/components/Nav/Nav.css | 3 ++- webapp/src/pages/Clasico/Clasico.css | 36 +++++++++++++++------------- webapp/src/pages/Clasico/Clasico.js | 2 +- 4 files changed, 25 insertions(+), 19 deletions(-) diff --git a/webapp/src/App.css b/webapp/src/App.css index 57491b2f..a3cbc06b 100644 --- a/webapp/src/App.css +++ b/webapp/src/App.css @@ -1,9 +1,10 @@ #root{ - height: 90vh; + height: 100vh; display: flex; flex-direction: column; align-items: center; text-align: center; + justify-content: space-between; } h1{ diff --git a/webapp/src/components/Nav/Nav.css b/webapp/src/components/Nav/Nav.css index 9162d8b7..cbb4329b 100644 --- a/webapp/src/components/Nav/Nav.css +++ b/webapp/src/components/Nav/Nav.css @@ -15,6 +15,7 @@ nav{ border-radius: 1rem; padding: 1rem; margin: 1rem; + justify-content: center; -webkit-box-shadow: 10px 10px 6px 0px rgba(0,255,192,1); -moz-box-shadow: 10px 10px 6px 0px rgba(0,255,192,1); box-shadow: 10px 10px 5px 0px rgba(0,255,192,1); @@ -22,11 +23,11 @@ nav{ nav ul{ display: flex; + justify-content: center; flex-direction: row; } nav li{ display: flex; flex-direction: row; - height: 100%; } \ No newline at end of file diff --git a/webapp/src/pages/Clasico/Clasico.css b/webapp/src/pages/Clasico/Clasico.css index 8dbf6834..3684928a 100644 --- a/webapp/src/pages/Clasico/Clasico.css +++ b/webapp/src/pages/Clasico/Clasico.css @@ -6,6 +6,18 @@ body { display: flex; flex-direction: column; justify-content: center; + border: 3px solid #0F0F0F; + padding: 1rem; + -webkit-box-shadow: 10px 10px 6px 0px rgba(0,255,192,1); + -moz-box-shadow: 10px 10px 6px 0px rgba(0,255,192,1); + box-shadow: 10px 10px 5px 0px rgba(0,255,192,1); + border-radius: 1rem; +} + +.menuContainer > *{ + text-align: center; + margin: 1rem 0; + } .container h1 { @@ -16,6 +28,12 @@ body { display: grid; justify-content: center; align-items: center; + border: 3px solid #0F0F0F; + border-radius: 1rem; + padding: 1rem; + -webkit-box-shadow: 10px 10px 6px 0px rgba(0,255,192,1); + -moz-box-shadow: 10px 10px 6px 0px rgba(0,255,192,1); + box-shadow: 10px 10px 5px 0px rgba(0,255,192,1); } .responsesContainer { @@ -24,6 +42,7 @@ body { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 1rem; + margin-bottom: 1rem; } button{ @@ -36,7 +55,6 @@ button{ background-color: transparent; border: 0.13rem solid #0f0f0f; border-radius: 15px; - box-sizing: border-box; color: #0f0f0f; padding: 1rem; text-align: center; @@ -47,20 +65,6 @@ button{ touch-action: manipulation; width: 100%; will-change: transform; + margin: 0; } -.responsesContainer button:disabled { - pointer-events: none; -} - -.responsesContainer button:hover { - color: #fff; - background-color: #1a1a1a; - box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px; - transform: translateY(-2px); -} - -.responsesContainer button:active { - box-shadow: none; - transform: translateY(0); -} diff --git a/webapp/src/pages/Clasico/Clasico.js b/webapp/src/pages/Clasico/Clasico.js index 53db1ab5..93688800 100644 --- a/webapp/src/pages/Clasico/Clasico.js +++ b/webapp/src/pages/Clasico/Clasico.js @@ -49,7 +49,7 @@ const JuegoPreguntas = () => { } } else { if (respuesta === respuestaSeleccionada) { - return { backgroundColor: "orange" }; + return { backgroundColor: "#0F0F0F", color: "#F0F0F0" }; } } return {};