client/src/app/app.component.scss

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