<commit_before>/* ==========================================================================
   Author's custom styles
   ========================================================================== */
$canvasWidthSm: 300px;
$viewportPadding: 10px;
$closerBtnWidth: 14px;
$closerBtnMarginRight: 4px;
$submitBtnWidth: 30px;
$inputWidth: $canvasWidthSm - ($viewportPadding * 2) -
  ($closerBtnWidth + $submitBtnWidth) - 8;
$inputHeight: 32px;

/* Color Palette */
$offWhite: #fffeff;
$peanutButter: #eaa721;
$bronze: #765002;
$teal: #70c9de;
$magenta: #e01464;
$strangeGreen: #3fb893;


.container {
  padding: 10px;
  .title {
    text-align: center;
    color: $bronze;
  }
}

.search {

  width: 100%;
  margin-bottom: 20px;

  form.search-form-component {
    width: 100%;
    max-width: $canvasWidthSm;
    margin: 0 auto;
    padding: 4px 0;
    background-color: $peanutButter;
    border-radius: 6px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
    .mode {
      &.query-view {

      }
      &.results-view {
        .result {
          width: 80px;
          margin: 0;
          display: inline-block;
          text-align: center;
          label {
            color: $bronze;
            font-weight: 700;
            font-size: .95em;
          }
          input {
            max-width: 100%;
            background: none;
            border: none;
            color: $magenta;
            font-size: 1.2em;
            font-weight: 500;
            text-align: center;
          }
        }
      }
    }
  }

  .input-mask {
    display: inline-block;
    min-width: $inputWidth + $closerBtnWidth
      + $closerBtnMarginRight + 5;
    margin-right: 2px;
    margin: 0 0 0 4px;
    border: none;
    padding: 0 0 0 2px;
    background-color: $offWhite;
    border-radius: 6px;
    input {
      // min-width: 280px;
      width: $inputWidth;
      height: $inputHeight;
      border: none;
      background-color: $offWhite;
    }
  }

  button {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;

    &:focus {
      outline: thin dotted;
    }

    &.closer {
      color: $teal;
      &[name=close] {
        margin-right: $closerBtnMarginRight;
      }
      &[name=clear] {
        width: 40px;
        height: 44px;
        margin-top: 4px;
        display: inline-block;
        vertical-align: top;
        text-align: center;
      }
    }

    &.submit {
      margin: 0 0 0 3px;
      color: $teal;
      &:disabled {
        color: $bronze;
      }
    }
  }
}

.gallery {
  width: 100%;
  min-height: 20px;
  background-color: #f1f1f1;
  article {
    width: 100%;
    min-height: 20px;

    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;

    .thumb {
      // float: left;
      flex-grow: 1;
      padding: 1px;
      margin: 1px 1px 3px 1px;
      // border: 1px solid #222;
      cursor: pointer;

      img {
        max-width: 100%;
      }
    }
  }
}

.portrait {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(000, 0, 0, 0.5);
  width: 100%;
  height: 100%;

  .canvas {
    width: 300px;

  /* center on screen at any width; requires fixed dimensions
  so height added to element dynamically based on image */
    position: absolute;
    top: 50%;
    left: 50%;

    img {
      max-width: 100%;
    }
  }
}<commit_msg>(feat) Add shadow, border styling for thumbs and portrait<commit_after>/* ==========================================================================
   Author's custom styles
   ========================================================================== */
$canvasWidthSm: 300px;
$viewportPadding: 10px;
$closerBtnWidth: 14px;
$closerBtnMarginRight: 4px;
$submitBtnWidth: 30px;
$inputWidth: $canvasWidthSm - ($viewportPadding * 2) -
  ($closerBtnWidth + $submitBtnWidth) - 8;
$inputHeight: 32px;

/* Color Palette */
$offWhite: #fffeff;
$peanutButter: #eaa721;
$bronze: #765002;
$teal: #70c9de;
$magenta: #e01464;
$strangeGreen: #3fb893;


.container {
  padding: 10px;
  .title {
    text-align: center;
    color: $bronze;
  }
}

.search {

  width: 100%;
  margin-bottom: 20px;

  form.search-form-component {
    width: 100%;
    max-width: $canvasWidthSm;
    margin: 0 auto;
    padding: 4px 0;
    background-color: $peanutButter;
    border-radius: 6px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
    .mode {
      &.query-view {

      }
      &.results-view {
        .result {
          width: 80px;
          margin: 0;
          display: inline-block;
          text-align: center;
          label {
            color: $bronze;
            font-weight: 700;
            font-size: .95em;
          }
          input {
            max-width: 100%;
            background: none;
            border: none;
            color: $magenta;
            font-size: 1.2em;
            font-weight: 500;
            text-align: center;
          }
        }
      }
    }
  }

  .input-mask {
    display: inline-block;
    min-width: $inputWidth + $closerBtnWidth
      + $closerBtnMarginRight + 5;
    margin-right: 2px;
    margin: 0 0 0 4px;
    border: none;
    padding: 0 0 0 2px;
    background-color: $offWhite;
    border-radius: 6px;
    input {
      // min-width: 280px;
      width: $inputWidth;
      height: $inputHeight;
      border: none;
      background-color: $offWhite;
    }
  }

  button {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;

    &:focus {
      outline: thin dotted;
    }

    &.closer {
      color: $teal;
      &[name=close] {
        margin-right: $closerBtnMarginRight;
      }
      &[name=clear] {
        width: 40px;
        height: 44px;
        margin-top: 4px;
        display: inline-block;
        vertical-align: top;
        text-align: center;
      }
    }

    &.submit {
      margin: 0 0 0 3px;
      color: $teal;
      &:disabled {
        color: $bronze;
      }
    }
  }
}

.gallery {
  width: 100%;
  min-height: 20px;
  background-color: #f1f1f1;
  article {
    width: 100%;
    min-height: 20px;

    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;

    .thumb {
      // float: left;
      flex-grow: 1;
      padding: 1px;
      margin: 1px 1px 3px 1px;
      // border: 1px solid #222;
      cursor: pointer;

      img {
        max-width: 100%;
        box-shadow: 0 1px 1px rgba(2, 2, 2, 0.5);
      }
    }
  }
}

.portrait {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(000, 0, 0, 0.5);
  width: 100%;
  height: 100%;

  .canvas {
    width: 300px;
    padding: 20px;
    background-color: white;

  /* center on screen at any width; requires fixed dimensions
  so height added to element dynamically based on image */
    position: absolute;
    top: 50%;
    left: 50%;

    img {
      max-width: 100%;
      box-shadow: 0 1px 3px rgba(2, 2, 2, 0.5);
    }
  }
}
{'fraction_non_alphanumeric': 0.16647662485746864, 'fraction_numerical': 0.04532497149372862, 'mean_word_length': 1.9582630691399663, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, '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': '4407293', 'n_tokens_mistral': 2728, 'n_tokens_neox': 2382, 'n_words': 588}