Help with button-card and card_mod customization

[stone dawn]

Hi all,

I’m creating a new card for docker monitoring with graphs for cpu and memory, but it seems I can’t properly set the card background for the graph, there’s always a margin on top. I’m going crazy.

I’m using the stack-in-card, the custom button card and the mini-graph card. I took the original code from the HA Forum where a user seemed to use it in a bubble card. If I use the standard horizontal stack it gets messed up somehow

Is there anyone really good with css to set the custom:button-card and make it appears without the top weird border without the gradient?

This is the card code:

https://pastebin.com/nVe8Cpqy

[lyric timber]

Take out the last card mod code block:

        ha-card:after {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
        }

[stone dawn]

Thanks for the help. Yeah I did that and it appears like the card in the bottom left corner. It's ok but I like the gradient version more. I got an answer from the HA Forum fro mthe original poster of the code. For reference I put the code here: https://pastebin.com/F90Cbkt3 it should appear like this:

[stone dawn]

I've fixed the graph position with these values:

• type: custom:mini-graph-card
  entities:
  - entity: sensor.docker_jellyfin_jellyfin1_cpu
  name: CPU
  color: "#ff8c00"
  - entity: sensor.docker_jellyfin_jellyfin1_memory
  name: Memory
  color: "#3399ff"
  y_axis: secondary
  height: 70
  hours_to_show: 24
  line_width: 3
  font_size: 50
  animate: true
  show:
  name: false
  icon: false
  state: false
  legend: false
  fill: fade
  card_mod:
  style: |
  ha-card {
  position: absolute !important;
  height: 117%;
  width: 100%;
  top: -17px;
  --ha-card-border-width: 0;
  }
  ha-card:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, var(--card-background-color) 20%,
  transparent);
  }

the end result:

[lyric timber]

Yeah, looks good. Although there is still some strange shadow on the bottom of your card. Btw, to make the design even better you should adjust the radius of the graph card to fit the radius of the outer card. Here is a tool to calculate it correctly: https://borderradiuscalculator.vercel.app/

[stone dawn]

Nice! Which shadow are you referring to? if you mean the on at the bottom of the bubble is another similar card for another container.

[lyric timber]

Ah, ok. Did not know there is more than just one graph element in the card. So this is already the top of the next one.

[stone dawn]

yes exactly... BTW I dont' like to mess with the spacing or the margins because "something could go wrong" in the future, but it's the only way I guess. Thanks for the tip ragarding the radius. Anyway I think I'll get rid of the bubble card, as I'm not using the pop-up cards currently. Maybe in the future. I've posted the code for other people who are looking for a similar solution.

[stone dawn]

well well well...