Hiding ripple line in todo list

Configuration Frontend
1

I’m still fairly new at using card mod and CSS and was hoping or some assistance. I am trying to remove the white ripple line in the todo list add task row.

Screenshot 2025-01-12 at 8.59.38 AM
Screenshot 2025-01-12 at 8.59.38 AM784×300 11.1 KB

I tried inspecting the page and the line sees to be drawn by the span.mdc-line-ripple so I am trying to target that but I doesn’t seem to be working.

type: todo-list
entity: todo.quick_list
card_mod:
  style: |
    ha-card.type-todo-list span.mdc-line-ripple {
      display: none !important; 
    }
2

Try this…

type: todo-list
entity: todo.example
card_mod:
  style:
    ha-textfield $: |
      .mdc-line-ripple::before {
        border-bottom-color: transparent !important;
        }
      .mdc-line-ripple::after {
        border-bottom-color: transparent !important;
        }
1 Like
3

That works! I’m having trouble integrating it into the rest of the code for the card however. I am only able to get it working in isolation. No matter where I add the snippet it doesn’t work. The rest of my card code is this:

type: todo-list
entity: todo.mstodo_chores
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: -2px;
      margin-right: -2px;
      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: -2px;
      margin-right: -2px;
      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;
        }
      ha-check-list-item::before {
        content: "🔔"; 
        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;
      opacity: 0;
      animation: fadeIn 2s ease-in-out forwards;
      }
       @keyframes fadeIn {
          from {
            opacity: 0;
          }
          to {
            opacity: 1;
          }
    }