API tools faq
paste
Advertisement
fablav

Room Card minimalistic style

fablav
Feb 18th, 2024 (edited)
1,057
0
Never
1
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
YAML 28.10 KB | Source Code | 0 0
raw download clone embed print report
  1. type: vertical-stack
  2. cards:
  3.   - type: custom:mushroom-title-card
  4.     title: Casa Fabio
  5.   - square: false
  6.     type: grid
  7.     cards:
  8.       - type: custom:button-card
  9.         name: Soggiorno
  10.         icon: mdi:sofa
  11.         entity: light.soggiorno
  12.         show_state: false
  13.         show_label: true
  14.         label: |
  15.          [[[
  16.             return states['sensor.broadlink_rm4_soggiorno_temperature'].state + "°C" + "<br>" + states['sensor.broadlink_rm4_soggiorno_humidity'].state + " %";
  17.           ]]]
  18.         tap_action:
  19.           action: none
  20.         double_tap_action:
  21.           action: toggle
  22.         custom_fields:
  23.           btn:
  24.             card:
  25.               type: custom:mushroom-chips-card
  26.               chips:
  27.                 - type: template
  28.                   tap_action:
  29.                     action: more-info
  30.                   entity: light.luce_soggiorno
  31.                   icon: |
  32.                    {% if is_state(entity, 'on') %}
  33.                       mdi:lightbulb-on
  34.                     {% else %}
  35.                       mdi:lightbulb-outline
  36.                     {% endif %}
  37.                   icon_color: |
  38.                    {% if is_state(entity, 'on') %}
  39.                       black
  40.                     {% else %}
  41.                      
  42.                     {% endif %}
  43.                 - type: template
  44.                   tap_action:
  45.                     action: more-info
  46.                   entity: vacuum.vacky
  47.                   icon: mdi:vacuum
  48.                 - type: template
  49.                   tap_action:
  50.                     action: more-info
  51.                   entity: camera.soggiorno
  52.                   icon: mdi:cctv
  53.               card_mod:
  54.                 style:
  55.                   mushroom-template-chip:nth-child(3)$:
  56.                     mushroom-chip$: |
  57.                      ha-card {
  58.                         --chip-background: {{ 'rgba(223,130,108, 1)' if is_state('sensor.agentdvr_soggiorno_persona_rilevata','on') else 'rgba(223,130,108, 0.3)' }};
  59.                         padding: 5px !important;
  60.                         border-radius: 100px !important;
  61.                       }
  62.                     .: |
  63.                      ha-state-icon {
  64.                         animation: scan 5s ease-in-out infinite;
  65.                         transform-origin: 90% 80%
  66.                       }
  67.                       @keyframes scan {
  68.                         0%, 100% { transform: rotate(20deg); }
  69.                         50% { transform: rotate(-15deg); }
  70.                       }
  71.                   mushroom-template-chip:nth-child(2)$:
  72.                     mushroom-chip$: |
  73.                      ha-card {
  74.                         --chip-background: {{ 'rgba(166, 207, 152, 0.3)' if is_state('vacuum.vacky', 'docked') else 'rgba(166, 207, 152, 1)' }};
  75.                         padding: 5px !important;
  76.                         border-radius: 100px !important;
  77.                       }
  78.                     .: |
  79.                      ha-state-icon {
  80.                         animation: {{ 'scan 5s ease-in-out infinite' if not is_state('vacuum.vacky', 'docked') }};
  81.                       }
  82.                       @keyframes scan {
  83.                         0%, 100% { transform: rotate(20deg); }
  84.                         50% { transform: rotate(-15deg); }
  85.                       }
  86.                   mushroom-template-chip:nth-child(1)$:
  87.                     mushroom-chip$: |
  88.                      ha-card {
  89.                         --chip-background: {{ 'rgba(235, 204, 52, 1)' if is_state('light.soggiorno', 'on') else 'rgba(1235, 204, 52, 0.3)' }};
  90.                         animation: {{ 'ping 2s ease-out infinite' if is_state('light.soggiorno', 'on') }};
  91.                         padding: 5px !important;
  92.                         border-radius: 100px !important;
  93.                       }
  94.                       @keyframes ping {
  95.                         0% {
  96.                           box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
  97.                         }
  98.                         100% {
  99.                           box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
  100.                         }
  101.                       }
  102.                       ha-card:active {
  103.                         transform: translateY(1.5px);
  104.                         transition: 0s;
  105.                         box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
  106.                       }
  107.                     .: |
  108.                      ha-state-icon {
  109.                         animation: {{ 'illumination 2s infinite' if is_state('light.soggiorno', 'on') }};
  110.                       }
  111.                       @keyframes illumination {
  112.                         0%, 100% { clip-path: inset(0 0 0 0); }
  113.                         95% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
  114.                       }
  115.         styles:
  116.           grid:
  117.             - grid-template-areas: '"n btn" "l btn" "i btn"'
  118.             - grid-template-columns: 1fr min-content
  119.             - grid-template-rows: min-content min-content 1fr
  120.           img_cell:
  121.             - justify-content: start
  122.             - position: absolute
  123.             - width: 150px
  124.             - height: 150px
  125.             - left: 0
  126.             - bottom: 0
  127.             - margin: 0 0 -30px -30px
  128.             - background: '#FFC47E'
  129.             - border-radius: 200px
  130.           icon:
  131.             - width: 60px
  132.             - color: black
  133.             - opacity: '0.6'
  134.           card:
  135.             - padding: 22px 8px 22px 22px
  136.           custom_fields:
  137.             btn:
  138.               - justify-content: end
  139.               - align-self: start
  140.           name:
  141.             - justify-self: start
  142.             - align-self: start
  143.             - font-size: 18px
  144.             - font-weight: 500
  145.             - color: null
  146.           label:
  147.             - min-height: 80px
  148.             - justify-self: start
  149.             - align-self: start
  150.             - font-size: 14px
  151.             - font-weight: 300
  152.             - opacity: '0.7'
  153.         state:
  154.           - value: 'off'
  155.             styles:
  156.               img_cell:
  157.                 - background: '#FFC47E'
  158.                 - opacity: 0.2
  159.           - value: unavailable
  160.             styles:
  161.               img_cell:
  162.                 - background: '#FFC47E'
  163.                 - opacity: 0.2
  164.       - type: custom:button-card
  165.         entity: light.cucina
  166.         name: Cucina
  167.         icon: hue:room-kitchen
  168.         show_state: true
  169.         tap_action:
  170.           action: none
  171.         double_tap_action:
  172.           action: toggle
  173.         custom_fields:
  174.           btn:
  175.             card:
  176.               type: custom:mushroom-chips-card
  177.               chips:
  178.                 - type: template
  179.                   tap_action:
  180.                     action: toggle
  181.                   entity: light.luce_cucina
  182.                   icon: |
  183.                    {% if is_state(entity, 'on') %}
  184.                       mdi:lightbulb-on
  185.                     {% else %}
  186.                       mdi:lightbulb-outline
  187.                     {% endif %}
  188.                   icon_color: |
  189.                    {% if is_state(entity, 'on') %}
  190.                       black
  191.                     {% else %}
  192.                      
  193.                     {% endif %}
  194.                 - type: template
  195.                   tap_action:
  196.                     action: toggle
  197.                   entity: switch.macchina_del_caffe
  198.                   icon: |
  199.                    {% if is_state(entity, 'on') %}
  200.                       mdi:coffee-maker
  201.                     {% else %}
  202.                       mdi:coffee-maker-outline
  203.                     {% endif %}
  204.                   icon_color: |
  205.                    {% if is_state(entity, 'on') %}
  206.                       white
  207.                     {% else %}
  208.                      
  209.                     {% endif %}
  210.                 - type: template
  211.                   tap_action:
  212.                     action: more-info
  213.                   entity: camera.cucina
  214.                   icon: mdi:cctv
  215.               card_mod:
  216.                 style:
  217.                   mushroom-template-chip:nth-child(3)$:
  218.                     mushroom-chip$: |
  219.                      ha-card {
  220.                         --chip-background: {{ 'rgba(223,130,108, 1)' if is_state('sensor.agentdvr_cucina_persona_rilevata','on') else 'rgba(223,130,108, 0.3)' }};
  221.                         padding: 5px !important;
  222.                         border-radius: 100px !important;
  223.                       }
  224.                     .: |
  225.                      ha-state-icon {
  226.                         animation: scan 5s ease-in-out infinite;
  227.                         transform-origin: 90% 80%
  228.                       }
  229.                       @keyframes scan {
  230.                         0%, 100% { transform: rotate(20deg); }
  231.                         50% { transform: rotate(-15deg); }
  232.                       }
  233.                   mushroom-template-chip:nth-child(2)$:
  234.                     mushroom-chip$: |
  235.                      ha-card {
  236.                         --chip-background: {{ 'rgba(153, 78, 28, 1)' if is_state('switch.macchina_del_caffe', 'on') else 'rgba(153, 78, 28, 0.3)' }};
  237.                         animation: {{ 'ping 3s ease-out infinite' if is_state('switch.macchina_del_caffe', 'on') }};
  238.                         padding: 5px !important;
  239.                         border-radius: 100px !important;
  240.                       }
  241.                       @keyframes ping {
  242.                         0% {
  243.                           box-shadow: 0 0 5px 1px rgba(153, 78, 28, 1);
  244.                         }
  245.                         100% {
  246.                           box-shadow: 0 0 5px 10px rgba(153, 78, 28, 0);
  247.                         }
  248.                       }
  249.                       ha-card:active {
  250.                         transform: translateY(1.5px);
  251.                         transition: 0s;
  252.                         box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
  253.                       }
  254.                     .: |
  255.                      ha-state-icon {
  256.                         {% if is_state('switch.macchina_del_caffe', 'on') %}
  257.                         animation: java 4s linear infinite;
  258.                         {% else %}
  259.                         {% endif %}
  260.                       }
  261.                       @keyframes java {
  262.                         0%, 80%, 100% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 0 100%); }
  263.                         10% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 79%, 63% 76%, 67% 70%, 66% 54%, 42% 55%, 42% 70%, 47% 77%, 55% 80%, 57% 100%, 0 100%); }
  264.                         15% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 79%, 63% 76%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 47% 77%, 55% 80%, 55% 100%, 0 100%); }
  265.                         20% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 76%, 63% 76%, 67% 70%, 66% 54%, 42% 55%, 42% 70%, 47% 76%, 55% 76%, 57% 100%, 0 100%); }
  266.                         25% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 76%, 63% 76%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 47% 76%, 55% 76%, 56% 100%, 0 100%); }
  267.                         30% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 73%, 64% 73%, 66% 70%, 66% 55%, 42% 55%, 42% 69%, 44% 73%, 55% 73%, 57% 100%, 0 100%); }
  268.                         35% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 73%, 64% 73%, 66% 70%, 66% 55%, 42% 54%, 42% 69%, 44% 73%, 55% 73%, 56% 100%, 0 100%); }
  269.                         40% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 70%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 57% 70%, 57% 100%, 0 100%); }
  270.                         45% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 70%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 55% 70%, 56% 100%, 0 100%); }
  271.                         50% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 66%, 67% 65%, 66% 54%, 42% 54%, 42% 65%, 57% 65%, 57% 100%, 0 100%); }
  272.                         55% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 66%, 67% 65%, 66% 54%, 42% 54%, 42% 65%, 55% 65%, 56% 100%, 0 100%); }
  273.                         60% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 60%, 66% 60%, 66% 54%, 42% 54%, 42% 60%, 57% 60%, 57% 100%, 0 100%); }
  274.                         65% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 60%, 66% 60%, 66% 54%, 42% 54%, 42% 60%, 55% 60%, 56% 100%, 0 100%); }
  275.                         70% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 56%, 66% 56%, 66% 54%, 42% 54%, 42% 56%, 57% 56%, 57% 100%, 0 100%); }
  276.                         75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 56%, 66% 56%, 66% 54%, 42% 54%, 42% 56%, 55% 56%, 55% 100%, 0 100%); }
  277.                       }
  278.                   mushroom-template-chip:nth-child(1)$:
  279.                     mushroom-chip$: |
  280.                      ha-card {
  281.                         --chip-background: {{ 'rgba(235, 204, 52, 1)' if is_state('light.luce_cucina', 'on') else 'rgba(235, 204, 52, 0.3)' }};
  282.                         animation: {{ 'ping 2s ease-out infinite' if is_state('light.luce_cucina', 'on') }};
  283.                         padding: 5px !important;
  284.                         border-radius: 100px !important;
  285.                       }
  286.                       @keyframes ping {
  287.                         0% {
  288.                           box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
  289.                         }
  290.                         100% {
  291.                           box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
  292.                         }
  293.                       }
  294.                       ha-card:active {
  295.                         transform: translateY(1.5px);
  296.                         transition: 0s;
  297.                         box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
  298.                       }
  299.                     .: |
  300.                      ha-state-icon {
  301.                         animation: {{ 'illumination 2s infinite' if is_state('light.luce_cucina', 'on') }};
  302.                       }
  303.                       @keyframes illumination {
  304.                         0%, 100% { clip-path: inset(0 0 0 0); }
  305.                         95% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
  306.                       }
  307.         state:
  308.           - value: 'off'
  309.             styles:
  310.               img_cell:
  311.                 - background: '#D04848'
  312.                 - opacity: 0.3
  313.           - value: unavailable
  314.             styles:
  315.               img_cell:
  316.                 - background: '#D04848'
  317.                 - opacity: 0.3
  318.         styles:
  319.           grid:
  320.             - grid-template-areas: '"n btn" "s btn" "i btn"'
  321.             - grid-template-columns: 1fr min-content
  322.             - grid-template-rows: min-content min-content 1fr
  323.           img_cell:
  324.             - justify-content: start
  325.             - position: absolute
  326.             - width: 150px
  327.             - height: 150px
  328.             - left: 0
  329.             - bottom: 0
  330.             - margin: 0 0 -30px -30px
  331.             - background: '#D04848'
  332.             - border-radius: 200px
  333.           icon:
  334.             - width: 60px
  335.             - color: black
  336.             - opacity: '0.6'
  337.           card:
  338.             - padding: 22px 8px 22px 22px
  339.           custom_fields:
  340.             btn:
  341.               - justify-content: end
  342.               - align-self: start
  343.           name:
  344.             - justify-self: start
  345.             - justify-content: start
  346.             - align-self: start
  347.             - font-size: 18px
  348.             - font-weight: 500
  349.             - color: null
  350.           state:
  351.             - min-height: 80px
  352.             - justify-self: start
  353.             - align-self: start
  354.             - font-size: 12px
  355.             - font-weight: 300
  356.             - opacity: '0.7'
  357.       - type: custom:button-card
  358.         entity: light.camera
  359.         name: Camera
  360.         icon: hue:room-bedroom
  361.         show_state: false
  362.         show_label: true
  363.         tap_action:
  364.           action: none
  365.         double_tap_action:
  366.           action: toggle
  367.         label: |
  368.          [[[
  369.             return states['sensor.broadlink_rm4_camera_temperature'].state + "°C<br>" + states['sensor.broadlink_rm4_camera_humidity'].state + " %";
  370.           ]]]
  371.         custom_fields:
  372.           btn:
  373.             card:
  374.               type: custom:mushroom-chips-card
  375.               chips:
  376.                 - type: template
  377.                   tap_action:
  378.                     action: toggle
  379.                   entity: light.luce_camera
  380.                   icon: |
  381.                    {% if is_state(entity, 'on') %}
  382.                       mdi:lightbulb-on
  383.                     {% else %}
  384.                       mdi:lightbulb-outline
  385.                     {% endif %}
  386.                   icon_color: |
  387.                    {% if is_state(entity, 'on') %}
  388.                       black
  389.                     {% else %}
  390.                      
  391.                     {% endif %}
  392.                 - type: template
  393.                   tap_action:
  394.                     action: toggle
  395.                   entity: light.comodino
  396.                   icon: |
  397.                    {% if is_state(entity, 'on') %}
  398.                       mdi:lamp
  399.                     {% else %}
  400.                       mdi:lamp
  401.                     {% endif %}
  402.                   icon_color: |
  403.                    {% if is_state(entity, 'on') %}
  404.                       black
  405.                     {% else %}
  406.                      
  407.                     {% endif %}
  408.                 - type: template
  409.                   tap_action:
  410.                     action: more-info
  411.                   entity: camera.camera
  412.                   icon: mdi:cctv
  413.               card_mod:
  414.                 style:
  415.                   mushroom-template-chip:nth-child(3)$:
  416.                     mushroom-chip$: |
  417.                      ha-card {
  418.                         --chip-background: {{ 'rgba(223,130,108, 1)' if is_state('sensor.agentdvr_camera_persona_rilevata','on') else 'rgba(223,130,108, 0.3)' }};
  419.                         padding: 5px !important;
  420.                         border-radius: 100px !important;
  421.                       }
  422.                     .: |
  423.                      ha-state-icon {
  424.                         animation: scan 5s ease-in-out infinite;
  425.                         transform-origin: 90% 80%
  426.                       }
  427.                       @keyframes scan {
  428.                         0%, 100% { transform: rotate(20deg); }
  429.                         50% { transform: rotate(-15deg); }
  430.                       }
  431.                   mushroom-template-chip:nth-child(2)$:
  432.                     mushroom-chip$: |
  433.                      ha-card {
  434.                         --chip-background: {{ 'rgba(235, 204, 52, 1)' if is_state('light.comodino', 'on') else 'rgba(235, 204, 52, 0.3)' }};
  435.                         animation: {{ 'ping 3s ease-out infinite' if is_state('light.comodino', 'on') }};
  436.                         padding: 5px !important;
  437.                         border-radius: 100px !important;
  438.                       }
  439.                       @keyframes ping {
  440.                         0% {
  441.                           box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
  442.                         }
  443.                         100% {
  444.                           box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
  445.                         }
  446.                       }
  447.                       ha-card:active {
  448.                         transform: translateY(1.5px);
  449.                         transition: 0s;
  450.                         box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
  451.                       }
  452.                   mushroom-template-chip:nth-child(1)$:
  453.                     mushroom-chip$: |
  454.                      ha-card {
  455.                         --chip-background: {{ 'rgba(235, 204, 52, 1)' if is_state('light.luce_camera', 'on') else 'rgba(235, 204, 52, 0.3)' }};
  456.                         animation: {{ 'ping 2s ease-out infinite' if is_state('light.luce_camera', 'on') }};
  457.                         padding: 5px !important;
  458.                         border-radius: 100px !important;
  459.                       }
  460.                       @keyframes ping {
  461.                         0% {
  462.                           box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
  463.                         }
  464.                         100% {
  465.                           box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
  466.                         }
  467.                       }
  468.                       ha-card:active {
  469.                         transform: translateY(1.5px);
  470.                         transition: 0s;
  471.                         box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
  472.                       }
  473.                     .: |
  474.                      ha-state-icon {
  475.                         animation: {{ 'illumination 2s infinite' if is_state('light.luce_camera', 'on') }};
  476.                       }
  477.                       @keyframes illumination {
  478.                         0%, 100% { clip-path: inset(0 0 0 0); }
  479.                         95% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
  480.                       }
  481.         state:
  482.           - value: 'off'
  483.             styles:
  484.               img_cell:
  485.                 - background: '#8E7AB5'
  486.                 - opacity: 0.3
  487.           - value: unavailable
  488.             styles:
  489.               img_cell:
  490.                 - background: '#8E7AB5'
  491.                 - opacity: 0.3
  492.         styles:
  493.           grid:
  494.             - grid-template-areas: '"n btn" "l btn" "i btn"'
  495.             - grid-template-columns: 1fr min-content
  496.             - grid-template-rows: min-content min-content 1fr
  497.           img_cell:
  498.             - justify-content: start
  499.             - position: absolute
  500.             - width: 150px
  501.             - height: 150px
  502.             - left: 0
  503.             - bottom: 0
  504.             - margin: 0 0 -30px -30px
  505.             - background: '#8E7AB5'
  506.             - border-radius: 200px
  507.           icon:
  508.             - width: 60px
  509.             - color: black
  510.             - opacity: '0.6'
  511.           card:
  512.             - padding: 22px 8px 22px 22px
  513.           custom_fields:
  514.             btn:
  515.               - justify-content: end
  516.               - align-self: start
  517.           name:
  518.             - justify-self: start
  519.             - justify-content: start
  520.             - align-self: start
  521.             - font-size: 18px
  522.             - font-weight: 500
  523.             - color: null
  524.           label:
  525.             - min-height: 80px
  526.             - justify-self: start
  527.             - align-self: start
  528.             - font-size: 14px
  529.             - font-weight: 300
  530.             - opacity: '0.7'
  531.       - type: custom:button-card
  532.         entity: light.cameretta
  533.         name: Cameretta
  534.         icon: hue:room-kids
  535.         show_state: true
  536.         tap_action:
  537.           action: none
  538.         double_tap_action:
  539.           action: toggle
  540.         custom_fields:
  541.           btn:
  542.             card:
  543.               type: custom:mushroom-chips-card
  544.               chips:
  545.                 - type: template
  546.                   tap_action:
  547.                     action: toggle
  548.                   entity: light.luce_cameretta
  549.                   icon: |
  550.                    {% if is_state(entity, 'on') %}
  551.                       mdi:lightbulb-on
  552.                     {% else %}
  553.                       mdi:lightbulb-outline
  554.                     {% endif %}
  555.                   icon_color: |
  556.                    {% if is_state(entity, 'on') %}
  557.                       black
  558.                     {% else %}
  559.                      
  560.                     {% endif %}
  561.                 - type: template
  562.                   tap_action:
  563.                     action: more-info
  564.                   entity: camera.cameretta
  565.                   icon: mdi:cctv
  566.                 - type: template
  567.               card_mod:
  568.                 style:
  569.                   mushroom-template-chip:nth-child(3)$:
  570.                     mushroom-chip$: |
  571.                      ha-card {
  572.                         --chip-background: transparent;
  573.                         padding: 5px !important;
  574.                         border-radius: 100px !important;
  575.                         border: none;
  576.                       }
  577.                   mushroom-template-chip:nth-child(2)$:
  578.                     mushroom-chip$: |
  579.                      ha-card {
  580.                         --chip-background: {{ 'rgba(223,130,108, 1)' if is_state('sensor.agentdvr_cameretta_persona_rilevata','on') else 'rgba(223,130,108, 0.3)' }};
  581.                         padding: 5px !important;
  582.                         border-radius: 100px !important;
  583.                       }
  584.                     .: |
  585.                      ha-state-icon {
  586.                         animation: scan 5s ease-in-out infinite;
  587.                         transform-origin: 90% 80%
  588.                       }
  589.                       @keyframes scan {
  590.                         0%, 100% { transform: rotate(20deg); }
  591.                         50% { transform: rotate(-15deg); }
  592.                       }
  593.                   mushroom-template-chip:nth-child(1)$:
  594.                     mushroom-chip$: |
  595.                      ha-card {
  596.                         --chip-background: {{ 'rgba(235, 204, 52, 1)' if is_state('light.luce_cameretta', 'on') else 'rgba(235, 204, 52, 0.3)' }};
  597.                         animation: {{ 'ping 2s ease-out infinite' if is_state('light.luce_cameretta', 'on') }};
  598.                         padding: 5px !important;
  599.                         border-radius: 100px !important;
  600.                       }
  601.                       @keyframes ping {
  602.                         0% {
  603.                           box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
  604.                         }
  605.                         100% {
  606.                           box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
  607.                         }
  608.                       }
  609.                       ha-card:active {
  610.                         transform: translateY(1.5px);
  611.                         transition: 0s;
  612.                         box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
  613.                       }
  614.                     .: |
  615.                      ha-state-icon {
  616.                         animation: {{ 'illumination 2s infinite' if is_state('light.luce_cameretta', 'on') }};
  617.                       }
  618.                       @keyframes illumination {
  619.                         0%, 100% { clip-path: inset(0 0 0 0); }
  620.                         95% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
  621.                       }
  622.         state:
  623.           - value: 'off'
  624.             styles:
  625.               img_cell:
  626.                 - background: '#FF9209'
  627.                 - opacity: 0.3
  628.           - value: unavailable
  629.             styles:
  630.               img_cell:
  631.                 - background: '#FF9209'
  632.                 - opacity: 0.3
  633.         styles:
  634.           grid:
  635.             - grid-template-areas: '"n btn" "s btn" "i btn"'
  636.             - grid-template-columns: 1fr min-content
  637.             - grid-template-rows: min-content min-content 1fr
  638.           img_cell:
  639.             - justify-content: start
  640.             - position: absolute
  641.             - width: 150px
  642.             - height: 150px
  643.             - left: 0
  644.             - bottom: 0
  645.             - margin: 0 0 -30px -30px
  646.             - background: '#FF9209'
  647.             - border-radius: 200px
  648.           icon:
  649.             - width: 60px
  650.             - color: black
  651.             - opacity: '0.6'
  652.           card:
  653.             - padding: 22px 8px 22px 22px
  654.           custom_fields:
  655.             btn:
  656.               - justify-content: end
  657.               - align-self: start
  658.           name:
  659.             - justify-self: start
  660.             - justify-content: start
  661.             - align-self: start
  662.             - font-size: 18px
  663.             - font-weight: 500
  664.             - color: null
  665.           state:
  666.             - min-height: 80px
  667.             - justify-self: start
  668.             - align-self: start
  669.             - font-size: 12px
  670.             - font-weight: 300
  671.             - opacity: '0.7'
  672.     columns: 2
  673.  
Tags: Home assistant
Advertisement
Comments
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!