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 .margin-content {
  44   // margin-content is required, but child views have their own margins
  45   // that match views outside the scope of accounts, so we only align
  46   // them with the margins of .sub-menu when required.
  47   margin: 0;
  48 }
  49
  50 .right-buttons {
  51   display: flex;
  52   height: max-content;
  53   margin-left: auto;
  54   margin-top: 10px;
  55
  56   grid-row: buttons-start / span buttons-end;
  57   grid-column: buttons-start;
  58
  59   @include media-breakpoint-down(lg) {
  60     flex-flow: column-reverse;
  61
  62     a {
  63       margin-top: 0.25rem;
  64       margin-right: 0 !important;
  65     }
  66   }
  67
  68   a {
  69     @include peertube-button-outline;
  70     line-height: 1.8;
  71   }
  72
  73   my-subscribe-button {
  74     height: min-content;
  75   }
  76 }
  77
  78 @media screen and (max-width: $mobile-view) {
  79   .sub-menu {
  80     .actor {
  81       flex-direction: column;
  82
  83       .actor-info .actor-names {
  84         flex-direction: column;
  85         align-items: normal;
  86       }
  87     }
  88   }
  89 }