@charset 'utf-8';

@import 'settings';
@import 'foundation';
@import 'motion-ui';

// Global styles
@include foundation-global-styles;
@include foundation-forms;
@include foundation-typography;

// Grids (choose one)
@include foundation-xy-grid-classes;
// @include foundation-grid;
// @include foundation-flex-grid;

// Generic components
@include foundation-button;
@include foundation-button-group;
@include foundation-close-button;
@include foundation-label;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-switch;
@include foundation-table;
// Basic components
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-callout;
@include foundation-card;
@include foundation-dropdown;
@include foundation-pagination;
@include foundation-tooltip;

// Containers
@include foundation-accordion;
@include foundation-media-object;
@include foundation-orbit;
@include foundation-responsive-embed;
@include foundation-tabs;
@include foundation-thumbnail;
// Menu-based containers
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-accordion-menu;
@include foundation-drilldown-menu;
@include foundation-dropdown-menu;

// Layout components
@include foundation-off-canvas;
@include foundation-reveal;
@include foundation-sticky;
@include foundation-title-bar;
@include foundation-top-bar;

// Helpers
@include foundation-float-classes;
@include foundation-flex-classes;
@include foundation-visibility-classes;
// @include foundation-prototype-classes;

// Motion UI
@include motion-ui-transitions;
@include motion-ui-animations;

@mixin clearfix {
  &:after {
    content: '';
    display: table;
    clear: both;
  }
}

html,
body {
  height: 100%;
  //overflow: hidden;

  .hotkey-listener {
    height: 100%;
  }

  > .ember-view {
    height: 100%;
    > .ember-view {
      height: 100%;
    }

    background: rgba(224, 224, 224, 1);
    background: -moz-linear-gradient(
      left,
      rgba(224, 224, 224, 1) 0%,
      rgba(255, 255, 255, 1) 20%,
      rgba(255, 255, 255, 1) 80%,
      rgba(224, 224, 224, 1) 100%
    );
    background: -webkit-gradient(
      left top,
      right top,
      color-stop(0%, rgba(224, 224, 224, 1)),
      color-stop(20%, rgba(255, 255, 255, 1)),
      color-stop(80%, rgba(255, 255, 255, 1)),
      color-stop(100%, rgba(224, 224, 224, 1))
    );
    background: -webkit-linear-gradient(
      left,
      rgba(224, 224, 224, 1) 0%,
      rgba(255, 255, 255, 1) 20%,
      rgba(255, 255, 255, 1) 80%,
      rgba(224, 224, 224, 1) 100%
    );
    background: -o-linear-gradient(
      left,
      rgba(224, 224, 224, 1) 0%,
      rgba(255, 255, 255, 1) 20%,
      rgba(255, 255, 255, 1) 80%,
      rgba(224, 224, 224, 1) 100%
    );
    background: -ms-linear-gradient(
      left,
      rgba(224, 224, 224, 1) 0%,
      rgba(255, 255, 255, 1) 20%,
      rgba(255, 255, 255, 1) 80%,
      rgba(224, 224, 224, 1) 100%
    );
    background: linear-gradient(
      to right,
      rgba(224, 224, 224, 1) 0%,
      rgba(255, 255, 255, 1) 20%,
      rgba(255, 255, 255, 1) 80%,
      rgba(224, 224, 224, 1) 100%
    );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#e0e0e0', GradientType=1 );
  }

  div#root {
    height: 100%;
  }
}

.react-datepicker-wrapper {
  display: block !important;
}

p.input-note {
  font-style: italic;
  font-size: 0.75rem;
  color: #888888;
}

button#show-task-list {
  display: none;
}

textarea {
  height: 165px;
}

i.fi {
  font-family: FontAwesome, 'Helvetica Neue', 'Helvetica', Helvetica, Arial,
    sans-serif;
}

i.fi:before {
  display: inline-block;
  width: 18px;
}

label[for] {
  display: inline-block;
  margin-left: 0.44rem;
  margin-right: 0.44rem;
  margin-bottom: 0;
  vertical-align: baseline;
}

.top-bar {
  flex-wrap: nowrap;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 100;
  height: 2.8rem;
  padding: 0;

  .top-bar-left {
    flex: 0 1 auto;
    margin-right: auto;
  }

  .top-bar-right {
    flex: 0 1 auto;
    margin-left: auto;
  }

  background-color: #333;

  button {
    margin-bottom: 0px;
  }
  li.mobile-only {
    display: none;
  }
  .title-area {
    float: left;
  }
  // Override some default foundation styles.
  .name {
    h1 {
      a {
        width: auto;
        font-size: 1rem;
      }
    }
  }
  .dropdown.menu {
    & > li > a {
      padding: 0rem 1rem;
      color: #fff;
      line-height: 45px;
      font-size: 13px;
    }

    & > li.home a {
      font-size: 17px;
    }
  }
  ul {
    background-color: #333;
  }
  li#refresh-link {
    a.connected {
      color: #777777;
    }
  }
}

#footer {
  color: #888888;
  font-size: 0.75rem;
  text-align: center;
  padding-bottom: 90px;
  margin-top: 50px;
}

