Merge branch 'develop' of github.com:thecodingmachine/workadventure into main

front/style/index.scss

@@ -5,3 +5,4 @@
 @import "style";
 @import "mobile-style.scss";
 @import "fonts.scss";
+@import "svelte-style.scss";

front/style/style.scss

@@ -672,18 +672,15 @@ input[type=range]:focus::-ms-fill-upper {
     grid-template-columns: repeat(4, 1fr);
 }
 
-
-/*CONSOLE*/
-
-.message-container,
-.main-console {
+/*GLOBAL MESSAGE*/
+.message-container {
     position: absolute;
     width: 80%;
     height: 80%;
     min-height: 200px;
     max-height: 80%;
     top: -80%;
-    /*left: 10%;*/
+    //left: 10%;
     left: 250px;
     background: #333333;
     z-index: 200;
@@ -706,7 +703,6 @@ input[type=range]:focus::-ms-fill-upper {
     max-height: 400px;
 }
 
-.main-console div.console,
 .message-container div.clear {
     position: absolute;
     color: white;
@@ -721,23 +717,12 @@ input[type=range]:focus::-ms-fill-upper {
     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 {
+.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;
@@ -747,107 +732,24 @@ input[type=range]:focus::-ms-fill-upper {
     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;
 }
 
-.main-console div.console:hover,
 .message-container div.clear:hover {
     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{
-    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;
-}
-
-.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;
-}
-
 
 /* VIDEO QUALITY */
 

front/style/svelte-style.scss

@@ -0,0 +1,60 @@
+//Contains all styles not unique to a svelte component.
+
+//ConsoleGlobalMessage
+div.main-console.nes-container {
+  pointer-events: auto;
+  margin-left: auto;
+  margin-right: auto;
+  top: 20vh;
+  width: 50vw;
+  height: 50vh;
+  padding: 0;
+  background-color: #333333;
+
+  .btn-action{
+    margin: 10px;
+    text-align: center;
+  }
+
+  .main-global-message {
+    width: 100%;
+    max-height: 100%;
+  }
+
+  .main-global-message h2 {
+    text-align: center;
+    color: white;
+  }
+
+  div.global-message {
+    display: flex;
+    max-height: 100%;
+    width: 100%;
+  }
+
+  div.menu {
+    flex: auto;
+  }
+
+  div.menu button {
+    margin: 7px;
+  }
+
+  .main-input {
+    width: 95%;
+  }
+
+//InputTextGlobalMessage
+  .section-input-send-text {
+    margin: 10px;
+  }
+
+  .section-input-send-text .input-send-text .ql-editor{
+    color: white;
+    min-height: 200px;
+  }
+
+  .section-input-send-text .ql-toolbar{
+    background: white;
+  }
+}