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 *.crt
*.key *.key
openapi.jar openapi.jar
.vscode
# sqlite stuff # sqlite stuff
*.db *.db

4
frontend/index.html
View file

@ -9,7 +9,7 @@
</head> </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 -->
<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"> 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>
<div class="flex-1 ps-4 flex justify-end"> <div class="flex-1 ps-4 flex justify-end">
<button id="header-profile" <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> </button>
</div> </div>
</header> </header>

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

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

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

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

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

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