CSS stylizacja karty w aplikacji - przykłady

faq
1

Jak wiemy CSS is Awesome :wink:

image

2 Przykłady z życia:

Kod przycisku kontrolera HID

image
image826×450 5.99 KB

image
image1403×608 43.8 KB

chcemy powiększyć kod przycisku bo jest mało widoczny, w tym celu do kodu:

type: button
tap_action:
  action: none
entity: binary_sensor.ais_remote_button
show_state: true
hold_action:
  action: none
show_name: true
icon: 'hass:keyboard-settings'
name: Kod przycisku kontrolera HID

dodajemy taki styl:

style: |
  ha-card .state {
    font-size: 16em;
    color: var(--secondary-text-color);
    color: var(--primary-color); 
    position: fixed;
    bottom: 30%;
    font-weight: bold;
  }

i już mamy kartę z widocznym kodem przycisku na całą stronę

image
image1251×787 69.6 KB

image
image1136×913 14.1 KB

Karta z awatarem Jolka

Nie podoba nam się napis na dole karty i chcemy go ukryć

image
image1174×872 163 KB

dodajemy do ostatniej kary taki styl

style: |
      ha-card {
        position: relative;
        bottom: 6em;
        align-items: center;
        border: solid black 1em;
      }

image
image1224×933 234 KB

i już jest lepiej

image
image1072×685 96.4 KB

kod karty:

cards:
  - entities:
      - entity: input_text.ais_knowledge_query
    show_header_toggle: false
    type: entities
  - type: conditional
    conditions:
      - entity: sensor.ais_speech_status
        state_not: DONE
    card:
      type: picture
      image: 'http://www.ai-speaker.com/images/free.gif'
      tap_action:
        action: none
      hold_action:
        action: none
  - type: conditional
    conditions:
      - entity: sensor.ais_speech_status
        state: DONE
    card:
      type: picture
      image: 'http://www.ai-speaker.com/images/free.jpeg'
      tap_action:
        action: none
      hold_action:
        action: none
  - content: >
      <ha-icon icon="mdi:face-woman"></ha-icon> {{
      states.sensor.aisknowledgeanswer.attributes.text }}
    type: markdown
    style: |
      ha-card {
        position: relative;
        bottom: 6em;
        align-items: center;
        border: solid black 1em;
      }
type: vertical-stack