API tools faq
paste
Advertisement
fablav

Room Card minimalistic style mini size

fablav
Mar 29th, 2024
78
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
YAML 36.68 KB | Software | 0 0
raw download clone embed print report
  1. type: vertical-stack
  2. cards:
  3.   - square: false
  4.     type: grid
  5.     columns: 2
  6.     cards:
  7.       - type: custom:button-card
  8.         name: Ingresso
  9.         icon: hue:room-hallway
  10.         entity: light.ingresso
  11.         show_label: true
  12.         label: |
  13.          [[[
  14.             if (states['sensor.porta_ingresso'].state === 'Porta aperta')
  15.             return states['sensor.porta_ingresso'].state
  16.             else if (states['light.ingresso'].state === 'on')
  17.             return "Luci accese"
  18.             else if (states['light.ingresso'].state === 'off')
  19.             return 'Luci spente'
  20.             else return "Luci non disponibili"
  21.           ]]]
  22.         tap_action:
  23.           action: none
  24.         double_tap_action:
  25.           action: toggle
  26.         custom_fields:
  27.           btn:
  28.             card:
  29.               type: custom:mushroom-chips-card
  30.               alignment: end
  31.               chips:
  32.                 - type: template
  33.                   tap_action:
  34.                     action: toggle
  35.                   entity: light.luce_ingresso_1
  36.                   icon: |
  37.                    {% if is_state(entity, 'on') %}
  38.                       hue:bulb-group-spot-hung
  39.                     {% else %}
  40.                       hue:bulb-group-spot-hung
  41.                     {% endif %}
  42.                   icon_color: |
  43.                    {% if is_state(entity, 'on') %}
  44.                       black
  45.                     {% else %}
  46.                      
  47.                     {% endif %}
  48.                 - type: template
  49.                   tap_action:
  50.                     action: toggle
  51.                   entity: light.luce_ingresso_2
  52.                   icon: |
  53.                    {% if is_state(entity, 'on') %}
  54.                       hue:bulb-spot-hung
  55.                     {% else %}
  56.                       hue:bulb-spot-hung
  57.                     {% endif %}
  58.                   icon_color: |
  59.                    {% if is_state(entity, 'on') %}
  60.                       black
  61.                     {% else %}
  62.                      
  63.                     {% endif %}
  64.                 - type: template
  65.                   tap_action:
  66.                     action: more-info
  67.                   entity: sensor.porta_ingresso
  68.                   icon: |
  69.                    {% if is_state(entity, 'Porta aperta') %}
  70.                       mdi:door
  71.                     {% else %}
  72.                       mdi:door-closed
  73.                     {% endif %}
  74.                   icon_color: |
  75.                    {% if is_state(entity, 'Porta aperta') %}
  76.                       black
  77.                     {% else %}
  78.                      
  79.                     {% endif %}
  80.               card_mod:
  81.                 style:
  82.                   mushroom-template-chip:nth-child(3)$:
  83.                     mushroom-chip$: |
  84.                      ha-card {
  85.                         --chip-background: {{ 'rgba(223,130,108, 1)' if is_state('sensor.porta_ingresso', 'Porta aperta') else 'rgba(223,130,108, 0.3)' }};
  86.                         padding: 0px !important;
  87.                         border-radius: 100px !important;
  88.                       }
  89.                     .: |
  90.                      ha-state-icon {
  91.                         perspective: 45px;
  92.                         animation: {{ 'open 6s ease-in-out infinite' if is_state('sensor.porta_ingresso', 'Porta aperta') }};
  93.                         transform-origin: 30%;
  94.                       }
  95.                       @keyframes open {
  96.                         0%, 66% { transform: rotateY(0deg); }
  97.                         33% { transform: rotateY(-120deg); }
  98.                       }
  99.                       ha-icon {
  100.                         perspective: 45px;
  101.                       }
  102.                   mushroom-template-chip:nth-child(2)$:
  103.                     mushroom-chip$: |
  104.                      ha-card {
  105.                         --chip-background: {{ 'rgba(235, 204, 52, 1)' if is_state('light.luce_ingresso_2', 'on') else 'rgba(1235, 204, 52, 0.3)' }};
  106.                         animation: {{ 'ping 2s ease-out infinite' if is_state('light.luce_ingresso_2', 'on') }};
  107.                         padding: 0px !important;
  108.                         ;
  109.                         border-radius: 100px !important;
  110.                       }
  111.                       @keyframes ping {
  112.                         0% {
  113.                           box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
  114.                         }
  115.                         100% {
  116.                           box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
  117.                         }
  118.                       }
  119.                       ha-card:active {
  120.                         transform: translateY(1.5px);
  121.                         transition: 0s;
  122.                         box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
  123.                       }
  124.                   mushroom-template-chip:nth-child(1)$:
  125.                     mushroom-chip$: |
  126.                      ha-card {
  127.                         --chip-background: {{ 'rgba(235, 204, 52, 1)' if is_state('light.luce_ingresso_1', 'on') else 'rgba(1235, 204, 52, 0.3)' }};
  128.                         animation: {{ 'ping 2s ease-out infinite' if is_state('light.luce_ingresso_1', 'on') }};
  129.                         padding: 0px !important;
  130.                         ;
  131.                         border-radius: 100px !important;
  132.                       }
  133.                       @keyframes ping {
  134.                         0% {
  135.                           box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
  136.                         }
  137.                         100% {
  138.                           box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
  139.                         }
  140.                       }
  141.                       ha-card:active {
  142.                         transform: translateY(1.5px);
  143.                         transition: 0s;
  144.                         box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
  145.                       }
  146.         styles:
  147.           grid:
  148.             - grid-template-areas: '"btn btn btn" "i n n" "i l l"'
  149.             - grid-template-columns: min-content 1fr 1fr
  150.             - grid-template-rows: 2fr min-content min-content
  151.           img_cell:
  152.             - justify-content: center
  153.             - position: absolute
  154.             - width: 60px
  155.             - height: 60px
  156.             - left: 0
  157.             - bottom: 0
  158.             - margin: 0px 0px -10px -10px
  159.             - background: '#836FFF'
  160.             - border-radius: 200px
  161.           icon:
  162.             - width: 30px
  163.             - color: black
  164.             - opacity: '0.6'
  165.           card:
  166.             - height: 96px
  167.             - padding: 10px 10px 12px 0px
  168.             - box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
  169.           custom_fields:
  170.             btn:
  171.               - justify-content: start
  172.               - align-self: start
  173.           name:
  174.             - justify-self: start
  175.             - align-self: start
  176.             - font-size: 16px
  177.             - font-weight: 500
  178.             - padding-top: 3px
  179.             - padding-left: 65px
  180.           label:
  181.             - min-height: 13px
  182.             - justify-self: start
  183.             - align-self: start
  184.             - font-size: 13px
  185.             - font-weight: 300
  186.             - padding-left: 65px
  187.             - opacity: '0.7'
  188.         state:
  189.           - value: 'on'
  190.             styles:
  191.               card:
  192.                 - border: solid 5px rgba(131, 111, 255, 1)
  193.           - value: 'off'
  194.             styles:
  195.               card:
  196.                 - border: solid 5px rgba(131, 111, 255, 0.2)
  197.               img_cell:
  198.                 - background: '#836FFF'
  199.                 - opacity: 0.2
  200.           - value: unavailable
  201.             styles:
  202.               card:
  203.                 - border: solid 5px rgba(131, 111, 255, 0.2)
  204.               img_cell:
  205.                 - background: '#836FFF'
  206.                 - opacity: 0.2
  207.       - type: custom:button-card
  208.         name: Corridoio
  209.         icon: hue:room-other
  210.         entity: light.corridoio
  211.         show_label: true
  212.         label: |
  213.          [[[
  214.             if (states['light.corridoio'].state === 'on')
  215.             return "Luci accese"
  216.             else if (states['light.corridoio'].state === 'off')
  217.             return "Luci spente"
  218.             else return "Luci non disponibili"
  219.           ]]]
  220.         tap_action:
  221.           action: toggle
  222.         double_tap_action:
  223.           action: toggle
  224.         custom_fields:
  225.           btn:
  226.             card:
  227.               type: custom:mushroom-chips-card
  228.               alignment: end
  229.               chips:
  230.                 - type: template
  231.                   tap_action:
  232.                     action: toggle
  233.                   entity: light.armadio
  234.                   icon: |
  235.                    {% if is_state(entity, 'on') %}
  236.                       mdi:hanger
  237.                     {% else %}
  238.                       mdi:hanger
  239.                     {% endif %}
  240.                   icon_color: |
  241.                    {% if is_state(entity, 'on') %}
  242.                       black
  243.                     {% else %}
  244.                      
  245.                     {% endif %}
  246.                 - type: template
  247.                   tap_action:
  248.                     action: toggle
  249.                   entity: light.scarpiera
  250.                   icon: |
  251.                    {% if is_state(entity, 'on') %}
  252.                       mdi:shoe-sneaker
  253.                     {% else %}
  254.                       mdi:shoe-sneaker
  255.                     {% endif %}
  256.                   icon_color: |
  257.                    {% if is_state(entity, 'on') %}
  258.                       black
  259.                     {% else %}
  260.                      
  261.                     {% endif %}
  262.                 - type: template
  263.                   tap_action:
  264.                     action: more-info
  265.                   entity: binary_sensor.lavatrice_run
  266.                   icon: mdi:washing-machine
  267.                   icon_color: |
  268.                    {% if is_state(entity, 'on') %}
  269.                       orange
  270.                     {% else %}
  271.                      
  272.                     {% endif %}
  273.               card_mod:
  274.                 style:
  275.                   mushroom-template-chip:nth-child(1)$:
  276.                     mushroom-chip$: |
  277.                      ha-card {
  278.                         --chip-background: {{ 'rgba(219, 145, 79, 1)' if is_state('light.armadio', 'on') else 'rgba(219, 145, 79, 0.3)' }};
  279.                         animation: {{ 'ping 2s ease-out infinite' if is_state('light.armadio', 'on') }};
  280.                         padding: 0px !important;
  281.                         border-radius: 100px !important;
  282.                       }
  283.                       @keyframes ping {
  284.                         0% {
  285.                           box-shadow: 0 0 5px 1px rgba(219, 145, 79, 1);
  286.                         }
  287.                         100% {
  288.                           box-shadow: 0 0 5px 10px rgba(219, 145, 79, 1), 0);
  289.                         }
  290.                       }
  291.                     .: |
  292.                      ha-state-icon {
  293.                         animation: {{ 'scan 4s ease-in-out infinite' if is_state('light.armadio', 'on') }};
  294.                       }
  295.                       @keyframes scan {
  296.                         0%, 100% { transform: rotate(20deg); }
  297.                         50% { transform: rotate(-15deg); }
  298.                       }
  299.                       ha-card:active {
  300.                         transform: translateY(1.5px);
  301.                         transition: 0s;
  302.                         box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
  303.                       }
  304.                   mushroom-template-chip:nth-child(2)$:
  305.                     mushroom-chip$: |
  306.                      ha-card {
  307.                         --chip-background: {{ 'rgba(166, 207, 152, 1)' if is_state('light.scarpiera', 'on') else 'rgba(166, 207, 152, 0.3)' }};
  308.                         animation: {{ 'ping 2s ease-out infinite' if is_state('light.scarpiera', 'on') }};
  309.                         padding: 0px !important;
  310.                         border-radius: 100px !important;
  311.                       }
  312.                       @keyframes ping {
  313.                         0% {
  314.                           box-shadow: 0 0 5px 1px rgba(166, 207, 152, 1);
  315.                         }
  316.                         100% {
  317.                           box-shadow: 0 0 5px 10px rgba(166, 207, 152, 1), 0);
  318.                         }
  319.                       }
  320.                     .: |
  321.                      ha-state-icon {
  322.                         animation: {{ 'scan 4s ease-in-out infinite' if is_state('light.scarpiera', 'on') }};
  323.                       }
  324.                       @keyframes scan {
  325.                         0%, 100% { transform: rotate(20deg); }
  326.                         50% { transform: rotate(-15deg); }
  327.                       }
  328.                       ha-card:active {
  329.                         transform: translateY(1.5px);
  330.                         transition: 0s;
  331.                         box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
  332.                       }
  333.                   mushroom-template-chip:nth-child(3)$:
  334.                     mushroom-chip$: |
  335.                      ha-card {
  336.                         --chip-background: {{ 'rgba(181, 235, 143, 1)' if is_state('binary_sensor.lavatrice_run','on') else 'rgba(181, 235, 143, 0.3)' }};
  337.                         animation: {{ 'ping 2s ease-out infinite' if is_state('binary_sensor.lavatrice_run', 'on') }};
  338.                         padding: 0px !important;
  339.                         border-radius: 100px !important;
  340.                       }
  341.                       @keyframes ping {
  342.                         0% {
  343.                           box-shadow: 0 0 5px 1px rgba(181, 235, 143, 1);
  344.                         }
  345.                         100% {
  346.                           box-shadow: 0 0 5px 10px rgba(181, 235, 143, 1), 0);
  347.                         }
  348.                       }
  349.                     .: |
  350.                      ha-state-icon {
  351.                         animation: {{ 'shake 400ms ease-in-out infinite, drum 2s ease infinite' if is_state('binary_sensor.lavatrice_run','on') }};
  352.                         transform-origin: 50% 110%;
  353.                       } @keyframes shake {
  354.                         0%, 100% { transform: translate(0, 0) rotate(0); }
  355.                         20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
  356.                         40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
  357.                         60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
  358.                         80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
  359.                       } @keyframes drum {
  360.                         50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
  361.                       }
  362.         styles:
  363.           grid:
  364.             - grid-template-areas: '"btn btn btn" "i n n" "i l l"'
  365.             - grid-template-columns: min-content 1fr 1fr
  366.             - grid-template-rows: 2fr min-content min-content
  367.           img_cell:
  368.             - justify-content: center
  369.             - position: absolute
  370.             - width: 60px
  371.             - height: 60px
  372.             - left: 0
  373.             - bottom: 0
  374.             - margin: 0px 0px -10px -10px
  375.             - background: '#ebf595'
  376.             - border-radius: 200px
  377.           icon:
  378.             - width: 30px
  379.             - color: black
  380.             - opacity: '0.6'
  381.           card:
  382.             - height: 96px
  383.             - padding: 10px 10px 12px 0px
  384.             - box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
  385.           custom_fields:
  386.             btn:
  387.               - justify-content: start
  388.               - align-self: start
  389.           name:
  390.             - justify-self: start
  391.             - align-self: start
  392.             - font-size: 16px
  393.             - font-weight: 500
  394.             - padding-top: 3px
  395.             - padding-left: 65px
  396.           label:
  397.             - min-height: 13px
  398.             - justify-self: start
  399.             - align-self: start
  400.             - font-size: 13px
  401.             - font-weight: 300
  402.             - padding-left: 65px
  403.             - opacity: '0.7'
  404.         state:
  405.           - value: 'on'
  406.             styles:
  407.               card:
  408.                 - border: solid 5px rgba(235, 245, 149, 1)
  409.           - value: 'off'
  410.             styles:
  411.               card:
  412.                 - border: solid 5px rgba(235, 245, 149, 0.2)
  413.               img_cell:
  414.                 - background: '#ebf595'
  415.                 - opacity: 0.2
  416.           - value: unavailable
  417.             styles:
  418.               card:
  419.                 - border: solid 5px rgba(235, 245, 149, 0.2)
  420.               img_cell:
  421.                 - background: '#ebf595'
  422.                 - opacity: 0.2
  423.       - type: custom:button-card
  424.         name: Studio
  425.         icon: hue:room-computer
  426.         entity: light.studio
  427.         show_label: true
  428.         label: |
  429.          [[[
  430.             if (states['light.studio'].state === 'on')
  431.             return "Luci accese"
  432.             else if (states['light.studio'].state === 'off')
  433.             return "Luci spente"
  434.             else return "Luci non disponibili"
  435.           ]]]
  436.         tap_action:
  437.           action: none
  438.         double_tap_action:
  439.           action: toggle
  440.         custom_fields:
  441.           btn:
  442.             card:
  443.               type: custom:mushroom-chips-card
  444.               alignment: end
  445.               chips:
  446.                 - type: template
  447.                   tap_action:
  448.                     action: toggle
  449.                   entity: light.luce_studio
  450.                   icon: |
  451.                    {% if is_state(entity, 'on') %}
  452.                       mdi:lightbulb-on
  453.                     {% else %}
  454.                       mdi:lightbulb-outline
  455.                     {% endif %}
  456.                   icon_color: |
  457.                    {% if is_state(entity, 'on') %}
  458.                       black
  459.                     {% else %}
  460.                      
  461.                     {% endif %}
  462.                 - type: template
  463.                   tap_action:
  464.                     action: toggle
  465.                   entity: light.luce_scrivania
  466.                   icon: |
  467.                    {% if is_state(entity, 'on') %}
  468.                       hue:desk-lamp
  469.                     {% else %}
  470.                       hue:desk-lamp
  471.                     {% endif %}
  472.                   icon_color: |
  473.                    {% if is_state(entity, 'on') %}
  474.                       black
  475.                     {% else %}
  476.                      
  477.                     {% endif %}
  478.                 - type: template
  479.                   tap_action:
  480.                     action: more-info
  481.                   entity: media_player.echo_show_tina
  482.                   icon: |
  483.                    {% if is_state(entity, 'playing') %}
  484.                       mdi:speaker
  485.                     {% else %}
  486.                       phu:echo-show-5-gen-2
  487.                     {% endif %}
  488.                   icon_color: |
  489.                    {% if is_state(entity, 'playing') %}
  490.                       black
  491.                     {% else %}
  492.  
  493.                     {% endif %}
  494.               card_mod:
  495.                 style:
  496.                   mushroom-template-chip:nth-child(1)$:
  497.                     mushroom-chip$: |
  498.                      ha-card {
  499.                         --chip-background: {{ 'rgba(235, 204, 52, 1)' if is_state('light.luce_studio', 'on') else 'rgba(1235, 204, 52, 0.3)' }};
  500.                         animation: {{ 'ping 2s ease-out infinite' if is_state('light.luce_studio', 'on') }};
  501.                         padding: 0px !important;
  502.                         border-radius: 100px !important;
  503.                       }
  504.                       @keyframes ping {
  505.                         0% {
  506.                           box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
  507.                         }
  508.                         100% {
  509.                           box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
  510.                         }
  511.                       }
  512.                       ha-card:active {
  513.                         transform: translateY(1.5px);
  514.                         transition: 0s;
  515.                         box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
  516.                       }
  517.                     .: |
  518.                      ha-state-icon {
  519.                         animation: {{ 'illumination 2s infinite' if is_state('light.luce_studio', 'on') }};
  520.                       }
  521.                       @keyframes illumination {
  522.                         0%, 100% { clip-path: inset(0 0 0 0); }
  523.                         95% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
  524.                       }
  525.                   mushroom-template-chip:nth-child(2)$:
  526.                     mushroom-chip$: |
  527.                      ha-card {
  528.                         --chip-background: {{ 'rgba(166, 207, 152, 1)' if is_state('light.luce_scrivania', 'on') else 'rgba(166, 207, 152, 0.3)' }};
  529.                         animation: {{ 'ping 2s ease-out infinite' if is_state('light.luce_scrivania', 'on') }};
  530.                         padding: 0px !important;
  531.                         border-radius: 100px !important;
  532.                       }
  533.                       @keyframes ping {
  534.                         0% {
  535.                           box-shadow: 0 0 5px 1px rgba(166, 207, 152, 1);
  536.                         }
  537.                         100% {
  538.                           box-shadow: 0 0 5px 10px rgba(166, 207, 152, 1), 0);
  539.                         }
  540.                       }
  541.                     .: |
  542.                      ha-state-icon {
  543.                         animation: {{ 'scan 4s ease-in-out infinite' if is_state('light.luce_scrivania', 'on') }};
  544.                       }
  545.                       @keyframes scan {
  546.                         0%, 100% { transform: rotate(20deg); }
  547.                         50% { transform: rotate(-15deg); }
  548.                       }
  549.                       ha-card:active {
  550.                         transform: translateY(1.5px);
  551.                         transition: 0s;
  552.                         box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
  553.                       }
  554.                   mushroom-template-chip:nth-child(3)$:
  555.                     mushroom-chip$: |
  556.                      ha-card {
  557.                         --chip-background: {{ 'rgba(219, 145, 79, 1)' if is_state('media_player.echo_show_tina', 'playing') else 'rgba(219, 145, 79, 0.3)' }};
  558.                         animation: {{ 'ping 1.3s ease-out infinite, beat 1.3s ease-out infinite both;' if is_state('media_player.echo_show_tina', 'playing') }};
  559.                         padding: 0px !important;
  560.                         border-radius: 100px !important;
  561.                       }
  562.                       @keyframes ping {
  563.                         0% {
  564.                           box-shadow: 0 0 5px 1px rgba(219, 145, 79, 1);
  565.                         }
  566.                         100% {
  567.                           box-shadow: 0 0 5px 10px rgba(219, 145, 79, 1), 0);
  568.                         }
  569.                       }
  570.                       @keyframes beat {
  571.                         0% { transform: scale(1); }
  572.                         10% { transform: scale(1.1); }
  573.                         17% { transform: scale(1.05); }
  574.                         33% { transform: scale(1.25); }
  575.                         60% { transform: scale(1); }
  576.                       }
  577.                     .: |
  578.                      ha-state-icon {
  579.                         animation: {{ 'beat 1.3s ease-out infinite both;' if is_state('media_player.echo_show_tina', 'playing') }};
  580.                       }
  581.                       @keyframes beat {
  582.                         0% { transform: scale(1); }
  583.                         10% { transform: scale(1.1); }
  584.                         17% { transform: scale(1.05); }
  585.                         33% { transform: scale(1.25); }
  586.                         60% { transform: scale(1); }
  587.                       }
  588.                       ha-card:active {
  589.                         transform: translateY(1.5px);
  590.                         transition: 0s;
  591.                         box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
  592.                       }
  593.         styles:
  594.           grid:
  595.             - grid-template-areas: '"btn btn btn" "i n n" "i l l"'
  596.             - grid-template-columns: min-content 1fr 1fr
  597.             - grid-template-rows: 2fr min-content min-content
  598.           img_cell:
  599.             - justify-content: center
  600.             - position: absolute
  601.             - width: 60px
  602.             - height: 60px
  603.             - left: 0
  604.             - bottom: 0
  605.             - margin: 0px 0px -10px -10px
  606.             - background: '#F4D160'
  607.             - border-radius: 200px
  608.           icon:
  609.             - width: 30px
  610.             - color: black
  611.             - opacity: '0.6'
  612.           card:
  613.             - height: 96px
  614.             - padding: 10px 10px 12px 0px
  615.             - box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
  616.           custom_fields:
  617.             btn:
  618.               - justify-content: start
  619.               - align-self: start
  620.           name:
  621.             - justify-self: start
  622.             - align-self: start
  623.             - font-size: 16px
  624.             - font-weight: 500
  625.             - padding-top: 3px
  626.             - padding-left: 65px
  627.           label:
  628.             - min-height: 13px
  629.             - justify-self: start
  630.             - align-self: start
  631.             - font-size: 13px
  632.             - font-weight: 300
  633.             - padding-left: 65px
  634.             - opacity: '0.7'
  635.         state:
  636.           - value: 'on'
  637.             styles:
  638.               card:
  639.                 - border: solid 5px rgba(244, 209, 96, 1)
  640.           - value: 'off'
  641.             styles:
  642.               card:
  643.                 - border: solid 5px rgba(244, 209, 96, 0.2)
  644.               img_cell:
  645.                 - background: '#F4D160'
  646.                 - opacity: 0.2
  647.           - value: unavailable
  648.             styles:
  649.               card:
  650.                 - border: solid 5px rgba(244, 209, 96, 0.2)
  651.               img_cell:
  652.                 - background: '#F4D160'
  653.                 - opacity: 0.2
  654.       - type: custom:button-card
  655.         name: Bagni
  656.         icon: hue:room-computer
  657.         entity: light.bagni
  658.         show_label: true
  659.         label: |
  660.          [[[
  661.             if (states['light.bagni'].state === 'on')
  662.             return "Luci accese"
  663.             else if (states['light.bagni'].state === 'off')
  664.             return "Luci spente"
  665.             else return "Luci non disponibili"
  666.           ]]]
  667.         tap_action:
  668.           action: none
  669.         double_tap_action:
  670.           action: none
  671.         custom_fields:
  672.           btn:
  673.             card:
  674.               type: custom:mushroom-chips-card
  675.               alignment: end
  676.               chips:
  677.                 - type: template
  678.                   tap_action:
  679.                     action: toggle
  680.                   entity: light.luce_bagno_piccolo
  681.                   icon: |
  682.                    {% if is_state(entity, 'on') %}
  683.                       mdi:shower-head
  684.                     {% else %}
  685.                       mdi:shower-head
  686.                     {% endif %}
  687.                   icon_color: |
  688.                    {% if is_state(entity, 'on') %}
  689.                       black
  690.                     {% else %}
  691.                      
  692.                     {% endif %}
  693.                 - type: template
  694.                   tap_action:
  695.                     action: toggle
  696.                   entity: light.specchio_bagno_piccolo
  697.                   icon: |
  698.                    {% if is_state(entity, 'on') %}
  699.                       mdi:mirror-rectangle
  700.                     {% else %}
  701.                       mdi:mirror-rectangle
  702.                     {% endif %}
  703.                   icon_color: |
  704.                    {% if is_state(entity, 'on') %}
  705.                       black
  706.                     {% else %}
  707.                      
  708.                     {% endif %}
  709.                 - type: template
  710.                   tap_action:
  711.                     action: toggle
  712.                   entity: input_boolean.sensore_bagno
  713.                   icon: >
  714.                    {% if is_state(entity, 'off') %}
  715.                       phu:aqara-motion
  716.                     {% elif
  717.                     is_state('binary_sensor.lumi_lumi_sensor_motion_aq2_motion_2',
  718.                     'on') %}
  719.                       mdi:motion-sensor
  720.                     {% else %}
  721.                       phu:aqara-motion
  722.                     {% endif %}
  723.                   icon_color: |
  724.                    {% if is_state(entity, 'on') %}
  725.                       black
  726.                     {% else %}
  727.                     {% endif %}
  728.                 - type: template
  729.                   tap_action:
  730.                     action: toggle
  731.                   entity: light.luce_bagno_grande
  732.                   icon: |
  733.                    {% if is_state(entity, 'on') %}
  734.                       mdi:shower
  735.                     {% else %}
  736.                       mdi:shower
  737.                     {% endif %}
  738.                   icon_color: |
  739.                    {% if is_state(entity, 'on') %}
  740.                       black
  741.                     {% else %}
  742.                      
  743.                     {% endif %}
  744.               card_mod:
  745.                 style:
  746.                   mushroom-template-chip:nth-child(1)$:
  747.                     mushroom-chip$: |
  748.                      ha-card {
  749.                         --chip-background: {{ 'rgba(var(--rgb-amber), 1)' if is_state('light.luce_bagno_piccolo', 'on') else 'rgba(var(--rgb-amber), 0.3)' }};
  750.                         padding: 0px !important;
  751.                         border-radius: 100px !important;
  752.                       }
  753.                       ha-card:active {
  754.                         transform: translateY(1.5px);
  755.                         transition: 0s;
  756.                         box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
  757.                       }
  758.                     .: |
  759.                      ha-state-icon {
  760.                         animation: {{ 'clip 0.7s ease-out infinite' if is_state('light.luce_bagno_piccolo', 'on') }};
  761.                       }
  762.                       @keyframes clip {
  763.                         0% {clip-path: inset(0 0 45% 0); }
  764.                         100% { clip-path: inset(0 0 0 0); }
  765.                       }
  766.                   mushroom-template-chip:nth-child(2)$:
  767.                     mushroom-chip$: |
  768.                      ha-card {
  769.                         --chip-background: {{ 'rgba(126, 147, 247, 1)' if is_state('light.specchio_bagno_piccolo', 'on') else 'rgba(126, 147, 247, 0.3)' }};
  770.                         animation: {{ 'ping 2s ease-out infinite' if is_state('light.specchio_bagno_piccolo', 'on') }};
  771.                         padding: 0px !important;
  772.                         border-radius: 100px !important;
  773.                       }
  774.                       @keyframes ping {
  775.                         0% {
  776.                           box-shadow: 0 0 5px 1px rgba(110, 133, 245, 1);
  777.                         }
  778.                         100% {
  779.                           box-shadow: 0 0 5px 10px rgba(110, 133, 245, 1), 0);
  780.                         }
  781.                       }
  782.                     .: |
  783.                      ha-state-icon {
  784.                         animation: {{ 'scan 4s ease-in-out infinite' if is_state('light.specchio_bagno_piccolo', 'on') }};
  785.                       }
  786.                       @keyframes scan {
  787.                         0%, 100% { transform: rotate(20deg); }
  788.                         50% { transform: rotate(-15deg); }
  789.                       }
  790.                       ha-card:active {
  791.                         transform: translateY(1.5px);
  792.                         transition: 0s;
  793.                         box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
  794.                       }
  795.                   mushroom-template-chip:nth-child(3)$:
  796.                     mushroom-chip$: |
  797.                      ha-card {
  798.                         {% if states('input_boolean.sensore_bagno') == 'off' %}
  799.                           --chip-background: rgba(97, 150, 166, 0.3);
  800.                         {% elif not states('binary_sensor.lumi_lumi_sensor_motion_aq2_motion_2') == 'on' %}
  801.                           --chip-background: rgba(97, 150, 166, 1);
  802.                         {% else %}
  803.                           animation: motion 2s linear infinite;
  804.                         {% endif %}
  805.                         padding: 0px !important;
  806.                         border-radius: 100px !important;
  807.                       }
  808.                       @keyframes motion {
  809.                         0%, 100% { --chip-background: rgba(97, 150, 166, 0.8); }
  810.                         50% { --chip-background: rgba(97, 150, 166, 0.5); }
  811.                       }
  812.                     .: |
  813.                      ha-state-icon {
  814.                         {% if states('input_boolean.sensore_bagno') == 'on'and states('binary_sensor.lumi_lumi_sensor_motion_aq2_motion_2') == 'on' %}
  815.                         animation: clip 2s linear infinite;
  816.                         {% else %}
  817.                         {% endif %}
  818.                       }
  819.                       @keyframes clip {
  820.                         50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
  821.                       }
  822.                       ha-card:active {
  823.                         transform: translateY(1.5px);
  824.                         transition: 0s;
  825.                         box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
  826.                       }
  827.                   mushroom-template-chip:nth-child(4)$:
  828.                     mushroom-chip$: |
  829.                      ha-card {
  830.                         --chip-background: {{ 'rgba(166, 207, 152, 1)' if is_state('light.luce_bagno_grande', 'on') else 'rgba(166, 207, 152, 0.3)' }};
  831.                         animation: {{ 'ping 2s ease-out infinite' if is_state('light.luce_bagno_grande', 'on') }};
  832.                         padding: 0px !important;
  833.                         border-radius: 100px !important;
  834.                       }
  835.                       @keyframes ping {
  836.                         0% {
  837.                           box-shadow: 0 0 5px 1px rgba(166, 207, 152, 1);
  838.                         }
  839.                         100% {
  840.                           box-shadow: 0 0 5px 10px rgba(166, 207, 152, 1), 0);
  841.                         }
  842.                       }
  843.                     .: |
  844.                      ha-state-icon {
  845.                         animation: {{ 'scan 4s ease-in-out infinite' if is_state('light.luce_bagno_grande', 'on') }};
  846.                       }
  847.                       @keyframes scan {
  848.                         0%, 100% { transform: rotate(20deg); }
  849.                         50% { transform: rotate(-15deg); }
  850.                       }
  851.                       ha-card:active {
  852.                         transform: translateY(1.5px);
  853.                         transition: 0s;
  854.                         box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
  855.                       }
  856.         styles:
  857.           grid:
  858.             - grid-template-areas: '"btn btn btn" "i n n" "i l l"'
  859.             - grid-template-columns: min-content 1fr 1fr
  860.             - grid-template-rows: 2fr min-content min-content
  861.           img_cell:
  862.             - justify-content: center
  863.             - position: absolute
  864.             - width: 60px
  865.             - height: 60px
  866.             - left: 0
  867.             - bottom: 0
  868.             - margin: 0px 0px -10px -10px
  869.             - background: '#85a389'
  870.             - border-radius: 200px
  871.           icon:
  872.             - width: 30px
  873.             - color: black
  874.             - opacity: '0.6'
  875.           card:
  876.             - height: 96px
  877.             - padding: 10px 10px 12px 0px
  878.             - box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
  879.           custom_fields:
  880.             btn:
  881.               - justify-content: start
  882.               - align-self: start
  883.           name:
  884.             - justify-self: start
  885.             - align-self: start
  886.             - font-size: 16px
  887.             - font-weight: 500
  888.             - padding-top: 3px
  889.             - padding-left: 65px
  890.           label:
  891.             - min-height: 13px
  892.             - justify-self: start
  893.             - align-self: start
  894.             - font-size: 13px
  895.             - font-weight: 300
  896.             - padding-left: 65px
  897.             - opacity: '0.7'
  898.         state:
  899.           - value: 'on'
  900.             styles:
  901.               card:
  902.                 - border: solid 5px rgba(133, 163, 137, 1)
  903.           - value: 'off'
  904.             styles:
  905.               card:
  906.                 - border: solid 5px rgba(133, 163, 137, 0.2)
  907.               img_cell:
  908.                 - background: '#85a389'
  909.                 - opacity: 0.2
  910.           - value: unavailable
  911.             styles:
  912.               card:
  913.                 - border: solid 5px rgba(133, 163, 137, 0.2)
  914.               img_cell:
  915.                 - background: '#85a389'
  916.                 - opacity: 0.2
  917.  
Tags: ha
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!