Add a box-shadow to the card #51

ildar170975 · 2022-05-30T10:10:08Z

Currently the card:

does not allow to show box-shadows for child cards;
does not have it's own box-shadow.

type: custom:swipe-card
cards:
  - type: button
    entity: sun.sun
  - type: button
    entity: zone.home

Workarounds: (only useful if inserted cards occupy the whole area of the swiper-card)

Insert the card into custom:stack-in-card:

type: custom:stack-in-card
cards:
  - type: custom:swipe-card
    cards:
      - type: button
        entity: sun.sun
      - type: button
        entity: zone.home

which is not a perfect solution since the stack-in-card does not seem to be maintained.

Insert the card into custom:mod-card:

type: custom:mod-card
card:
  type: custom:swipe-card
  cards:
    - type: button
      entity: sun.sun
    - type: button
      entity: zone.home
card_mod:
  style: |
    ha-card {
      box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12) );
    }

which is not a perfect solution since you have to hardcode a currently default style for box-shadow.

The text was updated successfully, but these errors were encountered:

Mariusthvdb · 2022-05-30T13:30:41Z

3d option (which I use) is have the cards all have their own style/box-shadow setting. in my swiper configs, they are all based on the same button-card template, so not much to configure

btw, never checked myself, but did you try: https://swiperjs.com/swiper-api#param-cardsEffect-slideShadows ?

ildar170975 · 2022-05-30T19:05:10Z

3d option (which I use) is have the cards all have their own style/box-shadow setting

No, it does not help.
Initially inserted cards may already have their own box-shadow properties.
Their shadows just cannot be seen since they are overlapped by swipe-card.
To be sure - check this example:

type: custom:swipe-card
cards:
  - type: entities
    entities:
      - sun.sun
    card_mod: &ref_0
      style: |
        ha-card {
          box-shadow: var( --ha-card-box-shadow,0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12) );
          color: red;
        }
  - type: entities
    entities:
      - zone.home
    card_mod: *ref_0

As you can see the inserted cards have a shadow property:

but it is not visible:

The parent swipe-card is clipping borders of inserted cards due to it's overflow: hidden style.

Mariusthvdb · 2022-05-30T19:12:00Z

must check that, because I hadnt noticed in my setup:

ofc, I have a minimal box-shadow (must correct myself above, it is not defined in the button_card_templates, but in my theme settings):

    ha-card-border-radius: 0px
    ha-card-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19)

as you can see, the radial background is shining through nicely

ildar170975 · 2022-05-30T19:37:38Z

All checks I usually do with a default theme to be sure that my themes do not affect the output.
Cannot say anything about your example since you are using a custom theme.

ildar170975 · 2022-05-30T20:23:13Z

btw, never checked myself, but did you try: https://swiperjs.com/swiper-api#param-cardsEffect-slideShadows ?

Here are my tests:

Effect=cards:
No shadows visible.
Effect=flip:
Shadows=OK.
Effect=coverflow:
Shadows are visible only during swiping.

As for "creative" - did not manage to specify a creativeEffect object.
In my test it seems to work like a "cards" case:

ildar170975 · 2022-06-08T18:59:56Z

Finally:

This is not a "no box-shadow" problem. This is a "swipe-card is clipping other' cards' borders".
If swipe-card does not contain any stacks - use one of these solutions:

place the swipe-card inside stack-in-card (here);
use card-mod (here);
use slideShadows: true (works only with effect: flip) (here)

If swipe-card contains a stack - then there is no universal solution, it is to be found dependingly on a particular case)))

estevez-dev · 2022-06-10T08:10:28Z

If you have multiple slidesPerView cards, you can add an additional margin for each inner card inside swipe-card with card-mod:

    card_mod:
      style: |
        ha-card {
          margin: 3px;
        }

damru · 2022-09-24T08:58:03Z

To avoid the shadow being hidden with coverflow effect, you can use the new dictionary syntax of card mod to handle shadow DOM:

type: custom:mod-card
card:
  type: custom:swipe-card
  parameters:
    effect: coverflow
  cards:
    - type: button
      entity: sun.sun
    - type: button
      entity: zone.home
style:
  swipe-card$: |
    .swiper-container {
      margin: -2px !important;
      padding: 2px !important;
    }

cloudbr34k84 · 2022-11-20T22:23:23Z

Hey all, how would i go about fixing the box shadow on my mushroom cards which make up 1 big card

type: custom:swipe-card
start_card: 1
parameters:
  autoHeight: false
  initialSlide: 0
  centeredSlides: true
  effect: coverflow
  loop: false
  preventClicksPropagation: true
  preventClicks: true