div.row {
  -webkit-overflow-scrolling: touch;

  p {
    font-size: 0.95rem;
  }
  li {
    font-size: 0.95rem;
    line-height: 1.25rem;
  }
  max-width: inherit;

  &.full-width {
    width: 100%;
    max-width: inherit;
    height: 100%;
    overflow: hidden;
    padding-top: 45px;

    &.horizontal {
      overflow-x: scroll;
      white-space: nowrap;
    }
  }
  &.standalone {
    overflow: auto;
    width: 100%;
    height: 100%;
    background-color: inherit;

    &.full-width {
      div.standalone-content {
        max-width: none;
        margin: 0 auto;
        padding: 0px 25px 0px 25px;
        position: relative;
      }
    }
    &.homepage {
      text-align: center;

      #about_logo {
        position: absolute;
        width: 100px;
        left: 31%;
        top: 35px;
      }

      p {
        font-size: 0.85rem;

        &.tagline {
          margin-top: 30px;
        }
      }

      div.features {
        margin-top: 50px;
      }

      div.promo_cell {
        display: inline-block;
        width: 250px;
        margin: 10px 20px;
        vertical-align: top;
        text-align: justify;

        i.fi {
          font-size: 2.5em;
          width: 50px;
          float: left;
        }

        span.headline {
          font-weight: 700;
          font-size: 1.1em;
          display: block;
        }
      }
    }

    ul.accordion {
      margin-left: 0px;
    }

    div.standalone-content {
      max-width: 950px;
      margin: 0 auto;
      padding: 45px 25px 0px 25px;
      position: relative;
    }

    ul,
    ol {
      margin-left: 30px;
      margin-bottom: 20px;
    }

    &.add-to-home-screen {
      text-align: center;
    }
  }
  .info-box {
    background: rgba(255, 255, 255, 0.8);
    border: 2px solid #eee;
    padding: 20px;
  }
}

#list,
#mobile-list {
  width: 25%;
  min-width: 350px;
  letter-spacing: normal;
  word-spacing: normal;
  vertical-align: top;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  float: left;

  .labeled-tag {
    background-color: #505050;
  }

  a {
    color: inherit;
  }

  .task {
    cursor: pointer;

    h5 {
      color: inherit;
      text-transform: uppercase;
      font-size: 0.75rem;
      line-height: 0.8rem;
      margin: 0;
    }

    p {
      margin-bottom: 0px;
      word-wrap: break-word;
    }

    p.tags {
      font-size: 0.8rem;
      margin: 5px 0px;
    }

    p.duedatetime {
      font-size: 0.8rem;
    }

    .task-item {
      padding: 0.9em 1em;
      min-height: 45px;

      .task-list-icon {
        display: inline-block;
        width: 45px;
        vertical-align: top;

        i {
          font-size: 3rem;
          width: 45px;
          margin-right: 5px;
          line-height: 48px;
        }
      }
      .task-list-item {
        display: inline-block;
        width: 220px;
        padding: 5px 0 0 0;
      }
    }
  }
}

#mobile-list {
  width: 100%;
  min-width: inherit;

  .task {
    .task-item {
      .task-list-item {
        width: auto;
      }
    }
  }
}

#task-details {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
  padding-bottom: 45px;

  h1 {
    font-size: 1.75rem;
  }
  & > div {
    padding-left: 15px;
    padding-right: 25px;
  }
  div.tags {
    margin-bottom: 20px;
  }
  ul.annotation_list {
    font-size: 0.876rem;
    word-wrap: break-word;
    word-break: break-all;

    span.date {
      font-weight: 700;
    }
    li {
      margin-bottom: 10px;
    }
    span.annotation_tools {
      float: left;
    }
  }
  #task-action-bar {
    padding-left: 0px;
    padding-right: 0px;
    margin-bottom: 25px;

    #task-actions {
      list-style: none;
      margin: 0;
      padding: 0;
      display: table;
      width: 100%;
      height: 2rem;

      li {
        background-color: #c0c0c0;
        border-right: 1px solid #a0a0a0;
        display: table-cell;
        text-align: center;
        float: none;
        line-height: 2rem;
        cursor: pointer;

        &:hover {
          background-color: #b0b0b0;

          a {
            color: #f0f0f0;
          }
        }

        a {
          color: #303030;
          font-size: 0.8rem;
          line-height: 2rem;
        }
      }
    }
  }
  #task-header {
    & > div {
      margin-left: 15px;
    }
  }

  table.details {
    width: 100%;
    border: 1px solid #b0b0b0;
    border-radius: 10px;
    border-collapse: inherit;

    thead,
    tbody,
    tfoot {
      border: inherit;
      background-color: inherit;
    }

    th {
      text-align: left;
      vertical-align: top;
      line-height: 18px;
      font-size: 10px;
    }
    td {
      p {
        font-size: 14px;
        margin-bottom: 0.75rem;
      }
    }
  }
  div.task-content-body {
    margin-right: inherit;

    ul.depends_tickets {
      li.completed,
      li.deleted {
        text-decoration: line-through;
      }
    }
  }
}

