Tasks CSS with a bit of a similar layout to Todoist

[Evthestrike]

Screencast_20250410_214606.webm

This CSS only works in the query mode. #3419 was my first CSS attempt but this one feels a lot more usable! It works well on mobile too, especially with the drag-to-scroll on the task name. The date is sometimes too long to fit on the screen on mobile, so I'd be open to ideas on how to fix it. I think it would really help if #2923 were implemented. Maybe I'll take a stab at it.

Inspiration from #1962

[karlfrohlich]

Looks cool. Where can one find the css snippit for this?

[sgorblex]

Nice! Care to share the CSS code @Evthestrike?

[claremacrae]

Yes @Evthestrike, thanks for posting - please could you supply the CSS snippet?

That's the intention behind this "Show and tell" area...

Thanks in advance. 😄

[Evthestrike]

.block-language-tasks {
  .task-list-item .tasks-list-text {
    span:not(.task-description, .task-priority) {
      display: flex;

      span {
        display: block;
        clip-path: xywh(0 0 1.5em 100%);
        position: absolute;
        transition: clip-path 0.2s ease, position 0s allow-discrete 0.2s;
      }

      &:hover span {
        transition: clip-path 0.2s ease 0.5s, position 0s allow-discrete 0.5s;
        position: static;
        clip-path: xywh(0 0 100% 100%);
      }

      &::after {
        display: block;
        transition: all 0s allow-discrete 0.2s;
      }

      &:hover {
        &::after {
          visibility: hidden;
          position: absolute;
          transition: all 0s allow-discrete 0.5s;
        }
      }
    }

    &:not(:has(:hover)),
    &:has(.task-description:hover) {

      &:not(:has(.task-done, .task-cancelled, .task-due, .task-scheduled, .task-start)) .task-created,
      &:not(:has(.task-done, .task-cancelled, .task-due, .task-scheduled)) .task-start,
      &:not(:has(.task-done, .task-cancelled, .task-due)) .task-scheduled,
      &:not(:has(.task-done, .task-cancelled)) .task-due,
      .task-cancelled,
      .task-done {
        span {
          transition: clip-path 0.2s ease, position 0s allow-discrete 0.2s;
          position: static;
          clip-path: xywh(0 0 100% 100%);
        }

        &::after {
          visibility: hidden;
          position: absolute;
          transition: none;
        }
      }
    }


    .task-onCompletion::after {
      display: none;
      content: "🏁";
    }

    .task-id::after {
      display: none;
      content: "🆔";
    }

    .task-dependsOn::after {
      display: none;
      content: "⛔";
    }

    .task-recurring::after {
      display: none;
      content: "🔁";
    }

    .task-created::after {
      display: none;
      content: "➕";
    }

    .task-start::after {
      display: none;
      content: "🛫";
    }

    .task-scheduled::after {
      display: none;
      content: "⏳";
    }

    .task-done::after {
      display: none;
      content: "✅";
    }

    .task-cancelled::after {
      display: none;
      content: "❌";
    }

    .task-due::after {
      display: none;
      content: "📅";
    }
  }

  /* Priority as Checkbox Color and Remove the Emoji */

  .task-list-item[data-task-priority="high"]>input[type=checkbox]:not(:checked) {
    border-color: var(--color-red);
    background-color: color-mix(in srgb, var(--color-red) 5%, transparent 95%);
  }

  .task-list-item[data-task-priority="medium"]>input[type=checkbox]:not(:checked) {
    border-color: var(--color-orange);
    background-color: color-mix(in srgb, var(--color-orange) 5%, transparent 95%);
  }

  .task-list-item[data-task-priority="low"]>input[type=checkbox]:not(:checked) {
    border-color: var(--color-cyan);
    background-color: color-mix(in srgb, var(--color-cyan) 5%, transparent 95%);
  }

  .task-priority {
    display: none;
  }

  input[type=checkbox] {
    box-shadow: none !important;
  }


  /* Fix hover issues with Border theme */

  .task-extras {
    --background-modifier-hover: transparent;
    --link-decoration-hover: none;
  }

  /* Allow .tasks-list-text to shrink and take up remaining space responsively */

  .task-list-item {
    padding: 0px;
 
    .task-list-item-checkbox {
      position: absolute;
      top: calc(10px - 0.5 * var(--checkbox-size) + 0.5 * var(--line-height-customize) * 1lh);
      
    }

    .task-description {
      width: 100%;
      text-wrap: nowrap;
      overflow: scroll;
      mask-image: linear-gradient(to left, transparent, black 1.75rem);
      margin-right: 0.25rem;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .tasks-list-text {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      padding: 10px 0px !important;
      border-bottom: var(--hr-thickness) solid;
      border-color: var(--hr-color);
    }

    .task-extras {
      display: inline-flex;
      gap: 5px;
      position: absolute;
      right: 0px;
      margin-top: calc(-10px - var(--hr-thickness) - 1lh);

      background-color: var(--background-primary);

      .tasks-backlink {
        font-size: 0;

        a {
          font-size: var(--font-text-size);
        }
      }

      a,
      span {
        width: fit-content;
        height: fit-content;
        margin: 0px;
      }
    }
  }
}

.flatpickr-calendar {
  display: none !important;
}