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