metrics/source/app/web/statics/style.css

/* General */
  body {
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
    padding: 0;
    margin: 0;
  }
  main {
    height: auto;
    color: var(--color-text-primary);
    background-color: var(--color-bg-canvas);
    display: flex;
    flex-direction: column;
  }
/* Title */
  .title {
    margin: 0;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    font-size: 1.6rem;
    background-color: var(--color-header-bg);
  }
  .title a {
    color: #fff !important;
    font-weight: normal;
  }
  .title svg {
    margin-right: 2rem;
    fill: #fff !important;
    width: 2rem;
    height: 2rem;
  }
/* Tabs */
  nav {
    display: flex;
    border-bottom: 1px solid var(--color-border-secondary);
    flex-shrink: 0;
    overflow-x: auto;
  }
  nav .tab {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 8px 16px;
    font-size: 14px;
    line-height: 30px;
    color: var(--color-underlinenav-text-hover);
    cursor: pointer;
  }
  nav .tab.active {
    color: var(--color-underlinenav-text-active);
    border-bottom: 2px solid #f9826c;
    font-weight: 600;
  }
  nav .tab.disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
  }
  nav .tab svg {
    fill: currentColor;
    margin-right: .5rem;
  }
  nav .right {
    display: flex;
    border: none;
    height: 100%;
  }
  nav .left {
    display: none;
  }
/* Readme container */
  .container {
    max-width: 1280px;
    display: flex;
    flex-grow: 1;
    height: 100%;
    flex-direction: column;
  }
  .left, .right {
    margin: 0 8px 16px;
  }
  .left {
    flex-shrink: 0;
    margin: 0;
    width: 100%;
    min-width: 230px;
    display: flex;
    flex-direction: column;
  }
  .left .user {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
  }
  .left .user input, .left .user button {
    width: 100%;
    margin: 4px 0;
  }
  .left .scrollable {
    flex-grow: 1;
    overflow: auto;
    margin-bottom: 1rem;
  }
  .right {
    flex-grow: 1;
    border-radius: 6px;
    border: 1px solid var(--color-border-primary);
    width: auto;
  }
  .right .body {
    margin: 24px;
  }
/* Avatar */
  .avatar {
    display: none;
    justify-content: center;
    margin-top: -20%;
    z-index: 888;
  }
  .avatar div {
    width: 50%;
    padding-top: 50%;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--color-avatar-border);
    border: 1px solid var(--color-border-primary);
    background-color: black;
    background-size: cover;
  }
/* Readme */
  .readme {
    display: flex;
    align-items: center;
    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
    font-size: 12px;
    margin-bottom: 16px;
    color: var(--color-text-primary);
  }
  .readme svg {
    fill: currentColor;
    margin-right: 8px;
  }
  .readme .slash  {
    padding: 0 2px;
  }
  .readme .md  {
    color: var(--color-text-tertiary);
  }
/* Readme content */
  .right section {
    height: 87%;
    overflow: auto;
  }
/* Code */
  .code {
    overflow-x: auto;
    width: 100%;
  }
  .code pre {
    border-radius: 5px;
  }
/* Plugins */
  .plugins, .templates {
    display: flex;
    flex-direction: column;
  }
  .plugins label, .templates label {
    margin: 0;
    display: flex;
    align-items: center;
  }
  .plugins label svg, .templates label svg {
    fill: currentColor;
  }
  .options {
    display: flex;
    flex-direction: column;
  }
  .options-group {
    display: flex;
    flex-direction: column;
  }
  .options-group label {
    margin: 0;
    display: flex;
    flex-direction: column;
  }
  .options-group h4 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
  }
/* Step */
  .step {
    padding: 1rem .5rem;
    border-bottom: 1px solid var(--color-border-secondary);
  }
  .step h2 {
    margin: 0;
    margin-bottom: .25rem;
    font-weight: 600;
    font-size: 1.2rem;
  }
/* Links */
  a, a:hover, a:visited {
    color: var(--color-text-link);
    text-decoration: none;
    font-style: normal;
    outline: none;
  }
  a:hover {
    text-decoration: underline;
    transition: color .4s;
    cursor: pointer;
  }
/* Inputs */
  input, button, select {
    background-color: var(--color-input-contrast-bg);
    padding: 5px 12px;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-text-primary);
    border: 1px solid var(--color-input-border);
    border-radius: 6px;
    outline: none;
    box-shadow: var(--color-shadow-inset);
    cursor: pointer;
  }
  button {
    color: var(--color-btn-primary-text);
    background-color: var(--color-btn-primary-bg);
    border-color: var(--color-btn-primary-border);
  }
  input:focus {
    outline: none;
  }
  label, button {
    margin: 1rem;
  }
  label {
    padding-right: .25rem;
    padding-bottom: .125rem;
  }
  input[disabled], button[disabled], select[disabled] {
    opacity: .5;
    cursor: not-allowed;
  }
  label:hover {
    border-radius: .25rem;
    background-color: #79B8FF50;
    transition: background-color .4s;
    cursor: pointer;
  }
  .not-available {
    opacity: .3;
  }
/* Error */
  .error {
    color: #721c24;
    background-color: #f8d7da;
    padding: .75rem 1.25rem;
    border: 1px solid #f5c6cb;
    border-radius: .25rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
/* Github requests */
  .gh-requests {
    font-size: .8rem;
  }
/* Metrics */
  .metrics {
    width: 100%;
    max-width: 480px;
  }

/* Media screen */
  @media only screen and (min-width: 700px)  {
    .left, .right {
      height: 75%;
      width: 0%;
    }
    .left {
      width: 25%;
      margin: 0 8px;
    }
    nav {
      margin: 32px 0 24px;
      overflow: hidden;
    }
    nav .left {
      display: block;
    }
    .container {
      flex-direction: row;
    }
    main {
      height: 100vh;
      width: 100vw;
      overflow: hidden;
    }
    .avatar {
      display: flex;
    }
  }