Use dedicated chatFont styles

palavatv · Jan 15, 2023 · af718c9 · af718c9
1 parent 07ef2b6
commit af718c9
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/src/components/Chat.vue b/src/components/Chat.vue
@@ -111,7 +111,7 @@ export default {
   width: 100%;
   padding-top: 54px;
 
-  @include defaultFont();
+  @include chatFont();
   @include defaultShadow();
   outline: none;
 
@@ -169,16 +169,18 @@ export default {
   @include lightShadow();
 
   input, button {
-    @include homeFont();
-    padding: 4px 8px;
+    @include chatFont();
+    padding: 0 8px;
     letter-spacing: -1px;
     border: none;
     margin: 0;
   }
 
   input {
     flex: 1;
+    height: 100%;
     background: white;
+
     &:focus, &:active {
       outline: none;
 

diff --git a/src/css/styles.scss b/src/css/styles.scss
@@ -353,6 +353,21 @@ $lobby-border-radius: 0px;
   }
 }
 
+@mixin chatFont() {
+  font-size: 16px;
+  line-height: 1.3em;
+
+  @media (min-width: $desktop-large) {
+    font-size: 17px;
+    line-height: 1.3em;
+  }
+
+  @media (min-width: $desktop-huge) {
+    font-size: 18px;
+    line-height: 1.3em;
+  }
+}
+
 @mixin homeSymbol() {
   height: 35px;
   width: 35px;