DinoTech's Tablet Designs[video-UPDATE-04.27.2020!]

Dino-Tech · December 20, 2018, 5:39am

Designed to use with multiple backgrounds, plenty left to do, but a good base…

    title: new_security_view
    theme: Clear-Nightz
    background: center / cover no-repeat url("/local/backgroundz/tooobig.png") fixed
    icon: mdi:security-home
    cards:
      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:card-modder
                report_size: 4
                style:
                  background-color: rgba(0,0,0,0.3)
                  background-size: 100% 100%
                  border-radius: 10px
                  border: solid 1.5px rgba(0,153,255,1.3)  # (0,153,255,1.1) purple border
                  box-shadow: 3px 3px rgba(128, 128, 128,0.2)
                  color: rgba(255,255,255,5.9)
                card:
                  type: "custom:mini-graph-card"
                  entity: sensor.dark_sky_temperature
                  name: Outside Temperature
                  height: 100
                  hide_icon: true
                  line_color: '#ffffff'
                  line_width: 8
                  font_size: 64
              - type: custom:card-modder
                report_size: 4
                style:
                  background-color: rgba(0,0,0,0.3)
                  background-size: 100% 100%
                  border-radius: 10px
                  border: solid 1.5px rgba(0,153,255,1.3)
                  box-shadow: 3px 3px rgba(128, 128, 128,0.2)
                  color: rgba(255,255,255,5.9)
                card:
                  type: "custom:mini-graph-card"
                  entity: sensor.office_smoke_temp
                  name: Office Temperature
                  height: 100
                  hide_icon: true
                  line_color: '#ffffff'
                  line_width: 8
                  font_size: 64
          - type: custom:card-modder
            report_size: 1
            style:
              background-color: rgba(0,0,0,0.35)
              background-size: 100% 100%
              border-radius: 15px
              border: solid 1.5px rgba(0,0,0,0.4)
              box-shadow: 3px 3px rgba(128, 128, 128,0.2)
            card:
              type: entities
              entities:
                - type: custom:mini-media-player
                  entity: media_player.office_google
                  name: Office Google Home
                  artwork: full-cover-fit
                  hide_icon: true
                  power_color: true
                  hide_volume: true
                  show_progress: true
          - type: markdown
            content: >
              ##
              *Motion Sensors*
          - type: horizontal-stack
            cards:
              - type: entity-button
                entity: binary_sensor.front_motion
                name: Porch
              - type: entity-button
                entity: binary_sensor.back_motion
                name: Patio
              - type: entity-button
                entity: binary_sensor.bathroom_motion
                name: Bath
              - type: entity-button
                entity: binary_sensor.office_motion
                name: Office
          - type: horizontal-stack
            cards:
              - type: entity-button
                entity: binary_sensor.old_office_motion
                name: Office
              - type: entity-button
                entity: binary_sensor.entry_hall_motion
                name: Entry
              - type: entity-button
                entity: binary_sensor.hallway_motion
                name: Hallway
              - type: entity-button
                entity: binary_sensor.bedroom_motion
                name: Master
          - type: horizontal-stack
            cards:
              - type: entity-button
                entity: binary_sensor.living_room_motion
                name: Family
              - type: entity-button
                entity: binary_sensor.movement
                name: Kiosk
              - type: entity-button
                entity: binary_sensor.face_detected
                name: Face
              - type: entity-button
                entity: binary_sensor.mbath_glass_break
                name: Glass
          - type: horizontal-stack
            cards:
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.3)
                  background-size: 100% 100%
                  border-radius: 15px
                  border: solid 1.5px rgba(0,153,255,1.3)
                  box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.3)
                card:
                  type: picture-entity
                  entity: camera.garage_cam
                  name: "Garage"
                  show_state: false
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.3)
                  background-size: 100% 100%
                  border-radius: 15px
                  border: solid 1.5px rgba(0,153,255,1.3)
                  box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.3)
                card:
                  type: picture-entity
                  entity: camera.kitchen_cam
                  name: "Kitchen"
                  show_state: false
