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

   1 @import '_variables';
   2 @import '_mixins';
   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   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
  29     margin-right: 10px;
  30   }
  31 }
  32
  33 .video-channel-info {
  34   flex-grow: 1;
  35 }
  36
  37 .video-channel-names {
  38   @include disable-default-a-behaviour;
  39
  40   width: fit-content;
  41   display: flex;
  42   align-items: baseline;
  43   color: pvar(--mainForegroundColor);
  44 }
  45
  46 .video-channel-display-name {
  47   font-weight: $font-semibold;
  48   font-size: 18px;
  49 }
  50
  51 .video-channel-name {
  52   font-size: 14px;
  53   color: $grey-actor-name;
  54   margin-left: 5px;
  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       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     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 }