Unable to Set oh-list-card Background to Transparent

Richie1972 · April 26, 2021, 3:18pm

Hi,
I’ve created a widget with a accordion list, but I’m not able to set the background to transparent to match the rest of the page.
2021-04-26 16_06_20-openHAB - oh-list-card-01

uid: Lighting V1.1 Details Card
timestamp: Apr 24, 2021, 10:13:36 PM
component: oh-list-card
config:
  accordionList: true
  bgColor: transparent
  style:
    padding: 0px
    width: 270px
    margin: 0px auto
slots:
  default:
    - component: oh-list-item
      config:
        title: Ground Floor
        accordionItemOpened: true
        style:
          background: transparent
          backdrop-filter: blur(5px) brightness(50%)
          padding: 0px
          width: 270px
          margin: 0px auto
      slots:
        accordion:
          - component: f7-card
            config:
              style:
                background: transparent
                backdrop-filter: blur(5px) brightness(50%)
            slots:
              default:
                - component: f7-row
                  config:
                    class:
                      - display-flex
                    style:
                      fontSize: 12px
                      color: white
                      background: rgba(255, 255, 255, 0.2)
                      padding: 0px
                      margin: 0px auto
                      width: 250px
                  slots:
                    default:
                      - component: Label
                        config:
                          text: Lounge
                          style:
                            padding: 3px
                - component: f7-row
                  config:
                    class:
                      - display-flex
                    style:
                      fontSize: 12px
                      padding: 4px
                      margin-top: 4px
                      margin: 0px auto
                      width: 250px
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: lightbulb
                          color: yellow
                          size: 20
                          class:
                            - margin-right
                      - component: Label
                        config:
                          text: Main Light
                      - component: oh-toggle
                        config:
                          item: AUTOSWLOUNGE01_Power

I can set it to another colour (eg blue).
2021-04-26 16_10_33-openHAB - oh-list-card-02

uid: Lighting V1.1 Details Card
timestamp: Apr 24, 2021, 10:13:36 PM
component: oh-list-card
config:
  accordionList: true
  bgColor: blue
  style:
    padding: 0px
    width: 270px
    margin: 0px auto
slots:
  default:
    - component: oh-list-item
      config:
        title: Ground Floor
        accordionItemOpened: true
        style:
          background: transparent
          backdrop-filter: blur(5px) brightness(50%)
          padding: 0px
          width: 270px
          margin: 0px auto
      slots:
        accordion:
          - component: f7-card
            config:
              style:
                background: transparent
                backdrop-filter: blur(5px) brightness(50%)
            slots:
              default:
                - component: f7-row
                  config:
                    class:
                      - display-flex
                    style:
                      fontSize: 12px
                      color: white
                      background: rgba(255, 255, 255, 0.2)
                      padding: 0px
                      margin: 0px auto
                      width: 250px
                  slots:
                    default:
                      - component: Label
                        config:
                          text: Lounge
                          style:
                            padding: 3px
                - component: f7-row
                  config:
                    class:
                      - display-flex
                    style:
                      fontSize: 12px
                      padding: 4px
                      margin-top: 4px
                      margin: 0px auto
                      width: 250px
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: lightbulb
                          color: yellow
                          size: 20
                          class:
                            - margin-right
                      - component: Label
                        config:
                          text: Main Light
                      - component: oh-toggle
                        config:
                          item: AUTOSWLOUNGE01_Power

Has anyone got round this?

Thanks,
Richie

dimes · May 22, 2021, 11:50am

Hi @Richie1972 , do you have a solution already?

Richie1972 · May 22, 2021, 2:19pm

Hi,
I’ve wrapped it in a f7-card, so now I just have to put up with a non-transparent background on the visible part
It’s not ideal, but will do until a proper fix can be found.

Thanks,
Richie

dimes · May 23, 2021, 5:15pm

And inside the f7-card you are using transparent list and list-items?

Richie1972 · May 23, 2021, 5:43pm

Hi,
This is the full widget:

uid: Lighting V1.1 Details Card
timestamp: May 2, 2021, 10:00:54 PM
component: f7-card
config:
  style:
    background: transparent
    backdrop-filter: blur(5px) brightness(50%)
    padding: 0px
    width: 290px
    margin: 0px auto
