Touchy - Touch friendly media player card (combination of cards)

ASNNetworks · January 4, 2022, 9:39pm

You can add border-style: none to the button-card template under styles > card. :

  styles:
    card:
      - padding: 0px
      - border-radius: 50%
      - box-shadow: none
      - -webkit-box-shadow: none   
      - border-style: none # 👈 just add this line

This will remove all borders in the media player card. No need to change each icon or your own theme Make sure you refresh your Lovelace dashboard so it’ll apply the updated button-card template.

edit: you might also need to apply that to mod-card section in the decluttering template where mini media player is judging by your screenshot. Look for custom:mod-card part in the decluttering template and add border-style: none there. Like this:

- type: 'custom:mod-card'
  style:
    '--mini-media-player-icon-color': var(--text-color) #change or remove to use own color
    '--mini-media-player-base-color': var(--text-color) #change or remove to use own color
    '--mini-media-player-accent-color': var(--music-accent-color) #change or remove to use own color
    border-top-left-radius: 0px !important
    border-top-right-radius: 0px !important      
    width: 100%
    transform: 'translate(0%, -100%)'
    border-style: none # 👈 just add this line

Steveuk · January 4, 2022, 9:43pm

Just done that it got rid of most of them but not the rectangle one near the bottom that displays whats playing.
Thanks

ASNNetworks · January 4, 2022, 9:44pm

See my edited post

Edit: just in case, also add it to one more location in the decluttering template: one card above the mod-card part. It’s the first card under elements and starts with - aspect_ratio: 1/1. Go to styles and delete the whole styles section and replace with code below over the old part entirely.

          styles:
            card:
              - padding: 0px
              - background-color: var(--card-background-off) #the color when there is no artwork, change or remove to use own color
              - box-shadow: none
              - -webkit-box-shadow: none      
              - border-style: none
            entity_picture:
              - height: 110%
              - width: 110%
              - position: absolute
              - transition: all 0.5s ease
              - filter: blur(17px)

I also had a border-radius of the artwork. But I think you have a different border-radius in your theme already, so it can get ugly. I removed it in the code now, since you already have your own border-radius in your theme.

@Steveuk I edited the code in my post. So you can also just copy/paste both templates completely and remove old. Wil solve all borders in one go

Steveuk · January 4, 2022, 10:04pm

For some reason neither of them remove the border from the bottom section.
the last one you mentioned removes the border from the whole card which i would like so i’ve left that in.
and the one.
and i’ve added it to the card mod section as below but no luck either , but i noticed the card_mod is # hashtaged out is that correct ?
Thanks again

      - type: 'custom:mod-card'
        #card_mod:
        style:
          '--mini-media-player-icon-color': var(--text-color) #change or remove to use own color
          '--mini-media-player-base-color': var(--text-color) #change or remove to use own color
          '--mini-media-player-accent-color': var(--accent-color) #change or remove to use own color
          border-top-left-radius: 0px !important
          border-top-right-radius: 0px !important 
          border-style: none
          width: 100%
          transform: 'translate(0%, -100%)'

ASNNetworks · January 4, 2022, 10:08pm

Did you make sure you refreshed the lovelace dashboard after it? You need to alter something in your original lovelace yaml, so it’ll force refresh.

If it still doesn’t work, also add this just in case under it: border-color: rgba(0,0,0,0.0). I’ll make any borders that are still somehow showing, invisible.

Yes, the #card-mod part was from old code. I removed it from the updated code now (doesn’t do anything).

Ttry removing both templates and add from my post again (I updated it). Then refresh lovelace by making a small change (like a space and backspace) in your lovelace yaml and then save → refresh page.

Steveuk · January 4, 2022, 10:15pm

i will do that now.
this is the border i’m refrering to

Steveuk · January 4, 2022, 10:25pm

@ASNNetworks
No it’s not worked for some reason.
I added all that code and cleared cache and tried different browser but still there.
It’s ok though don’t worry about i’m sure you have better things to be doing

ASNNetworks · January 4, 2022, 10:31pm

I think this will work in your case: add the border-style and color to the section below it, like so:

            card_mod:
              style: |
                .mmp-player {
                   background: var(--mini-media-player-mmp) !important;
                   border-top-left-radius: 0px !important;
                   border-top-right-radius: 0px !important;
                   border-style: none !important;
                   border-color: rgba(0,0,0,0.0) !important;
                }      
                .entity__info {
                  max-width: 95% !important; #change this if you want the scrolling info to be wider/smaller
                }

And make sure you make a small change in your lovelace yaml and hit save before refreshing page, so it’ll force reload all templates.

Steveuk · January 4, 2022, 10:50pm

No that didnt work either sorry
I’ve actually deleted it out of my theme for now and added - border: solid 2px black into the style of the first card and it’s looking better ha ha but as you can see the border is not going along the bottom.
I’m guessing this is struggling as it’s essentlially a mixture of a load of cards.

Steveuk · January 4, 2022, 10:52pm

i’ll have to leave it for tonight i need to get some sleep and the tabets nearly flat lol
Thanks for the help

Steveuk · January 5, 2022, 11:55am

