[Styling Module] Color Flat Bubble Cards

[will-fezz]

Module post template

Color Flat Bubble Cards

Version: v2.1
Creator: will_fezz (https://github.com/will-fezz)

Important

Unsupported cards:

• Horizontal buttons stack

This design features a flat style for the bubble cards, resembling the mushroom or tile cards, but with a more vibrant and colorful touch (attempted to make compatible with bubble card 3.0, however may be some bugs, please let me know if you find any).

Configure this module via the editor or in YAML, for example:

flat_style:
  card_styles:
    prime_color:
      - 211
      - 84
      - 0

---

🧩 Get this Module

To use this module, simply copy and paste the following configuration into your /www/bubble/bubble-modules.yaml file.

flat_style:
    name: "Color Flat Bubble Cards"
    version: "v2.1"
    creator: "Will_Fezz"
    link: "https://github.com/Clooos/Bubble-Card/discussions/1320"

    unsupported:
        - horizontal-buttons-stack

    description: |
        This design features a flat style for the bubble cards, resembling the mushroom or tile cards, but with a more vibrant and colorful touch.

    code: |
              ha-card {
                     --bubble-icon-color: rgba(${this.config.flat_style?.card_styles.prime_color || '200,56,100' }, 1);
                     --secondary-background-color: rgba(0,0,0,0);
                     }

              .bubble-calendar-container, .bubble-button-card-container, .bubble-select-card-container, .bubble-climate-container, .bubble-media-player-container, .bubble-cover-container  {
                    color: rgba(${this.config.flat_style?.card_styles.prime_color || '200,56,100' }, 1);
                    background: rgba(255, 255, 255, 1);
                    box-shadow: 0px 3px 8px 0px rgba(${this.config.flat_style?.card_styles.prime_color || '200,56,100' }, 0.35);
                    border-radius: 0px;
                    border-style: solid;
                    border-width: 1px;
                    border-color: rgba(${this.config.flat_style?.card_styles.prime_color || '200,56,100' }, 0.6);
                    height: 50px;
                    }
              
              .large .bubble-container {
                    border-radius: 15px;
                    }
              
              .bubble-day-number {
                    font-size: 20px;
                    }
              
              .bubble-background {
                    border-radius: 15px;
                    }
              
              .bubble-range-slider {
                    border-radius: 0px;
                    }
              
              .bubble-icon, .bubble-name {
                    color: rgba(${this.config.flat_style?.card_styles.prime_color || '200,56,100' }, 1);
                    --accent-color: rgba(${this.config.flat_style?.card_styles.prime_color || '200,56,100' }, 1);
                    opacity: 1;
                    }
              
              .bubble-line {
                    background: rgba(${this.config.flat_style?.card_styles.prime_color || '200,56,100' }, 0.1) ;
                    }
              
              .bubble-sub-button {
                    color: rgba(255, 255, 255, 1) ;
                    background-color: rgba(${this.config.flat_style?.card_styles.prime_color || '200,56,100' }, 1) ;
                    border-radius: 10px;
                    --bubble-select-border: rgba(0,0,0,0);
                    }
              
              .bubble-icon-container, .bubble-day-chip {
                    background-color: rgba(255, 255, 255, 1) ;
                    border-radius: 15px;
                    border-style: solid;
                    border-width: 1px;
                    border-color: rgba(${this.config.flat_style?.card_styles.prime_color || '200,56,100' }, 0.6) ;
                    height: 38px;
                    width: 38px;
                    }
              
              .bubble-button-background, .bubble-color-background, bubble-background-container {
                    background-color: white;
                    opacity: 0;
                    }
              
              .bubble-temperature-container, .bubble-low-temp-container, .bubble-high-temp-container {
                    border-radius: 12px;
                    border-style: solid;
                    border-width: 1px;
                    border-color: rgba(255, 255, 255, 1) ;
                    background-color: rgba(${this.config.flat_style?.card_styles.prime_color || '200,56,100' }, 0.35) ;
                    color: rgba(${this.config.flat_style?.card_styles.prime_color || '200,56,100' }, 1) ;
                    }
              
              mwc-list-item {
                    border-radius: 12px;
                    color: rgba(${this.config.flat_style?.card_styles.prime_color || '200,56,100' }, 1);
                    --icon-primary-color: rgba(${this.config.flat_style?.card_styles.prime_color || '200,56,100' }, 1) ;
                    --input-hover-line-color: rgba(${this.config.flat_style?.card_styles.prime_color || '200,56,100' }, 0.2)
                    }
              
              mwc-list-item[selected] {
                    background-color: rgba(${this.config.flat_style?.card_styles.prime_color || '200,56,100' }, 1) ;
                    color: rgba(255, 255, 255, 1) ;
                    --icon-primary-color: rgba(255, 255, 255, 1) ;
                    --primary-text-color: White;
                    }
              
              ha-select {
                    --mdc-shape-medium: 20px ;
                    }
              
              .bubble-cover-button, .bubble-play-pause-button, .bubble-previous-button, .bubble-next-button, .bubble-volume-button, .bubble-dropdown-arrow, .bubble-power-button {
                    background-color: rgba(${this.config.flat_style?.card_styles.prime_color || '200,56,100' }, 1) ;
                    color: rgba(255, 255, 255, 1) ;
                    --accent-color: rgba(255, 255, 255, 1) ;
                    border-radius: 15px;
                    --icon-primary-color: white;
                    }
              
              .bubble-range-fill {
                    background-color: rgba(${this.config.flat_style?.card_styles.prime_color || '200,56,100' }, 1) ;
                    }
              
              .is-off .bubble-main-icon{
                    opacity: 1;
                    }
              
              .bubble-volume-slider {
                    border-radius: 12px;
                    border-style: solid;
                    border-width: 1px;
                    border-color: rgba(${this.config.flat_style?.card_styles.prime_color || '200,56,100' }, 1) ;
                    }
              
              bubble-mute-button {
                    color: rgba(${this.config.flat_style?.card_styles.prime_color || '200,56,100' }, 1) ;
                    }

    editor:
      - name: card_styles
        type: expandable
        title: "Card Color"
        icon: "mdi:format-color-fill"
        schema:
            - label: "Primary Color "
              name: prime_color
              selector:
                color_rgb: {}

---

Screenshot:

In this screenshot I am using the font Quicksand. You can add this with the Change Font module.
Change Font Module - #1292
Quicksand Font - https://fonts.google.com/specimen/Quicksand

Before posting your module

• I've replaced all lines starting with ->
• I've updated the unsupported cards above the description and under the unsupported property
• I've added a screenshot
• I've chosen a unique your_module_key
• I really enjoyed working on this module ❤️

[danupshaw]

I really like this, especially the card color picker. It has also taught me a lot about altering the CSS elements in the backend. I noticed, however, that it overrides my custom styling. Is there a way I can change something in the back end so that I can apply this card without letting it override my custom styling?

thank you!

[Clooos]

Hi! Have you updated to the latest beta? Because your custom styles should take over modules in this version.

[will-fezz]

Hi! Have you updated to the latest beta? Because your custom styles should take over modules in this version.

Useful to know!

[will-fezz]

I really like this, especially the card color picker. It has also taught me a lot about altering the CSS elements in the backend. I noticed, however, that it overrides my custom styling. Is there a way I can change something in the back end so that I can apply this card without letting it override my custom styling?

thank you!

See Clooos' reply.

Do you have a screenshot,I would love to see what you have done to customise it?

[danupshaw]

I have installed 2.5.0-beta.8. I can confirm that I tried several other modules (default styling, termperature/humidity color, and subbuton animation), and none of them override the custom styles. Only "Color flat bubble cards" overrides the custom styling. Thanks!

…

On Fri, Mar 21, 2025 at 8:11 AM Cloos ***@***.***> wrote: Hi! Have you updated to the latest beta? Because your custom styles should take over modules in this version. — Reply to this email directly, view it on GitHub <#1320 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BE3LUOEURDOYMIAPFYNU6FL2VP6V7AVCNFSM6AAAAABYWCV2U6VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTENJXGY3DSMA> . You are receiving this because you commented.Message ID: ***@***.***>

[Clooos]

Have you added !important; at the end of your custom styles?

[danupshaw]

I definitely will as soon as I get home! Its been a fun project! Bubble cards in generally, this module, and a few other modules has really given me a dashboard I really like! And modules came out just in time. The modules feature really has made customizing the cards so much easier and richer.

…

On Fri, Mar 21, 2025 at 8:32 AM will-fezz ***@***.***> wrote: I really like this, especially the card color picker. It has also taught me a lot about altering the CSS elements in the backend. I noticed, however, that it overrides my custom styling. Is there a way I can change something in the back end so that I can apply this card without letting it override my custom styling? thank you! See Clooos' reply. Do you have a screenshot,I would love to see what you have done to customise it? — Reply to this email directly, view it on GitHub <#1320 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BE3LUOCNAXMAYHSOE653S6T2VQBHTAVCNFSM6AAAAABYWCV2U6VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTENJXGY4TIOA> . You are receiving this because you commented.Message ID: ***@***.***>

[danupshaw]

Yes sir! I have! These custom styles work with other modules, just not Flat bubble card.

…

On Fri, Mar 21, 2025 at 8:44 AM Cloos ***@***.***> wrote: Have you added !important; at the end of your custom styles? — Reply to this email directly, view it on GitHub <#1320 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BE3LUOCGY5XIHRQQ5IZ6EQL2VQCRVAVCNFSM6AAAAABYWCV2U6VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTENJXG4YDMMI> . You are receiving this because you commented.Message ID: ***@***.***>

[will-fezz]

I'll have a look in a bit and see if I can see what is going on. I can confirm that I have the same.

[will-fezz]

I have made the changes needed. I have briefly tested and I think it is working. make sure you use !important in your custom styles.

(also re-copy the code from above as it has been changed.)

[will-fezz]

let me know if you find any bugs and would love to see what you are working on!

[danupshaw]

Hi! @will-fezz Thanks for your help! Can you tell me what you changed to make it work with custom styles? I am trying to compare what I have to what you changed above, but I can't find what you may have changed (although I think you got rid of some of the "!important" tags at the end of some lines.) I don't want to just re-copy and paste since I have changed the attributes of a several of the elements, and commented out a lot of stuff I wasn't using. I'll past my version below. Also, I included a screen shot of my dashboard. It is nothing ground breaking by any means, and not as visually appealing as what you created, but it works for me! =)
Also, I can confirm that I have added !important to my custom styles, since these custom styles do work with other modules.

