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

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