div.reveal-modal {
  div.row {
    margin-top: 0;
  }
}

.growl {
  opacity: 0.95;
}
div.growl-message {
  a {
    color: inherit;
    text-decoration: underline;
    font-style: italic;
  }
}

table.log {
  width: 100%;

  tr.error {
    td.message {
      color: #a02020;
    }
  }
  tr.info {
    td.message {
      font-style: italic;
    }
  }
}

span {
  &.project {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.8em;
  }
}

div.block.error {
  background-color: #ffeeee;
  border: 1px solid #ff0000;
  padding: 15px;
  margin-bottom: 10px;
  box-shadow: 3px 3px 3px #aaa;

  *:last-child {
    margin-bottom: 0px;
  }
}
div.block.warning {
  border: 1px solid #ffff00;
  background-color: #ffffdd;
  padding: 15px;
  margin-bottom: 10px;
  box-shadow: 3px 3px 3px #aaa;

  *:last-child {
    margin-bottom: 0px;
  }
}

code {
  color: #111111;
  font-size: 0.9em;
  line-height: 0.9em;
}
code.para {
  display: block;
  margin-bottom: 20px;
  margin-left: 20px;
}
pre.para {
  color: #111111;
  font-size: 1.1em;
  line-height: 1.3em;
  display: block;
  margin-bottom: 20px;
  margin-left: 20px;
}

div.alert-box.error {
  background-color: #aa0000;
  border-color: #aa0000;
}

input#filter-string {
  margin-bottom: 0px;
  height: 2em;
  border-radius: 15px;
  width: 100%;

  &.error {
    background-color: #ffcccc;
  }
}

.filter-error {
  color: #ff0000;
  font-weight: bold;
  padding: 5px;
}

.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 25;

  z-index: 500;
}
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 1rem 1.5rem;
  width: 90%;
  border-radius: 0.5rem;
  opacity: 100;
}

.labeled-tag {
  font-style: italic;
  border-radius: 5px;
  background-color: #d7ecfa;
  padding: 5px 0px 5px 10px;
  border: 1px solid rgba(10, 10, 10, 0.25);
  margin: 3px;
}

.labeled-icon-container {
  margin-right: 0.5rem;
}

div.details_table > table.details > tbody > tr > th {
  width: 100px;
}

@media screen and (max-width: 1000px) {
  div.details_table {
    width: 100%;
  }
  div.annotations_list {
    width: 100%;
  }
  #about_logo {
    left: 25% !important;
  }
}

@media screen and (max-width: 850px) {
  // Hide text content of buttons
  html,
  body {
    overflow: hidden;

    > .ember-view {
      background: #fff !important;
    }
  }
  #about_logo {
    display: block;
    margin: 0 auto;
    position: relative !important;
    left: auto !important;
    top: auto !important;
  }
  .row .row {
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
  }
  .column,
  .columns {
    padding-right: 0px;
    padding-left: 0px;
  }
  #mobile-list {
    .task {
      .task-item {
        position: relative;

        div.task-list-icon {
          position: absolute;
          top: 14.4px;
          left: 16px;
        }
        div.task-list-item {
          width: auto;
          margin-left: 50px;
        }
      }
    }
  }
  // Make buttons a little less padding-filled
  button {
    padding: 10px;
  }
  input[type='text'],
  input[type='password'],
  input[type='date'],
  input[type='datetime'],
  input[type='datetime-local'],
  input[type='month'],
  input[type='week'],
  input[type='email'],
  input[type='number'],
  input[type='search'],
  input[type='tel'],
  input[type='time'],
  input[type='url'],
  textarea {
    margin: 0 0 0.25rem 0;
  }
  div.row.standalone {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    padding: 0px 1px 50px 1px;

    div.standalone-content {
      padding-left: 0px;
      padding-right: 0px;
    }
  }

  // Hide task list by default
  #list {
    display: none;
  }
  #task-details {
    margin-left: 0px;
    padding-left: 0px;

    & > div {
      padding-left: 0px;
      padding-right: 0px;
    }
    .labeled-icon-container {
      .labeled-icon-label {
        display: none;
      }
      i.fi::before {
        font-size: 15px;
      }
    }
  }
  td {
    word-break: break-all;
  }
  pre {
    white-space: pre-line;
    word-break: break-all;
  }
  .reveal-modal {
    width: 100%;
    left: 0px;
    top: 50px;
    margin: 0px;
    padding: 5px;
  }
  .top-bar {
    li.desktop-only {
      display: none;
    }
    li.mobile-only {
      display: list-item;
    }
    button#show-task-list {
      display: inline-block;
    }
    .dropdown.menu {
      & > li > a {
        padding: 0rem 0.5rem;
      }
    }
    .labeled-icon-container {
      .labeled-icon-label {
        display: none;
      }
      i.fi::before {
        font-size: 15px;
      }
    }
  }
}

@media screen and (max-width: 500px) {
  .top-bar {
    li.home {
      span.site-name {
        display: none;
      }
    }
  }
}
