client/src/app/app.component.scss

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 .peertube-container {
   5   padding-bottom: 20px;
   6 }
   7
   8 .main-row {
   9   min-height: calc(100vh - #{$header-height} - #{$footer-height} - #{$footer-margin});
  10 }
  11
  12 .sub-header-container {
  13   margin-top: $header-height;
  14   background-color: var(--mainBackgroundColor);
  15   width: 100%;
  16 }
  17
  18 .header {
  19   height: $header-height;
  20   position: fixed;
  21   top: 0;
  22   width: 100%;
  23   background-color: var(--mainBackgroundColor);
  24   z-index: z(header);
  25   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
  26   display: flex;
  27
  28   .top-left-block {
  29     z-index: 1;
  30     height: $header-height;
  31     display: flex;
  32     align-items: center;
  33     min-width: 0;
  34
  35     .icon {
  36       @include icon(24px);
  37
  38       &.icon-menu {
  39         background-color: var(--mainForegroundColor);
  40         mask-image: url('../assets/images/header/menu.svg');
  41         margin: 0 18px 0 20px;
  42       }
  43     }
  44
  45     .peertube-title {
  46       @include disable-default-a-behaviour;
  47
  48       font-size: 20px;
  49       font-weight: $font-bold;
  50       color: inherit !important;
  51       display: flex;
  52       align-items: center;
  53       overflow: hidden;
  54
  55       .instance-name {
  56         @include ellipsis;
  57
  58         width: 100%;
  59       }
  60
  61       .icon.icon-logo {
  62         display: inline-block;
  63         background: url('../assets/images/logo.svg') no-repeat;
  64         width: 23px;
  65         height: 24px;
  66       }
  67     }
  68
  69     @media screen and (max-width: $mobile-view) {
  70       width: 70px;
  71
  72       .peertube-title {
  73         display: none;
  74       }
  75     }
  76
  77     @media screen and (max-width: 350px) {
  78       flex: auto;
  79     }
  80   }
  81
  82   .header-right {
  83     height: $header-height;
  84     display: flex;
  85     align-items: center;
  86     justify-content: flex-end;
  87     white-space: nowrap;
  88     flex: 1;
  89   }
  90 }