Richie1972
(Richard Rogers)
April 26, 2021, 3:18pm
1
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.
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).
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
(dimes)
May 22, 2021, 11:50am
2
Hi @Richie1972 , do you have a solution already?
Richie1972
(Richard Rogers)
May 22, 2021, 2:19pm
3
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
(dimes)
May 23, 2021, 5:15pm
4
And inside the f7-card you are using transparent list and list-items?
Richie1972
(Richard Rogers)
May 23, 2021, 5:43pm
5
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