<commit_before>@import 'bootstrap-3.3.4/variables';
@import 'colors';

.results {
  min-height: 50rem;
}

.results-list-container {
  padding-top: @padding-large-vertical;

  .results-list {
    &:extend(.list-unstyled all);
    .result {
      padding: @padding-base-vertical (@padding-base-horizontal - 1px);

      .result-gene-summary {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
      }

      /* closest-ortholog is the other flexbox */
      .result-gene-title-body {
        flex: 1 1 auto;
      }

      .gene-name {
        .glyphicon {
          color: @gramene-orange;
          font-size: @padding-large-horizontal;
        }
      }

      @media only screen and (min-width: @screen-sm-min) {
        .gene-name {
          white-space: nowrap;
        }
      }

      /* gene-id and species name are used in result-gene-title-body and closest-ortholog */
      .gene-id {
        white-space: nowrap;
      }

      /* ensure there's a space between gene-id and species */
      .species-name {
        padding-left: @padding-xs-horizontal;
      }

      .gene-description {
        padding-left: @padding-large-horizontal;
      }

      /* result-gene-title-body is the other flexbox'*/
      .closest-ortholog {
        flex: 1 1 auto;
        width: fit-content;
        font-size: smaller;
        margin-top: @line-height-computed + @padding-small-vertical; /* same as h3 in bootstrap, plus extra for ::before element */
        padding: 0 @padding-xs-horizontal; /* vertical padding from h and p elements */
        border: 1px solid @gramene-orange;
        > h4, > p {
          margin: @padding-base-vertical 0;
        }

        /* clear the title (defined in the ::before block below) */
        :first-child {
          clear: right;
        }
      }

      /* this is the "title" of the closest ortholog box */
      .closest-ortholog::before {
        content: "Model Species Ortholog";
        position: relative;
        float: right;
        margin-top: -10px;
        border: solid 1px;

        padding: 0 @padding-xs-horizontal;
        margin-bottom: @padding-xs-vertical;
        background: @gramene-offwhite;
        color: @gramene-orange;
      }

      @media only screen and (max-width: @screen-xs-max) {
        .closest-ortholog {
          display: none;
        }
      }

      .result-content {
        clear: both; /* result-gene-title-body and closest-ortholog are floating above this element */

        .result-links {
          &:extend(.list-inline all);

          padding-left: @padding-large-horizontal;
          margin-left: 0;

          .result-gene-detail-name {
            padding: @padding-base-vertical @padding-base-horizontal;
          }

          .result-gene-detail-name:hover {
            background-color: @gramene-lightergreen;
          }

          .result-gene-detail-name.active {
            background-color: @gramene-darkgreen;
            > a {
              color: @gramene-offwhite;
            }
          }
        }

        .visible-detail {
          border: 1px solid @gramene-darkgreen;
          margin-left: @padding-large-horizontal;
          margin-right: @padding-large-horizontal;
          padding: @padding-base-vertical @padding-base-horizontal;
        }

        .expanded-details {
          padding: @padding-large-vertical @padding-large-horizontal;

          .expanded-detail {
            padding: @padding-large-vertical 0;
          }
        }

        .xrefs {
          table-layout: fixed;

          .xref-name-col {
            width: 20%;
          }

          .xref-value-col {
            width: 80%;

            ol.xref-id-list {
              &:extend(.list-unstyled all);
            }
          }
        }
      }
    }

    .result.expanded {<commit_msg>flexbox the tabs and only show the first 3 on small screens.<commit_after>@import 'bootstrap-3.3.4/variables';
@import 'colors';

.results {
  min-height: 50rem;
}

.results-list-container {
  padding-top: @padding-large-vertical;

  .results-list {
    &:extend(.list-unstyled all);
    .result {
      padding: @padding-base-vertical (@padding-base-horizontal - 1px);

      .result-gene-summary {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
      }

      /* closest-ortholog is the other flexbox */
      .result-gene-title-body {
        flex: 1 1 auto;
      }

      .gene-name {
        .glyphicon {
          color: @gramene-orange;
          font-size: @padding-large-horizontal;
        }
      }

      @media only screen and (min-width: @screen-sm-min) {
        .gene-name {
          white-space: nowrap;
        }
      }

      /* gene-id and species name are used in result-gene-title-body and closest-ortholog */
      .gene-id {
        white-space: nowrap;
      }

      /* ensure there's a space between gene-id and species */
      .species-name {
        padding-left: @padding-xs-horizontal;
      }

      .gene-description {
        padding-left: @padding-large-horizontal;
      }

      /* result-gene-title-body is the other flexbox'*/
      .closest-ortholog {
        flex: 1 1 auto;
        width: fit-content;
        font-size: smaller;
        margin-top: @line-height-computed + @padding-small-vertical; /* same as h3 in bootstrap, plus extra for ::before element */
        padding: 0 @padding-xs-horizontal; /* vertical padding from h and p elements */
        border: 1px solid @gramene-orange;
        > h4, > p {
          margin: @padding-base-vertical 0;
        }

        /* clear the title (defined in the ::before block below) */
        :first-child {
          clear: right;
        }
      }

      /* this is the "title" of the closest ortholog box */
      .closest-ortholog::before {
        content: "Model Species Ortholog";
        position: relative;
        float: right;
        margin-top: -10px;
        border: solid 1px;

        padding: 0 @padding-xs-horizontal;
        margin-bottom: @padding-xs-vertical;
        background: @gramene-offwhite;
        color: @gramene-orange;
      }

      @media only screen and (max-width: @screen-xs-max) {
        .closest-ortholog {
          display: none;
        }
      }

      .result-content {
        clear: both; /* result-gene-title-body and closest-ortholog are floating above this element */

        .result-links {
          &:extend(.list-inline all);

          display: flex;
          justify-content: flex-start;
          padding-left: @padding-large-horizontal;
          margin-left: 0;
          margin-top: @padding-small-vertical;

          .result-gene-detail-name {
            flex: 0 1 auto;
            padding: @padding-base-vertical @padding-base-horizontal;
          }

          .result-gene-detail-name:hover {
            background-color: @gramene-lightergreen;
          }

          .result-gene-detail-name.active {
            background-color: @gramene-darkgreen;
            > a {
              color: @gramene-offwhite;
            }
          }
        }

        /* On small screens, only show the first three gene details */
        @media only screen and (max-width: @screen-xs-max) {
          .result-links .result-gene-detail-name:nth-child(n+4) {
            display: none;
          }
        }

        .visible-detail {
          border: 1px solid @gramene-darkgreen;
          margin-left: @padding-large-horizontal;
          padding: @padding-base-vertical @padding-base-horizontal;
        }

        .expanded-details {
          padding: @padding-large-vertical @padding-large-horizontal;

          .expanded-detail {
            padding: @padding-large-vertical 0;
          }
        }

        .xrefs {
          table-layout: fixed;

          .xref-name-col {
            width: 20%;
          }

          .xref-value-col {
            width: 80%;

            ol.xref-id-list {
              &:extend(.list-unstyled all);
            }
          }
        }
      }
    }

    .result.expanded {
{'fraction_non_alphanumeric': 0.11838353787033594, 'fraction_numerical': 0.006941861906532788, 'mean_word_length': 1.5792838874680306, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 9, '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': '615930', 'n_tokens_mistral': 2465, 'n_tokens_neox': 2319, 'n_words': 521}