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

front/style/index.scss

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

front/style/inputTextGlobalMessageSvelte-Style.scss

@@ -0,0 +1,31 @@
+//InputTextGlobalMessage
+section.section-input-send-text {
+  height: 100%;
+
+  .ql-toolbar{
+    max-height: 100px;
+
+    background: whitesmoke;
+  }
+
+  div.input-send-text{
+    height: calc(100% - 100px);
+    overflow: auto;
+
+    color: whitesmoke;
+    font-size: 1rem;
+
+    .ql-editor.ql-blank::before {
+      color: whitesmoke;
+      font-size: 1rem;
+    }
+
+    .ql-tooltip {
+      top: 40% !important;
+      left: 20% !important;
+
+      color: whitesmoke;
+      background-color: #333333;
+    }
+  }
+}

front/style/mobile-style.scss

@@ -28,8 +28,8 @@
     height: 80%;
 
     &> div {
-      max-height: 120px;
       min-width: 200px;
+      max-height: 21vh;
     }
 
     .video-container{

front/style/style.scss

@@ -47,6 +47,11 @@ body .message-info.warning{
         height: 100%;
         max-height: 90vh;
         cursor: url('./images/cursor_pointer.png'), pointer;
+
+        &.mobile{
+            width: 100%;
+            height: 21vh;
+        }
     }
 
     i {
@@ -73,6 +78,10 @@ body .message-info.warning{
         bottom: 5px;
         padding: 10px;
         z-index: 2;
+
+        &.active {
+            display: block !important;
+        }
     }
 
     img.block-logo {
@@ -385,6 +394,10 @@ body {
 
 #game {
     position: relative; /* Position relative is needed for the game-overlay. */
+
+    iframe {
+        pointer-events: all;
+    }
 }
 
 .audioplayer:first-child  {

front/style/svelte-style.scss

@@ -1,60 +0,0 @@
-//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;
-  }
-}