Add account settings new design

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

diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index 01ceab3c590c712f2b42c78e99e0f5f0876ce1fd..cad21dd1893bedaabfbe3a11e17392981a81d12f 100644 (file)
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -104,7 +104,7 @@
       border-style: solid;
     }
 
-    .video-small-block-author, .video-small-block-more {
+    .video-small-block-account, .video-small-block-more {
       a.option {
         display: block;
 
@@ -166,10 +166,26 @@
     .video-details-date-description {
       padding-left: $video-watch-info-padding-left;
 
+      .description-loading {
+        display: inline-block;
+      }
+
       .video-details-date {
         font-weight: bold;
         margin-bottom: 30px;
       }
+
+      .video-details-description-more {
+        cursor: pointer;
+        margin-top: 15px;
+        font-weight: bold;
+        color: #acaeb7;
+
+        .glyphicon {
+          position: relative;
+          top: 2px;
+        }
+      }
     }
 
     .video-details-attributes {
@@ -200,12 +216,6 @@
     }
   }
 
-  @media screen and (max-width: 400px) {
-    .video-name-views {
-      font-size: 16px !important;
-    }
-  }
-
   @media screen and (max-width: 800px) {
     .video-name-views {
       .video-name {
@@ -228,8 +238,9 @@
         font-size: 18px !important;
       }
 
-      .video-small-block-author {
+      .video-small-block-account {
         padding-left: 10px;
+        padding-right: 10px;
       }
     }
 
@@ -248,4 +259,38 @@
       }
     }
   }
+
+  @media screen and (max-width: 500px) {
+    .video-name-views {
+      font-size: 16px !important;
+    }
+
+    // Keep the same hierarchy than max-width: 800px
+    .video-small-blocks {
+      a, .video-small-block-text {
+        font-size: 10px !important;
+      }
+
+      .video-small-block-account {
+        padding-left: 5px;
+        padding-right: 5px;
+      }
+    }
+
+    .video-details {
+      .video-details-date-description {
+        margin-bottom: 30px;
+        width: 100%;
+
+        .video-details-date {
+          margin-bottom: 15px;
+        }
+      }
+
+      .video-details-attributes {
+        padding-left: 10px;
+        padding-right: 10px;
+      }
+    }
+  }
 }