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.

8 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