I’m having an issue with card mod styling on one of my dashboards. It is only happening to the team tracker card on the dashboard. All other card mod styling stays.
On to the issue. When team tracker updates all card mod styling is lost until the entire page is refreshed. I’ve looked at my code, googled around, read through card mod and team tracker github issues, posts on here for weeks. I can’t figure this out. Any help would be tremendously appreciated.
Here is the yaml code from the card on the dashboard. Ignore the indentation, it is part of a vertical and horizontal stack.
- type: custom:teamtracker-card
entity: sensor.st_louis_blues_tracker
show_league: false
outline: true
outline_color: blue
grid_options:
columns: full
card_mod:
style: |
ha-card {
#font-size: 30px !important;
background: rgba(0, 0, 0, 0.7) !important;
#border-radius: 40px !important;
}
.pre-row1 {
font-size: 30px !important;
}
.pre-row2 {
font-size: 20px !important;
}
.pre-row3 {
font-size: 20px !important;
margin-bottom: -15px !important;
}
.team-bg {
#height: 300px !important;
}
.gamewrapper {
font-size: 40px;
}
.team {
font-size: 40px;
#margin-top: -15px !important;
}
.last-play {
font-size: 60px !important;
}
.bar {
font-size: 50px !important;
}
.bar-text {
font-size: 30px !important;
}
.play-clock {
font-size: 40px !important;
}
.score {
font-size: 60px !important;
}
.in-row1 {
font-size: 30px !important;
}
.in-row2 {
font-size: 30px !important;
}
#.bar-left {
#background-color: deepskyblue !important;
#border: none !important;
#}
#.bar-right {
#background-color: red !important;
#border: none !important;
#}
