X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2F%2Bmy-account%2Fmy-account-video-channels%2Fmy-account-video-channels.component.scss;h=144c2440bb94590534239a1981625ef3d0fd782b;hb=8a3183e50dab38ea79b9557840dce546aa1958ca;hp=472cbb723721de3f16f1d936e90b5bc3ed9e6443;hpb=9a0fc8409c7a783348ec212fa9f38d0a98413467;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
index 472cbb723..144c2440b 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
@@ -2,17 +2,18 @@
 @import '_mixins';
 
 .create-button {
-  @include create-button('../../../assets/images/global/add.svg');
+  @include create-button;
 }
 
-/deep/ .action-button {
-  &.action-button-delete {
+::ng-deep .action-button {
+  &.action-button-edit {
     margin-right: 10px;
   }
 }
 
 .video-channel {
   @include row-blocks;
+  padding-bottom: 0;
 
   img {
     @include avatar(80px);
@@ -49,6 +50,7 @@
   }
 
   .video-channel-buttons {
+    margin-top: 10px;
     min-width: 190px;
   }
 }
@@ -58,15 +60,32 @@
   margin: 20px 0 50px;
 }
 
-@media screen and (max-width: 800px) {
+::ng-deep .chartjs-render-monitor {
+  position: relative;
+  top: 1px;
+}
+
+@media screen and (max-width: $small-view) {
   .video-channels-header {
     text-align: center;
   }
 
   .video-channel {
-    .video-channel-names {
-      flex-direction: column;
-      align-items: center !important;
+    padding-bottom: 10px;
+
+    .video-channel-info {
+      padding-bottom: 10px;
+      text-align: center;
+
+      .video-channel-names {
+        flex-direction: column;
+        align-items: center !important;
+        margin: auto;
+
+        .video-channel-name {
+          margin-left: 0px !important;
+        }
+      }
     }
 
     img {
@@ -74,7 +93,23 @@
     }
 
     .video-channel-buttons {
-      margin-top: 10px;
+      align-self: center;
+    }
+  }
+}
+
+@media screen and (min-width: breakpoint(lg)) {
+  :host-context(.main-col:not(.expanded)) {
+    .video-channel-buttons {
+      float: right;
+    }
+  }
+}
+
+@media screen and (min-width: $small-view) {
+  :host-context(.expanded) {
+    .video-channel-buttons {
+      float: right;
     }
   }
 }