rectangular buttons?

[cOOnStar]

Hello, is it possible to change the buttons to rectangular shapes using CSS styles?

regards

Calvin

[davosje]

      bubble-button-card-container {
          border-radius: 0px !important;
        }

[adminotaurus44]

The previously posted style is missing the . at the start of the class name.

This should work:

.bubble-button-card-container {
  border-radius: 0px !important;
}
.bubble-button-background {
  border-radius: 0px !important;
}

edit: you will also need to remove the border from .bubble-button-background otherwise the button will revert to rounded edges in its active state. I've updated the code snippet above accordingly

Thank you for the edit. I guess I understand what it does but I can't see the difference, because the button is only "Name/Text" without an active state. Inside there are 4 sub-buttons with entity states. Do you know how I can align the temperature states?

[maaso]

The Name/Text buttons will not go into active state so you should be fine without the .bubble-button-background style override.

As for the alignment, let me see if I can reproduce this, I can't immediately think of a reason why the last one would be aligned differently

[adminotaurus44]

The alignment changes according to the size of the sub buttons on the right. As you see in the picture there is one or two digits in the right column. (there are 4 buttons, left: icon, state; right: last changed;)

[maaso]

I think the best solution would be to set a fixed width on the two sub-buttons on the right, like this:

.bubble-sub-button:nth-last-child(1 of .bubble-sub-button) {
  width: 120px;
}
.bubble-sub-button:nth-last-child(2 of .bubble-sub-button) {
  width: 120px;
}

You will have to experiment a bit to find the pixel value that allows all text to be inside the button, but if you apply this to all cards, I think they will align :)

edit: I see you already figured out the cause :)

[adminotaurus44]

I guess I know what you mean. I have to find a size for the buttons in behind so they don't resize themselves. Sadly they do it even with enough space, or am I missing something?

I only changed button 1 and 3 (first row) of the sub-buttons 1 (Arbeitszimmer) and 3 (Balkon)