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

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

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.

10 Likes

This is amazing, thank you.

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

1 Like

Hi, This is awesome & a lot cleaner CSS

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

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

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.

1 Like

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?