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