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