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       a {
  51         color: inherit !important;
  52         display: block;
  53         background: url('../assets/logo.png') no-repeat;
  54         background-size: contain;
  55         background-position: center;
  56         height: 100%;
  57         margin: auto;
  58         width: 135px;
  59
  60         &:hover {
  61           color: inherit !important;
  62           text-decoration: none !important;
  63         }
  64       }
  65     }
  66
  67     @media screen and (max-width: 500px) {
  68       #peertube-title {
  69         display: none;
  70       }
  71
  72       .hamburger-block {
  73         width: 100%;
  74         text-align: center;
  75       }
  76     }
  77
  78     @media screen and (min-width: 500px) and (max-width: 600px) {
  79       #peertube-title a {
  80         width: 80px;
  81       }
  82     }
  83
  84     @media screen and (min-width: 600px) and (max-width: 700px) {
  85       #peertube-title a {
  86         width: 100px;
  87       }
  88     }
  89
  90     @media screen and (min-width: 1000px) {
  91       #peertube-title a {
  92         width: 120px;
  93       }
  94     }
  95
  96     @media screen and (min-width: 1000px) {
  97       #peertube-title a {
  98         width: 120px;
  99       }
 100     }
 101
 102     @media screen and (min-width: 1200px) {
 103       padding-left: 15px;
 104
 105       .hamburger-block {
 106         margin-right: 15px;
 107       }
 108
 109       #peertube-title a {
 110         width: 135px;
 111       }
 112     }
 113
 114     @media screen and (min-width: 1600px) {
 115       .hamburger-block {
 116         margin-right: 20px;
 117       }
 118
 119       #peertube-title a {
 120         width: 180px;
 121       }
 122     }
 123   }
 124
 125   my-search {
 126     position: fixed;
 127     z-index: 1000;
 128     // Fix col-md-* padding
 129     padding: 0;
 130   }
 131
 132   .search-col {
 133     height: 100%;
 134     margin-left: -15px;
 135     padding: 0;
 136   }
 137 }
 138
 139 footer {
 140   border-top: 1px solid $footer-border-color;
 141   padding: 10px 0;
 142   text-align: center;
 143   font-size: 11px;
 144   margin-top: $footer-margin;
 145   height: $footer-height;
 146 }