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   white-space: normal;
  20   word-break: break-word;
  21   transition: background-color .1s ease-in-out;
  22   line-height: $line-height-normal;
  23   width: 100%;
  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
 110   @mixin display-hints($is-mobile: false) {
 111     background-color: rgba(255, 255, 255, 0.15);
 112
 113     @if $is-mobile {
 114       .dropdown-toggle-indicator {
 115         display: inherit !important;
 116       }
 117     }
 118   }
 119
 120   @include margin-left(13px);
 121
 122   flex: 1;
 123   min-width: 1px;
 124   border-radius: 25px;
 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
 143   > .dropdown-toggle {
 144     display: flex;
 145     align-items: center;
 146     width: 100%;
 147     padding: 5px 7px;
 148
 149     &::after {
 150       // Disable bootstrap toggle
 151       border: 0;
 152     }
 153   }
 154
 155   .dropdown-toggle-indicator {
 156     position: relative;
 157     display: none;
 158     width: 17px;
 159
 160     span {
 161       position: absolute;
 162       top: -8px;
 163       color: #808080;
 164     }
 165   }
 166 }
 167
 168 my-actor-avatar {
 169   @include margin-right(10px);
 170 }
 171
 172 .logged-in-info {
 173   flex-shrink: 1;
 174   min-width: 1px;
 175 }
 176
 177 .logged-in-display-name,
 178 .logged-in-username {
 179   @include ellipsis;
 180 }
 181
 182 .logged-in-display-name {
 183   @include disable-default-a-behaviour;
 184
 185   font-weight: $font-semibold;
 186   color: pvar(--menuForegroundColor);
 187 }
 188
 189 .logged-in-username {
 190   font-size: 13px;
 191   color: #C6C6C6;
 192   margin-top: 3px;
 193 }
 194
 195 .logged-in-menu {
 196   display: flex;
 197   flex-direction: column;
 198   align-items: flex-start;
 199   border-top: 1px solid var(--greyForegroundColor);
 200   line-height: $line-height-normal;
 201
 202   a {
 203     $icon-size: 13px;
 204     $additional-margin: math.div($menu-link-icon-size - $icon-size, 2);
 205
 206     font-size: 14px;
 207     width: 100%;
 208     min-height: 35px;
 209
 210     my-global-icon {
 211       // Keep aligned with other icons
 212       @include margin-left($additional-margin);
 213
 214       width: $icon-size;
 215       height: $icon-size;
 216     }
 217
 218     &.active,
 219     &:hover,
 220     &:focus-visible {
 221       my-global-icon {
 222         @include apply-svg-color(var(--menuForegroundColor));
 223       }
 224     }
 225
 226     &.active {
 227       $border-left-width: 4px;
 228
 229       font-weight: $font-semibold;
 230       border-left: $border-left-width solid var(--mainColor);
 231
 232       my-global-icon {
 233         @include margin-left($additional-margin - $border-left-width);
 234       }
 235     }
 236   }
 237 }
 238
 239 .login-buttons-block {
 240   margin: 30px 25px 35px;
 241
 242   > a,
 243   > my-login-link {
 244     display: block;
 245     width: 100%;
 246
 247     &:not(:last-child) {
 248       margin-bottom: 10px;
 249     }
 250   }
 251 }
 252
 253 .create-account-button {
 254   color: #fff;
 255   background-color: rgba(255, 255, 255, 0.25);
 256
 257   &:hover {
 258     background-color: rgba(255, 255, 255, 0.28);
 259   }
 260 }
 261
 262 .menu-block,
 263 .footer-block {
 264   margin-bottom: 15px;
 265
 266   .block-title {
 267     @include ellipsis;
 268     @include margin-left(26px);
 269     @include margin-right(30px);
 270
 271     text-transform: uppercase;
 272     font-weight: $font-bold; // Bold
 273     font-size: 13px;
 274     margin-bottom: 25px;
 275   }
 276
 277   a,
 278   button {
 279     min-height: 40px;
 280   }
 281 }
 282
 283 .footer {
 284   padding-bottom: 15px;
 285 }
 286
 287 .footer-bottom {
 288   padding: 0 $menu-lateral-padding;
 289 }
 290
 291 .footer-links {
 292   > div {
 293     display: flex;
 294     flex-wrap: wrap;
 295   }
 296
 297   a,
 298   button {
 299     @include margin-right(8px);
 300     @include disable-default-a-behaviour;
 301
 302     color: pvar(--menuForegroundColor);
 303     opacity: $footer-links-base-opacity;
 304     white-space: nowrap;
 305     font-size: 0.75rem;
 306     line-height: 1.4rem;
 307     font-weight: $font-semibold;
 308
 309     &:hover {
 310       opacity: $footer-links-base-opacity + .2;
 311     }
 312   }
 313 }
 314
 315 .footer-copyleft a {
 316   @include disable-default-a-behaviour;
 317
 318   color: pvar(--menuForegroundColor);
 319   opacity: $footer-links-base-opacity - .2;
 320   font-size: 0.85rem;
 321
 322   &:hover {
 323     opacity: $footer-links-base-opacity;
 324   }
 325 }
 326
 327 .dropdown {
 328   z-index: #{z('menu') + 1} !important;
 329 }
 330
 331 .dropdown-menu {
 332   width: calc(100% + 40px);
 333
 334   // Prevent weird display issue on firefox when global style is not loaded yet
 335   &:not(.show) {
 336     display: none;
 337   }
 338 }
 339
 340 .dropdown-item {
 341   @include dropdown-with-icon-item;
 342
 343   cursor: pointer;
 344   display: flex;
 345   align-items: center;
 346
 347   &:hover {
 348     .hover-display-toggle {
 349       display: none;
 350     }
 351
 352     .hover-display-toggle[hidden] {
 353       display: inherit !important;
 354     }
 355   }
 356 }
 357
 358 .more-settings {
 359   text-transform: uppercase;
 360   font-size: 80%;
 361   color: #6c757d;
 362 }
 363
 364 @media screen and (max-width: $mobile-view) {
 365   .menu-wrapper {
 366     width: 100% !important;
 367
 368     menu {
 369       overflow-y: auto;
 370     }
 371   }
 372
 373   .top-menu,
 374   .footer {
 375     width: 100% !important;
 376   }
 377
 378   .dropdown-menu {
 379     width: calc(100vw - 30px);
 380   }
 381 }
 382
 383 my-global-icon {
 384   position: relative;
 385   top: -1px;
 386
 387   .playlist-icon {
 388     @include margin-right(16px);
 389
 390     height: 24px;
 391     width: 24px;
 392   }
 393
 394   &.channel-icon {
 395     top: -2px;
 396   }
 397 }