(continuation of this post)
Additional styling:
Create a new view with a “panel mode”:
title: mdc_height_transp
path: mdc_height_transp
badges: []
cards:
- type: entities
entities:
- entity: input_number.test_number_2
name: default
- type: section
- entity: input_number.test_number_2
name: compact + no right padding
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.: |
:host {
--text-field-padding: 0px 0px 0px 16px;
}
- entity: input_number.test_number_2
name: + transparent
card_mod:
style:
hui-generic-entity-row $: |
.info {
text-overflow: unset !important;
white-space: unset !important;
}
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.: |
:host {
--mdc-text-field-idle-line-color: transparent;
--mdc-text-field-hover-line-color: transparent;
--mdc-theme-primary: transparent;
--text-field-padding: 0px 0px 0px 16px;
--mdc-text-field-fill-color: var(--card-background-color);
}
- entity: input_number.test_number_2
name: + transparent + underline
card_mod:
style:
hui-generic-entity-row $: |
.info {
text-overflow: unset !important;
white-space: unset !important;
}
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.: |
:host {
--text-field-padding: 0px 0px 0px 16px;
--mdc-text-field-fill-color: var(--card-background-color);
}
- entity: input_number.test_number_2
name: + transparent + border
card_mod:
style:
hui-generic-entity-row $: |
.info {
text-overflow: unset !important;
white-space: unset !important;
}
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
border: 1px solid rgba(127,127,127,0.5);
border-radius: 4px !important;
}
.: |
:host {
--mdc-text-field-idle-line-color: transparent;
--mdc-text-field-hover-line-color: transparent;
--mdc-theme-primary: transparent;
--text-field-padding: 0px 0px 0px 16px;
--mdc-text-field-fill-color: var(--card-background-color);
}
- entity: input_number.test_number_2
name: + transparent + no ripple
card_mod:
style:
hui-generic-entity-row $: |
.info {
text-overflow: unset !important;
white-space: unset !important;
}
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.mdc-text-field__ripple {
display: none;
}
.: |
:host {
--mdc-text-field-idle-line-color: transparent;
--mdc-text-field-hover-line-color: transparent;
--mdc-theme-primary: transparent;
--text-field-padding: 0px 0px 0px 16px;
--mdc-text-field-fill-color: var(--card-background-color);
}
- entity: input_number.test_number_2
name: + transparent + border + no ripple
card_mod:
style:
hui-generic-entity-row $: |
.info {
text-overflow: unset !important;
white-space: unset !important;
}
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
border: 1px solid rgba(127,127,127,0.5);
border-radius: 4px !important;
}
.mdc-text-field__ripple {
display: none;
}
.: |
:host {
--mdc-text-field-idle-line-color: transparent;
--mdc-text-field-hover-line-color: transparent;
--mdc-theme-primary: transparent;
--text-field-padding: 0px 0px 0px 16px;
--mdc-text-field-fill-color: var(--card-background-color);
}
- entity: input_number.test_number_2
name: + transparent + border on hover + no ripple
card_mod:
style:
hui-generic-entity-row $: |
.info {
text-overflow: unset !important;
white-space: unset !important;
}
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
border-radius: 4px !important;
border: 1px solid transparent;
}
.mdc-text-field:hover {
border: 1px solid rgba(127,127,127,0.5);
}
.mdc-text-field__ripple {
display: none;
}
.: |
:host {
--mdc-text-field-idle-line-color: transparent;
--mdc-text-field-hover-line-color: transparent;
--mdc-theme-primary: transparent;
--text-field-padding: 0px 0px 0px 16px;
--mdc-text-field-fill-color: var(--card-background-color);
}
- entity: input_number.test_number_2
name: + transparent + shifted to right
card_mod:
style:
hui-generic-entity-row $: |
.info {
text-overflow: unset !important;
white-space: unset !important;
}
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.: |
:host {
--mdc-text-field-idle-line-color: transparent;
--mdc-text-field-hover-line-color: transparent;
--mdc-theme-primary: transparent;
--text-field-padding: 0px 0px 0px 16px;
--mdc-text-field-fill-color: var(--card-background-color);
margin-right: -16px;
}
- type: section
- &ref_sensor_row
entity: sensor.processor_use
name: sensor
#########################################################################################
- type: section
label: with UoM
- entity: input_number.test_value_uom
name: compact
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
- entity: input_number.test_value_uom
name: + transparent
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.: |
:host {
--mdc-text-field-idle-line-color: transparent;
--mdc-text-field-hover-line-color: transparent;
--mdc-theme-primary: transparent;
--mdc-text-field-fill-color: var(--card-background-color);
}
- entity: input_number.test_value_uom
name: compact + no right padding
card_mod:
style:
hui-generic-entity-row $: |
.info {
text-overflow: unset !important;
white-space: unset !important;
}
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.: |
:host {
--text-field-padding: 0px 0px 0px 16px;
}
- entity: input_number.test_value_uom
name: compact + no UoM-paddings
card_mod:
style:
hui-generic-entity-row $: |
.info {
text-overflow: unset !important;
white-space: unset !important;
}
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.: |
:host {
--text-field-suffix-padding-left: 0px;
--text-field-suffix-padding-right: 0px;
}
- entity: input_number.test_value_uom
name: + no right padding
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.: |
:host {
--text-field-padding: 0px 0px 0px 16px;
--text-field-suffix-padding-left: 0px;
--text-field-suffix-padding-right: 0px;
}
- entity: input_number.test_value_uom
name: + transparent
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.: |
:host {
--mdc-text-field-idle-line-color: transparent;
--mdc-text-field-hover-line-color: transparent;
--mdc-theme-primary: transparent;
--mdc-text-field-fill-color: var(--card-background-color);
--text-field-padding: 0px 0px 0px 16px;
--text-field-suffix-padding-left: 0px;
--text-field-suffix-padding-right: 0px;
}
- entity: input_number.test_value_uom
name: + underline
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.: |
:host {
--mdc-text-field-fill-color: var(--card-background-color);
--text-field-padding: 0px 0px 0px 16px;
--text-field-suffix-padding-left: 0px;
--text-field-suffix-padding-right: 0px;
}
- entity: input_number.test_value_uom
name: + border + no underline + custom UoM-paddings
card_mod:
style:
hui-generic-entity-row $: |
.info {
text-overflow: unset !important;
white-space: unset !important;
font-size: 10px;
}
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
border: 1px solid rgba(127,127,127,0.5);
border-radius: 4px !important;
}
.: |
:host {
--mdc-text-field-idle-line-color: transparent;
--mdc-text-field-hover-line-color: transparent;
--mdc-theme-primary: transparent;
--mdc-text-field-fill-color: var(--card-background-color);
--text-field-padding: 0px 0px 0px 16px;
--text-field-suffix-padding-left: 0px;
--text-field-suffix-padding-right: 8px;
}
- type: section
- *ref_sensor_row
######################################################################################################################
- type: entities
entities:
- entity: input_select.test_value
name: default
- type: section
- entity: input_select.test_value
name: compact
card_mod:
style:
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
.mdc-select__selected-text-container {
align-self: end;
}
.: |
ha-select {
height: 40px;
}
- entity: input_select.test_value
name: compact + transparent
card_mod:
style:
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
.mdc-select__selected-text-container {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.: |
ha-select {
height: 40px;
}
:host {
--mdc-select-fill-color: transparent;
}
- entity: input_select.test_value
name: compact + transparent + underline
card_mod:
style:
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
.mdc-select__selected-text-container {
align-self: end;
}
.: |
ha-select {
height: 40px;
}
:host {
--mdc-select-fill-color: transparent;
}
- entity: input_select.test_value
name: compact + transparent + border
card_mod:
style:
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
border: 1px solid rgba(127,127,127,0.5);
border-radius: 8px !important;
}
.mdc-select__selected-text-container {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.: |
ha-select {
height: 40px;
}
:host {
--mdc-select-fill-color: transparent;
}
- entity: input_select.test_value
name: compact + transparent + no ripple
card_mod:
style:
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
.mdc-select__selected-text-container {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.mdc-select__ripple {
display: none !important;
}
.: |
ha-select {
height: 40px;
}
:host {
--mdc-select-fill-color: transparent;
}
- entity: input_select.test_value
name: compact + transparent + border + no ripple
card_mod:
style:
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
border: 1px solid rgba(127,127,127,0.5);
border-radius: 8px !important;
}
.mdc-select__selected-text-container {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.mdc-select__ripple {
display: none !important;
}
.: |
ha-select {
height: 40px;
}
:host {
--mdc-select-fill-color: transparent;
}
- entity: input_select.test_value
name: compact + transparent + border on hover + no ripple
card_mod:
style:
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
border-radius: 8px !important;
border: 1px solid transparent;
}
.mdc-select__anchor:hover {
border: 1px solid rgba(127,127,127,0.5);
}
.mdc-select__selected-text-container {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.mdc-select__ripple {
display: none !important;
}
.: |
ha-select {
height: 40px;
}
:host {
--mdc-select-fill-color: transparent;
}
- sun.sun
- type: section
- sun.sun
- type: section
label: '-'
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- type: section
- sun.sun
######################################################################################################################
- type: entities
entities:
- entity: input_text.test_text
name: default
- type: section
- entity: input_text.test_text
name: compact
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.mdc-text-field__input {
align-self: end;
}
.: |
ha-textfield {
height: 40px;
}
- entity: input_text.test_text
name: compact + transparent
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.mdc-text-field__input {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.: |
ha-textfield {
height: 40px;
}
:host {
--mdc-text-field-fill-color: transparent;
}
- entity: input_text.test_text
name: compact + transparent + underline
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.mdc-text-field__input {
align-self: end;
}
.: |
ha-textfield {
height: 40px;
}
:host {
--mdc-text-field-fill-color: transparent;
}
- entity: input_text.test_text
name: compact + transparent + border
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
border: 1px solid rgba(127,127,127,0.5);
border-radius: 8px !important;
}
.mdc-text-field__input {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.: |
ha-textfield {
height: 40px;
}
:host {
--mdc-text-field-fill-color: transparent;
}
- entity: input_text.test_text
name: compact + transparent + no ripple
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.mdc-text-field__input {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.mdc-text-field__ripple {
display: none !important;
}
.: |
ha-textfield {
height: 40px;
}
:host {
--mdc-text-field-fill-color: transparent;
}
- entity: input_text.test_text
name: compact + transparent + border + no ripple
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
border: 1px solid rgba(127,127,127,0.5);
border-radius: 8px !important;
}
.mdc-text-field__input {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.mdc-text-field__ripple {
display: none !important;
}
.: |
ha-textfield {
height: 40px;
}
:host {
--mdc-text-field-fill-color: transparent;
}
- entity: input_text.test_text
name: compact + transparent + border on hover + no ripple
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
border-radius: 8px !important;
border: 1px solid transparent;
}
.mdc-text-field:hover {
border: 1px solid rgba(127,127,127,0.5);
}
.mdc-text-field__input {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.mdc-text-field__ripple {
display: none !important;
}
.: |
ha-textfield {
height: 40px;
}
:host {
--mdc-text-field-fill-color: transparent;
}
- sun.sun
- type: section
- sun.sun
- type: section
label: '-'
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- type: section
- sun.sun
- type: entities
entities:
- entity: input_number.test_number_2
name: default
- type: section
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- type: section
- sun.sun
- type: section
label: '-'
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- type: section
- sun.sun
The card has 4 columns:
– 4th - contains “sun” entity rows and used as a “scale”;
– 1st - contains rows for input_number (“box mode”);
– 2nd - contains rows for input_select;
– 3rd - contains rows for input_text.
Note: the card does not contain rows for input_datetime - just because my screen may show 4 columns maximum (3 for helpers, 1 for a “scale”); examples for input_datetime will be considered later.
What we can see here:
1.All rows have same height (except 1st rows in each column which are input_number, input_select & input_text rows with a default height) - since every input_number, input_select & input_text has a customized height (see “Styling a height” topic above).
2.All other input_number, input_select & input_text rows have custom styles as described below.
3.Regarding the right padding for a value:
Chrome:
Only the last row for input_number w/o UoM has a same right padding as a conventional sensor row:
This right offset is used for a “up/down” control:
Unfortunately this looks totally differently on MacOS & iOS - compare it by yourself…
Alternatively - use a style to display a field’s boundaries since the right boundary has the same right padding as a conventional sensor row:
You can use styles Nos 1, 4, 6.
Firefox:
Since the “up/down” control is always displayed - choose any style (Nos 1…8).
4.Regarding the right padding for a UoM, horizontal spacing between a value & UoM:
Chrome:
You can use styles Nos 5…8.
Firefox:
Same recommendation - use styles Nos 5…8 if you don’t hate these wide fields, otherwise try to decrease a field’s width - or do not use Firefox…
Custom styles for input_number w/o UoM:
1.Custom height + removed right padding.
2.Same as (1) + transparent (removed underline, transparent background).
3.Same as (2) + default underline.
4.Same as (2) + border.
5.Same as (2) + removed “ripple” effect.
6.Same as (5) + border.
7.Same as (5) + border on hover.
8.Same as (2) + field shifted to right.
Styles for input_number with UoM:
1.Custom height.
2.Same as (1) + transparent (removed underline, transparent background).
3.Same as (1) + removed right padding.
4.Same as (1) + removed paddings for UoM.
5.Same as (4) + removed right padding.
6.Same as (5) + transparent (removed underline, transparent background).
7.Same as (6) + underline.
8.Same as (5) + border + custom paddings for UoM.
Styles for input_select:
1.Custom height, compacted name (label) and value.
2.Same as (1) + transparent (removed underline, transparent background).
3.Same as (2) + default underline.
4.Same as (2) + border.
5.Same as (2) + removed “ripple” effect.
6.Same as (5) + border.
7.Same as (5) + border on hover.
Same for input_text:
Notes:
1.This style is used to wrap long names for input_number rows and may be omitted:
hui-generic-entity-row $: |
.info {
text-overflow: unset !important;
white-space: unset !important;
}
2.These test entities are used for this demo:
– input_number.test_number_2 - any helper in a “box” mode;
– input_number.test_value_uom - any helper in a “box” mode with UoM;
– input_select.test_value - any helper;
– input_text.test_text - any helper;
– sensor.processor_use - any sensor (better with UoM) (here I am using one from a “sysmonitor” platform).
Chosen styles may be specified in card-mod-theme, check the example below:
card-mod-row-yaml: |
hui-generic-entity-row:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
border: 1px solid rgba(127,127,127,0.5);
border-radius: 4px !important;
}
.mdc-text-field__input {
{% if config is defined %}
{% if config.entity is defined %}
{% if config.entity.startswith('input_text.') %}
align-self: end;
{% endif %}
{% endif %}
{% endif %}
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
border: 1px solid rgba(127,127,127,0.5);
border-radius: 4px !important;
}
.mdc-select__selected-text-container {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.: |
ha-select {
height: 40px;
--mdc-select-fill-color: transparent;
}
ha-textfield {
height: 40px;
--text-field-padding: 0px 0px 0px 16px;
--text-field-suffix-padding-left: 0px;
--text-field-suffix-padding-right: 8px;
--mdc-text-field-fill-color: transparent;
}
(continuation in this post)