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