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: $menu-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   display: flex;
  22   flex-direction: column;
  23   width: 100%;
  24
  25   &:focus, &:hover {
  26     overflow-y: auto;
  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         &::after {
  74           border: none;
  75         }
  76       }
  77     }
  78   }
  79
  80   .button-block {
  81     margin: 30px 25px 35px 25px;
  82
  83     .login-button {
  84       @include peertube-button-link;
  85       @include orange-button;
  86
  87       display: block;
  88       width: 100%;
  89       margin-bottom: 10px;
  90     }
  91
  92     .create-account-button {
  93       @include peertube-button-link;
  94
  95       display: block;
  96       width: 100%;
  97
  98       color: #fff;
  99       background-color: rgba(255, 255, 255, 0.25);
 100
 101       &:hover {
 102         background-color: rgba(255, 255, 255, 0.28);
 103       }
 104     }
 105   }
 106
 107   .block-title {
 108     text-transform: uppercase;
 109     font-weight: $font-bold; // Bold
 110     font-size: 13px;
 111     margin-bottom: 25px;
 112     margin-left: 26px;
 113   }
 114
 115   .panel-block {
 116     margin-bottom: 45px;
 117
 118     a {
 119       display: flex;
 120       align-items: center;
 121       padding-left: $menu-left-padding;
 122       color: $menu-color;
 123       cursor: pointer;
 124       height: 40px;
 125       font-size: 16px;
 126       transition: background-color .1s ease-in-out;
 127       @include disable-default-a-behaviour;
 128
 129       &:hover {
 130         background-color: rgba(255, 255, 255, 0.15);
 131       }
 132
 133       .icon {
 134         @include icon(22px);
 135
 136         margin-right: 18px;
 137
 138         &.icon-videos-subscriptions {
 139           position: relative;
 140           top: -1px;
 141           background-image: url('../../assets/images/menu/subscriptions.svg');
 142         }
 143
 144         &.icon-videos-overview {
 145           position: relative;
 146           background-image: url('../../assets/images/menu/globe.svg');
 147         }
 148
 149         &.icon-videos-trending {
 150           position: relative;
 151           top: -1px;
 152           background-image: url('../../assets/images/menu/trending.svg');
 153         }
 154
 155         &.icon-videos-recently-added {
 156           width: 23px;
 157           height: 23px;
 158           background-image: url('../../assets/images/menu/recently-added.svg');
 159         }
 160
 161         &.icon-videos-local {
 162           width: 23px;
 163           height: 23px;
 164
 165           position: relative;
 166           top: -1px;
 167
 168           background-image: url('../../assets/images/menu/home.svg');
 169         }
 170
 171         &.icon-administration {
 172           width: 23px;
 173           height: 23px;
 174
 175           background-image: url('../../assets/images/menu/administration.svg');
 176         }
 177
 178         &.icon-about  {
 179           width: 23px;
 180           height: 23px;
 181
 182           background-image: url('../../assets/images/menu/about.svg');
 183         }
 184       }
 185     }
 186   }
 187
 188   .footer {
 189     padding-bottom: 15px;
 190     padding-left: $menu-left-padding;
 191
 192     .language, .color-palette {
 193       display: inline-block;
 194       color: $menu-bottom-color;
 195       cursor: pointer;
 196       font-size: 12px;
 197       font-weight: $font-semibold;
 198
 199       .icon {
 200         @include icon(28px);
 201         opacity: 0.9;
 202
 203         &.icon-language  {
 204           position: relative;
 205           top: -1px;
 206           width: 28px;
 207           height: 24px;
 208
 209           background-image: url('../../assets/images/menu/language.png');
 210         }
 211
 212         &.icon-moonsun  {
 213           margin-left: 10px;
 214           position: relative;
 215           top: -1px;
 216           width: 24px;
 217           height: 24px;
 218
 219           background-image: url('../../assets/images/menu/moonsun.svg');
 220         }
 221
 222         &:hover {
 223           opacity: 1;
 224         }
 225       }
 226     }
 227   }
 228 }
 229
 230 @media screen and (max-width: 400px) {
 231   .menu-wrapper {
 232     width: 100% !important;
 233     z-index: 10000;
 234   }
 235
 236   .top-menu {
 237     width: 100%;
 238   }
 239 }