client/src/app/menu/menu.component.scss

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 .menu-wrapper {
   5   position: fixed;
   6   height: calc(100vh - #{$header-height});
   7   padding: 0;
   8   width: $menu-width;
   9 }
  10
  11 menu {
  12   background-color: $black-background;
  13   margin: 0;
  14   padding: 0;
  15   height: 100%;
  16   white-space: nowrap;
  17   text-overflow: ellipsis;
  18   overflow: hidden;
  19   z-index: 1000;
  20   color: $menu-color;
  21   overflow-y: auto;
  22   display: flex;
  23   flex-direction: column;
  24
  25   .top-menu {
  26     flex-grow: 1;
  27   }
  28
  29   .logged-in-block {
  30     height: 100px;
  31     background-color: rgba(255, 255, 255, 0.15);
  32     display: flex;
  33     align-items: center;
  34     justify-content: center;
  35     margin-bottom: 35px;
  36
  37     img {
  38       @include avatar(34px);
  39
  40       margin-left: 20px;
  41       margin-right: 10px;
  42     }
  43
  44     .logged-in-info {
  45       flex-grow: 1;
  46
  47       .logged-in-username {
  48         font-size: 16px;
  49         font-weight: $font-semibold;
  50         color: $menu-color;
  51         cursor: pointer;
  52
  53         @include disable-default-a-behaviour;
  54       }
  55
  56       .logged-in-email {
  57         font-size: 13px;
  58         color: #C6C6C6;
  59         white-space: nowrap;
  60         overflow: hidden;
  61         text-overflow: ellipsis;
  62         max-width: 140px;
  63       }
  64     }
  65
  66     .logged-in-more {
  67       margin-right: 20px;
  68
  69       .glyphicon {
  70         cursor: pointer;
  71         font-size: 18px;
  72       }
  73     }
  74   }
  75
  76   .button-block {
  77     margin: 30px 25px 35px 25px;
  78
  79     .login-button {
  80       @include peertube-button-link;
  81       @include orange-button;
  82
  83       display: block;
  84       width: 100%;
  85       margin-bottom: 10px;
  86     }
  87
  88     .create-account-button {
  89       @include peertube-button-link;
  90
  91       display: block;
  92       width: 100%;
  93
  94       color: #fff;
  95       background-color: rgba(255, 255, 255, 0.25);
  96
  97       &:hover {
  98         background-color: rgba(255, 255, 255, 0.28);
  99       }
 100     }
 101   }
 102
 103   .block-title {
 104     text-transform: uppercase;
 105     font-weight: $font-bold; // Bold
 106     font-size: 13px;
 107     margin-bottom: 25px;
 108     margin-left: 26px;
 109   }
 110
 111   .panel-block {
 112     margin-bottom: 45px;
 113
 114     a {
 115       display: flex;
 116       align-items: center;
 117       padding-left: $menu-left-padding;
 118       color: $menu-color;
 119       cursor: pointer;
 120       height: 40px;
 121       font-size: 16px;
 122       transition: background-color .1s ease-in-out;
 123       @include disable-default-a-behaviour;
 124
 125       &:hover {
 126         background-color: rgba(255, 255, 255, 0.15);
 127       }
 128
 129       .icon {
 130         @include icon(22px);
 131
 132         margin-right: 18px;
 133
 134         &.icon-videos-trending {
 135           position: relative;
 136           top: -2px;
 137           background-image: url('../../assets/images/menu/trending.svg');
 138         }
 139
 140         &.icon-videos-recently-added {
 141           width: 23px;
 142           height: 23px;
 143           position: relative;
 144           top: -1px;
 145           background-image: url('../../assets/images/menu/recently-added.svg');
 146         }
 147
 148         &.icon-videos-local {
 149           width: 23px;
 150           height: 23px;
 151           position: relative;
 152           top: -1px;
 153           background-image: url('../../assets/images/menu/home.svg');
 154         }
 155
 156         &.icon-administration {
 157           width: 23px;
 158           height: 23px;
 159
 160           background-image: url('../../assets/images/menu/administration.svg');
 161         }
 162
 163         &.icon-about  {
 164           width: 23px;
 165           height: 23px;
 166
 167           background-image: url('../../assets/images/menu/about.svg');
 168         }
 169       }
 170     }
 171   }
 172
 173   .footer {
 174     margin-bottom: 15px;
 175     padding-left: $menu-left-padding;
 176
 177     .language {
 178       display: inline-block;
 179       color: $menu-bottom-color;
 180       cursor: pointer;
 181       font-size: 12px;
 182       font-weight: $font-semibold;
 183
 184       .icon {
 185         @include icon(28px);
 186         opacity: 0.9;
 187
 188         &.icon-language  {
 189           position: relative;
 190           top: -1px;
 191           width: 28px;
 192           height: 24px;
 193
 194           background-image: url('../../assets/images/menu/language.png');
 195         }
 196
 197         &:hover {
 198           opacity: 1;
 199         }
 200       }
 201     }
 202   }
 203 }