fix deleted comment layout and its notification display

[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 e586880fce11b30debc39d56b74f1a4d9aa603c0..c04727ba04ab70f3227a7deacf42d43371e5042a 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
@@ -10,10 +10,10 @@ form {
   margin-bottom: 10px;
 
   img {
-    @include avatar(36px);
+    @include avatar(25px);
 
     vertical-align: top;
-    margin-right: 20px;
+    margin-right: 10px;
   }
 
   .form-group {
@@ -22,16 +22,53 @@ form {
 
     textarea {
       @include peertube-textarea(100%, 60px);
+
+      &:focus::placeholder {
+        opacity: 0;
+      }
     }
   }
 }
 
-.submit-comment {
+.cancel-button {
+  font-weight: $font-semibold;
+  display: inline-block;
+  padding: 0 10px 0 10px;
+  white-space: nowrap;
+  background: transparent;
+}
+
+.comment-buttons {
   display: flex;
-  justify-content: end;
+  justify-content: flex-end;
 
   button {
     @include peertube-button;
-    @include orange-button
+
+    &:last-child {
+      @include orange-button;
+    }
+  }
+}
+
+@media screen and (max-width: 600px) {
+  textarea, .comment-buttons button {
+    font-size: 14px !important;
+  }
+
+  textarea {
+    padding: 5px !important;
+  }
+}
+
+.modal-body {
+  .btn {
+    @include peertube-button;
+    @include orange-button;
+  }
+
+  span {
+    float: left;
+    margin-bottom: 20px;
   }
 }