<commit_before>// Place all the styles related to the Things controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

$primary-color: #5264AE;
$accent-color: #FF609A;

.sin-main-layout > section.sin-card-layout > .mdl-card {
  width: 100%;
}

@media (max-width: 839px) {
  .sin-card-layout .mdl-card {
    border-radius:0;
  }
}

.sin-card-layout > .mdl-card {
  & > .mdl-card__title {
    background: #424242;
    // background: #424242 image-url("use_your_illusion.png");
    background-image: image-url("background_blue_explore_page.jpg");
    background-image: 
      linear-gradient(to bottom, transparent, transparent, rgba(0,0,0,0.25)),
      image-url("background_blue_explore_page.jpg");
    background-size: cover;
    padding:24px;
    align-items: flex-end;
    min-height: 10em;
    justify-content: space-between;

    h3, h4 {
      margin:0;
      a {
        color: white;
        text-decoration: none;
        &:not(.sin-stars):hover {
          text-decoration: underline;
        }
      }
    }

    h3 {
      margin-top: 2em;
    }

    h3:before {
      position: absolute;
      top: 16px;
      left: 16px;
    }

    h4 {
      font-size: large;
      text-align: right;
    }

    .sin-lock {
      position:absolute;
      top: 1em;
      right: 1em;
      i.material-icons {
        font-size: 3em;
      }
    }

    .sin-stars {
      display: inline-block;
      margin-left: 1em;
      background: $primary-color;
      border-radius: 5px;
      padding: 0px 1em 2px 1em;
      line-height: 26px;
      box-shadow: 0 0 10px rgba(0,0,0,0.5) inset;
      &:hover {
        background: darken($primary-color, 10%);
      }
      i.material-icons {
        font-size: 16px;
        position: relative;
        top: 2px;
        right: 6px;
      }

      &.sin-stared i.material-icons {
        color: $accent-color; 
      }
    }
  }
  & > .mdl-card__supporting-text.mdl-grid {
    margin:40px;
    width: calc(100% - 80px);
  }

  & > .mdl-card__actions {
    padding-left: 40px;
    border-top: 1px solid #cdcdcd;
  }
  
  .mdl-card__actions {
    border-top: 1px solid #cdcdcd;
  }

}


.sin-controller--data_pages .sin-card-layout > .mdl-card > .mdl-card__title > h3:before {
  content: image-url("60b_page.png");
}
.sin-controller--transformations .sin-card-layout > .mdl-card > .mdl-card__title > h3:before {
  content: image-url("60b_data.png");
}
.sin-controller--queriable_data_stores .sin-card-layout > .mdl-card > .mdl-card__title > h3:before {
  content: image-url("60b_datastore.png");
}
.sin-controller--data_distributions .sin-card-layout > .mdl-card > .mdl-card__title > h3:before {
  content: image-url("60b_file.png");
}
.sin-controller--queries .sin-card-layout > .mdl-card > .mdl-card__title > h3:before {
  content: image-url("60b_query.png");
}

.sin-qds-list {
  max-height: 120px;
  overflow: scroll;
  
  li .mdl-list__item-icon {
    background: transparent image-url("60_datastore.png") no-repeat left;
    background-size: contain;
  }
}

.sin-date-infos {
  font-size: small;
  color: #ABABAB;
  text-align: right;
  padding-top: 0.5em;
  padding-right: 1em;
}

.sin-old-version {
  .sin-date-infos {
    padding-top: 5px;
    color: black;
    background: $accent-color;
    .mdl-button {
      margin-top: -6px;
      margin-left: 5px;
    }
  }
}

.sin-query-form textarea {
  font-family: monospace;
}

// TODO see if it's better
.sin-description p {
  text-align: justify;
}


.sin-datapage-qds table td {
  white-space: normal;
  .mdl-button {
    height: auto;
  }
}<commit_msg>It's better this way<commit_after>// Place all the styles related to the Things controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

$primary-color: #5264AE;
$accent-color: #FF609A;

