<commit_before>@import url(../style/color.css);
@import url(../style/font.css);
@import url(../style/responsive.css);

.bookEntry {
  position: relative;
  padding: 0.6em 0.7em;
  margin: 0.5em 0;
  background-color: var(--grey-000);
  border: 1px solid var(--grey-400);
  border-radius: 2px;
  box-shadow: 0 0.2em 0.3em -0.2em color(var(--grey-900) alpha(-30%));
  &.focus, &.focus:hover {
    background-color: var(--blue-100);
    border: 1px solid var(--blue-700);
    box-shadow: 0 0.2em 0.3em -0.2em var(--blue-700);
    & > .content > .menu > .dropDown {
      visibility: visible;
    }
  }
  &:hover {
    border: 1px solid var(--blue-500);
    & > .content > .menu > .dropDown {
      visibility: visible;
    }
  }
  & > .accountDiffs {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  & > .content {
    margin: 0.5em 0 0;
    padding: 0.5em 0 0;
    border-top: 1px solid var(--grey-400);
    color: var(--grey-800);
    & > .description {
      display: inline-block;
      margin: 0;
      padding: 0;
    }
    & > textarea.description {
      /* I usually hate to do this, but there was no other way. */
      width: calc(100% - 1.5em);
      padding: 0.2em;
      box-sizing: border-box;
      border: none;
      border-bottom: 1px solid var(--grey-500);
      border-radius: 0;
      color: inherit;
      background: none;
      resize: none;
    }
    & > .menu {
      float: right;
      width: 1.5em;
      text-align: center;
      margin-right: -0.2em;
      color: var(--grey-600);
      & > .dropDown {
        visibility: hidden;
        &.open {
          visibility: visible;
        }
      }
    }
    &:after {
      content: '';
      display: block;
      clear: both;
    }
  }
}

.accountDiff {
  margin-bottom: 0.3em;
  & > .name {
    font-weight: bold;
    &.income {
      color: var(--green-800);
    }
    &.expense {
      color: var(--red-800);
    }
    &.asset {
      color: var(--blue-800);
    }
    &.liability {
      color: var(--orange-800);
    }
  }
  & > .note {
    font-size: 0.9em;
    padding-left: 0.2em;
    box-sizing: border-box;
    color: var(--grey-600);
    &:before {
      content: '(';
    }
    &:after {
      content: ')';
    }
  }
  & > .right {
    float: right;
    & > .value {
      font-family: var(--font-monospace);
      text-align: right;
      vertical-align: middle;
      &.positive {
        color: var(--green-800);
        &:before {
          content: '+';
        }
      }
      &.negative {
        color: var(--red-800);
      }
    }
    & > .delete {
      margin: 0 0 0 0.2em;
      padding: 0 0.2em;
      border: none;
      background: none;
      font-size: 0.8em;
      vertical-align: middle;
      color: var(--red-800);
      &:hover {
        color: var(--red-600);
      }
    }
  }
  &:after {
    content: '';
    display: block;
    clear: both;
  }
  &.editing {
    width: 100%;
    & > .name {
      float: left;
      vertical-align: middle;
    }
    & > .right {
      float: right;
      text-align: right;
      & > .value {
        &:before {
          display: none;
        }
        display: inline-block;
        width: 10em;
        & > input {
          width: 100%;
          margin: 0.2em 0;
          padding: 0.2em;
          border: none;
          border-bottom: 1px solid var(--grey-500);
          border-radius: 0;
          color: inherit;
          font-family: inherit;
          background: none;
          text-align: right;
        }
      }
    }
    & > .noteButton {
      & > button {
        margin: 0 0 0 0.2em;
        padding: 0 0.2em;
        border: none;
        background: none;
        font-size: 0.8em;
        vertical-align: middle;
        color: var(--grey-700);
        &:hover {
          color: var(--grey-500);
        }
      }
    }
  }
  &.editNote {
    & > .note {
      display: block;
      width: 100%;
      vertical-align: middle;
      &:before {
        display: none;
        content: '';
      }
      &:after {
        display: none;
        content: '';
      }
      & > input {
        width: 100%;
        margin: 0.2em 0;
        padding: 0.2em;
        border: none;
        border-bottom: 1px solid var(--grey-500);
        border-radius: 0;
        color: inherit;
        background: none;
      }
    }
    & > .noteButton {
      display: none;
    }
  }
    /*
    @media (--tablet) {
      & > .note {
        width: calc(100% - 18em);
      }
    }
    */
}<commit_msg>Vertically align diff table<commit_after>@import url(../style/color.css);
@import url(../style/font.css);
@import url(../style/responsive.css);

.bookEntry {
  position: relative;
  padding: 0.6em 0.7em;
  margin: 0.5em 0;
  background-color: var(--grey-000);
  border: 1px solid var(--grey-400);
  border-radius: 2px;
  box-shadow: 0 0.2em 0.3em -0.2em color(var(--grey-900) alpha(-30%));
  &.focus, &.focus:hover {
    background-color: var(--blue-100);
    border: 1px solid var(--blue-700);
    box-shadow: 0 0.2em 0.3em -0.2em var(--blue-700);
    & > .content > .menu > .dropDown {
      visibility: visible;
    }
  }
  &:hover {
    border: 1px solid var(--blue-500);
    & > .content > .menu > .dropDown {
      visibility: visible;
    }
  }
  & > .accountDiffs {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  & > .content {
    margin: 0.5em 0 0;
    padding: 0.5em 0 0;
    border-top: 1px solid var(--grey-400);
    color: var(--grey-800);
    & > .description {
      display: inline-block;
      margin: 0;
      padding: 0;
    }
    & > textarea.description {
      /* I usually hate to do this, but there was no other way. */
      width: calc(100% - 1.5em);
      padding: 0.2em;
      box-sizing: border-box;
      border: none;
      border-bottom: 1px solid var(--grey-500);
      border-radius: 0;
      color: inherit;
      background: none;
      resize: none;
    }
    & > .menu {
      float: right;
      width: 1.5em;
      text-align: center;
      margin-right: -0.2em;
      color: var(--grey-600);
      & > .dropDown {
        visibility: hidden;
        &.open {
          visibility: visible;
        }
      }
    }
    &:after {
      content: '';
      display: block;
      clear: both;
    }
  }
}

.accountDiff {
  margin-bottom: 0.3em;
  & > .name {
    font-weight: bold;
    &.income {
      color: var(--green-800);
    }
    &.expense {
      color: var(--red-800);
    }
    &.asset {
      color: var(--blue-800);
    }
    &.liability {
      color: var(--orange-800);
    }
  }
  & > .note {
    font-size: 0.9em;
    padding-left: 0.2em;
    box-sizing: border-box;
    color: var(--grey-600);
    &:before {
      content: '(';
    }
    &:after {
      content: ')';
    }
  }
  & > .right {
    float: right;
    & > .value {
      font-family: var(--font-monospace);
      text-align: right;
      vertical-align: middle;
      &.positive {
        color: var(--green-800);
        &:before {
          content: '+';
        }
      }
      &.negative {
        color: var(--red-800);
      }
    }
    & > .delete {
      margin: 0 0 0 0.2em;
      padding: 0 0.2em;
      border: none;
      background: none;
      font-size: 0.8em;
      vertical-align: middle;
      color: var(--red-800);
      &:hover {
        color: var(--red-600);
      }
    }
  }
  &:after {
    content: '';
    display: block;
    clear: both;
  }
  &.editing {
    width: 100%;
    & > .name {
      float: left;
      vertical-align: middle;
      line-height: 1.6em;
    }
    & > .right {
      float: right;
      text-align: right;
      line-height: 1.6em;
      white-space: nowrap;
      width: calc(100% - 10em);
      max-width: 14em;
      display: table;
      & > .value {
        &:before {
          display: none;
        }
        display: table-cell;
        width: 100%;
        & > input {
          width: 100%;
          margin: 0;
          padding: 0.2em;
          border: none;
          border-bottom: 1px solid var(--grey-500);
          border-radius: 0;
          color: inherit;
          font-family: inherit;
          background: none;
          text-align: right;
        }
      }
    }
    & > .note {
      line-height: 1.6em;
    }
    & > .noteButton {
      line-height: 1.6em;
      & > button {
        margin: 0 0 0 0.2em;
        padding: 0 0.2em;
        border: none;
        background: none;
        font-size: 0.8em;
        vertical-align: middle;
        color: var(--grey-700);
        &:hover {
          color: var(--grey-500);
        }
      }
    }
  }
  &.editNote {
    & > .note {
      display: block;
      width: 100%;
      vertical-align: middle;
      &:before {
        display: none;
        content: '';
      }
      &:after {
        display: none;
        content: '';
      }
      & > input {
        width: 100%;
        margin: 0.2em 0;
        padding: 0.2em;
        border: none;
        border-bottom: 1px solid var(--grey-500);
        border-radius: 0;
        color: inherit;
        background: none;
      }
    }
    & > .noteButton {
      display: none;
    }
  }
}
{'fraction_non_alphanumeric': 0.15977567627006817, 'fraction_numerical': 0.04145590499230262, 'mean_word_length': 1.4514824797843666, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 57, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6617075', 'n_tokens_mistral': 3515, 'n_tokens_neox': 3219, 'n_words': 684}