Thanks again!

flat_style:
  name: "Color Flat Bubble Cards"
  version: "v1.0"
  creator: "Will_Fezz"
  link: "https://github.com/Clooos/Bubble-Card/discussions/1320"

  unsupported:
    - horizontal-buttons-stack

  description: |
    This design features a flat style for the bubble cards, resembling the mushroom or tile cards, but with a more vibrant and colorful touch.

  code: |

    #.bubble-main-background {
      #color: disabled;
    #}

    #.bubble-background {
        #background-color: var(--bubble-button-background-color);
        #border-radius: calc(var(--bubble-button-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2))) / 1.1 );
    #}

    .bubble-name {
      font-size: 16px;
      font-style: italic;
      #font-variant: small-caps;
      font-family: "Trebuchet MS", Helvetica, sans-serif;
    }

    .bubble-button-card-container, .bubble-select-card-container, .bubble-climate-container, .bubble-media-player-container {
      #color: rgba(${this.config.flat_style.card_styles.prime_color}, 1);
      #background: disabled;
      #box-shadow: 0px 3px 8px 0px rgba(${this.config.flat_style.card_styles.prime_color}, 0.35);
      #border-radius: 20px;
      border-style: solid;
      border-width: 2px;
      border-color: rgba(${this.config.flat_style.card_styles.prime_color}, 0.6);
      border-margin: 20px;
      #height: 50px;
      #padding: 35px;

      }

      #.bubble-button-card {
        #padding: 20px;
      #}



    .bubble-range-slider {
      border-radius: 0px;
    }
     
    #.bubble-icon, .bubble-name{
      #color: rgba(${this.config.flat_style.card_styles.prime_color}, 1);
      #margin: 10px;
      #opacity: 1;
      #}

    #.bubble-line {
      #background: rgba(${this.config.flat_style.card_styles.prime_color}, 0.1);
    #}

     
    .bubble-sub-button {
      #color: rgba(255, 255, 255, 1);
      #background-color: rgba(${this.config.flat_style.card_styles.prime_color}, 1);
      #border-radius: 12px;
      border-style: solid;
      border-width: 2px;
      border-color: rgba(${this.config.flat_style.card_styles.prime_color}, 0.6);
      --bubble-select-border: rgba(0,0,0,0);
      margin: -3px;
      }


    .bubble-icon-container {
      #background-color: rgba(255, 255, 255, 1);
      #border-radius: 20px;
      border-style: solid;
      border-width: 2px;
      border-color: rgba(${this.config.flat_style.card_styles.prime_color}, 0.6);
      #height: 38px;
      #width: 38px;
      }

    #.bubble-button-background, .bubble-color-background, bubble-background-container {
      #opacity: 0;
    #}

    .bubble-temperature-container, .bubble-low-temp-container, .bubble-high-temp-container {
      #border-radius: 12px;
      border-style: solid;
      border-width: 2px;
      border-color: rgba(255, 255, 255, 1);
      #background-color: rgba(${this.config.flat_style.card_styles.prime_color}, 0.35);
      #color: rgba(${this.config.flat_style.card_styles.prime_color}, 1);
    }

    #.bubble-climate-minus-button-icon, .bubble-climate-plus-button-icon{
      #color: rgba(${this.config.flat_style.card_styles.prime_color}, 1);
    #}

    #mwc-list-item {
      #border-radius: 12px;
      #color: rgba(${this.config.flat_style.card_styles.prime_color}, 1);
      #--icon-primary-color: rgba(${this.config.flat_style.card_styles.prime_color}, 1);
      #--input-hover-line-color: rgba(${this.config.flat_style.card_styles.prime_color}, 0.2)
    #}

    #mwc-list-item[selected] {
      #background-color: rgba(${this.config.flat_style.card_styles.prime_color}, 1);
      #color: rgba(255, 255, 255, 1);
      #--icon-primary-color: rgba(255, 255, 255, 1);
    #}

    #ha-select {
      #--mdc-shape-medium: 20px;
    #} 

    #.bubble-play-pause-button, .bubble-previous-button, .bubble-next-button, .bubble-volume-button, .bubble-dropdown-arrow, .bubble-power-button {
      #background-color: rgba(${this.config.flat_style.card_styles.prime_color}, 1);
      #color: rgba(255, 255, 255, 1);
      #border-radius: 12px;
    #}

    #.bubble-range-fill {
      #background-color: rgba(${this.config.flat_style.card_styles.prime_color}, 1);
      
    #}

    .bubble-volume-slider {
      #border-radius: 12px;
      border-style: solid;
      border-width: 2px;
      border-color: rgba(${this.config.flat_style.card_styles.prime_color}, 1);
    }

    #bubble-mute-button {
      #color: rgba(${this.config.flat_style.card_styles.prime_color}, 1);
      
    #}

    #.bubble-separator {
      
      #color: rgba(${this.config.flat_style.card_styles.prime_color}, 1};
    #}

  editor:
    - name: card_styles
      type: expandable
      title: "Card Color"
      icon: "mdi:format-color-fill"
      schema:
        - label: "Primary Color "
          name: prime_color
          selector:
            color_rgb: {}

