blockchain/src/gui/qt-daemon/html_source/src/app/sidebar/sidebar.component.scss

:host {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 0 0 25rem;
  padding: 0 3rem;
  max-width: 25rem;
}

.sidebar-accounts {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;

  .sidebar-accounts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    height: 8rem;
    font-weight: 400;

    h3 {
      font-size: 1.7rem;
    }

    button {
      background: transparent;
      border: none;
      outline: none;
    }
  }

  .sidebar-accounts-list {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    margin: 0 -3rem;
    overflow-y: overlay;

    .sidebar-account {
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      cursor: pointer;
      padding: 2rem 3rem;

      .sidebar-account-row {
        display: flex;
        align-items: center;
        justify-content: space-between;

        &.account-title-balance {
          line-height: 2.7rem;

          .title {
            font-size: 1.5rem;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }

          .balance {
            font-size: 1.8rem;
            font-weight: 600;
            white-space: nowrap;
          }
        }

        &.account-alias {
          font-size: 1.3rem;
          line-height: 3.4rem;
          margin-bottom: 0.7rem;

          .name {
            display: flex;
            align-items: center;
            flex-shrink: 1;
            line-height: 1.6rem;
            padding-right: 1rem;
            overflow: hidden;

            span {
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            }
          }

          .price {
            flex-shrink: 0;
          }

          .icon {
            margin-left: 0.5rem;
            width: 1.2rem;
            height: 1.2rem;

            &.comment {
              mask: url(../../assets/icons/alert.svg) no-repeat center;
            }
          }
        }

        &.account-staking {
          line-height: 2.9rem;

          .text {
            font-size: 1.3rem;
          }
        }

        &.account-messages {
          line-height: 2.7rem;

          .text {
            font-size: 1.3rem;
          }

          .indicator {
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 1rem;
            font-size: 1rem;
            min-width: 2.4rem;
            height: 1.6rem;
            padding: 0 0.5rem;
          }
        }

        &.account-synchronization {
          flex-direction: column;
          height: 5.6rem;

          .status {
            align-self: flex-start;
            font-size: 1.3rem;
            line-height: 2.6rem;
          }

          .progress-bar-container {
            display: flex;
            margin: 0.4rem 0;
            height: 0.7rem;
            width: 100%;

            .progress-bar {
              flex: 1 0 auto;

              .fill {
                height: 100%;
              }
            }

            .progress-percent {
              flex: 0 0 auto;
              font-size: 1.3rem;
              line-height: 0.7rem;
              padding-left: 0.7rem;
            }
          }
        }
      }

      &:focus {
        outline: none;
      }
    }
  }

  &:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -3rem;
    width: calc(100% + 6rem);
    height: 5rem;
  }
}

.sidebar-settings {
  flex: 0 0 auto;
  padding-bottom: 1rem;

  .wrap-button {
    margin: 0 -3rem;

    button {
      display: flex;
      align-items: center;
      background: transparent;
      border: none;
      font-weight: 400;
      line-height: 3rem;
      outline: none;
      padding: 0 3rem;
      width: 100%;

      &.disabled {
        cursor: url(../../assets/icons/not-allowed.svg), not-allowed;
      }

      .icon {
        margin-right: 1.2rem;
        width: 1.7rem;
        height: 1.7rem;

        &.contacts {
          mask: url(../../assets/icons/contacts.svg) no-repeat center;
        }

        &.settings {
          mask: url(../../assets/icons/settings.svg) no-repeat center;
        }

        &.logout {
          mask: url(../../assets/icons/logout.svg) no-repeat center;
        }
      }
    }
  }
}

.sidebar-synchronization-status {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 7rem;
  font-size: 1.3rem;

  .status-container {
    position: relative;
    flex-grow: 1;
    text-align: left;

    .offline, .online {
      position: relative;
      display: block;
      line-height: 1.2rem;
      padding-left: 2.2rem;

      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 50%;
        width: 1.2rem;
        height: 1.2rem;
      }
    }

    .syncing, .loading {
      line-height: 5rem;
    }

    .progress-bar-container {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 0.7rem;
      width: 100%;

      .syncing {
        display: flex;

        .progress-bar {
          flex: 1 0 auto;

          .fill {
            height: 100%;
          }
        }

        .progress-percent {
          flex: 0 0 auto;
          font-size: 1.3rem;
          line-height: 0.7rem;
          padding-left: 0.7rem;
        }       
      }

      .loading {
        animation: move 5s linear infinite;
        background-image:
          -webkit-gradient(
              linear, 0 0, 100% 100%,
              color-stop(.125, rgba(0, 0, 0, .15)), color-stop(.125, transparent),
              color-stop(.250, transparent), color-stop(.250, rgba(0, 0, 0, .10)),
              color-stop(.375, rgba(0, 0, 0, .10)), color-stop(.375, transparent),
              color-stop(.500, transparent), color-stop(.500, rgba(0, 0, 0, .15)),
              color-stop(.625, rgba(0, 0, 0, .15)), color-stop(.625, transparent),
              color-stop(.750, transparent), color-stop(.750, rgba(0, 0, 0, .10)),
              color-stop(.875, rgba(0, 0, 0, .10)), color-stop(.875, transparent),
              to(transparent)
          ),
          -webkit-gradient(
              linear, 0 100%, 100% 0,
              color-stop(.125, rgba(0, 0, 0, .30)), color-stop(.125, transparent),
              color-stop(.250, transparent), color-stop(.250, rgba(0, 0, 0, .25)),
              color-stop(.375, rgba(0, 0, 0, .25)), color-stop(.375, transparent),
              color-stop(.500, transparent), color-stop(.500, rgba(0, 0, 0, .30)),
              color-stop(.625, rgba(0, 0, 0, .30)), color-stop(.625, transparent),
              color-stop(.750, transparent), color-stop(.750, rgba(0, 0, 0, .25)),
              color-stop(.875, rgba(0, 0, 0, .25)), color-stop(.875, transparent),
              to(transparent)
          );
        background-size: 7rem 7rem;
        height: 100%;
      }
    }
  }

  .update-container {
    display: flex;
    flex-grow: 1;
    margin-left: 1rem;
    text-align: right;

    .update-text {
      flex: 1 1 auto;
      font-size: 1.2rem;
      line-height: 1.8rem;
      text-align: left;

      &.time {
        font-size: 1.1rem;
      }
    }

    .icon {
      flex: 1 0 auto;
      margin: 0.3rem 0 0 0.6rem;
      width: 1.2rem;
      height: 1.2rem;

      &.update {
        mask: url(../../assets/icons/update.svg) no-repeat center;
      }

      &.time {
        mask: url(../../assets/icons/time.svg) no-repeat center;
      }
    }
  }
}

@keyframes move {
  0% {
    background-position: 100% -7rem;
  }
  100% {
    background-position: 100% 7rem;
  }
}