Color Match Issue Using Entity Card, Mini-Graph Card and Card-Mod

Configuration Frontend
1

Trying to create dashboard targeted for an Android tablet using multiple views where the elements of each view are enlarged and use a particular color (DeepSkyBlue in this case), the goal being to read them from across the room in the dark. First view uses Entity Cards and Card-Mod. The color is correct here. Second view uses Mini-Graph and Card-Mod. Even though the color specified is exactly the same, the color displayed is not right. The ultimate goal is to cycle between three or four views every few seconds, so they all need to use the same font sizes and colors. Code included below. This is weird and I can’t figure out where the discrepancy creeps in. Anyone know how these card things interact and can maybe point me in a direction to resolve?

views:
  - type: custom:layout-card
    layout_type: grid
    path: Outside_View
    title: Outside_View
    layout:
      grid-template-columns: 1fr 1fr
      grid-template-rows: .1fr .5fr .5fr .5fr
      grid-template-areas: |
        "r0c r0c"
        "r1c1 r1c2"
        "r2c1 r2c2"
        "r3c1 r3c2"
    cards:
      - type: markdown
        card_mod:
          style: |
            :host { 
              ha-card {
                background: transparent;
                border: 1px dashed green;
                color: deepskyblue;
                opacity: 1;
                font-size: 9em;
                font-weight: 600;
                line-height: 70px;
                padding-top: 15px;
                text-align: center;
              }
            }
        content: Outside Conditions
        view_layout:
          grid-area: r0c
      - type: markdown
        card_mod:
          style: |
            :host { 
              ha-card {
                background: transparent;
                border: 1px dashed green;
                color: deepskyblue; 
                font-size: 5.5em;
                font-weight: 600;
                line-height: 60px;
                padding-top: 25px;
                text-align: right;
              }
            }
        content: Temperature
        view_layout:
          grid-area: r1c1
      - type: entity
        entity: sensor.tr_temp_humidity_sensor_temperature
        name: ' '
        icon: mdi:none
        card_mod:
          style: |
            :host { 
              ha-card {
                background: Transparent;
                border: 1px dashed blue;
              }
              .info {
                text-align: left;
              }
              .info .value {
                font-size: 5.1em;
                font-weight: 500;
                line-height: 60px;
                color: deepskyblue;
              }
              .info .measurement {
                font-size: 4em;
                color: deepskyblue;
                line-height: 50px;
                vertical-align: top;
              }
            }
        view_layout:
          grid-area: r1c2
      - type: markdown
        card_mod:
          style: |
            :host { 
              ha-card {
                background: transparent;
                border: 1px dashed green;
                color: deepskyblue; 
                font-size: 5.5em;
                font-weight: 600;
                line-height: 60px;
                padding-top: 25px;
                text-align: right;
              }
            }
        content: Humidity
        view_layout:
          grid-area: r2c1
      - type: entity
        entity: sensor.tr_temp_humidity_sensor_humidity
        name: ' '
        icon: mdi:none
        card_mod:
          style: |
            :host { 
              ha-card {
                background: Transparent;
                border: 1px dashed blue;
              }
              .info {
                text-align: left;
              }
              .info .value {
                font-size: 5.1em;
                font-weight: 500;
                line-height: 60px;
                color: deepskyblue;
              }
              .info .measurement {
                font-size: 4em;
                color: deepskyblue;
                line-height: 50px;
                vertical-align: top;
              }
            }
        view_layout:
          grid-area: r2c2
      - type: markdown
        card_mod:
          style: |
            :host { 
              ha-card {
                background: transparent;
                border: 1px dashed green;
                color: deepskyblue; 
                font-size: 5.5em;
                font-weight: 600;
                line-height: 60px;
                padding-top: 25px;
                text-align: right;
              }
            }
        content: Wind
        view_layout:
          grid-area: r3c1
      - type: entity
        entity: sensor.wind
        name: ' '
        icon: mdi:none
        card_mod:
          style: |
            :host { 
              ha-card {
                background: Transparent;
                border: 1px dashed blue;
              }
              .info {
                text-align: left;
              }
              .info .value {
                font-size: 5.1em;
                font-weight: 500;
                line-height: 60px;
                color: deepskyblue;
              }
            }
        view_layout:
          grid-area: r3c2
  - type: custom:grid-layout
    path: BPressure_View
    title: BPressure_View
    cards:
      - type: custom:mini-graph-card
        entities:
          - sensor.barometer
        detail: 2
        icon: mdi:none
        name: Barometric Pressure (30 hr)
        hours_to_show: 30
        line_color: deepskyblue
        line_width: 1
        align_state: center
        card_mod:
          style: |
            :host {
              ha-card {
                background: Transparent;
                border: transparent;
              }
              .header .name {
                color: deepskyblue;
                font-weight: 500;
                font-size: 5.5em;
                opacity: 1;
              }
              .states.flex .state .state__value.ellipsis {
                color: deepskyblue;
                font-size: 6em;
                font-weight: 500;
                opacity: .65;
                margin-top: 25px;
              }
              .states.flex .state .state__uom.ellipsis {
                color:  deepskyblue;
                font-size: 6em;
                font-weight: 500;
                opacity: .65;
                padding-left: 12px;
              }
            }
  - type: custom:layout-card
    layout_type: grid
    title: Alarm_View
    path: Alarm_View
    layout:
      grid-template-columns: 1fr 1fr
      grid-template-rows: 1fr 1fr 1fr
      grid-template-areas: |
        "r1c1 r1c2"
        "r2c1 r2c2"
        "r3c1 r3c2"
    cards:
      - type: entity
        entity: sensor.sun_next_rising
        view_layout:
          grid-area: r2c1
      - type: entity
        entity: sensor.sun_next_setting
        view_layout:
          grid-area: r3c1
