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