From 9353909350bd7c629c45552f4a20de114ea94183 Mon Sep 17 00:00:00 2001 From: WalidMoovin Date: Thu, 16 Mar 2023 03:45:26 +0100 Subject: [PATCH] some css :), need to remove the hamburger button from the nav bar (bug) --- front/volume/index.html | 1 + front/volume/public/global.css | 43 ++++-- front/volume/public/img/pong.png | Bin 1434 -> 4256 bytes front/volume/src/App.svelte | 32 ++++- front/volume/src/components/Channels.svelte | 87 +++++++----- front/volume/src/components/Chat.svelte | 130 +++++++++++++----- front/volume/src/components/Friends.svelte | 49 ++++++- .../volume/src/components/Leaderboard.svelte | 25 +++- .../volume/src/components/MatchHistory.svelte | 29 +++- front/volume/src/components/NavBar.svelte | 22 ++- front/volume/src/components/Profile.svelte | 32 ++++- 11 files changed, 347 insertions(+), 103 deletions(-) diff --git a/front/volume/index.html b/front/volume/index.html index f7bb4f8..15fcd19 100644 --- a/front/volume/index.html +++ b/front/volume/index.html @@ -6,6 +6,7 @@ Pong + diff --git a/front/volume/public/global.css b/front/volume/public/global.css index 420c3fb..d7f5bb0 100644 --- a/front/volume/public/global.css +++ b/front/volume/public/global.css @@ -5,16 +5,21 @@ html, body { height: 100%; } +body, input, button { + font-family: 'Press Start 2P', cursive; + font-size: 16px; +} + body { - color: #333; + color: #e8e6e3; margin: 0; padding: 8px; box-sizing: border-box; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + background-color: #212529; } a { - color: rgb(0,100,200); + color: #198754; text-decoration: none; } @@ -23,7 +28,7 @@ a:hover { } a:visited { - color: rgb(0,80,160); + color: #157347; } label { @@ -33,32 +38,40 @@ label { input, button, select, textarea { font-family: inherit; font-size: inherit; - -webkit-padding: 0.4em 0; - padding: 0.4em; + padding: 0.4em 0; margin: 0 0 0.5em 0; box-sizing: border-box; - border: 1px solid #ccc; - border-radius: 2px; + border: 1px solid #495057; + border-radius: 4px; + background-color: #343a40; + color: #e8e6e3; } input:disabled { - color: #ccc; + color: #6c757d; } button { - color: #333; - background-color: #f4f4f4; + color: #e8e6e3; + background-color: #198754; + border: none; + cursor: pointer; + padding: 0.5rem 1rem; + border-radius: 4px; + transition: background-color 0.2s ease-in-out; + font-size: 1rem; outline: none; } button:disabled { - color: #999; + color: #6c757d; + cursor: not-allowed; } button:not(:disabled):active { - background-color: #ddd; + background-color: #157347; } button:focus { - border-color: #666; -} + box-shadow: 0 0 0 2px rgba(25, 135, 84, 0.25); +} \ No newline at end of file diff --git a/front/volume/public/img/pong.png b/front/volume/public/img/pong.png index 72657d30758e979c333b75f07c425c8d50ba4798..a02549575f4c89978ac68096869408b6ae689dd4 100644 GIT binary patch literal 4256 zcmV;R5MS?7Nk&GP5C8yIMM6+kP&gor5C8xWZ2+ACD#!rH06tM5j6@@%As9K9Y&Zo3 zvVdLpGA)0sUT-6(l6-gl_dpP5@a-IK$N01{cE_pwcySMFOWpbH*<)@cFWbZN7a|rN z#gTqw>)TtdLqBKZR+uic=a6UiVWefqtMU}9tkFRV$cCOho15)MkyVxSmv=^@EBOZ_ z?501!KGdf8BwCMDqf~M6o+?I2i!1CH(l_R(S?BIBm8CSaik^T#}K)z9RPUIZgK@XwxRfDosb1lhT zaEGM#;`hcn3N zMLEv@lftDAE9GFMK(#S}tP{i|ZVYiVJGHwWo19R?gNbB9b-#;Lo6KEhdvji%1fpD~ zo*aTZQ|58rzM9m_>Lcec>3^EcW38@#y%HmDJTv=O-iUAaDP&t)c0u}y){?26Fb~Fa z%q28-`Y#w(L*Q*|`VEf92D`%CwU6Us6+8&;y_~3%nUjk@j#PPk6D-5fb&D&1W5RxI|I)51paIK&ksFUV(@bN^;c8|3ShTZ=;63A9di)<67JCe z?Dmp;HWpv4U~}8v9LqXNw>t|+yt_#@`e7oVr}-SGuIHTO1~?3~FZE8nps-ugY@IWh zr9G}}2v^%u7szM(E5F5J|yZV zKome8&{xjvrAHHZpS4q_G?bA`PrJE}-lSC|MArOdWsRM|LK#86@{E4gAu&{CQK zyfZ=Dy6Zs{3uwi*ZOjPhB=-e*gWHluQ?igM@s_b#4uUDS%=y+g&uxEDB zg7=uAcDlU@(6#a%73@V-^38c%_LB4i{Pjp^;$RwHk-P88gWd;!7ZOb)U4iIp2*j+L z9dZcXl#AHN&I2g^mj~~l^B#~60WNHyO{|6VgVOzVk$G0FWgV&#IUUtz`Wz!4g)Eh-F1f#;uQtu zO;XeMlJ6g^0nRIY6wSebXh}MdPldH_v;|pCkK0qY_k>ZpzDl+&gvQQ#9^lR85aOfy zY0i-tIN0WSTxfT@M!^ZRJKn@Dy>b(f68IE6FKuNXu=Jq-f`{IW9o}?9XyW~RkB~Qz z3Ebv>SSE1*+tSzm8rf@(T#Hr(t^kGybr|%7Y=FrzFcX8cAR|d= zOwKjG0|2B0J=L*%yz2@{Tc3Usrs7GOsaYgGBrzU+M6hr;=BXx~= zIi<`;y}pJzZR(ZhbUHEb^T^vDT0WQYwG+4JR!qg2$xP3rJOfDkKHx1C!$ad1G{$Vo za8E*mFMIflK~_v3jBh4h??8$YBw(D(JPq1pZPn9H+RPbTE$;x2|DfIR;78zrn+GlD=fJ zANrVO+i#UtueAR=QIOpr{F3A5*zAxIit1mSTh)Z{7hp60ITcpn~ zhl2G-5;8mJ-HA2vgBF8wGgZpKLLxlpC%vKcMml-?m9&R`7hb#+hY0+Dso=2Nq(Dkq zHhKxIE5V~wrgLn{z^&tn6y}71O7L`p#W~omVvt7E7US@JD+`c7qZ40xc^y}0ZUSly z6=9FXndTnKO2?}oHDI#leFELQdkMJ!$|VOL6wl^mdXE9_{yO2l@lA6&e^G1LhOBqn z;?&W=^sa}tI!x-2%TV^3JmDXzJowEx){0+^Evg2tekh3=xe4O^EhN{hM&uWZA+SJ8 zz)gcnipcPxOD@Mtme2vqY8#1kwH^S4FO(qSinQq=#-M-E8f9C#{}yAqv~xzTN8oC$ zyWcu#iXo8}vMl!VQuHzjn$#ngEJOZvzp@e#9Kyl?U19$lwlAAI#x2s{)unAS3AR?u z9t4{W<~;KF%@8~ozuj>I6}HW%-NR(Xm&QG4iT|Gu?Y9m>l;SA6 z(Y;T8R$%y`Nj_13jagnDM>2sH-NxgAr%M>fD7!{Ac88IE#6-tg>+Pwh`)3WB=t6tf@D@xzF6^=yXyXn{&?F+Mnq#272wfHELy+8HxpEmNEfg zDU_J@t|=wf8AiJNM`+0lj##cBvITVfjDTuoU`oxrdv{a4C;A02mxK@%w|duqhN|fn z^aOo?rp$<-^}mw!3J6ww^=n}WO2zlR*|q~0+4IVDw6zzGErK2pw;ED zY5M&g;A(ro*k?-Q*t7Q_Bye;>!nDV9b=tmgmm8vBny%-OU}Wsp{$dI5BZm14mE=t3OtGB;{PdNBbvdOAkrDC_$|k-W zUtBfl156pdyf%Fans-mz)y+*`-?Exz*Sf8BIz+aM{h7`VxR2#vnX>8*ERKm>6P~-* zD|9s-4b*yQM6^IKUAqilWCW7)P8W|-`%=sr>lO|a?==l@Hu_cH~gapX9_vV8?!P|Zdt~h0qFc z)ZLu@P3eYZ zA40nI`Gd^-p!Zyh-(*?zd7zZ~Y^^iVBkV6TXiA ztx88{$Z^Qb%3aKcOuh3%FWtGHSN%k~Xa9jzCA=b;QnZ1v=1L2_dc4>GQf&jK23~5# z&yU5NQ!Tq*LVU;<;#(9*uTFKhF5HMk=)WdPDt!15nHbNzD24Nskf;AMH8QD73R<$` z4g4!Q$XHf3dnM;?a=y-K;rPF^^lOze9=;Lq*g-#NL#7ZJg?>Y1YdoXaX)SmRyTMy8 z9}a~#)-#^?^EGiJI$1WJ^nq^&G6a>SkCiLH_i zMYu4cx&@Vc6A_&&e)d<3ONQvj+EqganEA>lL8bncn-dNwqLE{}(fToTgj=mUqp?(wF^uh{#M1DG;- zW$`s4sVE0XNiVPMQrKKI3^AF92ntC#4h7x77JgB*BmFPr=(UXvzYn>BpaviS0002A CAus6w literal 1434 zcmaKscTm%J7{3zMiZcnBR~x^fS86T8kX!KA`n2v2{-}> zs6b>y2!uwEOBD?uB0-TM5sjFlGGxd|SP5x**WUFHuXpeJJa_Ni`}ymA-W(4%M@0n< z1pt7evy=UCnG61INKU5mVMr&LaXnl;9b_(*l~mf*)y3!Y#bPmuMCut=?tQO80-&<8 z@;v}J9BxY@?cxLB`pBkuZb8U?Jr(mx1`s$L0pKwJi2y_cPyoOZ0CoVB01y@y<_EwU z0PO%cIy%zn^!fRDBobLxR^|o(7K^pCw0r{qlgaGw@4qNR0T2}x6$Ai}$CF4z?`Mm& z0Wbjo4nSaF;1|&|(K>(VBLN136%-V_nYq*e02zR}6($M*6bkj^o$2UgQjJTW7699F zobAz`3FUMA6uTQ9YCY#1Xfzi7ZX@-`y%s&4qycUt{G|TSgq){Y z@gg$4=KA6L#bsNSge5vtFI0^_dDN}K=X*sz-e;P1QI_R{_GWXZWQ_xgNjO5r#IEw; zGZ4Xe&Y3l`M5(zhLX5Sz`b^~yYTNto>)8VvylF?=4)yNPl^|$3l$DIa3;C1|ngNQY zd{}jCDcXJ6S3a-%xAuT?y_AyDFLA2G%7fyR_|;8eE7xZYuf9quW=1x(w9D%X{@qs@ zRK{$eoou1$|3JS!%!-Rv9X78x+(XtE#M;!gJ};fPcO}x+BcU$(Qv!Og2Bp;LYT;{Z z>}GA#u{p753S>I}!N}aJWrkM2Ib-7cVocQ=oYTA_NVz(T;_=Gm{k&m^G zw$!RT2HE7@$i4<=$;G$bS^G0BZ+X2;itr2^I&WyT^DRHtig2wbTm|zqsLm3r0t;VH zrWOm?wG%%rk8Z_|8~D4iS6jaDIvP@@8M~$0X>7L5ke+8iqREP#D}xs^8#eO{)14xz z|0DaM#qnJJy(99rN%?BXw@YS;r(<-jmQ0LuH1k&5P6})&%ZLD;E=2_cRYo8n1N8l7 zJ7_m7E1>w$uH3E($jg=T_-BZZSV{L_nQ_FWwoH=1Z)ZBEut@2{_C*SPFzMzmG*$Xd zYyi6Cm3q)NUCJ4#t!e=UmuzMmY`O2jjI5v1)pecU%vRnJE`g3|#orDQ;JWAMCAY>_ zTg8i8adBD$uiLVp%8@qqu;`i@qmJW2g-E0PMU5XJoFd1GXz5OQ_Mlc0iZPE9X7ZH(x!uMCHQKUzqYA>R3Lt>y`Xr|Dc-$+8i#}2gi3^3k= zlM%tmPl9d{LxOlB|Eg$x9}I?lqDkMSi??t8qAC({Ly&-wkh(dhwCB z;k$w7z6qNa)6}K`-nxIi=a$XJmX6XX`r>u&?2Vc+bs8#)OU(>2H#2`Yzm^&870W(K z-ZaWABEq~3`G@4|J|NW4C4zsX_w;!NXWdKFUC=&kn0e60u&OZf>nHwyVYt + \ No newline at end of file diff --git a/front/volume/src/components/Channels.svelte b/front/volume/src/components/Channels.svelte index b7aa73d..4af5626 100644 --- a/front/volume/src/components/Channels.svelte +++ b/front/volume/src/components/Channels.svelte @@ -191,52 +191,71 @@ justify-content: center; align-items: center; } + .channels { - background-color: #fff; - border: 1px solid #ccc; + background-color: #5f5e5e; + border: 1px solid #dedede; border-radius: 5px; padding: 1rem; width: 300px; + display: flex; + flex-direction: column; + overflow: auto; + } + + h2 { + font-size: 18px; + margin-bottom: 1rem; + } + + p { + font-size: 14px; + margin-bottom: 1rem; } - + + li { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 14px; + margin-bottom: 0.5rem; + flex-wrap: wrap; + } + + button { + background-color: #6B8E23; + color: #ffffff; + border: none; + border-radius: 5px; + padding: 0.5rem 1rem; + font-size: 14px; + cursor: pointer; + outline: none; + white-space: nowrap; + margin-bottom: 5px; + } + select { width: 100%; - height: 15%; - padding: 5px; - border-radius: 4px; - background: #eee; - border: none; - outline: grey; - display: inline-block; - -webkit-appearance: none; - -moz-appearance: none; + padding: 0.5rem; + border: 1px solid #dedede; + border-radius: 5px; + background-color: #5e5d5d; + font-size: 14px; + margin-bottom: 1rem; appearance: none; cursor: pointer; } .button { - color: white; - margin:0 auto; - margin: auto; - width: 45%; - height: 15%; - padding: 5px; - border-radius: 4px; - background: #6B8E23; + background-color: #6B8E23; + color: #ffffff; border: none; - outline: grey; - display:block; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; + border-radius: 5px; + padding: 0.5rem 1rem; + font-size: 14px; cursor: pointer; + outline: none; + width: 100%; } - - span { - color: rgb(0, 0, 0); - font-size: 150%; - position: relative; - padding: 10px; - top: 2px; - } - + \ No newline at end of file diff --git a/front/volume/src/components/Chat.svelte b/front/volume/src/components/Chat.svelte index b0ce12f..bcc3662 100644 --- a/front/volume/src/components/Chat.svelte +++ b/front/volume/src/components/Chat.svelte @@ -11,7 +11,6 @@ import type { ChannelsType } from "./Channels.svelte"; import type User from "./Profile.svelte"; -//--------------------------------------------------------------------------------/