client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 input[type=text] {
   5   @include peertube-input-text(300px);
   6 }
   7
   8 .video-channel {
   9   @include row-blocks;
  10
  11   > my-actor-avatar {
  12     @include actor-avatar-size(80px);
  13
  14     margin-right: 10px;
  15   }
  16 }
  17
  18 .video-channel-info {
  19   flex-grow: 1;
  20
  21   a.video-channel-names {
  22     @include disable-default-a-behaviour;
  23
  24     width: fit-content;
  25     display: flex;
  26     align-items: baseline;
  27     color: pvar(--mainForegroundColor);
  28
  29     .video-channel-display-name {
  30       font-weight: $font-semibold;
  31       font-size: 18px;
  32     }
  33
  34     .video-channel-name {
  35       font-size: 14px;
  36       color: $grey-actor-name;
  37       margin-left: 5px;
  38     }
  39   }
  40 }
  41
  42 .actor-owner {
  43   @include disable-default-a-behaviour;
  44
  45   font-size: 13px;
  46   color: pvar(--mainForegroundColor);
  47
  48   span:hover {
  49     opacity: 0.8;
  50   }
  51
  52   my-actor-avatar {
  53     margin-left: 7px;
  54     display: inline-block;
  55     vertical-align: top;
  56   }
  57 }
  58
  59 .video-subscriptions-header {
  60   margin-bottom: 30px;
  61   display: flex;
  62 }
  63
  64 @media screen and (max-width: $small-view) {
  65   .video-subscriptions-header input[type=text] {
  66     width: 100% !important;
  67   }
  68
  69   .video-channel-info {
  70     padding-bottom: 10px;
  71     text-align: center;
  72
  73     .video-channel-names {
  74       flex-direction: column;
  75       align-items: center !important;
  76       margin: auto;
  77     }
  78   }
  79
  80   img {
  81     margin-right: 0;
  82   }
  83 }