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