Hi,
I am trying to customize the to do list but my understanding of css/cad-mod is very limited.
Can I somehow change the color of an item/task based on a substring the task text ?
Ex:
If contains “!” make the whole line in Bold
if contains “John” make the whole line Blue
If contains “Mary” make the whole line Pink
etc
display_order: duedate_asc
type: todo-list
entity: todo.family
theme: ios-dark-mode-blue-red-alternative
card_mod:
style:
.: |
ha-card .addRow {
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.addBox {
background-color: #0a0e21;
border-radius: 10px;
mask-image: linear-gradient(to top, #f5f5f5 0%, black 8px);
}
ha-check-list-item {
transition: all 0.4s ease-in-out;
min-height: 20px !important;
padding: 0px 16px 0px 0px;
font-weight: 400;
font-size: 14px;
margin: 8px 14px 0px 14px;
border-radius: 10px;
background-color: #050812;
--mdc-list-item-graphic-margin: 0px !important;
}
ha-check-list-item.completed {
opacity: 0.5;
}
ha-sortable {
max-height: 500px !important;
display: block;
overflow: auto;
scrollbar-width: none;
mask-image: linear-gradient(to top, transparent 0%, black 16px, black calc(100% - 16px), transparent 100%);
}
ha-check-list-item * {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis !important;
}
ha-check-list-item.multiline {
height: 54px;
align-items: center !important;
--check-list-item-graphic-margin-top: -15px !important;
}
ha-card {
padding-bottom: 16px;
--mdc-typography-subtitle1-font-size: 16px;
--mdc-text-field-fill-color: transparent;
}
.header, .divider {
display: none !important;
}