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"
  16                          "lower buttons";
  17
  18     @media screen and (max-width: #{map-get($grid-breakpoints, lg)}) {
  19       grid-template-areas: "name name"
  20                            "lower buttons";
  21     }
  22   }
  23
  24   .actor-names {
  25     grid-area: name;
  26   }
  27
  28   .actor-name {
  29     flex-grow: 1;
  30
  31     .copy-button {
  32       border: none;
  33       padding: 5px;
  34       margin-top: -2px;
  35     }
  36   }
  37 }
  38
  39 .right-buttons {
  40   display: flex;
  41   height: max-content;
  42   margin-left: auto;
  43   margin-top: 20px;
  44
  45   grid-row: buttons-start / span buttons-end;
  46   grid-column: buttons-start;
  47
  48   a {
  49     @include peertube-button-outline;
  50     line-height: 1.8;
  51   }
  52
  53   my-subscribe-button {
  54     height: min-content;
  55   }
  56 }