Obsidian Tasks due date labels

due_date_labels.css

/* Better task list alignment and spacing */
.contains-task-list .task-list-item-checkbox {
    top: .5em !important;
    left: 0;
    position: absolute;
}

.plugin-tasks-query-result {
    padding-left: 0 !important;
}

.contains-task-list .task-list-item {
    position: relative;
    padding-left: 1.5em;
}

:root {
    --pill-1-outline: rgba(110, 69, 0, 0.357);
    --pill-1-color: rgba(54, 32, 0, 0.706);
    --pill-1-bg: rgba(176, 138, 0, 0.05);
    --pill-1-outline-dark: rgba(255, 228, 179, 0.27);
    --pill-1-color-dark: rgba(255, 231, 198, 0.776);
    --pill-1-bg-dark: rgba(255, 179, 0, 0.01);
    --pill-2-outline: rgba(204, 126, 0, 0.53);
    --pill-2-color: rgba(120, 50, 0, 0.81);
    --pill-2-bg: rgba(255, 171, 2, 0.07);
    --pill-2-outline-dark: rgba(255, 164, 37, 0.376);
    --pill-2-color-dark: rgb(255, 205, 77);;
    --pill-2-bg-dark: rgba(252, 25, 0, 0.06);  
    --pill-3-outline: rgba(255, 89, 0, 0.51);
    --pill-3-color: rgba(123, 33, 0, 0.773);
    --pill-3-bg: rgba(255, 97, 5, 0.043);
    --pill-3-outline-dark: rgba(255, 120, 24, 0.443);
    --pill-3-color-dark: rgb(255, 163, 102);
    --pill-3-bg-dark: rgba(255, 0, 0, 0.067);  
    --pill-4-outline: rgba(222, 37, 0, 0.365);
    --pill-4-color: rgba(190, 32, 0, 0.925);
    --pill-4-bg: rgba(255, 38, 5, 0.03);
    --pill-4-outline-dark: rgba(255, 60, 26, 0.48);
    --pill-4-color-dark: rgb(255, 136, 112);
    --pill-4-bg-dark: rgba(255, 0, 0, 0.067);  
    --pill-5-outline: rgba(217, 0, 4, 0.318);
    --pill-5-color: rgba(187, 0, 6, 0.835);
    --pill-5-bg: rgba(255, 5, 5, 0.03);
    --pill-5-outline-dark: rgba(255, 34, 56, 0.5);
    --pill-5-color-dark: rgb(255, 133, 137);
    --pill-5-bg-dark: rgba(254, 0, 25, 0.075);  
    --pill-6-outline: rgba(199, 0, 83, 0.32);
    --pill-6-color: rgba(196, 0, 79, 0.886);
    --pill-6-bg: rgba(255, 5, 130, 0.03) ;
    --pill-6-outline-dark: rgba(255, 38, 125, 0.486);
    --pill-6-color-dark: rgb(255, 133, 172);
    --pill-6-bg-dark: rgba(254, 0, 93, 0.075);  
  }

.contains-task-list .task-due {
    padding: .2em .45em;
    border-radius: 20px;
    font-size: .8em;
    margin-left: .3em;

}

.contains-task-list .task-due[data-task-due="future-far"],
.contains-task-list .task-due[data-task-due="future-7d"],
.contains-task-list .task-due[data-task-due="future-6d"],
.contains-task-list .task-due[data-task-due="future-5d"] {
    color: var(--pill-1-color);
    background-color: var(--pill-1-bg);
}

.contains-task-list .task-due[data-task-due="future-4d"],
.contains-task-list .task-due[data-task-due="future-3d"] {
    color: var(--pill-2-color);
    background-color: var(--pill-2-bg);
}

.contains-task-list .task-due[data-task-due="future-2d"],
.contains-task-list .task-due[data-task-due="future-1d"] {
    box-shadow: var(--pill-3-outline) 0px 0px 0px 1px inset; 
    color: var(--pill-3-color);
    background-color: var(--pill-3-bg);
}

.contains-task-list .task-due[data-task-due="today"] {
    display: none;
}

.contains-task-list .task-due[data-task-due="past-1d"],
.contains-task-list .task-due[data-task-due="past-2d"],
.contains-task-list .task-due[data-task-due="past-3d"] {
    box-shadow: var(--pill-5-outline) 0px 0px 0px 1px inset;
    color: var(--pill-5-color);
    background-color: var(--pill-5-bg);
}

