Skip to content

Instantly share code, notes, and snippets.

@aigoncharov

aigoncharov/due_date_labels.css

Forked from califa/due_date_labels.css
Last active July 14, 2024 11:11
Show Gist options
  • Save aigoncharov/dbbaa9e87c5810313aa45fd82afd2233 to your computer and use it in GitHub Desktop.
Save aigoncharov/dbbaa9e87c5810313aa45fd82afd2233 to your computer and use it in GitHub Desktop.
Download ZIP
Obsidian Tasks due date labels
Raw
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" }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment