Rework graphic of global message console

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,24 @@
+//InputTextGlobalMessage
+section.section-input-send-text {
+  height: 100%;
+
+  .ql-toolbar{
+    max-height: 100px;
+
+    background: whitesmoke;
+  }
+
+  div.input-send-text{
+    height: auto;
+    max-height: calc(100% - 100px);
+    overflow: auto;
+
+    color: whitesmoke;
+    font-size: 1rem;
+
+    .ql-editor.ql-blank::before {
+      color: whitesmoke;
+      font-size: 1rem;
+    }
+  }
+}

front/style/svelte-style.scss

@@ -1,121 +0,0 @@
-//Contains all styles not unique to a svelte component.
-
-//ConsoleGlobalMessage
-div.console-global-message.nes-container {
-  pointer-events: auto;
-  margin-left: auto;
-  margin-right: auto;
-  top: 20vh;
-  width: 50vw;
-  height: 50vh;
-  padding: 0;
-  background-color: #333333;
-
-  .console-global-message-main {
-    width: 100%;
-    height: 100%;
-
-    h2 {
-      margin-bottom: 20px;
-      text-align: center;
-      color: white;
-    }
-
-    .console-global-message-close {
-      position: absolute;
-      right: 0;
-      top: 0;
-    }
-  }
-
-  div.console-global-message-content {
-    display: flex;
-    flex-flow: row;
-    height: calc(100% - (36px + 20px));
-    width: 100%;
-  }
-
-  div.console-global-message-menu {
-    flex: 0 1 auto;
-
-      button {
-        margin: 7px;
-    }
-  }
-
-  .console-global-message-main-input {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    width: 95%;
-    margin-left: 10px;
-    margin-right: 10px;
-
-    .footer-btn-action {
-      width: 100%;
-      margin: 10px;
-      text-align: center;
-    }
-  }
-
-
-//InputTextGlobalMessage
-  .section-input-send-text {
-    flex: 1 1 auto;
-    display: flex;
-    flex-flow: column;
-    height: 100%;
-
-    .ql-toolbar{
-      flex: 0 1 auto;
-      background: white;
-    }
-
-    .input-send-text{
-      flex: 1 1 auto;
-      max-height: calc(100% - 55px);
-      color: white;
-      font-size: 1rem;
-
-      .ql-editor.ql-blank::before {
-        color: white;
-        font-size: 1rem;
-      }
-    }
-  }
-
-
-//UploadAudioGlobalMessage
- .section-input-send-audio {
-   flex: 1 1 auto;
-   display: flex;
-   flex-flow: column;
-   height: 100%;
-
-   img {
-     flex: 1 1 auto;
-     height: 60%;
-     margin-bottom: 10px;
-     cursor: url('images/cursor_pointer.png'), pointer;
-   }
-
-   label {
-     flex: 0 1 auto;
-     color: white;
-     font-size: 1rem;
-     text-align: center;
-   }
-
-   p.err {
-     flex: 0 1 auto;
-     color: #ce372b;
-     font-size: 1rem;
-     text-align: center;
-   }
- }
-
-  #input-send-audio {
-    display: none;
-  }
-}