sarah/config/lovelace/popup_cards.yaml

general_popup_style: &popup_style
  '--ha-card-border-radius': 0 0 0.8em 0.8em
  border-radius: 0.8em
  opacity: 0.95
  margin-bottom: 200px

broader_popup_style: &broad_popup_style
  width: 40%
  min-width: 500px

binary_sensor.motion_1_ias_zone:
  title: Kitchen motion
  style:
    <<: *popup_style
    <<: *broad_popup_style
  card:
    type: vertical-stack
    cards:
      - type: glance
        entities:
          - entity: binary_sensor.motion_1_ias_zone
          - entity: sensor.motion_1_illuminance
          - entity: binary_sensor.motion_1_occupancy
          - entity: sensor.motion_1_power
      - type: "custom:mini-graph-card"
        animate: true
        points_per_hour: 1
        hours_to_show: 48
        show:
          graph: bar
          average: true
          extrema: true
        entities:
          - entity: sensor.motion_1_illuminance

binary_sensor.motion_2_ias_zone:
  title: Hallway motion
  style:
    <<: *popup_style
    <<: *broad_popup_style
  card:
    type: vertical-stack
    cards:
      - type: glance
        entities:
          - entity: binary_sensor.motion_2_ias_zone
          - entity: sensor.motion_2_illuminance
          - entity: binary_sensor.motion_2_occupancy
          - entity: sensor.motion_2_power

      - type: "custom:mini-graph-card"
        animate: true
        points_per_hour: 1
        hours_to_show: 48
        show:
          graph: bar
          average: true
          extrema: true
        entities:
          - entity: sensor.motion_2_illuminance


switch.camera:
  title: Security camera
  style: *popup_style
  card:
    type: vertical-stack
    cards:
      - type: picture-entity
        aspect_ratio: 50%
        entity: camera.amcrest_camera
        show_name: true
        show_state: true

      - type: entities
        title: Camera Controls
        show_header_toggle: false
        entities:
          - switch.camera
          - binary_sensor.amcrest_camera_online
          - binary_sensor.amcrest_camera_motion_detected


media_player.kitchen:
  title: Kitchen Sonos
  style: *popup_style
  card:
    type: custom:decluttering-card
    template: sonos_media_player
    variables:
      - player: media_player.kitchen

media_player.bathroom:
  title: Bathroom Sonos
  style: *popup_style
  card:
    type: custom:decluttering-card
    template: sonos_media_player
    variables:
      - player: media_player.bathroom

media_player.master_bedroom:
  title: Master bedroom Sonos
  style: *popup_style
  card:
    type: custom:decluttering-card
    template: sonos_media_player
    variables:
      - player: media_player.master_bedroom

media_player.nvidia_shield:
  title: TV
  style: *popup_style
  card:
    type: vertical-stack
    cards:
      - type: custom:decluttering-card
        template: sonos_media_player
        variables:
          - player: media_player.living_room

      - type: "custom:mini-media-player"
        entity: media_player.living_room_tv

      - type: "custom:mini-media-player"
        entity: media_player.nvidia_shield

light.living_room_main_lights:
  title: Living room lights
  style: *popup_style
  card:
    type: custom:mod-card
    card:
      type: custom:light-popup-card
      entity: light.living_room_main_lights
      fullscreen: false
      actionsInARow: 2
      actions:
        - service: light.toggle
          service_data:
            entity_id: light.living_room_main_lights
          color: "#ffffcc"
          name: Toggle

sensor.bedroom_weather_temperature:
  title: Bedroom climate
  style:
    <<: *popup_style
    <<: *broad_popup_style
  card:
    type: vertical-stack
    cards:
      - type: "custom:mini-graph-card"
        animate: true
        line_width: 3
        points_per_hour: 1
        show:
          average: true
          extrema: true
        entities:
          - entity: sensor.bedroom_weather_temperature
            name: Temperature

      - type: horizontal-stack
        cards:
          - type: "custom:mini-graph-card"
            name: Humidity
            font_size: 75
            icon: "mdi:water"
            line_color: green
            line_width: 8
            entities:
              - sensor.bedroom_weather_humidity

          - type: "custom:mini-graph-card"
            name: Pressure
            entities:
              - sensor.bedroom_weather_pressure
            font_size: 75
            line_color: var(--accent-color)
            line_width: 8

          - type: "custom:mini-graph-card"
            name: Air Quality
            font_size: 75
            icon: "mdi:weather-windy"
            line_color: "#e74c3c"
            line_width: 8
            entities:
              - sensor.purifier_air_quality

