client/src/app/app.component.scss

   1 .main-row {
   2   min-height: calc(100vh - #{$header-height} - #{$footer-height} - #{$footer-margin});
   3 }
   4
   5 .title-menu-left {
   6   position: fixed;
   7   height: calc(100vh - #{$header-height});
   8   padding: 0;
   9
  10   .title-menu-left-block.menu {
  11     height: 100%;
  12   }
  13 }
  14
  15 .header {
  16   height: $header-height;
  17
  18   .fake-title-block {
  19     display: inline-block;
  20   }
  21
  22   .top-left-block {
  23     z-index: 100;
  24     background-color: #fff;
  25     border-right: 1px solid $header-border-color;
  26     height: $header-height;
  27     line-height: $header-height;
  28     margin-top: 0;
  29     margin-bottom: 0;
  30     display: flex;
  31     position: fixed;
  32     padding: 0;
  33
  34     &.border-bottom {
  35       border-bottom: 1px solid $header-border-color;
  36     }
  37
  38     .hamburger-block {
  39       margin-right: 15px;
  40       margin-left: 15px;
  41
  42       .glyphicon {
  43         cursor: pointer;
  44         position: relative;
  45         top: 4px;
  46       }
  47     }
  48
  49     #peertube-title {
  50
  51       a {
  52         color: inherit !important;
  53         display: block;
  54         background: url('../assets/logo.png') no-repeat;
  55         background-size: contain;
  56         background-position: center;
  57         height: 100%;
  58         margin: auto;
  59         width: 135px;
  60
  61         &:hover {
  62           color: inherit !important;
  63           text-decoration: none !important;
  64         }
  65       }
  66     }
  67
  68     @media screen and (max-width: 500px) {
  69       #peertube-title {
  70         display: none;
  71       }
  72
  73       .hamburger-block {
  74         width: 100%;
  75         text-align: center;
  76       }
  77     }
  78
  79     @media screen and (min-width: 500px) and (max-width: 600px) {
  80       #peertube-title a {
  81         width: 80px;
  82       }
  83     }
  84
  85     @media screen and (min-width: 600px) and (max-width: 700px) {
  86       #peertube-title a {
  87         width: 100px;
  88       }
  89     }
  90
  91     @media screen and (min-width: 1000px) {
  92       #peertube-title a {
  93         width: 120px;
  94       }
  95     }
  96
  97     @media screen and (min-width: 1000px) {
  98       #peertube-title a {
  99         width: 120px;
 100       }
 101     }
 102
 103     @media screen and (min-width: 1200px) {
 104       padding-left: 15px;
 105
 106       .hamburger-block {
 107         margin-right: 15px;
 108       }
 109
 110       #peertube-title a {
 111         width: 135px;
 112       }
 113     }
 114
 115     @media screen and (min-width: 1600px) {
 116       .hamburger-block {
 117         margin-right: 20px;
 118       }
 119
 120       #peertube-title a {
 121         width: 180px;
 122       }
 123     }
 124   }
 125
 126   my-search {
 127     position: fixed;
 128     z-index: 1000;
 129     // Fix col-md-* padding
 130     padding: 0;
 131   }
 132
 133   .search-col {
 134     height: 100%;
 135     margin-left: -15px;
 136     padding: 0;
 137   }
 138 }
 139
 140 footer {
 141   border-top: 1px solid $footer-border-color;
 142   padding: 10px 0;
 143   text-align: center;
 144   font-size: 11px;
 145   margin-top: $footer-margin;
 146   height: $footer-height;
 147 }