Skip to content

Instantly share code, notes, and snippets.

@califa

califa/due_date_checkboxes.css

Created August 27, 2023 22:35
Show Gist options
  • Save califa/95de27b4a7716b9bd54d5d1623a83211 to your computer and use it in GitHub Desktop.
Save califa/95de27b4a7716b9bd54d5d1623a83211 to your computer and use it in GitHub Desktop.
Download ZIP
Obsidian Tasks due date checkboxes
Raw
due_date_checkboxes.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);
}
/* Hide due date */
.contains-task-list .task-list-item .task-due {
display: none;
}
/* Checkbox numbers */
.task-list-item-checkbox::after {
font-size: 0.7em;
position: absolute;
text-align: center;
vertical-align: middle;
width: 100%;
top: .15em;
color: var(--checkbox-border-color);
opacity: 0.8;
}
.contains-task-list .task-list-item[data-task-due="future-7d"] .task-list-item-checkbox::after { content: "7" }
.contains-task-list .task-list-item[data-task-due="future-6d"] .task-list-item-checkbox::after { content: "6" }
.contains-task-list .task-list-item[data-task-due="future-5d"] .task-list-item-checkbox::after { content: "5" }
.contains-task-list .task-list-item[data-task-due="future-4d"] .task-list-item-checkbox::after { content: "4" }
.contains-task-list .task-list-item[data-task-due="future-3d"] .task-list-item-checkbox::after { content: "3" }
.contains-task-list .task-list-item[data-task-due="future-2d"] .task-list-item-checkbox::after { content: "2" }
.contains-task-list .task-list-item[data-task-due="future-1d"] .task-list-item-checkbox::after { content: "1" }
.contains-task-list .task-list-item[data-task-due="today"] .task-list-item-checkbox::after { content: "!"; }
.contains-task-list .task-list-item[data-task-due="past-1d"] .task-list-item-checkbox::after { content: "!" }
.contains-task-list .task-list-item[data-task-due="past-2d"] .task-list-item-checkbox::after,
.contains-task-list .task-list-item[data-task-due="past-3d"] .task-list-item-checkbox::after,
.contains-task-list .task-list-item[data-task-due="past-4d"] .task-list-item-checkbox::after,
.contains-task-list .task-list-item[data-task-due="past-5d"] .task-list-item-checkbox::after,
.contains-task-list .task-list-item[data-task-due="past-6d"] .task-list-item-checkbox::after { content: "!!" }
.contains-task-list .task-list-item[data-task-due="past-7d"] .task-list-item-checkbox::after,
.contains-task-list .task-list-item[data-task-due="past-far"] .task-list-item-checkbox::after { content: "!!!" }
.contains-task-list .task-list-item[data-task-done] .task-list-item-checkbox::after { content: "" }
/* Checkbox colors */
.task-list-item[data-task-due="future-far"] .task-list-item-checkbox,
.task-list-item[data-task-due="future-7d"] .task-list-item-checkbox,
.task-list-item[data-task-due="future-6d"] .task-list-item-checkbox,
.task-list-item[data-task-due="future-5d"] .task-list-item-checkbox { --checkbox-border-color: #B5B5B5 }
.task-list-item[data-task-due="future-4d"] .task-list-item-checkbox,
.task-list-item[data-task-due="future-3d"] .task-list-item-checkbox { --checkbox-border-color: #CCAC58 }
.task-list-item[data-task-due="future-2d"] .task-list-item-checkbox,
.task-list-item[data-task-due="future-1d"] .task-list-item-checkbox { --checkbox-border-color: #E09267 }
.task-list-item[data-task-due="today"] .task-list-item-checkbox,
.task-list-item[data-task-due="past-1d"] .task-list-item-checkbox,
.task-list-item[data-task-due="past-2d"] .task-list-item-checkbox,
.task-list-item[data-task-due="past-3d"] .task-list-item-checkbox,
.task-list-item[data-task-due="past-4d"] .task-list-item-checkbox,
.task-list-item[data-task-due="past-5d"] .task-list-item-checkbox,
.task-list-item[data-task-due="past-6d"] .task-list-item-checkbox,
.task-list-item[data-task-due="past-7d"] .task-list-item-checkbox,
.task-list-item[data-task-due="past-far"] .task-list-item-checkbox { --checkbox-border-color: #D36E6E }
.task-list-item-checkbox:hover { --checkbox-border-color: #828282 !important; }
/* Checkbox dark theme colors */
.theme-dark .task-list-item[data-task-due="future-far"] .task-list-item-checkbox,
.theme-dark .task-list-item[data-task-due="future-7d"] .task-list-item-checkbox,
.theme-dark .task-list-item[data-task-due="future-6d"] .task-list-item-checkbox,
.theme-dark .task-list-item[data-task-due="future-5d"] .task-list-item-checkbox { --checkbox-border-color: #585858 }
.theme-dark .task-list-item[data-task-due="future-4d"] .task-list-item-checkbox,
.theme-dark .task-list-item[data-task-due="future-3d"] .task-list-item-checkbox { --checkbox-border-color: #665A3A }
.theme-dark .task-list-item[data-task-due="future-2d"] .task-list-item-checkbox,
.theme-dark .task-list-item[data-task-due="future-1d"] .task-list-item-checkbox { --checkbox-border-color: #77513C }
.theme-dark .task-list-item[data-task-due="today"] .task-list-item-checkbox,
.theme-dark .task-list-item[data-task-due="past-1d"] .task-list-item-checkbox,
.theme-dark .task-list-item[data-task-due="past-2d"] .task-list-item-checkbox,
.theme-dark .task-list-item[data-task-due="past-3d"] .task-list-item-checkbox,
.theme-dark .task-list-item[data-task-due="past-4d"] .task-list-item-checkbox,
.theme-dark .task-list-item[data-task-due="past-5d"] .task-list-item-checkbox,
.theme-dark .task-list-item[data-task-due="past-6d"] .task-list-item-checkbox,
.theme-dark .task-list-item[data-task-due="past-7d"] .task-list-item-checkbox,
.theme-dark .task-list-item[data-task-due="past-far"] .task-list-item-checkbox { --checkbox-border-color: #952C2C }
.theme-dark .task-list-item-checkbox:hover { --checkbox-border-color: #999999 !important; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment