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