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

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3
   4 h1 my-global-icon {
   5   position: relative;
   6   top: -2px;
   7 }
   8
   9 .create-button {
  10   @include create-button;
  11 }
  12
  13 input[type=text] {
  14   @include peertube-input-text(300px);
  15 }
  16
  17 my-edit-button {
  18   @include margin-right(10px);
  19 }
  20
  21 .video-channel {
  22   @include row-blocks;
  23
  24   padding-bottom: 0;
  25
  26   my-actor-avatar {
  27     @include actor-avatar-size(80px);
  28     @include margin-right(10px);
  29   }
  30 }
  31
  32 .video-channel-info {
  33   flex-grow: 1;
  34 }
  35
  36 .video-channel-names {
  37   @include disable-default-a-behaviour;
  38
  39   width: fit-content;
  40   display: flex;
  41   align-items: baseline;
  42   color: pvar(--mainForegroundColor);
  43 }
  44
  45 .video-channel-display-name {
  46   font-weight: $font-semibold;
  47   font-size: 18px;
  48 }
  49
  50 .video-channel-name {
  51   @include margin-left(5px);
  52
  53   font-size: 14px;
  54   color: $grey-actor-name;
  55 }
  56
  57 .video-channel-followers {
  58   color: pvar(--mainForegroundColor);
  59 }
  60
  61 .video-channel-buttons {
  62   margin-top: 10px;
  63   min-width: 190px;
  64 }
  65
  66 ::ng-deep .chartjs-render-monitor {
  67   position: relative;
  68   top: 1px;
  69 }
  70
  71 .video-channels-header {
  72   margin-bottom: 30px;
  73 }
  74
  75 @media screen and (max-width: $small-view) {
  76   .video-channels-header {
  77     text-align: center;
  78   }
  79
  80   .video-channel {
  81     padding-bottom: 10px;
  82
  83     img {
  84       @include margin-right(0);
  85     }
  86
  87     .video-channel-buttons {
  88       align-self: center;
  89     }
  90   }
  91
  92   .video-channel-info {
  93     padding-bottom: 10px;
  94     text-align: center;
  95   }
  96
  97   .video-channel-names {
  98     flex-direction: column;
  99     align-items: center !important;
 100     margin: auto;
 101   }
 102
 103   .video-channel-name {
 104     @include margin-left(0 !important);
 105   }
 106 }
 107
 108 @media screen and (max-width: $mobile-view) {
 109   .video-channels-header {
 110     flex-direction: column;
 111
 112     input[type=text] {
 113       width: 100% !important;
 114       margin-bottom: 12px;
 115     }
 116   }
 117 }
 118
 119 @media screen and (min-width: breakpoint(lg)) {
 120   :host-context(.main-col:not(.expanded)) {
 121     .video-channel-buttons {
 122       float: right;
 123     }
 124   }
 125 }
 126
 127 @media screen and (min-width: $small-view) {
 128   :host-context(.expanded) {
 129     .video-channel-buttons {
 130       float: right;
 131     }
 132   }
 133 }