I can't seem to access the alarm code field in order to style it. I've been trying for two days if anyone wants to take a shot at it.
#Anyone out there good with card_mod and shadow_roots? I'm trying to style an Alarmo card
bitter tartan
<h1 class="card-header">
<!--?lit$640837403$-->Security System
<ha-assist-chip filled="" style="--alarm-state-color:var(--state-alarm_control_panel-armed_home-color, var(--state-alarm_control_panel-active-color, var(--state-active-color)));" class=" armed_home " has-icon="" data-dashlane-shadowhost="true" data-dashlane-observed="true">
<ha-state-icon slot="icon" data-dashlane-shadowhost="true" data-dashlane-observed="true"></ha-state-icon>
</ha-assist-chip>
</h1>
<div id="armActions" class="actions">
<!--?lit$640837403$--><!---->
<mwc-button outlined="" data-dashlane-shadowhost="true" data-dashlane-observed="true">
<!--?lit$640837403$-->Disarm
</mwc-button>
<!---->
</div>
<!--?lit$640837403$-->
<ha-textfield id="alarmCode" type="password" data-dashlane-shadowhost="true" data-dashlane-observed="true"></ha-textfield>
<!--?lit$640837403$-->
<div id="keypad">
<!--?lit$640837403$--><!---->
<mwc-button outlined="" class=" numberkey " data-dashlane-shadowhost="true" data-dashlane-observed="true">
<!--?lit$640837403$-->1
</mwc-button>
<!----><!---->
<mwc-button outlined="" class=" numberkey " data-dashlane-shadowhost="true" data-dashlane-observed="true">
<!--?lit$640837403$-->2
</mwc-button>
<!----><!---->
</div>
<card-mod slot="none" card-mod-type="card" style="display: none;">
<!---->
<style>
<!---->ha-textfield $: |
label {
border: 3px solid red !important;
}
<!---->
</style>
</card-mod>
</ha-card>```This is my style
card_mod:
debug: true
style: |
ha-textfield $: |
label {
border: 3px solid red !important;
}
I'm trying to put a red border around the label element which live inside the ha-textfield shadow-root. For some reason card_mod keeps adding a new element to the end of the ha-textfield which does contain the correct border style, but it does not appear to be applied to the label as intended. I've tried many different selectors in an attempt to access the shadow-root but either I don't undertand how it works, or something else is up.
simple arch
I haven't tried looking at it yet, but I something in noticed in your code that might be worth trying. Try changing style: | to style: (remove the pipe symbol on that line).
bitter tartan
I haven't tried looking at it yet, but I something in noticed in your code that ...
I've been playing with it. This is what have now.
.: |
ha-card {
--paper-input-container-shared-input-style_-_font-size: 2.5rem;
--keypad-font-size: 2.5rem;
--mdc-typography-button-font-size: 1.5rem;
--paper-font-subhead_-_font-size: 1.5rem;
--card-background-color: black;
--mdc-typography-font-family: 'Tungsten-Book';
--mdc-text-field-ink-color: #8FCFCA;
--mdc-typography-subtitle1-font-size: 3rem;
}
ha-card$: |
h1.card-header {
display: none !important;
}```
The first selector .: is working and the styles are being applied to the ha-card, but the second selector ha-card$ is not working. I'm trying to hide the header. I know there is another way of doing it, but I'm trying to wrap my head around this shadow-root thing, because I need to use it elsewhere.FYI I got this working. Don't spend any time on it.
simple arch
FYI I got this working. Don't spend any time on it.
What was the syntax to get it all to work?
bitter tartan
FYI I got this working. Don't spend any time on it.
I'm still tweaking it, but this is what I have now. Chat-GPT was able to give me some tips. I have a paid account though my work, so I get to use some of the more advanced LLM.
debug: true
style:
.: |
ha-card {
--card-background-color: black;
--mdc-typography-font-family: 'Tungsten-Book';
justify-items: center;
}
#keypad {
width: 311px;
/*Not used */
/*max-width: 500px !important;*/
/*position: absolute;*/
/*top: 107px;*/
/*left: -5px;*/
}
alarmo-button {
/*padding: 19px !important;*/
margin: 4px;
/*width: 30%;*/
/*box-sizing: border-box;*/
height: 74px;
border-radius: 5px;
/*border: "3px solid #8FCFCA"; */
/*align-items: center;*/
align-content: center;
/*justify-content: center;*/
/*background-color: green; */
/*font-family: 'Tungsten-Book';*/
--mdc-typography-button-font-size: 2.5rem;
}
alarmo-button.numberKey {
/* border-color: rgba(100,100,100,.1); */
/* border-width: 2px; */
/* border-style: solid; */
border: 3px solid #8FCFCA;
}
alarmo-button > ha-icon {
/*--content-scale: 1.5; */
--mdc-icon-size: 35px;
}
ha-textfield {
margin: 0px !important;
margin-left: 0px !important;
width: 150px !important;
max-width: unset !important;
}
div.header > div.summary
{
display: none; /*Hide alarmo logo */
}
div.header > div.icon
{
padding-right: unset;
}
```ha-textfield$: |
label {
border: 3px solid red !important;
--mdc-text-field-fill-color: black; /*code box background */
}
.mdc-line-ripple, .mdc-floating-label
{
display: none;
pointer-events: none; /*prevents clicking */
}
input
{
pointer-events: none !important;
/*border: 1px solid red !important;*/
letter-spacing: 15px;
--mdc-typography-subtitle1-letter-spacing: 15px;
--mdc-typography-subtitle1-font-size: 5rem; /* code text size */
--mdc-text-field-ink-color: #8FCFCA; /*code box ink color */
}
input:focus {
visibility: hidden;
}