Having different cards as homekit style cards

[Markobu98]

So I wanted to use the custom mini media player as a tile but I cant get it to work. This is the code I used:

type: custom:homekit-card
enableColumns: true
statePositionTop: true
titleColor: '#FFF'
style: |
  :host {
    --tile-background: rgba(255, 255, 255, 0.8);
    --tile-border-radius: 12px;
    --tile-width: 100px;
    --tile-height: 100px;
    --tile-on-background: rgba(255, 255, 255, 1);
    
    --tile-name-text-color: rgba(0, 0, 0, 0.4);
    --tile-on-name-text-color: rgba(0, 0, 0, 1);
    
    --tile-state-text-color: rgba(0, 0, 0, 0.4);
    --tile-on-state-text-color: rgba(0, 0, 0, 1);
    
    --tile-state-changed-text-color: rgb(134, 134, 134);
    --tile-unavailable-state-text-color: rgba(255, 0, 0, 1);
    
    --tile-value-text-color: rgba(255, 0, 0, 1);
    
    
    --tile-icon-color: rgba(0, 0, 0, 0.3);
    --tile-on-icon-color: #f7d959;
    
    
    --tile-width-mobile: 90px;
    --tile-height-mobile: 90px;

    --min-header-height: 150px;

    --tile-icon-size: 30px;

    --tile-image-radius: 100%

    --slider-width: 120px;
    --slider-height: 120px;
  }
rows:
  - row: 1
    columns:
      - column: 1
        tileOnRow: 1
        entities:
          - title: M E D I A
            entities:
              - card: custom:mini-media-player
                entity: media_player.spotify_marko
                artwork: full-cover

What am I doing wrong?

[skewll]

Ever make any progress on this? I have a custom card I want displayed just like this.

[slipx06]

@skewll Try this

              - card: custom:mini-media-player
                entity: media_player.room_speaker
                noPadding: true
                wider: true
                higher: true
                cardStyle: |
                  ha-card {
                  height: 100%;
                  background: none  !important;
                  box-shadow: none !important;
                  position: relative;
                  font-size: 0.5vw !important;
                  image
                  }
                  ha-card{
                  overflow: hidden !important;
                  }
                  :host #primaryProgress{
                  background: #474A52 !important; 
                  display: flex !important;
                  height: 100%;
                  }
                cardOptions:
                  artwork: full-cover
                  entity: media_player.room_speaker
                  power: true
                  progress: false
                  runtime: true
                  icon: true
                  source: true
                  volume: true
                  controls: false

[skewll]

Thanks. This partially works, but the methods for overwritting the default styles don't work so everything is stuck inside of the 100px boxes. The over flow doesn't hide, since the boxes ares tuck at 100x x 100px, or in the case since it's wider 200px x 200px. My custom card is about 120px x 200px.

[skewll]

I figured it out. I woke up today to see some style changes. Apparently I need to close the home assistant app out and reload to see any of these default css changes for some reason. You have set me off in the right direction and I appreciate it. Thank you.

…

On Thu, Apr 18, 2024, 3:51 PM slipx06 ***@***.***> wrote: @skewll <https://github.com/skewll> Try this - card: custom:mini-media-player entity: media_player.room_speaker noPadding: true wider: true higher: true cardStyle: | ha-card { height: 100%; background: none !important; box-shadow: none !important; position: relative; font-size: 0.5vw !important; image } ha-card{ overflow: hidden !important; } :host #primaryProgress{ background: #474A52 !important; display: flex !important; height: 100%; } cardOptions: artwork: full-cover entity: media_player.room_speaker power: true progress: false runtime: true icon: true source: true volume: true controls: false — Reply to this email directly, view it on GitHub <#139 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ARQFDKE63LWC2CVT5E75KT3Y6BFAJAVCNFSM52QYI4XKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TEMBWGU2DKMBVHE2Q> . You are receiving this because you were mentioned.Message ID: ***@***.***>