Skip to content

Instantly share code, notes, and snippets.

@califa

califa/due_date_labels.css

Created August 27, 2023 22:34
Show Gist options
  • Save califa/34fed1d152a5a398081b65ee23cb4de4 to your computer and use it in GitHub Desktop.
Save califa/34fed1d152a5a398081b65ee23cb4de4 to your computer and use it in GitHub Desktop.
Download ZIP
Obsidian Tasks due date labels
Raw
due_date_labels.css
/* Subtle backlink style */
li.plugin-tasks-list-item span.tasks-backlink > a {
content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='15' height='15'");
background: #999;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M14.05 11.364a4.992 4.992 0 0 0-4.88-2.192 4.978 4.978 0 0 0-2.827 1.414L4.929 12a5 5 0 0 0 7.07 7.071l.708-.707m-2.758-5.728a4.992 4.992 0 0 0 4.88 2.192 4.978 4.978 0 0 0 2.828-1.414L19.07 12A5 5 0 0 0 12 4.929l-.707.707' /%3E%3C/svg%3E");
height: .9em;
margin-bottom: -0.05em;
font-size: 16px;
margin-left: 0.2em;
}
li.plugin-tasks-list-item span.tasks-backlink {
color: transparent;
font-size: 0px;
}
.plugin-tasks-list-item span.tasks-backlink > a { background: #B5B5B5; }
.plugin-tasks-list-item span.tasks-backlink > a:hover { background: #828282; }
.theme-dark .plugin-tasks-list-item span.tasks-backlink > a { background: #585858; }
.theme-dark .plugin-tasks-list-item span.tasks-backlink > a:hover { background: #999999; }
/* 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;
}
/* Task heading design changes */
h4.tasks-group-heading {
margin-bottom:.5em;
border-bottom: 1px dashed currentColor;
}
h4.tasks-group-heading p {
margin-bottom: 0.1em;
}
h4.tasks-group-heading + ul {
margin-top: 0;
}
/* Change task icons */
@font-face {
font-family: 'TasksMonoEmojis';
src: url('data:@file/octet-stream;base64,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') format('woff2');
unicode-range: U+1F4C5, U+1F501, U+1F517, U+1F53A, U+1F53C, U+1F53D, U+1F6EB, U+23EB, U+23EC, U+23F3, U+2705, U+2795;
/* 📅, 🔁, 🔗, 🔺, 🔼, 🔽, 🛫, ⏫, ⏬, ⏳, ✅, ➕
! Generator: obsidian-tasks-custom-icons v1.0.3 https://github.com/replete/obsidian-tasks-custom-icons */
}
span.tasks-list-text,
.cm-line:has(.task-list-label) [class^=cm-list-] {
font-family: 'TasksMonoEmojis', var(--font-text);
}
: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"] {
box-shadow: var(--pill-4-outline) 0px 0px 0px 1px inset;
color: var(--pill-4-color);
background-color: var(--pill-4-bg);
}
.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"] span { display: inline; }
.contains-task-list .task-due[data-task-due="future-7d"]::after { content: "due in a week" }
.contains-task-list .task-due[data-task-due="future-6d"]::after { content: "due in 6 days" }
.contains-task-list .task-due[data-task-due="future-5d"]::after { content: "due in 5 days" }
.contains-task-list .task-due[data-task-due="future-4d"]::after { content: "due in 4 days" }
.contains-task-list .task-due[data-task-due="future-3d"]::after { content: "due in 3 days" }
.contains-task-list .task-due[data-task-due="future-2d"]::after { content: "due in 2 days" }
.contains-task-list .task-due[data-task-due="future-1d"]::after { content: "due tomorrow" }
.contains-task-list .task-due[data-task-due="today"]::after { content: "due today" }
.contains-task-list .task-due[data-task-due="past-1d"]::after { content: "due yesterday" }
.contains-task-list .task-due[data-task-due="past-2d"]::after { content: "due 2 days ago" }
.contains-task-list .task-due[data-task-due="past-3d"]::after { content: "due 3 days ago" }
.contains-task-list .task-due[data-task-due="past-4d"]::after { content: "due 4 days ago" }
.contains-task-list .task-due[data-task-due="past-5d"]::after { content: "due 5 days ago" }
.contains-task-list .task-due[data-task-due="past-6d"]::after { content: "due 6 days ago" }
.contains-task-list .task-due[data-task-due="past-7d"]::after { content: "due 7 days ago" }
.contains-task-list .task-due[data-task-due="past-far"]::after { content: "way overdue" }
@aigoncharov
Copy link

Fantastic work! Thank you very much!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment