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