## column 2
      - type: vertical-stack
        cards:
          - type: custom:card-modder
            style:
              background-color: rgba(0,0,0,0.35)
              background-size: 100% 100%
              border-radius: 15px
              border: solid 1.5px rgba(0,0,0,0.4)
              box-shadow: 3px 3px 3px 3px rgba(128, 128, 128,0.2)
              color: rgb(0,153,255)
            card:
              type: custom:bignumber-card
              entity: sensor.time
              scale: 16px
          - type: custom:alarm_control_panel-card
            entity: alarm_control_panel.ha_alarm
            show_keypad: true
            display_letters: true
            scale: 13px
            title: New Life Security
            style: '--alarm-color-disarmed: var(--label-badge-blue);' #rgb(153, 0, 255) purple
            states:
              - arm_home
              - arm_away
            labels:
              ui.card.alarm_control_panel.code: ~   Access Code Required  ~
              state.alarm_control_panel.arm_away: Away!!
          - type: custom:card-modder
            report_size: 1
            style:
              background-color: rgba(0,0,0,0.3)
              background-size: 100% 100%
              border-radius: 15px
              border: solid 1.5px rgba(0,0,0,0.4)
              box-shadow: 3px 3px 3px 3px rgba(128, 128, 128,0.2)
            card:
              type: glance
#              title: Smoke Detectors
#              show_state: false
              entities:
                - entity: sensor.hallway_nest_protect_smoke_status
                  name: Hallway
                - entity: sensor.kitchen_nest_protect_smoke_status
                  name: Kitchen
                - entity: binary_sensor.laundry_smoke_detected
                  name: Laundry
                - entity: binary_sensor.office_smoke_detected
                  name: Office
                - entity: binary_sensor.garage_smoke_detected
                  name: Garage
          - type: horizontal-stack
            cards:
              - type: custom:card-modder
                report_size: 4
                style:
                  border-radius: 45px
                  border: solid 7.5px rgba(10,10,10,1.3)
                  box-shadow: 3px 3px 3px 3px rgba(0,0,0,2.3)
                card:
                  type: picture-entity
                  entity: switch.office_desk_lamp
#                  name: " "
                  tap_action:
                    action: toggle
                  show_state: false
                  show_name: false
                  state_image:
                    "on": /local/card_backz/power_on.jpg
                    "off": /local/card_backz/power_off.jpg
              - type: custom:card-modder
                report_size: 4
                style:
                  border-radius: 45px
                  border: solid 7.5px rgba(10,10,10,1.3)
                  box-shadow: 3px 3px 3px 3px rgba(0,0,0,2.3)
                card:
                  type: picture-entity
                  entity: switch.desk_back_light
#                  name: " "
                  tap_action:
                    action: toggle
                  show_state: false
                  show_name: false
                  state_image:
                    "on": /local/card_backz/power_on.jpg
                    "off": /local/card_backz/power_off.jpg
              - type: custom:card-modder
                report_size: 4
                style:
                  border-radius: 45px
                  border: solid 7.5px rgba(10,10,10,1.3)
                  box-shadow: 3px 3px 3px 3px rgba(0,0,0,2.3)
                card:
                  type: picture-entity
                  entity: light.corner_light
#                  name: " "
                  tap_action:
                    action: toggle
                  show_state: false
                  show_name: false
                  state_image:
                    "on": /local/card_backz/power_on.jpg
                    "off": /local/card_backz/power_off.jpg
              - type: custom:card-modder
                report_size: 4
                style:
                  border-radius: 45px
                  border: solid 7.5px rgba(10,10,10,1.3)
                  box-shadow: 3px 3px 3px 3px rgba(0,0,0,2.3)
                card:
                  type: picture-entity
                  entity: light.bed_light
