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

Share & showcase
1

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…

image
image1310×1476 78.2 KB

…to this…

image
image1328×1090 72.2 KB

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.

15 Likes
2

This is amazing, thank you.

1 Like
3

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

2 Likes
4

Hi, This is awesome & a lot cleaner CSS

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

1 Like
5

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

1 Like
6

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.

3 Likes
7

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?

1 Like
8

@ap3d, please report Tasks plugin related issues here:

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.

2 Likes
9

@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.

10

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

CleanShot 2023-03-04 at 21.32.01
CleanShot 2023-03-04 at 21.32.01622×510 25.2 KB

1 Like
11

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;
  }
2 Likes
12

Since the last version of Tasks, there has been a big interface change in the tasks modal.
My last css no longer works at all.

I tried to do it again with this version. It’s certainly not perfect, and the appearance is I think not exactly the same as with the old snippet, but it works and it allows you to have a much more compact modal.
PLEASE NOTE: there are personally several fields that I do not use, so I removed them to have more space, so you will have to modify the code if fields that you use are missing.

.tasks-modal-priority-section {
  grid-template-columns: 8em 8em 8em;
  justify-content: center;
}
 .modal-title {
    font-size: medium !important;
}
.tasks-modal input[type="text"] {
    width: 100%;
}
.tasks-modal hr {
  display: none;
}
.tasks-modal-dates-section:not(:has(label[for="blockedBy"])) {
  display: grid;
  flex-direction: column;
  column-gap: 0.5em;
  row-gap: 1px;
  font-size: smaller;
}
body .is-mobile  .tasks-modal-dates-section:not(:has(label[for="blockedBy"])) {
  display: flow;
  flex-direction: column;
  column-gap: 0.5em;
  row-gap: 1px;
  font-size: smaller;
  min-width: none;
}
.tasks-modal-dates:has(label[for="blockedBy"]) {
  display: grid;
  flex-direction: column;
  column-gap: 0.5em;
  row-gap: 1px;
  font-size: small;
}
.tasks-modal-dependencies-section > div > i {
  display: none;
}
.tasks-modal-section + .tasks-modal-section > code {
    margin-top: 0px;
    margin-bottom: 5px;
    width: 45%;
    height: fit-content;
    width: fit-content;
}
.future-dates-only {
  display: none
}
.tasks-modal label {
    font-size: 10px;
}
.tasks-modal label[for="recurrence"], .tasks-modal-dates-section > label,
.tasks-modal-priority-section > label:not(:has(span)) {
  display: none ;
}
.tasks-modal-dates-section {
  align-items: center;
  font-size: small;
}
.tasks-modal-dates-section i {
  height: 0;
  color: transparent;
}
input#created, input#done, input#cancelled {
  display: none !important;
}
.tasks-modal-button-section {
  padding-top: 0px !important;
}
.tasks-modal-section + .tasks-modal-section {
  margin-top: 10px !important;
}
.tasks-modal label[for="created"], .tasks-modal #created , 
body > div.modal-container.mod-dim > div.modal > div.modal-content > form > section:nth-child(8) > code:nth-child(5),
.tasks-modal label[for="cancelled"], .tasks-modal #created,
body > div.modal-container.mod-dim > div.modal > div.modal-content > form > section:nth-child(8) > code:nth-child(11) {
  display: none;
}
.tasks-modal section+section {
  margin-bottom: 6px;
}
.tasks-modal-dates-section .status-editor-status-selector {
  margin-top: 6px;
}
@media screen and (max-width: 400px) {
  .modal:has(.tasks-modal) {
    width: 350px !important;
  }
}

edit: I fixed the css for a better appearance on mobile, which was a bit broken compared to desktop.

1 Like