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   z-index: 10000;
  10 }
  11
  12 menu {
  13   background-color: var(--menuBackgroundColor);
  14   margin: 0;
  15   padding: 0;
  16   height: 100%;
  17   white-space: nowrap;
  18   text-overflow: ellipsis;
  19   overflow: hidden;
  20   color: var(--menuForegroundColor);
  21   display: flex;
  22   flex-direction: column;
  23   width: 100%;
  24
  25   &:focus, &:hover {
  26     overflow-y: auto;
  27   }
  28
  29   .top-menu {
  30     flex-grow: 1;
  31     width: $menu-width;
  32   }
  33
  34   .logged-in-block {
  35     height: 100px;
  36     background-color: rgba(255, 255, 255, 0.15);
  37     display: flex;
  38     align-items: center;
  39     justify-content: center;
  40     margin-bottom: 35px;
  41
  42     img {
  43       @include avatar(34px);
  44
  45       margin-left: 20px;
  46       margin-right: 10px;
  47     }
  48
  49     .logged-in-info {
  50       flex-grow: 1;
  51
  52       .logged-in-username {
  53         font-size: 16px;
  54         font-weight: $font-semibold;
  55         color: var(--menuForegroundColor);
  56         cursor: pointer;
  57
  58         @include disable-default-a-behaviour;
  59       }
  60
  61       .logged-in-email {
  62         font-size: 13px;
  63         color: #C6C6C6;
  64         white-space: nowrap;
  65         overflow: hidden;
  66         text-overflow: ellipsis;
  67         max-width: 140px;
  68       }
  69     }
  70
  71     .logged-in-more {
  72       margin-right: 20px;
  73
  74       .glyphicon {
  75         cursor: pointer;
  76         font-size: 18px;
  77
  78         &::after {
  79           border: none;
  80         }
  81       }
  82     }
  83   }
  84
  85   .button-block {
  86     margin: 30px 25px 35px 25px;
  87
  88     .login-button {
  89       @include peertube-button-link;
  90       @include orange-button;
  91
  92       display: block;
  93       width: 100%;
  94       margin-bottom: 10px;
  95     }
  96
  97     .create-account-button {
  98       @include peertube-button-link;
  99
 100       display: block;
 101       width: 100%;
 102
 103       color: #fff;
 104       background-color: rgba(255, 255, 255, 0.25);
 105
 106       &:hover {
 107         background-color: rgba(255, 255, 255, 0.28);
 108       }
 109     }
 110   }
 111
 112   .block-title {
 113     text-transform: uppercase;
 114     font-weight: $font-bold; // Bold
 115     font-size: 13px;
 116     margin-bottom: 25px;
 117     margin-left: 26px;
 118   }
 119
 120   .panel-block {
 121     margin-bottom: 45px;
 122
 123     a {
 124       display: flex;
 125       align-items: center;
 126       padding-left: $menu-lateral-padding;
 127       color: var(--menuForegroundColor);
 128       cursor: pointer;
 129       height: 40px;
 130       font-size: 16px;
 131       transition: background-color .1s ease-in-out;
 132       @include disable-default-a-behaviour;
 133
 134       &.active {
 135         background-color: rgba(255, 255, 255, 0.15);
 136       }
 137
 138       &:hover, &.focus-visible {
 139         background-color: rgba(255, 255, 255, 0.10);
 140       }
 141
 142       .icon {
 143         @include icon(22px);
 144
 145         margin-right: 18px;
 146
 147         &.icon-videos-subscriptions {
 148           position: relative;
 149           top: -1px;
 150           background-image: url('../../assets/images/menu/subscriptions.svg');
 151         }
 152
 153         &.icon-videos-overview {
 154           position: relative;
 155           background-image: url('../../assets/images/menu/globe.svg');
 156         }
 157
 158         &.icon-videos-trending {
 159           position: relative;
 160           top: -1px;
 161           background-image: url('../../assets/images/menu/trending.svg');
 162         }
 163
 164         &.icon-videos-recently-added {
 165           width: 23px;
 166           height: 23px;
 167           background-image: url('../../assets/images/menu/recently-added.svg');
 168         }
 169
 170         &.icon-videos-local {
 171           width: 23px;
 172           height: 23px;
 173
 174           position: relative;
 175           top: -1px;
 176
 177           background-image: url('../../assets/images/menu/home.svg');
 178         }
 179
 180         &.icon-administration {
 181           width: 23px;
 182           height: 23px;
 183
 184           background-image: url('../../assets/images/menu/administration.svg');
 185         }
 186
 187         &.icon-about  {
 188           width: 23px;
 189           height: 23px;
 190
 191           background-image: url('../../assets/images/menu/about.svg');
 192         }
 193       }
 194     }
 195   }
 196
 197   .footer {
 198     padding-bottom: 15px;
 199     padding-left: $menu-lateral-padding;
 200     padding-right: $menu-lateral-padding;
 201     width: $menu-width;
 202
 203     .language, .shortcuts, .color-palette {
 204       display: inline-block;
 205       color: $menu-bottom-color;
 206       cursor: pointer;
 207       font-size: 12px;
 208       font-weight: $font-semibold;
 209
 210       .icon {
 211         @include disable-outline;
 212         @include icon(28px);
 213         opacity: 0.9;
 214
 215         &.icon-language  {
 216           position: relative;
 217           top: -1px;
 218           width: 28px;
 219           height: 24px;
 220
 221           background-image: url('../../assets/images/menu/language.png');
 222         }
 223
 224         &.icon-shortcuts  {
 225           position: relative;
 226           top: -1px;
 227           width: 24px;
 228           height: 24px;
 229
 230           background-image: url('../../assets/images/menu/keyboard.png');
 231           background-color: #fff;
 232           filter: invert(100%);
 233         }
 234
 235         &.icon-moonsun  {
 236           margin-left: 10px;
 237           position: relative;
 238           top: -1px;
 239           width: 24px;
 240           height: 24px;
 241
 242           background-image: url('../../assets/images/menu/moonsun.svg');
 243         }
 244
 245         &:hover {
 246           opacity: 1;
 247         }
 248       }
 249     }
 250   }
 251 }
 252
 253 @media screen and (max-width: 400px) {
 254   .menu-wrapper {
 255     width: 100% !important;
 256   }
 257
 258   .top-menu, .footer {
 259     width: 100% !important;
 260   }
 261 }