Fix infinite scroll on big screens

[github/Chocobozzz/PeerTube.git] / client / src / app / videos / +video-watch / comment / video-comment-add.component.scss

diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss b/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss
index 9661062e8f3e3cb1007efff70e60b507835f1587..e998cba5e7fe9100b72b3c9962942153f197213d 100644 (file)
--- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss
+++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss
@@ -1,20 +1,59 @@
 @import '_variables';
 @import '_mixins';
 
-.form-group {
-  margin-bottom: 10px;
+form {
+  margin-bottom: 30px;
 }
 
-textarea {
-  @include peertube-textarea(100%, 150px);
+.avatar-and-textarea {
+  display: flex;
+  margin-bottom: 10px;
+
+  img {
+    @include avatar(36px);
+
+    vertical-align: top;
+    margin-right: 20px;
+  }
+
+  .form-group {
+    flex-grow: 1;
+    margin: 0;
+
+    textarea {
+      @include peertube-textarea(100%, 60px);
+
+      &:focus::placeholder {
+        opacity: 0;
+      }
+    }
+  }
 }
 
 .submit-comment {
   display: flex;
-  justify-content: end;
+  justify-content: flex-end;
 
   button {
     @include peertube-button;
-    @include orange-button
+    @include orange-button;
   }
 }
+
+@media screen and (max-width: 450px) {
+  textarea, .submit-comment button {
+    font-size: 14px !important;
+  }
+}
+
+.modal-body {
+  .btn {
+    @include peertube-button;
+    @include orange-button;
+  }
+
+  span {
+    float: left;
+    margin-bottom: 20px;
+  }
+}
\ No newline at end of file