client/src/app/menu/menu.component.scss

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