fan.philips_airpurifier:
  title: Bedroom air
  style: *popup_style
  card:
    type: vertical-stack
    cards:
      - type: entities
        show_header_toggle: false
        entities:
          - entity: fan.philips_airpurifier
            name: Purifier Working
          - type: custom:fold-entity-row
            head:
              type: custom:dummy-entity-row
              entity: sensor.purifier_air_quality
              name: Sensors
              icon: mdi:air-purifier
            open: true
            entities:
              - sensor.purifier_air_quality
              - sensor.purifier_allergens
              - sensor.purifier_temperature
              - sensor.purifier_humidity
              - sensor.purifier_water_level
          - type: custom:fold-entity-row
            head:
              type: custom:dummy-entity-row
              entity: sensor.purifier_speed
              name: Mode
            entities:
              - sensor.purifier_speed
              - sensor.purifier_mode
              - sensor.purifier_brightness
              - sensor.purifier_target_humidity
          - type: custom:fold-entity-row
            head:
              type: custom:dummy-entity-row
              entity: sensor.purifier_pre_filter
              name: Filters
            entities:
              - sensor.purifier_pre_filter
              - sensor.purifier_hepa_filter
              - sensor.purifier_carbon_filter
              - sensor.purifier_wick_filter

sensor.synology_dsm_type_volume_1:
  title: Platinum
  style:
    <<: *popup_style
    height: 80%
    margin-bottom: 0;
  card:
    type: entities
    style: |
      #states > div:last-child {
        margin: 0 -16px -16px -16px;
      }
    entities:
      - type: custom:dummy-entity-row
        entity: sensor.synology_dsm_cpu_load_total
        name: Open admin UI
        icon: mdi:firefox
        tap_action:
          action: url
          url_path: http://platinum.lan:5000
      - type: custom:fold-entity-row
        head:
          type: custom:decluttering-card
          template: percentage_card
          variables:
            - name: CPU
            - entity: sensor.synology_dsm_cpu_load_total
            - icon: mdi:chip
            - orange: 40
            - red: 60
        entities:
          - entity: sensor.synology_dsm_cpu_load_system
            name: CPU load (System)
          - entity: sensor.synology_dsm_cpu_load_user
            name: CPU load (User)
          - entity: sensor.synology_dsm_cpu_load_other
            name: CPU load (Other)
          - entity: sensor.synology_dsm_cpu_load_1_min
            name: CPU load (1 min)
          - entity: sensor.synology_dsm_cpu_load_5_min
            name: CPU load (5 min)
          - entity: sensor.synology_dsm_cpu_load_15_min
            name: CPU load (15 min)

      - type: custom:fold-entity-row
        head:
          type: custom:decluttering-card
          template: percentage_card
          variables:
            - name: Memory
            - entity: sensor.synology_dsm_memory_usage_real
            - icon: mdi:memory
            - orange: 70
            - red: 85
        entities:
          - entity: sensor.synology_dsm_memory_cached
            name: Memory cached
          - entity: sensor.synology_dsm_memory_size
            name: Memory size
          - entity: sensor.synology_dsm_memory_available_real
            name: Memory available (Real)
          - entity: sensor.synology_dsm_memory_total_real
            name: Memory total (Real)
          - entity: sensor.synology_dsm_memory_available_swap
            name: Memory available (Swap)
          - entity: sensor.synology_dsm_memory_total_swap
            name: Memory total (Swap)

      - type: custom:fold-entity-row
        head:
          type: custom:decluttering-card
          template: percentage_card
          variables:
            - name: Volume 1
            - entity: sensor.synology_dsm_volume_used_volume_1
            - icon: mdi:harddisk
            - orange: 85
            - red: 90
        entities:
          - entity: sensor.synology_dsm_average_disk_temp_volume_1
            name: Average temperature
          - entity: sensor.synology_dsm_maximum_disk_temp_volume_1
            name: Maximum temperature
          - entity: sensor.synology_dsm_used_space_volume_1
            name: Used space
          - entity: sensor.synology_dsm_total_size_volume_1
            name: Total size

      - type: custom:fold-entity-row
        head:
          type: custom:decluttering-card
          template: percentage_card
          variables:
            - name: Volume 2
            - entity: sensor.synology_dsm_volume_used_volume_2
            - icon: mdi:harddisk
            - orange: 85
            - red: 90
        entities:
          - entity: sensor.synology_dsm_average_disk_temp_volume_2
            name: Average temperature
          - entity: sensor.synology_dsm_maximum_disk_temp_volume_2
            name: Maximum temperature
          - entity: sensor.synology_dsm_used_space_volume_2
            name: Used space
          - entity: sensor.synology_dsm_total_size_volume_2
            name: Total size

      - type: custom:fold-entity-row
        head:
          entity: sensor.synology_dsm_status_sda
          name: /sda
        entities:
          - entity: sensor.synology_dsm_temperature_sda
            name: Temperature
          - entity: sensor.synology_dsm_below_min_remaining_life_sda
            name: Below minimum remaining life
          - entity: sensor.synology_dsm_exceeded_max_bad_sectors_sda
            name: Exceeded max bad sectors
      - type: custom:fold-entity-row
        head:
          entity: sensor.synology_dsm_status_sdb
          name: /sdb
        entities:
          - entity: sensor.synology_dsm_temperature_sdb
            name: Temperature
          - entity: sensor.synology_dsm_below_min_remaining_life_sdb
            name: Below minimum remaining life
          - entity: sensor.synology_dsm_exceeded_max_bad_sectors_sdb
            name: Exceeded max bad sectors
      - type: custom:fold-entity-row
        head:
          entity: sensor.synology_dsm_status_sdc
          name: /sdc
        entities:
          - entity: sensor.synology_dsm_temperature_sdc
            name: Temperature
          - entity: sensor.synology_dsm_below_min_remaining_life_sdc
            name: Below minimum remaining life
          - entity: sensor.synology_dsm_exceeded_max_bad_sectors_sdc
            name: Exceeded max bad sectors
      - type: custom:fold-entity-row
        head:
          entity: sensor.synology_dsm_status_sdd
          name: /sdd
        entities:
          - entity: sensor.synology_dsm_temperature_sdd
            name: Temperature
          - entity: sensor.synology_dsm_below_min_remaining_life_sdd
            name: Below minimum remaining life
          - entity: sensor.synology_dsm_exceeded_max_bad_sectors_sdd
            name: Exceeded max bad sectors

      - type: custom:hui-horizontal-stack-card
        cards:
          - type: entities
            entities:
              - entity: sensor.synology_dsm_network_down
                name: Down
                style: |
                  :host {
                    --paper-item-icon-color: green;
                  }
            style: &network-indicator-style
              .: |
                ha-card {
                  box-shadow: none;
                  background: none;
                  margin-top: -1.4em;
                  max-height: 1px;
                  z-index: 2;
                }

              "#states div":
                hui-sensor-entity-row:
                  $:
                    hui-generic-entity-row:
                      $: |
                        .info {
                          margin-left: 0 !important;
                          flex-grow: 0 !important;
                          text-overflow: unset !important;
                          white-space: unset !important;
                        }
          - type: entities
            entities:
              - entity: sensor.synology_dsm_network_up
                name: Up
                style: |
                  :host {
                    --paper-item-icon-color: var(--accent-color);
                  }
            style: *network-indicator-style

      - type: custom:mini-graph-card
        align_state: left
        entities:
          - color: var(--accent-color)
            entity: sensor.synology_dsm_network_up
          - color: green
            entity: sensor.synology_dsm_network_down
        group: false
        points_per_hour: 1
        line_width: 3
        hour24: true
        hours_to_show: 24
        show:
          fill: fade
          icon: false
          name: false
          state: false
          name_adaptive_color: true
          labels: hover
          legend: false
        tap_action:
          action: none