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     @include margin-right(8px);
 309     @include disable-default-a-behaviour;
 310
 311     color: pvar(--menuForegroundColor);
 312     opacity: $footer-links-base-opacity;
 313     white-space: nowrap;
 314     font-size: 0.75rem;
 315     line-height: 1.4rem;
 316     font-weight: $font-semibold;
 317
 318     &:hover {
 319       opacity: $footer-links-base-opacity + .2;
 320     }
 321   }
 322 }
 323
 324 .footer-copyleft a {
 325   @include disable-default-a-behaviour;
 326
 327   color: pvar(--menuForegroundColor);
 328   opacity: $footer-links-base-opacity - .2;
 329   font-size: 0.85rem;
 330
 331   &:hover {
 332     opacity: $footer-links-base-opacity;
 333   }
 334 }
 335
 336 .dropdown {
 337   z-index: #{z('menu') + 1} !important;
 338 }
 339
 340 .dropdown-menu {
 341   width: calc(100% + 40px);
 342
 343   // Prevent weird display issue on firefox when global style is not loaded yet
 344   &:not(.show) {
 345     display: none;
 346   }
 347 }
 348
 349 .dropdown-item {
 350   @include dropdown-with-icon-item;
 351
 352   cursor: pointer;
 353   display: flex;
 354   align-items: center;
 355
 356   &:hover {
 357     .hover-display-toggle {
 358       display: none;
 359     }
 360
 361     .hover-display-toggle[hidden] {
 362       display: inherit !important;
 363     }
 364   }
 365 }
 366
 367 .more-settings {
 368   text-transform: uppercase;
 369   font-size: 80%;
 370   color: #6c757d;
 371 }
 372
 373 @media screen and (max-width: $mobile-view) {
 374   .menu-wrapper {
 375     width: 100% !important;
 376
 377     menu {
 378       overflow-y: auto;
 379     }
 380   }
 381
 382   .top-menu,
 383   .footer {
 384     width: 100% !important;
 385   }
 386
 387   .dropdown-menu {
 388     width: calc(100vw - 30px);
 389   }
 390 }
 391
 392 my-global-icon {
 393   &[iconName=playlists] {
 394     @include margin-right(16px);
 395
 396     height: 24px;
 397     width: 24px;
 398   }
 399
 400   &[iconName=videos] {
 401     position: relative;
 402     right: -1px;
 403   }
 404
 405   &[iconName=channel] {
 406     margin-top: -2px;
 407   }
 408
 409   &[iconName='sign-out'] {
 410     position: relative;
 411     right: -2px;
 412     height: 20px;
 413     width: 20px;
 414   }
 415 }