CustomTodoList

type: todo-list
entity: todo.demo
hide_completed: true
grid_options: null
columns: full
rows: auto
card_mod:
  style: >

    ha-card.type-todo-list {display: grid; grid-template-rows: auto 1fr auto;
    --mdc-text-field-fill-color: rgba(0, 0, 0, 0); }

    ha-card.type-todo-list .addRow {
      grid-row: 3; /* Ensure it's placed in the last row */
      border: 1px solid rgba(255, 255, 255, .1);
      /backdrop-filter: blur(25px);
      border-radius: 16px;
      background-color: rgba(0, 0, 0, .1) !important;
      padding: 9px;
      margin-top: -9px;
      margin-left: 0px;
      margin-right: 0px;
      margin-bottom: 12px; /* Add spacing between items */
      position: relative; /* Ensure positioning for ::before */
    }

    ha-card.type-todo-list div.header {
      display: none;
    }

    ha-check-list-item {
      max-height: 68px !important;
      background-color: rgba(0, 0, 0, .20) !important;
      box-shadow: none;
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 16px;
      padding: 9px;
      margin-top: -2px;
      margin-left: 0px;
      margin-right: 0px;
      margin-bottom: 12px;
      position: relative;
    }

    ha-check-list-item .summary {
      position: absolute;
      left: 21%; /* Adjusted to account for the emoji */
      top: 33%;
      font-weight: bold;
      font-family: "Helvetica", sans-serif;
      font-size: 27px !important;
      color: white;
    }

    ha-check-list-item .description {
      color: white;
      position: absolute;
      left: 17%;
      top: 70%;
    }

    ha-check-list-item .due {
      position: absolute;
      right: 5%;
      top: 33%;
      color: white;
    }

    .: |
      ha-check-list-item$:
        mwc-checkbox {
          display: none; /* Hides the default checkbox */
        }
      ha-check-list-item::before {
        content: "🔔"; /* Replace with your desired emoji or icon */
        position: absolute;
        left: 4px;
        z-index: 3;
        font-size: 40px; /* Adjust size of the emoji */
        top: 50%;
        transform: translateY(-50%);
      }

    ha-card {
      margin-top:-8px;
      background-color: rgba(0, 0, 0, 0) !important;
      border-radius: 16px;
      box-shadow: none;
      border: 0px solid rgba(0, 0, 0, 0);
      --checkbox-color: white !important;
      --primary-text-color: white !important;

    }