Obsidian Tasks CSS redesign for "Create or Edit Task" modal

[lukeabbott]

I’m thoroughly enjoying Obsidian Tasks plugin – many thanks to @schemar for creating it!

I took a pass at redesigning the “Create or Edit Task” modal dialog to be a little cleaner and easier to navigate. Thought I’d share the CSS I ended up with to go from this…

…to this…

Here is the CSS:

.tasks-modal > form {
  margin: 0.15rem; /* To not cut off box-shadow of textbox focus state */
}

.tasks-modal > form > hr:nth-of-type(1) {
  display: none;
}

.tasks-modal-section:nth-of-type(1) label {
  display: none;
}

.tasks-modal-section:nth-of-type(1) > input[type="text"] {
  margin: 0.75rem 0 0.5rem;
  padding: 1.1rem 0.6rem;
  font-size: 1.25em;
}

.tasks-modal-section:nth-of-type(2),
.tasks-modal-section:nth-of-type(3),
.tasks-modal-date {
  display: flex;
  align-items: center;
}

.tasks-modal-section:nth-of-type(2) > label,
.tasks-modal-section:nth-of-type(3) > label,
.tasks-modal-date > label {
  width: 10em;
  text-align: right;
  padding-right: 1em;
  font-weight: 500;
}

.tasks-modal-section:nth-of-type(2) > label {
  flex: 1 1 auto;
}

.tasks-modal-section:nth-of-type(2) > input,
.tasks-modal-section:nth-of-type(3) > input,
.tasks-modal-date > input {
  flex: 0 0 15em;
}

.tasks-modal-section:nth-of-type(2) > code,
.tasks-modal-section:nth-of-type(3) > code,
.tasks-modal-date > code {
  margin-left: 1em;
  flex: 1 1 auto;
  color: var(--tx2);
}

.tasks-modal-section:nth-of-type(5) {
  display: flex;
  align-items: center;
  margin-left: 10em;
}

.tasks-modal-section:nth-of-type(5) > div {
  flex: 1 1 50%;
}

.tasks-modal-section:nth-of-type(5) > div:first-child {
  display: flex;
  align-items: center;
}

.tasks-modal-section:nth-of-type(5) > div:first-child > :first-child {
  margin-left: 0.75em;
}

.tasks-modal-section:nth-of-type(5) code {
  color: var(--tx2);
}

.tasks-modal-section button[type="submit"] {
  float: right;
}

I have other ideas for streamlining the UI of this modal even further, but they’d likely rely on editing the actual HTML and this is now good enough for me.

[takeo]

This is amazing, thank you.

[gapmiss]

Cool tweak … appreciate the lesson on how to use CSS “nth-of-type” selectors.

[Chr1sDr01d]

Hi, This is awesome & a lot cleaner CSS

Can you point me in the right direction as to where i can add this CSS?

[densi]

Hey, take a look at Step 1 and 2: How to customise your own Obsidian theme with CSS in 3 steps | by Project Eme | Medium

In your created obsidian.css you simply put the amazing css code posted by @lukeabbott

[Cito]

Note that the CSS is not compatible any more with Obsidian Tasks version since 1.17. But its also not necessary any more since the new versions now have a similar layout already by default.

[Ap3d]

Hi all, @Cito @ClareMacrae, I just upgraded to the latest version of the Tasks Plugin and I am seeing a horizontal layout, where the date fields for Recurs, Due, Scheduled, Starts and the radio button for Only Future dates are showing alongside each other, so I have to scroll horizontally to access them, It looks different than the capture included on the 1.17 release, wondering if I am missing something, any thoughts on how to troubleshoot this? Or if you could send me to the right place to get help with this potential bug I am getting?

[Cito]

@ap3d, please report Tasks plugin related issues here:

Issues · obsidian-tasks-group/obsidian-tasks

Since I don’t see the problems you mention in the latest release, I guess it’s interference with some of your plugins, themes or css snippets. You should rule that out and specify your exact setup (versions, OS etc.) when posting this bug.

[chokko]

@lukeabbott Could you please update your snippet to work with newer versions. Tasks dialog is still ugly as hell. I still experience very strong urge to remove the plugin and switch to the Dataview every time I see it.

[tophee]

As others have pointed out, the CSS-snippet in the OP no longer works:

[Anwen]

The snippet didn’t work anymore with tasks plugins updates. I’ve been looking to redo one to compact the task creation popup.
It’s not optimal at all I think, so if anyone has improvements and/or modifications to make, I’ll gladly take them.

.tasks-modal-priorities {
    display:inline-flex;
    grid-template-columns:auto;
    grid-column: auto;
    font-size: 10px;
    flex-wrap: wrap;
    width: auto;
    justify-items: start;
    justify-content: space-between;
}
.tasks-modal-section.tasks-modal-priorities label[for="priority-none"] {
    display: none;
}
.tasks-modal-section.tasks-modal-priorities label[for="priority-medium"] {
    margin-left: 0;
}
.modal-title {
    font-size: medium;
}
.modal {
    width: 600px ;
}
.tasks-modal input[type="text"] {
    width: auto;
}
.tasks-modal-dates {
    display:flow;
    column-gap: 0.5em;
    row-gap: 1px;
    font-size: small;
}
.tasks-modal-section + .tasks-modal-section > code {
    margin-top: 0px;
    margin-bottom: 5px;
    width: 45%;
    height: fit-content;
    width: fit-content;
}

.tasks-modal-section:not(.tasks-modal-priorities) label {
    font-size: small;
    display: none;
}

.tasks-modal-section #forwardOnly {
    display: none;
}

.tasks-modal > form {
    margin: 0rem; 
  }
  .tasks-modal-section:nth-of-type(2) > label,
  .tasks-modal-section:nth-of-type(3) > label,
  .tasks-modal-date > label {
    width: 6em !important;
    text-align: left !important;
    padding-right: 0em;
    margin-right: 0;
    font-weight: 500;
    font-size: small;
    
  }
  .tasks-modal-section:nth-of-type(3) > label,
  .tasks-modal-date {
    display: table;
    align-items: center;
    font-size: small;
  }
  .tasks-modal-section i {
    height: 0;
    color: transparent;
}
  .tasks-modal-section:nth-of-type(5) > div {
    flex: 1 1 50%;
    font-size: small;
  }
  
  .tasks-modal-section button[type="submit"] {
    width: 60%;
    margin-left: 20%;
  }
  .tasks-modal-section button[type="button"] {
    color: transparent;
    width: 10%;
    margin-left: 70px;
    margin-right: 0;
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;

  }

  .tasks-modal-section button[type="button"]:after {
    padding-left: 0;
    content: "❌";
    color: black;
    border-color: rgba(255, 0, 0, 0.637);
    border-radius: 6px;
  }