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