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       right: -35px;
 163       top: -8px;
 164       color: #808080;
 165     }
 166   }
 167
 168   .dropdown-toggle::after {
 169     border: 0;
 170   }
 171
 172   > .dropdown-toggle:first-child {
 173     display: flex;
 174     align-items: center;
 175     padding: 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     display: block;
 256     width: 100%;
 257
 258     &:not(:last-child) {
 259       margin-bottom: 10px;
 260     }
 261   }
 262 }
 263
 264 .create-account-button {
 265   color: #fff;
 266   background-color: rgba(255, 255, 255, 0.25);
 267
 268   &:hover {
 269     background-color: rgba(255, 255, 255, 0.28);
 270   }
 271 }
 272
 273 .menu-block,
 274 .footer-block {
 275   margin-bottom: 15px;
 276
 277   .block-title {
 278     @include ellipsis;
 279     @include margin-left(26px);
 280     @include margin-right(30px);
 281
 282     text-transform: uppercase;
 283     font-weight: $font-bold; // Bold
 284     font-size: 13px;
 285     margin-bottom: 25px;
 286   }
 287
 288   a {
 289     min-height: 40px;
 290   }
 291 }
 292
 293 .footer {
 294   padding-bottom: 15px;
 295 }
 296
 297 .footer-bottom {
 298   padding: 0 $menu-lateral-padding;
 299 }
 300
 301 .footer-links {
 302   > div {
 303     display: flex;
 304     flex-wrap: wrap;
 305   }
 306
 307   a,
 308   span[role=button] {
 309     @include margin-right(8px);
 310     @include disable-default-a-behaviour;
 311
 312     color: pvar(--menuForegroundColor);
 313     opacity: $footer-links-base-opacity;
 314     white-space: nowrap;
 315     font-size: 0.75rem;
 316     line-height: 1.4rem;
 317     font-weight: $font-semibold;
 318
 319     &:hover {
 320       opacity: $footer-links-base-opacity + .2;
 321     }
 322   }
 323 }
 324
 325 .footer-copyleft a {
 326   @include disable-default-a-behaviour;
 327
 328   color: pvar(--menuForegroundColor);
 329   opacity: $footer-links-base-opacity - .2;
 330   font-size: 0.85rem;
 331
 332   &:hover {
 333     opacity: $footer-links-base-opacity;
 334   }
 335 }
 336
 337 .dropdown {
 338   z-index: #{z('menu') + 1} !important;
 339 }
 340
 341 .dropdown-menu {
 342   width: calc(100% + 40px);
 343
 344   // Prevent weird display issue on firefox when global style is not loaded yet
 345   &:not(.show) {
 346     display: none;
 347   }
 348 }
 349
 350 .dropdown-item {
 351   @include dropdown-with-icon-item;
 352
 353   cursor: pointer;
 354   display: flex;
 355   align-items: center;
 356
 357   &:hover {
 358     .hover-display-toggle {
 359       display: none;
 360     }
 361
 362     .hover-display-toggle[hidden] {
 363       display: inherit !important;
 364     }
 365   }
 366 }
 367
 368 .more-settings {
 369   text-transform: uppercase;
 370   font-size: 80%;
 371   color: #6c757d;
 372 }
 373
 374 @media screen and (max-width: $mobile-view) {
 375   .menu-wrapper {
 376     width: 100% !important;
 377
 378     menu {
 379       overflow-y: auto;
 380     }
 381   }
 382
 383   .top-menu,
 384   .footer {
 385     width: 100% !important;
 386   }
 387
 388   .dropdown-menu {
 389     width: calc(100vw - 30px);
 390   }
 391 }
 392
 393 my-global-icon {
 394   &[iconName=playlists] {
 395     @include margin-right(16px);
 396
 397     height: 24px;
 398     width: 24px;
 399   }
 400
 401   &[iconName=videos] {
 402     position: relative;
 403     right: -1px;
 404   }
 405
 406   &[iconName=channel] {
 407     margin-top: -2px;
 408   }
 409
 410   &[iconName='sign-out'] {
 411     position: relative;
 412     right: -2px;
 413     height: 20px;
 414     width: 20px;
 415   }
 416 }