API tools faq
paste
Advertisement
Albometer

New Dashboard UI - 10"

Albometer
Dec 28th, 2021
488
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
YAML 116.32 KB | None | 0 0
raw download clone embed print report
  1. kiosk_mode: null
  2. styles:
  3.   grid:
  4.     - grid-template-areas: |
  5.        "icon  circle"
  6.         "n     n"
  7.         "s     s"
  8.     - grid-template-columns: repeat(2, 1fr)
  9.     - grid-template-rows: auto repeat(2, min-content)
  10.     - gap: 2%
  11.     - align-items: start
  12.   name:
  13.     - justify-self: start
  14.     - line-height: 115%
  15.   state:
  16.     - justify-self: start
  17.     - line-height: 115%
  18.   card:
  19.     - font-family: Sf Display
  20.     - border-radius: var(--custom-button-card-border-radius)
  21.     - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  22.     - transition: none
  23.     - padding: 10%
  24.     - '--mdc-ripple-color': |
  25.        [[[
  26.           return variables.consider_on ?
  27.             'rgb(0, 0, 0)' :
  28.             'rgba(255, 255, 255, 0.3)';
  29.         ]]]
  30.     - color: |
  31.        [[[
  32.           return variables.consider_on ?
  33.             'rgba(0, 0, 0, 0.6)' :
  34.             'rgba(255, 255, 255, 0.3)';
  35.         ]]]
  36.     - background-color: |
  37.        [[[
  38.           return variables.consider_on ?
  39.             'rgba(255, 255, 255, 0.8)' :
  40.             'rgba(115, 115, 115, 0.2)';
  41.         ]]]
  42. extra_styles: |
  43.  [[[
  44.     if (entity) {
  45.       let hs = entity.attributes.hs_color == undefined,
  46.         h = hs || entity.attributes.hs_color[0],
  47.         s = hs || entity.attributes.hs_color[1],
  48.         l_min = 28,
  49.         l_max = 48,
  50.         l_calc =
  51.          entity.attributes.brightness / 2.54 * (l_max - l_min) / 100 + l_min;
  52.      var light_color =
  53.        entity.attributes.color_mode === 'color_temp'
  54.          ? `hsl(204, 58%, ${l_calc}%);`
  55.          : `hsl(${h}, ${s}%, ${l_calc}%);`;
  56.     }
  57.    return `
  58.       svg {
  59.        --light-color:
  60.         ${ variables.state === 'on' && entity.attributes.brightness != undefined
  61.            ? light_color
  62.            : variables.state === 'on' && entity.attributes.brightness == undefined
  63.            ? 'var(--state-icon-active-color);'
  64.            : 'var(--state-icon-color);'
  65.        }
  66.      }
  67.      #container {
  68.       text-align: left !important;
  69.      }
  70.       #name, #state {
  71.         font-size: 1.34vw;
  72.         letter-spacing: 0.05vw;
  73.      }
  74.      /* portrait */
  75.       @media screen and (max-width: 1200px) {
  76.        #name, #state {
  77.          font-size: 2vw;
  78.          letter-spacing: 0.05vw;
  79.       }
  80.      }
  81.      /* phone */
  82.       @media screen and (max-width: 800px) {
  83.        #name, #state {
  84.          font-size: 3.1vw;
  85.          letter-spacing: 0.12vw;
  86.        }
  87.           }
  88.       @keyframes card_bounce {
  89.         0% {
  90.           transform: scale(1);
  91.         }
  92.         15% {
  93.           transform: scale(0.9);
  94.         }
  95.         25% {
  96.           transform: scale(1);
  97.         }
  98.         30% {
  99.           transform: scale(0.98);
  100.         }
  101.         100% {
  102.           transform: scale(1);
  103.         }
  104.       }
  105.     `
  106.   ]]]
  107. views:
  108.   - type: custom:grid-layout
  109.     path: 0
  110.     layout:
  111.       grid-gap: var(--custom-layout-card-padding)
  112.       grid-template-columns: repeat(4, 1fr) 0
  113.       grid-template-rows: 0 repeat(2, fit-content(100%)) 0fr
  114.       grid-template-areas: |
  115.        "sidebar  .           .           .       ."
  116.         "sidebar  esszimmer   wohnzimmer  aussen  ."
  117.         "sidebar  media       heizung     familie ."
  118.         "sidebar  footer      footer      footer  ."
  119.       mediaquery:
  120.         '(max-width: 800px)':
  121.           grid-gap: calc(var(--custom-layout-card-padding) * 1.7)
  122.           grid-template-columns: 0 repeat(2, 1fr) 0
  123.           grid-template-rows: 0 repeat(5, fit-content(100%)) 0fr
  124.           grid-template-areas: |
  125.            ".  .           .            ."
  126.             ".  sidebar     sidebar      ."
  127.             ".  esszimmer   wohnzimmer   ."
  128.             ".  aussen      heizung      ."
  129.             ".  media       familie      ."
  130.             ".  footer      footer       ."
  131.             ".  .           .            ."
  132.         '(max-width: 1200px)':
  133.           grid-gap: var(--custom-layout-card-padding)
  134.           grid-template-columns: repeat(3, 1fr) 0
  135.           grid-template-rows: 0 repeat(3, fit-content(100%)) 0fr
  136.           grid-template-areas: |
  137.            "sidebar  .           .           ."
  138.             "sidebar  esszimmer   wohnzimmer  ."
  139.             "sidebar  aussen      heizung     ."
  140.             "sidebar  media       familie     ."
  141.             "sidebar  footer      footer      ."
  142.             "sidebar  .           .           ."
  143.     badges: []
  144.     cards:
  145.       - type: grid
  146.         title: ⠀
  147.         cards:
  148.           - type: custom:simple-clock-card
  149.             use_military: true
  150.             hide_seconds: true
  151.             font_size: 6rem
  152.             padding_size: 1px
  153.             style: |
  154.              ha-card {
  155.                 height: 18px;
  156.                 box-shadow: none;
  157.                 background: transparent;
  158.                 font-family: SF Display;
  159.                 font-size: 25px;
  160.                 line-height: 15px;
  161.                 font-weight: 300;
  162.                 letter-spacing: 0.06vw;
  163.                 color: #6a7377;
  164.               }
  165.               :host {
  166.                 --mini-media-player-accent-color: white;
  167.               }
  168.             square: false
  169.             columns: 1
  170.           - type: markdown
  171.             style: |
  172.              ha-card {
  173.                  background-color: rgba(0,0,0,0) !important;
  174.                  box-shadow: none;
  175.                  padding-right: 10px;
  176.                  font-family: SF Display;
  177.                  font-size: 15px;
  178.                  line-height: var(--sidebar-line-height);
  179.                  font-weight: 10;
  180.                  letter-spacing: 0.06vw;
  181.                  color: #6a7377;
  182.             content: |-
  183.               <center>
  184.              <h3>
  185.              {{ now().strftime('%d.%m.%Y') }}
  186.               </h3>
  187.              </center>
  188.           - type: custom:weather-card
  189.             entity: weather.dark_sky
  190.             current: true
  191.             details: false
  192.             forecast: false
  193.             tap_action:
  194.               action: none
  195.             style: |
  196.              ha-card {
  197.               background-color:transparent;
  198.               box-shadow: none;
  199.               font-size: 0.65vw!important;
  200.               font-family: SF Display;
  201.               line-height: var(--sidebar-line-height);
  202.               font-weight: 10;
  203.               letter-spacing: 0.06vw;
  204.               color: #6a7377!important;
  205.               }
  206.             number_of_forecasts: '5'
  207.           - type: markdown
  208.             style: |
  209.              ha-card {
  210.                  background-color: rgba(0,0,0,0) !important;
  211.                  box-shadow: none;
  212.                  padding-right: 10px;
  213.                  font-family: SF Display;
  214.                  font-size: 15px;
  215.                  line-height: 13px;
  216.                  font-weight: 20;
  217.                  letter-spacing: 0.05vw!important;
  218.                  color: #6a7377;
  219.             content: >-
  220.               <h4>
  222.               {{states.sensor.open_windows.state}}
  223.  
  224.  
  225.               {{states.sensor.open_doors.state}}
  226.  
  227.  
  228.               </h4>
  230.               <h4><br>
  232.               {{ states.sensor.abfallnaechster.attributes.values() | first |
  234.               replace("papier","Papiermüll") | replace("bio","Biomüll") |
  235.  
  236.               replace("gelbersack", "Gelber Sack") | replace("rest", "Restmüll")
  237.               |
  238.               replace("papier","Papiermüll") }}
  239.               </h4>
  241.               <h4>
  242.               {{ states.sensor.abfallnaechster.attributes | first |
  243.                 as_timestamp | timestamp_custom("%d.%m.%Y") }}
  244.               <h4><br>
  245.               Spritpreis
  246.               </h4>
  248.               <h4>
  249.               {{states.sensor.tankerkoenig_star_tankstelle_e5.state}}
  250.           - type: custom:mini-media-player
  251.             padding-size: 80px
  252.             entity: media_player.wohnzimmer_2_2
  253.             style: |
  254.              ha-card {
  255.                 background-color:transparent;
  256.                 box-shadow: none;
  257.                 font-size: 0.85vw!important;
  258.               }
  259.             toggle_power: false
  260.             volume_stateless: false
  261.             group: true
  262.             source: icon
  263.             sound_mode: icon
  264.             replace_mute: stop
  265.             name: Sonos
  266.             icon: mdi:music-circle-outline
  267.             hide:
  268.               volume: true
  269.               source: true
  270.               controls: true
  271.               power: true
  272.             info: scroll
  273.             artwork: none
  274.         square: false
  275.         columns: 1
  276.         view_layout:
  277.           grid-area: sidebar
  278.       - type: grid
  279.         cards:
  280.           - type: custom:button-card
  281.             entity: light.cabinettw_z3_01
  282.             aspect_ratio: 1
  283.             name: Küche
  284.             color_type: card
  285.             show_state: true
  286.             hold_action:
  287.               action: fire-dom-event
  288.               browser_mod:
  289.                 command: popup
  290.                 title: Küche
  291.                 hide_header: false
  292.                 style:
  293.                   hui-light-popup-card:
  294.                     $hui-light-entity-card$: |
  295.                      #states {
  296.                         padding-top: 0.5em;
  297.                         padding-bottom: 1.2em;
  298.                         borderRadius: 1.7em;
  299.                       }
  300.                 card:
  301.                   type: custom:light-popup-card
  302.                   fullscreen: false
  303.                   entity: light.cabinettw_z3_01
  304.                   icon: none
  305.                   displayType: slider
  306.                   sliderColoredByLight: true
  307.                   actionsInARow: 2
  308.                   offStates: null
  309.                   brightnessWidth: 130px
  310.                   brightnessHeight: 320px
  311.                   borderRadius: 1.7em
  312.                   sliderColor: '#c7c7c7'
  313.                   sliderTrackColor: rgba(25, 25, 25, 0.9)
  314.                   actions:
  315.                     - action: fire-dom-event
  316.                       color: '#FDCA64'
  317.                       name: Farbe
  318.                       browser_mod:
  319.                         command: popup
  320.                         title: Farbe
  321.                         card:
  322.                           type: custom:light-entity-card
  323.                           entity: light.cabinettw_z3_01
  324.                           hide_header: true
  325.                           brightness: true
  326.                           color_temp: true
  327.                           white_value: true
  328.             custom_fields:
  329.               Circle: >
  330.                [[[ {
  331.  
  332.                 const temp = Math.round(entity.attributes.brightness / 2.64);
  333.  
  334.                 const radius = 20.5;
  335.  
  336.                 const circumference = radius * 2 * Math.PI;
  337.  
  338.                 return `<svg viewBox="0 0 50 50"><style>circle { transform:
  339.                 rotate(-90deg); transform-origin: 50% 50%;stroke-dasharray:
  340.                 ${circumference};stroke-dashoffset: ${circumference - temp / 100
  341.                 * circumference};}
  342.  
  343.                 tspan {font-size: 10px;}</style> <circle cx="25" cy="25"
  344.                 r="24.5" stroke="#b2b2b2" stroke-width="1.5" fill="#FFFFFF08"
  345.                 style="
  346.  
  347.                 transform: rotate(-90deg); transform-origin: 50% 50%;" />
  348.  
  349.                 <text x="50%" y="54%" fill="#8d8e90" font-size="11"
  350.                 text-anchor="middle" alignment-baseline="middle"
  351.                 dominant-baseline="middle">${temp}%</text></svg>`; } ]]]
  352.             show_entity_picture: true
  353.             styles:
  354.               card:
  355.                 - font-family: Sf Display
  356.                 - border-radius: var(--custom-button-card-border-radius)
  357.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  358.                 - transition: none
  359.                 - padding: 10%
  360.               grid:
  361.                 - grid-template-areas: '"i" "n" "s"'
  362.                 - grid-template-columns: 1fr
  363.                 - grid-template-rows: 1fr min-content min-content
  364.               name:
  365.                 - justify-self: start
  366.                 - padding-left: 7px
  367.                 - font-weight: bold
  368.                 - font-family: SF Display
  369.                 - font-size: 14px
  370.               img_cell:
  371.                 - justify-content: start
  372.                 - padding-left: 5px
  373.                 - padding-top: 10px
  374.                 - align-items: start
  375.                 - margin: none
  376.               state:
  377.                 - justify-self: start
  378.                 - font-color: red
  379.                 - padding-left: 7px
  380.                 - padding-bottom: 10px
  381.                 - text-transform: capitalize
  382.                 - font-family: SF Display
  383.                 - font-size: 10px
  384.               icon:
  385.                 - width: 40%
  386.               custom_fields:
  387.                 Circle:
  388.                   - align-self: start
  389.                   - position: absolute
  390.                   - left: 55%
  391.                   - top: 10%
  392.                   - width: 40%
  393.                   - font-size: 18px
  394.                   - font-weight: 900
  395.                   - font-family: SF Display
  396.                   - text-transform: capitalize
  397.             state:
  398.               - value: 'on'
  399.                 entity_picture: \local\img\icons8-kitchen-room-48.png
  400.                 color: rgba(255,255,255,0.9)
  401.               - value: 'off'
  402.                 entity_picture: \local\img\icons8-kitchen-room-48.png
  403.                 color: rgba(65,65,63,0.8)
  404.                 styles:
  405.                   card:
  406.                     - filter: opacity(50%)
  407.                   icon:
  408.                     - filter: grayscale(100%)
  409.           - type: custom:button-card
  410.             entity: light.wohnzimmer_2
  411.             aspect_ratio: 1
  412.             name: Tresen
  413.             color_type: card
  414.             show_state: true
  415.             show_entity_picture: true
  416.             styles:
  417.               card:
  418.                 - font-family: Sf Display
  419.                 - border-radius: var(--custom-button-card-border-radius)
  420.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  421.                 - transition: none
  422.                 - padding: 10%
  423.               grid:
  424.                 - grid-template-areas: '"i" "n" "s"'
  425.                 - grid-template-columns: 1fr
  426.                 - grid-template-rows: 1fr min-content min-content
  427.               name:
  428.                 - justify-self: start
  429.                 - padding-left: 7px
  430.                 - font-weight: bold
  431.                 - font-family: SF Display
  432.                 - font-size: 14px
  433.               img_cell:
  434.                 - justify-content: start
  435.                 - padding-left: 5px
  436.                 - padding-top: 10px
  437.                 - align-items: start
  438.                 - margin: none
  439.               state:
  440.                 - justify-self: start
  441.                 - font-color: red
  442.                 - padding-left: 7px
  443.                 - padding-bottom: 10px
  444.                 - text-transform: capitalize
  445.                 - font-family: SF Display
  446.                 - font-size: 10px
  447.               icon:
  448.                 - width: 40%
  449.               custom_fields:
  450.                 Circle:
  451.                   - align-self: start
  452.                   - position: absolute
  453.                   - left: 55%
  454.                   - top: 10%
  455.                   - width: 40%
  456.                   - font-size: 18px
  457.                   - font-weight: 900
  458.                   - font-family: SF Display
  459.                   - text-transform: capitalize
  460.             state:
  461.               - value: 'on'
  462.                 entity_picture: \local\img\icons8-cupboard-48.png
  463.                 color: rgba(255,255,255,0.9)
  464.               - value: 'off'
  465.                 entity_picture: \local\img\icons8-cupboard-48.png
  466.                 color: rgba(65,65,63,0.8)
  467.                 styles:
  468.                   card:
  469.                     - filter: opacity(50%)
  470.                   icon:
  471.                     - filter: grayscale(100%)
  472.           - type: custom:button-card
  473.             entity: light.esstisch
  474.             aspect_ratio: 1
  475.             name: Esstisch
  476.             color_type: card
  477.             show_state: true
  478.             hold_action:
  479.               action: fire-dom-event
  480.               browser_mod:
  481.                 command: popup
  482.                 title: Esstisch
  483.                 card:
  484.                   type: custom:light-popup-card
  485.                   fullscreen: false
  486.                   entity: light.esstisch
  487.                   icon: none
  488.                   displayType: slider
  489.                   sliderColoredByLight: true
  490.                   actionsInARow: 1
  491.                   brightnessWidth: 130px
  492.                   brightnessHeight: 360px
  493.                   borderRadius: 1.7em
  494.                   sliderColor: '#c7c7c7'
  495.                   sliderTrackColor: rgba(25, 25, 25, 0.9)
  496.                   actions:
  497.                     - action: fire-dom-event
  498.                       color: '#FDCA64'
  499.                       name: Farbe
  500.                       browser_mod:
  501.                         command: popup
  502.                         title: []
  503.                         card:
  504.                           type: custom:light-entity-card
  505.                           entity: light.esstisch
  506.                           hide_header: true
  507.                           brightness: true
  508.                           color_temp: true
  509.             custom_fields:
  510.               Circle: >
  511.                [[[ {
  512.  
  513.                 const temp = Math.round(entity.attributes.brightness / 2.64);
  514.  
  515.                 const radius = 20.5;
  516.  
  517.                 const circumference = radius * 2 * Math.PI;
  518.  
  519.                 return `<svg viewBox="0 0 50 50"><style>circle { transform:
  520.                 rotate(-90deg); transform-origin: 50% 50%;stroke-dasharray:
  521.                 ${circumference};stroke-dashoffset: ${circumference - temp / 100
  522.                 * circumference};}
  523.  
  524.                 tspan {font-size: 10px;}</style> <circle cx="25" cy="25"
  525.                 r="24.5" stroke="#b2b2b2" stroke-width="1.5" fill="#FFFFFF08"
  526.                 style="
  527.  
  528.                 transform: rotate(-90deg); transform-origin: 50% 50%;" />
  529.  
  530.                 <text x="50%" y="54%" fill="#8d8e90" font-size="11"
  531.                 text-anchor="middle" alignment-baseline="middle"
  532.                 dominant-baseline="middle">${temp}%</text></svg>`; } ]]]
  533.             show_entity_picture: true
  534.             styles:
  535.               card:
  536.                 - font-family: Sf Display
  537.                 - border-radius: var(--custom-button-card-border-radius)
  538.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  539.                 - transition: none
  540.                 - padding: 10%
  541.               grid:
  542.                 - grid-template-areas: '"i" "n" "s"'
  543.                 - grid-template-columns: 1fr
  544.                 - grid-template-rows: 1fr min-content min-content
  545.               name:
  546.                 - justify-self: start
  547.                 - padding-left: 7px
  548.                 - font-weight: bold
  549.                 - font-family: SF Display
  550.                 - font-size: 14px
  551.               img_cell:
  552.                 - justify-content: start
  553.                 - padding-left: 5px
  554.                 - padding-top: 10px
  555.                 - align-items: start
  556.                 - margin: none
  557.               state:
  558.                 - justify-self: start
  559.                 - font-color: red
  560.                 - padding-left: 7px
  561.                 - padding-bottom: 10px
  562.                 - text-transform: capitalize
  563.                 - font-family: SF Display
  564.                 - font-size: 10px
  565.               icon:
  566.                 - width: 40%
  567.               custom_fields:
  568.                 Circle:
  569.                   - align-self: start
  570.                   - position: absolute
  571.                   - left: 55%
  572.                   - top: 10%
  573.                   - width: 40%
  574.                   - font-size: 18px
  575.                   - font-weight: 900
  576.                   - font-family: SF Display
  577.                   - text-transform: capitalize
  578.             state:
  579.               - value: 'on'
  580.                 entity_picture: \local\img\icons8-beleuchtung-50.png
  581.                 color: rgba(255,255,255,0.9)
  582.               - value: 'off'
  583.                 entity_picture: \local\img\icons8-beleuchtung-50.png
  584.                 color: rgba(65,65,63,0.8)
  585.                 styles:
  586.                   card:
  587.                     - filter: opacity(50%)
  588.                   icon:
  589.                     - filter: grayscale(100%)
  590.           - type: custom:button-card
  591.             entity: light.esszimmer_1
  592.             aspect_ratio: 1
  593.             name: Esszimmer
  594.             color_type: card
  595.             show_state: true
  596.             hold_action:
  597.               action: fire-dom-event
  598.               browser_mod:
  599.                 command: popup
  600.                 title: Esszimmer
  601.                 card:
  602.                   type: custom:light-popup-card
  603.                   fullscreen: false
  604.                   entity: light.esszimmer_1
  605.                   icon: none
  606.                   displayType: slider
  607.                   sliderColoredByLight: true
  608.                   actionsInARow: 1
  609.                   brightnessWidth: 100px
  610.                   brightnessHeight: 300px
  611.                   borderRadius: 1.7em
  612.                   sliderColor: '#c7c7c7'
  613.                   sliderTrackColor: rgba(25, 25, 25, 0.9)
  614.                   actions:
  615.                     - action: fire-dom-event
  616.                       color: '#FDCA64'
  617.                       name: Farbe
  618.                       browser_mod:
  619.                         command: popup
  620.                         title: []
  621.                         card:
  622.                           type: custom:light-entity-card
  623.                           entity:
  624.                            - light.esszimmer
  625.                           hide_header: true
  626.                           brightness: true
  627.                           color_temp: true
  628.                           style: |
  629.                            ha-card {
  630.                               box-shadow: none;
  631.                               background: transparent!important;
  632.                             }
  633.             custom_fields:
  634.               Circle: >
  635.                [[[ {
  636.  
  637.                 const temp = Math.round(entity.attributes.brightness / 2.64);
  638.  
  639.                 const radius = 20.5;
  640.  
  641.                 const circumference = radius * 2 * Math.PI;
  642.  
  643.                 return `<svg viewBox="0 0 50 50"><style>circle { transform:
  644.                 rotate(-90deg); transform-origin: 50% 50%;stroke-dasharray:
  645.                 ${circumference};stroke-dashoffset: ${circumference - temp / 100
  646.                 * circumference};}
  647.  
  648.                 tspan {font-size: 10px;}</style> <circle cx="25" cy="25"
  649.                 r="24.5" stroke="#b2b2b2" stroke-width="1.5" fill="#FFFFFF08"
  650.                 style="
  651.  
  652.                 transform: rotate(-90deg); transform-origin: 50% 50%;" />
  653.  
  654.                 <text x="50%" y="54%" fill="#8d8e90" font-size="11"
  655.                 text-anchor="middle" alignment-baseline="middle"
  656.                 dominant-baseline="middle">${temp}%</text></svg>`; } ]]]
  657.             show_entity_picture: true
  658.             styles:
  659.               card:
  660.                 - font-family: Sf Display
  661.                 - border-radius: var(--custom-button-card-border-radius)
  662.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  663.                 - transition: none
  664.                 - padding: 10%
  665.               grid:
  666.                 - grid-template-areas: '"i" "n" "s"'
  667.                 - grid-template-columns: 1fr
  668.                 - grid-template-rows: 1fr min-content min-content
  669.               name:
  670.                 - justify-self: start
  671.                 - padding-left: 7px
  672.                 - font-weight: bold
  673.                 - font-family: SF Display
  674.                 - font-size: 14px
  675.               img_cell:
  676.                 - justify-content: start
  677.                 - padding-left: 5px
  678.                 - padding-top: 10px
  679.                 - align-items: start
  680.                 - margin: none
  681.               state:
  682.                 - justify-self: start
  683.                 - font-color: red
  684.                 - padding-left: 7px
  685.                 - padding-bottom: 10px
  686.                 - text-transform: capitalize
  687.                 - font-family: SF Display
  688.                 - font-size: 10px
  689.               icon:
  690.                 - width: 40%
  691.               custom_fields:
  692.                 Circle:
  693.                   - align-self: start
  694.                   - position: absolute
  695.                   - left: 55%
  696.                   - top: 10%
  697.                   - width: 40%
  698.                   - font-size: 18px
  699.                   - font-weight: 900
  700.                   - font-family: SF Display
  701.                   - text-transform: capitalize
  702.             state:
  703.               - value: 'on'
  704.                 entity_picture: \local\img\icons8-dining-room-48.png
  705.                 color: rgba(255,255,255,0.9)
  706.               - value: 'off'
  707.                 entity_picture: \local\img\icons8-dining-room-48.png
  708.                 color: rgba(65,65,63,0.8)
  709.                 styles:
  710.                   card:
  711.                     - filter: opacity(50%)
  712.                   icon:
  713.                     - filter: grayscale(100%)
  714.         title: Esszimmer
  715.         columns: 2
  716.         view_layout:
  717.           grid-area: esszimmer
  718.       - type: grid
  719.         cards:
  720.           - type: custom:button-card
  721.             entity: light.fernseher
  722.             aspect_ratio: 1
  723.             name: Fernseher
  724.             color_type: card
  725.             show_state: true
  726.             hold_action:
  727.               action: fire-dom-event
  728.               browser_mod:
  729.                 command: popup
  730.                 title: Esszimmer
  731.                 card:
  732.                   type: custom:light-popup-card
  733.                   fullscreen: false
  734.                   entity: light.fernseher
  735.                   icon: none
  736.                   displayType: slider
  737.                   sliderColoredByLight: true
  738.                   actionsInARow: 1
  739.                   offStates: null
  740.                   brightnessWidth: 130px
  741.                   brightnessHeight: 320px
  742.                   borderRadius: 1.7em
  743.                   sliderColor: '#c7c7c7'
  744.                   sliderTrackColor: rgba(25, 25, 25, 0.9)
  745.                   actions:
  746.                     - action: fire-dom-event
  747.                       color: '#FDCA64'
  748.                       name: Farbe
  749.                       browser_mod:
  750.                         command: popup
  751.                         title: []
  752.                         card:
  753.                           type: custom:light-entity-card
  754.                           entity:
  755.                            - light.fernseher
  756.                           hide_header: true
  757.                           brightness: true
  758.                           color_temp: true
  759.             custom_fields:
  760.               Circle: >
  761.                [[[ {
  762.  
  763.                 const temp = Math.round(entity.attributes.brightness / 2.64);
  764.  
  765.                 const radius = 20.5;
  766.  
  767.                 const circumference = radius * 2 * Math.PI;
  768.  
  769.                 return `<svg viewBox="0 0 50 50"><style>circle { transform:
  770.                 rotate(-90deg); transform-origin: 50% 50%;stroke-dasharray:
  771.                 ${circumference};stroke-dashoffset: ${circumference - temp / 100
  772.                 * circumference};}
  773.  
  774.                 tspan {font-size: 10px;}</style> <circle cx="25" cy="25"
  775.                 r="24.5" stroke="#b2b2b2" stroke-width="1.5" fill="#FFFFFF08"
  776.                 style="
  777.  
  778.                 transform: rotate(-90deg); transform-origin: 50% 50%;" />
  779.  
  780.                 <text x="50%" y="54%" fill="#8d8e90" font-size="11"
  781.                 text-anchor="middle" alignment-baseline="middle"
  782.                 dominant-baseline="middle">${temp}%</text></svg>`; } ]]]
  783.             show_entity_picture: true
  784.             styles:
  785.               card:
  786.                 - font-family: Sf Display
  787.                 - border-radius: var(--custom-button-card-border-radius)
  788.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  789.                 - transition: none
  790.                 - padding: 10%
  791.               grid:
  792.                 - grid-template-areas: '"i" "n" "s"'
  793.                 - grid-template-columns: 1fr
  794.                 - grid-template-rows: 1fr min-content min-content
  795.               name:
  796.                 - justify-self: start
  797.                 - padding-left: 7px
  798.                 - font-weight: bold
  799.                 - font-family: SF Display
  800.                 - font-size: 14px
  801.               img_cell:
  802.                 - justify-content: start
  803.                 - padding-left: 5px
  804.                 - padding-top: 10px
  805.                 - align-items: start
  806.                 - margin: none
  807.               state:
  808.                 - justify-self: start
  809.                 - font-color: red
  810.                 - padding-left: 7px
  811.                 - padding-bottom: 10px
  812.                 - text-transform: capitalize
  813.                 - font-family: SF Display
  814.                 - font-size: 10px
  815.               icon:
  816.                 - width: 40%
  817.               custom_fields:
  818.                 Circle:
  819.                   - align-self: start
  820.                   - position: absolute
  821.                   - left: 55%
  822.                   - top: 10%
  823.                   - width: 40%
  824.                   - font-size: 18px
  825.                   - font-weight: 900
  826.                   - font-family: SF Display
  827.                   - text-transform: capitalize
  828.             state:
  829.               - value: 'on'
  830.                 entity_picture: \local\img\icons8-scoop-beleuchtung-48.png
  831.                 color: rgba(255,255,255,0.9)
  832.               - value: 'off'
  833.                 entity_picture: \local\img\icons8-scoop-beleuchtung-48.png
  834.                 color: rgba(65,65,63,0.8)
  835.                 styles:
  836.                   card:
  837.                     - filter: opacity(50%)
  838.                   icon:
  839.                     - filter: grayscale(100%)
  840.               - value: unavailable
  841.                 entity_picture: \local\img\icons8-achtung-48.png
  842.                 color: rgba(255,0,0,0.8)
  843.           - type: custom:button-card
  844.             entity: light.licht_vitrine
  845.             aspect_ratio: 1
  846.             name: Vitrine
  847.             color_type: card
  848.             show_state: true
  849.             hold_action:
  850.               action: fire-dom-event
  851.               browser_mod:
  852.                 command: popup
  853.                 title: Vitrine
  854.                 card:
  855.                   type: custom:light-popup-card
  856.                   fullscreen: false
  857.                   entity: light.licht_vitrine
  858.                   icon: none
  859.                   displayType: slider
  860.                   sliderColoredByLight: true
  861.                   actionsInARow: 1
  862.                   offStates: null
  863.                   brightnessWidth: 130px
  864.                   brightnessHeight: 320px
  865.                   borderRadius: 1.7em
  866.                   sliderColor: '#c7c7c7'
  867.                   sliderTrackColor: rgba(25, 25, 25, 0.9)
  868.                   actions:
  869.                     - action: fire-dom-event
  870.                       color: '#FDCA64'
  871.                       name: Farbe
  872.                       browser_mod:
  873.                         command: popup
  874.                         title: []
  875.                         card:
  876.                           type: custom:light-entity-card
  877.                           entity:
  878.                            - light.licht_vitrine
  879.                           hide_header: true
  880.                           brightness: true
  881.                           color_temp: true
  882.             custom_fields:
  883.               Circle: >
  884.                [[[ {
  885.  
  886.                 const temp = Math.round(entity.attributes.brightness / 2.64);
  887.  
  888.                 const radius = 20.5;
  889.  
  890.                 const circumference = radius * 2 * Math.PI;
  891.  
  892.                 return `<svg viewBox="0 0 50 50"><style>circle { transform:
  893.                 rotate(-90deg); transform-origin: 50% 50%;stroke-dasharray:
  894.                 ${circumference};stroke-dashoffset: ${circumference - temp / 100
  895.                 * circumference};}
  896.  
  897.                 tspan {font-size: 10px;}</style> <circle cx="25" cy="25"
  898.                 r="24.5" stroke="#b2b2b2" stroke-width="1.5" fill="#FFFFFF08"
  899.                 style="
  900.  
  901.                 transform: rotate(-90deg); transform-origin: 50% 50%;" />
  902.  
  903.                 <text x="50%" y="54%" fill="#8d8e90" font-size="11"
  904.                 text-anchor="middle" alignment-baseline="middle"
  905.                 dominant-baseline="middle">${temp}%</text></svg>`; } ]]]
  906.             show_entity_picture: true
  907.             styles:
  908.               card:
  909.                 - font-family: Sf Display
  910.                 - border-radius: var(--custom-button-card-border-radius)
  911.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  912.                 - transition: none
  913.                 - padding: 10%
  914.               grid:
  915.                 - grid-template-areas: '"i" "n" "s"'
  916.                 - grid-template-columns: 1fr
  917.                 - grid-template-rows: 1fr min-content min-content
  918.               name:
  919.                 - justify-self: start
  920.                 - padding-left: 7px
  921.                 - font-weight: bold
  922.                 - font-family: SF Display
  923.                 - font-size: 14px
  924.               img_cell:
  925.                 - justify-content: start
  926.                 - padding-left: 5px
  927.                 - padding-top: 10px
  928.                 - align-items: start
  929.                 - margin: none
  930.               state:
  931.                 - justify-self: start
  932.                 - font-color: red
  933.                 - padding-left: 7px
  934.                 - padding-bottom: 10px
  935.                 - text-transform: capitalize
  936.                 - font-family: SF Display
  937.                 - font-size: 10px
  938.               icon:
  939.                 - width: 40%
  940.               custom_fields:
  941.                 Circle:
  942.                   - align-self: start
  943.                   - position: absolute
  944.                   - left: 55%
  945.                   - top: 10%
  946.                   - width: 40%
  947.                   - font-size: 18px
  948.                   - font-weight: 900
  949.                   - font-family: SF Display
  950.                   - text-transform: capitalize
  951.             state:
  952.               - value: 'on'
  953.                 entity_picture: \local\img\icons8-schrank-mit-schiebetür-48.png
  954.                 color: rgba(255,255,255,0.9)
  955.               - value: 'off'
  956.                 entity_picture: \local\img\icons8-schrank-mit-schiebetür-48.png
  957.                 color: rgba(65,65,63,0.8)
  958.                 styles:
  959.                   card:
  960.                     - filter: opacity(50%)
  961.                   icon:
  962.                     - filter: grayscale(100%)
  963.           - type: custom:button-card
  964.             entity: light.color_temperature_light_5
  965.             aspect_ratio: 1
  966.             name: Schrank
  967.             color_type: card
  968.             show_state: true
  969.             hold_action:
  970.               action: fire-dom-event
  971.               browser_mod:
  972.                 command: popup
  973.                 title: Esszimmer
  974.                 card:
  975.                   type: custom:light-popup-card
  976.                   fullscreen: false
  977.                   entity: light.color_temperature_light_5
  978.                   icon: none
  979.                   displayType: slider
  980.                   sliderColoredByLight: true
  981.                   actionsInARow: 1
  982.                   offStates: null
  983.                   brightnessWidth: 130px
  984.                   brightnessHeight: 320px
  985.                   borderRadius: 1.7em
  986.                   sliderColor: '#c7c7c7'
  987.                   sliderTrackColor: rgba(25, 25, 25, 0.9)
  988.                   actions:
  989.                     - action: fire-dom-event
  990.                       color: '#FDCA64'
  991.                       name: Farbe
  992.                       browser_mod:
  993.                         command: popup
  994.                         title: []
  995.                         card:
  996.                           type: custom:light-entity-card
  997.                           entity:
  998.                            - light.color_temperature_light_5
  999.                           hide_header: true
  1000.                           brightness: true
  1001.                           color_temp: true
  1002.             custom_fields:
  1003.               Circle: >
  1004.                [[[ {
  1005.  
  1006.                 const temp = Math.round(entity.attributes.brightness / 2.64);
  1007.  
  1008.                 const radius = 20.5;
  1009.  
  1010.                 const circumference = radius * 2 * Math.PI;
  1011.  
  1012.                 return `<svg viewBox="0 0 50 50"><style>circle { transform:
  1013.                 rotate(-90deg); transform-origin: 50% 50%;stroke-dasharray:
  1014.                 ${circumference};stroke-dashoffset: ${circumference - temp / 100
  1015.                 * circumference};}
  1016.  
  1017.                 tspan {font-size: 10px;}</style> <circle cx="25" cy="25"
  1018.                 r="24.5" stroke="#b2b2b2" stroke-width="1.5" fill="#FFFFFF08"
  1019.                 style="
  1020.  
  1021.                 transform: rotate(-90deg); transform-origin: 50% 50%;" />
  1022.  
  1023.                 <text x="50%" y="54%" fill="#8d8e90" font-size="11"
  1024.                 text-anchor="middle" alignment-baseline="middle"
  1025.                 dominant-baseline="middle">${temp}%</text></svg>`; } ]]]
  1026.             show_entity_picture: true
  1027.             styles:
  1028.               card:
  1029.                 - font-family: Sf Display
  1030.                 - border-radius: var(--custom-button-card-border-radius)
  1031.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  1032.                 - transition: none
  1033.                 - padding: 10%
  1034.               grid:
  1035.                 - grid-template-areas: '"i" "n" "s"'
  1036.                 - grid-template-columns: 1fr
  1037.                 - grid-template-rows: 1fr min-content min-content
  1038.               name:
  1039.                 - justify-self: start
  1040.                 - padding-left: 7px
  1041.                 - font-weight: bold
  1042.                 - font-family: SF Display
  1043.                 - font-size: 14px
  1044.               img_cell:
  1045.                 - justify-content: start
  1046.                 - padding-left: 5px
  1047.                 - padding-top: 10px
  1048.                 - align-items: start
  1049.                 - margin: none
  1050.               state:
  1051.                 - justify-self: start
  1052.                 - font-color: red
  1053.                 - padding-left: 7px
  1054.                 - padding-bottom: 10px
  1055.                 - text-transform: capitalize
  1056.                 - font-family: SF Display
  1057.                 - font-size: 10px
  1058.               icon:
  1059.                 - width: 40%
  1060.               custom_fields:
  1061.                 Circle:
  1062.                   - align-self: start
  1063.                   - position: absolute
  1064.                   - left: 55%
  1065.                   - top: 10%
  1066.                   - width: 40%
  1067.                   - font-size: 18px
  1068.                   - font-weight: 900
  1069.                   - font-family: SF Display
  1070.                   - text-transform: capitalize
  1071.             state:
  1072.               - value: 'on'
  1073.                 entity_picture: \local\img\icons8-lampe-48.png
  1074.                 color: rgba(255,255,255,0.9)
  1075.               - value: 'off'
  1076.                 entity_picture: \local\img\icons8-lampe-48.png
  1077.                 color: rgba(65,65,63,0.8)
  1078.                 styles:
  1079.                   card:
  1080.                     - filter: opacity(50%)
  1081.                   icon:
  1082.                     - filter: grayscale(100%)
  1083.           - type: custom:button-card
  1084.             entity: light.wohnzimmerschrank
  1085.             aspect_ratio: 1
  1086.             name: Tannenbaum
  1087.             color_type: card
  1088.             show_state: true
  1089.             show_entity_picture: true
  1090.             styles:
  1091.               card:
  1092.                 - font-family: Sf Display
  1093.                 - border-radius: var(--custom-button-card-border-radius)
  1094.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  1095.                 - transition: none
  1096.                 - padding: 10%
  1097.               grid:
  1098.                 - grid-template-areas: '"i" "n" "s"'
  1099.                 - grid-template-columns: 1fr
  1100.                 - grid-template-rows: 1fr min-content min-content
  1101.               name:
  1102.                 - justify-self: start
  1103.                 - padding-left: 7px
  1104.                 - font-weight: bold
  1105.                 - font-family: SF Display
  1106.                 - font-size: 14px
  1107.               img_cell:
  1108.                 - justify-content: start
  1109.                 - padding-left: 5px
  1110.                 - padding-top: 10px
  1111.                 - align-items: start
  1112.                 - margin: none
  1113.               state:
  1114.                 - justify-self: start
  1115.                 - font-color: red
  1116.                 - padding-left: 7px
  1117.                 - padding-bottom: 10px
  1118.                 - text-transform: capitalize
  1119.                 - font-family: SF Display
  1120.                 - font-size: 10px
  1121.               icon:
  1122.                 - width: 40%
  1123.               custom_fields:
  1124.                 Geschirr:
  1125.                   - position: absolute
  1126.                   - left: 60%
  1127.                   - top: 10%
  1128.                   - width: 60%
  1129.             state:
  1130.               - value: 'on'
  1131.                 entity_picture: \local\img\icons8-weihnachtsbaum-48.png
  1132.                 color: rgba(255,255,255,0.9)
  1133.               - value: 'off'
  1134.                 entity_picture: \local\img\icons8-weihnachtsbaum-48.png
  1135.                 color: rgba(65,65,63,0.8)
  1136.                 styles:
  1137.                   card:
  1138.                     - filter: opacity(50%)
  1139.                   icon:
  1140.                     - filter: grayscale(100%)
  1141.         title: Wohnzimmer
  1142.         columns: 2
  1143.         view_layout:
  1144.           grid-area: wohnzimmer
  1145.       - type: grid
  1146.         cards:
  1147.           - type: custom:button-card
  1148.             entity: script.1634564870887
  1149.             aspect_ratio: 1
  1150.             name: Haustür öffnen
  1151.             color_type: card
  1152.             show_state: true
  1153.             show_entity_picture: true
  1154.             tap_action:
  1155.               action: call-service
  1156.               service: script.1634564870887
  1157.               confirmation:
  1158.                 text: Haustür öffnen ?
  1159.             styles:
  1160.               card:
  1161.                 - font-family: Sf Display
  1162.                 - border-radius: var(--custom-button-card-border-radius)
  1163.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  1164.                 - transition: none
  1165.                 - padding: 10%
  1166.               grid:
  1167.                 - grid-template-areas: '"i" "n" "s"'
  1168.                 - grid-template-columns: 1fr
  1169.                 - grid-template-rows: 1fr min-content min-content
  1170.               name:
  1171.                 - justify-self: start
  1172.                 - padding-left: 7px
  1173.                 - font-weight: bold
  1174.                 - font-family: SF Display
  1175.                 - font-size: 14px
  1176.               img_cell:
  1177.                 - justify-content: start
  1178.                 - padding-left: 5px
  1179.                 - padding-top: 10px
  1180.                 - align-items: start
  1181.                 - margin: none
  1182.               state:
  1183.                 - justify-self: start
  1184.                 - font-color: red
  1185.                 - padding-left: 7px
  1186.                 - padding-bottom: 10px
  1187.                 - text-transform: capitalize
  1188.                 - font-family: SF Display
  1189.                 - font-size: 10px
  1190.               icon:
  1191.                 - width: 40%
  1192.             state:
  1193.               - value: 'on'
  1194.                 entity_picture: \local\img\icons8-schloss-orientierung-48.png
  1195.                 color: rgba(255,255,255,0.9)
  1196.               - value: 'off'
  1197.                 entity_picture: \local\img\icons8-schloss-orientierung-48.png
  1198.                 color: rgba(65,65,63,0.8)
  1199.                 styles:
  1200.                   card:
  1201.                     - filter: opacity(50%)
  1202.                   icon:
  1203.                     - filter: grayscale(100%)
  1204.           - type: custom:button-card
  1205.             entity: lock.haustur
  1206.             aspect_ratio: 1
  1207.             name: Haustür
  1208.             tap_action:
  1209.               action: toggle
  1210.             color_type: card
  1211.             show_state: true
  1212.             show_entity_picture: true
  1213.             styles:
  1214.               card:
  1215.                 - font-family: Sf Display
  1216.                 - border-radius: var(--custom-button-card-border-radius)
  1217.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  1218.                 - transition: none
  1219.                 - padding: 10%
  1220.               grid:
  1221.                 - grid-template-areas: '"i" "n" "s"'
  1222.                 - grid-template-columns: 1fr
  1223.                 - grid-template-rows: 1fr min-content min-content
  1224.               name:
  1225.                 - justify-self: start
  1226.                 - padding-left: 7px
  1227.                 - font-weight: bold
  1228.                 - font-family: SF Display
  1229.                 - font-size: 14px
  1230.               img_cell:
  1231.                 - justify-content: start
  1232.                 - padding-left: 5px
  1233.                 - padding-top: 10px
  1234.                 - align-items: start
  1235.                 - margin: none
  1236.               state:
  1237.                 - justify-self: start
  1238.                 - font-color: red
  1239.                 - padding-left: 7px
  1240.                 - padding-bottom: 10px
  1241.                 - text-transform: capitalize
  1242.                 - font-family: SF Display
  1243.                 - font-size: 10px
  1244.               icon:
  1245.                 - width: 40%
  1246.             state:
  1247.               - value: locked
  1248.                 entity_picture: \local\img\icons8-sperren-48.png
  1249.                 color: rgba(255,255,255,0.9)
  1250.               - value: unlocked
  1251.                 entity_picture: \local\img\icons8-entsperren-48.png
  1252.                 color: rgba(65,65,63,0.8)
  1253.                 styles:
  1254.                   card:
  1255.                     - filter: opacity(50%)
  1256.                   icon:
  1257.                     - filter: grayscale(100%)
  1258.           - type: custom:button-card
  1259.             entity: camera.vorderseite
  1260.             camera_view: live
  1261.             aspect_ratio: 1
  1262.             name: Kamera
  1263.             color_type: card
  1264.             show_state: true
  1265.             tap_action:
  1266.               action: fire-dom-event
  1267.               browser_mod:
  1268.                 command: popup
  1269.                 title: Eingang
  1270.                 style:
  1271.                   hui-vertical-stack-card:
  1272.                     $hui-entities-card$: |
  1273.                      #states {
  1274.                         padding-top: 0.5em;
  1275.                         padding-bottom: 1.2em;
  1276.                       }
  1277.                 card:
  1278.                   type: vertical-stack
  1279.                   cards:
  1280.                     - type: picture-entity
  1281.                       entity: camera.vorderseite
  1282.                       camera_view: live
  1283.                     - type: entities
  1284.                       card_mod:
  1285.                         class: content
  1286.                       entities:
  1287.                         - entity: binary_sensor.presence_47
  1288.                           secondary_info: last-changed
  1289.                           name: Bewegung Eingang
  1290.                         - entity: sensor.carport_temperature_2
  1291.                           name: Temperatur
  1292.                     - type: custom:mini-graph-card
  1293.                       entities:
  1294.                         - entity: sensor.carport_temperature_2
  1295.                       line_width: 6
  1296.                       hour24: true
  1297.                       group: true
  1298.                       lign_icon: left
  1299.                       align_state: right
  1300.                       align_header: left
  1301.                       hours_to_show: 24
  1302.                       show:
  1303.                         fill: fade
  1304.                         icon: false
  1305.                         name: false
  1306.                         state: false
  1307.                         name_adaptive_color: false
  1308.                         labels: hover
  1309.                         legend: false
  1310.                       tap_action:
  1311.                         action: none
  1312.             show_entity_picture: true
  1313.             styles:
  1314.               card:
  1315.                 - font-family: Sf Display
  1316.                 - border-radius: var(--custom-button-card-border-radius)
  1317.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  1318.                 - transition: none
  1319.                 - padding: 10%
  1320.               grid:
  1321.                 - grid-template-areas: '"i" "n" "s"'
  1322.                 - grid-template-columns: 1fr
  1323.                 - grid-template-rows: 1fr min-content min-content
  1324.               name:
  1325.                 - justify-self: start
  1326.                 - padding-left: 7px
  1327.                 - font-weight: bold
  1328.                 - font-family: SF Display
  1329.                 - font-size: 14px
  1330.               img_cell:
  1331.                 - justify-content: start
  1332.                 - padding-left: 5px
  1333.                 - padding-top: 10px
  1334.                 - align-items: start
  1335.                 - margin: none
  1336.               state:
  1337.                 - justify-self: start
  1338.                 - font-color: red
  1339.                 - padding-left: 7px
  1340.                 - padding-bottom: 10px
  1341.                 - text-transform: capitalize
  1342.                 - font-family: SF Display
  1343.                 - font-size: 10px
  1344.               icon:
  1345.                 - width: 40%
  1346.             state:
  1347.               - value: 'on'
  1348.                 entity_picture: \local\img\icons8-außenkamera-48.png
  1349.                 color: rgba(255,255,255,0.9)
  1350.               - value: idle
  1351.                 entity_picture: \local\img\icons8-außenkamera-48.png
  1352.                 color: rgba(65,65,63,0.8)
  1353.                 styles:
  1354.                   card:
  1355.                     - filter: opacity(50%)
  1356.                   icon:
  1357.                     - filter: grayscale(100%)
  1358.           - type: custom:button-card
  1359.             entity: alarm_control_panel.home
  1360.             aspect_ratio: 1
  1361.             show_title: false
  1362.             tap_action:
  1363.               action: fire-dom-event
  1364.               browser_mod:
  1365.                 command: popup
  1366.                 title: Alarm
  1367.                 style:
  1368.                   hui-vertical-stack-card: null
  1369.                   $hui-entities-card$: |
  1370.                    #states {
  1371.                       padding-top: 0.5em;
  1372.                       padding-bottom: 1.2em;
  1373.                     }
  1374.                 card:
  1375.                   type: vertical-stack
  1376.                   cards:
  1377.                     - type: custom:alarmo-card
  1378.                       entity: alarm_control_panel.home
  1379.                       keep_keypad_visible: true
  1380.             show_entity_picture: true
  1381.             color_type: card
  1382.             show_state: true
  1383.             styles:
  1384.               card:
  1385.                 - font-family: Sf Display
  1386.                 - border-radius: var(--custom-button-card-border-radius)
  1387.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  1388.                 - transition: none
  1389.                 - padding: 10%
  1390.               grid:
  1391.                 - grid-template-areas: '"i" "n" "s"'
  1392.                 - grid-template-columns: 1fr
  1393.                 - grid-template-rows: 1fr min-content min-content
  1394.               name:
  1395.                 - justify-self: start
  1396.                 - padding-left: 7px
  1397.                 - font-weight: bold
  1398.                 - font-family: SF Display
  1399.                 - font-size: 14px
  1400.               img_cell:
  1401.                 - justify-content: start
  1402.                 - padding-left: 5px
  1403.                 - padding-top: 10px
  1404.                 - align-items: start
  1405.                 - margin: none
  1406.               state:
  1407.                 - justify-self: start
  1408.                 - font-color: red
  1409.                 - padding-left: 7px
  1410.                 - padding-bottom: 10px
  1411.                 - text-transform: capitalize
  1412.                 - font-family: SF Display
  1413.                 - font-size: 10px
  1414.               icon:
  1415.                 - width: 40%
  1416.             state:
  1417.               - value: armed_away
  1418.                 entity_picture: \local\img\icons8-gesichert-durch-alarmanlage-48.png
  1419.                 color: rgba(255,255,255,0.9)
  1420.               - value: armed_home
  1421.                 entity_picture: \local\img\icons8-gesichert-durch-alarmanlage-48.png
  1422.                 color: rgba(255,255,255,0.9)
  1423.               - value: pending
  1424.                 entity_picture: \local\img\icons8-gesichert-durch-alarmanlage-48.png
  1425.                 color: rgba(255,255,255,0.9)
  1426.               - value: triggered
  1427.                 entity_picture: \local\img\icons8-gesichert-durch-alarmanlage-48.png
  1428.                 color: rgba(255,255,255,0.9)
  1429.               - value: arming
  1430.                 entity_picture: \local\img\icons8-gesichert-durch-alarmanlage-48.png
  1431.               - value: disarmed
  1432.                 entity_picture: \local\img\icons8-gesichert-durch-alarmanlage-48.png
  1433.                 color: rgba(65,65,63,0.8)
  1434.                 styles:
  1435.                   card:
  1436.                     - filter: opacity(50%)
  1437.                   icon:
  1438.                     - filter: grayscale(100%)
  1439.         title: Aussenbereich
  1440.         columns: 2
  1441.         view_layout:
  1442.           grid-area: aussen
  1443.       - type: grid
  1444.         cards:
  1445.           - type: custom:button-card
  1446.             entity: media_player.wohnzimmer_2_2
  1447.             aspect_ratio: 1
  1448.             tap_action:
  1449.               action: fire-dom-event
  1450.               browser_mod:
  1451.                 command: popup
  1452.                 title: Sonos
  1453.                 card:
  1454.                   type: custom:media_player-popup-card
  1455.                   fullscreen: false
  1456.                   sliderWidth: 130px
  1457.                   sliderHeight: 320px
  1458.                   borderRadius: 1.7em
  1459.                   sliderColor: '#c7c7c7'
  1460.                   sliderTrackColor: rgba(25, 25, 25, 0.9)
  1461.                   entity: media_player.wohnzimmer_2_2
  1462.                   actions:
  1463.                     - service: media_player.media_previous_track
  1464.                       service_data:
  1465.                         entity_id: this
  1466.                       name: previous
  1467.                       icon: mdi:skip-previous
  1468.                     - service: media_player.media_play_pause
  1469.                       service_data:
  1470.                         entity_id: this
  1471.                       name: play/pause
  1472.                       icon: mdi:play-pause
  1473.                     - service: media_player.media_next_track
  1474.                       service_data:
  1475.                         entity_id: this
  1476.                       name: next
  1477.                       icon: mdi:skip-next
  1478.             name: Sonos
  1479.             color_type: card
  1480.             show_state: false
  1481.             show_entity_picture: true
  1482.             styles:
  1483.               card:
  1484.                 - font-family: Sf Display
  1485.                 - border-radius: var(--custom-button-card-border-radius)
  1486.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  1487.                 - transition: none
  1488.                 - padding: 10%
  1489.               grid:
  1490.                 - grid-template-areas: '"i" "n" "s"'
  1491.                 - grid-template-columns: 1fr
  1492.                 - grid-template-rows: 1fr min-content min-content
  1493.               name:
  1494.                 - justify-self: start
  1495.                 - padding-left: 7px
  1496.                 - font-weight: bold
  1497.                 - padding-bottom: 25px
  1498.                 - font-family: SF Display
  1499.                 - font-size: 14px
  1500.               img_cell:
  1501.                 - justify-content: start
  1502.                 - padding-left: 5px
  1503.                 - padding-top: 10px
  1504.                 - align-items: start
  1505.                 - margin: none
  1506.               state:
  1507.                 - justify-self: start
  1508.                 - font-color: red
  1509.                 - padding-left: 7px
  1510.                 - padding-bottom: 10px
  1511.                 - text-transform: capitalize
  1512.                 - font-family: SF Display
  1513.                 - font-size: 10px
  1514.               icon:
  1515.                 - width: 40%
  1516.               custom_fields:
  1517.                 Playing:
  1518.                   - align-self: start
  1519.                   - position: absolute
  1520.                   - left: 55%
  1521.                   - top: 10%
  1522.                   - width: 40%
  1523.                   - font-size: 18px
  1524.                   - font-weight: 900
  1525.                   - font-family: SF Display
  1526.                   - text-transform: capitalize
  1527.             state:
  1528.               - value: playing
  1529.                 entity_picture: \local\img\icons8-sonos-speaker-50.png
  1530.                 color: rgba(255,255,255,0.9)
  1531.               - value: paused
  1532.                 entity_picture: \local\img\icons8-sonos-speaker-50.png
  1533.                 color: rgba(65,65,63,0.8)
  1534.                 styles:
  1535.                   card:
  1536.                     - filter: opacity(50%)
  1537.                   icon:
  1538.                     - filter: grayscale(100%)
  1539.           - type: custom:button-card
  1540.             entity: switch.xbox_one
  1541.             aspect_ratio: 1
  1542.             color_type: card
  1543.             show_state: true
  1544.             name: XBox
  1545.             show_title: false
  1546.             tap_action:
  1547.               action: toggle
  1548.             hold_action:
  1549.               action: fire-dom-event
  1550.               browser_mod:
  1551.                 command: popup
  1552.                 title: Xbox One
  1553.                 card:
  1554.                   type: custom:stack-in-card
  1555.                   cards:
  1556.                     - entity: media_player.xboxone
  1557.                       type: custom:mini-media-player
  1558.                       artwork: material
  1559.                       icon: mdi:microsoft-xbox-controller
  1560.                       name: Spiel
  1561.                       group: true
  1562.                       scale: 0.8
  1563.                       hide:
  1564.                         volume: true
  1565.                         controls: true
  1566.                         power: true
  1567.                         info: false
  1568.             show_entity_picture: true
  1569.             styles:
  1570.               card:
  1571.                 - font-family: Sf Display
  1572.                 - border-radius: var(--custom-button-card-border-radius)
  1573.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  1574.                 - transition: none
  1575.                 - padding: 10%
  1576.               grid:
  1577.                 - grid-template-areas: '"i" "n" "s"'
  1578.                 - grid-template-columns: 1fr
  1579.                 - grid-template-rows: 1fr min-content min-content
  1580.               name:
  1581.                 - justify-self: start
  1582.                 - padding-left: 7px
  1583.                 - font-weight: bold
  1584.                 - font-family: SF Display
  1585.                 - font-size: 14px
  1586.               img_cell:
  1587.                 - justify-content: start
  1588.                 - padding-left: 5px
  1589.                 - padding-top: 10px
  1590.                 - align-items: start
  1591.                 - margin: none
  1592.               state:
  1593.                 - justify-self: start
  1594.                 - font-color: red
  1595.                 - padding-left: 7px
  1596.                 - padding-bottom: 10px
  1597.                 - text-transform: capitalize
  1598.                 - font-family: SF Display
  1599.                 - font-size: 10px
  1600.               icon:
  1601.                 - width: 40%
  1602.             state:
  1603.               - value: 'on'
  1604.                 color: rgba(255,255,255,0.9)
  1605.                 entity_picture: \local\img\icons8-xbox-48.png
  1606.               - value: 'off'
  1607.                 color: rgba(65,65,63,0.8)
  1608.                 entity_picture: \local\img\icons8-xbox-48.png
  1609.                 styles:
  1610.                   card:
  1611.                     - filter: opacity(50%)
  1612.                   icon:
  1613.                     - filter: grayscale(100%)
  1614.           - type: custom:button-card
  1615.             entity: switch.sky_q
  1616.             show_title: false
  1617.             aspect_ratio: 1
  1618.             tap_action:
  1619.               action: toggle
  1620.             hold_action:
  1621.               action: fire-dom-event
  1622.               browser_mod:
  1623.                 command: popup
  1624.                 title: Sky Q
  1625.                 card:
  1626.                   type: custom:stack-in-card
  1627.                   cards:
  1628.                     - entity: media_player.sky_q
  1629.                       type: custom:mini-media-player
  1630.                       artwork: artwork
  1631.                       icon: mdi:television-classic
  1632.                       name: SKY Q
  1633.                       group: true
  1634.                       scale: 1
  1635.                       hide:
  1636.                         volume: true
  1637.                         controls: true
  1638.                         power: true
  1639.                         info: false
  1640.             show_entity_picture: true
  1641.             color_type: card
  1642.             show_state: true
  1643.             styles:
  1644.               card:
  1645.                 - font-family: Sf Display
  1646.                 - border-radius: var(--custom-button-card-border-radius)
  1647.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  1648.                 - transition: none
  1649.                 - padding: 10%
  1650.               grid:
  1651.                 - grid-template-areas: '"i" "n" "s"'
  1652.                 - grid-template-columns: 1fr
  1653.                 - grid-template-rows: 1fr min-content min-content
  1654.               name:
  1655.                 - justify-self: start
  1656.                 - padding-left: 7px
  1657.                 - font-weight: bold
  1658.                 - font-family: SF Display
  1659.                 - font-size: 14px
  1660.               img_cell:
  1661.                 - justify-content: start
  1662.                 - padding-left: 5px
  1663.                 - padding-top: 10px
  1664.                 - align-items: start
  1665.                 - margin: none
  1666.               state:
  1667.                 - justify-self: start
  1668.                 - font-color: red
  1669.                 - padding-left: 7px
  1670.                 - padding-bottom: 10px
  1671.                 - text-transform: capitalize
  1672.                 - font-family: SF Display
  1673.                 - font-size: 10px
  1674.               icon:
  1675.                 - width: 40%
  1676.             state:
  1677.               - value: 'on'
  1678.                 color: rgba(255,255,255,0.9)
  1679.                 entity_picture: \local\img\icons8-sky-48.png
  1680.               - value: 'off'
  1681.                 color: rgba(65,65,63,0.8)
  1682.                 entity_picture: \local\img\icons8-sky-48.png
  1683.                 styles:
  1684.                   card:
  1685.                     - filter: opacity(50%)
  1686.                   icon:
  1687.                     - filter: grayscale(100%)
  1688.           - type: custom:swipe-card
  1689.             title: Lieblingssender
  1690.             aspect_ratio: 1
  1691.             show_title: false
  1692.             parameters:
  1693.               effect: coverflow
  1694.               grabCursor: true
  1695.               centeredSlides: true
  1696.               slidesPerView: auto
  1697.               coverflowEffect:
  1698.                 rotate: 50
  1699.                 stretch: 0
  1700.                 depth: 100
  1701.                 modifier: 1
  1702.                 slideShadows: true
  1703.               pagination:
  1704.                 type: none
  1705.             cards:
  1706.               - type: custom:button-card
  1707.                 entity: script.1633693084602
  1708.                 entity_picture: \local\img\icon_512-80s.png
  1709.                 aspect_ratio: 1/1
  1710.                 tap_action:
  1711.                   action: call-service
  1712.                   service: script.1633693084602
  1713.                 name: 80s80s
  1714.                 color_type: card
  1715.                 show_state: false
  1716.                 show_name: false
  1717.                 show_entity_picture: true
  1718.                 styles:
  1719.                   card:
  1720.                     - font-family: Sf Display
  1721.                     - border-radius: var(--custom-button-card-border-radius)
  1722.                     - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  1723.                     - transition: none
  1724.                     - padding: 10%
  1725.                   grid:
  1726.                     - grid-template-areas: '"i" "n" "s"'
  1727.                     - grid-template-columns: 1fr
  1728.                     - grid-template-rows: 1fr min-content min-content
  1729.                   name:
  1730.                     - justify-self: start
  1731.                     - padding-left: 7px
  1732.                     - font-weight: bold
  1733.                     - padding-bottom: 25px
  1734.                     - font-family: SF Display
  1735.                     - font-size: 14px
  1736.                   img_cell:
  1737.                     - justify-content: start
  1738.                     - padding-left: 0px
  1739.                     - padding-top: 0px
  1740.                     - align-items: start
  1741.                     - margin: none
  1742.                   state:
  1743.                     - justify-self: start
  1744.                     - font-color: red
  1745.                     - padding-left: 0px
  1746.                     - padding-bottom: 0px
  1747.                     - text-transform: capitalize
  1748.                     - font-family: SF Display
  1749.                     - font-size: 10px
  1750.                   icon:
  1751.                     - width: 100%
  1752.                     - border-radius: var(--custom-button-card-border-radius)
  1753.               - type: custom:button-card
  1754.                 entity: script.ndr2
  1755.                 entity_picture: \local\img\icon_512-ndr2.png
  1756.                 aspect_ratio: 1/1
  1757.                 tap_action:
  1758.                   action: call-service
  1759.                   service: script.ndr2
  1760.                 name: NDR 2
  1761.                 color_type: card
  1762.                 show_state: false
  1763.                 show_name: false
  1764.                 show_entity_picture: true
  1765.                 styles:
  1766.                   card:
  1767.                     - font-family: Sf Display
  1768.                     - border-radius: var(--custom-button-card-border-radius)
  1769.                     - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  1770.                     - transition: none
  1771.                     - padding: 10%
  1772.                   grid:
  1773.                     - grid-template-areas: '"i" "n" "s"'
  1774.                     - grid-template-columns: 1fr
  1775.                     - grid-template-rows: 1fr min-content min-content
  1776.                   name:
  1777.                     - justify-self: start
  1778.                     - padding-left: 7px
  1779.                     - font-weight: bold
  1780.                     - padding-bottom: 25px
  1781.                     - font-family: SF Display
  1782.                     - font-size: 14px
  1783.                   img_cell:
  1784.                     - justify-content: start
  1785.                     - padding-left: 0px
  1786.                     - padding-top: 0px
  1787.                     - align-items: start
  1788.                     - margin: none
  1789.                   state:
  1790.                     - justify-self: start
  1791.                     - font-color: red
  1792.                     - padding-left: 0px
  1793.                     - padding-bottom: 0px
  1794.                     - text-transform: capitalize
  1795.                     - font-family: SF Display
  1796.                     - font-size: 10px
  1797.                   icon:
  1798.                     - width: 100%
  1799.                     - border-radius: var(--custom-button-card-border-radius)
  1800.               - type: custom:button-card
  1801.                 entity: script.radio_hamburg
  1802.                 entity_picture: \local\img\icon_512-RHH.png
  1803.                 aspect_ratio: 1/1
  1804.                 tap_action:
  1805.                   action: call-service
  1806.                   service: script.radio_hamburg
  1807.                 name: Radio Hamburg
  1808.                 color_type: card
  1809.                 show_state: false
  1810.                 show_name: false
  1811.                 show_entity_picture: true
  1812.                 styles:
  1813.                   card:
  1814.                     - font-family: Sf Display
  1815.                     - border-radius: var(--custom-button-card-border-radius)
  1816.                     - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  1817.                     - transition: none
  1818.                     - padding: 10%
  1819.                   grid:
  1820.                     - grid-template-areas: '"i" "n" "s"'
  1821.                     - grid-template-columns: 1fr
  1822.                     - grid-template-rows: 1fr min-content min-content
  1823.                   name:
  1824.                     - justify-self: start
  1825.                     - padding-left: 7px
  1826.                     - font-weight: bold
  1827.                     - padding-bottom: 25px
  1828.                     - font-family: SF Display
  1829.                     - font-size: 14px
  1830.                   img_cell:
  1831.                     - justify-content: start
  1832.                     - padding-left: 0px
  1833.                     - padding-top: 0px
  1834.                     - align-items: start
  1835.                     - margin: none
  1836.                   state:
  1837.                     - justify-self: start
  1838.                     - font-color: red
  1839.                     - padding-left: 0px
  1840.                     - padding-bottom: 0px
  1841.                     - text-transform: capitalize
  1842.                     - font-family: SF Display
  1843.                     - font-size: 10px
  1844.                   icon:
  1845.                     - width: 100%
  1846.                     - border-radius: var(--custom-button-card-border-radius)
  1847.               - type: custom:button-card
  1848.                 entity: script.n_joy
  1849.                 entity_picture: \local\img\icon_512-Njoy.png
  1850.                 aspect_ratio: 1/1
  1851.                 tap_action:
  1852.                   action: call-service
  1853.                   service: script.n_joy
  1854.                 name: Radio Hamburg
  1855.                 color_type: card
  1856.                 show_state: false
  1857.                 show_name: false
  1858.                 show_entity_picture: true
  1859.                 styles:
  1860.                   card:
  1861.                     - font-family: Sf Display
  1862.                     - border-radius: var(--custom-button-card-border-radius)
  1863.                     - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  1864.                     - transition: none
  1865.                     - padding: 10%
  1866.                   grid:
  1867.                     - grid-template-areas: '"i" "n" "s"'
  1868.                     - grid-template-columns: 1fr
  1869.                     - grid-template-rows: 1fr min-content min-content
  1870.                   name:
  1871.                     - justify-self: start
  1872.                     - padding-left: 7px
  1873.                     - font-weight: bold
  1874.                     - padding-bottom: 25px
  1875.                     - font-family: SF Display
  1876.                     - font-size: 14px
  1877.                   img_cell:
  1878.                     - justify-content: start
  1879.                     - padding-left: 0px
  1880.                     - padding-top: 0px
  1881.                     - align-items: start
  1882.                     - margin: none
  1883.                   state:
  1884.                     - justify-self: start
  1885.                     - font-color: red
  1886.                     - padding-left: 0px
  1887.                     - padding-bottom: 0px
  1888.                     - text-transform: capitalize
  1889.                     - font-family: SF Display
  1890.                     - font-size: 10px
  1891.                   icon:
  1892.                     - width: 100%
  1893.                     - border-radius: var(--custom-button-card-border-radius)
  1894.               - type: custom:button-card
  1895.                 entity: script.spotify_mixtape
  1896.                 entity_picture: \local\img\icons8-spotify.PNG
  1897.                 aspect_ratio: 1/1
  1898.                 tap_action:
  1899.                   action: call-service
  1900.                   service: script.spotify_mixtape
  1901.                 name: Spotify Mixtape
  1902.                 color_type: card
  1903.                 show_state: false
  1904.                 show_name: false
  1905.                 show_entity_picture: true
  1906.                 styles:
  1907.                   card:
  1908.                     - font-family: Sf Display
  1909.                     - border-radius: var(--custom-button-card-border-radius)
  1910.                     - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  1911.                     - transition: none
  1912.                     - padding: 10%
  1913.                   grid:
  1914.                     - grid-template-areas: '"i" "n" "s"'
  1915.                     - grid-template-columns: 1fr
  1916.                     - grid-template-rows: 1fr min-content min-content
  1917.                   name:
  1918.                     - justify-self: start
  1919.                     - padding-left: 7px
  1920.                     - font-weight: bold
  1921.                     - padding-bottom: 25px
  1922.                     - font-family: SF Display
  1923.                     - font-size: 14px
  1924.                   img_cell:
  1925.                     - justify-content: start
  1926.                     - padding-left: 0px
  1927.                     - padding-top: 0px
  1928.                     - align-items: start
  1929.                     - margin: none
  1930.                   state:
  1931.                     - justify-self: start
  1932.                     - font-color: red
  1933.                     - padding-left: 0px
  1934.                     - padding-bottom: 0px
  1935.                     - text-transform: capitalize
  1936.                     - font-family: SF Display
  1937.                     - font-size: 10px
  1938.                   icon:
  1939.                     - width: 100%
  1940.                     - border-radius: var(--custom-button-card-border-radius)
  1941.               - type: custom:button-card
  1942.                 entity: script.fcsp_playlist
  1943.                 entity_picture: \local\img\icons8-fcsp.PNG
  1944.                 aspect_ratio: 1/1
  1945.                 tap_action:
  1946.                   action: call-service
  1947.                   service: script.fcsp_playlist
  1948.                 name: FCSP Playlist
  1949.                 color_type: card
  1950.                 show_state: false
  1951.                 show_name: false
  1952.                 show_entity_picture: true
  1953.                 styles:
  1954.                   card:
  1955.                     - font-family: Sf Display
  1956.                     - border-radius: var(--custom-button-card-border-radius)
  1957.                     - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  1958.                     - transition: none
  1959.                     - padding: 10%
  1960.                   grid:
  1961.                     - grid-template-areas: '"i" "n" "s"'
  1962.                     - grid-template-columns: 1fr
  1963.                     - grid-template-rows: 1fr min-content min-content
  1964.                   name:
  1965.                     - justify-self: start
  1966.                     - padding-left: 7px
  1967.                     - font-weight: bold
  1968.                     - padding-bottom: 25px
  1969.                     - font-family: SF Display
  1970.                     - font-size: 14px
  1971.                   img_cell:
  1972.                     - justify-content: start
  1973.                     - padding-left: 0px
  1974.                     - padding-top: 0px
  1975.                     - align-items: start
  1976.                     - margin: none
  1977.                   state:
  1978.                     - justify-self: start
  1979.                     - font-color: red
  1980.                     - padding-left: 0px
  1981.                     - padding-bottom: 0px
  1982.                     - text-transform: capitalize
  1983.                     - font-family: SF Display
  1984.                     - font-size: 10px
  1985.                   icon:
  1986.                     - width: 100%
  1987.                     - border-radius: var(--custom-button-card-border-radius)
  1988.               - type: custom:button-card
  1989.                 entity: script.mukke
  1990.                 entity_picture: \local\img\icons8-mukke.PNG
  1991.                 aspect_ratio: 1/1
  1992.                 tap_action:
  1993.                   action: call-service
  1994.                   service: script.mukke
  1995.                 name: Mukke
  1996.                 color_type: card
  1997.                 show_state: false
  1998.                 show_name: false
  1999.                 show_entity_picture: true
  2000.                 styles:
  2001.                   card:
  2002.                     - font-family: Sf Display
  2003.                     - border-radius: var(--custom-button-card-border-radius)
  2004.                     - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  2005.                     - transition: none
  2006.                     - padding: 10%
  2007.                   grid:
  2008.                     - grid-template-areas: '"i" "n" "s"'
  2009.                     - grid-template-columns: 1fr
  2010.                     - grid-template-rows: 1fr min-content min-content
  2011.                   name:
  2012.                     - justify-self: start
  2013.                     - padding-left: 7px
  2014.                     - font-weight: bold
  2015.                     - padding-bottom: 25px
  2016.                     - font-family: SF Display
  2017.                     - font-size: 14px
  2018.                   img_cell:
  2019.                     - justify-content: start
  2020.                     - padding-left: 0px
  2021.                     - padding-top: 0px
  2022.                     - align-items: start
  2023.                     - margin: none
  2024.                   state:
  2025.                     - justify-self: start
  2026.                     - font-color: red
  2027.                     - padding-left: 0px
  2028.                     - padding-bottom: 0px
  2029.                     - text-transform: capitalize
  2030.                     - font-family: SF Display
  2031.                     - font-size: 10px
  2032.                   icon:
  2033.                     - width: 100%
  2034.                     - border-radius: var(--custom-button-card-border-radius)
  2035.             styles:
  2036.               card:
  2037.                 - font-family: Sf Display
  2038.                 - border-radius: var(--custom-button-card-border-radius)
  2039.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  2040.                 - transition: none
  2041.                 - padding: 10%
  2042.               grid:
  2043.                 - grid-template-areas: '"i" "n" "s"'
  2044.                 - grid-template-columns: 1fr
  2045.                 - grid-template-rows: 1fr min-content min-content
  2046.               name:
  2047.                 - justify-self: start
  2048.                 - padding-left: 7px
  2049.                 - font-weight: bold
  2050.                 - font-family: SF Display
  2051.                 - font-size: 14px
  2052.               img_cell:
  2053.                 - justify-content: start
  2054.                 - padding-left: 5px
  2055.                 - padding-top: 10px
  2056.                 - align-items: start
  2057.                 - margin: none
  2058.               state:
  2059.                 - justify-self: start
  2060.                 - font-color: red
  2061.                 - padding-left: 7px
  2062.                 - padding-bottom: 10px
  2063.                 - text-transform: capitalize
  2064.                 - font-family: SF Display
  2065.                 - font-size: 10px
  2066.         title: Media
  2067.         columns: 2
  2068.         view_layout:
  2069.           grid-area: media
  2070.       - type: grid
  2071.         cards:
  2072.           - type: custom:button-card
  2073.             entity: person.dirk_albrecht
  2074.             aspect_ratio: 1
  2075.             color_type: card
  2076.             name: Dirk
  2077.             triggers_update:
  2078.              - sensor.dirk_last_changed
  2079.               - sensor.time
  2080.             variables:
  2081.               retain: sensor.dirk_last_changed
  2082.             show_state: true
  2083.             tap_action:
  2084.               action: fire-dom-event
  2085.               browser_mod:
  2086.                 command: popup
  2087.                 title: Dirk
  2088.                 style:
  2089.                   hui-vertical-stack-card:
  2090.                     $hui-history-graph-card$: |
  2091.                      .content {
  2092.                         padding: 0.2em 1.7em 1.2em 1.7em !important;
  2093.                       }
  2094.                     $: |
  2095.                      button-card {
  2096.                         align-self: center;
  2097.                         padding: 0.2em 0 2.3em 0;
  2098.                       }
  2099.                     $hui-map-card:
  2100.                       $: |
  2101.                        mwc-icon-button {
  2102.                           color: var(--primary-color);
  2103.                         }
  2104.                         ha-card {
  2105.                           border-radius: 0;
  2106.                           animation: border 1s forwards;
  2107.                         }
  2108.                         @keyframes border {
  2109.                           0%, 100% {
  2110.                             border-top: 2px solid #1a1a1a;
  2111.                           }
  2112.                         }
  2113.                       $ha-map$: |
  2114.                        #map {
  2115.                           background-color: #191919 !important;
  2116.                         }
  2117.                         .leaflet-control-attribution {
  2118.                           display: none;
  2119.                         }
  2120.                         .leaflet-bar a {
  2121.                           background-color: rgba(47, 51, 51, 0.9) !important;
  2122.                           color: #9da0a2 !important;
  2123.                         }
  2124.                         a.leaflet-control-zoom-in {
  2125.                           border-bottom: 1px solid #181818 !important;
  2126.                         }
  2127.                         .leaflet-pane.leaflet-tile-pane {
  2128.                           filter: contrast(85%);
  2129.                         }
  2130.                 card:
  2131.                   type: vertical-stack
  2132.                   cards:
  2133.                     - type: entities
  2134.                       card_mod:
  2135.                         class: content
  2136.                       entities:
  2137.                         - entity: person.dirk_albrecht
  2138.                           secondary_info: last-changed
  2139.                     - type: history-graph
  2140.                       entities:
  2141.                         - entity: person.dirk_albrecht
  2142.                     - type: glance
  2143.                       show_state: false
  2144.                       entities:
  2145.                         - entity: device_tracker.iphone_von_dirk
  2146.                           name: Router
  2147.                           icon: mdi:wifi
  2148.                           style: |
  2149.                            state-badge {
  2150.                               color: {{ '#3182b7' if is_state(config.entity, 'home') else '#3c3f3f' }};
  2151.                             }
  2152.                         - entity: sensor.iphone_von_dirk_connection_type
  2153.                           name: Bluetooth
  2154.                           icon: mdi:bluetooth
  2155.                           style: |
  2156.                            state-badge {
  2157.                               color: {{ '#3182b7' if is_state(config.entity, 'home') else '#3c3f3f' }};
  2158.                             }
  2159.                     - type: custom:button-card
  2160.                       name: Ton abspielen
  2161.                       icon: mdi:volume-high
  2162.                       tap_action:
  2163.                         action: call-service
  2164.                         service: notify.mobile_app_iphone_von_dirk
  2165.                         service_data:
  2166.                           title: Wo ist mein Iphone
  2167.                           message: Hier ist mein Iphone
  2168.                           data:
  2169.                             push:
  2170.                               sound:
  2171.                                 name: findmy.wav
  2172.                                 critical: 1
  2173.                                 volume: 1
  2174.                     - type: map
  2175.                       default_zoom: 16
  2176.                       dark_mode: true
  2177.                       entities:
  2178.                        - device_tracker.iphone_von_dirk
  2179.             custom_fields:
  2180.               circle: |
  2181.                [[[
  2182.                  if (entity) {
  2183.                     let time = c => {
  2184.                       let s = (c/1e3), m = (c/6e4), h = (c/36e5), d = (c/864e5);
  2185.                       return s < 60 ? parseInt(s) + 's' : m < 60 ? parseInt(m) + 'm' : h < 24 ? parseInt(h) + 'h' : parseInt(d) + 'd';
  2186.                     };
  2187.                     let last_changed = states[variables.retain] == null || states[variables.retain].state == 'unavailable'
  2188.                         ? time(Date.now() - Date.parse(states[entity.entity_id].last_changed))
  2189.                         : time(Date.now() - Date.parse(states[variables.retain].state)),
  2190.                       stroke = variables.state === 'home' ? 'rgba(255,0,0,1.0)' : 'none',
  2191.                       fill = variables.state === 'not_home' ? 'rgba(255,0,0,1.0)' : 'none';
  2192.                  const radius = 100;
  2193.                  const circumference = radius * 2 * Math.PI;
  2194.                  return `<svg viewBox="0 0 50 50"><style>circle { transform: rotate(-90deg); transform-origin: 50% 50%;stroke-dasharray: ${circumference};stroke-dashoffset: ${circumference - last_changed / 100 * circumference};}
  2195.                  tspan {font-size: 10px;}</style> <circle cx="25" cy="25" r="24.5" stroke="#b2b2b2" stroke-width="1.5" fill="#FFFFFF08" style="
  2196.                  transform: rotate(-90deg); transform-origin: 50% 50%;" />
  2197.                  <text x="50%" y="54%" fill="#8d8e90" font-size="11" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle">${last_changed}</text></svg>`; }
  2198.                 ]]]
  2199.             show_entity_picture: true
  2200.             styles:
  2201.               card:
  2202.                 - font-family: Sf Display
  2203.                 - border-radius: var(--custom-button-card-border-radius)
  2204.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  2205.                 - transition: none
  2206.                 - padding: 10%
  2207.               grid:
  2208.                 - grid-template-areas: '"i" "n" "s"'
  2209.                 - grid-template-columns: 1fr
  2210.                 - grid-template-rows: 1fr min-content min-content
  2211.               name:
  2212.                 - justify-self: start
  2213.                 - padding-left: 7px
  2214.                 - font-weight: bold
  2215.                 - font-family: SF Display
  2216.                 - font-size: 14px
  2217.               img_cell:
  2218.                 - justify-content: start
  2219.                 - padding-left: 5px
  2220.                 - padding-top: 10px
  2221.                 - align-items: start
  2222.                 - margin: none
  2223.               state:
  2224.                 - justify-self: start
  2225.                 - font-color: red
  2226.                 - padding-left: 7px
  2227.                 - padding-bottom: 10px
  2228.                 - text-transform: capitalize
  2229.                 - font-family: SF Display
  2230.                 - font-size: 11px
  2231.               icon:
  2232.                 - width: 40%
  2233.                 - clip-path: circle()
  2234.               custom_fields:
  2235.                 circle:
  2236.                   - align-self: start
  2237.                   - position: absolute
  2238.                   - left: 55%
  2239.                   - top: 10%
  2240.                   - width: 40%
  2241.                   - font-size: 18px
  2242.                   - font-weight: 900
  2243.                   - font-family: SF Display
  2244.                   - text-transform: capitalize
  2245.             state:
  2246.               - value: home
  2247.                 color: rgba(255,255,255,0.9)
  2248.                 entity_picture: /api/image/serve/b7f3b1e168629ad56234f2b585f907c7/512x512
  2249.               - value: not_home
  2250.                 color: rgba(65,65,63,0.8)
  2251.                 entity_picture: /api/image/serve/b7f3b1e168629ad56234f2b585f907c7/512x512
  2252.                 styles:
  2253.                   card:
  2254.                     - filter: opacity(50%)
  2255.                   icon:
  2256.                     - filter: grayscale(100%)
  2257.           - type: custom:button-card
  2258.             entity: person.christina_wolk
  2259.             aspect_ratio: 1
  2260.             color_type: card
  2261.             name: Christina
  2262.             triggers_update:
  2263.              - sensor.christina_last_changed
  2264.               - sensor.time
  2265.             variables:
  2266.               retain: sensor.christina_last_changed
  2267.             show_state: true
  2268.             tap_action:
  2269.               action: fire-dom-event
  2270.               browser_mod:
  2271.                 command: popup
  2272.                 title: Dirk
  2273.                 style:
  2274.                   hui-vertical-stack-card:
  2275.                     $hui-history-graph-card$: |
  2276.                      .content {
  2277.                         padding: 0.2em 1.7em 1.2em 1.7em !important;
  2278.                       }
  2279.                     $: |
  2280.                      button-card {
  2281.                         align-self: center;
  2282.                         padding: 0.2em 0 2.3em 0;
  2283.                       }
  2284.                     $hui-map-card:
  2285.                       $: |
  2286.                        mwc-icon-button {
  2287.                           color: var(--primary-color);
  2288.                         }
  2289.                         ha-card {
  2290.                           border-radius: 0;
  2291.                           animation: border 1s forwards;
  2292.                         }
  2293.                         @keyframes border {
  2294.                           0%, 100% {
  2295.                             border-top: 2px solid #1a1a1a;
  2296.                           }
  2297.                         }
  2298.                       $ha-map$: |
  2299.                        #map {
  2300.                           background-color: #191919 !important;
  2301.                         }
  2302.                         .leaflet-control-attribution {
  2303.                           display: none;
  2304.                         }
  2305.                         .leaflet-bar a {
  2306.                           background-color: rgba(47, 51, 51, 0.9) !important;
  2307.                           color: #9da0a2 !important;
  2308.                         }
  2309.                         a.leaflet-control-zoom-in {
  2310.                           border-bottom: 1px solid #181818 !important;
  2311.                         }
  2312.                         .leaflet-pane.leaflet-tile-pane {
  2313.                           filter: contrast(85%);
  2314.                         }
  2315.                 card:
  2316.                   type: vertical-stack
  2317.                   cards:
  2318.                     - type: entities
  2319.                       card_mod:
  2320.                         class: content
  2321.                       entities:
  2322.                         - entity: person.christina_wolk
  2323.                           secondary_info: last-changed
  2324.                     - type: history-graph
  2325.                       entities:
  2326.                         - entity: person.christina_wolk
  2327.                     - type: glance
  2328.                       show_state: false
  2329.                       entities:
  2330.                         - entity: device_tracker.iphonevhristina_6
  2331.                           name: Router
  2332.                           icon: mdi:wifi
  2333.                           style: |
  2334.                            state-badge {
  2335.                               color: {{ '#3182b7' if is_state(config.entity, 'home') else '#3c3f3f' }};
  2336.                             }
  2337.                         - entity: device_tracker.iphonevhristina_6
  2338.                           name: Bluetooth
  2339.                           icon: mdi:bluetooth
  2340.                           style: |
  2341.                            state-badge {
  2342.                               color: {{ '#3182b7' if is_state(config.entity, 'home') else '#3c3f3f' }};
  2343.                             }
  2344.                     - type: custom:button-card
  2345.                       name: Ton abspielen
  2346.                       icon: mdi:volume-high
  2347.                       tap_action:
  2348.                         action: call-service
  2349.                         service: notify.mobile_app_iphone_von_dirk
  2350.                         service_data:
  2351.                           title: Wo ist mein Iphone
  2352.                           message: Hier ist mein Iphone
  2353.                           data:
  2354.                             push:
  2355.                               sound:
  2356.                                 name: findmy.wav
  2357.                                 critical: 1
  2358.                                 volume: 1
  2359.                     - type: map
  2360.                       default_zoom: 16
  2361.                       dark_mode: true
  2362.                       entities:
  2363.                        - device_tracker.iphonevhristina_5
  2364.             custom_fields:
  2365.               circle: |
  2366.                [[[
  2367.                  if (entity) {
  2368.                     let time = c => {
  2369.                       let s = (c/1e3), m = (c/6e4), h = (c/36e5), d = (c/864e5);
  2370.                       return s < 60 ? parseInt(s) + 's' : m < 60 ? parseInt(m) + 'm' : h < 24 ? parseInt(h) + 'h' : parseInt(d) + 'd';
  2371.                     };
  2372.                     let last_changed = states[variables.retain] == null || states[variables.retain].state == 'unavailable'
  2373.                         ? time(Date.now() - Date.parse(states[entity.entity_id].last_changed))
  2374.                         : time(Date.now() - Date.parse(states[variables.retain].state)),
  2375.                       stroke = variables.state === 'home' ? 'rgba(255,0,0,1.0)' : 'none',
  2376.                       fill = variables.state === 'not_home' ? 'rgba(255,0,0,1.0)' : 'none';
  2377.                  const radius = 100;
  2378.                  const circumference = radius * 2 * Math.PI;
  2379.                  return `<svg viewBox="0 0 50 50"><style>circle { transform: rotate(-90deg); transform-origin: 50% 50%;stroke-dasharray: ${circumference};stroke-dashoffset: ${circumference - last_changed / 100 * circumference};}
  2380.                  tspan {font-size: 10px;}</style> <circle cx="25" cy="25" r="24.5" stroke="#b2b2b2" stroke-width="1.5" fill="#FFFFFF08" style="
  2381.                  transform: rotate(-90deg); transform-origin: 50% 50%;" />
  2382.                  <text x="50%" y="54%" fill="#8d8e90" font-size="11" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle">${last_changed}</text></svg>`; }
  2383.                 ]]]
  2384.             show_entity_picture: true
  2385.             styles:
  2386.               card:
  2387.                 - font-family: Sf Display
  2388.                 - border-radius: var(--custom-button-card-border-radius)
  2389.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  2390.                 - transition: none
  2391.                 - padding: 10%
  2392.               grid:
  2393.                 - grid-template-areas: '"i" "n" "s"'
  2394.                 - grid-template-columns: 1fr
  2395.                 - grid-template-rows: 1fr min-content min-content
  2396.               name:
  2397.                 - justify-self: start
  2398.                 - padding-left: 7px
  2399.                 - font-weight: bold
  2400.                 - font-family: SF Display
  2401.                 - font-size: 14px
  2402.               img_cell:
  2403.                 - justify-content: start
  2404.                 - padding-left: 5px
  2405.                 - padding-top: 10px
  2406.                 - align-items: start
  2407.                 - margin: none
  2408.               state:
  2409.                 - justify-self: start
  2410.                 - font-color: red
  2411.                 - padding-left: 7px
  2412.                 - padding-bottom: 10px
  2413.                 - text-transform: capitalize
  2414.                 - font-family: SF Display
  2415.                 - font-size: 11px
  2416.               icon:
  2417.                 - width: 40%
  2418.                 - clip-path: circle()
  2419.               custom_fields:
  2420.                 circle:
  2421.                   - align-self: start
  2422.                   - position: absolute
  2423.                   - left: 55%
  2424.                   - top: 10%
  2425.                   - width: 40%
  2426.                   - font-size: 18px
  2427.                   - font-weight: 900
  2428.                   - font-family: SF Display
  2429.                   - text-transform: capitalize
  2430.             state:
  2431.               - value: home
  2432.                 color: rgba(255,255,255,0.9)
  2433.                 entity_picture: /api/image/serve/36316d04d8443179c55b829589922249/512x512
  2434.               - value: not_home
  2435.                 color: rgba(65,65,63,0.8)
  2436.                 entity_picture: /api/image/serve/36316d04d8443179c55b829589922249/512x512
  2437.                 styles:
  2438.                   card:
  2439.                     - filter: opacity(50%)
  2440.                   icon:
  2441.                     - filter: grayscale(100%)
  2442.           - type: custom:button-card
  2443.             entity: person.mia_wolk
  2444.             aspect_ratio: 1
  2445.             color_type: card
  2446.             name: Mia
  2447.             triggers_update:
  2448.              - sensor.mia_last_changed
  2449.               - sensor.time
  2450.             variables:
  2451.               retain: sensor.mia_last_changed
  2452.             show_state: true
  2453.             custom_fields:
  2454.               circle: |
  2455.                [[[
  2456.                  if (entity) {
  2457.                     let time = c => {
  2458.                       let s = (c/1e3), m = (c/6e4), h = (c/36e5), d = (c/864e5);
  2459.                       return s < 60 ? parseInt(s) + 's' : m < 60 ? parseInt(m) + 'm' : h < 24 ? parseInt(h) + 'h' : parseInt(d) + 'd';
  2460.                     };
  2461.                     let last_changed = states[variables.retain] == null || states[variables.retain].state == 'unavailable'
  2462.                         ? time(Date.now() - Date.parse(states[entity.entity_id].last_changed))
  2463.                         : time(Date.now() - Date.parse(states[variables.retain].state)),
  2464.                       stroke = variables.state === 'home' ? 'rgba(255,0,0,1.0)' : 'none',
  2465.                       fill = variables.state === 'not_home' ? 'rgba(255,0,0,1.0)' : 'none';
  2466.                  const radius = 100;
  2467.                  const circumference = radius * 2 * Math.PI;
  2468.                  return `<svg viewBox="0 0 50 50"><style>circle { transform: rotate(-90deg); transform-origin: 50% 50%;stroke-dasharray: ${circumference};stroke-dashoffset: ${circumference - last_changed / 100 * circumference};}
  2469.                  tspan {font-size: 10px;}</style> <circle cx="25" cy="25" r="24.5" stroke="#b2b2b2" stroke-width="1.5" fill="#FFFFFF08" style="
  2470.                  transform: rotate(-90deg); transform-origin: 50% 50%;" />
  2471.                  <text x="50%" y="54%" fill="#8d8e90" font-size="11" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle">${last_changed}</text></svg>`; }
  2472.                 ]]]
  2473.             show_entity_picture: true
  2474.             styles:
  2475.               card:
  2476.                 - font-family: Sf Display
  2477.                 - border-radius: var(--custom-button-card-border-radius)
  2478.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  2479.                 - transition: none
  2480.                 - padding: 10%
  2481.               grid:
  2482.                 - grid-template-areas: '"i" "n" "s"'
  2483.                 - grid-template-columns: 1fr
  2484.                 - grid-template-rows: 1fr min-content min-content
  2485.               name:
  2486.                 - justify-self: start
  2487.                 - padding-left: 7px
  2488.                 - font-weight: bold
  2489.                 - font-family: SF Display
  2490.                 - font-size: 14px
  2491.               img_cell:
  2492.                 - justify-content: start
  2493.                 - padding-left: 5px
  2494.                 - padding-top: 10px
  2495.                 - align-items: start
  2496.                 - margin: none
  2497.               state:
  2498.                 - justify-self: start
  2499.                 - font-color: red
  2500.                 - padding-left: 7px
  2501.                 - padding-bottom: 10px
  2502.                 - text-transform: capitalize
  2503.                 - font-family: SF Display
  2504.                 - font-size: 11px
  2505.               icon:
  2506.                 - width: 40%
  2507.                 - clip-path: circle()
  2508.               custom_fields:
  2509.                 circle:
  2510.                   - align-self: start
  2511.                   - position: absolute
  2512.                   - left: 55%
  2513.                   - top: 10%
  2514.                   - width: 40%
  2515.                   - font-size: 18px
  2516.                   - font-weight: 900
  2517.                   - font-family: SF Display
  2518.                   - text-transform: capitalize
  2519.             state:
  2520.               - value: home
  2521.                 color: rgba(255,255,255,0.9)
  2522.                 entity_picture: /api/image/serve/8d30202bc3a6b04136ebb6702394f6c4/512x512
  2523.               - value: not_home
  2524.                 color: rgba(65,65,63,0.8)
  2525.                 entity_picture: /api/image/serve/8d30202bc3a6b04136ebb6702394f6c4/512x512
  2526.                 styles:
  2527.                   card:
  2528.                     - filter: opacity(50%)
  2529.                   icon:
  2530.                     - filter: grayscale(100%)
  2531.           - type: custom:button-card
  2532.             entity: person.tjark_wolk
  2533.             aspect_ratio: 1
  2534.             color_type: card
  2535.             name: Tjark
  2536.             triggers_update:
  2537.              - sensor.tjark_last_changed
  2538.               - sensor.time
  2539.             variables:
  2540.               retain: sensor.tjark_last_changed
  2541.             show_state: true
  2542.             custom_fields:
  2543.               circle: |
  2544.                [[[
  2545.                  if (entity) {
  2546.                     let time = c => {
  2547.                       let s = (c/1e3), m = (c/6e4), h = (c/36e5), d = (c/864e5);
  2548.                       return s < 60 ? parseInt(s) + 's' : m < 60 ? parseInt(m) + 'm' : h < 24 ? parseInt(h) + 'h' : parseInt(d) + 'd';
  2549.                     };
  2550.                     let last_changed = states[variables.retain] == null || states[variables.retain].state == 'unavailable'
  2551.                         ? time(Date.now() - Date.parse(states[entity.entity_id].last_changed))
  2552.                         : time(Date.now() - Date.parse(states[variables.retain].state)),
  2553.                       stroke = variables.state === 'home' ? 'rgba(255,0,0,1.0)' : 'none',
  2554.                       fill = variables.state === 'not_home' ? 'rgba(255,0,0,1.0)' : 'none';
  2555.                  const radius = 100;
  2556.                  const circumference = radius * 2 * Math.PI;
  2557.                  return `<svg viewBox="0 0 50 50"><style>circle { transform: rotate(-90deg); transform-origin: 50% 50%;stroke-dasharray: ${circumference};stroke-dashoffset: ${circumference - last_changed / 100 * circumference};}
  2558.                  tspan {font-size: 10px;}</style> <circle cx="25" cy="25" r="24.5" stroke="#b2b2b2" stroke-width="1.5" fill="#FFFFFF08" style="
  2559.                  transform: rotate(-90deg); transform-origin: 50% 50%;" />
  2560.                  <text x="50%" y="54%" fill="#8d8e90" font-size="11" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle">${last_changed}</text></svg>`; }
  2561.                 ]]]
  2562.             show_entity_picture: true
  2563.             styles:
  2564.               card:
  2565.                 - font-family: Sf Display
  2566.                 - border-radius: var(--custom-button-card-border-radius)
  2567.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  2568.                 - transition: none
  2569.                 - padding: 10%
  2570.               grid:
  2571.                 - grid-template-areas: '"i" "n" "s"'
  2572.                 - grid-template-columns: 1fr
  2573.                 - grid-template-rows: 1fr min-content min-content
  2574.               name:
  2575.                 - justify-self: start
  2576.                 - padding-left: 7px
  2577.                 - font-weight: bold
  2578.                 - font-family: SF Display
  2579.                 - font-size: 14px
  2580.               img_cell:
  2581.                 - justify-content: start
  2582.                 - padding-left: 5px
  2583.                 - padding-top: 10px
  2584.                 - align-items: start
  2585.                 - margin: none
  2586.               state:
  2587.                 - justify-self: start
  2588.                 - font-color: red
  2589.                 - padding-left: 7px
  2590.                 - padding-bottom: 10px
  2591.                 - text-transform: capitalize
  2592.                 - font-family: SF Display
  2593.                 - font-size: 11px
  2594.               icon:
  2595.                 - width: 40%
  2596.                 - clip-path: circle()
  2597.               custom_fields:
  2598.                 circle:
  2599.                   - align-self: start
  2600.                   - position: absolute
  2601.                   - left: 55%
  2602.                   - top: 10%
  2603.                   - width: 40%
  2604.                   - font-size: 18px
  2605.                   - font-weight: 900
  2606.                   - font-family: SF Display
  2607.                   - text-transform: capitalize
  2608.             state:
  2609.               - value: home
  2610.                 color: rgba(255,255,255,0.9)
  2611.                 entity_picture: /api/image/serve/a80d7fb8ba5a8dec229bdb3aae94f5fc/512x512
  2612.               - value: not_home
  2613.                 color: rgba(65,65,63,0.8)
  2614.                 entity_picture: /api/image/serve/a80d7fb8ba5a8dec229bdb3aae94f5fc/512x512
  2615.                 styles:
  2616.                   card:
  2617.                     - filter: opacity(50%)
  2618.                   icon:
  2619.                     - filter: grayscale(100%)
  2620.         title: Familie
  2621.         columns: 2
  2622.         view_layout:
  2623.           grid-area: familie
  2624.       - type: grid
  2625.         cards:
  2626.           - type: custom:button-card
  2627.             entity: climate.heizung_wohnzimmer
  2628.             aspect_ratio: 1
  2629.             tap_action:
  2630.               action: fire-dom-event
  2631.               browser_mod:
  2632.                 command: popup
  2633.                 title: Wohnzimmer
  2634.                 card:
  2635.                   type: vertical-stack
  2636.                   cards:
  2637.                     - type: thermostat
  2638.                       entity: climate.heizung_wohnzimmer
  2639.                     - type: entities
  2640.                       card_mod:
  2641.                         class: content
  2642.                       entities:
  2643.                         - entity: sensor.temperatur_wohnraum_2
  2644.                           name: Raumtemperatur
  2645.                         - entity: sensor.temperatur_wohnraum_3
  2646.                           name: Luftfeuchtigkeit
  2647.                     - type: custom:mini-graph-card
  2648.                       entities:
  2649.                         - entity: sensor.temperatur_wohnraum_2
  2650.                       line_width: 6
  2651.                       hour24: true
  2652.                       group: true
  2653.                       lign_icon: left
  2654.                       align_state: right
  2655.                       align_header: left
  2656.                       hours_to_show: 24
  2657.                       show:
  2658.                         fill: fade
  2659.                         icon: false
  2660.                         name: false
  2661.                         state: false
  2662.                         name_adaptive_color: false
  2663.                         labels: hover
  2664.                         legend: false
  2665.                   style: |
  2666.                    ha-card {
  2667.                       box-shadow: none;
  2668.                       background: transparent!important;
  2669.                      }
  2670.             name: Wohnzimmer
  2671.             color_type: card
  2672.             show_state: true
  2673.             custom_fields:
  2674.               Temperature: >
  2675.                [[[ {
  2676.  
  2677.                 const temp = Math.round(entity.attributes.temperature);
  2678.  
  2679.                 const radius = 20.5;
  2680.  
  2681.                 const circumference = radius * 2 * Math.PI;
  2682.  
  2683.                 return `<svg viewBox="0 0 50 50"><style>circle { transform:
  2684.                 rotate(-90deg); transform-origin: 50% 50%;stroke-dasharray:
  2685.                 ${circumference};stroke-dashoffset: ${circumference - temp / 100
  2686.                 * circumference};}
  2687.  
  2688.                 tspan {font-size: 10px;}</style> <circle cx="25" cy="25"
  2689.                 r="24.5" stroke="#b2b2b2" stroke-width="1.5" fill="#FFFFFF08"
  2690.                 style="
  2691.  
  2692.                 transform: rotate(-90deg); transform-origin: 50% 50%;" />
  2693.  
  2694.                 <text x="50%" y="54%" fill="#8d8e90" font-size="11"
  2695.                 text-anchor="middle" alignment-baseline="middle"
  2696.                 dominant-baseline="middle">${temp}°</text></svg>`; } ]]]
  2697.             show_entity_picture: true
  2698.             styles:
  2699.               card:
  2700.                 - font-family: Sf Display
  2701.                 - border-radius: var(--custom-button-card-border-radius)
  2702.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  2703.                 - transition: none
  2704.                 - padding: 10%
  2705.               grid:
  2706.                 - grid-template-areas: '"i" "n" "s"'
  2707.                 - grid-template-columns: 1fr
  2708.                 - grid-template-rows: 1fr min-content min-content
  2709.               name:
  2710.                 - justify-self: start
  2711.                 - padding-left: 7px
  2712.                 - font-weight: bold
  2713.                 - font-family: SF Display
  2714.                 - font-size: 14px
  2715.               img_cell:
  2716.                 - justify-content: start
  2717.                 - padding-left: 5px
  2718.                 - padding-top: 10px
  2719.                 - align-items: start
  2720.                 - margin: none
  2721.               state:
  2722.                 - justify-self: start
  2723.                 - font-color: red
  2724.                 - padding-left: 7px
  2725.                 - padding-bottom: 10px
  2726.                 - text-transform: capitalize
  2727.                 - font-family: SF Display
  2728.                 - font-size: 10px
  2729.               icon:
  2730.                 - width: 40%
  2731.               custom_fields:
  2732.                 Temperature:
  2733.                   - align-self: start
  2734.                   - position: absolute
  2735.                   - left: 55%
  2736.                   - top: 10%
  2737.                   - width: 40%
  2738.                   - font-size: 18px
  2739.                   - font-weight: 900
  2740.                   - font-family: SF Display
  2741.                   - text-transform: capitalize
  2742.             state:
  2743.               - value: heat
  2744.                 entity_picture: \local\img\icons8-heizkörper-48.png
  2745.                 color: rgba(255,255,255,0.9)
  2746.               - value: 'off'
  2747.                 entity_picture: \local\img\icons8-heizkörper-48.png
  2748.                 color: rgba(65,65,63,0.8)
  2749.                 styles:
  2750.                   card:
  2751.                     - filter: opacity(50%)
  2752.                   icon:
  2753.                     - filter: grayscale(100%)
  2754.           - type: custom:button-card
  2755.             entity: climate.heizung_esszimmer
  2756.             aspect_ratio: 1
  2757.             tap_action:
  2758.               action: fire-dom-event
  2759.               browser_mod:
  2760.                 command: popup
  2761.                 title: Esszimmer
  2762.                 style:
  2763.                   hui-vertical-stack-card:
  2764.                     $hui-entities-card$: |
  2765.                      #states {
  2766.                         padding-top: 0.5em;
  2767.                         padding-bottom: 1.2em;
  2768.                       }
  2769.                 card:
  2770.                   type: vertical-stack
  2771.                   cards:
  2772.                     - type: thermostat
  2773.                       entity: climate.heizung_esszimmer
  2774.                     - type: entities
  2775.                       card_mod:
  2776.                         class: content
  2777.                       entities:
  2778.                         - entity: sensor.temperatur_wohnraum_2
  2779.                           name: Raumtemperatur
  2780.                         - entity: sensor.temperatur_wohnraum_3
  2781.                           name: Luftfeuchtigkeit
  2782.                     - type: custom:mini-graph-card
  2783.                       entities:
  2784.                         - entity: sensor.temperatur_wohnraum_2
  2785.                       line_width: 6
  2786.                       hour24: true
  2787.                       group: true
  2788.                       lign_icon: left
  2789.                       align_state: right
  2790.                       align_header: left
  2791.                       hours_to_show: 24
  2792.                       show:
  2793.                         fill: fade
  2794.                         icon: false
  2795.                         name: false
  2796.                         state: false
  2797.                         name_adaptive_color: false
  2798.                         labels: hover
  2799.                         legend: false
  2800.                       tap_action:
  2801.                         action: none
  2802.                   style: |
  2803.                    ha-card {
  2804.                       box-shadow: none;
  2805.                       background: transparent!important;
  2806.                      }
  2807.             name: Esszimmer
  2808.             color_type: card
  2809.             show_state: true
  2810.             custom_fields:
  2811.               Temperature: >
  2812.                [[[ {
  2813.  
  2814.                 const temp = Math.round(entity.attributes.temperature);
  2815.  
  2816.                 const radius = 20.5;
  2817.  
  2818.                 const circumference = radius * 2 * Math.PI;
  2819.  
  2820.                 return `<svg viewBox="0 0 50 50"><style>circle { transform:
  2821.                 rotate(-90deg); transform-origin: 50% 50%;stroke-dasharray:
  2822.                 ${circumference};stroke-dashoffset: ${circumference - temp / 100
  2823.                 * circumference};}
  2824.  
  2825.                 tspan {font-size: 10px;}</style> <circle cx="25" cy="25"
  2826.                 r="24.5" stroke="#b2b2b2" stroke-width="1.5" fill="#FFFFFF08"
  2827.                 style="
  2828.  
  2829.                 transform: rotate(-90deg); transform-origin: 50% 50%;" />
  2830.  
  2831.                 <text x="50%" y="54%" fill="#8d8e90" font-size="11"
  2832.                 text-anchor="middle" alignment-baseline="middle"
  2833.                 dominant-baseline="middle">${temp}°</text></svg>`; } ]]]
  2834.             show_entity_picture: true
  2835.             styles:
  2836.               card:
  2837.                 - font-family: Sf Display
  2838.                 - border-radius: var(--custom-button-card-border-radius)
  2839.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  2840.                 - transition: none
  2841.                 - padding: 10%
  2842.               grid:
  2843.                 - grid-template-areas: '"i" "n" "s"'
  2844.                 - grid-template-columns: 1fr
  2845.                 - grid-template-rows: 1fr min-content min-content
  2846.               name:
  2847.                 - justify-self: start
  2848.                 - padding-left: 7px
  2849.                 - font-weight: bold
  2850.                 - font-family: SF Display
  2851.                 - font-size: 14px
  2852.               img_cell:
  2853.                 - justify-content: start
  2854.                 - padding-left: 5px
  2855.                 - padding-top: 10px
  2856.                 - align-items: start
  2857.                 - margin: none
  2858.               state:
  2859.                 - justify-self: start
  2860.                 - font-color: red
  2861.                 - padding-left: 7px
  2862.                 - padding-bottom: 10px
  2863.                 - text-transform: capitalize
  2864.                 - font-family: SF Display
  2865.                 - font-size: 10px
  2866.               icon:
  2867.                 - width: 40%
  2868.               custom_fields:
  2869.                 Temperature:
  2870.                   - align-self: start
  2871.                   - position: absolute
  2872.                   - left: 55%
  2873.                   - top: 10%
  2874.                   - width: 40%
  2875.                   - font-size: 18px
  2876.                   - font-weight: 900
  2877.                   - font-family: SF Display
  2878.                   - text-transform: capitalize
  2879.             state:
  2880.               - value: heat
  2881.                 entity_picture: \local\img\icons8-heizkörper-48.png
  2882.                 color: rgba(255,255,255,0.9)
  2883.               - value: 'off'
  2884.                 entity_picture: \local\img\icons8-heizkörper-48.png
  2885.                 color: rgba(65,65,63,0.8)
  2886.                 styles:
  2887.                   card:
  2888.                     - filter: opacity(50%)
  2889.                   icon:
  2890.                     - filter: grayscale(100%)
  2891.           - type: custom:button-card
  2892.             entity: climate.heizung_gastebad
  2893.             aspect_ratio: 1
  2894.             tap_action:
  2895.               action: fire-dom-event
  2896.               browser_mod:
  2897.                 command: popup
  2898.                 title: Esszimmer
  2899.                 card:
  2900.                   type: vertical-stack
  2901.                   cards:
  2902.                     - type: thermostat
  2903.                       entity: climate.heizung_gastebad
  2904.                     - type: entities
  2905.                       card_mod:
  2906.                         class: content
  2907.                       entities:
  2908.                         - entity: sensor.temperature_7
  2909.                           name: Raumtemperatur
  2910.                         - entity: sensor.humidity_8
  2911.                           name: Luftfeuchtigkeit
  2912.                     - type: custom:mini-graph-card
  2913.                       entities:
  2914.                         - entity: sensor.temperatur_wohnraum_2
  2915.                       line_width: 6
  2916.                       hour24: true
  2917.                       group: true
  2918.                       lign_icon: left
  2919.                       align_state: right
  2920.                       align_header: left
  2921.                       hours_to_show: 24
  2922.                       show:
  2923.                         fill: fade
  2924.                         icon: false
  2925.                         name: false
  2926.                         state: false
  2927.                         name_adaptive_color: false
  2928.                         labels: hover
  2929.                         legend: false
  2930.                   style: |
  2931.                    ha-card {
  2932.                       box-shadow: none;
  2933.                       background: transparent;
  2934.                       font-size: 10px!important;
  2935.                       font-color: rgba(255,0,0,0.8)!important;
  2936.                     }
  2937.             name: Gästebad
  2938.             color_type: card
  2939.             show_state: true
  2940.             custom_fields:
  2941.               Temperature: >
  2942.                [[[ {
  2943.  
  2944.                 const temp = Math.round(entity.attributes.temperature);
  2945.  
  2946.                 const radius = 20.5;
  2947.  
  2948.                 const circumference = radius * 2 * Math.PI;
  2949.  
  2950.                 return `<svg viewBox="0 0 50 50"><style>circle { transform:
  2951.                 rotate(-90deg); transform-origin: 50% 50%;stroke-dasharray:
  2952.                 ${circumference};stroke-dashoffset: ${circumference - temp / 100
  2953.                 * circumference};}
  2954.  
  2955.                 tspan {font-size: 10px;}</style> <circle cx="25" cy="25"
  2956.                 r="24.5" stroke="#b2b2b2" stroke-width="1.5" fill="#FFFFFF08"
  2957.                 style="
  2958.  
  2959.                 transform: rotate(-90deg); transform-origin: 50% 50%;" />
  2960.  
  2961.                 <text x="50%" y="54%" fill="#8d8e90" font-size="11"
  2962.                 text-anchor="middle" alignment-baseline="middle"
  2963.                 dominant-baseline="middle">${temp}°</text></svg>`; } ]]]
  2964.             show_entity_picture: true
  2965.             styles:
  2966.               card:
  2967.                 - font-family: Sf Display
  2968.                 - border-radius: var(--custom-button-card-border-radius)
  2969.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  2970.                 - transition: none
  2971.                 - padding: 10%
  2972.               grid:
  2973.                 - grid-template-areas: '"i" "n" "s"'
  2974.                 - grid-template-columns: 1fr
  2975.                 - grid-template-rows: 1fr min-content min-content
  2976.               name:
  2977.                 - justify-self: start
  2978.                 - padding-left: 7px
  2979.                 - font-weight: bold
  2980.                 - font-family: SF Display
  2981.                 - font-size: 14px
  2982.               img_cell:
  2983.                 - justify-content: start
  2984.                 - padding-left: 5px
  2985.                 - padding-top: 10px
  2986.                 - align-items: start
  2987.                 - margin: none
  2988.               state:
  2989.                 - justify-self: start
  2990.                 - font-color: red
  2991.                 - padding-left: 7px
  2992.                 - padding-bottom: 10px
  2993.                 - text-transform: capitalize
  2994.                 - font-family: SF Display
  2995.                 - font-size: 10px
  2996.               icon:
  2997.                 - width: 40%
  2998.               custom_fields:
  2999.                 Temperature:
  3000.                   - align-self: start
  3001.                   - position: absolute
  3002.                   - left: 55%
  3003.                   - top: 10%
  3004.                   - width: 40%
  3005.                   - font-size: 18px
  3006.                   - font-weight: 900
  3007.                   - font-family: SF Display
  3008.                   - text-transform: capitalize
  3009.             state:
  3010.               - value: heat
  3011.                 entity_picture: \local\img\icons8-heizkörper-48.png
  3012.                 color: rgba(255,255,255,0.9)
  3013.               - value: 'off'
  3014.                 entity_picture: \local\img\icons8-heizkörper-48.png
  3015.                 color: rgba(65,65,63,0.8)
  3016.                 styles:
  3017.                   card:
  3018.                     - filter: opacity(50%)
  3019.                   icon:
  3020.                     - filter: grayscale(100%)
  3021.         title: Heizung
  3022.         columns: 2
  3023.         view_layout:
  3024.           grid-area: heizung
  3025.  
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!