From 8947e1b781591031f325f50d9658003b1e0a3001 Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Tue, 15 Dec 2020 17:31:55 +0100 Subject: [PATCH 1/2] update pointer style --- front/dist/resources/html/gameMenu.html | 1 + front/dist/resources/html/gameMenuIcon.html | 1 + .../dist/resources/html/gameQualityMenu.html | 1 + front/dist/resources/logos/cursor_normal.png | Bin 0 -> 979 bytes front/dist/resources/logos/cursor_pointer.png | Bin 0 -> 937 bytes front/dist/resources/logos/style.css | 988 ++++++++++++++++++ front/dist/resources/style/style.css | 38 +- website/dist/index.html | 4 +- website/src/sass/styles.scss | 4 +- 9 files changed, 1016 insertions(+), 21 deletions(-) create mode 100644 front/dist/resources/logos/cursor_normal.png create mode 100644 front/dist/resources/logos/cursor_pointer.png create mode 100644 front/dist/resources/logos/style.css diff --git a/front/dist/resources/html/gameMenu.html b/front/dist/resources/html/gameMenu.html index a5190062..6560f89e 100644 --- a/front/dist/resources/html/gameMenu.html +++ b/front/dist/resources/html/gameMenu.html @@ -3,6 +3,7 @@ background-color: black; color: white; border-radius: 7px; + cursor: url('../logos/cursor_pointer.png'), pointer; } #gameMenu section { margin: 10px; diff --git a/front/dist/resources/html/gameMenuIcon.html b/front/dist/resources/html/gameMenuIcon.html index f7f5e9aa..ead9ef75 100644 --- a/front/dist/resources/html/gameMenuIcon.html +++ b/front/dist/resources/html/gameMenuIcon.html @@ -4,6 +4,7 @@ background-color: black; color: white; border-radius: 7px; + cursor: url('../logos/cursor_pointer.png'), pointer; } #menuIcon section { margin: 10px; diff --git a/front/dist/resources/html/gameQualityMenu.html b/front/dist/resources/html/gameQualityMenu.html index 00599386..04867c87 100644 --- a/front/dist/resources/html/gameQualityMenu.html +++ b/front/dist/resources/html/gameQualityMenu.html @@ -34,6 +34,7 @@ height: 30px; transition: box-shadow 0.3s; width: 240px; + cursor: url('../logos/cursor_pointer.png'), pointer; } #gameQuality section { margin: 10px; diff --git a/front/dist/resources/logos/cursor_normal.png b/front/dist/resources/logos/cursor_normal.png new file mode 100644 index 0000000000000000000000000000000000000000..815bcf27cc2963423134fd26cf95940c15e19d72 GIT binary patch literal 979 zcmV;^11$WBP)KR!c}5Q53z;Xn#<(Abu!f1Q!M=8X+o*pM``NWKFt}>zLbtArQ2If^)KA1;ZaL3+b_|oxV3)mc zn9O@`?s@0lGjAf8nes(27!0J->8I=K>(RUm3q(o2X(2@D`1tt!&d$z?-|tV}hlrra z3PjX4Iy%bHXcRYGUS7^UJw4~TuD{LoOg`jOlyW+qG%zqAZ&p`Vsj8~#!T$dK%kJ*( z^I$Oe`kyEQJRZ+?X6A;52A-Ol!cX4V*x=dOS*gzTKyEh(schkmcLk+oNRi#t)U1m2xbVN>O`zdzr)GcwS#$ z&*S6cF96%6L(WhrBo$yOjA0eKySq{~)@YjcL({YsTcrbBF4t$|Zf$Mlk&zKgA{Fs? zoONC2+S*zk8X8L4A|j$lGMVJLxjEUBLIHJ~o13zy9*^gGY;5d9u|xy0SWGq_rPpN+;(OiW0n>V?LbVe^l+T&LjmdVi|p2=9zi04JJ_f_DzYnxL&CSj1_xnF#Tx|lSo1dST^C+p;>y6u11i-F1B^DMI*eK=gndo#n z8RsGb)~>6oduM*O;C}{l2qD6Tf;DDNSj~5Tcrh9-0y=IP$=}jtnA@Tq#v19Fz(n99bj|)3wwBWmzaS)~bM#QzAMskS3z) z5@yCO&a%ot7G+_Jd-J#obLrIFfw@Q6*%KmqR-kld)v9l514s^208sJ^s$dMulR*f9 z1gdOs9FpM*qbM^d!yFlXK_Zk4zpsq{7&k#ge*lDt{R=_zbH4xp002ovPDHLkV1i&= B&0PQh literal 0 HcmV?d00001 diff --git a/front/dist/resources/logos/cursor_pointer.png b/front/dist/resources/logos/cursor_pointer.png new file mode 100644 index 0000000000000000000000000000000000000000..dd31871275fc4d3d45e0dea93d63b2517909fee8 GIT binary patch literal 937 zcmV;a16KTrP)|L7}1qbNs2*)n~=B=B=`dJ z1Jac)1XGAK8__>d%tGy|O?L%Bw1pON<1JMxm}1gyEOZf&ZggR6S|7FTDd+Z1NUpij z(gTN?IWy;*^9B)BSes_OZFg97mO^z_io%nThL zAG3hM;qd)`0ky+K@p$~5)9FMelYz_Sg2&^5&1QQ5AZ31QMOQ!%4h{+v6BBjGWKute zLLqEzZQb?z{pXF1jTyV${-sbT1Y9oHBfb|xyk1^j{#XWLHoc{#g;eh zXliPT#>U1-Q4|^(86l6yqrVA-LT8akiM)Gg#aTg=2VzF%Ekl^$Gmp9_9)aPWiQ@4sAJT%`K?dR>7P`IBnI z2FTbJ-4{Z56-9ZzySv-f-Q8_Zr_*R^YSP{2((-z}Rm+G&bb5LkEps2hGno`=RVtMt zx7%ISLP?x3pU?NxoG2}u%_5abAsUS$kx1y4#$vG>75vJ|3fkM--|)T^bZv5S^1ToO zOG``G-`~f^#>S073xxtME-vg9vkx#%Oi$40=x8zP*AX{IUteFra!NHfH@}L<<7cw0 zWD{5sml(g}VPpv^+f~yv%H?up$+IFZKRJJ`XClBglw?pYc%H3X4U+g1_JG5~pLTR~ z6kE0Wum#$BdwV~z#XL;7$9X1j_b?CxCK3rsCX>|P-~UqT2}8LmO;1mssj6DXeI5t| z(AwIH!^6Y#bUMAGY1#{}93sj|j4SiB60NVVzf}~a-|cp17Zw)Q43Lb~`)e%~T)03R zfLy7Zswfsg4dq$@P5^Z#FGK}h33>tG9Kb0N{VakCA?^TBj7K(uYf4z2ZKf{#1%QDr z0sJubM|L4ZjR7c1KEFA!Do7|UNs?3VNjhG$*$a4rdfmO3_Bu^59$sV_^004ggltrZvyL26E00000 LNkvXXu0mjf_dTh| literal 0 HcmV?d00001 diff --git a/front/dist/resources/logos/style.css b/front/dist/resources/logos/style.css new file mode 100644 index 00000000..b57db62b --- /dev/null +++ b/front/dist/resources/logos/style.css @@ -0,0 +1,988 @@ +*{ + font-family: 'Open Sans', sans-serif; + cursor: url('../images/cursor_normal.png'), auto; +} +body{ + overflow: hidden; +} +body button:focus, +body img:focus, +body input:focus { + outline: -webkit-focus-ring-color auto 0; +} +body .message-info{ + width: 20%; + height: auto; + min-height: 30px; + position: absolute; + top: 5px; + left: 40%; + padding-top: 10px; + text-align: center; +} +body .message-info.error{ + background: red; +} +body .message-info.success{ + background: green; +} +body .message-info.info{ + background: dodgerblue; +} +body .message-info.warning{ + background: #ffa500d6; +} +.video-container{ + position: relative; + transition: all 0.2s ease; + background-color: #00000099; +} +.video-container i{ + position: absolute; + width: 100px; + height: 65px; + left: calc(50% - 50px); + top: calc(50% - 50px); + background-color: black; + border-radius: 50%; + text-align: center; + padding-top: 35px; + font-size: 28px; + color: white; +} +.video-container img.active{ + display: block; +} +.video-container img{ + position: absolute; + display: none; + width: 15px; + height: 15px; + background: #d93025; + border-radius: 48px; + left: 5px; + bottom: 5px; + padding: 10px; + z-index: 2; +} + +.video-container img.report{ + right: 5px; + left: auto; +} + +.video-container video{ + height: 100%; +} + +.video-container video:focus{ + outline: none; +} + +.video-container#div-myCamVideo{ + border: none; +} + +#div-myCamVideo { + position: absolute; + right: 15px; + bottom: 15px; + border-radius: 15px 15px 15px 15px; +} + +video#myCamVideo{ + width: 15vw; + -webkit-transform: scaleX(-1); + transform: scaleX(-1); + border-radius: 15px 15px 15px 15px; + /*width: 200px;*/ + /*height: 113px;*/ +} + + +.btn-cam-action { + position: absolute; + bottom: 0px; + right: 0px; + width: 450px; + height: 150px; +} +/*btn animation*/ +.btn-cam-action div{ + cursor: pointer; + position: absolute; + border: solid 0px black; + width: 44px; + height: 44px; + background: #666; + box-shadow: 2px 2px 24px #444; + border-radius: 48px; + transform: translateY(40px); + transition-timing-function: ease-in-out; + bottom: 20px; +} +.btn-cam-action div.disabled { + background: #d75555; +} +.btn-cam-action div.enabled { + background: #73c973; +} +.btn-cam-action:hover div{ + transform: translateY(0); +} +.btn-cam-action div:hover{ + background: #407cf7; + box-shadow: 4px 4px 48px #666; + transition: 280ms; +} +.btn-micro{ + transition: all .3s; + right: 44px; +} +.btn-video{ + transition: all .25s; + right: 134px; +} +.btn-monitor{ + transition: all .2s; + right: 224px; +} +/*.btn-call{ + transition: all .1s; + left: 0px; +}*/ +.btn-cam-action div img{ + height: 22px; + width: 30px; + top: calc(48px - 37px); + left: calc(48px - 41px); + position: relative; +} + +/* Spinner */ +.connecting-spinner { + /*display: inline-block;*/ + position: absolute; + left: calc(50% - 68px); + top: calc(50% - 68px); + + + width: 130px; + height: 130px; + } +.connecting-spinner:after { + content: " "; + display: block; + width: 108px; + height: 108px; + margin: 8px; + border-radius: 50%; + border: 6px solid #fff; + border-color: #fff transparent #fff transparent; + animation: connecting-spinner 1.2s linear infinite; +} +@keyframes connecting-spinner { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + + +.rtc-error { + position: absolute; + left: calc(50% - 68px); + top: calc(50% - 68px); + + + width: 130px; + height: 130px; +} +.rtc-error:after { + content: " "; + display: block; + width: 108px; + height: 108px; + margin: 8px; + border-radius: 50%; + border: 6px solid #f00; + animation: blinker 1s linear infinite; +} + +@keyframes blinker { + 50% { + opacity: 0; + } +} + +.webrtcsetup{ + display: none; + position: absolute; + top: 140px; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + height: 50%; + width: 50%; + border: white 6px solid; +} +.webrtcsetup .background-img { + position: relative; + display: block; + width: 40%; + height: 60%; + margin-left: auto; + margin-right: auto; + top: 50%; + transform: translateY(-50%); +} +#myCamVideoSetup { + width: 100%; + height: 100%; +} +.webrtcsetup.active{ + display: block; +} + + +/* New layout */ +body { + margin: 0; + height: 100vh; + width: 100vw; +} +.main-container { + height: 100vh; + width: 100vw; + position: absolute; +} + +@media (min-aspect-ratio: 1/1) { + .game-overlay { + flex-direction: row; + } + + .sidebar { + flex-direction: column; + } + + .sidebar > div { + max-height: 21%; + } + + .sidebar > div:hover { + max-height: 25%; + } + + #cowebsite { + right: 0; + top: 0; + width: 50%; + height: 100vh; + } + #cowebsite.loading { + transform: translateX(90%); + } + #cowebsite.hidden { + transform: translateX(100%); + } + + #cowebsite .close-btn{ + position: absolute; + top: 10px; + right: -100px; + background: none; + border: none; + cursor: pointer; + animation: right .2s ease; + } + #cowebsite .close-btn img{ + height: 15px; + right: 15px; + } + #cowebsite:hover .close-btn{ + right: 10px; + } +} +@media (max-aspect-ratio: 1/1) { + .game-overlay { + flex-direction: column; + } + + .sidebar { + flex-direction: row; + align-items: flex-end; + } + + .sidebar > div { + max-width: 21%; + } + + .sidebar > div:hover { + max-width: 25%; + } + + #cowebsite { + left: 0; + bottom: 0; + width: 100%; + height: 50%; + } + #cowebsite.loading { + transform: translateY(90%); + } + #cowebsite.hidden { + transform: translateY(100%); + } +} + +#game { + width: 100%; + position: relative; /* Position relative is needed for the game-overlay. */ +} + +/* A potentially shared website could appear in an iframe in the cowebsite space. */ +#cowebsite { + position: fixed; + transition: transform 0.5s; +} +#cowebsite.loading { + background-color: gray; +} + +#cowebsite > iframe { + width: 100%; + height: 100%; +} + +.game-overlay { + display: none; + position: absolute; + width: 100%; + height: 100%; + /* TODO: DO WE NEED FLEX HERE???? WE WANT A SIDEBAR OF EXACTLY 25% (note: flex useful for direction!!!) */ +} + +.game-overlay.active { + display: flex; +} + +.game-overlay video { + width: 100% +} + +.main-section { + flex: 0 0 75%; + display: flex; + justify-content: start; + align-items: flex-start; + flex-wrap: wrap; +} + +.main-section > div { + margin: 2%; + flex-basis: 96%; + transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, flex-basis 0.2s; + cursor: pointer; + /*flex-shrink: 2;*/ +} + +.main-section > div:hover { + margin: 0%; + flex-basis: 100%; +} + +.sidebar { + flex: 0 0 25%; + display: flex; +} + +.sidebar > div { + margin: 2%; + transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, max-height 0.2s, max-width 0.2s; + cursor: pointer; + border-radius: 15px 15px 15px 15px; +} + +.sidebar > div:hover { + margin: 0%; +} + +/* Let's make sure videos are vertically centered if they need to be cropped */ +.media-container { + display: flex; + justify-content: center; + flex-direction: column; + overflow: hidden; + border-radius: 15px; +} + +.chat-mode { + display: flex; + width: 100%; + + flex-wrap: wrap; + align-items: flex-start; + + padding: 1%; +} + +.chat-mode > div { + margin: 1%; + max-height: 96%; + transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s; + cursor: pointer; +} + +.chat-mode > div:hover { + margin: 0%; +} +.chat-mode.one-col > div { + flex-basis: 98%; +} + +.chat-mode.two-col > div { + flex-basis: 48%; +} + +.chat-mode.three-col > div { + flex-basis: 31.333333%; +} + +.chat-mode.four-col > div { + flex-basis: 23%; +} + +.chat-mode > div:last-child { + flex-grow: 5; +} + +/*CONSOLE*/ + +.message-container, +.main-console{ + position: absolute; + width: 80%; + height: 80%; + min-height: 200px; + max-height: 80%; + top: -80%; + left: 10%; + background: #333333; + z-index: 200; + transition: all 0.1s ease-out; + border-radius: 0 0 15px 15px; +} + +.message-container{ + height: auto; + border-radius: 0 0 10px 10px; + color: white; + top: 0; +} + +.message-container .content-message{ + position: relative; + padding: 20px; + margin: 20px; + overflow: scroll; + max-height: 400px; +} + +.main-console div.console, +.message-container div.clear { + position: absolute; + color: white; + z-index: 200; + transition: all 0.1s ease-out; + top: calc(100% + 2px); + width: 200px; + height: 40px; + background-color: #2d2d2dba; + left: calc(50% - 100px); + border-radius: 15px 15px 15px 15px; + text-align: center; +} + +.main-console div.message, +.main-console div.setting{ + display: none; +} + +.main-console div.message.active, +.main-console div.setting.active{ + display: block; +} + +.message-container div.clear{ + width: 100px; + left: calc(50% - 50px); +} + +.main-console div.console img, +.message-container div.clear img{ + margin-top: 6px; + width: 30px; + height: 30px; + cursor: pointer; + padding: 0 5px; + transition: all .5s ease; + transform: rotateY(0); + opacity: 0.5; +} +.main-console div.console img:hover, +.message-container div.clear img:hover{ + opacity: 1; +} + +.main-console div.console img.active, +.message-container div.clear img{ + transform: rotateY(3.142rad); + opacity: 1; +} + +.main-console div.console p, +.message-container div.clear p{ + margin-top: 12px; +} + +.main-console div.console:hover, +.message-container div.clear:hover { + cursor: pointer; + top: calc(100% + 5px); + transform: scale(1.2) translateY(3px); +} + +.main-console #input-send-text{ + min-height: 200px; +} + +.main-console #input-send-text .ql-editor{ + color: white; + min-height: 200px; + max-height: 300px; +} + +.main-console .ql-toolbar{ + background: white; +} + +.main-console .btn-action{ + margin: 10px; + text-align: center; +} + +.main-console .btn-action .btn{ + border: 1px solid black; + background-color: #00000000; + color: #ffda01; + border-radius: 15px; + padding: 10px 30px; + transition: all .2s ease; +} +.main-console .btn-action .btn:hover{ + cursor: pointer; + background-color: #ffda01; + color: black; + border: 1px solid black; + transform: scale(1.1); +} + +.main-console .menu { + padding: 20px; + color: #ffffffa6; + text-align: center; +} + +.main-console .menu span { + margin: 20px; + cursor: pointer; +} + +.main-console .menu span.active { + color: white; + border-bottom: solid 1px white; +} + +.main-console section{ + text-align: center; + display: none; +} + +.main-console section.active{ + display: block; +} + +.main-console section div.upload{ + text-align: center; + border: solid 1px #ffda01; + height: 150px; + margin: 10px 200px; + padding: 20px; + min-height: 200px; +} + +.main-console section div.upload label{ + color: #ffda01; +} +.main-console section div.upload input{ + display: none; +} +.main-console section div.upload label img{ + height: 150px; + cursor: pointer; +} +.main-console section div.upload label img{ + cursor: pointer; +} + +/*audio html when audio message playing*/ +.main-container .audio-playing { + position: absolute; + width: 200px; + height: 54px; + right: -210px; + top: 40px; + transition: all 0.1s ease-out; + background-color: black; + border-radius: 30px 0 0 30px; + display: inline-flex; +} + +.main-container .audio-playing.active{ + right: 0; +} +.main-container .audio-playing img{ + width: 30px; + border-radius: 50%; + background-color: #ffda01; + padding: 10px; +} +.main-container .audio-playing p{ + color: white; + margin-left: 10px; +} + +/* VIDEO QUALITY */ +.main-console div.setting h1{ + color: white; +} +.main-console div.setting select{ + background: black; + color: white; + min-width: 280px; + text-align: center; + min-height: 40px; + padding: 10px; + border-radius: 15px; +} +.main-console div.setting select:focus{ + border: solid 1px white; + outline: none; +} +.main-console div.setting.active section{ + display: block; +} + + +/*REPORT input*/ +div.modal-report-user{ + position: absolute; + width: 800px; + height: 600px; + left: calc(50% - 400px); + top: 100px; + background-color: #000000ad; + border-radius: 15px; +} + +.modal-report-user textarea{ + position: absolute; + height: 200px; + z-index: 999; + top: 200px; + background-color: #000000; + color: white; + width: calc(100% - 60px); + margin: 30px; + border-radius: 15px; +} + +.modal-report-user img{ + position: absolute; + height: 50px; + width: 50px; + z-index: 999; + left: calc(50% - 25px); + top: 10px; +} + +.modal-report-user img#cancel-report-user{ + position: absolute; + z-index: 999; + right: 0; + left: auto; + top: 0; + cursor: pointer; + width: 15px; + height: 15px; + margin: 10px; +} + +.modal-report-user button{ + position: absolute; + top: 450px; + left: calc(50% - 50px); + width: 100px; + border: 1px solid black; + background-color: #00000000; + color: #ffda01; + border-radius: 15px; + padding: 10px 30px; + transition: all .2s ease; +} +.modal-report-user button:hover{ + cursor: pointer; + background-color: #ffda01; + color: black; + border: 1px solid black; + transform: scale(1.1); +} + +.modal-report-user p#title-report-user{ + font-size: 30px; + color: white; + position: absolute; + top: 30px; + width: 100%; + text-align: center; +} + +.modal-report-user p#body-report-user{ + font-size: 24px; + color: white; + position: absolute; + top: 70px; + width: 100%; + text-align: left; + padding: 30px; + max-width: calc(800px - 60px); /* size of modal - padding*/ +} + +/*MESSAGE*/ +.discussion{ + position: fixed; + left: -300px; + top: 0px; + width: 220px; + height: 100%; + background-color: #333333; + padding: 20px; + transition: all 0.5s ease; +} +.discussion.active{ + left: 0; +} +.discussion .active-btn{ + display: none; + cursor: pointer; + height: 50px; + width: 50px; + background-color: #2d2d2dba; + position: absolute; + top: calc(50% - 25px); + margin-left: 315px; + border-radius: 50%; + border: none; + transition: all 0.5s ease; +} +.discussion .active-btn.active{ + display: block; +} +.discussion .active-btn:hover { + transform: scale(1.1) rotateY(3.142rad); +} +.discussion .active-btn img{ + width: 26px; + height: 26px; + margin: 13px 5px; +} + +.discussion .close-btn{ + position: absolute; + top: 0; + right: 10px; + background: none; + border: none; + cursor: pointer; +} +.discussion .close-btn img{ + height: 15px; + right: 15px; +} + +.discussion p{ + color: white; + font-size: 22px; + padding-left: 10px; + margin: 0; +} + +.discussion .participants{ + height: 200px; + margin: 10px 0; +} + +.discussion .participants .participant{ + display: flex; + margin: 5px 10px; + background-color: #ffffff69; + padding: 5px; + border-radius: 15px; + cursor: pointer; +} + +.discussion .participants .participant:hover{ + background-color: #ffffff; +} +.discussion .participants .participant:hover p{ + color: black; +} + +.discussion .participants .participant:before { + content: ''; + height: 10px; + width: 10px; + background-color: #1e7e34; + position: absolute; + margin-left: 18px; + border-radius: 50%; + margin-top: 18px; +} + +.discussion .participants .participant img{ + width: 26px; + height: 26px; +} + +.discussion .participants .participant p{ + font-size: 16px; + margin-left: 10px; + margin-top: 2px; +} + +.discussion .participants .participant button.report-btn{ + cursor: pointer; + position: absolute; + background-color: #2d2d2dba; + right: 34px; + margin: 0px; + padding: 6px 0px; + border-radius: 15px; + border: none; + color: white; + width: 0px; + overflow: hidden; + transition: all .5s ease; +} + +.discussion .participants .participant:hover button.report-btn{ + width: 70px; +} + +.discussion .messages{ + position: absolute; + height: calc(100% - 360px); + overflow-x: hidden; + overflow-y: auto; + max-width: calc(100% - 40px); + width: calc(100% - 40px); +} + +.discussion .messages h2{ + color: white; +} + +.discussion .messages .message{ + margin: 5px; + float: right; + text-align: right; + width: 100%; +} + +.discussion .messages .message.me{ + float: left; + text-align: left; +} + +.discussion .messages .message p{ + font-size: 12px; +} + +.discussion .messages .message p.body{ + font-size: 16px; + overflow: hidden; + white-space: pre-wrap; + word-wrap: break-word; +} + +.discussion .send-message{ + position: absolute; + bottom: 45px; + width: 220px; + height: 26px; +} + +.discussion .send-message input{ + position: absolute; + width: calc(100% - 10px); + height: 20px; + background-color: #171717; + color: white; + border-radius: 15px; + border: none; + padding: 6px; +} + +.discussion .send-message img{ + position: absolute; + margin-right: 10px; + width: 20px; + height: 20px; + background-color: #ffffff69; +} +.discussion .send-message img:hover{ + background-color: #ffffff; +} + + +/** Action button **/ +div.action{ + position: absolute; + width: 100%; + height: auto; + text-align: center; + bottom: 40px; + transition: all .5s ease; + animation: mymove .5s; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; +} +div.action p.action-body{ + padding: 10px; + background-color: #2d2d2dba; + color: #fff; + font-size: 12px; + text-align: center; + max-width: 150px; + margin-left: calc(50% - 75px); + border-radius: 15px; +} +@keyframes mymove { + 0% {bottom: 40px;} + 50% {bottom: 30px;} + 100% {bottom: 40px;} +} \ No newline at end of file diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css index 0fa951bc..04bfd194 100644 --- a/front/dist/resources/style/style.css +++ b/front/dist/resources/style/style.css @@ -1,5 +1,9 @@ *{ font-family: 'Open Sans', sans-serif; + cursor: url('../logos/cursor_normal.png'), auto; +} +* a, button, select{ + cursor: url('../logos/cursor_pointer.png'), pointer; } body{ overflow: hidden; @@ -108,7 +112,7 @@ video#myCamVideo{ } /*btn animation*/ .btn-cam-action div{ - cursor: pointer; + cursor: url('../logos/cursor_pointer.png'), pointer; position: absolute; border: solid 0px black; width: 44px; @@ -295,7 +299,7 @@ body { right: -100px; background: none; border: none; - cursor: pointer; + cursor: url('../logos/cursor_pointer.png'), pointer; animation: right .2s ease; } #cowebsite .close-btn img{ @@ -385,7 +389,7 @@ body { margin: 2%; flex-basis: 96%; transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, flex-basis 0.2s; - cursor: pointer; + cursor: url('../logos/cursor_pointer.png'), pointer; /*flex-shrink: 2;*/ } @@ -402,7 +406,7 @@ body { .sidebar > div { margin: 2%; transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, max-height 0.2s, max-width 0.2s; - cursor: pointer; + cursor: url('../logos/cursor_pointer.png'), pointer; border-radius: 15px 15px 15px 15px; } @@ -433,7 +437,7 @@ body { margin: 1%; max-height: 96%; transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s; - cursor: pointer; + cursor: url('../logos/cursor_pointer.png'), pointer; } .chat-mode > div:hover { @@ -526,7 +530,7 @@ body { margin-top: 6px; width: 30px; height: 30px; - cursor: pointer; + cursor: url('../logos/cursor_pointer.png'), pointer; padding: 0 5px; transition: all .5s ease; transform: rotateY(0); @@ -550,7 +554,7 @@ body { .main-console div.console:hover, .message-container div.clear:hover { - cursor: pointer; + cursor: url('../logos/cursor_pointer.png'), pointer; top: calc(100% + 5px); transform: scale(1.2) translateY(3px); } @@ -583,7 +587,7 @@ body { transition: all .2s ease; } .main-console .btn-action .btn:hover{ - cursor: pointer; + cursor: url('../logos/cursor_pointer.png'), pointer; background-color: #ffda01; color: black; border: 1px solid black; @@ -598,7 +602,7 @@ body { .main-console .menu span { margin: 20px; - cursor: pointer; + cursor: url('../logos/cursor_pointer.png'), pointer; } .main-console .menu span.active { @@ -632,10 +636,10 @@ body { } .main-console section div.upload label img{ height: 150px; - cursor: pointer; + cursor: url('../logos/cursor_pointer.png'), pointer; } .main-console section div.upload label img{ - cursor: pointer; + cursor: url('../logos/cursor_pointer.png'), pointer; } /*audio html when audio message playing*/ @@ -725,7 +729,7 @@ div.modal-report-user{ right: 0; left: auto; top: 0; - cursor: pointer; + cursor: url('../logos/cursor_pointer.png'), pointer; width: 15px; height: 15px; margin: 10px; @@ -744,7 +748,7 @@ div.modal-report-user{ transition: all .2s ease; } .modal-report-user button:hover{ - cursor: pointer; + cursor: url('../logos/cursor_pointer.png'), pointer; background-color: #ffda01; color: black; border: 1px solid black; @@ -787,7 +791,7 @@ div.modal-report-user{ } .discussion .active-btn{ display: none; - cursor: pointer; + cursor: url('../logos/cursor_pointer.png'), pointer; height: 50px; width: 50px; background-color: #2d2d2dba; @@ -816,7 +820,7 @@ div.modal-report-user{ right: 10px; background: none; border: none; - cursor: pointer; + cursor: url('../logos/cursor_pointer.png'), pointer; } .discussion .close-btn img{ height: 15px; @@ -841,7 +845,7 @@ div.modal-report-user{ background-color: #ffffff69; padding: 5px; border-radius: 15px; - cursor: pointer; + cursor: url('../logos/cursor_pointer.png'), pointer; } .discussion .participants .participant:hover{ @@ -874,7 +878,7 @@ div.modal-report-user{ } .discussion .participants .participant button.report-btn{ - cursor: pointer; + cursor: url('../logos/cursor_pointer.png'), pointer; position: absolute; background-color: #2d2d2dba; right: 34px; diff --git a/website/dist/index.html b/website/dist/index.html index 117c540f..0529dd71 100644 --- a/website/dist/index.html +++ b/website/dist/index.html @@ -121,10 +121,10 @@ Stay connected with your future collaborators by organizing online event. -
+
CREATE YOUR MAP diff --git a/website/src/sass/styles.scss b/website/src/sass/styles.scss index f47e12f7..56a1065c 100644 --- a/website/src/sass/styles.scss +++ b/website/src/sass/styles.scss @@ -29,8 +29,8 @@ } html{ cursor: url('../images/cursor_normal.png'), auto; - a{ - cursor: url('../images/cursor_pointer.png'), auto; + button, a, select { + cursor: url('../images/cursor_pointer.png'), pointer; } } header { From bb8980e1d2954e6d908567ee6f24c054c4ed4665 Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Tue, 15 Dec 2020 17:34:47 +0100 Subject: [PATCH 2/2] update pointer style --- front/dist/resources/html/gameQualityMenu.html | 1 + 1 file changed, 1 insertion(+) diff --git a/front/dist/resources/html/gameQualityMenu.html b/front/dist/resources/html/gameQualityMenu.html index 04867c87..95cdeb11 100644 --- a/front/dist/resources/html/gameQualityMenu.html +++ b/front/dist/resources/html/gameQualityMenu.html @@ -44,6 +44,7 @@ background-color: black; color: white; border-radius: 7px; + cursor: url('../logos/cursor_pointer.png'), pointer; }