client/src/app/menu/menu.component.scss

   1 @use 'sass:math';
   2 @use '_variables' as *;
   3 @use '_mixins' as *;
   4
   5 $menu-link-icon-size: 22px;
   6 $menu-link-icon-margin-right: 18px;
   7 $footer-links-base-opacity: .8;
   8
   9 .menu-link {
  10   @include disable-default-a-behaviour;
  11   @include padding-left($menu-lateral-padding);
  12   @include padding-right(20px);
  13
  14   display: flex;
  15   align-items: center;
  16
  17   color: pvar(--menuForegroundColor);
  18   cursor: pointer;
  19   font-size: 16px;
  20   white-space: normal;
  21   word-break: break-word;
  22   transition: background-color .1s ease-in-out;
  23   line-height: $line-height-normal;
  24
  25   &.active {
  26     background-color: rgba(255, 255, 255, 0.15);
  27   }
  28
  29   &:hover,
  30   &.focus-visible {
  31     background-color: rgba(255, 255, 255, 0.1);
  32   }
  33
  34   my-global-icon {
  35     @include apply-svg-color(#808080);
  36     @include margin-right($menu-link-icon-margin-right);
  37
  38     display: flex;
  39     width: $menu-link-icon-size;
  40     height: $menu-link-icon-size;
  41   }
  42 }
  43
  44 .menu-wrapper {
  45   position: fixed;
  46   height: calc(100vh - #{$header-height});
  47   padding: 0;
  48   width: $menu-width;
  49   z-index: z(menu);
  50   scrollbar-color: pvar(--actionButtonColor) pvar(--menuBackgroundColor);
  51 }
  52
  53 menu {
  54   @include ellipsis;
  55
  56   background-color: pvar(--menuBackgroundColor);
  57   color: pvar(--menuForegroundColor);
  58
  59   display: flex;
  60   flex-direction: column;
  61   height: 100%;
  62   width: 100%;
  63   margin: 0;
  64   padding: 0;
  65
  66   &:focus,
  67   &:hover {
  68     overflow-y: auto;
  69   }
  70
  71   @media not all and (hover: hover) and (pointer: fine) {
  72     overflow-y: auto;
  73   }
  74
  75   &.is-logged-in {
  76     .panel-block {
  77       margin-bottom: 20px;
  78     }
  79
  80     .block-title {
  81       margin-bottom: 15px;
  82     }
  83   }
  84 }
  85
  86 .top-menu {
  87   flex-grow: 1;
  88   width: $menu-width;
  89 }
  90
  91 .logged-in-block {
  92   margin-bottom: 20px;
  93   background-color: rgba(255, 255, 255, 0.15);
  94
  95   > div:first-child {
  96     height: 80px;
  97     display: flex;
  98     align-items: center;
  99     justify-content: left;
 100   }
 101 }
 102
 103 my-notification {
 104   @include margin-left(auto);
 105   @include margin-right(15px);
 106 }
 107
 108 .logged-in-more {
 109
 110   @mixin display-hints($is-mobile: false) {
 111     background-color: rgba(255, 255, 255, 0.15);
 112
 113     @if $is-mobile {
 114       .dropdown-toggle-indicator {
 115         display: inherit !important;
 116       }
 117
 118       > .dropdown-toggle {
 119         max-width: 88% !important;
 120       }
 121     }
 122   }
 123
 124   @include margin-left(13px);
 125
 126   flex: 1;
 127   border-radius: 25px;
 128   transition: all .1s ease-in-out;
 129   cursor: pointer;
 130   line-height: 1;
 131
 132   &.show {
 133     background-color: rgba(255, 255, 255, 0.2);
 134     box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
 135   }
 136
 137   &:hover {
 138     @include display-hints;
 139   }
 140
 141   /* smartphones and touchscreens */
 142   @media (hover: none) and (pointer: coarse) {
 143     @include display-hints($is-mobile: true);
 144
 145     /* fill space when on mobile */
 146     max-width: calc(100% - 80px);
 147
 148     .dropdown-toggle {
 149       max-width: 100%;
 150     }
 151
 152     .logged-in-info {
 153       max-width: calc(100% - 45px) !important;
 154     }
 155   }
 156
 157   .dropdown-toggle-indicator {
 158     position: relative;
 159     display: none;
 160
 161     span {
 162       position: absolute;
 163       right: -35px;
 164       top: -8px;
 165       color: #808080;
 166     }
 167   }
 168
 169   .dropdown-toggle::after {
 170     border: 0;
 171   }
 172
 173   > .dropdown-toggle:first-child {
 174     display: flex;
 175     align-items: center;
 176     padding: 5px 7px;
 177   }
 178 }
 179
 180 my-actor-avatar {
 181   @include margin-right(10px);
 182 }
 183
 184 .logged-in-info {
 185   max-width: 105px;
 186
 187   flex-grow: 1;
 188 }
 189
 190 .logged-in-display-name,
 191 .logged-in-username {
 192   @include ellipsis;
 193 }
 194
 195 .logged-in-display-name {
 196   @include disable-default-a-behaviour;
 197
 198   font-size: 16px;
 199   font-weight: $font-semibold;
 200   color: pvar(--menuForegroundColor);
 201 }
 202
 203 .logged-in-username {
 204   font-size: 13px;
 205   color: #C6C6C6;
 206   margin-top: 3px;
 207 }
 208
 209 .logged-in-menu {
 210   display: flex;
 211   flex-direction: column;
 212   align-items: flex-start;
 213   border-top: 1px solid var(--greyForegroundColor);
 214   line-height: $line-height-normal;
 215
 216   a {
 217     $icon-size: 13px;
 218     $additional-margin: math.div($menu-link-icon-size - $icon-size, 2);
 219
 220     font-size: 14px;
 221     width: 100%;
 222     min-height: 35px;
 223
 224     my-global-icon {
 225       // Keep aligned with other icons
 226       @include margin-left($additional-margin);
 227
 228       width: $icon-size;
 229       height: $icon-size;
 230     }
 231
 232     &.active,
 233     &:hover,
 234     &:focus-visible {
 235       my-global-icon {
 236         @include apply-svg-color(var(--menuForegroundColor));
 237       }
 238     }
 239
 240     &.active {
 241       $border-left-width: 4px;
 242
 243       font-weight: $font-semibold;
 244       border-left: $border-left-width solid var(--mainColor);
 245
 246       my-global-icon {
 247         @include margin-left($additional-margin - $border-left-width);
 248       }
 249     }
 250   }
 251 }
 252
 253 .login-buttons-block {
 254   margin: 30px 25px 35px;
 255
 256   > a {
 257     display: block;
 258     width: 100%;
 259
 260     &:not(:last-child) {
 261       margin-bottom: 10px;
 262     }
 263   }
 264 }
 265
 266 .create-account-button {
 267   color: #fff;
 268   background-color: rgba(255, 255, 255, 0.25);
 269
 270   &:hover {
 271     background-color: rgba(255, 255, 255, 0.28);
 272   }
 273 }
 274
 275 .menu-block,
 276 .footer-block {
 277   margin-bottom: 15px;
 278
 279   .block-title {
 280     @include ellipsis;
 281     @include margin-left(26px);
 282     @include margin-right(30px);
 283
 284     text-transform: uppercase;
 285     font-weight: $font-bold; // Bold
 286     font-size: 13px;
 287     margin-bottom: 25px;
 288   }
 289
 290   a {
 291     min-height: 40px;
 292   }
 293 }
 294
 295 .footer {
 296   width: $menu-width;
 297   padding-bottom: 15px;
 298 }
 299
 300 .footer-bottom {
 301   display: flex;
 302   flex-direction: column;
 303   padding: 0 $menu-lateral-padding;
 304 }
 305
 306 .footer-links {
 307   &,
 308   > div {
 309     display: flex;
 310     flex-wrap: wrap;
 311   }
 312
 313   a,
 314   span[role=button] {
 315     @include margin-right(8px);
 316
 317     display: inline-block;
 318     text-decoration: none;
 319     color: pvar(--menuForegroundColor);
 320     opacity: $footer-links-base-opacity;
 321     white-space: nowrap;
 322     font-size: 90%;
 323     font-weight: 500;
 324     line-height: 1.4rem;
 325   }
 326 }
 327
 328 .footer-copyleft small a {
 329   @include disable-default-a-behaviour;
 330
 331   color: pvar(--menuForegroundColor);
 332   opacity: $footer-links-base-opacity - .2;
 333 }
 334
 335 .dropdown {
 336   z-index: #{z('menu') + 1} !important;
 337 }
 338
 339 .dropdown-menu {
 340   width: calc(100% + 40px);
 341
 342   // Prevent weird display issue on firefox when global style is not loaded yet
 343   &:not(.show) {
 344     display: none;
 345   }
 346 }
 347
 348 .dropdown-item {
 349   @include dropdown-with-icon-item;
 350
 351   cursor: pointer;
 352   display: flex;
 353   align-items: center;
 354
 355   &:hover {
 356     .hover-display-toggle {
 357       display: none;
 358     }
 359
 360     .hover-display-toggle[hidden] {
 361       display: inherit !important;
 362     }
 363   }
 364 }
 365
 366 .more-settings {
 367   text-transform: uppercase;
 368   font-size: 80%;
 369   color: #6c757d;
 370 }
 371
 372 @media screen and (max-width: $mobile-view) {
 373   .menu-wrapper {
 374     width: 100% !important;
 375
 376     menu {
 377       overflow-y: auto;
 378     }
 379   }
 380
 381   .top-menu,
 382   .footer {
 383     width: 100% !important;
 384   }
 385
 386   .dropdown-menu {
 387     width: calc(100vw - 30px);
 388   }
 389 }
 390
 391 my-global-icon {
 392   &[iconName=playlists] {
 393     @include margin-right(16px);
 394
 395     height: 24px;
 396     width: 24px;
 397   }
 398
 399   &[iconName=videos] {
 400     position: relative;
 401     right: -1px;
 402   }
 403
 404   &[iconName=channel] {
 405     margin-top: -2px;
 406   }
 407
 408   &[iconName='sign-out'] {
 409     position: relative;
 410     right: -2px;
 411     height: 20px;
 412     width: 20px;
 413   }
 414 }