rparodi/ft_transcendence
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

css update

Browse source
This commit is contained in:
NigeParis 2026-01-04 16:01:58 +01:00 • committed by Maix0
parent ce0b299d4d
commit 3e1dd0fdd9
5 changed files with 56 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -7,6 +7,7 @@ node_modules/
*.crt
*.key
openapi.jar
.vscode
# sqlite stuff
*.db

4
frontend/index.html
View file

@ -9,7 +9,7 @@
</head>
<body class="bg-gray-500 font-sans min-h-screen font-[Inter]">
<body class="bg-gray-500 min-h-screen font-[Inter]">
<!-- Header -->
<header
class="fixed top-0 left-0 right-0 h-14 bg-gray-800 text-white flex items-center justify-between px-4 shadow-md z-50">
@ -23,7 +23,7 @@
</div>
<div class="flex-1 ps-4 flex justify-end">
<button id="header-profile"
class="right-0 px-4 inset-y-0 text-white text-right font-mono border-1 border-orange-500 rounded-3xl bg-orange-500 cursor-pointer shadow-[0_2px_0_0_black] transition-all hover:bg-orange-400 active:bg-orange-200 active:translate-y-[1px] active:shadow-[0_2px_0_0_black]">
class="right-0 px-4 inset-y-0 text-white text-right font-mono border border-orange-500 rounded-3xl bg-orange-500 cursor-pointer shadow-[0_2px_0_0_black] transition-all hover:bg-orange-400 active:bg-orange-200 active:translate-y-px active:shadow-[0_2px_0_0_black]">
</button>
</div>
</header>

64
frontend/src/pages/chat/chat.css
View file

@ -8,9 +8,9 @@
.btn-style {
@apply
w-[100px]
h-[32px]
border-1
w-25
h-8
border
border-gray-500
rounded-3xl
bg-gray-500
@ -20,15 +20,15 @@
transition-all
hover:bg-blue-200
active:bg-gray-400
active:translate-y-[1px]
active:translate-y-px
active:shadow-[0_2px_0_0_black];
}
.send-btn-style {
@apply
w-[50px]
h-[50px]
border-1
w-12.5
h-12.5
border
border-gray-500
rounded-3xl
hover:bg-blue-200
@ -38,16 +38,16 @@
shadow-[0_2px_0_0_black]
transition-all
active:bg-gray-400
active:translate-y-[1px]
active:translate-y-px
active:shadow-[0_2px_0_0_black];;
}
.chatbox-style {
@apply
w-[650px]
h-[300px] /* increase height if needed */
p-[8px]
border-1
w-162.5
h-75 /* increase height if needed */
p-2
border
border-black
shadow-2xl
text-left
@ -63,7 +63,7 @@
.system-info {
@apply
h-[40px]
h-10
bg-gray-200
text-gray-700
p-3
@ -79,7 +79,7 @@
.modal-messages {
@apply
h-[80px]
h-20
bg-white
text-gray-700
p-3
@ -104,10 +104,10 @@
.chat-window-style {
@apply
w-[400px]
h-[50px]
p-[10px]
border-1
w-100
h-12.5
p-6
border
border-black
shadow-sm
flex-1
@ -136,7 +136,7 @@
left-1/2
-translate-x-1/2
-translate-y-1/2
bg-gray-200 w-[850px]
bg-gray-200 w-212.5
p-6 rounded-xl
shadow-2xl
text-center z-50;
@ -156,8 +156,8 @@
.ping-box {
@apply
w-[150px]
ml-2 border-1
w-37.5
ml-2 border
border-gray-500
bg-white
rounded-2xl
@ -165,7 +165,7 @@
shadow-md
flex flex-col
gap-1
h-[350px];
h-87.5;
}
.ping-title {
@ -213,12 +213,12 @@ div-private {
.popUpBox {
@apply
bg-white
p-6 rounded-xl
rounded-xl
shadow-xl
w-[800px]
h-[350px]
p-[10px]
border-1
w-200
h-87.5
p-6
border
border-black
}
@ -250,12 +250,12 @@ div-private {
.popUpMessage {
@apply
bg-white
p-6 rounded-xl
rounded-xl
shadow-xl
w-[800px]
h-[100px]
p-[10px]
border-1
w-200
h-25
p-6
border
border-black
}

6
frontend/src/pages/ttt/ttt.css
View file

@ -34,8 +34,8 @@
.btn-style {
@apply
w-[100px]
h-[32px]
w-25
h-8
border
border-gray-500
rounded-3xl
@ -46,7 +46,7 @@
transition-all
hover:bg-blue-200
active:bg-gray-400
active:translate-y-[1px]
active:translate-y-px
active:shadow-[0_2px_0_0_black];
}

36
frontend/src/pong/pong.css
View file

@ -8,9 +8,9 @@
.btn-style {
@apply
w-[100px]
h-[32px]
border-1
w-25
h-8
border
border-gray-500
rounded-3xl
bg-gray-500
@ -20,16 +20,16 @@
transition-all
hover:bg-blue-200
active:bg-gray-400
active:translate-y-[1px]
active:translate-y-px
active:shadow-[0_2px_0_0_black];
}
.chatbox-style {
@apply
w-[650px]
h-[300px] /* increase height if needed */
p-[8px]
border-1
w-162.5
h-75 /* increase height if needed */
p-2
border
border-black
shadow-2xl
text-left
@ -45,7 +45,7 @@
.system-info {
@apply
h-[40px]
h-10
bg-gray-200
text-gray-700
p-3
@ -77,7 +77,7 @@
left-1/2
-translate-x-1/2
-translate-y-1/2
bg-gray-200 w-[850px]
bg-gray-200 w-212.5
p-6 rounded-xl
shadow-2xl
text-center
@ -91,8 +91,8 @@
.pongbox-style {
@apply
h-[450px]
w-[800px]
h-112.5
w-200
bg-gray-400
text-6xl
flex
@ -106,19 +106,19 @@
}
.pong-field {
@apply relative w-[800px] h-[450px] bg-black;
@apply relative w-200 h-112.5 bg-black;
}
.pong-bat {
@apply absolute w-[12px] h-[80px] bg-white;
@apply absolute w-3 h-20 bg-white;
}
.pong-batleft {
@apply absolute left-4 w-[12px] h-[80px] top-[0px];
@apply absolute left-4 w-3 h-20 top-0;
}
.pong-batright {
@apply absolute right-4 w-[12px] h-[80px] top-[0px];
@apply absolute right-4 w-3 h-20 top-0;
}
.pong-center-line {
@ -127,8 +127,8 @@
left-1/2
top-0
h-full
w-[4px]
w-1
-translate-x-1/2
bg-[linear-gradient(to_bottom,white_50%,transparent_50%)]
bg-[length:4px_20px];
bg-size-[4px_20px];
}