elabs 4.0.0 → 5.0.0

data/app/assets/stylesheets/elabs/app/elements/_errors.scss

@@ -0,0 +1,15 @@
+.error {
+  @extend %card;
+  background-color: $error-background-color;
+  color: $error-color;
+  padding: $spacer-small;
+
+  h2 {
+    @include font-size('h5');
+  }
+
+  // Responsive variations ------------
+  @include respond-to('small-up') {
+    padding: $spacer-medium;
+  }
+}

data/app/assets/stylesheets/elabs/app/elements/_filter_link.scss

@@ -0,0 +1,23 @@
+// Filter links -----------------------
+.filter-link {
+  display: flex;
+  padding: $spacer-small $spacer-tiny;
+  color: $page-header-links-color;
+  text-decoration: none;
+
+  .link {
+    text-align: left;
+    flex-grow: 1;
+  }
+
+  .icon {
+    flex: none;
+    line-height: inherit;
+  }
+
+  &:hover {
+    background-color: $filter-links-panel-hover-bg;
+    text-decoration: none;
+    color: darken($page-header-links-color, 15%);
+  }
+}

data/app/assets/stylesheets/elabs/app/elements/_fixed_links.scss

@@ -0,0 +1,19 @@
+// The links that are always visible on the page like "report this" and "go to top"
+.fixed-link {
+  display: inline-block;
+  position: fixed;
+  bottom: $spacer-small;
+  padding: $spacer-tiny 0;
+  box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2);
+  border-radius: $fixed-links-border-radius;
+
+  &.to-top {
+    left: $spacer-small;
+    background-color: $fixed-link-to-top-background;
+  }
+
+  &.to-report {
+    left: #{$spacer-small * 2 + $spacer-large };
+    background-color: $fixed-link-to-report-background;
+  }
+}

data/app/assets/stylesheets/elabs/app/elements/_forms.scss

@@ -0,0 +1,123 @@
+[type='color'],
+[type='date'],
+[type='datetime-local'],
+[type='email'],
+[type='month'],
+[type='number'],
+[type='password'],
+[type='search'],
+[type='tel'],
+[type='text'],
+[type='time'],
+[type='url'],
+[type='week'],
+select,
+textarea {
+  background-color: $form-input-background-color;
+  box-shadow: none;
+  line-height: 1em;
+  border: $form-input-border;
+  border: {
+    bottom: 3px solid $form-input-border-color;
+    radius: 0;
+  }
+  padding: $spacer-tiny;
+  width: 100%;
+
+  &:focus {
+    border-color: $form-input-focus-border-color;
+  }
+
+  &[disabled] { /* stylelint-disable-line selector-no-qualifying-type */
+    border-style: dashed;
+  }
+}
+
+.textarea {
+
+  &--large {
+    min-height: 8em;
+
+    // Responsive variations
+    @include respond-to('small-up') {
+      min-height: 12em;
+    }
+  }
+}
+
+/* stylelint-disable selector-max-type */
+
+form {
+
+  .field {
+
+    &:not(:first-child) {
+      margin-top: $spacer-medium-plus;
+    }
+
+    > label,
+    > .field_with_errors {
+      font-weight: 500;
+    }
+
+    .field_with_errors {
+      color: $color-error;
+    }
+
+    &-input {
+
+      label {
+        font-weight: 100;
+      }
+
+      &--datetime {
+        display: flex;
+      }
+    }
+
+    &-hint {
+      @include font-size('small');
+    }
+
+    // Honeypots ----------------------
+    &#form-body {
+
+      textarea {
+        height: 2em;
+        min-height: 2em;
+      }
+    }
+
+    // Responsive variations ----------
+    @include respond-to('small-up') {
+      @include grid(4, $spacer-small);
+
+      &:not(:first-child) {
+        margin-top: $spacer-small;
+      }
+
+      > label,
+      > .field_with_errors {
+        grid-column: 1 / span 1;
+        padding-top: $spacer-tiny;
+        text-align: right;
+      }
+
+      &-input {
+        grid-column: 2 / span 3;
+      }
+    }
+  }
+
+  .actions {
+    background-color: $form-actions-background;
+    margin: $spacer-small (-$spacer-small) (-$spacer-small) (-$spacer-small);
+    padding: $spacer-small;
+
+    &-buttons {
+      text-align: right;
+    }
+  }
+}
+
+/* stylelint-enable selector-max-type */

