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 }
  12
  13 .header {
  14   height: $header-height;
  15   position: fixed;
  16   top: 0;
  17   width: 100%;
  18   background-color: var(--mainBackgroundColor);
  19   z-index: 1000;
  20   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
  21   display: flex;
  22
  23   .top-left-block {
  24     z-index: 1001;
  25     height: $header-height;
  26     display: flex;
  27     align-items: center;
  28     flex: 1;
  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       font-size: 20px;
  44       font-weight: $font-bold;
  45       color: inherit !important;
  46       display: flex;
  47       align-items: center;
  48       overflow: hidden;
  49
  50       .instance-name {
  51         @include ellipsis;
  52
  53         width: 100%;
  54       }
  55
  56       .icon.icon-logo {
  57         display: inline-block;
  58         background: url('../assets/images/logo.svg') no-repeat;
  59         width: 23px;
  60         height: 24px;
  61       }
  62     }
  63
  64     @media screen and (max-width: 500px) {
  65       width: 70px;
  66
  67       #peertube-title {
  68         display: none;
  69       }
  70     }
  71
  72     @media screen and (max-width: 350px) {
  73       flex: auto;
  74     }
  75   }
  76
  77   .header-right {
  78     height: $header-height;
  79     display: flex;
  80     align-items: center;
  81     justify-content: flex-end;
  82     white-space: nowrap;
  83   }
  84 }
  85
  86 footer {
  87   padding: 10px 0;
  88   font-size: 11px;
  89   margin-top: $footer-margin;
  90   height: $footer-height;
  91   justify-content: center;
  92 }