#                  name: " "
                  tap_action:
                    action: toggle
                  show_state: false
                  show_name: false
                  state_image:
                    "on": /local/card_backz/power_on.jpg
                    "off": /local/card_backz/power_off.jpg
## column 3
      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:card-modder
                report_size: 4
                style:
                  background-color: rgba(0,0,0,0.3)
                  background-size: 100% 100%
                  border-radius: 12px
                  border: solid 1.5px rgba(0,153,255,1.3)
                  box-shadow: 3px 3px rgba(128, 128, 128,0.2)
                  color: rgba(255,255,255,5.9)
                card:
                  type: "custom:mini-graph-card"
                  entity: sensor.realistic_humidity
                  name: Office Humidity
                  height: 100
                  hide_icon: true
                  line_color: '#ffffff'
                  line_width: 8
                  font_size: 65
              - type: custom:card-modder
                report_size: 4
                style:
                  background-color: rgba(0,0,0,0.3)
                  background-size: 100% 100%
                  border-radius: 12px
                  border: solid 1.5px rgba(0,153,255,1.3)
                  box-shadow: 3px 3px rgba(128, 128, 128,0.2)
                  color: rgba(255,255,255,5.9)
                card:
                  type: "custom:mini-graph-card"
                  entity: sensor.dark_sky_humidity
                  name: Outside Humidity
                  height: 100
                  hide_icon: true
                  line_color: '#ffffff'
                  line_width: 8
                  font_size: 65
          - type: custom:card-modder
            report_size: 1
            style:
              background-color: rgba(0,0,0,0.35)
              background-size: 100% 100%
              border-radius: 15px
              border: solid 1.5px rgba(0,0,0,0.4)
              box-shadow: 3px 3px rgba(128, 128, 128,0.2)
            card:
              type: entities
              entities:
                - type: custom:mini-media-player
                  entity: media_player.spotify
                  name: Spotify Player
                  artwork: full-cover-fit
                  power_color: true
                  idle_view: true
                  show_progress: true
                  volume_stateless: true
          - type: markdown
            content: >
              ##
              _Door and Window Sensors_
          - type: horizontal-stack
            cards:
              - type: entity-button
                entity: binary_sensor.front_door
                name: Front
              - type: entity-button
                entity: binary_sensor.side_door_k
                name: Side
              - type: entity-button
                entity: binary_sensor.back_door_k
                name: Back
              - type: entity-button
                entity: binary_sensor.garage_entry_door_k
                name: Garage
          - type: horizontal-stack
            cards:
              - type: entity-button
                entity: binary_sensor.den_windows
                name: Family
              - type: entity-button
                entity: binary_sensor.garage_windows
                name: Garage
              - type: entity-button
                entity: binary_sensor.office_windows
                name: Office
              - type: entity-button
                entity: binary_sensor.mbdrm_windows
                name: Master
          - type: horizontal-stack
            cards:
              - type: entity-button
                entity: binary_sensor.mbdrm_windows
                name: Master
              - type: entity-button
                entity: binary_sensor.tristans_window
                name: Bed
              - type: entity-button
                entity: binary_sensor.kitchen_bay_windows
                name: Bay
              - type: entity-button
                entity: binary_sensor.kitchen_sink_windows
                name: Sink
          - type: horizontal-stack
            cards:
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.3)
                  background-size: 100% 100%
                  border-radius: 15px
                  border: solid 1.5px rgba(0,153,255,1.3)
                  box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.3)
                card:
                  type: picture-entity
                  entity: camera.front_door
                  name: "Front Door"
                  show_state: false
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.3)
                  background-size: 100% 100%
                  border-radius: 15px
                  border: solid 1.5px rgba(0,153,255,1.3)
                  box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.3)
                card:
                  type: picture-entity
                  entity: camera.entry_hall
                  name: "Enrty Hall"
                  show_state: false

Dino-Tech · December 20, 2018, 5:43am

Restyled view slightly and updated code…

maurizio53 · December 26, 2018, 1:45pm

Will you share the images you are using as background?
Thanks…

Dino-Tech · December 27, 2018, 6:18pm

there are many weather backgrounds that are available in Google search. I just look for the darker images so the text shows up better. Thanks!

Dino-Tech · December 27, 2018, 7:21pm

Will have code posted shortly. Thanks!

not perfect, but the top left and right icons are device trackers and middle is garage door, but could be used for whatever you need. Just added colors to show states

    title: home_mobile_view
#    theme: Dark-Nightz
#    background: center / cover no-repeat url("/local/backgroundz/rainy-day.jpg") fixed
    icon: mdi:cellphone-android
    cards:
      - id: d2ea36757487473184313782aac6fa3d  # Automatically created id
        type: custom:vertical-stack-in-card
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.5)
                  border-radius: 90px
                card:
                  type: picture-entity
                  entity: input_boolean.darren_home
                  show_state: false
                  show_name: false
                  tap_action:
                    action: toggle
                  state_image:
                    "on": /local/icons/round/darren_home.png
                    "off": /local/icons/round/darren_away.png
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.5)
                  border-radius: 90px
                card:
                  type: picture-entity
                  entity: switch.garage_door
                  show_state: false
                  show_name: false
                  tap_action:
                    action: toggle
                  state_image:
                    "on": /local/icons/round/garage_open.png
                    "off": /local/icons/round/garage_closed.png
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.5)
                  border-radius: 90px
                card:
                  type: picture-entity
                  entity: input_boolean.donna_home
                  show_state: false
                  show_name: false
                  tap_action:
                    action: toggle
                  state_image:
                    "on": /local/icons/round/donna_home.png
                    "off": /local/icons/round/donna_away.png
          - type: horizontal-stack
            cards:
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.5)
                  border-radius: 90px
                card:
                  type: picture
                  image: /local/icons/round/round_listen.png
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/13?kiosk
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.8)
                  background-image: url("/local/icons/thermo.png")
                  background-repeat: no-repeat
                  background-position: center
                  background-size: 100% 100%
                  border: solid 1.5px rgba(0,0,0,1.3)
                  border-radius: 90px
                card:
                  type: picture-entity
                  entity: climate.living_room
                  tap_action: more_info
                  show_state: false
                  show_name: false
                  image: /local/icons/clear.bubble.png
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.5)
                  border-radius: 90px
                card:
                  type: picture
                  image: /local/icons/round/round_tv.png
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/13?kiosk
          - type: horizontal-stack
            cards:
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.5)
                  border-radius: 90px
                card:
                  type: picture-entity
                  entity: input_boolean.disable_notifications
                  tap_action: 
                    action: toggle
                  show_state: false
                  show_name: false
                  image: /local/icons/round/round_notify.png
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.5)
                  border-radius: 90px
                card:
                  type: picture
                  image: /local/icons/round/round_sun.png
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/20?kiosk
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.5)
                  border-radius: 90px
                card:
                  type: picture
                  image: /local/icons/round/round_camera.png
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/1?kiosk
          - type: horizontal-stack
            cards:
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.5)
                  border-radius: 90px
                card:
                  type: picture
                  image: /local/icons/round/round_config.png
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/11?kiosk
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.5)
                  border-radius: 90px
                card:
                  type: picture
                  image: /local/icons/round/round_shield.png
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/19?kiosk
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.5)
                  border-radius: 90px
                card:
                  type: picture
                  image: /local/icons/round/round_users.png
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/21?kiosk
          - type: horizontal-stack
            cards:
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.5)
                  border-radius: 90px
                card:
                  type: picture
                  image: /local/icons/round/round_option.png
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/10?kiosk
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.5)
                  border-radius: 90px
                card:
                  type: picture
                  image: /local/icons/round/round_close.png
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/0?kiosk
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.5)
                  border-radius: 90px
                card:
                  type: picture
                  image: /local/icons/round/round_redo.png
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/18?kiosk
          - type: custom:compact-custom-header
            notification: true
            menu: true
            options: false
            voice: false
            clock: notification
            clock_format: 12
            clock_am_pm: true
            header: false
            background_image: true
            tabs: false

Custom cards:

# custom cards used
resources:
  - url: /local/custom-lovelace/thermostat-card.js?v=0.1.1
    type: module
  - url: /local/custom-lovelace/vertical-stack-in-card.js?v=0.0.9
    type: js
  - url: /local/custom-lovelace/alarm_control_panel-card.js?v=0.4.0
    type: js
  - url: /local/custom-lovelace/bignumber-card.js?v=0.0.1
    type: js
  - url: /local/card-tools.js?v=445b68
    type: js
  - url: /local/custom-lovelace/compact-custom-header/compact-custom-header.js?v0
    type: js
  - url: /local/custom-lovelace/card-modder.js?v=35eb37
    type: js
  - url: /local/kiosk.js?v=0
    type: js

Here is the link for the icons used: The Spherical icon set

Dino-Tech · January 2, 2019, 11:02am

A few different mobile screens:

  - id: 23
    title: spotify_mobile_view
    theme: Clear-Nightz-II
    background: center / cover no-repeat url("/local/mobile_backz/stoneWall.jpg") fixed 
    icon: mdi:spotify
    cards:
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:card-modder
            style:
              background-image: url("/local/mobile_backz/diamondPlate.jpg")
              background-repeat: repeat
              background-size: 100% 100%
              border-radius: 25px 25px 0px 0px
              color: rgb(102, 255, 51)
            card:
              type: entities
              show_header_toggle: false
              entities:
                - type: custom:bignumber-card
                  entity: sensor.time
                  scale: 14px
                  color: rgb(102, 255, 51)
                - type: custom:mini-media-player
                  entity: media_player.spotify
                  name: Spotify Player
                  artwork: full-cover-fit
                  hide_icon: true
                  power_color: true
                  idle_view: true
                  volume_stateless: true
                  replace_mute: stop
                  toggle_power: turn_off
                  show_progress: true
                  group: true
          - type: horizontal-stack
            cards:
              - type: custom:card-modder
                style:
                  background-image: url("/local/mobile_backz/diamondPlate2.jpg")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border-radius: 0px 0px 0px 25px
                card:
                  type: picture
                  image: /local/icons/round/1mp.png
                  tap_action:
                    action: call-service
                    service: media_player.media_previous_track
                    service_data:
                      entity_id: media_player.spotify
              - type: custom:card-modder
                style:
                  background-image: url("/local/mobile_backz/diamondPlate2.jpg")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                card:
                  type: picture
                  image: /local/icons/round/4mp.png
                  tap_action:
                    action: call-service
                    service: media_player.media_play_pause
                    service_data:
                      entity_id: media_player.spotify
              - type: custom:card-modder
                style:
                  background-image: url("/local/mobile_backz/diamondPlate2.jpg")  # backgroundz/BlackStainless3
                  background-repeat: no-repeat
                  background-size: 100% 100%
                card:
                  type: picture
                  image: /local/icons/round/5mp.png
                  tap_action:
                    action: call-service
                    service: media_player.media_play
                    service_data:
                      entity_id: media_player.spotify
              - type: custom:card-modder
                style:
                  background-image: url("/local/mobile_backz/diamondPlate2.jpg")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                card:
                  type: picture
                  image: /local/icons/round/6mp.png
                  tap_action:
                    action: call-service
                    service: media_player.media_stop
                    service_data:
                      entity_id: media_player.spotify
              - type: custom:card-modder
                style:
                  background-image: url("/local/mobile_backz/diamondPlate2.jpg")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border-radius: 0px 0px 25px 0px
                card:
                  type: picture
                  image: /local/icons/round/8mp.png
                  tap_action:
                    action: call-service
                    service: media_player.media_next_track
                    service_data:
                      entity_id: media_player.spotify
          - type: horizontal-stack
            cards:
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.0) #"var(--dark-primary-color)"
                  border-radius: 90px
                card:
                  type: picture
                  image: /local/icons/round/round_home.png 
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/18?kiosk
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.0)
                  border-radius: 90px
                card:
                  type: picture
                  image: /local/icons/round/round_close.png
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/0?kiosk
              - type: custom:card-modder
                style:
                  background-color: rgba(0,0,0,0.0) #"var(--dark-primary-color)"
                  border-radius: 90px
                card:
                  type: picture
                  image: /local/icons/round/round_redo.png
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/23?kiosk

Aimtjie · January 3, 2019, 12:55pm

Is there a way to set a specific Mobile/PC view to a device?

Awesome views btw, keep it up!

Dino-Tech · January 3, 2019, 8:24pm

Thanks! Can be done this way: Thanks to @maykar https://github.com/maykar/compact-custom-header but I prefer using different views for mobile, mainly because of wallpaper size and the different display properties for mobile vs. desktop & tablet. I have a specific view for each button on mobile home_view(shown above) and the buttons are set to navigate to the view intended. Unfortunately, I have currently 24 views and over 4k in code. Plan on revising and cutting back a bit.I will be moving the mobile_home_view to /lovelace/0 position(initial view) and adding a button to send to PC or tablet views section soon.

maurizio53 · January 4, 2019, 10:48am

Great, thanks… will you be so kind to share also the background images?

Aimtjie · January 5, 2019, 3:44pm

Is the github still available? I only see a 404.

Dino-Tech · January 5, 2019, 4:37pm

He was making changes to repo I think. Checked and edited link. Should work now

Dino-Tech · January 5, 2019, 8:25pm

I do not own the rights to these images, but the images can be found here: https://pngtree.com/free-backgrounds and many more and 2 per day can be downloaded. The image size needed depends on device you are using to view. Example: on my device, Pixel 2XL, the screen size is 2880x1440, so I resize my mobile backgrounds to that size for optimal viewing and no stretching or distortion.

Dino-Tech · January 8, 2019, 3:23am

I have been trying to figure out how to create a black on black theme and all of the text be visible. I was told it wasn’t possible due to the way HA theme is designed. Well…good enough for me!

    Darkest-Nightz:
      dark-primary-color: "#4d4d4d"
      disabled-text-color: "#5e5e6e"
      light-primary-color: "#a2a2a9"
      paper-card-background-color: "#121317"
      paper-grey-200: "#acacb9"
      paper-item-icon-color: "#c8c8d0"
      paper-listbox-background-color: "#0b0e0f"
      primary-background-color: "#0b0e0f"
      primary-color: "4d4d4d" # # # # # # # # # <<---- DO NOT CHANGE # # # 
      primary-text-color: "#f2f2f2"
      secondary-text-color: "#babac4"
      text-primary-color: "#d6d6dc"
      secondary-background-color: "#737373"
      sidebar-text_-_background: "#66757f"
      paper-card-header-color: "var(--paper-item-icon-color)"
      paper-item-icon-active-color: "#e4da00"
      paper-item-icon_-_color: "var(--primary-text-color)"
      paper-listbox-color: "var(--primary-text-color)"
      paper-grey-50: "var(--primary-text-color)"
      paper-slider-active-color: "var(--light-primary-color)"
      paper-slider-knob-color: "var(--paper-item-icon-color)"
      paper-slider-knob-start-color: "var(--secondary-background-color)"
      paper-slider-pin-color: "var(--secondary-background-color)"
      paper-slider-secondary-color: "var(--dark-primary-color)"
      paper-toggle-button-checked-ink-color: "var(--dark-primary-color)"
      paper-toggle-button-checked-button-color: "#e4da00"
      paper-toggle-button-unchecked-button-color: "var(--table-row-background-color)"
      paper-toggle-button-checked-bar-color: "var(--paper-item-icon-color)"
      paper-toggle-button-unchecked-bar-color: "var(--paper-item-icon-color)"
      table-row-background-color: "#22232b" 
      table-row-alternative-background-color: "var(--paper-card-background-color)"
      sidebar-icon-color: "#838395"
      sidebar-text-color: "#F1F1F1"
      sidebar-selected-background-color: "var(--primary-background-color)"
      sidebar-selected-icon-color: "#b3b3b3"
      sidebar-selected-text-color: "var(--sidebar-selected-icon-color)"
      divider-color: 'hsl(220, 5%, 38%)'
      dark-divider-opacity: '0.5'
      light-divider-opacity: '0.1'
      shadow-elevation-2dp_-_box-shadow: 'inset 0px 0px 0px 4px hsl(220, 5%, 27%)'
      shadow-elevation-16dp_-_box-shadow: 'inset 0px 0px 0px 4px hsl(220, 5%, 38%)'
      paper-font-headline_-_letter-spacing: '-0.2px'
      paper-font-headline_-_font-weight: '500'
      paper-font-body1_-_font-weight: '500'
      label-badge-red: 'hsla(0, 0%, 0%, 0)'
      label-badge-border-color: 'var(--label-badge-red)'
      label-badge-background-color: 'var(--paper-card-background-color)'
      label-badge-text-color: 'var(--primary-text-color)'
      primary-font-family: "Verdana"
      paper-font-common-base_-_font-family: "var(--primary-font-family)"
      paper-font-common-code_-_font-family: "var(--primary-font-family)"
      paper-font-body1_-_font-family: "var(--primary-font-family)"
      paper-font-subhead_-_font-family: "var(--primary-font-family)"
      paper-font-headline_-_font-family: "var(--primary-font-family)"
      paper-font-caption_-_font-family: "var(--primary-font-family)"
      paper-font-title_-_font-family: "var(--primary-font-family)"
      google-red-500: "#cc0000"
      google-blue-500: "#0033cc"
      google-green-500:  "#00cc00"
      google-yellow-500: "#ffff66"

Let me know what you think.

Aimtjie · January 8, 2019, 4:54am

Awesome! Looks really good!

Dino-Tech · January 9, 2019, 5:51am

minor adjustment if you prefer a darker green as I do…

google-green-500:  "#13eb13"

cpuram · January 9, 2019, 10:24am

trying to get rounded corners but, looks like it doesn’t work with picture-elements card. I am getting a square picture on top of rounded box

cjsimmons · January 9, 2019, 10:52am

Have you tried overflow:hidden

Dino-Tech · January 9, 2019, 5:40pm

corrected @thomasloven 's post My Lovelace Plugins

cpuram · January 11, 2019, 3:29am

trying to make mini graph card semi transparent (like you did for office temp/humidity, etc). transparency seems to work but the image is not appearing from beneath. please see below the relevant code.

- card:
      cards:
        - card:
            detail: 2
            height: 50
            entity: >-
              sensor.philio_technology_corporation_phpab01eu_micromodule_energy_meter_power
            hide:
              - icon
              - state
            name: Power Usage
            type: 'custom:mini-graph-card'
          style:
            background-color: rgba(0,0,0,0.3)
            background-size: 100% 100%
            border-radius: 15px 15px 0px 0px
          type: 'custom:card-modder'  
      type: 'custom:vertical-stack-in-card'
    id: powerusage
    style:
      background-image: url('/local/images/powerMeter.jpg') fixed
      background-size: 100% 100%
      border-radius: 15px
    type: 'custom:card-modder'

Dino-Tech · January 13, 2019, 5:34am

Can you please post image so I can see what is displaying. Thanks