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

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 .sub-menu {
   5   @include sub-menu-with-actor;
   6
   7   .actor, .actor-info {
   8     width: 100%;
   9   }
  10
  11   .actor-info {
  12     display: grid !important;
  13     grid-template-columns: 1fr auto;
  14     grid-template-rows: 1fr auto / 1fr auto;
  15     grid-template-areas: "name buttons" "lower buttons";
  16
  17     @media screen and (max-width: #{map-get($grid-breakpoints, lg)}) {
  18       grid-template-areas: "name name" "lower buttons";
  19     }
  20   }
  21
  22   .actor-names {
  23     grid-area: name;
  24   }
  25
  26   .actor-name {
  27     flex-grow: 1;
  28
  29     .copy-button {
  30       border: none;
  31       padding: 5px;
  32       margin-top: -2px;
  33     }
  34   }
  35 }
  36
  37 .right-buttons {
  38   display: flex;
  39   height: max-content;
  40   margin-left: auto;
  41   margin-top: 20px;
  42
  43   grid-row: buttons-start / span buttons-end;
  44   grid-column: buttons-start;
  45
  46   a {
  47     @include peertube-button-outline;
  48     line-height: 1.8;
  49   }
  50
  51   my-subscribe-button {
  52     height: min-content;
  53   }
  54 }