CSS styling for hacked 2x height climate card

[deergitseason]

Goal

I hacked together 2 climate cards with custom CSS to make it look like they're one double-height card, by extending the margins of the top card down, and turning off corner rounding on the respective corners of the top and bottom cards.

It all works great except when the HVAC is heating/cooling, the active color doesn't extend downward, leaving a gap in between.

Any ideas on this, while we all excitedly wait for this feature to be implemented :)?

Off:

On:

Source Yaml

.bubble-climate-container,
.bubble-button-background,
.bubble-color-background {
    border-radius: 15px 15px 0 0 !important;
    position: relative; /* Ensure the element is positioned relative for pseudo-elements or offsets */
    overflow: visible;
}

.bubble-climate-container::after,
.bubble-button-background::after,
.bubble-color-background::after {
    content: '';
    position: absolute;
    bottom: -8px; /* Extend downwards by 8px */
    left: 0;
    right: 0;
    height: 8px;
    background-color: inherit;
}

.bubble-climate {
    position: absolute;
    top: 0; /* Aligns it to the top of the container */
    left: 0; /* Aligns it to the left of the container */
    z-index: 1; /* Places it above other elements */
}

    .rows-2 .bubble-sub-button-container > * {
    justify-self: end; /* Right-justify each grid item */
    margin-right: -20px;
    padding-top: 10px;
}

    .bubble-sub-button-container {
  padding: 0px !important;

    }

    .bubble-target-temperature-container {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    align-items: center;   /* Center-align the containers horizontally */
    gap: 0px;             /* Optional: Add space between the containers */
}

.bubble-low-temp-container,
.bubble-high-temp-container {
    background: none;
    display: flex;
    justify-content: center; /* Optional: Center-align content inside */
    align-items: center;     /* Optional: Vertically align content */
    width: 100%;             /* Optional: Adjust as needed */
}

.bubble-climate-minus-button, .bubble-climate-plus-button {
    height: 24px;
    }

Which step did you already try?

No response

Problem

No response

Read the documentation

• I have read the documentation

[Menelao147]

Have you try to use .bubble-climate-container::before instead of .bubble-climate-container::after?

[deergitseason]

I realized I was overthinking this and just made a single card's css 2x height. I'm sure the CSS here is super messy but it works:

.bubble-climate-container,
.bubble-button-background,
.bubble-color-background {
    border-radius: 15px !important;
    height: 120px !important;
}

.bubble-climate {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-items: start;
}

/* Place the icon in the first row, first column */
.bubble-icon-container {
  grid-column: 1;
  grid-row: 1;
  margin-top: 15px;
  margin-bottom: 0px;
  margin-left: 20px !important;
}

/* Place the name below the icon in the first column */
.bubble-name-container {
  grid-column: 1;
  grid-row: 2;
  margin-top: -10px;
  margin-left: 20px;
}

/* Place the button container in the second column, spanning both rows */
.bubble-button-container {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin-top: -5px !important;
  align-self: center; /* vertically center the button container */
}


.bubble-button-container {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center-align contents horizontally */
    gap: 8px; /* Adjust spacing between child elements */
}


    .rows-2 .bubble-sub-button-container > * {
    justify-self: end; /* Right-justify each grid item */
    margin-right: -20px;
    padding-top: 10px;
}

    .bubble-sub-button-container {
  padding: 0px !important;
  margin-right: 12px;

    }

    .bubble-target-temperature-container {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    align-items: center;   /* Center-align the containers horizontally */
    gap: 0px;             /* Optional: Add space between the containers */
}

.bubble-low-temp-container,
.bubble-high-temp-container {
    background: none;
    display: flex;
    justify-content: center; /* Optional: Center-align content inside */
    align-items: center;     /* Optional: Vertically align content */
    width: 100%;             /* Optional: Adjust as needed */
}

.bubble-climate-minus-button, .bubble-climate-plus-button {
    height: 24px;
    }

[MrBearPresident]

Hey Maybe you could use #1291 on the newest beta?