data/app/assets/stylesheets/elabs/app/elements/_icons.scss

@@ -0,0 +1,74 @@
+/* stylelint-disable rule-empty-line-before */
+.#{$fa-css-prefix}-amount:before { content: fa-content($fa-var-hashtag); }
+.#{$fa-css-prefix}-angry:before { content: fa-content($fa-var-angry); }
+.#{$fa-css-prefix}-announcement:before { content: fa-content($fa-var-bullhorn); }
+.#{$fa-css-prefix}-archive:before { content: fa-content($fa-var-archive); }
+.#{$fa-css-prefix}-arrow-up:before { content: fa-content($fa-var-arrow-up); }
+.#{$fa-css-prefix}-bars:before { content: fa-content($fa-var-bars); }
+.#{$fa-css-prefix}-bell:before { content: fa-content($fa-var-bell); }
+.#{$fa-css-prefix}-book:before { content: fa-content($fa-var-book); }
+.#{$fa-css-prefix}-bug:before { content: fa-content($fa-var-bug); }
+.#{$fa-css-prefix}-calendar-check:before { content: fa-content($fa-var-calendar-check); }
+.#{$fa-css-prefix}-calendar-times:before { content: fa-content($fa-var-calendar-times); }
+.#{$fa-css-prefix}-calendar:before { content: fa-content($fa-var-calendar); }
+.#{$fa-css-prefix}-check:before,
+.#{$fa-css-prefix}-is-sfw:before { content: fa-content($fa-var-check); }
+.#{$fa-css-prefix}-chevron-down:before { content: fa-content($fa-var-chevron-down); }
+.#{$fa-css-prefix}-circle:before { content: fa-content($fa-var-circle); }
+.#{$fa-css-prefix}-code-branch:before { content: fa-content($fa-var-code-branch); }
+.#{$fa-css-prefix}-code:before { content: fa-content($fa-var-code); }
+.#{$fa-css-prefix}-cog:before { content: fa-content($fa-var-cog); }
+.#{$fa-css-prefix}-cogs:before { content: fa-content($fa-var-cogs); }
+.#{$fa-css-prefix}-comment:before { content: fa-content($fa-var-comment); }
+.#{$fa-css-prefix}-cut:before { content: fa-content($fa-var-cut); }
+.#{$fa-css-prefix}-dot-circle:before { content: fa-content($fa-var-dot-circle); }
+.#{$fa-css-prefix}-download:before { content: fa-content($fa-var-download); }
+.#{$fa-css-prefix}-ellipsis-h:before { content: fa-content($fa-var-ellipsis-h); }
+.#{$fa-css-prefix}-exclamation-circle:before { content: fa-content($fa-var-exclamation-circle); }
+.#{$fa-css-prefix}-exclamation:before { content: fa-content($fa-var-exclamation); }
+.#{$fa-css-prefix}-experience:before { content: fa-content($fa-var-flask); }
+.#{$fa-css-prefix}-eye-slash:before { content: fa-content($fa-var-eye-slash); }
+.#{$fa-css-prefix}-eye:before { content: fa-content($fa-var-eye); }
+.#{$fa-css-prefix}-file:before { content: fa-content($fa-var-file); }
+.#{$fa-css-prefix}-filter:before { content: fa-content($fa-var-filter); }
+.#{$fa-css-prefix}-flag:before { content: fa-content($fa-var-flag); }
+.#{$fa-css-prefix}-font:before { content: fa-content($fa-var-font); }
+.#{$fa-css-prefix}-frown:before { content: fa-content($fa-var-frown); }
+.#{$fa-css-prefix}-github:before { content: fa-content($fa-var-github); }
+.#{$fa-css-prefix}-gitlab:before { content: fa-content($fa-var-gitlab); }
+.#{$fa-css-prefix}-globe:before { content: fa-content($fa-var-globe); }
+.#{$fa-css-prefix}-group:before { content: fa-content($fa-var-box); }
+.#{$fa-css-prefix}-home:before { content: fa-content($fa-var-home); }
+.#{$fa-css-prefix}-image:before { content: fa-content($fa-var-image); }
+.#{$fa-css-prefix}-infinity:before { content: fa-content($fa-var-infinity); }
+.#{$fa-css-prefix}-info:before { content: fa-content($fa-var-info); }
+.#{$fa-css-prefix}-language:before { content: fa-content($fa-var-language); }
+.#{$fa-css-prefix}-license:before { content: fa-content($fa-var-balance-scale); }
+.#{$fa-css-prefix}-lock:before { content: fa-content($fa-var-lock); }
+.#{$fa-css-prefix}-minus:before { content: fa-content($fa-var-minus); }
+.#{$fa-css-prefix}-nsfw:before { content: fa-content($fa-var-exclamation); }
+.#{$fa-css-prefix}-pen:before { content: fa-content($fa-var-pen); }
+.#{$fa-css-prefix}-pencil-alt:before { content: fa-content($fa-var-pencil-alt); }
+.#{$fa-css-prefix}-permalink:before { content: fa-content($fa-var-link); }
+.#{$fa-css-prefix}-plus:before { content: fa-content($fa-var-plus); }
+.#{$fa-css-prefix}-rss:before { content: fa-content($fa-var-rss); }
+.#{$fa-css-prefix}-sign-in-alt:before { content: fa-content($fa-var-sign-in-alt); }
+.#{$fa-css-prefix}-sign-out-alt:before { content: fa-content($fa-var-sign-out-alt); }
+.#{$fa-css-prefix}-sliders-h:before { content: fa-content($fa-var-sliders-h); }
+.#{$fa-css-prefix}-sort-down:before { content: fa-content($fa-var-sort-down); }
+.#{$fa-css-prefix}-sort-up:before { content: fa-content($fa-var-sort-up); }
+.#{$fa-css-prefix}-spinner:before { content: fa-content($fa-var-spinner); }
+.#{$fa-css-prefix}-star:before { content: fa-content($fa-var-star); }
+.#{$fa-css-prefix}-sticky-note:before { content: fa-content($fa-var-sticky-note); }
+.#{$fa-css-prefix}-tag:before { content: fa-content($fa-var-tag); }
+.#{$fa-css-prefix}-tags:before { content: fa-content($fa-var-tags); }
+.#{$fa-css-prefix}-times:before,
+.#{$fa-css-prefix}-is-nsfw:before { content: fa-content($fa-var-times); }
+.#{$fa-css-prefix}-trash:before { content: fa-content($fa-var-trash); }
+.#{$fa-css-prefix}-unlock:before { content: fa-content($fa-var-unlock); }
+.#{$fa-css-prefix}-upload:before { content: fa-content($fa-var-upload); }
+.#{$fa-css-prefix}-user:before { content: fa-content($fa-var-user); }
+.#{$fa-css-prefix}-users:before { content: fa-content($fa-var-users); }
+.#{$fa-css-prefix}-wrench:before,
+.#{$fa-css-prefix}-mime-type:before { content: fa-content($fa-var-wrench); }
+/* stylelint-enable rule-empty-line-before */

data/app/assets/stylesheets/elabs/app/{_medias.scss → elements/_medias.scss}

@@ -4,6 +4,8 @@ video {
 }
 
 .thumbnail {
+  @extend %card;
+  padding: $spacer-tiny;
 
   &--small {
     border-radius: $border-radius;

data/app/assets/stylesheets/elabs/app/{_modals.scss → elements/_modals.scss}

@@ -13,18 +13,17 @@
     left: 0;
     width: 100vw;
     height: 100vh;
-    background: transparentize($background-base, .5);
+    background: transparentize($modal-overlay-background-color, .5);
     z-index: #{$zindex-modal - 1};
   }
 
   &__window {
     position: fixed;
-    min-width: 50%;
-    max-width: 75%;
+    width: 95%;
     left: 50%;
     transform: translateX(-50%);
     top: 10vh;
-    background-color: $background-base;
+    background-color: $modal-background-color;
     border: $border-default;
     z-index: $zindex-modal;
 
@@ -53,5 +52,10 @@
         text-align: right;
       }
     }
+
+    // Responsive variations ----------
+    @include respond-to('small-up') {
+      width: 75%;
+    }
   }
 }

data/app/assets/stylesheets/elabs/app/elements/_nsfw.scss

@@ -0,0 +1,41 @@
+.nsfw {
+  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gwfCiUV0msLOwAAAGRJREFUOMut07kNACEQQ9E/xPRfKQVstBJCHHPYsfXkxIY/3VMyJQYMU2KehSHsBYaxG5jCTmAa24ElbAXL2AxKsB+UYQBNiQG9KTHPwhH9elNiNzCFncA0tgNL2AqWsRmUYAAfgBoTKoJcDtUAAAAASUVORK5CYII=');
+}
+
+.nsfw,
+.locked {
+
+  &--large {
+    @extend %card;
+    padding: $spacer-small;
+
+    // Responsive variation -----------
+    @include respond-to('small-up') {
+      padding: $spacer-medium;
+    }
+  }
+
+  &--full {
+    @extend %card;
+    padding: $spacer-small;
+    border: none;
+
+    // Responsive variation -----------
+    @include respond-to('small-up') {
+      padding: $spacer-large;
+    }
+  }
+
+  &__title {
+    @include font-size('h3');
+
+    // Responsive variation -----------
+    @include respond-to('small-up') {
+      @include font-size('h2');
+    }
+  }
+
+  &__subtitle {
+    font-size: .8em;
+  }
+}