[will-fezz]

Yeah took !important off most of the lines as I think this was preventing some custom styles.
However, this lead to a a couple of items changing color. So I had to change the color of "--accent-color" in a couple of places.

Hope this helps.

Your dashboard looks great. Have my changes helped? If you need more specific help let me know what you want to do and I might be able to help.

[danupshaw]

Thanks @will-fez! I so appreciate your help! I’m not sure what I am doing wrong with the code, but it is still overriding the custom styles. My goal is to use the custom styles to change the background color of a few cards based on entity state (for lights and switches that don’t have a color control) while still maintaining the common theme of having a border around the card that I control with your module. Thanks again for your help!

…

On Sun, Mar 23, 2025 at 07:13 will-fezz ***@***.***> wrote: Yeah took !important off most of the lines as I think this was preventing some custom styles. However, this lead to a a couple of items changing color. So I had to change the color of "--accent-color" in a couple of places. Hope this helps. Your dashboard look great. Have my changes helped? If you need more specific help let me know what you want to do and I might be able to help. — Reply to this email directly, view it on GitHub <#1320 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BE3LUOAYOPPA3ZJZNY4XVJ32V2JMFAVCNFSM6AAAAABYWCV2U6VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTENJZGE4DKNA> . You are receiving this because you commented.Message ID: ***@***.***>

