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 https://github.com/DBuit/Homekit-panel-card/issues/139#issuecomment-2065450595, or unsubscribe https://github.com/notifications/unsubscribe-auth/ARQFDKE63LWC2CVT5E75KT3Y6BFAJAVCNFSM52QYI4XKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TEMBWGU2DKMBVHE2Q . You are receiving this because you were mentioned.Message ID: @.***>