@import "main.less";

/* Buttons */
.new-project-btn {
  @button-height: 35px;

  display: inline-block;
  position: absolute;
  bottom: 40px;
  right: 40px;
  padding: 0 20px;
  height: @button-height;
  line-height: @button-height;
  font-size: 12pt;

  background: #679436;
  color: #eee;
  border: 1px solid #507830;

  .border-radius-def(@standard-border-radius);
  .clickable;
  .transition-def(all, @transition-length);
}

.new-project-btn:hover {
  background: #73ac45;
}

.new-project-btn:active {
  background: #5c8835;
}

/* Side menu */
.filter-menu {
  display: block;

  background: #0761b1;
  border: 1px solid #06326b;
  color: #eee;

  text-align: center;

  .border-radius-def(@standard-border-radius);
  overflow: hidden;

  margin-bottom: 20px;

  .project-filters {
    display: block;
    overflow: hidden;
    margin-left: -2px;

    div {
      display: inline-block;
      width: 33.3%;
      margin-right: -4px;
      padding: 10px @global-padding;

      font-size: 12pt;
      border-right: 1px solid #06326b;

      .clickable;
      .transition-def(background, @transition-length);
    }

    div:last-of-type {
      border: 0;
    }

    div:hover {
      background: #0c60bf;
    }

    div:active, div.active {
      background: #073d7d;
    }
  }
}

/* Message shown when no projects present */
.no-projects-alert {
  display: none;
  position: relative;
  padding-left: 50px;
  span {
    position: absolute;
    top: 11px;
    left: 10px;
    bottom: 10px;
    font-size: 20pt;
  }
}

/* List of simulation projects */
.project-list {
  display: block;
  font-size: 12pt;
  border: 0;

  .list-head, .list-body .project-row {
    display: block;
    position: relative;
  }

  .list-head div, .list-body .project-row div {
    padding: 0 10px;
    display: inline-block;
  }

  .list-head {
    font-weight: bold;

    div {
      margin-right: -4px; // Address default margin between inline-blocks
    }
  }

  .project-row {
    background: #f8f8f8;
    border: 1px solid #b6b6b6;
    height: 40px;
    line-height: 40px;
    clear: both;

    .transition-def(background, @transition-length);
    .clickable;
  }

  .project-row:hover {
    background: #fff;
  }

  .project-row:active {
    background: #cccccc;
  }

  .project-row:not(:first-of-type) {
    margin-top: -1px;
  }

  // Sizing of table columns
  .project-row, .list-head {
    div:first-of-type {
      width: 50%;
    }

    div:nth-of-type(2) {
      width: 30%;
    }

    div:last-of-type {
      width: 20%;

      span {
        margin-right: 10px;
      }
    }
  }

  .project-row.active {
    border-bottom: 0;
    background: #3442b1;
    color: #eee;
  }

  .project-row.active::before {
    //noinspection CssNoGenericFontName
    font-family: 'Glyphicons Halflings';
    content: "\2212";
    font-size: 14pt;
    position: absolute;
    top: 0;
    right: 10px;
  }

  .project-view {
    padding: 10px;
    overflow: hidden;
    border: 1px solid #b6b6b6;
    border-top: 0;

    background: #3442b1;
    color: #eee;

    .participants {
      display: inline-block;
      float: left;
    }

    .access-buttons {
      display: inline-block;
      float: right;

      .inline-btn {
        margin-left: 10px;
      }

      .open {
        background: #e38829;
      }

      .open:hover {
        background: #ff992e;
      }

      .open:active {
        background: #ba6f21;
      }

      .edit {
        background: #2c3897;
      }

      .edit:hover {
        background: #3a4ac8;
      }

      .edit:active {
        background: #242d7a;
      }
    }
  }
}

.inline-btn {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  font-size: 10pt;
  width: 70px;

  text-transform: uppercase;
  text-align: center;

  color: #eee;

  .clickable;
  .transition-def(background, @transition-length);
}

.projects-window {
  width: 600px;
  height: 400px;

  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;

  .border-radius-def(5px);
  overflow: hidden;

  .window-body {
    width: 100%;
    height: 340px;

    padding: 10px;

    background: rgba(230, 230, 230, 0.9);

    .window-heading {
      font-size: 20pt;
      color: #000000;

      .user-select-def;

      font-weight: bold;

      padding-left: 5px;
    }

    .project-name-form, .participant-add-form {
      margin: 20px;

      input {
        width: 300px;
      }

      label {
        padding-right: 5px;
        width: 40px;
        text-align: right;

        .user-select-def;
      }
    }

    .participants-table-label {
      display: block;
      padding-left: 20px;
      margin-bottom: 5px;

      .user-select-def;
    }

    .participants-table {
      background: #ffffff;
      .border-radius-def(5px);

      margin: 0 20px;

      max-height: 135px;
      overflow: auto;

      .participant-row {
        height: 40px;
        line-height: 40px;

        div {
          display: inline-block;
          margin-right: -4px; // Address default margin between inline-blocks
        }

        .participant-name {
          padding-left: 10px;
          width: 60%;
        }

        .participant-level {
          width: 30%;

          .user-select-def;

          div {
            display: inline-block;

            width: 25px;
            height: 25px;

            padding: 5px;

            margin-right: 3px;

            cursor: pointer;

            .border-radius-def(5px);
            .transition-def(all, @transition-length);
          }

          div.active, div:hover {
            background-color: #415973;
            color: #eeeeee;
          }
        }

        .participant-remove {
          position: relative;
          width: 10%;
          text-align: right;
          padding-right: 10px;
        }

        .participant-remove div {
          top: 2px;
          right: 5px;
          cursor: pointer;
        }
      }
    }

    .participant-add-form {
      margin-top: 10px;
    }

    .participant-email-alert, .project-name-alert {
      position: absolute;
      bottom: 0;
      left: 20px;
      display: none;
    }
  }

  .window-footer {
    width: 100%;
    height: 60px;

    background: rgba(56, 56, 56, 0.9);

    padding: 12px 10px;

    .btn.pull-left {
      margin-right: 5px;
    }

    .btn.pull-right {
      margin-left: 5px;
    }
  }
}