[will-fezz]

Sorry it has taken me a while to reply. I have done a quick test and have the the following results

This is a button with this styling:

I added the following to custom styles:

code:
.bubble-button-card-container { background: green !important; }

and it resulted in this:

which seems like what you are requesting.

Could you clarify more?

[danupshaw]

Thank you for getting back to me! No problem on the delay; we are all busy people! And I appreciate your help whenever it comes! So you have that exactly right. That is what I want to accomplish for just a few cards. Which is why I am trying to accomplish it through custom styles. It is just that, I already have that custom style programmed in the card, and it works with other modules when Flat cards is turned off. But flat cards overrides that and all other custom styles when I turn it on. Thanks again for your help! Dan

…

On Tue, Mar 25, 2025 at 2:05 PM will-fezz ***@***.***> wrote: Sorry it has taken me a while to reply. I have done a quick test and have the the following results This is a button with this styling: Screenshot.2025-03-25.at.18.00.59.png (view on web) <https://github.com/user-attachments/assets/82e8a3dc-a9fe-41ab-8b7a-76745a63fcee> I added the following to custom styles: Screenshot.2025-03-25.at.18.02.20.png (view on web) <https://github.com/user-attachments/assets/5d3bbdfe-1bd3-4598-bb67-1710f61bc84f> code: .bubble-button-card-container { background: green !important; } and it resulted in this: Screenshot.2025-03-25.at.18.03.48.png (view on web) <https://github.com/user-attachments/assets/c463877b-a052-4b52-9317-fdd4d951aad9> which seems like what you are requesting. Could you clarify more? — Reply to this email directly, view it on GitHub <#1320 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BE3LUOEQS6ZZATK7FHMY4ST2WGEGNAVCNFSM6AAAAABYWCV2U6VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTENRRHA4DGNA> . You are receiving this because you commented.Message ID: ***@***.***>

