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