Comments (1)
Did some experimenting, splitted the card_light_slider
into three different versions.
card_light_slider:
variables:
ulm_card_light_slider_name: "[[[ return entity.attributes.friendly_name ]]]"
show_icon: false
show_name: false
show_label: false
state:
- operator: template
value: "[[[ return entity.state == 'on' ]]]"
styles:
card:
- background-color: 'rgba(var(--color-background-yellow),var(--opacity-bg))'
styles:
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
custom_fields:
item1:
card:
type: 'custom:button-card'
template:
- icon_info
- light
entity: "[[[ return entity.entity_id ]]]"
name: "[[[ return variables.ulm_card_light_slider_name ]]]"
styles:
card:
- box-shadow: none
- border-radius: var(--border-radius) var(--border-radius) 0px 0px
- padding: 0px
item2:
card:
type: 'custom:my-slider'
entity: '[[[ return entity.entity_id ]]]'
radius: 14px
height: 42px
mainSliderColor: rgba(var(--color-yellow),1)
secondarySliderColor: rgba(var(--color-yellow),0.2)
mainSliderColorOff: rgba(var(--color-theme),0.05)
secondarySliderColorOff: rgba(var(--color-theme),0.05)
thumbHorizontalPadding: '0px'
thumbVerticalPadding: '0px'
thumbWidth: 0px
card_mod:
style: |
ha-card {
border-radius: 14px;
box-shadow: none;
}
card_light_slider_collapse:
variables:
ulm_card_light_slider_collapse_name: "[[[ return entity.attributes.friendly_name ]]]"
show_icon: false
show_name: false
show_label: false
state:
- operator: template
value: "[[[ return entity.state == 'on' ]]]"
styles:
grid:
- row-gap: 12px
card:
- background-color: 'rgba(var(--color-background-yellow),var(--opacity-bg))'
styles:
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
custom_fields:
item1:
card:
type: 'custom:button-card'
template:
- icon_info
- light
entity: "[[[ return entity.entity_id ]]]"
name: "[[[ return variables.ulm_card_light_slider_name ]]]"
styles:
card:
- box-shadow: none
- border-radius: var(--border-radius) var(--border-radius) 0px 0px
- padding: 0px
item2:
card:
type: conditional
conditions:
- entity: "[[[ return entity.entity_id ]]]"
state: 'on'
card:
type: 'custom:my-slider'
entity: '[[[ return entity.entity_id ]]]'
radius: 14px
height: 42px
mainSliderColor: rgba(var(--color-yellow),1)
secondarySliderColor: rgba(var(--color-yellow),0.2)
mainSliderColorOff: rgba(var(--color-theme),0.05)
secondarySliderColorOff: rgba(var(--color-theme),0.05)
thumbHorizontalPadding: '0px'
thumbVerticalPadding: '0px'
thumbWidth: 0px
card_mod:
style: |
ha-card {
border-radius: 14px;
box-shadow: none;
}
card_light_slider_horizontal:
variables:
ulm_card_light_slider_horizontal_name: "[[[ return entity.attributes.friendly_name ]]]"
show_icon: false
show_name: false
show_label: false
state:
- operator: template
value: "[[[ return entity.state == 'on' ]]]"
styles:
card:
- background-color: 'rgba(var(--color-background-yellow),var(--opacity-bg))'
styles:
grid:
- grid-template-areas: '"item1 item2"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
custom_fields:
item1:
card:
type: 'custom:button-card'
template:
- icon_info
- light
entity: "[[[ return entity.entity_id ]]]"
name: "[[[ return variables.ulm_card_light_slider_name ]]]"
styles:
card:
- box-shadow: none
- border-radius: var(--border-radius) var(--border-radius) 0px 0px
- padding: 0px
item2:
card:
type: 'custom:my-slider'
entity: '[[[ return entity.entity_id ]]]'
radius: 14px
height: 42px
mainSliderColor: rgba(var(--color-yellow),1)
secondarySliderColor: rgba(var(--color-yellow),0.2)
mainSliderColorOff: rgba(var(--color-theme),0.05)
secondarySliderColorOff: rgba(var(--color-theme),0.05)
thumbHorizontalPadding: '0px'
thumbVerticalPadding: '0px'
thumbWidth: 0px
card_mod:
style: |
ha-card {
border-radius: 14px;
box-shadow: none;
}
Need to clean this up and inherit from each other, but otherwise ready to go.
What do you guys think?
from ui.
Related Issues (20)
- Custom-card imswel person in wrong language
- Update weather entity usage due to removal of forecast property. HOT 1
- Unable to configure - add new custom cards via integration HOT 20
- Collapse Media Players in an idle state
- The dependencies list in the download section is missing dependencies
- Button confirmation not working on whole button
- Lock Card Custom-card doesn't support binary battery sensors
- Error: Detected blocking call to open inside the event loop HOT 26
- Blocking call stops Lovelace and makes HA crash HOT 2
- I have this in the journal of HA core after freeze of HA and auto restart HOT 1
- Crash HA on enabling integration HOT 26
- Detected blocking call to open inside the event loop by custom integration 'ui_lovelace_minimalist' HOT 2
- Upcoming release 2024.7.0b2 breaks chip styling HOT 1
- Enable the ability to configure community cards with this integrations, Does require GitHub authentication//Enabling failed
- popup not working in adaptive dashboard HOT 1
- Cannot change icon in custom_esh_room card HOT 1
- card_thermostat gives error when stepping temp up or down manually HOT 7
- Changing configuration settings in integration crashes HA HOT 5
- Add currency symbol position option to power consumption chip
- 'ui_lovelace_minimalist' calls hass.http.register_static_path which is deprecated because it does blocking I/O in the event loop
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ui.