[will-fezz]

Could you send me the yaml of one of the cards that won't work?

[danupshaw]

@will-fezz yes! thanks!

type: custom:bubble-card
card_type: button
button_type: slider
show_state: false
show_attribute: true
slider_live_update: false
show_last_changed: false
sub_button:
  - entity: binary_sensor.front_door_person_detection_2
    visibility:
      - condition: state
        entity: binary_sensor.front_door_person_detection_2
        state: "on"
    state_background: false
  - state_background: false
    show_background: true
    visibility:
      - condition: user
        users:
          - b87d661ce5b3493e95345c0d5ec48da3
    entity: camera.front_door_cam_came1_sd_stream
    tap_action:
      action: navigate
      navigation_path: /dashboard-outside
    double_tap_action:
      action: more-info
    hold_action:
      action: more-info
  - show_name: false
    show_state: false
    entity: camera.front_door_cam_came1_hd_stream
    visibility:
      - condition: user
        users:
          - aa0f1336766c4e56a76fb0cc5a7366d0
    state_background: false
    tap_action:
      action: navigate
      navigation_path: /dashboard-outside
    double_tap_action:
      action: more-info
    hold_action:
      action: more-info
  - show_state: true
    state_background: false
    show_icon: true
    show_background: true
    tap_action:
      action: navigate
      navigation_path: /dashboard-outside
    entity: sensor.front_porch_climate_sensor_sose1_temperature
  - entity: sensor.front_porch_climate_sensor_sose1_humidity
    show_state: true
    show_background: true
    show_icon: true
    state_background: false
    tap_action:
      action: navigate
      navigation_path: /dashboard-outside
tap_action:
  action: navigate
  navigation_path: /dashboard-outside
grid_options:
  columns: 12
  rows: 1
icon: mdi:coach-lamp
name: Porch
entity: light.porch_light
styles: |-
  .bubble-icon {
    color: ${hass.states['light.porch_light'].state === 'on' ? 'green' : 'red'} !important;
  }

  .bubble-range-fill {
     background: ${hass.states['light.porch_light'].state === 'on' ? 'green' : 'red'} !important;
  }

    
modules:
  - temperature_colouring
  - humidity_colouring
  - default
  - flat_style
temperature_colouring:
  temperature_sensor: sensor.front_porch_climate_sensor_sose1_temperature
  elements:
    sub_buttons:
      - 4
humidity_colouring:
  humidity_sensor: sensor.front_porch_climate_sensor_sose1_humidity
  elements:
    sub_buttons:
      - 5
flat_style:
  card_styles:
    prime_color:
      - 114
      - 146
      - 15
visual_styling_center:
  height_multiplier: 0.8
  inner_padding: 7
  icon_vertical_margin: 22
  subbutton_horizontal_margin: -3
  subbutton_row_spacing: 17
  subbutton_column_spacing: 1
  icon_size_multiplier: 1
  enable_icon_helper: false
  hide_icon_background: false
  hide_subbutton_background: false
  gradient_target: slider
  gradient_entity: light.bedroom
  enable_entity_colored_subicons: false
button_action:
  tap_action:
    action: navigate
    navigation_path: /dashboard-outside
  double_tap_action:
    action: toggle
hold_action:
  action: more-info
attribute: brightness
use_accent_color: false
card_layout: normal
icon_container_color:
  color: blue-grey

[will-fezz]

Could you edit that to put it in code view. I am finding the formatting a bit hard to follow.

[danupshaw]

I'm sorry about that! I think I got it reformatted right.

[danupshaw]

@will-fezz I believe I found the culprit. I don't fully understand it, but while I was messing around with custom styling, I found that this card does not like some commented out lines. For instance, this works:

.bubble-range-fill {
   background: ${hass.states['light.office'].state === 'on' ? 'green' : 'red'} !important;
      }

but this does not:

.bubble-range-fill {
   #anything you want to put here
   background: ${hass.states['light.office'].state === 'on' ? 'green' : 'red'} !important;
      }

So, since I had commented out so many thing in your code that I didn't need, I started taking them out one by one. It wasn't until I got to the very end that I found that this code, commented out as it is below, was preventing my custom styles from overriding the modue:

    #.bubble-separator {
      
      #color: rgba(${this.config.flat_style.card_styles.prime_color}, 1};
    #}

I deleted that from the module, and my custom styles seem to be behaving appropriately with the module!

[will-fezz]

Glad it worked.

I hate it when something so simple is the problem!!

[Clooos]

Hi! I updated your module to v1.2 to fix an error that was spamming the developer console.

Using variables for the config like this is not recommended:

${this.config.flat_style.card_styles.prime_color}

Because when this value isn’t defined (like when it was just installed), it will raise an error, adding a ? after flat_style is preventing that, so like this:

${this.config.flat_style?.card_styles.prime_color}

I've explained that in the editor schema documentation, but I've added it after you released your module 🙂

[mohoel]

Hey guys,
thank you for this great module. I tried to add the support for covers, but I can't get the control buttons for the cover to be colored as well. Can anybody help me?

.bubble-button-card-container, .bubble-select-card-container, .bubble-climate-container, .bubble-media-player-container, .bubble-cover-container {
  color: rgba(${this.config.flat_style?.card_styles.prime_color}, 1);
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 3px 8px 0px rgba(${this.config.flat_style?.card_styles.prime_color}, 0.35);
  border-radius: 20px;
  border-style: solid;
  border-width: 1px;
  border-color: rgba(${this.config.flat_style?.card_styles.prime_color}, 0.6);
  height: 50px;
  } 

[mohoel]

Do you mean the beta from Bubble Cards?

[will-fezz]

Yes

[mohoel]

Alright. I‘m looking forward to the fix. Thank you for your work and have a nice weekend.

[will-fezz]

I think I may have fixed it but it may have some bugs. Let me know if you find any.

[mohoel]

Thank you. Until now I didn‘t find any fixes. It‘s just awkward, that I can‘t use the Home Assistant Default Styling by Clooos. It worked like a charm in the last version.

[will-fezz]

@Clooos how do you update the module to include the latest update of a module?

[Clooos]

Just update the version number in your module, and in this post, then the update will be shown to everyone after a store refresh.

[mohoel]

Is there an opportunity for me to control the color of the icon container based on the state of an entity?
Without your module I can use this style:
.bubble-icon-container { opacity: 1 !important; background-color: ${hass.states['light.wohnzimmer_leuchten'].state === 'on' ? 'blue' : 'red'} !important; }

[will-fezz]

I’ve started making each element customizable. This should allow you to change the background color, including things like the icon’s background. I’m not planning to push an update just yet, but this should help you tweak a few settings in the meantime.

