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   &.logged-in {
  30     .panel-block {
  31       margin-bottom: 25px;
  32     }
  33
  34     .block-title {
  35       margin-bottom: 15px;
  36     }
  37   }
  38
  39   .top-menu {
  40     flex-grow: 1;
  41     width: $menu-width;
  42   }
  43
  44   .logged-in-block {
  45     height: 100px;
  46     background-color: rgba(255, 255, 255, 0.15);
  47     display: flex;
  48     align-items: center;
  49     justify-content: center;
  50     margin-bottom: 20px;
  51
  52     .logged-in-info {
  53       @include ellipsis;
  54
  55       flex-grow: 1;
  56
  57       .logged-in-display-name {
  58         font-size: 16px;
  59         font-weight: $font-semibold;
  60         color: var(--menuForegroundColor);
  61         cursor: pointer;
  62
  63         @include disable-default-a-behaviour;
  64       }
  65
  66       .logged-in-username {
  67         @include ellipsis;
  68
  69         font-size: 13px;
  70         color: #C6C6C6;
  71         max-width: 140px;
  72       }
  73     }
  74
  75     .logged-in-more {
  76       margin-right: 20px;
  77
  78       my-global-icon {
  79         @include apply-svg-color(var(--mainBackgroundColor));
  80
  81         cursor: pointer;
  82
  83         &::after {
  84           border: none;
  85         }
  86       }
  87
  88       .dropdown-item {
  89         @include dropdown-with-icon-item;
  90
  91         my-global-icon {
  92           @include apply-svg-color(var(--mainForegroundColor));
  93
  94           width: 22px;
  95           height: 22px;
  96
  97           &[iconName="sign-out"] {
  98             position: relative;
  99             right: -1px;
 100             height: 21px;
 101             width: 21px;
 102           }
 103         }
 104       }
 105     }
 106   }
 107
 108   .button-block {
 109     margin: 30px 25px 35px 25px;
 110
 111     .login-button {
 112       @include peertube-button-link;
 113       @include orange-button;
 114
 115       display: block;
 116       width: 100%;
 117       margin-bottom: 10px;
 118     }
 119
 120     .create-account-button {
 121       @include peertube-button-link;
 122
 123       display: block;
 124       width: 100%;
 125
 126       color: #fff;
 127       background-color: rgba(255, 255, 255, 0.25);
 128
 129       &:hover {
 130         background-color: rgba(255, 255, 255, 0.28);
 131       }
 132     }
 133   }
 134
 135   .block-title {
 136     text-transform: uppercase;
 137     font-weight: $font-bold; // Bold
 138     font-size: 13px;
 139     margin-bottom: 25px;
 140     margin-left: 26px;
 141   }
 142
 143   .panel-block {
 144     margin-bottom: 45px;
 145
 146     a {
 147       display: flex;
 148       align-items: center;
 149       padding-left: $menu-lateral-padding;
 150       color: var(--menuForegroundColor);
 151       cursor: pointer;
 152       height: 40px;
 153       font-size: 16px;
 154       transition: background-color .1s ease-in-out;
 155       @include disable-default-a-behaviour;
 156
 157       &.active {
 158         background-color: rgba(255, 255, 255, 0.15);
 159       }
 160
 161       &:hover, &.focus-visible {
 162         background-color: rgba(255, 255, 255, 0.10);
 163       }
 164
 165       my-global-icon {
 166         @include apply-svg-color(#808080);
 167
 168         display: flex;
 169         width: 22px;
 170         height: 22px;
 171         margin-right: 18px;
 172
 173         &[iconName="playlists"] {
 174           height: 24px;
 175           width: 24px;
 176
 177           margin-right: 16px;
 178         }
 179
 180         &[iconName="videos"] {
 181           position: relative;
 182           right: -1px;
 183         }
 184       }
 185
 186       .icon {
 187         @include icon(22px);
 188
 189         margin-right: 18px;
 190       }
 191     }
 192   }
 193
 194   .footer {
 195     padding-bottom: 15px;
 196     padding-left: $menu-lateral-padding;
 197     padding-right: $menu-lateral-padding;
 198     width: $menu-width;
 199
 200     .language, .shortcuts, .color-palette {
 201       display: inline-block;
 202       color: $menu-bottom-color;
 203       cursor: pointer;
 204       font-size: 12px;
 205       font-weight: $font-semibold;
 206
 207       .icon {
 208         @include disable-outline;
 209         @include icon(28px);
 210         opacity: 0.9;
 211
 212         &.icon-language  {
 213           position: relative;
 214           top: -1px;
 215           width: 28px;
 216           height: 24px;
 217
 218           background-image: url('../../assets/images/menu/language.png');
 219         }
 220
 221         &.icon-shortcuts  {
 222           position: relative;
 223           top: -1px;
 224           width: 24px;
 225           height: 24px;
 226
 227           background-image: url('../../assets/images/menu/keyboard.png');
 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 }