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     padding: 5px 7px;
 175   }
 176 }
 177
 178 my-actor-avatar {
 179   @include margin-right(10px);
 180 }
 181
 182 .logged-in-info {
 183   max-width: 105px;
 184
 185   flex-grow: 1;
 186 }
 187
 188 .logged-in-display-name,
 189 .logged-in-username {
 190   @include ellipsis;
 191 }
 192
 193 .logged-in-display-name {
 194   @include disable-default-a-behaviour;
 195
 196   font-weight: $font-semibold;
 197   color: pvar(--menuForegroundColor);
 198 }
 199
 200 .logged-in-username {
 201   font-size: 13px;
 202   color: #C6C6C6;
 203   margin-top: 3px;
 204 }
 205
 206 .logged-in-menu {
 207   display: flex;
 208   flex-direction: column;
 209   align-items: flex-start;
 210   border-top: 1px solid var(--greyForegroundColor);
 211   line-height: $line-height-normal;
 212
 213   a {
 214     $icon-size: 13px;
 215     $additional-margin: math.div($menu-link-icon-size - $icon-size, 2);
 216
 217     font-size: 14px;
 218     width: 100%;
 219     min-height: 35px;
 220
 221     my-global-icon {
 222       // Keep aligned with other icons
 223       @include margin-left($additional-margin);
 224
 225       width: $icon-size;
 226       height: $icon-size;
 227     }
 228
 229     &.active,
 230     &:hover,
 231     &:focus-visible {
 232       my-global-icon {
 233         @include apply-svg-color(var(--menuForegroundColor));
 234       }
 235     }
 236
 237     &.active {
 238       $border-left-width: 4px;
 239
 240       font-weight: $font-semibold;
 241       border-left: $border-left-width solid var(--mainColor);
 242
 243       my-global-icon {
 244         @include margin-left($additional-margin - $border-left-width);
 245       }
 246     }
 247   }
 248 }
 249
 250 .login-buttons-block {
 251   margin: 30px 25px 35px;
 252
 253   > a,
 254   > my-login-link {
 255     @include ellipsis;
 256
 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   padding-bottom: 15px;
 297 }
 298
 299 .footer-bottom {
 300   padding: 0 $menu-lateral-padding;
 301 }
 302
 303 .footer-links {
 304   > div {
 305     display: flex;
 306     flex-wrap: wrap;
 307   }
 308
 309   a,
 310   span[role=button] {
 311     @include margin-right(8px);
 312     @include disable-default-a-behaviour;
 313
 314     color: pvar(--menuForegroundColor);
 315     opacity: $footer-links-base-opacity;
 316     white-space: nowrap;
 317     font-size: 0.75rem;
 318     line-height: 1.4rem;
 319     font-weight: $font-semibold;
 320
 321     &:hover {
 322       opacity: $footer-links-base-opacity + .2;
 323     }
 324   }
 325 }
 326
 327 .footer-copyleft a {
 328   @include disable-default-a-behaviour;
 329
 330   color: pvar(--menuForegroundColor);
 331   opacity: $footer-links-base-opacity - .2;
 332   font-size: 0.85rem;
 333
 334   &:hover {
 335     opacity: $footer-links-base-opacity;
 336   }
 337 }
 338
 339 .dropdown {
 340   z-index: #{z('menu') + 1} !important;
 341 }
 342
 343 .dropdown-menu {
 344   width: calc(100% + 40px);
 345
 346   // Prevent weird display issue on firefox when global style is not loaded yet
 347   &:not(.show) {
 348     display: none;
 349   }
 350 }
 351
 352 .dropdown-item {
 353   @include dropdown-with-icon-item;
 354
 355   cursor: pointer;
 356   display: flex;
 357   align-items: center;
 358
 359   &:hover {
 360     .hover-display-toggle {
 361       display: none;
 362     }
 363
 364     .hover-display-toggle[hidden] {
 365       display: inherit !important;
 366     }
 367   }
 368 }
 369
 370 .more-settings {
 371   text-transform: uppercase;
 372   font-size: 80%;
 373   color: #6c757d;
 374 }
 375
 376 @media screen and (max-width: $mobile-view) {
 377   .menu-wrapper {
 378     width: 100% !important;
 379
 380     menu {
 381       overflow-y: auto;
 382     }
 383   }
 384
 385   .top-menu,
 386   .footer {
 387     width: 100% !important;
 388   }
 389
 390   .dropdown-menu {
 391     width: calc(100vw - 30px);
 392   }
 393 }
 394
 395 my-global-icon {
 396   position: relative;
 397   top: -1px;
 398
 399   .playlist-icon {
 400     @include margin-right(16px);
 401
 402     height: 24px;
 403     width: 24px;
 404   }
 405
 406   &.channel-icon {
 407     top: -2px;
 408   }
 409 }