.contains-task-list .task-due[data-task-due="past-4d"],
.contains-task-list .task-due[data-task-due="past-5d"],
.contains-task-list .task-due[data-task-due="past-6d"],
.contains-task-list .task-due[data-task-due="past-7d"],
.contains-task-list .task-due[data-task-due="past-far"] {
    box-shadow: var(--pill-6-outline) 0px 0px 0px 1px inset;
    color: var(--pill-6-color);
    background-color: var(--pill-6-bg);
}

.theme-dark .contains-task-list .task-due[data-task-due="future-far"],
.theme-dark .contains-task-list .task-due[data-task-due="future-7d"],
.theme-dark .contains-task-list .task-due[data-task-due="future-6d"],
.theme-dark .contains-task-list .task-due[data-task-due="future-5d"] {
    box-shadow: var(--pill-1-outline-dark) 0px 0px 0px 1px inset;
    color: var(--pill-1-color-dark);
    background-color: var(--pill-1-bg-dark);
}

.theme-dark .contains-task-list .task-due[data-task-due="future-4d"],
.theme-dark .contains-task-list .task-due[data-task-due="future-3d"] {
    box-shadow: var(--pill-2-outline-dark) 0px 0px 0px 1px inset;
    color: var(--pill-2-color-dark);
    background-color: var(--pill-2-bg-dark);
}

.theme-dark .contains-task-list .task-due[data-task-due="future-2d"],
.theme-dark .contains-task-list .task-due[data-task-due="future-1d"] {
    box-shadow: var(--pill-3-outline-dark) 0px 0px 0px 1px inset;
    color: var(--pill-3-color-dark);
    background-color: var(--pill-3-bg-dark);
}

.theme-dark .contains-task-list .task-due[data-task-due="today"] {
    box-shadow: var(--pill-4-outline-dark) 0px 0px 0px 1px inset;
    color: var(--pill-4-color-dark);
    background-color: var(--pill-4-bg-dark);
}

.theme-dark .contains-task-list .task-due[data-task-due="past-1d"],
.theme-dark .contains-task-list .task-due[data-task-due="past-2d"],
.theme-dark .contains-task-list .task-due[data-task-due="past-3d"] {
    box-shadow: var(--pill-5-outline-dark) 0px 0px 0px 1px inset;
    color: var(--pill-5-color-dark);
    background-color: var(--pill-5-bg-dark);
}

.theme-dark .contains-task-list .task-due[data-task-due="past-4d"],
.theme-dark .contains-task-list .task-due[data-task-due="past-5d"],
.theme-dark .contains-task-list .task-due[data-task-due="past-6d"],
.theme-dark .contains-task-list .task-due[data-task-due="past-7d"],
.theme-dark .contains-task-list .task-due[data-task-due="past-far"] {
    box-shadow: var(--pill-6-outline-dark) 0px 0px 0px 1px inset;
    color: var(--pill-6-color-dark);
    background-color: var(--pill-6-bg-dark);
}

.contains-task-list .task-due span {
    display:none;
}

.contains-task-list .task-list-item[data-task-done] .task-due {
    display: none;
}

.contains-task-list .task-due[data-task-due="future-far"]::after { content: "way ahead" }
.contains-task-list .task-due[data-task-due="future-7d"]::after { content: "in a week" }
.contains-task-list .task-due[data-task-due="future-6d"]::after { content: "in 6 days" }
.contains-task-list .task-due[data-task-due="future-5d"]::after { content: "in 5 days" }
.contains-task-list .task-due[data-task-due="future-4d"]::after { content: "in 4 days" }
.contains-task-list .task-due[data-task-due="future-3d"]::after { content: "in 3 days" }
.contains-task-list .task-due[data-task-due="future-2d"]::after { content: "in 2 days" }
.contains-task-list .task-due[data-task-due="future-1d"]::after { content: "tomorrow" }
.contains-task-list .task-due[data-task-due="past-1d"]::after { content: "yesterday" }
.contains-task-list .task-due[data-task-due="past-2d"]::after { content: "2 days ago" }
.contains-task-list .task-due[data-task-due="past-3d"]::after { content: "3 days ago" }
.contains-task-list .task-due[data-task-due="past-4d"]::after { content: "4 days ago" }
.contains-task-list .task-due[data-task-due="past-5d"]::after { content: "5 days ago" }
.contains-task-list .task-due[data-task-due="past-6d"]::after { content: "6 days ago" }
.contains-task-list .task-due[data-task-due="past-7d"]::after { content: "7 days ago" }
.contains-task-list .task-due[data-task-due="past-far"]::after { content: "way overdue" }