API tools faq
paste
Advertisement
fablav

Mushroom Icons

fablav
Apr 22nd, 2024 (edited)
376
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
YAML 11.29 KB | Software | 0 0
raw download clone embed print report
  1. type: horizontal-stack
  2. cards:
  3.   - type: custom:button-card
  4.     color_type: blank-card
  5.     styles:
  6.       card:
  7.         - width: 20px
  8.   - type: custom:mushroom-template-card
  9.     primary: ''
  10.     secondary: ''
  11.     icon: |
  12.      {% if states('sensor.luci_accese')|int >= 1 %}
  13.         {{ 'mdi:numeric-' + states('sensor.luci_accese') + '-circle' }}
  14.       {%- else -%}
  15.         mdi:lightbulb
  16.       {% endif %}
  17.     icon_color: |
  18.      {% if states('sensor.luci_accese')|int >= 1 %}
  19.         yellow
  20.       {% else %}
  21.         disabled
  22.       {% endif %}
  23.     badge_icon: |
  24.      {% if states('sensor.luci_accese')|int >= 1 %}
  25.         mdi:lightbulb-on
  26.       {% else %}
  27.       {% endif %}
  28.     badge_color: yellow
  29.     layout: vertical
  30.     card_mod:
  31.       style:
  32.         mushroom-shape-icon$: |
  33.          .shape {
  34.             {% if states('sensor.luci_accese')|int >= 1 %}
  35.               --shape-color: rgba(var(--rgb-red), 0.4);
  36.             {%- else -%}
  37.             {% endif %}
  38.             box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
  39.           }
  40.         .: |
  41.          ha-card:active {
  42.             transform: translateY(1.5px);
  43.             transition: 0s;
  44.           }
  45.           ha-card {
  46.             transform: scale(1.3);
  47.             border: none;
  48.             box-shadow: none;
  49.             padding-left: 0px;
  50.             background: rgba(0,0,0,0);
  51.           }
  52.           ha-state-icon {
  53.             {% if states('sensor.luci_accese')|int >= 1 %}
  54.               animation: alarm 3s ease infinite;
  55.             {%- else -%}
  56.              
  57.             {% endif %}
  58.           }
  59.           @keyframes alarm {
  60.             0%, 80%, 100% { transform: translateY(0); }
  61.             10% { transform: translateY(-2px) rotate(-27deg); }
  62.             20% { transform: translateY(-2px) rotate(21deg); }
  63.             30% { transform: translateY(-2px) rotate(-15deg); }
  64.             40% { transform: translateY(-2px) rotate(9deg); }
  65.             50% { transform: translateY(0); }
  66.             60% { transform: translateY(-1.2px) }
  67.           }
  68.           mushroom-badge-icon {
  69.             #--badge-icon-size: 10px;
  70.             --icon-color: red;
  71.             animation: wobbling 0.7s linear infinite alternate;
  72.           }
  73.           @keyframes wobbling {
  74.           0% {transform: rotate(-20deg);}
  75.           100% {transform: rotate(20deg);}
  76.           }
  77.   - type: custom:mushroom-template-card
  78.     entity: cover.tapparelle
  79.     icon: >
  80.      {% if states('binary_sensor.lumi_lumi_sensor_magnet_aq2_opening') == 'on'
  81.       %}
  82.         mdi:door
  83.       {% elif states('cover.tapparella') == 'opening' or
  84.       states('cover.tapparella') == 'closing' %}
  85.         mdi:window-shutter
  86.       {% else %}
  87.         mdi:window-shutter
  88.       {% endif %}
  89.     icon_color: >
  90.      {% if states('binary_sensor.lumi_lumi_sensor_magnet_aq2_opening') == 'on'
  91.       %}
  92.         red
  93.       {% elif states('cover.tapparella') == 'opening' or
  94.       states('cover.tapparella') == 'closing' %}
  95.         red
  96.       {% else %}
  97.         blue
  98.       {% endif %}
  99.     badge_icon: >
  100.      {% if states('binary_sensor.lumi_lumi_sensor_magnet_aq2_opening') == 'on'
  101.       or states('cover.tapparella') == 'opening' or states('cover.tapparella')
  102.  
  103.       == 'closing' %}
  104.         mdi:alert
  105.       {%- else -%}
  106.  
  107.       {% endif %}
  108.     badge_color: red
  109.     layout: vertical
  110.     primary: ''
  111.     secondary: ''
  112.     card_mod:
  113.       style:
  114.         mushroom-shape-icon$: |
  115.          .shape {
  116.             box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
  117.           }
  118.         .: |
  119.          ha-card:active {
  120.             transform: translateY(1.5px);
  121.             transition: 0s;
  122.           }
  123.           ha-state-icon {
  124.             {% if states('binary_sensor.lumi_lumi_sensor_magnet_aq2_opening') == 'on' %}
  125.             animation: door 6s ease-in-out infinite;
  126.             transform-origin: 30%;
  127.             {% elif states('cover.tapparella') == 'opening' %}
  128.             animation: open 3s steps(1) infinite;
  129.             {% elif states('cover.tapparella') == 'closing' %}
  130.             animation: close 3s steps(1) infinite;
  131.             {% elif state_attr('cover.tapparella', 'current_position') > 76 %}
  132.               clip-path: polygon(0 0, 0 100%, 32% 100%, 32% 36%, 68% 36%, 68% 100%, 100% 100%, 100% 0);
  133.             {% elif state_attr('cover.tapparella', 'current_position') > 51 %}
  134.               clip-path: polygon(0 0, 0 100%, 32% 100%, 32% 48%, 68% 48%, 68% 100%, 100% 100%, 100% 0);
  135.             {% elif state_attr('cover.tapparella', 'current_position') > 26 %}
  136.               clip-path: polygon(0 0, 0 100%, 32% 100%, 32% 60%, 68% 60%, 68% 100%, 100% 100%, 100% 0);
  137.             {% elif state_attr('cover.tapparella', 'current_position') > 0 %}
  138.               clip-path: polygon(0 0, 0 100%, 32% 100%, 32% 74%, 68% 74%, 68% 100%, 100% 100%, 100% 0);
  139.             {% endif %}
  140.           }
  141.           .shape {
  142.             perspective: 45px;
  143.           }
  144.           @keyframes door {
  145.             0%, 66% { transform: rotateY(0deg); }
  146.             33% { transform: rotateY(-120deg); }
  147.           }
  148.           @keyframes open {
  149.             0% { clip-path: inset(0 0 0 0); }
  150.             20%  { clip-path: polygon(0 0, 0 100%, 32% 100%, 32% 74%, 68% 74%, 68% 100%, 100% 100%, 100% 0); }
  151.             40%  { clip-path: polygon(0 0, 0 100%, 32% 100%, 32% 60%, 68% 60%, 68% 100%, 100% 100%, 100% 0); }
  152.             60% { clip-path: polygon(0 0, 0 100%, 32% 100%, 32% 48%, 68% 48%, 68% 100%, 100% 100%, 100% 0); }
  153.             80% { clip-path: polygon(0 0, 0 100%, 32% 100%, 32% 36%, 68% 36%, 68% 100%, 100% 100%, 100% 0); }
  154.           }
  155.           @keyframes close {
  156.             0% { clip-path: inset(0 0 0 0); }
  157.             80%  { clip-path: polygon(0 0, 0 100%, 32% 100%, 32% 74%, 68% 74%, 68% 100%, 100% 100%, 100% 0); }
  158.             60%  { clip-path: polygon(0 0, 0 100%, 32% 100%, 32% 60%, 68% 60%, 68% 100%, 100% 100%, 100% 0); }
  159.             40% { clip-path: polygon(0 0, 0 100%, 32% 100%, 32% 48%, 68% 48%, 68% 100%, 100% 100%, 100% 0); }
  160.             20% { clip-path: polygon(0 0, 0 100%, 32% 100%, 32% 36%, 68% 36%, 68% 100%, 100% 100%, 100% 0); }
  161.           }
  162.           ha-card {
  163.             transform: scale(1.3);
  164.             border: none;
  165.             box-shadow: none;
  166.             background: rgba(0,0,0,0);
  167.             text-align: center;
  168.           }
  169.   - type: custom:mushroom-template-card
  170.     icon: mdi:home-assistant
  171.     icon_color: blue
  172.     layout: vertical
  173.     primary: ''
  174.     badge_icon: ''
  175.     badge_color: ''
  176.     card_mod:
  177.       style:
  178.         mushroom-shape-icon$: |
  179.          .shape {
  180.             box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
  181.           }
  182.         .: |
  183.          ha-card:active {
  184.             transform: translateY(1.5px);
  185.             transition: 0s;
  186.           }
  187.           ha-card {
  188.             transform: scale(1.3);
  189.             border: none;
  190.             box-shadow: none;
  191.             background: rgba(0,0,0,0);
  192.             text-align: center;
  193.           }
  194.           ha-state-icon {
  195.             animation: boing 3s ease infinite;
  196.             transform-origin: 50% 90%;
  197.           }
  198.           @keyframes boing {
  199.             0% { transform: scale3d(1, 1, 1); }
  200.             7% { transform: scale3d(1.25, 0.75, 1); }
  201.             10% { transform: scale3d(0.75, 1.25, 1); }
  202.             12% { transform: scale3d(1.15, 0.85, 1); }
  203.             16% { transform: scale3d(0.95, 1.05, 1); }
  204.             19% { transform: scale3d(1.05, 0.95, 1); }
  205.             25% { transform: scale3d(1, 1, 1); }
  206.           }
  207.   - type: custom:mushroom-template-card
  208.     primary: ''
  209.     secondary: ''
  210.     icon: |
  211.      {% if states('input_boolean.luci_notte') == 'on' %}
  212.         mdi:robot-excited-outline
  213.       {% else %}
  214.         mdi:robot-dead
  215.       {% endif %}
  216.     entity: input_boolean.luci_notte
  217.     tap_action:
  218.       action: toggle
  219.     layout: vertical
  220.     icon_color: |
  221.      {% if states('input_boolean.luci_notte') == 'on' %}
  222.         orange
  223.       {% else %}
  224.         disabled
  225.       {% endif %}
  226.     badge_icon: ''
  227.     badge_color: ''
  228.     card_mod:
  229.       style:
  230.         mushroom-shape-icon$: |
  231.          .shape {
  232.             box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
  233.           }
  234.         .: |
  235.          ha-card:active {
  236.             transform: translateY(1.5px);
  237.             transition: 0s;
  238.           }
  239.           ha-state-icon {
  240.             {% if is_state('input_boolean.luci_notte', 'on') %}
  241.             animation: tilt 4s steps(1) infinite, blink 4s infinite;
  242.             transform-origin: 50% 92%;
  243.             {% endif %}
  244.           }
  245.           @keyframes tilt {
  246.             0%, 100% { transform: rotate(0deg); }
  247.             33% { transform: rotate(8deg); }
  248.             66% { transform: rotate(-8deg); }
  249.           }
  250.           @keyframes blink {
  251.             0%, 20%, 30%, 45%, 55%, 70%, 80%, 100% { clip-path: inset(0 0 0 0); }
  252.             25% { clip-path: polygon(0 0, 100% 0, 100% 53%, 25% 52%, 24% 77%, 75% 77%, 76% 52%, 100% 52%, 100% 100%, 0 100%); }
  253.             50%  { clip-path: polygon(0 0, 100% 0, 100% 53%, 51% 54%, 51% 76%, 76% 77%, 75% 53%, 100% 52%, 100% 100%, 0 100%); }
  254.             75%  { clip-path: polygon(0 0, 100% 0, 100% 53%, 24% 53%, 24% 77%, 47% 77%, 47% 52%, 100% 52%, 100% 100%, 0 100%); }
  255.           }
  256.           ha-card {
  257.             transform: scale(1.3);
  258.             border: none;
  259.             box-shadow: none;
  260.             background: rgba(0,0,0,0);
  261.             text-align: center;
  262.           }
  263.   - type: custom:mushroom-template-card
  264.     primary: ''
  265.     secondary: ''
  266.     icon: |
  267.      {% if states('input_boolean.kiosk') == 'on' %}
  268.         mdi:ghost-outline
  269.       {% else %}
  270.         mdi:ghost-outline
  271.       {% endif %}
  272.     entity: input_boolean.hide_header
  273.     tap_action:
  274.       action: toggle
  275.     layout: vertical
  276.     icon_color: |
  277.      {% if states('input_boolean.kiosk') == 'on' %}
  278.         blue-grey
  279.       {% else %}
  280.         disabled
  281.       {% endif %}
  282.     badge_icon: ''
  283.     badge_color: ''
  284.     card_mod:
  285.       style:
  286.         mushroom-shape-icon$: |
  287.          .shape {
  288.             box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
  289.           }
  290.         .: |
  291.          ha-card:active {
  292.             transform: translateY(1.5px);
  293.             transition: 0s;
  294.           }
  295.           ha-state-icon {
  296.             {% if is_state('input_boolean.kiosk', 'on') %}
  297.             animation: drift 10s ease-in-out infinite, blink 4s infinite;
  298.             {% endif %}
  299.           }
  300.           @keyframes drift {
  301.             0%, 100% { transform: translate(3px, 0px); }
  302.             30% { transform: translate(-1px, 2px); }
  303.             45% { transform: translate(1.5px, 0px); }
  304.             75% { transform: translate(-3.2px, -3px); }
  305.           }
  306.           @keyframes blink {
  307.             0%, 24%, 35%, 74%, 85%, 100% { clip-path: inset(0 0 0 0); }
  308.             25% { clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 53%, 25% 52%, 27% 31%, 49% 31%, 49% 54%, 100% 54%, 100% 0); }
  309.             75%  { clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 53%, 49% 51%, 52% 30%, 73% 31%, 75% 52%, 100% 54%, 100% 0); }
  310.           }
  311.           ha-card {
  312.             transform: scale(1.3);
  313.             border: none;
  314.             box-shadow: none;
  315.             background: rgba(0,0,0,0);
  316.             text-align: center;
  317.           }
  318.   - type: custom:button-card
  319.     color_type: blank-card
  320.     styles:
  321.       card:
  322.         - width: 20px
  323.  
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!