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