Add AccountAvatarComponent (#3965)

[github/Chocobozzz/PeerTube.git] / client / src / app / menu / menu.component.scss

@import '_variables';
@import '_mixins';

$menu-link-icon-size: 22px;
$menu-link-icon-margin-right: 18px;
$footer-links-base-opacity: .8;

@mixin menu-link {
  display: flex;
  align-items: center;
  padding-left: $menu-lateral-padding;
  color: pvar(--menuForegroundColor);
  cursor: pointer;
  font-size: 16px;
  white-space: normal;
  word-break: break-word;
  padding-right: 20px;
  transition: background-color .1s ease-in-out;
  line-height: $line-height-normal;

  &.active {
    background-color: rgba(255, 255, 255, 0.15);
  }

  &:hover, &.focus-visible {
    background-color: rgba(255, 255, 255, 0.10);
  }

  my-global-icon {
    @include apply-svg-color(#808080);

    display: flex;
    width: $menu-link-icon-size;
    height: $menu-link-icon-size;
    margin-right: $menu-link-icon-margin-right;
  }
}

.menu-wrapper {
  position: fixed;
  height: calc(100vh - #{$header-height});
  padding: 0;
  width: $menu-width;
  z-index: z(menu);
  scrollbar-color: pvar(--actionButtonColor) pvar(--menuBackgroundColor);
}

menu {
  @include ellipsis;

  background-color: pvar(--menuBackgroundColor);
  color: pvar(--menuForegroundColor);

  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;

  &:focus, &:hover {
    overflow-y: auto;
  }

  @media not all and (hover: hover) and (pointer: fine) {
    overflow-y: auto;
  }

  &.is-logged-in {
    .panel-block {
      margin-bottom: 20px;
    }

    .block-title {
      margin-bottom: 15px;
    }
  }
}

.top-menu {
  flex-grow: 1;
  width: $menu-width;
}

.logged-in-block {
  margin-bottom: 20px;
  background-color: rgba(255, 255, 255, 0.15);

  > div:first-child {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: left;

    my-notification {
      margin-left: auto;
      margin-right: 15px;
    }
  }
}

.logged-in-more {
  $main-radius: 25px;

  flex: 1;
  margin-left: 13px;
  border-radius: $main-radius;
  transition: all .1s ease-in-out;
  cursor: pointer;

  *, & {
    line-height: 1;
  }

  &.show {
    background-color: rgba(255, 255, 255, 0.20);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
  }

  @mixin display-hints($is-mobile: false) {
    background-color: rgba(255, 255, 255, 0.15);

    @if $is-mobile {
      .dropdown-toggle-indicator {
        display: inherit !important;
      }
      .dropdown-toggle:first-child {
        padding-right: 30px !important;
      }
    }
  }

  &:hover {
    @include display-hints;
  }

  /* smartphones and touchscreens */
  @media (hover: none) and (pointer: coarse) {
    @include display-hints($is-mobile: true);

    /* fill space when on mobile */
    max-width: calc(100% - 80px);
    .dropdown-toggle {
      max-width: 100%;
    }
    .logged-in-info {
      max-width: calc(100% - 45px) !important;
    }

  }

  .dropdown-toggle-indicator {
    position: relative;
    width: 0;
    display: none;

    span {
      position: absolute;
      right: -35px;
      top: -8px;
      color: grey;
      width: $main-radius;
    }
  }

  .dropdown-toggle {
    &::after {
      border: none;
    }
  }

  .dropdown-toggle:first-child {
    display: flex;
    align-items: center;
    padding: 5px 7px;
    border-radius: $main-radius;
  }

  my-account-avatar {
    margin-right: 10px;
  }
}

.logged-in-info {
  max-width: 105px;

  flex-grow: 1;

  .logged-in-display-name,
  .logged-in-username {
    @include ellipsis;
  }

  .logged-in-display-name {
    font-size: 16px;
    font-weight: $font-semibold;
    color: pvar(--menuForegroundColor);

    @include disable-default-a-behaviour;
  }

  .logged-in-username {
    font-size: 13px;
    color: #C6C6C6;
    margin-top: 3px;
  }
}

.logged-in-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-top: 1px solid var(--greyForegroundColor);
  line-height: $line-height-normal;

  a {
    @include menu-link;
    @include disable-default-a-behaviour;

    $icon-size: 13px;
    $additional-margin: ($menu-link-icon-size - $icon-size) / 2;

    font-size: 14px;
    width: 100%;
    min-height: 35px;

    my-global-icon {
      width: $icon-size;
      height: $icon-size;

      // Keep aligned with other icons
      margin-left: $additional-margin;

      &[iconName="channel"] {
        margin-top: -2px;
      }
    }

    &.active,
    &:hover,
    &:focus-visible {
      my-global-icon {
        @include apply-svg-color(var(--menuForegroundColor));
      }
    }

    &.active {
      $border-left-width: 4px;

      font-weight: $font-semibold;
      border-left: $border-left-width solid var(--mainColor);

      my-global-icon {
        margin-left: $additional-margin - $border-left-width;
      }
    }
  }
}

.login-buttons-block {
  margin: 30px 25px 35px 25px;

  .login-button {
    @include peertube-button-link;
    @include orange-button;

    display: block;
    width: 100%;
    margin-bottom: 10px;
  }

  .create-account-button {
    @include peertube-button-link;

    display: block;
    width: 100%;

    color: #fff;
    background-color: rgba(255, 255, 255, 0.25);

    &:hover {
      background-color: rgba(255, 255, 255, 0.28);
    }
  }
}

.in-my-library,
.on-instance,
.footer-block {
  margin-bottom: 15px;

  .block-title {
    text-transform: uppercase;
    font-weight: $font-bold; // Bold
    font-size: 13px;
    margin-bottom: 25px;
    margin-left: 26px;

    @include ellipsis;

    margin-right: 30px;
  }

  a {
    @include menu-link;
    @include disable-default-a-behaviour;

    min-height: 40px;

    my-global-icon {
      &[iconName="playlists"] {
        height: 24px;
        width: 24px;

        margin-right: 16px;
      }

      &[iconName="videos"] {
        position: relative;
        right: -1px;
      }
    }
  }
}

.footer {
  width: $menu-width;
  padding-bottom: 15px;

  .bottom-links {
    display: flex;
    flex-direction: column;
    padding: 0 $menu-lateral-padding;
  }
}

.footer-links {
  &, > div {
    display: flex;
    flex-wrap: wrap;
  }

  a, span[role=button] {
    display: inline-block;
    text-decoration: none;
    color: pvar(--menuForegroundColor);
    opacity: $footer-links-base-opacity;
    white-space: nowrap;
    font-size: 90%;
    font-weight: 500;
    line-height: 1.4rem;
    margin-right: 8px;

    &.inline-global-icon {
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
      height: 1.4rem;

      my-global-icon {
        @include apply-svg-color(pvar(--menuForegroundColor));

        display: flex;
        width: auto;
        height: 90%;
        margin-right: .2rem;
      }
    }
  }
}

.footer-copyleft small a {
  @include disable-default-a-behaviour;

  color: pvar(--menuForegroundColor);
  opacity: $footer-links-base-opacity - .2;
}

.dropdown {
  z-index: #{z('menu') + 1} !important;
}

.dropdown-menu {
  width: calc(100% + 40px);
}

.dropdown-item {
  @include dropdown-with-icon-item;

  cursor: pointer;
  display: flex;
  align-items: center;

  i.glyphicon-menu-right {
    opacity: .4;
  }

  my-global-icon {
    &[iconName="cog"],
    &[iconName="sign-out"] {
      position: relative;
      right: -2px;
      height: 20px;
      width: 20px;
    }
  }

  my-global-icon.not-displayed {
    display: none;
  }

  &:hover {
    my-global-icon.hover-display-toggle.not-displayed {
      display: inherit;
    }
    my-global-icon.hover-display-toggle {
      display: none;
    }

    &.settings-sensitive {
      my-global-icon ::ng-deep svg {
        margin-top: 2px !important;
      }
    }
  }
}

.more-settings {
  text-transform: uppercase;
  font-size: 80%;
  color: #6c757d;
}

@media screen and (max-width: $mobile-view) {
  .menu-wrapper {
    width: 100% !important;

    menu {
      overflow-y: auto;
    }
  }

  .top-menu, .footer {
    width: 100% !important;
  }

  .dropdown-menu {
    width: calc(100vw - 30px);
  }

  .dropdown-item:hover, .dropdown-item:active {
    &.settings-sensitive my-global-icon ::ng-deep svg {
      margin-top: 0px !important;
    }
  }
}