frontend/src/styles/components/task.scss

.task-view {
  // This is a workaround to hide the llama background from the top on the task detail page
  margin-top: -1.5em;
  padding: 1em;
  background-color: $light-background;

  .subtitle {
    color: $grey;

    a {
      color: $grey-dark;
    }
  }

  .has-top-border {
    border-top: 1px solid lighten($grey, 35%);
    padding-top: .5em;
  }

  h3 .button {
    vertical-align: middle;
  }

  .icon.is-grey {
    color: lighten($grey, 5%);
  }

  .heading {
    display: flex;
    justify-content: space-between;
    text-transform: none;
    align-items: center;

    .title {
      margin-bottom: 0;

      &.input {
        // 1.8rem is the font-size, 1.125 is the line-height, .3em padding everywhere, 1px border around the whole thing.
        min-height: calc(1.8rem * 1.125 + .6em + 2px);
      }
    }

    .title.task-id {
      color: lighten($grey, 25%);
      white-space: nowrap;
    }
  }

  .date-input {
    display: flex;
    align-items: center;

    a {
      color: $red;
      vertical-align: middle;
      padding-left: .5em;
      line-height: 1;
    }
  }

  table {
    table-layout: fixed;

    td {
      overflow: hidden;
      word-break: break-all;
    }
  }

  .details {
    padding-bottom: 0.75em;
    flex-flow: row wrap;

    .detail-title {
      display: block;
      color: lighten($grey, 15%);
    }

    .none {
      font-style: italic;
    }

    // Break after the 2nd element
    .column:nth-child(2n) {
      page-break-after: always; // CSS 2.1 syntax
      break-after: always; // New syntax
    }

    &.labels-list, .assignees {
      .multiselect__tags {
        padding: 3px 0 0 3px;
        border: none;
        background: transparent;
      }

      .multiselect__input, .multiselect__single {
        width: auto !important;
        margin: 0;
        padding: .35em !important;
        position: relative !important;
        background: transparent;
        max-width: 100%;
      }

      .multiselect__placeholder {
        display: none;
      }

      .multiselect__select {
        // We may need to enable this since it may also be responsable for showing the loading spinner
        display: none;
      }

      .multiselect__content-wrapper {
        border: none;
      }
    }

    &.description .editor {

      &.is-pulled-up {
        margin-top: -3.5rem;
      }

      .tabs {
        margin-bottom: 0;

        ul {
          border-bottom: none;
        }
      }
    }
  }

  .details, .heading {
    .input:not(.has-defaults),
    .textarea,
    .select:not(.has-defaults) select {
      border-color: transparent;
      background: transparent;
      cursor: pointer;
      transition: all $transition-duration;

      &::placeholder {
        color: $text-light;
        opacity: 1;
        font-style: italic;
      }

      &:not(:disabled) {
        &:hover, &:active {
          background: $input-background-color;
          border-color: $input-border-color;
          cursor: text;
        }

        &:focus {
          background: $input-background-color;
          border-color: $input-focus-border-color;
        }
      }
    }

    .select:not(.has-defaults):after {
      opacity: 0;
    }

    .select:not(.has-defaults):hover:after {
      opacity: 1;
    }
  }

  .attachments {
    margin-bottom: 0;

    table tr:last-child td {
      border-bottom: none;
    }
  }

  .action-buttons {
    a.button {
      width: 100%;
      margin-bottom: .5em;
      justify-content: left;
    }
  }

  .created {
    font-size: .75rem;
    color: $grey;
    text-align: right;
  }
}

.task-view-container {
  padding-bottom: 1em;
}

.is-done {
  background: $green;
  color: $white;
  padding: .5em;
  font-size: 1.5em;
  margin-left: .5em;
  font-weight: bold;
  line-height: 1;
  border-radius: 4px;
  text-align: center;
}

.modal-container .task-view {
  border-radius: $radius;
  padding: 1em;
  color: $text;

  .task {
    max-width: 500px;
  }

  @media screen and (max-width: 800px) {
    border-radius: 0;
    padding-top: 2rem;
  }
}