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

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