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 /deep/ .action-button {
   9   &.action-button-delete {
  10     margin-right: 10px;
  11   }
  12 }
  13
  14 .video-channel {
  15   @include row-blocks;
  16
  17   img {
  18     @include avatar(80px);
  19
  20     margin-right: 10px;
  21   }
  22
  23   .video-channel-info {
  24     flex-grow: 1;
  25
  26     a.video-channel-names {
  27       @include disable-default-a-behaviour;
  28
  29       width: fit-content;
  30       display: flex;
  31       align-items: baseline;
  32       color: var(--mainForegroundColor);
  33
  34       .video-channel-display-name {
  35         font-weight: $font-semibold;
  36         font-size: 18px;
  37       }
  38
  39       .video-channel-name {
  40         font-size: 14px;
  41         color: $grey-actor-name;
  42         margin-left: 5px;
  43       }
  44
  45       .video-channel-followers {
  46
  47       }
  48     }
  49   }
  50
  51   .video-channel-buttons {
  52     min-width: 190px;
  53   }
  54 }
  55
  56 .video-channels-header {
  57   text-align: right;
  58   margin: 20px 0 50px;
  59 }
  60
  61 @media screen and (max-width: 800px) {
  62   .video-channels-header {
  63     text-align: center;
  64   }
  65
  66   .video-channel {
  67     .video-channel-names {
  68       flex-direction: column;
  69       align-items: center !important;
  70     }
  71
  72     img {
  73       margin-right: 0;
  74     }
  75
  76     .video-channel-buttons {
  77       margin-top: 10px;
  78     }
  79   }
  80 }