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         overflow: hidden;
  52         text-overflow: ellipsis;
  53         white-space: nowrap;
  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: 500px) {
  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   }
  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 }