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   @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   $main-radius: 25px;
 124
 125   @include margin-left(13px);
 126
 127   flex: 1;
 128   border-radius: $main-radius;
 129   transition: all .1s ease-in-out;
 130   cursor: pointer;
 131   line-height: 1;
 132
 133   &.show {
 134     background-color: rgba(255, 255, 255, 0.2);
 135     box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
 136   }
 137
 138   &:hover {
 139     @include display-hints;
 140   }
 141
 142   /* smartphones and touchscreens */
 143   @media (hover: none) and (pointer: coarse) {
 144     @include display-hints($is-mobile: true);
 145
 146     /* fill space when on mobile */
 147     max-width: calc(100% - 80px);
 148
 149     .dropdown-toggle {
 150       max-width: 100%;
 151     }
 152
 153     .logged-in-info {
 154       max-width: calc(100% - 45px) !important;
 155     }
 156   }
 157
 158   .dropdown-toggle-indicator {
 159     position: relative;
 160     width: 0;
 161     display: none;
 162
 163     span {
 164       position: absolute;
 165       right: -35px;
 166       top: -8px;
 167       color: #808080;
 168       width: $main-radius;
 169     }
 170   }
 171
 172   .dropdown-toggle {
 173     &::after {
 174       border: 0;
 175     }
 176   }
 177
 178   .dropdown-toggle:first-child {
 179     display: flex;
 180     align-items: center;
 181     padding: 5px 7px;
 182     border-radius: $main-radius;
 183   }
 184 }
 185
 186 my-actor-avatar {
 187   @include margin-right(10px);
 188 }
 189
 190 .logged-in-info {
 191   max-width: 105px;
 192
 193   flex-grow: 1;
 194 }
 195
 196 .logged-in-display-name,
 197 .logged-in-username {
 198   @include ellipsis;
 199 }
 200
 201 .logged-in-display-name {
 202   @include disable-default-a-behaviour;
 203
 204   font-size: 16px;
 205   font-weight: $font-semibold;
 206   color: pvar(--menuForegroundColor);
 207 }
 208
 209 .logged-in-username {
 210   font-size: 13px;
 211   color: #C6C6C6;
 212   margin-top: 3px;
 213 }
 214
 215 .logged-in-menu {
 216   display: flex;
 217   flex-direction: column;
 218   align-items: flex-start;
 219   border-top: 1px solid var(--greyForegroundColor);
 220   line-height: $line-height-normal;
 221
 222   a {
 223     $icon-size: 13px;
 224     $additional-margin: math.div($menu-link-icon-size - $icon-size, 2);
 225
 226     font-size: 14px;
 227     width: 100%;
 228     min-height: 35px;
 229
 230     my-global-icon {
 231       // Keep aligned with other icons
 232       @include margin-left($additional-margin);
 233
 234       width: $icon-size;
 235       height: $icon-size;
 236     }
 237
 238     &.active,
 239     &:hover,
 240     &:focus-visible {
 241       my-global-icon {
 242         @include apply-svg-color(var(--menuForegroundColor));
 243       }
 244     }
 245
 246     &.active {
 247       $border-left-width: 4px;
 248
 249       font-weight: $font-semibold;
 250       border-left: $border-left-width solid var(--mainColor);
 251
 252       my-global-icon {
 253         @include margin-left($additional-margin - $border-left-width);
 254       }
 255     }
 256   }
 257 }
 258
 259 .login-buttons-block {
 260   margin: 30px 25px 35px;
 261
 262   > a {
 263     display: block;
 264     width: 100%;
 265
 266     &:not(:last-child) {
 267       margin-bottom: 10px;
 268     }
 269   }
 270 }
 271
 272 .create-account-button {
 273   color: #fff;
 274   background-color: rgba(255, 255, 255, 0.25);
 275
 276   &:hover {
 277     background-color: rgba(255, 255, 255, 0.28);
 278   }
 279 }
 280
 281 .menu-block,
 282 .footer-block {
 283   margin-bottom: 15px;
 284
 285   .block-title {
 286     @include ellipsis;
 287     @include margin-left(26px);
 288     @include margin-right(30px);
 289
 290     text-transform: uppercase;
 291     font-weight: $font-bold; // Bold
 292     font-size: 13px;
 293     margin-bottom: 25px;
 294   }
 295
 296   a {
 297     min-height: 40px;
 298   }
 299 }
 300
 301 .footer {
 302   width: $menu-width;
 303   padding-bottom: 15px;
 304 }
 305
 306 .footer-bottom {
 307   display: flex;
 308   flex-direction: column;
 309   padding: 0 $menu-lateral-padding;
 310 }
 311
 312 .footer-links {
 313   &,
 314   > div {
 315     display: flex;
 316     flex-wrap: wrap;
 317   }
 318
 319   a,
 320   span[role=button] {
 321     @include margin-right(8px);
 322
 323     display: inline-block;
 324     text-decoration: none;
 325     color: pvar(--menuForegroundColor);
 326     opacity: $footer-links-base-opacity;
 327     white-space: nowrap;
 328     font-size: 90%;
 329     font-weight: 500;
 330     line-height: 1.4rem;
 331   }
 332 }
 333
 334 .footer-copyleft small a {
 335   @include disable-default-a-behaviour;
 336
 337   color: pvar(--menuForegroundColor);
 338   opacity: $footer-links-base-opacity - .2;
 339 }
 340
 341 .dropdown {
 342   z-index: #{z('menu') + 1} !important;
 343 }
 344
 345 .dropdown-menu {
 346   width: calc(100% + 40px);
 347 }
 348
 349 .dropdown-item {
 350   @include dropdown-with-icon-item;
 351
 352   cursor: pointer;
 353   display: flex;
 354   align-items: center;
 355
 356   i.glyphicon-menu-right {
 357     opacity: .4;
 358   }
 359
 360   &:hover {
 361     .hover-display-toggle {
 362       display: none;
 363     }
 364
 365     .hover-display-toggle[hidden] {
 366       display: inherit !important;
 367     }
 368   }
 369 }
 370
 371 .more-settings {
 372   text-transform: uppercase;
 373   font-size: 80%;
 374   color: #6c757d;
 375 }
 376
 377 @media screen and (max-width: $mobile-view) {
 378   .menu-wrapper {
 379     width: 100% !important;
 380
 381     menu {
 382       overflow-y: auto;
 383     }
 384   }
 385
 386   .top-menu,
 387   .footer {
 388     width: 100% !important;
 389   }
 390
 391   .dropdown-menu {
 392     width: calc(100vw - 30px);
 393   }
 394
 395   .dropdown-item:hover,
 396   .dropdown-item:active {
 397     &.settings-sensitive my-global-icon ::ng-deep svg {
 398       margin-top: 0 !important;
 399     }
 400   }
 401 }
 402
 403 my-global-icon {
 404   &[iconName=playlists] {
 405     @include margin-right(16px);
 406
 407     height: 24px;
 408     width: 24px;
 409   }
 410
 411   &[iconName=videos] {
 412     position: relative;
 413     right: -1px;
 414   }
 415
 416   &[iconName=channel] {
 417     margin-top: -2px;
 418   }
 419
 420   &[iconName='sign-out'] {
 421     position: relative;
 422     right: -2px;
 423     height: 20px;
 424     width: 20px;
 425   }
 426 }