Client: display video tags

[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 cd9d71fb4752837554331f767e2af2378765cb0b..8d8454cfdc38fc9f2766b4972f7dcf530057e0f3 100644 (file)
--- a/client/src/app/videos/video-watch/video-watch.component.scss
+++ b/client/src/app/videos/video-watch/video-watch.component.scss
@@ -37,15 +37,20 @@
     font-size: 18px;
     height: $video-watch-title-height;
     line-height: $video-watch-title-height;
-    padding: 0 30px;
+
+    .video-name {
+      padding-left: $video-watch-info-padding-left;
+    }
 
     .video-views {
       text-align: right;
+      // Keep a symmetry with the video name
+      padding-right: $video-watch-info-padding-left
     }
   }
 
   .video-small-blocks {
-    height: 150px;
+    height: $video-watch-info-height;
     color: $video-watch-info-color;
     border-color: $video-watch-border-color;
     border-width: 1px 0px;
@@ -75,7 +80,7 @@
       .option .glyphicon {
         font-size: 22px;
         color: inherit;
-        opacity: 0.9;
+        opacity: 0.6;
         margin-bottom: 10px;
       }
 
@@ -94,6 +99,8 @@
     .video-small-block-author {
       font-size: 15px;
       font-weight: bold;
+      text-align: left;
+      padding-left: $video-watch-info-padding-left;
     }
 
     .video-small-block-share, .video-small-block-more {
@@ -144,7 +151,7 @@
     margin-top: 30px;
 
     .video-details-date-description {
-      padding-left: 30px;
+      padding-left: $video-watch-info-padding-left;
 
       .video-details-date {
         font-weight: bold;
@@ -163,5 +170,15 @@
         margin-right: 5px;
       }
     }
+
+    .video-details-tags {
+      display: inline-block;
+
+      a {
+        display: inline-block;
+        margin-right: 3px;
+        font-size: 11px;
+      }
+    }
   }
 }