Estoy trabajando en las tarjetas HA de Pronote.

Este bloque es el seguimiento de mi trabajo sobre los mapas propuestos por @vingerha y los de @dathosim.

Mi objetivo es reemplazar el guión pitón por integración.

[Actualización de esta página]

  • Tras la corrección de V0.6.0, Tareas sustituido por deberes 
  • Añadida Tarjeta de Menú de Cantina (>V6.0.6)

Prerrequisito

Estoy pensando en instalar la interfaz Modalidad de tarjeta en HACS

El Mapa de Uso del Tiempo

Ambos están súper limpios, para el curso cancelado dudo entre el botón rojo o el tiempo tachado, ambos son relevantes.

Hice una mezcla de los dos y agregué un espacio antes del «consejo de clases», también reelaboré la fecha en el título porque había que encontrarla.

El código es:

- tipo: contenido de la reducción: &gt;- {% set items = state_attr('sensor.pronote_xx _coralie _timetable _next_day','lessons') %} <div>Uso del tiempo de: {{as _timestamp(items[0].start _at) | int | timestamp _custom('%d/%m/%Y', verdad)}} </div>

    <table>   {% para i en rango(0, items | count, 1) %}  <tr> 
      {%- si items[i].canceled!= True -%} 
      <td><mark>{{ items[i].start_time}}</td> 
      <td><mark>{{ items[i].end _time }}</td></mark>
      <td>{{ items[i].lesson }} {% de lo contrario %} <td><del>{{ items[i].start _time }}</td> <td><del>{{ items[i].end _time}}</td> <td><del>{{ items[i].lesson }}</del> {%- endibia -%} {% if items[i].status!= Ninguno %} <span> {{ items[i].status }}</td> {% endif %} <td> {{items[i].classroom }}</td> </tr> {% endfor %} </table> 
  tarjeta_mod: estilo: .: | ha-card ha-markdown { relleno:0px } ha-card ha-markdown.no-header { relleno:0px } ha-markdown$: | div { fondo-color:rgb(100, 100, 100); relleno: 12px 12px; color: blanco; peso de la fuente:normal; tamaño de fuente:1.2em; radio frontera-arriba-izquierda: 5px; frontera-arriba-derecha-radio: 5px; } tabla{ frontera-colapso: colapso; tamaño de fuente: 0.9em; familia de fuentes: Roboto; anchura: 100%; esbozo: 0px sólido #393c3d; margen superior: 5px; } subtítulo { text-align: centro; peso de fuente: negrita; tamaño de fuente: 1.2em; } td { relleno: 5px 10px 5px 10px; Alineación de texto: izquierda; frontera inferior: 0px sólido #1 quater de 2020; } tr { borde inferior: 0px sólido #1 quater de 2020; } tr:nth-of-type(even) { color de fondo: rgb(54, 54, 54, 0.3); } tr:último de tipo { border-bottom: transparente; }* marca { fondo: #009767; color: #222627; radio fronterizo: 5px; relleno: 5px; } span { fondo: #EC4B34; color: #222627; radio fronterizo: 5px; relleno: 5px; } span { relleno: 5px; } tr:nth-child(n+2) &gt; td:nth-child(2) { texto-alineación: izquierda; }tipo: ''

El mapa de tareas

He cambiado de entidad y el resultado es:

Su código:

- tipo: contenido de la reducción: | -
    <div>Deberes</div>
    <table>
        <tbody>
            {% set items = state_attr('sensor.pronote_xx _coralie _homework','homework') %} {%-para i en rango(0, items | count, 1) -%}
            <tr>
                <td>
                {%- if items[i].done == true -%}
                    <mark>
                    {{items[i].date.strftime("%d/%m")}}}
                    </mark>
                {%- de lo contrario -%}
                    <span>
                    {{items[i].date.strftime("%d/%m")}}}
                    </span>
                {% endif %}</td>              
                <td>{{items[i].subject}}</td>
                <td>{{items[i].description}}</td>
            </tr>
            {% endfor %}
      </tbody>
    </table>
  tarjeta_mod: estilo: .: | ha-card ha-markdown { relleno:0px } ha-card ha-markdown.no-header { relleno:0px } ha-markdown$: | h1 { peso de fuente: normal; tamaño de fuente: 24px; } div { color de fondo: rgb (100, 100, 100); relleno: 12px 12px; color: blanco; peso de la fuente:normal; tamaño de fuente:1.2em; radio frontera-arriba-izquierda: 5px; frontera-arriba-derecha-radio: 5px; } tabla{ frontera-colapso: colapso; tamaño de fuente: 0.9em; familia de fuentes: Roboto; anchura: auto; esbozo: 0px sólido #393c3d; margen máximo: 10px; } subtítulo { text-align: centro; peso de fuente: negrita; tamaño de fuente: 1.2em; } td { relleno: 5px 5px 5px 5px; Alineación de texto: izquierda; frontera inferior: 0px sólido #1 quater de 2020; } tr { borde inferior: 0px sólido #1 quater de 2020; } tr:nth-of-type(even) { color de fondo: rgb(54, 54, 54, 0.3); } tr:último de tipo { border-bottom: transparente; } marca { fondo: #009767; color: #222627; radio fronterizo: 5px; relleno: 5px; } span { fondo: #EC4B34; color: #222627; radio fronterizo: 5px; relleno: 5px; } span { relleno: 5px; } tr:nth-child(n+2) &gt; td:nth-child(2) { texto-alineación: izquierda; }

Nota: Será necesario comprobar si se utiliza sensor.pronote _xx _coralie _homework _period o sensor.pronote _xx _coralie _homework cuando hay varios días.

Mapa de evaluaciones

Ya había convertido el verde más en verde corazón, creo que es más agradable. Aquí está el mapa con la integración:

- tipo: contenido de la reducción: &gt;-
    <div>Evaluaciones</div> {% set items = state_attr('sensor.pronote_xx_coralie_evaluaciones','evaluaciones')%}
    <table width='100%'>
      <tbody>
      {% para i en rango(0, items | count, 1) %}
      <tr><td width='10%'>{{ items[i].date.strftime("%d-%m") }}</td><td width='60%'>{{ items[i].subject }}</td><td width='30%'>
      {% conjunto de adquisiciones = elementos[i]. adquisiciones %} {% para j en rango(0, adquisiciones|count,1) %}{% if acquisitions[j].level == 'Muy buen dominio' %💚{% adquisiciones elif[j].level == 'Control satisfactorio' %🟢{% Elif Adquisiciones[j].level == "Comienzo de la maestría" %🟡{% adquisiciones elif[j].level == 'Maestría frágil' %🟡{% adquisiciones elif[j].level == 'Control insuficiente' %🟠{% de lo contrario %}?{% endif %}{% endfor %}</td></tr>
      {% endfor %}
    </tbody> </table>
  tarjeta_mod: estilo: .: | ha-card ha-markdown { relleno:0px } ha-card ha-markdown.no-header { relleno:0px } ha-markdown$: | h1 { peso de fuente: normal; tamaño de fuente: 24px; } div { color de fondo: rgb (100, 100, 100); relleno: 12px 12px; color: blanco; peso de la fuente:normal; tamaño de fuente:1.2em; radio frontera-arriba-izquierda: 5px; frontera-arriba-derecha-radio: 5px; } tabla{ frontera-colapso: colapso; peso de la fuente:normal; tamaño de fuente:1.2em; familia de fuentes: Roboto; anchura: auto; esbozo: 0px sólido #393c3d; margen máximo: 10px; } subtítulo { text-align: centro; peso de fuente: negrita; tamaño de fuente: 1.2em; } td { relleno: 0px 5px 0px 5px; Alineación de texto: izquierda; frontera inferior: 0px sólido #1 quater de 2020; } tr { borde inferior: 0px sólido #1 quater de 2020; Altura de la línea: 4px; } tr:nth-of-type(even) { color de fondo: rgb(54, 54, 54, 0.3); } tr:último de tipo { border-bottom: transparente; } marca { fondo: #009767; color: #222627; radio fronterizo: 10px; relleno: 5px; } span { fondo: #EC4B34; color: #222627; radio fronterizo: 10px; relleno: 5px; } span { relleno: 5px; } tr:nth-child(n+2) &gt; td:nth-child(2) { texto-alineación: izquierda; }

El mapa de las ausencias

Es perfecto, para adaptarse al diseño de las otras tarjetas, el resultado es:

- tipo: contenido de la reducción: &gt;-
    <div>Ausencias</div><table> 

    {% ítems del conjunto = estado_attr('sensor.pronote_xxxx _coralie _absences','absences') %} {% para i en rango(0, items | count, 1) %}

    <tr>

    {%- if items[i].justified == Verdadero -%}

    <td> <mark> {{ items[i].from.strftime("%d-%m") }}</mark></td>

    {% de lo contrario %}

    <td> <span>{{ items[i].from.strftime("%d-%m") }}</span></td> 

    {%- endibia -%} 

    <td>{{ items[i].hours }}</td>

    <td>{{ items[i].reason }}</td>

    {% endfor %} tarjeta_mod: estilo: .: | ha-card ha-markdown { relleno:0px } ha-card ha-markdown.no-header { relleno:0px } ha-markdown$: | div { fondo-color:rgb(100, 100, 100); relleno: 12px 12px; color: blanco; peso de la fuente:normal; tamaño de fuente:1.2em; radio frontera-arriba-izquierda: 5px; frontera-arriba-derecha-radio: 5px; } tabla{ frontera-colapso: colapso; familia de fuentes: Roboto; anchura: 100%; esbozo: 0px sólido #393c3d; margen superior: 5px; } subtítulo { text-align: centro; peso de fuente: negrita; tamaño de fuente: 1.2em; } td { relleno: 5px 10px 5px 10px; Alineación de texto: izquierda; frontera inferior: 0px sólido #1 quater de 2020; } tr { borde inferior: 0px sólido #1 quater de 2020; } tr:nth-of-type(even) { color de fondo: rgb(54, 54, 54, 0.3); } tr:último de tipo { border-bottom: transparente; }* marca { fondo: #009767; color: #222627; radio fronterizo: 5px; relleno: 5px; } span { fondo: #EC4B34; color: #222627; radio fronterizo: 5px; relleno: 5px; } span { relleno: 5px; } tr:nth-child(n+2) &gt; td:nth-child(2) { texto-alineación: izquierda; }

Menú mapa de la cantina

V6.0.6 mínimo requerido

tipo: contenido de la reducción: | -
  <div>Menús Cantina</div>
  <table>
      <tbody>
  {% set items = state_attr('sensor.pronote_xxx_menus','menus') %}
    <tr>
    <td><h4>Fecha</td>
    <td><h4>Entrada</td>
    <td><h4>Curso principal</td>
    <td><h4>Acompañamiento</td>
    <td><h4>Queso</td>
    <td><h4>Postre</td>
    </tr>
  {% para i en rango(0, items | count, 1) %} {% if items[i].is_lunch == Verdadero %}
    <tr>
    <td>      
    <mark>  
    {{ items[i].date | as_datetime | as_timestamp | timestamp _custom('%d/%yo')}}}
    </mark>
    </td>
    <td> 
      {% para la inclusión en las partidas[i].first_meal %} {{ entry.name }} {% endfor %}
    </td>
    <td> 
      {% para principal en items[i].main_meal %} {{ main.name }} {% endfor %}
    </td>
    <td>
      {% if items[i].side_meal %} {% para el lado en los artículos[i].side_meal %} {{ side.name }} {% endfor %} {% de lo contrario %} PAS _DISPO {% endif %}
    </td>
    <td>
      {% para el queso en artículos[i].queso %} {{ cheese.name }} {% endfor %}
    </td>
    <td>
      {% para el postre en artículos[i].dessert %} {{ dessert.name }} {% endfor %}
    </td>
      {% endif %} {% endfor %}
    </tbody>
  </table>
tarjeta_mod: estilo: .: | ha-card ha-markdown { relleno:0px } ha-card ha-markdown.no-header { relleno:10px } ha-markdown$: | div { fondo-color:rgb(100, 100, 100); relleno: 12px 12px; color: blanco; peso de la fuente:normal; tamaño de fuente:1.2em; radio frontera-arriba-izquierda: 5px; frontera-arriba-derecha-radio: 5px; } tabla{ frontera-colapso: colapso; familia de fuentes: Roboto; anchura: 100%; esbozo: 0px sólido #393c3d; margen superior: 5px; } subtítulo { text-align: centro; peso de fuente: negrita; tamaño de fuente: 1.2em; } td { relleno: 5px 10px 5px 10px; Alineación de texto: izquierda; frontera inferior: 0px sólido #1 quater de 2020; } tr { borde inferior: 0px sólido #1 quater de 2020; } tr:nth-of-type(even) { color de fondo: rgb(54, 54, 54, 0.3); } tr:último de tipo { border-bottom: transparente; }* marca { fondo: #009767; color: #222627; radio fronterizo: 5px; relleno: 5px; } span { fondo: #EC4B34; color: #222627; radio fronterizo: 5px; relleno: 5px; } span { relleno: 5px; } tr:nth-child(n+2) &gt; td:nth-child(2) { texto-alineación: izquierda; }

 

Adición de información adicional

Gracias a la excelente idea de Guion de @dathosim, agregaré plantillas que me den esta información, código para colocar en la plantilla

- sensor: - nombre: Última actualización de Pronote Unique _id: sensor.latest _mise _a _jour _de _pronote icono: Estado «mdi:update»: «{{state_attr('sensor.pronote_xx_coralie','updated_at').strftime('%d-%m-%Y a %H:%M') }}" - sensor: - nombre: A partir de las clases de Coralie - Demain único _id: sensor.debut_des_cursos_de_coralie_demain icon: Estado «mdi:clock-time-five-outline»: >- {% si se define el estado _attr('sensor.pronote_xx _coralie _timetable _tomorrow', 'lessons')[0] %} {{state _attr('sensor.pronote _xx _coralie _timetable _tomorrow', 'lecciones')[0]['start _at'].strftime('%H:%M')}} {% de lo contrario %} Ninguna clase {% endif %} - sensor: - nombre: Comienzo de las clases de Coralie - Hoy _id único: sensor.debut_des_cursos_de_coralie_today _hui icon: Estado «mdi:clock-time-five-outline»: >- {% si se define el estado _attr('sensor.pronote_xx _coralie _timetable _today', 'lessons')[0] %} {{state _attr('sensor.pronote _xx _coralie _timetable _today', 'lecciones')[0]['start _at'].strftime('%H:%M')}} {% de lo contrario %} Ninguna clase {% endif %}

 

 

Resultado final 

Código final de la baldosa completa:

tipo: columnas horizontales: 1 cuadrado: Tarjetas falsas: - tipo: tarjetas de pila vertical: - tipo: contenido de la reducción: &gt;- {% set items = state_attr('sensor.pronote_xx _coralie _timetable_today','lessons') %} <div>Uso del tiempo de: {{as _timestamp(items[0].start _at) | int | timestamp _custom('%d/%m/%Y', verdad)}} </div>

          <table>   {% para i en rango(0, items | count, 1) %}  <tr> 
            {%- si items[i].canceled!= True -%} 
            <td><mark>{{ items[i].start_time}}</td> 
            <td><mark>{{ items[i].end _time }}</td></mark>
            <td>{{ items[i].lesson }} {% de lo contrario %} <td><del>{{ items[i].start _time }}</td> <td><del>{{ items[i].end _time}}</td> <td><del>{{ items[i].lesson }}</del> {%- endibia -%} {% if items[i].status!= Ninguno %} <span> {{ items[i].status }}</td> {% endif %} <td> {{items[i].classroom }}</td> </tr> {% endfor %} </table> 
        tarjeta_mod: estilo: .: | ha-card ha-markdown { relleno:0px } ha-card ha-markdown.no-header { relleno:10px } ha-markdown$: | div { fondo-color:rgb(100, 100, 100); relleno: 12px 12px; color: blanco; peso de la fuente:normal; tamaño de fuente:1.2em; radio frontera-arriba-izquierda: 5px; frontera-arriba-derecha-radio: 5px; } tabla{ frontera-colapso: colapso; familia de fuentes: Roboto; anchura: 100%; esbozo: 0px sólido #393c3d; margen superior: 5px; } subtítulo { text-align: centro; peso de fuente: negrita; tamaño de fuente: 1.2em; } td { relleno: 5px 10px 5px 10px; Alineación de texto: izquierda; frontera inferior: 0px sólido #1 quater de 2020; } tr { borde inferior: 0px sólido #1 quater de 2020; } tr:nth-of-type(even) { color de fondo: rgb(54, 54, 54, 0.3); } tr:último de tipo { border-bottom: transparente; }* marca { fondo: #009767; color: #222627; radio fronterizo: 5px; relleno: 5px; } span { fondo: #EC4B34; color: #222627; radio fronterizo: 5px; relleno: 5px; } span { relleno: 5px; } tr:nth-child(n+2) &gt; td:nth-child(2) { texto-alineación: izquierda; } - tipo: contenido de la reducción: &gt;- {% set items = state_attr('sensor.pronote_xx _coralie _timetable _next_day','lessons') %} <div>Uso del tiempo de: {{as _timestamp(items[0].start _at) | int | timestamp _custom('%d/%m/%Y', verdad)}} </div>

          <table>   {% para i en rango(0, items | count, 1) %}  <tr> 
            {%- si items[i].canceled!= True -%} 
            <td><mark>{{ items[i].start_time}}</td> 
            <td><mark>{{ items[i].end _time }}</td></mark>
            <td>{{ items[i].lesson }} {% de lo contrario %} <td><del>{{ items[i].start _time }}</td> <td><del>{{ items[i].end _time}}</td> <td><del>{{ items[i].lesson }}</del> {%- endibia -%} {% if items[i].status!= Ninguno %} <span> {{ items[i].status }}</td> {% endif %} <td> {{items[i].classroom }}</td> </tr> {% endfor %} </table> 
        tarjeta_mod: estilo: .: | ha-card ha-markdown { relleno:0px } ha-card ha-markdown.no-header { relleno:10px } ha-markdown$: | div { fondo-color:rgb(100, 100, 100); relleno: 12px 12px; color: blanco; peso de la fuente:normal; tamaño de fuente:1.2em; radio frontera-arriba-izquierda: 5px; frontera-arriba-derecha-radio: 5px; } tabla{ frontera-colapso: colapso; familia de fuentes: Roboto; anchura: 100%; esbozo: 0px sólido #393c3d; margen superior: 5px; } subtítulo { text-align: centro; peso de fuente: negrita; tamaño de fuente: 1.2em; } td { relleno: 5px 10px 5px 10px; Alineación de texto: izquierda; frontera inferior: 0px sólido #1 quater de 2020; } tr { borde inferior: 0px sólido #1 quater de 2020; } tr:nth-of-type(even) { color de fondo: rgb(54, 54, 54, 0.3); } tr:último de tipo { border-bottom: transparente; }* marca { fondo: #009767; color: #222627; radio fronterizo: 5px; relleno: 5px; } span { fondo: #EC4B34; color: #222627; radio fronterizo: 5px; relleno: 5px; } span { relleno: 5px; } tr:nth-child(n+2) &gt; td:nth-child(2) { texto-alineación: izquierda; } - tipo: contenido de la reducción: | -
          <div>Deberes</div>
          <table>
              <tbody>
                  {% set items = state_attr('sensor.pronote_xx _coralie _homework','homework') %} {%-para i en rango(0, items | count, 1) -%}
                  <tr>
                      <td>
                      {%- if items[i].done == true -%}
                          <mark>
                          {{items[i].date.strftime("%d/%m")}}}
                          </mark>
                      {%- de lo contrario -%}
                          <span>
                          {{items[i].date.strftime("%d/%m")}}}
                          </span>
                      {% endif %}</td>              
                      <td>{{items[i].subject}}</td>
                      <td>{{items[i].description}}</td>
                  </tr>
                  {% endfor %}
            </tbody>
          </table>
        tarjeta_mod: estilo: .: | ha-card ha-markdown { relleno:0px } ha-card ha-markdown.no-header { relleno:10px } ha-markdown$: | h1 { peso de fuente: normal; tamaño de fuente: 24px; } div { color de fondo: rgb (100, 100, 100); relleno: 12px 12px; color: blanco; peso de la fuente:normal; tamaño de fuente:1.2em; radio frontera-arriba-izquierda: 5px; frontera-arriba-derecha-radio: 5px; } tabla{ frontera-colapso: colapso; peso de la fuente:normal; tamaño de fuente:1.2em; familia de fuentes: Roboto; anchura: auto; esbozo: 0px sólido #393c3d; margen máximo: 10px; } subtítulo { text-align: centro; peso de fuente: negrita; tamaño de fuente: 1.2em; } td { relleno: 5px 5px 5px 5px; Alineación de texto: izquierda; frontera inferior: 0px sólido #1 quater de 2020; } tr { borde inferior: 0px sólido #1 quater de 2020; } tr:nth-of-type(even) { color de fondo: rgb(54, 54, 54, 0.3); } tr:último de tipo { border-bottom: transparente; } marca { fondo: #009767; color: #222627; radio fronterizo: 5px; relleno: 5px; } span { fondo: #EC4B34; color: #222627; radio fronterizo: 5px; relleno: 5px; } span { relleno: 5px; } tr:nth-child(n+2) &gt; td:nth-child(2) { texto-alineación: izquierda; } - tipo: contenido de la reducción: &gt;-
          <div>Ausencias</div><table> 

          {% set items = state_attr('sensor.pronote_xx_coralie_absences','absences') %} {% para i en rango(0, items | count, 1) %}

          <tr>

          {%- if items[i].justified == Verdadero -%}

          <td> <mark> {{ items[i].from.strftime("%d-%m") }}</mark></td>

          {% de lo contrario %}

          <td> <span>{{ items[i].from.strftime("%d-%m") }}</span></td> 

          {%- endibia -%} 

          <td>{{ items[i].hours }}</td>

          <td>{{ items[i].reason }}</td>

          {% endfor %} tarjeta_mod: estilo: .: | ha-card ha-markdown { relleno:0px } ha-card ha-markdown.no-header { relleno:10px } ha-markdown$: | div { fondo-color:rgb(100, 100, 100); relleno: 12px 12px; color: blanco; peso de la fuente:normal; tamaño de fuente:1.2em; radio frontera-arriba-izquierda: 5px; frontera-arriba-derecha-radio: 5px; } tabla{ frontera-colapso: colapso; familia de fuentes: Roboto; anchura: 100%; esbozo: 0px sólido #393c3d; margen superior: 5px; } subtítulo { text-align: centro; peso de fuente: negrita; tamaño de fuente: 1.2em; } td { relleno: 5px 10px 5px 10px; Alineación de texto: izquierda; frontera inferior: 0px sólido #1 quater de 2020; } tr { borde inferior: 0px sólido #1 quater de 2020; } tr:nth-of-type(even) { color de fondo: rgb(54, 54, 54, 0.3); } tr:último de tipo { border-bottom: transparente; }* marca { fondo: #009767; color: #222627; radio fronterizo: 5px; relleno: 5px; } span { fondo: #EC4B34; color: #222627; radio fronterizo: 5px; relleno: 5px; } span { relleno: 5px; } tr:nth-child(n+2) &gt; td:nth-child(2) { texto-alineación: izquierda; } - tipo: custom:auto-entities tarjeta: tipo: Filtro de entidades: incluir: - entidad _id: binario_sensor.open_today_ - entidad_id: binario_sensor.open_demain - entidad_id: binario_sensor.vacances_schools_today - entidad_id: binario_sensor.vacances_scolaires_demain - entidad_id: sensor.debut_des_cursos_coralie_today_ - entity_id: sensor.debut_des_cursos_de_coralie_demain - entity_id: sensor.coralie_next_alarm - tipo: custom:auto-entities tarjeta: tipo: Filtro de entidades: incluir: - entidad _id: sensor.latest _mise_a_jour_de_pronote - tipo: tarjetas de pila vertical: - tipo: contenido de la reducción: &gt;-
          <div>Evaluaciones</div> {% set items = state_attr('sensor.pronote_xx_coralie_evaluaciones','evaluaciones')%}
          <table width='100%'>
            <tbody>
            {% para i en rango(0, items | count, 1) %}
            <tr><td width='10%'>{{ items[i].date.strftime("%d-%m") }}</td><td width='60%'>{{ items[i].subject }}</td><td width='30%'>
            {% conjunto de adquisiciones = elementos[i]. adquisiciones %} {% para j en rango(0, adquisiciones|count,1) %}{% if acquisitions[j].level == 'Muy buen dominio' %💚{% adquisiciones elif[j].level == 'Control satisfactorio' %🟢{% Elif Adquisiciones[j].level == "Comienzo de la maestría" %🟡{% adquisiciones elif[j].level == 'Maestría frágil' %🟡{% adquisiciones elif[j].level == 'Control insuficiente' %🟠{% de lo contrario %}?{% endif %}{% endfor %}</td></tr>
            {% endfor %}
          </tbody> </table>
        tarjeta_mod: estilo: .: | ha-card ha-markdown { relleno:0px } ha-card ha-markdown.no-header { relleno:10px } ha-markdown$: | h1 { peso de fuente: normal; tamaño de fuente: 24px; } div { color de fondo: rgb (100, 100, 100); relleno: 12px 12px; color: blanco; peso de la fuente:normal; tamaño de fuente:1.2em; radio frontera-arriba-izquierda: 5px; frontera-arriba-derecha-radio: 5px; } tabla{ frontera-colapso: colapso; peso de la fuente:normal; tamaño de fuente:1.2em; familia de fuentes: Roboto; anchura: auto; esbozo: 0px sólido #393c3d; margen máximo: 10px; } subtítulo { text-align: centro; peso de fuente: negrita; tamaño de fuente: 1.2em; } td { relleno: 0px 5px 0px 5px; Alineación de texto: izquierda; frontera inferior: 0px sólido #1 quater de 2020; } tr { borde inferior: 0px sólido #1 quater de 2020; Altura de la línea: 4px; } tr:nth-of-type(even) { color de fondo: rgb(54, 54, 54, 0.3); } tr:último de tipo { border-bottom: transparente; } marca { fondo: #009767; color: #222627; radio fronterizo: 10px; relleno: 5px; } span { fondo: #EC4B34; color: #222627; radio fronterizo: 10px; relleno: 5px; } span { relleno: 5px; } tr:nth-child(n+2) &gt; td:nth-child(2) { texto-alineación: izquierda; }