client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 .create-button {
   5   @include create-button;
   6 }
   7
   8 ::ng-deep .action-button {
   9   &.action-button-edit {
  10     margin-right: 10px;
  11   }
  12 }
  13
  14 .video-channel {
  15   @include row-blocks;
  16   padding-bottom: 0;
  17
  18   img {
  19     @include avatar(80px);
  20
  21     margin-right: 10px;
  22   }
  23
  24   .video-channel-info {
  25     flex-grow: 1;
  26
  27     a.video-channel-names {
  28       @include disable-default-a-behaviour;
  29
  30       width: fit-content;
  31       display: flex;
  32       align-items: baseline;
  33       color: var(--mainForegroundColor);
  34
  35       .video-channel-display-name {
  36         font-weight: $font-semibold;
  37         font-size: 18px;
  38       }
  39
  40       .video-channel-name {
  41         font-size: 14px;
  42         color: $grey-actor-name;
  43         margin-left: 5px;
  44       }
  45
  46       .video-channel-followers {
  47
  48       }
  49     }
  50   }
  51
  52   .video-channel-buttons {
  53     min-width: 190px;
  54   }
  55 }
  56
  57 .video-channels-header {
  58   text-align: right;
  59   margin: 20px 0 50px;
  60 }
  61
  62 ::ng-deep .chartjs-render-monitor {
  63   position: relative;
  64   top: 1px;
  65 }
  66
  67 @media screen and (max-width: $small-view) {
  68   .video-channels-header {
  69     text-align: center;
  70   }
  71
  72   .video-channel {
  73     padding-bottom: 10px;
  74
  75     .video-channel-info {
  76       padding-bottom: 10px;
  77       text-align: center;
  78
  79       .video-channel-names {
  80         flex-direction: column;
  81         align-items: center !important;
  82         margin: auto;
  83       }
  84     }
  85
  86     img {
  87       margin-right: 0;
  88     }
  89
  90     .video-channel-buttons {
  91       margin-top: 10px;
  92     }
  93   }
  94 }