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       &:hover, &.focus-visible {
 135         background-color: rgba(255, 255, 255, 0.15);
 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: 400px) {
 250   .menu-wrapper {
 251     width: 100% !important;
 252   }
 253
 254   .top-menu, .footer {
 255     width: 100% !important;
 256   }
 257 }