From e7727e122e3265a31687bafd4c4a3fb605399c44 Mon Sep 17 00:00:00 2001
From: _Bastler <_Bastler@bstly.de>
Date: Fri, 14 May 2021 16:41:41 +0200
Subject: [PATCH] storage + nes.css

---
 front/dist/resources/style/style.css  | 388 ++++++++++++++++----------
 front/src/Api/IframeListener.ts       |   1 +
 front/src/WebRtc/DiscussionManager.ts |   8 +-
 3 files changed, 248 insertions(+), 149 deletions(-)

diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css
index 93f8fabc..ee67ec2e 100644
--- a/front/dist/resources/style/style.css
+++ b/front/dist/resources/style/style.css
@@ -1,16 +1,21 @@
-* a, button, select{
+* a,
+button,
+select {
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
 }
-body{
+
+body {
     overflow: hidden;
     font-size: 10px;
 }
+
 body button:focus,
 body img:focus,
 body input:focus {
     outline: -webkit-focus-ring-color auto 0;
 }
-body .message-info{
+
+body .message-info {
     width: 20%;
     height: auto;
     min-height: 30px;
@@ -20,24 +25,30 @@ body .message-info{
     padding-top: 10px;
     text-align: center;
 }
-body .message-info.error{
+
+body .message-info.error {
     background: red;
 }
-body .message-info.success{
+
+body .message-info.success {
     background: green;
 }
-body .message-info.info{
+
+body .message-info.info {
     background: dodgerblue;
 }
-body .message-info.warning{
+
+body .message-info.warning {
     background: #ffa500d6;
 }
-.video-container{
+
+.video-container {
     position: relative;
     transition: all 0.2s ease;
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
 }
-.video-container i{
+
+.video-container i {
     position: absolute;
     width: 100px;
     height: 100px;
@@ -52,7 +63,7 @@ body .message-info.warning{
     overflow: hidden;
 }
 
-.video-container img{
+.video-container img {
     position: absolute;
     display: none;
     width: 40px;
@@ -62,6 +73,7 @@ body .message-info.warning{
     padding: 10px;
     z-index: 2;
 }
+
 .video-container img.block-logo {
     left: 30%;
     bottom: 15%;
@@ -69,7 +81,7 @@ body .message-info.warning{
     height: 150px;
 }
 
-.video-container button.report{
+.video-container button.report {
     display: block;
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
     background: none;
@@ -88,7 +100,7 @@ body .message-info.warning{
     transition: all .5s ease;
 }
 
-.video-container:hover button.report{
+.video-container:hover button.report {
     width: 35px;
     padding: 10px;
 }
@@ -97,7 +109,7 @@ body .message-info.warning{
     width: 150px;
 }
 
-.video-container button.report img{
+.video-container button.report img {
     position: absolute;
     display: block;
     bottom: 5px;
@@ -108,7 +120,8 @@ body .message-info.warning{
     width: 25px;
     height: 25px;
 }
-.video-container button.report span{
+
+.video-container button.report span {
     position: absolute;
     bottom: 6px;
     left: 36px;
@@ -116,19 +129,20 @@ body .message-info.warning{
     font-size: 16px;
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
 }
+
 .video-container img.active {
     display: block !important;
 }
 
-.video-container video{
+.video-container video {
     height: 100%;
 }
 
-.video-container video:focus{
+.video-container video:focus {
     outline: none;
 }
 
-.video-container#div-myCamVideo{
+.video-container#div-myCamVideo {
     padding: 12px 12px !important;
 }
 
@@ -139,7 +153,7 @@ body .message-info.warning{
     max-height: 200px;
 }
 
-video#myCamVideo{
+video#myCamVideo {
     width: 15vw;
     -webkit-transform: scaleX(-1);
     transform: scaleX(-1);
@@ -147,7 +161,6 @@ video#myCamVideo{
     /*height: 113px;*/
 }
 
-
 .btn-cam-action {
     pointer-events: all;
     position: absolute;
@@ -156,8 +169,11 @@ video#myCamVideo{
     width: 450px;
     height: 150px;
 }
+
+
 /*btn animation*/
-.btn-cam-action div{
+
+.btn-cam-action div {
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
     position: absolute;
     height: 44px;
@@ -167,42 +183,51 @@ video#myCamVideo{
     bottom: 20px;
     pointer-events: none;
 }
+
 .btn-cam-action div.disabled {
     background: #d75555;
 }
+
 .btn-cam-action div.enabled {
     background: #73c973;
 }
-.btn-cam-action:hover div{
+
+.btn-cam-action:hover div {
     transform: translateY(0);
 }
-.btn-cam-action div:hover{
+
+.btn-cam-action div:hover {
     background: #407cf7;
     box-shadow: 4px 4px 48px #666;
     transition: 120ms;
 }
-.btn-micro{
+
+.btn-micro {
     pointer-events: auto;
     transition: all .3s;
     right: 44px;
 }
-.btn-video{
+
+.btn-video {
     pointer-events: auto;
     transition: all .25s;
     right: 134px;
 }
-.btn-monitor{
+
+.btn-monitor {
     pointer-events: auto;
     transition: all .2s;
     right: 224px;
 }
-.btn-copy{
+
+.btn-copy {
     pointer-events: auto;
     transition: all .3s;
     right: 44px;
     opacity: 1;
 }
-.btn-cam-action div img{
+
+.btn-cam-action div img {
     height: 22px;
     width: auto;
     position: relative;
@@ -210,17 +235,18 @@ video#myCamVideo{
     pointer-events: all;
 }
 
+
 /* Spinner */
+
 .connecting-spinner {
-      /*display: inline-block;*/
-      position: absolute;
-      left: calc(50% - 62px);
-      top: calc(50% - 62px);
+    /*display: inline-block;*/
+    position: absolute;
+    left: calc(50% - 62px);
+    top: calc(50% - 62px);
+    width: 130px;
+    height: 130px;
+}
 
-
-      width: 130px;
-      height: 130px;
-  }
 .connecting-spinner:after {
     content: " ";
     display: block;
@@ -232,6 +258,7 @@ video#myCamVideo{
     border-color: #fff transparent #fff transparent;
     animation: connecting-spinner 1.2s linear infinite;
 }
+
 @keyframes connecting-spinner {
     0% {
         transform: rotate(0deg);
@@ -241,16 +268,14 @@ video#myCamVideo{
     }
 }
 
-
 .rtc-error {
     position: absolute;
     left: calc(50% - 68px);
     top: calc(50% - 68px);
-
-
     width: 130px;
     height: 130px;
 }
+
 .rtc-error:after {
     content: " ";
     display: block;
@@ -268,7 +293,7 @@ video#myCamVideo{
     }
 }
 
-.webrtcsetup{
+.webrtcsetup {
     display: none;
     position: absolute;
     top: 140px;
@@ -280,6 +305,7 @@ video#myCamVideo{
     width: 50%;
     border: white 6px solid;
 }
+
 .webrtcsetup .background-img {
     position: relative;
     display: block;
@@ -290,21 +316,25 @@ video#myCamVideo{
     top: 50%;
     transform: translateY(-50%);
 }
+
 #myCamVideoSetup {
     width: 100%;
     height: 100%;
 }
-.webrtcsetup.active{
+
+.webrtcsetup.active {
     display: block;
 }
 
 
 /* New layout */
+
 body {
     margin: 0;
     height: 100vh;
     width: 100vw;
 }
+
 .main-container {
     height: 100vh;
     width: 100vw;
@@ -315,40 +345,38 @@ body {
     .game-overlay {
         flex-direction: row;
     }
-
     .sidebar {
         flex-direction: column;
     }
-
-    .sidebar > div {
+    .sidebar>div {
         max-height: 21%;
     }
-
-    .sidebar > div:hover {
+    .sidebar>div:hover {
         max-height: 25%;
     }
-
-    
 }
 
 #game {
     width: 100%;
-    position: relative; /* Position relative is needed for the game-overlay. */
+    position: relative;
+    /* Position relative is needed for the game-overlay. */
 }
 
-.audioplayer:first-child  {
+.audioplayer:first-child {
     display: grid;
     grid: 2rem / 4rem 10rem;
 }
 
-.audioplayer > button, .audioplayer > div, .audioplayer > label {
-    background-color: rgba(0,0,0,0.5);
+.audioplayer>button,
+.audioplayer>div,
+.audioplayer>label {
+    background-color: rgba(0, 0, 0, 0.5);
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
-.audioplayer > div {
+.audioplayer>div {
     padding-right: 1.2rem;
 }
 
@@ -365,49 +393,62 @@ body {
     max-width: 5rem;
     border: none;
 }
-#audioplayer_mute:focus, #audioplayer_mute:active {
+
+#audioplayer_mute:focus,
+#audioplayer_mute:active {
     outline: none;
 }
-#audioplayer_mute > svg {
+
+#audioplayer_mute>svg {
     width: 100%;
     height: 100%;
     pointer-events: none;
 }
+
 #audioplayer_volume_icon_playing.muted {
     visibility: hidden;
     display: none;
 }
+
 #audioplayer_volume_icon_playing.low #audioplayer_volume_icon_playing_high {
     visibility: hidden;
     display: none;
 }
+
 #audioplayer_volume_icon_playing.low #audioplayer_volume_icon_playing_mid {
     visibility: hidden;
     display: none;
 }
+
 #audioplayer_volume_icon_playing.mid #audioplayer_volume_icon_playing_high {
     visibility: hidden;
     display: none;
 }
-#audioplayerctrl > #audioplayer_volume {
+
+#audioplayerctrl>#audioplayer_volume {
     width: 100%;
-    background-color: rgba(0,0,0,0.5);
+    background-color: rgba(0, 0, 0, 0.5);
 }
 
+
 /*
  * sollte eigentlich in den aspect-ratio teil ..
  */
+
 #audioplayerctrl.loading {
     transform: translateY(-90%);
 }
+
 #audioplayerctrl.hidden {
     transform: translateY(-100%);
 }
 
+
 /*
  * Style Input Range
  * https://www.cssportal.com/style-input-range/
  */
+
 input[type=range] {
     height: 28px;
     -webkit-appearance: none;
@@ -415,9 +456,11 @@ input[type=range] {
     width: 100%;
     background-color: transparent;
 }
+
 input[type=range]:focus {
     outline: none;
 }
+
 input[type=range]::-webkit-slider-runnable-track {
     width: 100%;
     height: 5px;
@@ -427,6 +470,7 @@ input[type=range]::-webkit-slider-runnable-track {
     border-radius: 5px;
     border: 1px solid #000000;
 }
+
 input[type=range]::-webkit-slider-thumb {
     box-shadow: 1px 1px 1px #000000;
     border: 1px solid #000000;
@@ -437,9 +481,11 @@ input[type=range]::-webkit-slider-thumb {
     -webkit-appearance: none;
     margin-top: -8.5px;
 }
+
 input[type=range]:focus::-webkit-slider-runnable-track {
     background: #FFFFFF;
 }
+
 input[type=range]::-moz-range-track {
     width: 100%;
     height: 5px;
@@ -449,6 +495,7 @@ input[type=range]::-moz-range-track {
     border-radius: 5px;
     border: 1px solid #000000;
 }
+
 input[type=range]::-moz-range-thumb {
     box-shadow: 1px 1px 1px #000000;
     border: 1px solid #000000;
@@ -457,6 +504,7 @@ input[type=range]::-moz-range-thumb {
     border-radius: 5px;
     background: #FFFFFF;
 }
+
 input[type=range]::-ms-track {
     width: 100%;
     height: 5px;
@@ -465,18 +513,21 @@ input[type=range]::-ms-track {
     border-color: transparent;
     color: transparent;
 }
+
 input[type=range]::-ms-fill-lower {
     background: #FFFFFF;
     border: 1px solid #000000;
     border-radius: 10px;
     box-shadow: 1px 1px 1px #000000;
 }
+
 input[type=range]::-ms-fill-upper {
     background: #FFFFFF;
     border: 1px solid #000000;
     border-radius: 10px;
     box-shadow: 1px 1px 1px #000000;
 }
+
 input[type=range]::-ms-thumb {
     margin-top: 1px;
     box-shadow: 1px 1px 1px #000000;
@@ -486,14 +537,15 @@ input[type=range]::-ms-thumb {
     border-radius: 5px;
     background: #FFFFFF;
 }
+
 input[type=range]:focus::-ms-fill-lower {
     background: #FFFFFF;
 }
+
 input[type=range]:focus::-ms-fill-upper {
     background: #FFFFFF;
 }
 
-
 .game-overlay {
     display: none;
     position: absolute;
@@ -520,7 +572,7 @@ input[type=range]:focus::-ms-fill-upper {
     flex-wrap: wrap;
 }
 
-.main-section > div {
+.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;
@@ -528,7 +580,7 @@ input[type=range]:focus::-ms-fill-upper {
     /*flex-shrink: 2;*/
 }
 
-.main-section > div:hover {
+.main-section>div:hover {
     margin: 0%;
     flex-basis: 100%;
 }
@@ -539,18 +591,20 @@ input[type=range]:focus::-ms-fill-upper {
     pointer-events: none;
 }
 
-.sidebar > div {
+.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: url('/resources/logos/cursor_pointer.png'), pointer;
     padding: 12px 12px !important;
 }
 
-.sidebar > div:hover {
+.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;
@@ -561,22 +615,21 @@ input[type=range]:focus::-ms-fill-upper {
 .chat-mode {
     display: grid;
     width: 100%;
-
     align-items: flex-start;
-
     padding: 1%;
 }
 
-.chat-mode > div {
+.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: url('/resources/logos/cursor_pointer.png'), pointer;
 }
 
-.chat-mode > div:hover {
+.chat-mode>div:hover {
     margin: 0%;
 }
+
 .chat-mode.one-col {
     grid-template-columns: repeat(1, 1fr);
 }
@@ -593,10 +646,11 @@ input[type=range]:focus::-ms-fill-upper {
     grid-template-columns: repeat(4, 1fr);
 }
 
+
 /*CONSOLE*/
 
 .message-container,
-.main-console{
+.main-console {
     position: absolute;
     width: 80%;
     height: 80%;
@@ -611,14 +665,14 @@ input[type=range]:focus::-ms-fill-upper {
     border-radius: 0 0 15px 15px;
 }
 
-.message-container{
+.message-container {
     height: auto;
     border-radius: 0 0 10px 10px;
     color: white;
     top: 0;
 }
 
-.message-container .content-message{
+.message-container .content-message {
     position: relative;
     padding: 20px;
     margin: 20px;
@@ -642,22 +696,22 @@ input[type=range]:focus::-ms-fill-upper {
 }
 
 .main-console div.message,
-.main-console div.setting{
+.main-console div.setting {
     display: none;
 }
 
 .main-console div.message.active,
-.main-console div.setting.active{
+.main-console div.setting.active {
     display: block;
 }
 
-.message-container div.clear{
+.message-container div.clear {
     width: 100px;
     left: calc(50% - 50px);
 }
 
 .main-console div.console img,
-.message-container div.clear img{
+.message-container div.clear img {
     margin-top: 6px;
     width: 30px;
     height: 30px;
@@ -667,19 +721,20 @@ input[type=range]:focus::-ms-fill-upper {
     transform: rotateY(0);
     opacity: 0.5;
 }
+
 .main-console div.console img:hover,
-.message-container div.clear img:hover{
+.message-container div.clear img:hover {
     opacity: 1;
 }
 
 .main-console div.console img.active,
-.message-container div.clear img{
+.message-container div.clear img {
     transform: rotateY(3.142rad);
     opacity: 1;
 }
 
 .main-console div.console p,
-.message-container div.clear p{
+.message-container div.clear p {
     margin-top: 12px;
 }
 
@@ -690,26 +745,26 @@ input[type=range]:focus::-ms-fill-upper {
     transform: scale(1.2) translateY(3px);
 }
 
-.main-console #input-send-text{
+.main-console #input-send-text {
     min-height: 200px;
 }
 
-.main-console #input-send-text .ql-editor{
+.main-console #input-send-text .ql-editor {
     color: white;
     min-height: 200px;
     max-height: 300px;
 }
 
-.main-console .ql-toolbar{
+.main-console .ql-toolbar {
     background: white;
 }
 
-.main-console .btn-action{
+.main-console .btn-action {
     margin: 10px;
     text-align: center;
 }
 
-.main-console .btn-action .btn{
+.main-console .btn-action .btn {
     border: 1px solid black;
     background-color: #00000000;
     color: #ffda01;
@@ -717,7 +772,8 @@ input[type=range]:focus::-ms-fill-upper {
     padding: 10px 30px;
     transition: all .2s ease;
 }
-.main-console .btn-action .btn:hover{
+
+.main-console .btn-action .btn:hover {
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
     background-color: #ffda01;
     color: black;
@@ -741,16 +797,16 @@ input[type=range]:focus::-ms-fill-upper {
     border-bottom: solid 1px white;
 }
 
-.main-console section{
+.main-console section {
     text-align: center;
     display: none;
 }
 
-.main-console section.active{
+.main-console section.active {
     display: block;
 }
 
-.main-console section div.upload{
+.main-console section div.upload {
     text-align: center;
     border: solid 1px #ffda01;
     height: 150px;
@@ -759,23 +815,26 @@ input[type=range]:focus::-ms-fill-upper {
     min-height: 200px;
 }
 
-.main-console section div.upload label{
+.main-console section div.upload label {
     color: #ffda01;
 }
-.main-console section div.upload input{
+
+.main-console section div.upload input {
     display: none;
 }
-.main-console section div.upload label img{
+
+.main-console section div.upload label img {
     height: 150px;
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
 }
-.main-console section div.upload label img{
+
+.main-console section div.upload label img {
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
 }
 
 
-
 /*audio html when audio message playing*/
+
 .main-container .audio-playing {
     position: absolute;
     width: 200px;
@@ -788,26 +847,31 @@ input[type=range]:focus::-ms-fill-upper {
     display: inline-flex;
 }
 
-.main-container .audio-playing.active{
+.main-container .audio-playing.active {
     right: 0;
 }
-.main-container .audio-playing img{
+
+.main-container .audio-playing img {
     /*width: 30px;*/
     border-radius: 50%;
     background-color: #ffda01;
     padding: 10px;
 }
-.main-container .audio-playing p{
+
+.main-container .audio-playing p {
     color: white;
     margin-left: 10px;
     margin-top: 14px;
 }
 
+
 /* VIDEO QUALITY */
-.main-console div.setting h1{
+
+.main-console div.setting h1 {
     color: white;
 }
-.main-console div.setting select{
+
+.main-console div.setting select {
     background: black;
     color: white;
     min-width: 280px;
@@ -816,17 +880,20 @@ input[type=range]:focus::-ms-fill-upper {
     padding: 10px;
     border-radius: 15px;
 }
-.main-console div.setting select:focus{
+
+.main-console div.setting select:focus {
     border: solid 1px white;
     outline: none;
 }
-.main-console div.setting.active section{
+
+.main-console div.setting.active section {
     display: block;
 }
 
 
 /*REPORT input*/
-div.modal-report-user{
+
+div.modal-report-user {
     position: absolute;
     width: 800px;
     height: 600px;
@@ -836,7 +903,7 @@ div.modal-report-user{
     border-radius: 15px;
 }
 
-.modal-report-user textarea{
+.modal-report-user textarea {
     position: absolute;
     height: 200px;
     z-index: 999;
@@ -848,7 +915,7 @@ div.modal-report-user{
     border-radius: 15px;
 }
 
-.modal-report-user img{
+.modal-report-user img {
     position: absolute;
     height: 24px;
     width: 24px;
@@ -857,7 +924,7 @@ div.modal-report-user{
     top: 10px;
 }
 
-.modal-report-user img#cancel-report-user{
+.modal-report-user img#cancel-report-user {
     position: absolute;
     z-index: 999;
     right: 0;
@@ -869,7 +936,7 @@ div.modal-report-user{
     margin: 10px;
 }
 
-.modal-report-user button{
+.modal-report-user button {
     position: absolute;
     top: 450px;
     left: calc(50% - 50px);
@@ -881,7 +948,8 @@ div.modal-report-user{
     padding: 10px 30px;
     transition: all .2s ease;
 }
-.modal-report-user button:hover{
+
+.modal-report-user button:hover {
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
     background-color: #ffda01;
     color: black;
@@ -889,7 +957,7 @@ div.modal-report-user{
     transform: scale(1.1);
 }
 
-.modal-report-user p#title-report-user{
+.modal-report-user p#title-report-user {
     font-size: 30px;
     color: white;
     position: absolute;
@@ -898,7 +966,7 @@ div.modal-report-user{
     text-align: center;
 }
 
-.modal-report-user p#body-report-user{
+.modal-report-user p#body-report-user {
     font-size: 24px;
     color: white;
     position: absolute;
@@ -906,24 +974,29 @@ div.modal-report-user{
     width: 100%;
     text-align: left;
     padding: 30px;
-    max-width: calc(800px - 60px); /* size of modal - padding*/
+    max-width: calc(800px - 60px);
+    /* size of modal - padding*/
 }
 
+
 /*MESSAGE*/
-.discussion{
+
+.discussion {
     position: fixed;
     left: -300px;
     top: 0px;
-    width: 220px;
+    width: 280px;
     height: 100%;
     background-color: #333333;
     padding: 20px;
     transition: all 0.5s ease;
 }
-.discussion.active{
+
+.discussion.active {
     left: 0;
 }
-.discussion .active-btn{
+
+.discussion .active-btn {
     display: none;
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
     height: 50px;
@@ -936,19 +1009,22 @@ div.modal-report-user{
     border: none;
     transition: all 0.5s ease;
 }
-.discussion .active-btn.active{
+
+.discussion .active-btn.active {
     display: block;
 }
+
 .discussion .active-btn:hover {
     transform: scale(1.1) rotateY(3.142rad);
 }
-.discussion .active-btn img{
+
+.discussion .active-btn img {
     width: 26px;
     height: 26px;
     margin: 13px 5px;
 }
 
-.discussion .close-btn{
+.discussion .close-btn {
     position: absolute;
     top: 0;
     right: 10px;
@@ -956,24 +1032,25 @@ div.modal-report-user{
     border: none;
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
 }
-.discussion .close-btn img{
+
+.discussion .close-btn img {
     height: 15px;
     right: 15px;
 }
 
-.discussion p{
+.discussion p {
     color: white;
-    font-size: 22px;
+    font-size: 12px;
     padding-left: 10px;
     margin: 0;
 }
 
-.discussion .participants{
+.discussion .participants {
     height: 200px;
     margin: 10px 0;
 }
 
-.discussion .participants .participant{
+.discussion .participants .participant {
     display: flex;
     margin: 5px 10px;
     background-color: #ffffff69;
@@ -982,10 +1059,11 @@ div.modal-report-user{
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
 }
 
-.discussion .participants .participant:hover{
+.discussion .participants .participant:hover {
     background-color: #ffffff;
 }
-.discussion .participants .participant:hover p{
+
+.discussion .participants .participant:hover p {
     color: black;
 }
 
@@ -1000,18 +1078,18 @@ div.modal-report-user{
     margin-top: 18px;
 }
 
-.discussion .participants .participant img{
+.discussion .participants .participant img {
     width: 26px;
     height: 26px;
 }
 
-.discussion .participants .participant p{
+.discussion .participants .participant p {
     font-size: 16px;
     margin-left: 10px;
     margin-top: 2px;
 }
 
-.discussion .participants .participant button.report-btn{
+.discussion .participants .participant button.report-btn {
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
     position: absolute;
     background-color: #2d2d2dba;
@@ -1026,11 +1104,11 @@ div.modal-report-user{
     transition: all .5s ease;
 }
 
-.discussion .participants .participant:hover button.report-btn{
+.discussion .participants .participant:hover button.report-btn {
     width: 70px;
 }
 
-.discussion .messages{
+.discussion .messages {
     position: absolute;
     height: calc(100% - 390px);
     overflow-x: hidden;
@@ -1039,38 +1117,43 @@ div.modal-report-user{
     width: calc(100% - 40px);
 }
 
-.discussion .messages h2{
+.discussion .messages h2 {
     color: white;
+    font-size: 12px;
 }
 
-.discussion .messages .message{
-    margin: 5px;
+.discussion .messages .message {
+    margin: 5px 0px;
     float: right;
     text-align: right;
     width: 100%;
 }
 
-.discussion .messages .message.me{
+.discussion .messages .message.me {
     float: left;
     text-align: left;
 }
 
-.discussion .messages .message p{
-    font-size: 12px;
+.discussion .messages .message p {
+    font-size: 10px;
 }
 
-.discussion .messages .message p.body{
-    color: white;
-    font-size: 16px;
-    overflow: hidden;
+.discussion .messages .message p.body {
+    color: black;
+    font-size: 12px;
     white-space: pre-wrap;
     word-wrap: break-word;
+    width: 100%;
+    padding: 5px;
+    margin-top: 5px;
+    margin-bottom: 12px;
 }
-.discussion .messages .message p a{
+
+.discussion .messages .message p a {
     color: white;
 }
 
-.discussion .send-message{
+.discussion .send-message {
     position: absolute;
     bottom: 45px;
     width: 200px;
@@ -1078,7 +1161,7 @@ div.modal-report-user{
     margin-bottom: 10px;
 }
 
-.discussion .send-message input{
+.discussion .send-message input {
     position: absolute;
     width: calc(100% - 20px);
     height: 30px;
@@ -1089,20 +1172,22 @@ div.modal-report-user{
     padding: 6px;
 }
 
-.discussion .send-message img{
+.discussion .send-message img {
     position: absolute;
     margin-right: 10px;
     width: 20px;
     height: 20px;
     background-color: #ffffff69;
 }
-.discussion .send-message img:hover{
+
+.discussion .send-message img:hover {
     background-color: #ffffff;
 }
 
 
 /** Action button **/
-div.action{
+
+div.action {
     position: absolute;
     width: 100%;
     height: auto;
@@ -1113,18 +1198,21 @@ div.action{
     animation-iteration-count: infinite;
     animation-timing-function: ease-in-out;
 }
-div.action p.action-body{
+
+div.action p.action-body {
     padding: 10px;
     font-size: 12px;
     font-weight: 500;
     text-align: center;
     max-width: 350px;
 }
-.popUpElement{
+
+.popUpElement {
     font-family: 'Press Start 2P';
     text-align: left;
     color: white;
 }
+
 .popUpElement div {
     font-family: 'Press Start 2P';
     font-size: 10px;
@@ -1141,12 +1229,16 @@ div.action p.action-body{
 .popUpElement .buttonContainer {
     float: right;
     background-color: inherit;
-
 }
 
-
 @keyframes mymove {
-    0% {bottom: 40px;}
-    50% {bottom: 30px;}
-    100% {bottom: 40px;}
-}
+    0% {
+        bottom: 40px;
+    }
+    50% {
+        bottom: 30px;
+    }
+    100% {
+        bottom: 40px;
+    }
+}
\ No newline at end of file
diff --git a/front/src/Api/IframeListener.ts b/front/src/Api/IframeListener.ts
index 0222351d..56ed81db 100644
--- a/front/src/Api/IframeListener.ts
+++ b/front/src/Api/IframeListener.ts
@@ -139,6 +139,7 @@ class IframeListener {
             // We are putting a sandbox on this script because it will run in the same domain as the main website.
             iframe.sandbox.add('allow-scripts');
             iframe.sandbox.add('allow-top-navigation-by-user-activation');
+            iframe.sandbox.add('allow-same-origin');
 
             document.body.prepend(iframe);
 
diff --git a/front/src/WebRtc/DiscussionManager.ts b/front/src/WebRtc/DiscussionManager.ts
index 3e565c21..0041a5c0 100644
--- a/front/src/WebRtc/DiscussionManager.ts
+++ b/front/src/WebRtc/DiscussionManager.ts
@@ -174,13 +174,19 @@ export class DiscussionManager {
         }
         pMessage.innerHTML = `<span style="font-weight: bold">${name}</span>    
                     <span style="color:#bac2cc;display:inline-block;font-size:12px;">
-                        ${date.getHours()}:${date.getMinutes()}
+                        ${date.getHours() < 10 ? '0' + date.getHours() : date.getHours()}:${date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()}
                     </span>`;
         divMessage.appendChild(pMessage);
 
         const userMessage: HTMLParagraphElement = document.createElement('p');
         userMessage.innerHTML = HtmlUtils.urlify(message);
         userMessage.classList.add('body');
+        userMessage.classList.add('nes-balloon');
+        if (isMe) {
+            userMessage.classList.add('from-left');
+        } else {
+            userMessage.classList.add('from-right');
+        }
         divMessage.appendChild(userMessage);
         this.divMessages?.appendChild(divMessage);