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     min-width: 0;
  29
  30     .icon {
  31       @include icon(24px);
  32
  33       &.icon-menu {
  34         background-color: var(--mainForegroundColor);
  35         mask-image: url('../assets/images/header/menu.svg');
  36         margin: 0 18px 0 20px;
  37       }
  38     }
  39
  40     .peertube-title {
  41       @include disable-default-a-behaviour;
  42
  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     flex: 1;
  84   }
  85 }
  86
  87 footer {
  88   padding: 10px 0;
  89   font-size: 11px;
  90   margin-top: $footer-margin;
  91   height: $footer-height;
  92   justify-content: center;
  93 }