交流一下基于Mushroom的手机端面板设计

bluefire1982

relliky 发表于 2023-1-8 04:46
我研究的没有你多。我就一行放两个增加效率。

https://bbs.hassbian.com/thread-17935-1-1.html

卡片变色可以通过card-mod实现。

relliky

bluefire1982 发表于 2023-9-9 11:17
卡片变色可以通过card-mod实现。

card-mod我好像就会点最基本的，跟CSS有关的就不知道怎么学习了。

而且我要卡片背景颜色根据实体开关来变化。可能还得加点别的卡片

bluefire1982

relliky 发表于 2023-9-9 17:45
card-mod我好像就会点最基本的，跟CSS有关的就不知道怎么学习了。

而且我要卡片背景颜色根据实体开关来变 ...

可以的，card-mod中用template。

card_mod:
  style: |
    ha-card {
      --ha-card-background: {% if is_state(config.entity, 'on') %} rgba(245, 238, 148); {% else  %} rgba(250, 250, 250); {% endif %};
      box-shadow: none;
    }

复制代码

relliky

bluefire1982 发表于 2023-9-10 10:29
可以的，card-mod中用template。

哇塞，这个可以有

relliky

bluefire1982 发表于 2023-9-10 10:29
可以的，card-mod中用template。

花了几个小时学习了一下card-mod

chrome里面可以调试还是很方便的，上手比我想象中的简单。。现在已经会找css变量了。 感谢

bluefire1982

relliky 发表于 2023-9-10 21:16
花了几个小时学习了一下card-mod

chrome里面可以调试还是很方便的，上手比我想象中的简单。。现在已经会 ...

高手！期待更完美的作品。

relliky

bluefire1982 发表于 2023-9-10 22:30
高手！期待更完美的作品。

做出来了，仿ios16的开灯变白，关灯变黑


代码如下

type: custom:mushroom-light-card
fill_container: true
use_light_color: true
show_brightness_control: true
show_color_control: true
show_color_temp_control: true
collapsible_controls: false
name: ' Lamp 1'
icon: ''
entity: light.master_room_lamp_1
card_mod:
  style: >
    :host {
           --ha-card-background:  {% if states(config.entity) in ['on'] %}
                                      rgba(245, 245, 245, 0.7)  
                                  {% else  %} 
                                      rgba(10, 10, 10, 0.4)  
                                  {% endif%};

           --primary-text-color:  {% if states(config.entity) in ['on'] %}
                                      black                                            
                                  {% else  %}
                                      white                                           
                                  {% endif%};

          --secondary-text-color : {% if states(config.entity) in ['on'] %}
                                      rgba(100, 100, 100, 1)
                                   {% else  %} 
                                      rgba(220, 220, 220, 1) 
                                   {% endif %};
    }

    ha-card > mushroom-card > div > mushroom-button:nth-child(2) {  
      --bg-color:   {% if states(config.entity) in ['on'] %} 
                        rgba(245, 245, 245, 0.4) 
                    {% else %} 
                        rgba(10, 10, 10, 0.4) 
                    {% endif %};
    }

    ha-card > mushroom-card > div > mushroom-button:nth-child(3) {  
      --bg-color:   {% if states(config.entity) in ['on'] %} 
                        rgba(245, 245, 245, 0.4) 
                    {% else %} 
                        rgba(10, 10, 10, 0.4) 
                    {% endif %};
    }

复制代码

感谢指点。还不够像ios16，再琢磨一下把icon颜色弄一下, 各个颜色还需要调整一下。不过那个等下周末再弄吧，可以睡觉咯

leon010

我来抄一下作业