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 .in-my-library,
 278 .on-instance,
 279 .footer-block {
 280   margin-bottom: 15px;
 281
 282   .block-title {
 283     @include ellipsis;
 284
 285     text-transform: uppercase;
 286     font-weight: $font-bold; // Bold
 287     font-size: 13px;
 288     margin-bottom: 25px;
 289     margin-left: 26px;
 290     margin-right: 30px;
 291   }
 292
 293   a {
 294     min-height: 40px;
 295   }
 296 }
 297
 298 .footer {
 299   width: $menu-width;
 300   padding-bottom: 15px;
 301 }
 302
 303 .footer-bottom {
 304   display: flex;
 305   flex-direction: column;
 306   padding: 0 $menu-lateral-padding;
 307 }
 308
 309 .footer-links {
 310   &,
 311   > div {
 312     display: flex;
 313     flex-wrap: wrap;
 314   }
 315
 316   a,
 317   span[role=button] {
 318     display: inline-block;
 319     text-decoration: none;
 320     color: pvar(--menuForegroundColor);
 321     opacity: $footer-links-base-opacity;
 322     white-space: nowrap;
 323     font-size: 90%;
 324     font-weight: 500;
 325     line-height: 1.4rem;
 326     margin-right: 8px;
 327   }
 328 }
 329
 330 .footer-copyleft small a {
 331   @include disable-default-a-behaviour;
 332
 333   color: pvar(--menuForegroundColor);
 334   opacity: $footer-links-base-opacity - .2;
 335 }
 336
 337 .dropdown {
 338   z-index: #{z('menu') + 1} !important;
 339 }
 340
 341 .dropdown-menu {
 342   width: calc(100% + 40px);
 343 }
 344
 345 .dropdown-item {
 346   @include dropdown-with-icon-item;
 347
 348   cursor: pointer;
 349   display: flex;
 350   align-items: center;
 351
 352   i.glyphicon-menu-right {
 353     opacity: .4;
 354   }
 355
 356   &:hover {
 357     .hover-display-toggle {
 358       display: none;
 359     }
 360
 361     .hover-display-toggle[hidden] {
 362       display: inherit !important;
 363     }
 364   }
 365 }
 366
 367 .more-settings {
 368   text-transform: uppercase;
 369   font-size: 80%;
 370   color: #6c757d;
 371 }
 372
 373 @media screen and (max-width: $mobile-view) {
 374   .menu-wrapper {
 375     width: 100% !important;
 376
 377     menu {
 378       overflow-y: auto;
 379     }
 380   }
 381
 382   .top-menu,
 383   .footer {
 384     width: 100% !important;
 385   }
 386
 387   .dropdown-menu {
 388     width: calc(100vw - 30px);
 389   }
 390
 391   .dropdown-item:hover,
 392   .dropdown-item:active {
 393     &.settings-sensitive my-global-icon ::ng-deep svg {
 394       margin-top: 0 !important;
 395     }
 396   }
 397 }
 398
 399 my-global-icon {
 400   &[iconName=playlists] {
 401     height: 24px;
 402     width: 24px;
 403
 404     margin-right: 16px;
 405   }
 406
 407   &[iconName=videos] {
 408     position: relative;
 409     right: -1px;
 410   }
 411
 412   &[iconName=channel] {
 413     margin-top: -2px;
 414   }
 415
 416   &[iconName='sign-out'] {
 417     position: relative;
 418     right: -2px;
 419     height: 20px;
 420     width: 20px;
 421   }
 422 }