So I have been working on this for a few days, it functions very well for my needs but it doesnt look pretty.
I’d love to align the text better and enlarge the clock, something like this:
here is how i have done it (please feel free to tear it to shreds):
type: custom:stack-in-card
card_mod:
style: |
ha-card {
background: rgba(0,0,0,0);
margin: -10px 0px 0px 0px
border-width: 1px;
--stack-card-gap: 0;
mode: vertical
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
columns: 4
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: First Floor
alignment: start
title_tap_action:
action: none
subtitle_tap_action:
action: none
subtitle: null
card_mod:
style: |
ha-card {
--title-font-size: 20px !important;
box-shadow: none;
background: rgba(0,0,0,0);
padding-top: 20px !important;
padding-bottom: 0px !important;
margin 0;
}
- type: tile
entity: timer.test
features_position: bottom
vertical: false
name: " "
icon: " "
hide_state: false
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
background: rgba(0,0,0,0);
padding-top: 0px !important;
padding-left: 0px !important;
padding-right: 0px !important;
padding-bottom: 0px !important;
margin 0;
}
- type: custom:more-info-card
title: " "
entity: input_datetime.timetime_test
card_mod:
style: |
ha-card {
border-style: none;
background: transparent !important;
letter-spacing: 2px;
padding-left: 0px !important;
padding-right: 0px !important;
}
.type-custom-more-info-card {
state-card-content { display: none;}
}
- type: vertical-stack
cards:
- show_name: true
show_icon: false
type: button
name: Start
icon: mdi:play
tap_action:
action: perform-action
perform_action: automation.trigger
target:
entity_id:
- automation.time_test_2
hold_action:
action: none
entity: timer.test
card_mod:
style: |
ha-card {
border-style: none;
background: transparent !important;
letter-spacing: 1px;
font-size: 15px !important;
height: 15px !important;
padding-top: 30px !important;
padding-bottom: 20px !important;
padding-left: 0px !important;
padding-right: 0px !important;
}
.type-custom-more-info-card {
state-card-content { display: none;}
}
- show_name: true
show_icon: false
type: button
entity: timer.test
name: Pause
icon: mdi:play
tap_action:
action: perform-action
perform_action: timer.pause
target:
entity_id: timer.test
data: {}
theme: Mushroom Square
card_mod:
style: |
ha-card {
border-style: none;
background: transparent !important;
letter-spacing: 1px;
font-size: 15px !important;
height: 15px !important;
padding-left: 0px !important;
padding-right: 0px !important;
}
.type-custom-more-info-card {
state-card-content { display: none;}
}
- type: vertical-stack
cards:
- show_name: true
show_icon: false
type: button
name: Stop
icon: mdi:play
tap_action:
action: perform-action
perform_action: timer.finish
target:
entity_id: timer.test
data: {}
entity: timer.test
card_mod:
style: |
ha-card {
border-style: none;
background: transparent !important;
letter-spacing: 1px;
font-size: 15px !important;
height: 15px !important;
padding-top: 30px !important;
padding-bottom: 20px !important;
padding-left: 0px !important;
padding-right: 0px !important;
}
.type-custom-more-info-card {
state-card-content { display: none;}
}
- show_name: true
show_icon: false
type: button
entity: timer.test
name: Cancel
icon: mdi:play
tap_action:
action: perform-action
perform_action: timer.cancel
target:
entity_id: timer.test
data: {}
card_mod:
style: |
ha-card {
border-style: none;
background: transparent !important;
letter-spacing: 1px;
font-size: 15px !important;
height: 15px !important;
padding-left: 0px !important;
padding-right: 0px !important;
}
.type-custom-more-info-card {
state-card-content { display: none;}
}
layout:
grid-template-columns: 170px 90px 70px 70px
card_mod:
style: |
ha-card {
--title-font-size: 20px !important;
--subtitle-font-size: 15px !important;
box-shadow: none;
background: rgba(0,0,0,0);
padding-top: 20px !important;
}
Thanks in advance for any help!
p.s. I am so tired of looking for time dashboard cards, every which way I search leads me back to all the cards I have tried and seen. So I throw myself at the community for help.