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     z-index: 1001;
  35     height: $header-height;
  36     display: flex;
  37     align-items: center;
  38     flex: 1;
  39     min-width: 0;
  40
  41     .icon {
  42       @include icon(24px);
  43
  44       &.icon-menu {
  45         background-image: url('../assets/images/header/menu.svg');
  46         margin: 0 18px 0 20px;
  47       }
  48     }
  49
  50     #peertube-title {
  51       @include disable-default-a-behaviour;
  52       font-size: 20px;
  53       font-weight: $font-bold;
  54       color: inherit !important;
  55       display: flex;
  56       align-items: center;
  57       overflow: hidden;
  58
  59       .instance-name {
  60         overflow: hidden;
  61         text-overflow: ellipsis;
  62         white-space: nowrap;
  63         width: 100%;
  64       }
  65
  66       .icon.icon-logo {
  67         display: inline-block;
  68         background: url('../assets/images/logo.svg') no-repeat;
  69         width: 23px;
  70         height: 24px;
  71       }
  72     }
  73
  74     @media screen and (max-width: 500px) {
  75       width: 70px;
  76
  77       #peertube-title {
  78         display: none;
  79       }
  80     }
  81
  82     @media screen and (max-width: 350px) {
  83       flex: auto;
  84     }
  85   }
  86
  87   .header-right {
  88     height: $header-height;
  89     display: flex;
  90     align-items: center;
  91     justify-content: flex-end;
  92     white-space: nowrap;
  93   }
  94 }
  95
  96 footer {
  97   border-top: 1px solid $footer-border-color;
  98   padding: 10px 0;
  99   text-align: center;
 100   font-size: 11px;
 101   margin-top: $footer-margin;
 102   height: $footer-height;
 103 }
 104
 105 simple-notifications {
 106   position: relative;
 107   z-index: 1500;
 108 }