]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blobdiff - client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
Fix lint
[github/Chocobozzz/PeerTube.git] / client / src / app / +my-library / +my-video-channels / my-video-channels.component.scss
index 191c5169d998cb76c7e42da15e79287bb0670380..b4907db515d4a0cf75874fd3366ac58bf7aad44f 100644 (file)
@@ -1,13 +1,20 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
-h1 my-global-icon {
-  position: relative;
-  top: -2px;
-}
+h1 {
+  display: flex;
+  justify-content: space-between;
 
-.create-button {
-  @include create-button;
+  my-global-icon {
+    position: relative;
+    top: -2px;
+  }
+
+  .button-link {
+    @include peertube-button-link;
+    @include grey-button;
+    @include button-with-icon(18px, 3px, -1px);
+  }
 }
 
 input[type=text] {
@@ -15,7 +22,7 @@ input[type=text] {
 }
 
 my-edit-button {
-  margin-right: 10px;
+  @include margin-right(10px);
 }
 
 .video-channel {
@@ -24,9 +31,7 @@ my-edit-button {
   padding-bottom: 0;
 
   my-actor-avatar {
-    @include actor-avatar-size(80px);
-
-    margin-right: 10px;
+    @include margin-right(10px);
   }
 }
 
@@ -49,9 +54,14 @@ my-edit-button {
 }
 
 .video-channel-name {
+  @include margin-left(5px);
+
   font-size: 14px;
   color: $grey-actor-name;
-  margin-left: 5px;
+}
+
+.video-channel-followers {
+  color: pvar(--mainForegroundColor);
 }
 
 .video-channel-buttons {
@@ -59,9 +69,10 @@ my-edit-button {
   min-width: 190px;
 }
 
-::ng-deep .chartjs-render-monitor {
-  position: relative;
-  top: 1px;
+.chart-container {
+  // Sync these values with the template
+  width: 40vw;
+  height: 100px;
 }
 
 .video-channels-header {
@@ -77,7 +88,7 @@ my-edit-button {
     padding-bottom: 10px;
 
     img {
-      margin-right: 0;
+      @include margin-right(0);
     }
 
     .video-channel-buttons {
@@ -97,7 +108,7 @@ my-edit-button {
   }
 
   .video-channel-name {
-    margin-left: 0 !important;
+    @include margin-left(0 !important);
   }
 }