Code -

    .bubble-calendar-container, .bubble-button-card-container, .bubble-select-card-container, .bubble-climate-container, .bubble-media-player-container, .bubble-cover-container  {
      color: rgba(${this.config.flat_style?.card_styles.prime_color}, 1);
      background: rgba(${this.config.flat_style?.card_styles.card_back_color}, 1);
      box-shadow: 0px 3px 8px 0px rgba(${this.config.flat_style?.card_styles.prime_color}, 0.35);
      border-radius: ${this.config.flat_style?.card_param.card_radius}px;
      border-style: ${this.config.flat_style?.card_param.card_bord_style};
      border-width: ${this.config.flat_style?.card_param.card_bord_width}px;
      border-color: rgba(${this.config.flat_style?.card_styles.prime_color}, 0.6);
      height: 50px;
      
      }

    .large .bubble-container {
      border-radius: ${this.config.flat_style?.card_param.card_radius}px;
      }

    .bubble-day-number {
      font-size: 20px;
      }

    .bubble-background {
      border-radius: ${this.config.flat_style?.card_param.card_radius}px;
      border-style: solid;
      border-width: 1px;
      border-color: rgba(${this.config.flat_style?.card_styles.prime_color}, 0);

      }

    .bubble-range-slider {
      border-radius: 0px;
    }
     
    .bubble-icon{
      color: rgba(${this.config.flat_style?.icon_colors.icon_color}, 1);
      --accent-color: rgba(${this.config.flat_style?.icon_colors.icon_color}, 1);
      --bubble-icon-color: rgba(${this.config.flat_style?.icon_colors.icon_color}, 1);
      opacity: ${this.config.flat_style?.icon_param.icon_opac};
      }

    .bubble-name{
      color: rgba(${this.config.flat_style?.card_styles.prime_color}, 1);
      --accent-color: rgba(${this.config.flat_style?.card_styles.prime_color}, 1);
      opacity: 1;
      }
      

    .bubble-line {
      background: rgba(${this.config.flat_style?.card_styles.prime_color}, 0.1) ;
    }

     
    .bubble-sub-button {
      color: rgba(255, 255, 255, 1) ;
      background-color: rgba(${this.config.flat_style?.card_styles.prime_color}, 1) ;
      border-radius: 12px;
      --bubble-select-border: rgba(0,0,0,0);
      }


    .bubble-icon-container, .bubble-day-chip {
      
      --bubble-icon-background-color: rgba(${this.config.flat_style?.icon_colors.icon_back_color}, ${this.config.flat_style?.icon_param.back_opac});
      border-radius: ${this.config.flat_style?.icon_param.icon_radius}px;
      border-style: ${this.config.flat_style?.icon_param.icon_bord_style};
      border-width: ${this.config.flat_style?.icon_param.icon_bord_width}px;
      border-color: rgba(${this.config.flat_style?.card_styles.prime_color}, 0.6) ;
      height: 38px;
      width: 38px;
      }

    .bubble-button-background, .bubble-color-background, bubble-background-container {
      background-color: white;
      opacity: 0;
    }

    .bubble-temperature-container, .bubble-low-temp-container, .bubble-high-temp-container {
      border-radius: 12px;
      border-style: solid;
      border-width: 1px;
      border-color: rgba(255, 255, 255, 1) ;
      background-color: rgba(${this.config.flat_style?.card_styles.prime_color}, 0.35) ;
      color: rgba(${this.config.flat_style?.card_styles.prime_color}, 1) ;
    }

    .bubble-climate-minus-button-icon, .bubble-climate-plus-button-icon{
      color: rgba(${this.config.flat_style?.card_styles.prime_color}, 1) ;
      --icon-primary-color: rgba(${this.config.flat_style?.card_styles.prime_color}, 1) ;
    }

    mwc-list-item {
      border-radius: 12px;
      color: rgba(${this.config.flat_style?.card_styles.prime_color}, 1);
      --icon-primary-color: rgba(${this.config.flat_style?.card_styles.prime_color}, 1) ;
      --input-hover-line-color: rgba(${this.config.flat_style?.card_styles.prime_color}, 0.2)
    }

    mwc-list-item[selected] {
      background-color: rgba(${this.config.flat_style?.card_styles.prime_color}, 1) ;
      color: rgba(255, 255, 255, 1) ;
      --icon-primary-color: rgba(255, 255, 255, 1) ;
      --primary-text-color: White;
    }

    ha-select {
      --mdc-shape-medium: 20px ;
    } 

    .bubble-cover-button, .bubble-play-pause-button, .bubble-previous-button, .bubble-next-button, .bubble-volume-button, .bubble-dropdown-arrow, .bubble-power-button {
      background-color: rgba(${this.config.flat_style?.card_styles.prime_color}, 1) ;
      color: rgba(255, 255, 255, 1) ;
      --accent-color: rgba(255, 255, 255, 1) ;
      border-radius: 12px;
      --icon-primary-color: white;
      
    }

    .bubble-range-fill {
      background-color: rgba(${this.config.flat_style?.card_styles.prime_color}, 1) ;
      
    }

    .is-off .bubble-main-icon{
      opacity: 1;
      }

    .bubble-volume-slider {
      border-radius: 12px;
      border-style: solid;
      border-width: 1px;
      border-color: rgba(${this.config.flat_style?.card_styles.prime_color}, 1) ;
    }

    bubble-mute-button {
      color: rgba(${this.config.flat_style?.card_styles.prime_color}, 1) ;
      
    }

    .bubble-separator {
      
      color: rgba(${this.config.flat_style?.card_styles.prime_color}, 1} ;
    }

     ha-card  {
     --bubble-icon-color: rgba(${this.config.flat_style?.card_styles.prime_color}, 1);
     --secondary-background-color: rgba(0,0,0,0);
     }

