@font-face {
  font-family: 'Inconsolata';
  src: url('/asset/font/Inconsolata-Variable.ttf') format('truetype');
}

:root {
  --ft-mono: 'Inconsolata', monospace;
  --ft-size: 14px;
  --ft-weight: 400;
}

* {
  font-family: var(--ft-mono);
  box-sizing: border-box;
}

html {

  body {
    max-width: 900px;
    margin: 4rem auto;
    margin-bottom: 6rem;
    padding: 0px 1rem;
    font-size: var(--ft-size);
    font-weight: var(--ft-weight);
  }
}

nav {
  border-bottom: 1px solid #bbbbbb;
  padding-bottom: 1rem;
}

pre {
  white-space: pre-wrap;
}

img {
  max-width: 100%;
}

ul.row-list {
  padding: 0px;
  width: 100%;

  li.row {
    display: flex;
    align-items: center;
    gap: 0px 1rem;
    margin: 0px;
    padding: 0px 2ch;
    height: 24px;
    list-style-type: none;

    &.row--head {
      margin-bottom: 0.5rem;
      border-bottom: 1px solid #bbbbbb;
      font-weight: 600;
    }

    &:not(.row--head):hover {
      background-color: #e1e1e1;
    }

    span.col {
      display: inline-block;

      &.col--oid {
        min-width: 7ch;
        max-width: 7ch;
      }

      &.col--time {
        min-width: 10ch;
        max-width: 10ch;
      }

      &.col--mode {
        min-width: 10ch;
        max-width: 10ch;
      }

      &.col--owner {
        min-width: 20ch;
        max-width: 20ch;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }

      &.col--author {
        min-width: 20ch;
        max-width: 20ch;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }

      &.col--size {
        min-width: 20ch;
        max-width: 20ch;
      }

      &.col--message {
        min-width: 50ch;
        flex: 1;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }

      &.col--description {
        min-width: 50ch;
        flex: 1;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }
  }

  &.list--tree li.row span.col {

    &.col--name {
      min-width: 50ch;
      flex: 1;
    }
  }

  &.list--repo li.row span.col {

    &.col--name {
      min-width: 30ch;
      max-width: 30ch;
    }
  }

  &.list--refs li.row span.col {

    &.col--name {
      min-width: 30ch;
      max-width: 30ch;
    }
  }
}

.git--repo {
  margin-top: 2rem;

  .repo--description {
    
  }

  .repo--clone {
    display: inline-block;
    margin-top: 0.5rem;
  }
  
  hr {
    border: none;
    border-top: 1px solid #bbbbbb;
  }

  ul.link-list {
    display: flex;
    gap: 0px 0rem;
    padding: 0px;
    border-bottom: 1px solid #bbbbbb;
    margin-top: 2rem;
    margin-bottom: 0.5rem;

    li.link {
      margin: 0px;
      margin-bottom: -1px;
      list-style-type: none;
      min-width: 12ch;
      border: 1px solid #bbbbbb;

      &:not(:first-of-type) {
        margin-left: -1px;
      }

      &.link--active {
        border-bottom: 1px solid #ffffff;
        z-index: 1;
      }

      &:not(.link--active) {
        background-color: #eeeeee;
      }

      a {
        display: block;
        padding: 0.4rem 1rem;
        padding-bottom: 0.5rem;
        text-align: center;
      }
    }
  }

  select.repo--branch {
    margin: 0.5rem 0px;
    border: 1px solid #999999;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    min-width: 30ch;

    &:hover {
      border-color: #777777;
    }
  }

  .repo--tab {
    padding-top: 0.5rem;
  }
}

.commit--meta {

  .commit--body {
    white-space: pre-wrap;
  }

  hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .commit--info {
    line-height: 1.1rem;
  }
}

.commit--diff {
  margin-top: 2rem;

  pre {
    margin: 1rem 0px;

    &.diff--meta {
      padding-top: 0.25rem;
      padding-bottom: 0.25rem;
      padding-left: 1ch;
      border: 1px solid #bbbbbb;
      background-color: #eeeeee;

      &:has(+ pre.diff--code) {
        margin-bottom: -1rem;
        border-bottom: 0px;
      }

      p {
        margin: 0px;
        line-height: 1.1rem;

        &:not(:first-of-type) {
          display: none;
        }
      }
    }

    &.diff--code {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      border: 1px solid #bbbbbb;
      
      p {
        display: flex;
        margin: 0px;
        line-height: 1.1rem;

        &:last-of-type {
          display: none;
        }

        &.is-hunk {
          color: #5252ff;
        }

        &.is-add {

          span.ln {
            border-left: 3px solid #77d877;
          }
        }

        &.is-rem {

          span.ln {
            border-left: 3px solid #ff7f7f;
          }
        }

        &:not(:hover) {

          &.is-add {
            color: #2e862e;
          }

          &.is-rem {
            color: #932323;
          }

          &:target {
            background-color: #ffff9a !important;

            span.ln {

              a {
                color: #666666;
              }
            }
          }
        }

        &:hover {
          background-color: #e1e1e1;

          span.ln {

            a {
              color: #666666;
            }
          }
        }

        span.ln {
          min-width: max-content;
          user-select: none;
          padding-left: 1ch;
          margin-right: 2ch;
          border-left: 3px solid transparent;

          a {
            text-decoration: none;
            color: #888888;

            &:hover {
              text-decoration: underline;
            }
          }
        }

        span.line {
      
        }
      }
    }
  }
}

.blob {
  margin-top: 2rem;

  pre {
    margin: 1rem 0px;

    &.blob--meta {
      display: flex;
      gap: 0px 2ch;
      padding-top: 0.25rem;
      padding-bottom: 0.25rem;
      padding-left: 1ch;
      padding-right: 1ch;
      border: 1px solid #bbbbbb;
      background-color: #eeeeee;
      line-height: 1.1rem;

      &:has(+ pre.blob--code) {
        margin-bottom: -1rem;
        border-bottom: 0px;
      }

      span {
        flex: 1;
      }

      a {

        &.link--raw {
          margin-left: auto;
        }
      }
    }

    &.blob--code {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      border: 1px solid #bbbbbb;

      span.blob--binary {
        display: block;
        padding-top: 1rem;
        padding-bottom: 1rem;
        text-align: center;
      }
      
      p {
        display: flex;
        margin: 0px;
        line-height: 1.1rem;

        &:not(:hover) {

          &:target {
            background-color: #ffff9a !important;

            span.ln {

              a {
                color: #666666;
              }
            }
          }
        }

        &:hover {
          background-color: #e1e1e1;

          span.ln {

            a {
              color: #666666;
            }
          }
        }

        span.ln {
          min-width: max-content;
          user-select: none;
          padding-left: 1ch;
          margin-right: 2ch;
          border-left: 3px solid transparent;

          a {
            text-decoration: none;
            color: #888888;

            &:hover {
              text-decoration: underline;
            }
          }
        }

        span.line {
      
        }
      }
    }
  }
}

.blob--markdown {

  p {
    margin: 1.25rem 0px;
    line-height: 1.25rem;
  }
  
  pre:has(code) {
    padding: 1rem 2ch;

    &:not(:has(code.language-graph)) {
      border: 1px solid #bbbbbb;
      background-color: #eeeeee;
    }

    code {
      line-height: 1.1rem;

      &.language-graph {
        display: block;
        width: max-content;
        margin: 0 auto;
      }
    }
  }

  :not(pre) + code {
    padding: 1px 0.5ch;
    border: 1px solid #bbbbbb;
  }
}