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