cards:
  - type: vertical-stack
    cards:
      - type: custom:mushroom-title-card
        title: null
        subtitle: Favourite Sensors
      - square: false
        columns: 3
        type: grid
        cards:
          - type: custom:mushroom-template-card
            primary: Climate
            secondary: >-
              {{ states('sensor.downstairs_average_humidity')}} % / {{
              states('sensor.downstairs_average_temperature')}} °C
            icon: mdi:water-thermometer
            icon_color: '#A6ACAF'
            tap_action:
              action: none
          - type: custom:mushroom-template-card
            secondary: '{{ states(''sensor.fronius_live_power_flow_kwh'')}} kWh'
            primary: Power Flow
            icon: '{{ state_attr(''sensor.fronius_live_power_flow_kwh'', ''icon'') }}'
            entity: sensor.fronius_live_power_flow_kwh
            icon_color: '#A6ACAF'
            tap_action:
              action: none
            hold_action:
              action: none
            double_tap_action:
              action: none
            fill_container: false
            multiline_secondary: true
            badge_color: ''
            card_mod:
              style:
                mushroom-shape-icon$: |
                  .shape {
                    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;}

ingeniumdesign · 2023-01-14T22:44:35Z

same problems

antonio1475 · 2023-04-08T11:55:58Z

Insert the card into custom:stack-in-card:
type: custom:stack-in-card
cards:
  - type: custom:swipe-card
    cards:
      - type: button
        entity: sun.sun
      - type: button
        entity: zone.home
which is not a perfect solution since the stack-in-card does not seem to be maintained.

Using the "successor" custom:vertical-stack-in-card works perfectly. Thank you for the workaround

type: custom:vertical-stack-in-card
cards:
  - type: custom:swipe-card
    cards:
    - type: 'custom:button-card' 
      template:
        - custom_card_room_8
        - yellow_on
      name: Entrada
      entity: light.entrada
      icon: mdi:door-closed

    - type: picture-glance
      camera_view: live
      entities: []
      camera_image: camera.entrada_hd
      aspect_ratio: '1'
      card_mod:
        style: |
          div.box {display:none; }

Only the bottom one (Entrada) is in a custom:vertical-stack-in-card

Without (issue):

andrezpt · 2024-03-12T09:46:42Z

Insert the card into custom:stack-in-card:
type: custom:stack-in-card
cards:
  - type: custom:swipe-card
    cards:
      - type: button
        entity: sun.sun
      - type: button
        entity: zone.home
which is not a perfect solution since the stack-in-card does not seem to be maintained.
Using the "successor" custom:vertical-stack-in-card works perfectly. Thank you for the workaround
type: custom:vertical-stack-in-card
cards:
  - type: custom:swipe-card
    cards:
    - type: 'custom:button-card' 
      template:
        - custom_card_room_8
        - yellow_on
      name: Entrada
      entity: light.entrada
      icon: mdi:door-closed

    - type: picture-glance
      camera_view: live
      entities: []
      camera_image: camera.entrada_hd
      aspect_ratio: '1'
      card_mod:
        style: |
          div.box {display:none; }
Only the bottom one (Entrada) is in a custom:vertical-stack-in-card

Without (issue):

can you share the code of your cards? :)

ildar170975 mentioned this issue Jun 8, 2022

card is cutting off the inner cards (mushroom theme) #52

Open

jazzyisj mentioned this issue Mar 19, 2023

Lovelace - Swipe Card Issues jazzyisj/home-assistant-config#17

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add a box-shadow to the card #51

Add a box-shadow to the card #51

ildar170975 commented May 30, 2022 •

edited

Loading

Mariusthvdb commented May 30, 2022 •

edited

Loading

ildar170975 commented May 30, 2022 •

edited

Loading

Mariusthvdb commented May 30, 2022 •

edited

Loading

ildar170975 commented May 30, 2022

ildar170975 commented May 30, 2022 •

edited

Loading

ildar170975 commented Jun 8, 2022 •

edited

Loading

estevez-dev commented Jun 10, 2022 •

edited

Loading

damru commented Sep 24, 2022

cloudbr34k84 commented Nov 20, 2022

ingeniumdesign commented Jan 14, 2023

antonio1475 commented Apr 8, 2023

andrezpt commented Mar 12, 2024

Add a box-shadow to the card #51

Add a box-shadow to the card #51

Comments

ildar170975 commented May 30, 2022 • edited Loading

Mariusthvdb commented May 30, 2022 • edited Loading

ildar170975 commented May 30, 2022 • edited Loading

Mariusthvdb commented May 30, 2022 • edited Loading

ildar170975 commented May 30, 2022

ildar170975 commented May 30, 2022 • edited Loading

ildar170975 commented Jun 8, 2022 • edited Loading

estevez-dev commented Jun 10, 2022 • edited Loading

damru commented Sep 24, 2022

cloudbr34k84 commented Nov 20, 2022

ingeniumdesign commented Jan 14, 2023

antonio1475 commented Apr 8, 2023

andrezpt commented Mar 12, 2024

ildar170975 commented May 30, 2022 •

edited

Loading

Mariusthvdb commented May 30, 2022 •

edited

Loading

ildar170975 commented May 30, 2022 •

edited

Loading

Mariusthvdb commented May 30, 2022 •

edited

Loading

ildar170975 commented May 30, 2022 •

edited

Loading

ildar170975 commented Jun 8, 2022 •

edited

Loading

estevez-dev commented Jun 10, 2022 •

edited

Loading