2

Suggest you to post a simplified example without unrelated stuff - layout-card, markdown.
And also do not use nested css selectors. This does not make a sense:

3

A screen shot would help too.

4

OK, here’s a simplified version without the extraneous stuff.

views:
  - type: custom:layout-card
    layout_type: grid
    path: Outside_View
    title: Outside_View
    layout:
      grid-template-columns: 1fr 1fr
      grid-template-rows: .1fr .5fr .5fr .5fr
      grid-template-areas: |
        "r0c r0c"
        "r1c1 r1c2"
        "r2c1 r2c2"
        "r3c1 r3c2"
    cards:
      - type: entity
        entity: sensor.tr_temp_humidity_sensor_temperature
        name: ' '
        icon: mdi:none
        card_mod:
          style: |
            ha-card {
              background: Transparent;
              border: 1px dashed yellow;
            }
            .info {
              text-align: left;
            }
            .info .value {
              font-size: 5.1em;
              font-weight: 500;
              line-height: 60px;
              color: deepskyblue;
            }
            .info .measurement {
              font-size: 4em;
              color: deepskyblue;
              line-height: 50px;
              vertical-align: top;
            }
        view_layout:
          grid-area: r1c2
      - type: entity
        entity: sensor.tr_temp_humidity_sensor_humidity
        name: ' '
        icon: mdi:none
        card_mod:
          style: |
            ha-card {
              background: Transparent;
              border: 1px dashed yellow;
            }
            .info {
              text-align: left;
            }
            .info .value {
              font-size: 5.1em;
              font-weight: 500;
              line-height: 60px;
              color: deepskyblue;
            }
            .info .measurement {
              font-size: 4em;
              color: deepskyblue;
              line-height: 50px;
              vertical-align: top;
            }
        view_layout:
          grid-area: r2c2
      - type: entity
        entity: sensor.wind
        name: ' '
        icon: mdi:none
        card_mod:
          style: |
            ha-card {
              background: Transparent;
              border: 1px dashed yellow;
            }
            .info {
              text-align: left;
            }
            .info .value {
              font-size: 5.1em;
              font-weight: 500;
              line-height: 60px;
              color: deepskyblue;
            }
        view_layout:
          grid-area: r3c2
  - type: custom:grid-layout
    path: BPressure_View
    title: BPressure_View
    cards:
      - type: custom:mini-graph-card
        entities:
          - sensor.barometer
        detail: 2
        icon: mdi:none
        name: Barometric Pressure (30 hr)
        hours_to_show: 30
        line_color: deepskyblue
        line_width: 4
        align_state: center
        card_mod:
          style: |
            ha-card {
              background: Transparent;
              border: transparent;
            }
            .header .name {
              color: deepskyblue;
              font-weight: 500;
              font-size: 5.5em;
              opacity: 1;
            }
            .states.flex .state .state__value.ellipsis {
              color: deepskyblue;
              font-size: 6em;
              font-weight: 500;
              opacity: .65;
              margin-top: 25px;
            }
            .states.flex .state .state__uom.ellipsis {
              color:  deepskyblue;
              font-size: 6em;
              font-weight: 500;
              opacity: .65;
              padding-left: 12px;
            }
5

Screen shots

image
image1920Ă—1160 65.9 KB

In this view, the color is correct (DeepSkyBlue)

image
image1920Ă—1160 104 KB

In this view, the text color is not the same as the above view even though it is specified as the same color. The line color however, is correct.

6

The code still contains stuff which just distracts like layout-card & plenty of unrelated card-mod code.
But anyway, you will not get SAME color since these elements in mini-graph-card have an opacity set. Use Code Inspector (or whatever it is called in your browser) to find out a proper way to style.

7

OK, so the Code Inspector suggestion actually helped. By poking around through the elements I was able to find one which was apparently overriding the opacity I specified. I’m guessing that’s the “cascading” part of CSS. Fixed the issue by adding “.ellipsis” to the .header .name element on the mini-graph card as follows:

            .header .name .ellipsis {
              color: deepskyblue;
              opacity: 1;
              font-weight: 500;
              font-size: 6em;
            }

Then the color rendered as I intended.

1 Like