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