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