data/app/assets/stylesheets/elabs/app/{_tables.scss → elements/_tables.scss}

@@ -6,11 +6,11 @@ table {
   tr {
 
     &:nth-child(even) {
-      background-color: darken($background-base, 10%);
+      background-color: $table-row-even-background-color;
     }
 
     &:hover {
-      background-color: darken($background-base, 5%);
+      background-color: $table-row-hover-background-color;
     }
   }
 

data/app/assets/stylesheets/elabs/app/elements/_tabs.scss

@@ -0,0 +1,73 @@
+.tabs {
+
+  &__tabs-list {
+    display: flex;
+    list-style-type: none;
+    margin-bottom: 0;
+    padding: 0;
+    border-bottom: 1px solid $tab-border-color;
+
+    &__tab {
+      padding: $spacer-tiny;
+      border: {
+        top: 1px solid $tab-border-color;
+        right: 1px solid $tab-border-color;
+        bottom: 3px solid transparent;
+        left: 1px solid $tab-border-color;
+      }
+
+      &:not(:first-child) {
+        border-left: none;
+      }
+
+      &.active {
+        border-color: $tab-border-color;
+        background: $tab-active-background-color;
+      }
+
+      a {
+        text-decoration: none;
+        color: $color-base;
+      }
+
+      &:hover {
+        background-color: $tab-hover-background-color;
+      }
+
+      // Responsive variations --------
+      @include respond-to('small-up') {
+        padding: $spacer-small $spacer-small-plus;
+      }
+    }
+  }
+
+  &__tab-content {
+
+    &__title {
+      display: flex;
+      margin: $spacer-small 0 $spacer-medium 0;
+
+      h2 {
+        @include font-size('h4');
+        flex-grow: 1;
+      }
+
+      .actions {
+        flex: none;
+        text-align: right;
+      }
+    }
+
+    &.tab--initialized {
+      display: none;
+
+      &.active {
+        display: block;
+      }
+    }
+  }
+
+  &.is-section:not(:first-child) {
+    margin-top: $spacer-large;
+  }
+}

data/app/assets/stylesheets/elabs/app/helpers/_cards.scss

@@ -0,0 +1,80 @@
+// Base style for a card --------------
+%card {
+  border: $card-border;
+  border-radius: $card-border-radius;
+  background-color: $card-background-color;
+  margin-bottom: $spacer-medium;
+
+  // Responsive variations ------------
+  @include respond-to('small-up') {
+    margin-bottom: $spacer-large;
+  }
+}
+
+// Base style for classifier cards ----
+%classifier-card {
+  @extend %card;
+  margin-bottom: $spacer-small;
+  padding: $classifier-card-padding;
+
+  .content {
+    padding: $classifier-card-content-vertical-padding 0;
+
+    .btn {
+      text-decoration: none;
+
+      &--block {
+        display: flex;
+
+        .icon {
+          flex: none;
+        }
+
+        .text {
+          flex-grow: 1;
+          text-align: center;
+        }
+
+        &:not(:last-child) {
+          margin-bottom: $spacer-tiny;
+        }
+      }
+    }
+  }
+
+  header {
+    display: flex;
+    margin-bottom: $spacer-medium;
+
+    .icon {
+      padding: 0;
+      flex: none;
+      margin-right: $spacer-tiny;
+
+      img {
+        border-radius: $border-radius;
+      }
+    }
+
+    h3 {
+      margin: 0;
+      line-height: 1em;
+    }
+
+    ul.information {
+      @include font-size('small');
+      list-style-type: none;
+      margin: 0;
+      padding: 0;
+
+      li {
+        display: inline;
+        margin-left: $spacer-tiny;
+
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+}