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