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

   1 // Bootstrap grid utilities require functions, variables and mixins
   2 @import 'node_modules/bootstrap/scss/functions';
   3 @import 'node_modules/bootstrap/scss/variables';
   4 @import 'node_modules/bootstrap/scss/mixins';
   5 @import 'node_modules/bootstrap/scss/grid';
   6
   7 @import '_variables';
   8 @import '_mixins';
   9
  10 .sub-menu {
  11   @include sub-menu-with-actor;
  12
  13   .actor, .actor-info {
  14     width: 100%;
  15   }
  16
  17   .actor-info {
  18     display: grid !important;
  19     grid-template-columns: 1fr auto;
  20     grid-template-rows: 1fr auto / 1fr auto;
  21     grid-template-areas: "name buttons" "lower buttons";
  22
  23     @include media-breakpoint-down(lg) {
  24       grid-template-areas: "name name" "lower buttons";
  25     }
  26   }
  27
  28   .actor-names {
  29     grid-area: name;
  30   }
  31
  32   .actor-name {
  33     flex-grow: 1;
  34
  35     .copy-button {
  36       border: none;
  37       padding: 5px;
  38       margin-top: -2px;
  39     }
  40   }
  41 }
  42
  43 .right-buttons {
  44   display: flex;
  45   height: max-content;
  46   margin-left: auto;
  47   margin-top: 10px;
  48
  49   grid-row: buttons-start / span buttons-end;
  50   grid-column: buttons-start;
  51
  52   @include media-breakpoint-down(lg) {
  53     flex-flow: column-reverse;
  54
  55     a {
  56       margin-top: 0.25rem;
  57       margin-right: 0 !important;
  58     }
  59   }
  60
  61   a {
  62     @include peertube-button-outline;
  63     line-height: 1.8;
  64   }
  65
  66   my-subscribe-button {
  67     height: min-content;
  68   }
  69 }
  70
  71 @media screen and (max-width: $mobile-view) {
  72   .sub-menu {
  73     .actor {
  74       flex-direction: column;
  75
  76       .actor-info .actor-names {
  77         flex-direction: column;
  78         align-items: normal;
  79       }
  80     }
  81   }
  82 }