Editor -

  - name: card_styles
    type: expandable
    title: Card Color
    icon: mdi:format-color-fill
    schema:
      - label: 'Primary Color '
        name: prime_color
        selector:
          color_rgb: {}
      - label: Card Background Color
        name: card_back_color
        selector:
          color_rgb: {}
        default: rgba(255, 255, 255)
  - name: card_param
    type: expandable
    title: Card Parameters
    icon: mdi:cog
    schema:
      - label: Card Background Radius
        name: card_radius
        default: 20
        selector:
          number:
            min: 0
            max: 50
            step: 1
      - label: Card Border Style
        name: card_bord_style
        selector:
          select:
            default: solid
            mode: dropdown
            options:
              - dotted
              - dashed
              - solid
      - label: Card Border Width
        name: card_bord_width
        default: 1
        selector:
          number:
            min: 0
            max: 5
            step: 0.5
  - name: icon_colors
    type: expandable
    title: Icon Colors
    icon: mdi:cog
    schema:
      - label: Icon Color
        name: icon_color
        selector:
          color_rgb: {}
      - label: Icon Background Color
        name: icon_back_color
        selector:
          color_rgb: {}
  - name: icon_param
    type: expandable
    title: Icon Parameters
    icon: mdi:cog
    schema:
      - label: Icon Opacity
        name: icon_opac
        default: 1
        selector:
          number:
            min: 0
            max: 1
            step: 0.1
      - label: Icon Background Opacity
        name: back_opac
        default: 1
        selector:
          number:
            min: 0
            max: 1
            step: 0.1
      - label: Icon Background Radius
        name: icon_radius
        default: 20
        selector:
          number:
            min: 0
            max: 50
            step: 1
      - label: Icon Border Style
        name: icon_bord_style
        default: solid
        selector:
          select:
            mode: dropdown
            options:
              - dotted
              - dashed
              - solid
      - label: Icon Border Width
        name: icon_bord_width
        default: 1
        selector:
          number:
            min: 0
            max: 5
            step: 0.5
```

[mohoel]

Great, but it‘s not working for me. I get an error. But it‘s no problem. I will wait until the update.

[mohoel]

When are you planning to push the update? I want to change the width from my Subbuttons and it only works, when I disable the Flat Color Module.

[will-fezz]

Sorry, life, work and kids with chicken pox have come in the way. I will do my best to find a solution asap!

[will-fezz]

I think I have found the issue. This code seemed to break the styles section. I have removed it for now. Custom styles should work again.

.bubble-separator { color: rgba(${this.config.flat_style?.card_styles.prime_color}, 1} ; }

[lmunier]

Is there any way I can contribute to this module? I really like it, but I’d love to be able to extract certain parameters from the internal code, such as the card radius and background color.

This would allow me to reuse and customize the module to better fit my needs while still giving proper credit to its original creator.

[will-fezz]

If you are happy to do the work and share it with me then I will happily test it and update the code.

[will-fezz]

I had an hour or so, so I made a start on making every element customisable:
#1320 (reply in thread)

[lmunier]

Oh waouh, I was not expecting something that fast, thank you ! I need some time to get more familiar on what are the different parameters for each functionnality on this code. But I am taking a look and will come back to you.

[bakman2]

Nice looking module, but you call it 'flat' while you use shadows, this makes it inherently non-flat. The shadows are are distracting.

[will-fezz]

You are right. I think I called it flat as I took inspiration from lots of flat designs. I wasn't really thinking of my actual design. Oops!