slots:
  default:
    - component: oh-list-card
      config:
        accordionList: true
        style:
          backdrop-filter: blur(5px) brightness(50%)
          padding: 0px
          width: 290px
          margin: 0px auto
      slots:
        default:
          - component: oh-list-item
            config:
              title: Ground Floor
              accordionItemOpened: true
              style:
                background: transparent
                backdrop-filter: blur(5px) brightness(50%)
                padding: 0px
                width: 270px
                margin: 0px auto
            slots:
              accordion:
                - component: f7-card
                  config:
                    style:
                      background: transparent
                      backdrop-filter: blur(5px) brightness(50%)
                      width: 260px
                      padding: 0px
                      margin: 0px auto
                  slots:
                    default:
                      - component: f7-row
                        config:
                          class:
                            - display-flex
                          style:
                            fontSize: 12px
                            color: white
                            background: rgba(255, 255, 255, 0.2)
                            padding: 0px
                            margin: 0px auto
                            width: 250px
                        slots:
                          default:
                            - component: Label
                              config:
                                text: Lounge
                                style:
                                  padding: 3px
                      - component: f7-row
                        config:
                          class:
                            - display-flex
                          style:
                            fontSize: 12px
                            padding: 4px
                            margin-top: 4px
                            margin: 0px auto
                            width: 250px
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                f7: lightbulb
                                color: yellow
                                size: 20
                                class:
                                  - margin-right
                            - component: Label
                              config:
                                text: Main Light
                            - component: oh-toggle
                              config:
                                item: AUTOSWLOUNGE01_Power
                      - component: f7-row
                        config:
                          class:
                            - display-flex
                          style:
                            fontSize: 12px
                            padding: 4px
                            margin: 0px auto
                            width: 250px
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                f7: lightbulb
                                color: yellow
                                size: 20
                                class:
                                  - margin-right
                            - component: Label
                              config:
                                text: Table Light 1
                            - component: oh-slider
                              config:
                                item: AUTODIMLOUNGE1_Dimmer
                                vertical: false
                                scale: false
                                max: 100
                                min: 0
                                style:
                                  width: 90px
                                  margin-left: 5px
                                  margin-right: 5px
                            - component: oh-toggle
                              config:
                                item: AUTODIMLOUNGE1_Power
                      - component: f7-row
                        config:
                          class:
                            - display-flex
                          style:
                            fontSize: 12px
                            padding: 4px
                            margin: 0px auto
                            width: 250px
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                f7: lightbulb
                                color: yellow
                                size: 20
                                class:
                                  - margin-right
                            - component: Label
                              config:
                                text: Table Light 2
                            - component: oh-slider
                              config:
                                item: AUTODIMLOUNGE2_Dimmer
                                vertical: false
                                scale: false
                                max: 100
                                min: 0
                                style:
                                  width: 90px
                                  margin-left: 5px
                                  margin-right: 5px
                            - component: oh-toggle
                              config:
                                item: AUTODIMLOUNGE2_Power
                      - component: f7-row
                        config:
                          class:
                            - display-flex
                          style:
                            fontSize: 12px
                            padding: 4px
                            margin: 0px auto
                            width: 250px
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                f7: lightbulb
                                color: yellow
                                size: 20
                                class:
                                  - margin-right
                            - component: Label
                              config:
                                text: Table Light 3
                            - component: oh-slider
                              config:
                                item: AUTODIMLOUNGE3_Dimmer
                                vertical: false
                                scale: false
                                max: 100
                                min: 0
                                style:
                                  width: 90px
                                  margin-left: 5px
                                  margin-right: 5px
                            - component: oh-toggle
                              config:
                                item: AUTODIMLOUNGE3_Power
                      - component: f7-row
                        config:
                          class:
                            - display-flex
                          style:
                            fontSize: 12px
                            color: white
                            background: rgba(255, 255, 255, 0.2)
                            padding: 0px
                            margin: 0px auto
                            width: 250px
                        slots:
                          default:
                            - component: Label
                              config:
                                text: Office
                                style:
                                  padding: 3px
                      - component: f7-row
                        config:
                          class:
                            - display-flex
                          style:
                            fontSize: 12px
                            padding: 4px
                            margin-top: 4px
                            margin: 0px auto
                            width: 250px
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                f7: lightbulb
                                color: yellow
                                size: 20
                                class:
                                  - margin-right
                            - component: Label
                              config:
                                text: Main Light 1
                            - component: oh-toggle
                              config:
                                item: AUTOSWOFFICE1_Power
                      - component: f7-row
                        config:
                          class:
                            - display-flex
                          style:
                            fontSize: 12px
                            padding: 4px
                            margin-top: 4px
                            margin: 0px auto
                            width: 250px
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                f7: lightbulb
                                color: yellow
                                size: 20
                                class:
                                  - margin-right
                            - component: Label
                              config:
                                text: Main Light 2
                            - component: oh-toggle
                              config:
                                item: AUTOSWOFFICE2_Power
                      - component: f7-row
                        config:
                          class:
                            - display-flex
                          style:
                            fontSize: 12px
                            padding: 4px
                            margin: 0px auto
                            width: 250px
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                f7: lightbulb
                                color: yellow
                                size: 20
                                class:
                                  - margin-right
                            - component: Label
                              config:
                                text: Table Light 1
                            - component: oh-slider
                              config:
                                item: AUTODIMOFFICE1_Dimmer
                                vertical: false
                                scale: false
                                max: 100
                                min: 0
                                style:
                                  width: 90px
                                  margin-left: 5px
                                  margin-right: 5px
                            - component: oh-toggle
                              config:
                                item: AUTODIMOFFICE1_Power
                      - component: f7-row
                        config:
                          class:
                            - display-flex
                          style:
                            fontSize: 12px
                            color: white
                            background: rgba(255, 255, 255, 0.2)
                            padding: 0px
                            margin: 0px auto
                            width: 250px
                        slots:
                          default:
                            - component: Label
                              config:
                                text: Kitchen
                                style:
                                  padding: 3px
                      - component: f7-row
                        config:
                          class:
                            - display-flex
                          style:
                            fontSize: 12px
                            padding: 4px
                            margin-top: 4px
                            margin: 0px auto
                            width: 250px
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                f7: lightbulb
                                color: yellow
                                size: 20
                                class:
                                  - margin-right
                            - component: Label
                              config:
                                text: Main Light
                            - component: oh-toggle
                              config:
                                item: AUTOSWKITCHEN1_Power
                      - component: f7-row
                        config:
                          class:
                            - display-flex
                          style:
                            fontSize: 12px
                            color: white
                            background: rgba(255, 255, 255, 0.2)
                            padding: 0px
                            margin: 0px auto
                            width: 250px
                        slots:
                          default:
                            - component: Label
                              config:
                                text: Catio
                                style:
                                  padding: 3px
                      - component: f7-row
                        config:
                          class:
                            - display-flex
                          style:
                            fontSize: 12px
                            padding: 4px
                            margin-top: 4px
                            margin: 0px auto
                            width: 250px
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                f7: lightbulb
                                color: yellow
                                size: 20
                                class:
                                  - margin-right
                            - component: Label
                              config:
                                text: Light 1
                            - component: oh-toggle
                              config:
                                item: AUTOCTRLCATIO01_Power1
                      - component: f7-row
                        config:
                          class:
                            - display-flex
                          style:
                            fontSize: 12px
                            padding: 4px
                            margin-top: 4px
                            margin: 0px auto
                            width: 250px
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                f7: lightbulb
                                color: yellow
                                size: 20
                                class:
                                  - margin-right
                            - component: Label
                              config:
                                text: Light 2
                            - component: oh-toggle
                              config:
                                item: AUTOCTRLCATIO02_Power1
                      - component: f7-row
                        config:
                          class:
                            - display-flex
                          style:
                            fontSize: 12px
                            padding: 4px
                            margin-top: 4px
                            margin: 0px auto
                            width: 250px
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                f7: lightbulb
                                color: yellow
                                size: 20
                                class:
                                  - margin-right
                            - component: Label
                              config:
                                text: Light 3
                            - component: oh-toggle
                              config:
                                item: AUTOCTRLCATIO03_Power1
                      - component: f7-row
                        config:
                          class:
                            - display-flex
                          style:
                            fontSize: 12px
                            padding: 4px
                            margin-top: 4px
                            margin: 0px auto
                            width: 250px
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                f7: lightbulb
                                color: yellow
                                size: 20
                                class:
                                  - margin-right
                            - component: Label
                              config:
                                text: Light 4
                            - component: oh-toggle
                              config:
                                item: AUTOCTRLCATIO04_Power1
                      - component: f7-row
                        config:
                          class:
                            - display-flex
                          style:
                            fontSize: 12px
                            color: white
                            background: rgba(255, 255, 255, 0.2)
                            padding: 0px
                            margin: 0px auto
                            width: 250px
                        slots:
                          default:
                            - component: Label
                              config:
                                text: Outside Rear
                                style:
                                  padding: 3px
                      - component: f7-row
                        config:
                          class:
                            - display-flex
                          style:
                            fontSize: 12px
                            padding: 4px
                            margin-top: 4px
                            margin: 0px auto
                            width: 250px
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                f7: lightbulb
                                color: yellow
                                size: 20
                                class:
                                  - margin-right
                            - component: Label
                              config:
                                text: Main Lights
                            - component: oh-toggle
                              config:
                                item: AUTOSWREARLIGHT_Power
          - component: oh-list-item
            config:
              title: First Floor
              accordionItemOpened: false
              style:
                background: transparent
                backdrop-filter: blur(5px) brightness(50%)
                padding: 0px
                width: 270px
                margin: 0px auto
            slots:
              accordion:
                - component: f7-card
                  config:
                    style:
                      background: transparent
                      backdrop-filter: blur(5px) brightness(50%)
                      width: 260px
                      padding: 0px
                      margin: 0px auto
                  slots:
                    default:
                      - component: f7-row
                        config:
                          class:
                            - display-flex
                          style:
                            fontSize: 12px
                            color: white
                            background: rgba(255, 255, 255, 0.2)
                            padding: 0px
                            margin: 0px auto
                            width: 250px
                        slots:
                          default:
                            - component: Label
                              config:
                                text: Front Bedroom
                                style:
                                  padding: 3px
                      - component: f7-row
                        config:
                          class:
                            - display-flex
                          style:
                            fontSize: 12px
                            padding: 4px
                            margin-top: 4px
                            margin: 0px auto
                            width: 250px
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                f7: lightbulb
                                color: yellow
                                size: 20
                                class:
                                  - margin-right
                            - component: Label
                              config:
                                text: Main Light
                            - component: oh-toggle
                              config:
                                item: AUTOSWFRONTBED1_Power2
                      - component: f7-row
                        config:
                          class:
                            - display-flex
                          style:
                            fontSize: 12px
                            padding: 4px
                            margin: 0px auto
                            width: 250px
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                f7: lightbulb
                                color: yellow
                                size: 20
                                class:
                                  - margin-right
                            - component: Label
                              config:
                                text: Caz's Light
                            - component: oh-toggle
                              config:
                                item: AUTOSWFRONTBED1_Power1
                      - component: f7-row
                        config:
                          class:
                            - display-flex
                          style:
                            fontSize: 12px
                            padding: 4px
                            margin: 0px auto
                            width: 250px
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                f7: lightbulb
                                color: yellow
                                size: 20
                                class:
                                  - margin-right
                            - component: Label
                              config:
                                text: Richie's Light
                            - component: oh-toggle
                              config:
                                item: AUTOSWFRONTBED1_Power3
                      - component: f7-row
                        config:
                          class:
                            - display-flex
                          style:
                            fontSize: 12px
                            color: white
                            background: rgba(255, 255, 255, 0.2)
                            padding: 0px
                            margin: 0px auto
                            width: 250px
                        slots:
                          default:
                            - component: Label
                              config:
                                text: Bathroom
                                style:
                                  padding: 3px
                      - component: f7-row
                        config:
                          class:
                            - display-flex
                          style:
                            fontSize: 12px
                            padding: 4px
                            margin-top: 4px
                            margin: 0px auto
                            width: 250px
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                f7: lightbulb
                                color: yellow
                                size: 20
                                class:
                                  - margin-right
                            - component: Label
                              config:
                                text: Main Lights
                            - component: oh-toggle
                              config:
                                item: AUTOSWBATHROOM_Power
                      - component: f7-row
                        config:
                          class:
                            - display-flex
                          style:
                            fontSize: 12px
                            color: white
                            background: rgba(255, 255, 255, 0.2)
                            padding: 0px
                            margin: 0px auto
                            width: 250px
                        slots:
                          default:
                            - component: Label
                              config:
                                text: Landing
                                style:
                                  padding: 3px
                      - component: f7-row
                        config:
                          class:
                            - display-flex
                          style:
                            fontSize: 12px
                            padding: 4px
                            margin-top: 4px
                            margin: 0px auto
                            width: 250px
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                f7: lightbulb
                                color: yellow
                                size: 20
                                class:
                                  - margin-right
                            - component: Label
                              config:
                                text: Main Lights
                            - component: oh-toggle
                              config:
                                item: AUTOSWLANDING01_Power

Thanks,
Richie