flood/client/source/sass/components/_client-stats.scss

$client-stats--limits--opacity: 0.15;
$client-stats--speed--fill--top--opacity: 0.2;
$client-stats--speed--fill--bottom--opacity: 0;
$client-stats--speed--stroke--opacity: 0.4;

$client-stats--download--primary--foreground: #2bae6c;
$client-stats--download--secondary--foreground: rgba($client-stats--download--primary--foreground, 0.75);
$client-stats--download--graph--stroke: rgba(#2bae6c, $client-stats--speed--stroke--opacity);
$client-stats--download--graph--fill--top: rgba(#2bae6c, $client-stats--speed--fill--top--opacity);
$client-stats--download--graph--fill--bottom: rgba(#2bae6c, $client-stats--speed--fill--bottom--opacity);
$client-stats--download--limits--line: rgba(lighten($client-stats--download--primary--foreground, 20%), $client-stats--limits--opacity);

$client-stats--upload--primary--foreground: #2387d9;
$client-stats--upload--secondary--foreground: rgba($client-stats--upload--primary--foreground, 0.75);
$client-stats--upload--graph--stroke: rgba(#2387d9, $client-stats--speed--stroke--opacity);
$client-stats--upload--graph--fill--top: rgba(#2387d9, $client-stats--speed--fill--top--opacity);
$client-stats--upload--graph--fill--bottom: rgba(#2387d9, $client-stats--speed--fill--bottom--opacity);
$client-stats--upload--limits--line: rgba(lighten($client-stats--upload--primary--foreground, 20%), $client-stats--limits--opacity);

$client-stats--limits--foreground: $foreground;
$client-stats--limits--icon--hover: $blue;

.client-stats {
  height: 200px;
  position: relative;

  .loading-indicator {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .transfer-data-enter {
    opacity: 0;
    transition: opacity 1s;

    &.transfer-data-enter-active {
      opacity: 1;
    }
  }

  .transfer-data-leave {
    opacity: 1;
    transition: opacity 1s;

    &.transfer-data-leave-active {
      opacity: 0;
    }
  }
}

.client-stat {
  align-items: center;
  display: flex;
  height: 100px;
  padding: 0 20px;

  &__icon,
  &__data {
    position: relative;
    vertical-align: top;
    z-index: 1;
  }

  &__icon {
    flex: 0 0 23px;

    .icon {
      display: inline-block;
      height: 25px;
      margin: 6px 0 0 -5px;
      width: auto;
    }
  }

  &__data {
    flex: 1;

    &--primary,
    &--secondary {
      display: block;
      font-weight: 100;
      line-height: 1.2;
    }

    &--primary {
      font-size: 1.75em;
      white-space: nowrap;

      .unit {
        font-size: 0.65em;
        margin-bottom: 0;
        opacity: 0.5;
        position: relative;
        top: -0.1em;
      }
    }

    &--secondary {
      font-size: 0.8em;
      font-style: italic;
      font-weight: 400;
    }
  }
}

.client-stat {
  position: relative;

  .graph {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;

    svg {
      height: 100%;
      width: 100%;
    }

    &__line {
      fill: none;

      &--limit {
        stroke-dasharray: 3px 4px;
        stroke-width: 1px;
      }

      &--rate {
        stroke-width: 1.1px;
      }
    }

  }

  &--download {

    .icon {
      fill: $client-stats--download--secondary--foreground;
    }

    .client-stat {

      &__data {

        &--primary {
          color: $client-stats--download--primary--foreground;
        }

        &--secondary {
          color: $client-stats--download--secondary--foreground;
        }

      }

    }

    .graph {

      .graph--download--gradient--top {
        stop-color: $client-stats--download--graph--fill--top;
      }

      .graph--download--gradient--bottom {
        stop-color: $client-stats--download--graph--fill--bottom;
      }

      &__area {
        fill: url('#graph--download--gradient')
      }

      &__line {

        &--limit {
          stroke: $client-stats--download--limits--line;
        }

        &--rate {
          stroke: $client-stats--download--graph--stroke;
        }
      }

    }

  }

  &--upload {

    .icon {
      fill: $client-stats--upload--secondary--foreground;
    }

    .client-stat {

      &__data {

        &--primary {
          color: $client-stats--upload--primary--foreground;
        }

        &--secondary {
          color: $client-stats--upload--secondary--foreground;
        }

      }

    }

    .graph {

      .graph--upload--gradient--top {
        stop-color: $client-stats--upload--graph--fill--top;
      }

      .graph--upload--gradient--bottom {
        stop-color: $client-stats--upload--graph--fill--bottom;
      }

      &__area {
        fill: url('#graph--upload--gradient')
      }

      &__line {

        &--limit {
          stroke: $client-stats--upload--limits--line;
        }

        &--rate {
          stroke: $client-stats--upload--graph--stroke;
        }
      }

    }

  }

}