.sin-main-layout > section.sin-card-layout > .mdl-card {
  width: 100%;
}

@media (max-width: 839px) {
  .sin-card-layout .mdl-card {
    border-radius:0;
  }
}

.sin-card-layout > .mdl-card {
  & > .mdl-card__title {
    background: #424242;
    // background: #424242 image-url("use_your_illusion.png");
    background-image: image-url("background_blue_explore_page.jpg");
    background-image: 
      linear-gradient(to bottom, transparent, transparent, rgba(0,0,0,0.25)),
      image-url("background_blue_explore_page.jpg");
    background-size: cover;
    padding:24px;
    align-items: flex-end;
    min-height: 10em;
    justify-content: space-between;

    h3, h4 {
      margin:0;
      a {
        color: white;
        text-decoration: none;
        &:not(.sin-stars):hover {
          text-decoration: underline;
        }
      }
    }

    h3 {
      margin-top: 2em;
    }

    h3:before {
      position: absolute;
      top: 16px;
      left: 16px;
    }

    h4 {
      font-size: large;
      text-align: right;
    }

    .sin-lock {
      position:absolute;
      top: 1em;
      right: 1em;
      i.material-icons {
        font-size: 3em;
      }
    }

    .sin-stars {
      display: inline-block;
      margin-left: 1em;
      background: $primary-color;
      border-radius: 5px;
      padding: 0px 1em 2px 1em;
      line-height: 26px;
      box-shadow: 0 0 10px rgba(0,0,0,0.5) inset;
      &:hover {
        background: darken($primary-color, 10%);
      }
      i.material-icons {
        font-size: 16px;
        position: relative;
        top: 2px;
        right: 6px;
      }

      &.sin-stared i.material-icons {
        color: $accent-color; 
      }
    }
  }
  & > .mdl-card__supporting-text.mdl-grid {
    margin:40px;
    width: calc(100% - 80px);
  }

  & > .mdl-card__actions {
    padding-left: 40px;
    border-top: 1px solid #cdcdcd;
  }
  
  .mdl-card__actions {
    border-top: 1px solid #cdcdcd;
  }

}


.sin-controller--data_pages .sin-card-layout > .mdl-card > .mdl-card__title > h3:before {
  content: image-url("60b_page.png");
}
.sin-controller--transformations .sin-card-layout > .mdl-card > .mdl-card__title > h3:before {
  content: image-url("60b_data.png");
}
.sin-controller--queriable_data_stores .sin-card-layout > .mdl-card > .mdl-card__title > h3:before {
  content: image-url("60b_datastore.png");
}
.sin-controller--data_distributions .sin-card-layout > .mdl-card > .mdl-card__title > h3:before {
  content: image-url("60b_file.png");
}
.sin-controller--queries .sin-card-layout > .mdl-card > .mdl-card__title > h3:before {
  content: image-url("60b_query.png");
}

.sin-qds-list {
  max-height: 120px;
  overflow: scroll;
  
  li .mdl-list__item-icon {
    background: transparent image-url("60_datastore.png") no-repeat left;
    background-size: contain;
  }
}

.sin-date-infos {
  font-size: small;
  color: #ABABAB;
  text-align: right;
  padding-top: 0.5em;
  padding-right: 1em;
}

.sin-old-version {
  .sin-date-infos {
    padding-top: 5px;
    color: black;
    background: $accent-color;
    .mdl-button {
      margin-top: -6px;
      margin-left: 5px;
    }
  }
}

.sin-query-form textarea {
  font-family: monospace;
}

// TODO see if it's better
.sin-description p {
  text-align: justify;
}


.sin-datapage-qds table td,
.mdl-card table td {
  white-space: normal;
  .mdl-button {
    height: auto;
  }
}
{'fraction_non_alphanumeric': 0.1493604731123642, 'fraction_numerical': 0.030257186081694403, 'mean_word_length': 2.358891454965358, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 45, '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': '3609198', 'n_tokens_mistral': 2933, 'n_tokens_neox': 2742, 'n_words': 508}