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: