Icon way too big
fin05 opened this issue · comments
Checklist:
- [X ] I updated to the latest version available
- [ X] I cleared the cache of my browser
- [X ] I read the FAQ and the issue I'm having was not mentioned there.
Release with the issue:
Last working release (if known):
Browser and Operating System:
Chrome and Firefox
Description of problem:
The sun/moon icon is way too big and making the height of the card take up too much space - I need a way to reduce the size of it and reclaim the lost space
Javascript errors shown in the web inspector (if applicable):
Additional information:
duplicates #132
I read that previously - it reduces the margin some but doesn't now alleviate the issue of the icon being too big - that fix does not work in my scenario
I read that previously - it reduces the margin some but doesn't now alleviate the issue of the icon being too big - that fix does not work in my scenario
i see. what kind of mod are you using to span clock-weather-card over multiple columns? i am under the impression that this is no lovelace default layout, or?
The dashboard is a grid layout. The card is a single column grid card - I'm using it on my dashboard for a touch screen kiosk
can you please provide your full lovelace yaml so that i can reproduce the problem?
views:
- title: Home
path: overview
icon: ''
visible:- user: 9e62ae39947f4c8baf5d48e436c79637
- user: 4cf0a372b67449f6ab7076bf71137c73
- user: 5c01883e3ab644b78866d88863929547
width: 300
max_cols: 1
subview: false
cards: - square: false
type: grid
title: Lights & Doors
cards:-
type: custom:mushroom-entity-card
icon_color: blue
layout: vertical
secondary_info: none
icon_type: icon
icon: mdi:sofa
tap_action:
action: navigate
navigation_path: '#livingroom'
name: Main Area
fill_container: false
entity: switch.main_area
card_mod:
style: |
ha-card {
--icon-size: 0px;
--card-primary-font-size: 15px;
height: 40px !important;
}
ha-state-icon {
--icon-symbol-size: 20px;
padding-top: 17px;
} -
type: custom:mushroom-entity-card
icon_color: red
layout: vertical
secondary_info: none
icon_type: icon
icon: mdi:silverware-fork-knife
tap_action:
action: navigate
navigation_path: '#kitchen'
name: Kitchen
fill_container: false
hold_action:
action: none
double_tap_action:
action: none
entity: switch.kitchen_lights
card_mod:
style: |
ha-card {
--icon-size: 0px;
--card-primary-font-size: 15px;
height: 40px !important;
}
ha-state-icon {
--icon-symbol-size: 20px;
padding-top: 17px;
} -
type: custom:mushroom-entity-card
icon_color: deep-purple
layout: vertical
secondary_info: none
icon: cil:imac-alternative
tap_action:
action: navigate
navigation_path: '#office'
name: Office
hold_action:
action: none
double_tap_action:
action: none
icon_type: icon
entity: switch.office_light
card_mod:
style: |
ha-card {
--icon-size: 0px;
--card-primary-font-size: 15px;
height: 40px !important;
}
ha-state-icon {
--icon-symbol-size: 20px;
padding-top: 17px;
} -
type: custom:mushroom-entity-card
icon_color: green
layout: vertical
secondary_info: none
icon: mdi:bed-king
tap_action:
action: navigate
navigation_path: '#master'
name: Master Suite
icon_type: icon
entity: switch.master_suite
card_mod:
style: |
ha-card {
--icon-size: 0px;
--card-primary-font-size: 15px;
height: 40px !important;
}
ha-state-icon {
--icon-symbol-size: 20px;
padding-top: 17px;
} -
type: custom:mushroom-entity-card
icon_color: deep-orange
layout: vertical
secondary_info: none
icon_type: icon
icon: mdi:theater
tap_action:
action: navigate
navigation_path: '#theater'
name: Theater
entity: switch.theater_room_lights
card_mod:
style: |
ha-card {
--icon-size: 0px;
--card-primary-font-size: 15px;
height: 40px !important;
}
ha-state-icon {
--icon-symbol-size: 20px;
padding-top: 17px;
} -
type: custom:mushroom-entity-card
icon_color: blue-grey
layout: vertical
secondary_info: none
icon_type: icon
icon: mdi:garage-variant
tap_action:
action: navigate
navigation_path: '#garage'
name: Garage
entity: switch.garage_light
card_mod:
style: |
ha-card {
--icon-size: 0px;
--card-primary-font-size: 15px;
height: 40px !important;
}
ha-state-icon {
--icon-symbol-size: 20px;
padding-top: 17px;
} -
type: custom:mushroom-entity-card
icon_color: yellow
layout: vertical
secondary_info: none
icon_type: icon
icon: mdi:weather-sunny
tap_action:
action: navigate
navigation_path: '#outside'
name: Outside
entity: switch.outside_lights
card_mod:
style: |
ha-card {
--icon-size: 0px;
--card-primary-font-size: 15px;
height: 40px !important;
}
ha-state-icon {
--icon-symbol-size: 20px;
padding-top: 17px;
} -
type: custom:mushroom-entity-card
icon_color: white
secondary_info: none
icon_type: icon
icon: mdi:bed
tap_action:
action: navigate
navigation_path: '#guest'
name: 'Guest '
fill_container: false
layout: vertical
hold_action:
action: none
double_tap_action:
action: none
entity: switch.guest_rooms
card_mod:
style: |
ha-card {
--icon-size: 0px;
--card-primary-font-size: 15px;
height: 40px !important;
}
ha-state-icon {
--icon-symbol-size: 20px;
padding-top: 17px;
} -
type: custom:mushroom-entity-card
entity: cover.garage_big_door_door
icon_color: green
layout: horizontal
secondary_info: state
icon_type: icon
icon: mdi:garage-variant
tap_action:
action: toggle
name: Big Door
fill_container: false
card_mod:
style: |
ha-card {
--icon-size: 0px;
--card-primary-font-size: 15px;
height: 40px !important;
}
ha-state-icon {
--icon-symbol-size: 25px;
padding-top: 0px;
} -
type: custom:mushroom-entity-card
entity: cover.smart_garage_small_door
icon_color: green
layout: horizontal
secondary_info: state
icon_type: icon
icon: mdi:garage
tap_action:
action: toggle
name: Small Door
fill_container: false
card_mod:
style: |
ha-card {
--icon-size: 0px;
--card-primary-font-size: 15px;
height: 40px !important;
}
ha-state-icon {
--icon-symbol-size: 25px;
padding-top: 0px;
} -
type: custom:mushroom-entity-card
entity: lock.frdrlk
layout: horizontal
secondary_info: state
icon_type: icon
icon: mdi:lock
tap_action:
action: toggle
name: Front Door
fill_container: false
icon_color: green
card_mod:
style: |
ha-card {
--icon-size: 0px;
--card-primary-font-size: 15px;
height: 40px !important;
}
ha-state-icon {
--icon-symbol-size: 25px;
padding-top: 0px;
} -
type: custom:mushroom-entity-card
entity: automation.aldi
layout: horizontal
secondary_info: none
icon_type: none
icon: mdi:lock
tap_action:
action: none
fill_container: false
icon_color: green
primary_info: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
--icon-size: 0px;
--card-primary-font-size: 15px;
height: 40px !important;
}
ha-state-icon {
--icon-symbol-size: 25px;
padding-top: 0px;
}
columns: 6
-
- square: false
type: grid
title: Entertainment
cards:-
show_name: true
show_icon: true
type: button
entity: script.living_room_plex
icon: mdi:plex
hold_action:
action: none
icon_height: 20px
name: Start Plex
tap_action:
action: call-service
service: script.open_plex
target: {}
card_mod:
style: |
ha-card {
height: 50px !important;
} -
show_name: true
show_icon: true
type: button
tap_action:
action: navigate
navigation_path: /dashboard-plex/0
entity: sensor.exos_router_kib_s_received
name: Plex Movies
icon: mdi:movie-roll
hold_action:
action: none
icon_height: 20px
card_mod:
style: |
ha-card {
height: 50px !important; -
show_name: true
show_icon: true
type: button
tap_action:
action: navigate
navigation_path: /dashboard-plex/tv-shows
entity: sensor.exos_router_kib_s_received
name: Plex TV
icon: mdi:television-classic
hold_action:
action: none
icon_height: 20px
card_mod:
style: |
ha-card {
height: 50px !important; -
show_name: true
show_icon: true
type: button
tap_action:
action: navigate
navigation_path: /d5369777_music_assistant_beta
entity: sensor.exos_router_kib_s_received
icon: mdi:music
hold_action:
action: none
icon_height: 20px
name: 'Jukebox '
card_mod:
style: |
ha-card {
height: 50px !important; -
show_name: true
show_icon: true
type: button
entity: media_player.denon_avr_x1300w
icon: mdi:audio-video
hold_action:
action: none
name: Reciever
icon_height: 20px
show_state: false
card_mod:
style: |
ha-card {
height: 50px !important;
columns: 5
-
- type: custom:weather-chart-card
entity: weather.main_floor
show_main: true
show_temperature: true
show_current_condition: true
show_attributes: false
show_time: true
show_time_seconds: false
show_day: false
show_date: false
show_humidity: false
show_pressure: false
show_wind_direction: false
show_wind_speed: false
show_sun: false
show_feels_like: false
use_12hour_format: true
icons_size: '20'
animated_icons: false
icon_style: style1
forecast:
precipitation_type: probability
show_probability: false
labels_font_size: '10'
precip_bar_size: '80'
style: style1
show_wind_forecast: true
condition_icons: true
round_temp: false
type: daily
number_of_forecasts: '0'
chart_height: '165'
units:
pressure: ''
speed: mph
title: ''
day_date_size: '10'
time_size: '20'
current_temp_size: '25' - square: true
type: grid
cards:- type: custom:atomic-calendar-revive
enableModeChange: true
entities:- entity: update.atomic_calendar_revive_update
icon: '' - entity: calendar.xxxxxxxx_gmail_com
name: xxxxxxxxx@gmail.com
showMultiDay: true
showDeclined: false
showDate: true
hideFinishedEvents: false
showProgressBar: false
showCurrentEventLine: false
dimFinishedEvents: true
maxDaysToShow: 30
cardHeight: 495px
showFullDayProgress: false
showEventIcon: false
showNoEventsForToday: true
compactMode: false
offsetHeaderDate: false
allDayBottom: false
showAllDayEvents: true
defaultMode: Calendar
- entity: update.atomic_calendar_revive_update
- type: todo-list
entity: todo.shopping_list
title: Shopping List
card_mod:
style: |
ha-card {
height: 495px !important;
max-height: 495px;
overflow-y: scroll;
} - type: custom:weather-radar-card
show_recenter: true
square_map: false
show_marker: true
show_scale: true
show_range: false
extra_labels: false
zoom_level: 7
show_playback: false
show_zoom: true
static_map: false
data_source: RainViewer-Rainbow
card_mod:
style: |
ha-card {
height: 495px !important;
}
columns: 3
- type: custom:atomic-calendar-revive
- square: false
type: grid
cards:- show_state: false
show_name: false
camera_view: live
type: picture-entity
entity: camera.frontdoor0
aspect_ratio: '16:9'
camera_image: camera.frontdoor0 - show_state: false
show_name: false
camera_view: live
type: picture-entity
entity: camera.frontyard0
camera_image: camera.frontyard0 - show_state: false
show_name: false
camera_view: live
type: picture-entity
entity: camera.rightside0
camera_image: camera.rightside0 - show_state: false
show_name: false
camera_view: live
type: picture-entity
entity: camera.leftside0
camera_image: camera.leftside0 - show_state: false
show_name: false
camera_view: live
type: picture-entity
entity: camera.driveway0
camera_image: camera.driveway0 - show_state: false
show_name: false
camera_view: live
type: picture-entity
entity: camera.garage0
camera_image: camera.garage0
aspect_ratio: '16:9' - show_state: false
show_name: false
camera_view: live
type: picture-entity
camera_image: camera.patio0
entity: camera.patio0 - show_state: false
show_name: false
camera_view: live
type: picture-entity
entity: camera.backyard_right0
camera_image: camera.backyard_right0 - show_state: false
show_name: false
camera_view: live
type: picture-entity
entity: camera.backyard_left0
camera_image: camera.backyard_left0
title: Security
- show_state: false
- type: custom:gap-card
height: 5 - square: false
type: grid
card_mod:
style: |
ha-card {
height: 130px !important;
}
cards:-
type: tile
entity: climate.main_floor
name: Main
vertical: true
hide_state: false
show_entity_picture: false
icon: phu:thermostat -
type: tile
entity: climate.upstairs
vertical: true
hide_state: false
icon: phu:thermostat
name: Upstairs -
type: custom:mushroom-vacuum-card
entity: vacuum.mayhem_vac
layout: vertical
commands: []
card_mod:
style: |
ha-card {height: 130px !important; } -
type: gauge
entity: sensor.finn_bot_litter_level
name: Litter
min: 0
max: 100
needle: true
severity:
green: 66
yellow: 33
red: 0
card_mod:
style: |
ha-card {
height: 130px !important;
} -
type: gauge
entity: sensor.finn_bot_waste_drawer
name: Poop
min: 0
max: 100
needle: true
severity:
green: 0
yellow: 50
red: 80
card_mod:
style: |
ha-card {
height: 130px !important;
}
columns: 5
-
- type: vertical-stack
cards:- type: custom:bubble-card
card_type: pop-up
hash: '#kitchen'
name: Kitchen
entity: switch.kitchen_lights
margin_top_desktop: 50%
margin_top_mobile: 50%
shadow_opacity: 0
bg_color: rgba(108. 122. 137. 1)
bg_opacity: 50 - type: custom:bubble-card
card_type: separator
name: Lights
icon: mdi:lightbulb-group - type: horizontal-stack
cards:- type: custom:bubble-card
card_type: button
entity: switch.kitchen_sink
name: Sink - type: custom:bubble-card
card_type: button
entity: switch.kitchen_counter
name: Counter - type: custom:bubble-card
card_type: button
entity: switch.kitchen_nook
name: Nook
- type: custom:bubble-card
- type: horizontal-stack
cards:- type: custom:bubble-card
card_type: button
entity: switch.kitchen_top_cabinets
name: Upper Cabinet - type: custom:bubble-card
card_type: button
entity: switch.kitchen_bottom_cabinets
name: Lower Cabinet
show_state: false
- type: custom:bubble-card
- type: custom:bubble-card
- type: vertical-stack
cards:- type: custom:bubble-card
card_type: pop-up
hash: '#livingroom'
entity: switch.main_area
name: Main Area
icon: mdi:sofa-outline
state: sensor.main_floor_temperature
margin_top_desktop: 50%
margin_top_mobile: 50%
bg_opacity: 50
bg_color: rgba(108. 122. 137. 1) - type: custom:bubble-card
card_type: separator
name: Lights
icon: mdi:lightbulb-group - type: horizontal-stack
cards:- type: custom:bubble-card
card_type: button
entity: switch.living_room_light
name: Ceiling
icon: mdi:ceiling-fan - type: custom:bubble-card
card_type: button
entity: switch.smart_plug_mini_5_socket_1
name: Lamp
button_type: switch
icon: mdi:lamp - type: custom:bubble-card
card_type: button
entity: switch.main_hallway_light
name: Main Hallway
icon: phu:ceiling-round
- type: custom:bubble-card
- type: horizontal-stack
cards:- type: custom:bubble-card
card_type: button
entity: switch.entry_way
name: Entry Way
button_type: switch
icon: mdi:ceiling-light - type: custom:bubble-card
card_type: button
entity: switch.dining_room
name: Dining Room
icon: mdi:light-recessed - type: custom:bubble-card
card_type: button
entity: switch.dining_room_table
name: Dining Table
icon: phu:chandelier
- type: custom:bubble-card
- type: horizontal-stack
cards:- type: custom:bubble-card
card_type: button
entity: media_player.lg_webos_smart_tv
name: LG TV
button_type: switch
icon: mdi:television - type: custom:bubble-card
card_type: button
entity: media_player.denon_avr_x1300w
name: Receiver
show_state: false
button_type: slider
- type: custom:bubble-card
- type: custom:bubble-card
- type: vertical-stack
cards:- type: custom:bubble-card
card_type: pop-up
hash: '#office'
name: Office
entity: switch.office_light
icon: cil:laptop-mac
margin_top_mobile: 50%
margin_top_desktop: 50%
bg_color: rgba(108. 122. 137. 1) - type: custom:bubble-card
card_type: separator
name: Lights
icon: mdi:lightbulb-group - type: horizontal-stack
cards:- type: custom:bubble-card
card_type: button
entity: switch.office_light
name: Light
icon: mdi:ceiling-fan-light - type: custom:bubble-card
card_type: button
entity: switch.office_fan
name: Fan
icon: mdi:ceiling-fan
- type: custom:bubble-card
- type: custom:bubble-card
- type: vertical-stack
cards:- type: custom:bubble-card
card_type: pop-up
hash: '#master'
entity: switch.master_suite
name: Master Suite
icon: mdi:bed-king-outline
state: sensor.main_floor_temperature
margin_top_mobile: 50%
margin_top_desktop: 50%
bg_color: rgba(108. 122. 137. 1) - type: custom:bubble-card
card_type: separator
name: Lights
icon: mdi:lightbulb-group - type: horizontal-stack
cards:- type: custom:bubble-card
card_type: button
entity: switch.master_bedroom_light
name: Ceiling
icon: mdi:ceiling-fan-light - type: custom:bubble-card
card_type: button
entity: switch.master_bedroom_fan
button_type: switch
icon: mdi:ceiling-fan
name: Fan - type: custom:bubble-card
card_type: button
entity: switch.master_bedroom_can_lights
name: Can Lights
icon: mdi:light-recessed
- type: custom:bubble-card
- type: horizontal-stack
cards:- type: custom:bubble-card
card_type: button
entity: switch.master_bath_vanity
name: Vanity
icon: mdi:vanity-light - type: custom:bubble-card
card_type: button
entity: switch.master_hallway_light
name: Hallway
button_type: switch
icon: phu:ceiling-round - type: custom:bubble-card
card_type: button
entity: switch.emily_bathroom_socket_1
name: 'Emily '
icon: mdi:hair-dryer-outline
- type: custom:bubble-card
- type: horizontal-stack
cards:- type: custom:bubble-card
card_type: button
entity: media_player.master_bedroom_tv
name: Master TV
button_type: switch
icon: mdi:television - type: custom:bubble-card
card_type: button
entity: number.smart_pet_feeder_al_feed
name: Feed Finn
show_state: false
button_type: switch
icon: mdi:cat
- type: custom:bubble-card
- type: custom:bubble-card
- type: vertical-stack
cards:- type: custom:bubble-card
card_type: pop-up
hash: '#theater'
entity: switch.theater_room_lights
name: Theater Room
icon: mdi:theater
state: sensor.upstairs_temperature
margin_top_mobile: 50%
margin_top_desktop: 50%
bg_color: rgba(108. 122. 137. 1) - type: custom:bubble-card
card_type: separator
name: Lights
icon: mdi:lightbulb-group - type: horizontal-stack
cards:- type: custom:bubble-card
card_type: button
entity: switch.staircase_lights
name: Staircase
icon: mdi:coach-lamp-variant - type: custom:bubble-card
card_type: button
entity: switch.smart_plug_mini_3_socket_1
name: Posters
button_type: switch
icon: mdi:post-outline - type: custom:bubble-card
card_type: button
entity: switch.smart_plug_mini_2_socket_1
name: Projector
- type: custom:bubble-card
- type: horizontal-stack
cards:- type: custom:bubble-card
card_type: button
entity: switch.theater_front_lights
name: Front
icon: mdi:light-recessed - type: custom:bubble-card
card_type: button
entity: switch.theater_center_lights
name: Center
button_type: switch
icon: mdi:light-recessed - type: custom:bubble-card
card_type: button
entity: switch.theater_rear_lights
name: Rear
icon: mdi:light-recessed
- type: custom:bubble-card
- type: custom:bubble-card
- type: vertical-stack
cards:- type: custom:bubble-card
card_type: pop-up
hash: '#garage'
name: Garage
entity: switch.garage_light
icon: mdi:garage-variant
margin_top_mobile: 50%
margin_top_desktop: 50%
bg_color: rgba(108. 122. 137. 1) - type: custom:bubble-card
card_type: separator
name: Lights
icon: mdi:lightbulb-group - type: horizontal-stack
cards:- type: custom:bubble-card
card_type: button
entity: cover.garage_big_door_door
name: Big Door
icon: mdi:garage-variant - type: custom:bubble-card
card_type: button
entity: cover.smart_garage_small_door
name: Small Door
icon: mdi:garage
- type: custom:bubble-card
- type: horizontal-stack
cards:- type: custom:bubble-card
card_type: button
entity: switch.garage_light
name: Light
icon: mdi:lightbulb-fluorescent-tube-outline - type: custom:bubble-card
card_type: button
entity: media_player.gym_2
name: Gym TV
icon: mdi:television
- type: custom:bubble-card
- type: custom:bubble-card
- type: vertical-stack
cards:- type: custom:bubble-card
card_type: pop-up
hash: '#outside'
entity: switch.outside_lights
name: Outside
icon: mdi:white-balance-sunny
state: weather.main_floor
margin_top_mobile: 50%
margin_top_desktop: 50%
bg_color: rgba(108. 122. 137. 1) - type: custom:bubble-card
card_type: separator
name: Lights
icon: mdi:lightbulb-group - type: horizontal-stack
cards:- type: custom:bubble-card
card_type: button
entity: switch.front_door
name: Front Door
icon: mdi:coach-lamp - type: custom:bubble-card
card_type: button
entity: switch.front_sidewalk
name: Sidewalk
button_type: switch
icon: mdi:coach-lamp - type: custom:bubble-card
card_type: button
entity: switch.patio
name: Patio
icon: mdi:light-recessed
- type: custom:bubble-card
- type: horizontal-stack
cards:- type: custom:bubble-card
card_type: button
entity: remote.patio_gtv
name: Patio TV
button_type: switch
icon: mdi:television - type: custom:bubble-card
card_type: button
entity: media_player.denon_avr_x1300w_2
name: Receiver
show_state: false
button_type: slider
- type: custom:bubble-card
- type: custom:bubble-card
- type: vertical-stack
cards:- type: custom:bubble-card
card_type: pop-up
hash: '#guest'
entity: switch.guest_rooms
name: Guest Rooms
icon: mdi:bed
margin_top_mobile: 50%
margin_top_desktop: 50%
bg_color: rgba(108. 122. 137. 1) - type: custom:bubble-card
card_type: separator
name: Guest Room 1
icon: mdi:lightbulb-group - type: horizontal-stack
cards:- type: custom:bubble-card
card_type: button
entity: switch.guest_room_1_light
icon: mdi:ceiling-fan-light
name: Light - type: custom:bubble-card
card_type: button
entity: switch.guest_room_1_fan
button_type: switch
icon: mdi:ceiling-fan
name: Fan - type: custom:bubble-card
card_type: button
entity: switch.guest_room_1_closet
name: Closet
icon: mdi:lightbulb
- type: custom:bubble-card
- type: custom:bubble-card
card_type: separator
icon: mdi:lightbulb-group
name: Guest Room 2 - type: horizontal-stack
cards:- type: custom:bubble-card
card_type: button
entity: switch.guest_room_2_light
icon: mdi:ceiling-fan-light
name: Light - type: custom:bubble-card
card_type: button
entity: switch.guest_room_2_fan
button_type: switch
icon: mdi:ceiling-fan
name: Fan - type: custom:bubble-card
card_type: button
entity: switch.guest_room_2_closet
name: Closet
icon: mdi:lightbulb
layout: {}
type: custom:grid-layout
title: ''
- type: custom:bubble-card
- type: custom:bubble-card
the snippet above does not contain clock-weather-card