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

   1 @use '_variables';
   2 @use '_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     @include 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       @include margin-left(5px);
  36
  37       font-size: 14px;
  38       color: $grey-actor-name;
  39     }
  40   }
  41 }
  42
  43 .actor-owner {
  44   @include disable-default-a-behaviour;
  45
  46   font-size: 13px;
  47   color: pvar(--mainForegroundColor);
  48
  49   span:hover {
  50     opacity: 0.8;
  51   }
  52
  53   my-actor-avatar {
  54     @include margin-left(7px);
  55     display: inline-block;
  56     vertical-align: top;
  57   }
  58 }
  59
  60 .video-subscriptions-header {
  61   margin-bottom: 30px;
  62   display: flex;
  63 }
  64
  65 @media screen and (max-width: $small-view) {
  66   .video-subscriptions-header input[type=text] {
  67     width: 100% !important;
  68   }
  69
  70   .video-channel-info {
  71     padding-bottom: 10px;
  72     text-align: center;
  73
  74     .video-channel-names {
  75       flex-direction: column;
  76       align-items: center !important;
  77       margin: auto;
  78     }
  79   }
  80
  81   img {
  82     @include margin-right(0);
  83   }
  84 }