Hi just having a look at this while at work.
I didn’t think it needed a dash - on this line only if it was a - type? Not that it would cause my border problem

ASNNetworks · January 5, 2022, 12:46pm

The dash means it’s part of a list. With picture elements card you need to use cards as elements, which is why you need -. Reference:

type: picture-elements:
elements:
  - card
  - card
  - card
  - card

If you don’t use dashes, then that means it’s one giant block of code, which is impossible since you’ll have multiple card codes in ONE card code. You will see an error like duplicated item (since a card can’t have twice the same variable). Elements implies a list of multiple items will follow (which is why it’s plural). Each ‘element’ therefore needs to start with a dash. It doesn’t matter if it’s - type of - card or - aspect_ratio. The order doesn’t matter in anyway.

Also the card you’re referring to is the background card where you see the artwork (which is at the top of the picture elements, so it sits behind all other cards). You have no issues with that since it shows up. Your issue is borders with the mini-media-player card, which is inside the mod-card (second element from the list).

This is the entire card collapsed:

So it’s a picture element card, where each element is a card. Which is why you need a - to declare each separate card. See this example code from the docs:

type: picture-elements
image: /local/floorplan.png
elements:
  - type: state-icon
    tap_action:
      action: toggle
    entity: light.ceiling_lights
    style:
      top: 47%
      left: 42%
  - type: state-icon
    tap_action:
      action: toggle
    entity: light.kitchen_lights
    style:
      top: 30%
      left: 15%
  - type: state-label
    entity: sensor.outside_temperature
    style:
      top: 82%
      left: 79%
  - type: state-label
    entity: climate.kitchen
    attribute: current_temperature
    suffix: "°C"
    style:
      top: 33%
      left: 15%

It doesn’t matter which part of the card starts with the -.

  - type: state-label
    entity: climate.kitchen
    attribute: current_temperature
    suffix: "°C"
    style:
      top: 33%
      left: 15%

Is no different than:

  - entity: climate.kitchen
    suffix: "°C"
    attribute: current_temperature
    style:
      top: 33%
      left: 15%
    type: state-label

The order does not matter at all

I have no idea why your borders don’t work. Are you sure you have card-mod installed correctly?? All code I provided yesterday works with my setup. If I change the border-style to solid and color to red, I get red borders. If I change them to none, all borders are gone.

Steveuk · January 5, 2022, 12:57pm

Thanks for the explanation I think I’m just used to - type: (still learning).
I’ll double check my card-mod when I get home but I’m sure it’s working as I use it to remove the backgrounds of the cards you see in the side menu.
It will be something stupid I’ve done it had been a long day at work yesterday

ASNNetworks · January 5, 2022, 1:12pm

Did you update card-mod? It’s been updated late November, which now uses a different scheme. If you have card-mod 2 instead of card-mod 3, non of the card-mod styles in my code works. Which explains why your border still shows up in the media player card (since that is the only place that uses card-mod). So make sure you’re running the latest card-mod 3 version and install it as a front-end module: GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card

If you are still running card-mod 2, you need to update your own stylings to the new schem, see the link I posted. Otherwise you have chances some of your old styling doesn’t work properly with card-mod 3.

Steveuk · January 5, 2022, 2:00pm

Just checked hacs and it’s showing 3.1.1 which seems like the latest looking at your link so should be ok there.
Thinking about it I might just delete the border from the theme anyway as it will cause more issues down the line anyway, I thought maybe I could just create a button template for the cards I want a border on.

ASNNetworks · January 5, 2022, 3:04pm

Make sure you add this part in your theme as well, otherwise the text is hard to read (it’s the backdrop on the media info part) Ofcourse you can change this color.

It’s strange why you’re having the border issues. But it might be best to remove them from themes indeed and just use it on your cards directly if it gives too much issues.

Steveuk · January 5, 2022, 3:24pm

Yep I’ll do that.
Can I ask what is the bar at the bottom of the card ? Is it a progress bar ? I can’t fully tell when I was streaming radio as it filled orange.
Thanks

ASNNetworks · January 5, 2022, 3:45pm

Yes, it’s a progress bar. It follows your accent-color in your theme. It’s this part in the code:

'--mini-media-player-accent-color': var(--accent-color)

Either change that variable in the code to a different color, or change the accent-color in your theme. That’s why I mentioned this in the requirements section:

ASNNetworks:

Also make sure you have these variables in your theme.yaml (you can ofcourse change them to whatever you want). If you use night and day themes, you can have auto-switching themes like my screenshots.
mini-media-player-mmp: rgba(255, 255, 255, 0.6)  #or for night rgba(0, 0, 0, 0.6)
text-color: '#404040'
accent-color: '#9FD848' 

You can change these colors to what you like. If you don’t like the progress bar, you can hide through mini-media-player variables, but it will disable the runtime indicator at the bottom right as well.

          hide:
            controls: true
            icon: false
            name: false
            power: true
            runtime: false # set this to true to hide all runtime, including progres
            source: true
            volume: true

Steveuk · January 5, 2022, 10:56pm

Thanks i deleted the border in the theme and it’s looking great now

ASNNetworks · January 5, 2022, 11:39pm

Glad you got it working!