Merge pull request #491 from thecodingmachine/updateStyleCss

update pointer style

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;

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;

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;
@@ -43,6 +44,7 @@
         background-color: black;
         color: white;
         border-radius: 7px;
+        cursor: url('../logos/cursor_pointer.png'), pointer;
     }
 </style>
 

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;}
+}

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;

website/dist/index.html

@@ -121,10 +121,10 @@
                         Stay connected with your future collaborators by organizing online event.
                     </h3>
                 </div>
-                <div class="row buttons-row justify-content-md-center pt-5">
+                <div class="row buttons-row justify-content-md-center pt-5"
+                     style="min-height: 80px;">
                     <div class="col  col-lg-3">
                         <a class="custom-link start"
-                           style="padding-top: 4px;font-size: 18px;"
                            target="_BLANK" onclick="startConsole()" title="YOUR ADVENTURE!">
                             CREATE YOUR MAP
                         </a>

website/src/sass/styles.scss

@@ -29,8 +29,8 @@
 }
 html{
     cursor: url('../images/cursor_normal.png'), auto;
-    a{
+    button, a, select {
-        cursor: url('../images/cursor_pointer.png'), auto;
+        cursor: url('../images/cursor_pointer.png'), pointer;
     }
 }
 header {