diff --git a/Transcendence/srcs/frontend/src/app.js b/Transcendence/srcs/frontend/src/app.js
index 052dcaa..9efb1b2 100644
--- a/Transcendence/srcs/frontend/src/app.js
+++ b/Transcendence/srcs/frontend/src/app.js
@@ -109,9 +109,8 @@ class App {
}
colorizeUI() {
- if (!window.location.pathname.includes("game.html")) return;
- const elements = document.querySelectorAll(".menu__item, .game__item, .page__item");
+ const elements = document.querySelectorAll(".title, .menu__item, .game__item, .page__item");
const colorizeText = (el) => {
const text = el.textContent;
diff --git a/Transcendence/srcs/frontend/src/index.css b/Transcendence/srcs/frontend/src/index.css
index 3700dfa..841a3ca 100644
--- a/Transcendence/srcs/frontend/src/index.css
+++ b/Transcendence/srcs/frontend/src/index.css
@@ -7,28 +7,28 @@
CSS VARIABLES
============================================ */
:root {
- --color-primary: #0066cc;
- --color-primary-hover: #0052a3;
+ --color-primary: #ffc75e;
+ --color-primary-hover: #ffc75e;
--color-success: #3cff01;
- --color-success-dark: #28a745;
+ --color-success-dark: #ffc75e;
--color-error: #ff4d4d;
- --color-warning: #ffc107;
- --color-github: #24292e;
+ --color-warning: #ffc75e;
+ --color-github: #ffc75e;
- --color-bg: #a3a3a3;
+ --color-bg: #ffe5b5;
--app-background-base: radial-gradient(
circle at top,
- #000000,
- #4d4d4d
+ #fff787,
+ #ff8080
);
--app-background-image: url("./assets/background.png");
- --color-surface: #222;
- --color-surface-light: #333;
- --color-text: #fff;
- --color-text-muted: #aaa;
+ --color-surface: #ffefce;
+ --color-surface-light: #ffc75e;
+ --color-text: #000000;
+ --color-text-muted: #000000;
--font-size-base: 10px;
--font-size-sm: 1.2rem;
@@ -117,14 +117,14 @@ body {
text-align: center;
text-shadow: 2px 2px 10px black;
z-index: 1;
- font-family: "Patrick Hand", cursive;
+ font-family: "Roboto";
+ letter-spacing: -10px;
color: rgba(248, 252, 2, 0.6);
margin: 0;
- padding: var(--spacing-md);
+ padding: 0.6rem 1.2rem;
- /* Rectangle + rounded corners */
- background-color: rgba(247, 7, 67, 0.6);
+ background-color: #ffefce;
border: 2px solid rgba(0, 0, 0, 0.6);
border-radius: var(--radius-lg);
}
@@ -163,12 +163,12 @@ body {
color: var(--color-text);
border: 1px solid var(--color-surface-light);
border-radius: var(--radius-lg);
+ border-color: #000;
padding: var(--spacing-sm) var(--spacing-md);
font-size: var(--font-size-md);
cursor: pointer;
transition: all var(--transition-fast);
text-align: center;
- overflow: hidden;
}
.menu__item:hover {
@@ -201,8 +201,12 @@ body {
position: fixed;
top: var(--spacing-lg);
right: 50px;
+
display: flex;
flex-direction: column;
+ gap: var(--spacing-lg);
+
+ z-index: var(--z-menu);
}
.game__item {
@@ -210,12 +214,12 @@ body {
color: var(--color-text);
border: 1px solid var(--color-surface-light);
border-radius: var(--radius-lg);
+ border-color: #000;
padding: var(--spacing-sm) var(--spacing-md);
font-size: var(--font-size-md);
cursor: pointer;
transition: all var(--transition-fast);
text-align: center;
- overflow: hidden;
}
.game__item:hover {
@@ -327,13 +331,15 @@ body {
left: 50%;
transform: translate(-50%, -50%);
background: var(--color-bg);
- border: 2px ridge var(--color-text);
color: var(--color-text);
z-index: var(--z-window);
display: none;
flex-direction: column;
min-width: 280px;
box-shadow: var(--shadow-lg);
+ border-radius: 5px;
+ border-color: #aa1f1f;
+ border: 6px solid #faac37;
}
.window--visible {
@@ -394,7 +400,8 @@ body {
.message {
font-size: var(--font-size-sm);
padding: var(--spacing-xs);
- border-radius: var(--radius-sm);
+ border-radius: var(--radius-lg);
+ border-color: #000;
}
.message--success {
@@ -414,10 +421,11 @@ body {
============================================ */
.login {
width: 320px;
- border-radius: 10px;
- border-color: #ff0000;
- border: 6px solid #000000;
- background: var(--color-surface);
+ border-radius: 5px;
+ border-color: #aa1f1f;
+ border: 6px solid #faac37;
+ background: #ffffff;
+ color: #000;
}
.login__form {
@@ -629,30 +637,6 @@ body {
padding: var(--spacing-sm) 0;
}
-/* ============================================
- EASTER EGG BUTTON
- ============================================ */
-/* .easter-egg {
- position: absolute;
- top: 20%;
- left: 50%;
- transform: translateX(-50%);
- z-index: 1;
- background: var(--color-surface);
- color: var(--color-text);
- border: 1px solid var(--color-surface-light);
- padding: var(--spacing-sm) var(--spacing-md);
- cursor: pointer;
- font-size: var(--font-size-md);
- border-radius: var(--radius-md);
- transition: all var(--transition-fast);
-}
-
-.easter-egg:hover {
- background: var(--color-error);
- border-color: var(--color-error);
-} */
-
/* ============================================
UTILITIES
============================================ */
@@ -698,7 +682,7 @@ body {
.friends__tab {
flex: 1;
padding: var(--spacing-sm);
- background: var(--color-surface);
+ background: var(--color-surface-light);
border: 1px solid var(--color-surface-light);
color: var(--color-text);
cursor: pointer;
diff --git a/Transcendence/srcs/frontend/src/index.html b/Transcendence/srcs/frontend/src/index.html
index 9aa983f..a007348 100644
--- a/Transcendence/srcs/frontend/src/index.html
+++ b/Transcendence/srcs/frontend/src/index.html
@@ -3,14 +3,14 @@
- Transcendence.io
+ Transcendence
- Transcendence.io
+ Transcendence