<commit_before>html, body {
    margin: 0;
    padding: 0;
    background: #ddd;
    background: linear-gradient(to right, #ddd, #aaa);
}

body {
  height: 100vh;
  width: 100vw;
  font-size: 16px;
  white-space: nowrap;

  font-family: Overpass, Segoe UI;
}

/******************************** $TYPOGRAPHY ********************************/

h1, h2, h3, h4, h5, h6, p, span, small {
  font-family: Overpass;
  color: #4A4A4A;
}

p, span, small {
  font-weight: 400;
  font-size: 16px;
  word-break: break-word;
  word-wrap: break-word;
  white-space: normal;
}

small {
  font-size: 12px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Roboto;
  font-weight: 900;
}

h3, h4, h5, h6 {
  font-weight: 700;
}

/*********************************** $FORMS ***********************************/

form {
  display: flex;
  width: 100%;
}

.stacked {
    flex-direction: column;
}

input[type] {
    box-sizing: border-box;
    margin: 0;
    padding: 0;

    outline: 0;
    border: 0;
    border-bottom: 2px solid transparent;

    height: 2rem;

    background: transparent;
    line-height: 2rem;
    font-size: 1rem;

    transition: border 0.3s;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus {
  border-color: #ddd;
}

.full-width {
  box-sizing: border-box;
  width: 100%;

  display: flex;
  align-items: center;
}

.full-width > input[type="text"],
.full-width > input[type="password"],
.full-width > input[type="email"],
.full-width > input[type="search"] {
  flex: 1;
}


/********************************** $BUTTONS **********************************/

/*
Main button class.

Button should be an inline-block.
Text should be heavy and undecorated, spaced.
The cursor should change to a pointer.

*/
button, .btn {
    display: inline-block;

    margin: 0 2px;
    box-sizing: border-box;
    border: 0;

    font-family: Roboto, sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 1px;
    text-transform: uppercase;

    outline: 0;
    text-decoration: none;

    background: #ccc;
    color: black;

    cursor: pointer;
}

button:disabled, .btn:disabled {
  color: rgba(0, 0, 0, 0.5);
}

.btn--outline {
  background-color: transparent;
  outline: 2px solid #333;
  color: #333;
}

.btn--outline.btn--success { outline-color: #4c4; color: #4c4; }
.btn--outline.btn--danger { outline-color: #c03; color: #c03; }

.btn--clear {
/*   TODO: use mix-blend mode to determine what color to make the text */
  background: transparent;
}

.button-group {
    position: absolute;
}

.at-right {
    right: 0;
}
/*placeholders*/

div[ui-view] { position: relative; }

/*

1. position it dead center
2. reduce contrast
3. make it unselectable
*/
div[ui-view] > .placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);

    display: block;

    text-align: center;
    color: #aaa;

    -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */

    /* Rules below not implemented in browsers yet */
    -o-user-select: none;
    user-select: none;
}

/******************************** $CONTAINERS ********************************/

.app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
}

.panes {
    display: flex;
}

.horizontal-panes {
    flex-direction: row;
}<commit_msg>Make panes take up full height<commit_after>html, body {
    margin: 0;
    padding: 0;
    background: #ddd;
    background: linear-gradient(to right, #ddd, #aaa);
}

body {
  height: 100vh;
  width: 100vw;
  font-size: 16px;
  white-space: nowrap;

  font-family: Overpass, Segoe UI;
}

/******************************** $TYPOGRAPHY ********************************/

h1, h2, h3, h4, h5, h6, p, span, small {
  font-family: Overpass;
  color: #4A4A4A;
}

p, span, small {
  font-weight: 400;
  font-size: 16px;
  word-break: break-word;
  word-wrap: break-word;
  white-space: normal;
}

small {
  font-size: 12px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Roboto;
  font-weight: 900;
}

h3, h4, h5, h6 {
  font-weight: 700;
}

/*********************************** $FORMS ***********************************/

form {
  display: flex;
  width: 100%;
}

.stacked {
    flex-direction: column;
}

input[type] {
    box-sizing: border-box;
    margin: 0;
    padding: 0;

    outline: 0;
    border: 0;
    border-bottom: 2px solid transparent;

    height: 2rem;

    background: transparent;
    line-height: 2rem;
    font-size: 1rem;

    transition: border 0.3s;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus {
  border-color: #ddd;
}

.full-width {
  box-sizing: border-box;
  width: 100%;

  display: flex;
  align-items: center;
}

.full-width > input[type="text"],
.full-width > input[type="password"],
.full-width > input[type="email"],
.full-width > input[type="search"] {
  flex: 1;
}


/********************************** $BUTTONS **********************************/

/*
Main button class.

Button should be an inline-block.
Text should be heavy and undecorated, spaced.
The cursor should change to a pointer.

*/
button, .btn {
    display: inline-block;

    margin: 0 2px;
    box-sizing: border-box;
    border: 0;

    font-family: Roboto, sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 1px;
    text-transform: uppercase;

    outline: 0;
    text-decoration: none;

    background: #ccc;
    color: black;

    cursor: pointer;
}

button:disabled, .btn:disabled {
  color: rgba(0, 0, 0, 0.5);
}

.btn--outline {
  background-color: transparent;
  outline: 2px solid #333;
  color: #333;
}

.btn--outline.btn--success { outline-color: #4c4; color: #4c4; }
.btn--outline.btn--danger { outline-color: #c03; color: #c03; }

.btn--clear {
/*   TODO: use mix-blend mode to determine what color to make the text */
  background: transparent;
}

.button-group {
    position: absolute;
}

.at-right {
    right: 0;
}
/*placeholders*/

div[ui-view] { position: relative; }

/*

1. position it dead center
2. reduce contrast
3. make it unselectable
*/
div[ui-view] > .placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);

    display: block;

    text-align: center;
    color: #aaa;

    -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */

    /* Rules below not implemented in browsers yet */
    -o-user-select: none;
    user-select: none;
}

/******************************** $CONTAINERS ********************************/

.app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
}

.panes {
    display: flex;
}

.horizontal-panes {
    flex-direction: row;
    height: 100%;
}
{'fraction_non_alphanumeric': 0.2225623087013555, 'fraction_numerical': 0.031919545255793616, 'mean_word_length': 3.123798076923077, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 13, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1733537', 'n_tokens_mistral': 2678, 'n_tokens_neox': 2455, 'n_words': 611}