I wanted a way to push notifications to my dashboard and decided to use the todo list functionality. However the card UI was not really in fitting with my bubble card approach so I use card-mod to change it.
Now I have ability for automations to add a todo list item to my notifications list and I have to then either complete or delete it to remove.
CSS is still rudimental but hopefully it will help someone
type: todo-list
entity: todo.notifications
card_mod:
style:
.: |
ha-card.type-todo-list div.header {
display: none;
}
ha-card.type-todo-list .addRow {
display: none;
}
ha-card.type-todo-list mwc-list#checked {
display: none;
}
ha-check-list-item {
max-height: 68px !important;
background-color: orange;
box-shadow: none;
border: 2px solid #000000;
border-radius: 40px;
padding: 0;
}
ha-check-list-item:hover {
background-color: darkorange ;
}
ha-check-list-item .summary {
position:absolute;
left:20px;
top:10px;
font-weight: bold;
color: black;
}
ha-check-list-item .description {
color: black;
position:absolute;
left:30px;
top:30px;
}
ha-check-list-item .due {
position:absolute;
right:30px;
top:10px;
color: black; /* Text color for due date */
}
ha-check-list-item .due.overdue {
color: black
}
ha-check-list-item .due ha-svg-icon {
display: none;
}
:host {
--card-mod-icon: mdi:bed;
}
ha-check-list-item$: |
mwc-checkbox {
display: none;
}