client/src/app/app.component.scss

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