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