Kortelės stilius

„Dreame Vacuum Card“ natūraliai atitinka „Home Assistant“ numatytą temą. Visos vidinės komponentės, meniu ir išplanavimai automatiškai prisitaiko prie aktyvios „Home Assistant“ temos. Ji sklandžiai paveldi tiek Šviesią, tiek Tamsią režimo spalvas dinamiškai, todėl pasirinktinis stilius pagal įprastas sąlygas nėra būtinas.

Kuriant pasirinktą „Home Assistant“ temą estetikai pritaikyti, reikia perrašyti žemiau išvardytas išorines CSS savybes.

Žemėlapio stilius

Šie nustatymai veikia tik kortelės vartotojo sąsajos komponentus. Vidinių dulkių siurblio žemėlapio spalvų, pavyzdžiui, kambarių, takų ir sienų, pritaikymas tvarkomas Perrašyti spalvas skiltyje.

Kortelė taip pat naudoja vidinius nustatymus su --dvc- prefiksu. Tiesioginis vidinių nustatymų perrašymas nerekomenduojamas, nes jų elgsena gali keistis būsimuose atnaujinimuose. Vietoj to nukreipkite į žemiau išvardytus išorinius „Home Assistant“ temos nustatymus.

card-mod

card-mod papildinys yra aiškiai išjungtas ir nepalaikomas šioje kortelėje, siekiant užtikrinti stabilumą. Norint perrašyti CSS savybes, pateiktas šiame puslapyje, reikia naudoti pasirinktines Home Assistant temas.

Jei konkrečios vizualinės pakeitimas negali būti pasiektas per temas, pageidaujamo pakeitimo paaiškinimą kartu su priežastimis galima pateikti per Problemos ataskaita puslapį.

Fonai ir kraštinės

Šie nustatymai kontroliuoja pagrindinę kortelės struktūros išvaizdą.

Kintamasis	Aprašymas
--ha-card-background	Nustato pagrindinę kortelės fono spalvą.
--secondary-background-color	Naudojama antriniams paviršiams, perdangos fonams ir iškylančioms meniu.
--view-background	Pagrindinė prietaisų skydelio fondo spalva. Kortelė naudoja šią spalvą panel arba picture režime, kad nepriekaištingai susilietų.
--ha-card-border-radius	Nustato kortelės išorinių kampų apvalumą.
--ha-card-border-width	Kortelės kraštinės linijos storis.
--ha-card-border-color	Kortelės kraštinės spalva.
--divider-color	Vidinių sąrašų skirtukų ir atskyriklių spalva.
--ha-card-box-shadow	Pagrindiniam kortelės konteineriui taikoma dėžutės šešėlio spalva.
--ha-card-backdrop-filter	Leidžia pridėti foninius filtrus, tokius kaip blur, prie kortelės fono.

Tekstas ir tipografija

Šie nustatymai nurodo teksto spalvas, naudojamas visoje vartotojo sąsajoje.

Kintamasis	Aprašymas
--primary-text-color	Pagrindinė teksto spalva, naudojama pagrindiniams antraštėms, būsenos tekstui ir reikšmėms.
--secondary-text-color	Naudojama antram tekstui, detalioms būsenoms ir neaktyvių skirtukų etiketėms.
--disabled-text-color	Spalva, naudojama tekstui, kuris šiuo metu nepasiekiamas arba išjungtas.
--text-primary-color	Teksto spalva, esanti tiesiai ant pagrindinės spalvos mygtukų.

Piktogramos ir akcentai

Šie nustatymai tvarko sąveikos elementų, aktyvių būsenų ir piktogramų spalvinimą.

Kintamasis	Aprašymas
--primary-color	Pagrindinė akcentinė spalva aktyviems elementams, mygtukams, įkėlimo animacijoms ir pasirinktoms skirtukams.
--light-primary-color	Šviesesnė pagrindinės spalvos versija, naudojama užvedimo būsenoms arba aktyvių mygtukų fonui.
--accent-color	Alternatyvi akcentinė spalva, naudojama specifiniams vartotojo sąsajos akcentams.
--mdc-theme-on-primary	Teksto ar piktogramų spalva, dedama ant pagrindinės spalvos fono.
--paper-item-icon-color	Numatytoji spalva būsenos ir meniu piktogramoms.
--paper-item-icon-active-color	Spalva, pritaikyta piktogramoms, kai jų atitinkama būsena yra aktyvi.

Būsenos ir semantinės spalvos

Kortelė dinamiškai keičia spalvą pagal vakuumo būseną ir aktyvias pranešimus.

Kintamasis	Aprašymas
--success-color	Naudojama sėkmingoms operacijoms arba teigiamoms būsenoms, pvz., pilnai įkrauta.
--info-color	Naudojama informaciniams elementams ir standartiniams įspėjimams.
--warning-color	Naudojama įspėjimams, žemos baterijos būsenoms ar smulkioms problemoms.
--error-color	Naudojama kritinėms klaidoms, gedimams ir nepravažiuojamiems žemėlapio objektams.
--state-unavailable-color	Spalva, rodanti, kad vakuumas šiuo metu yra neprieinamas arba neprisijungęs.

Interaktyvūs elementai

Temos nustatymai, skirti konkrečiai vartotojo sąsajos komponentams, pvz., mygtukams, slankikliams ir įvedimo laukams.

Kintamasis	Aprašymas
--mdc-theme-surface	Paviršiaus spalva plūduriuojantiems meniu, išskleidžiamiesiems sąrašams ir iššokančioms kortelėms.
--mdc-button-raised-box-shadow	Šešėlis, pritaikytas pakeltų mygtukų gylio suteikimui.
--input-hover-line-color	Pabraukimo spalva, kai užvedama ant konkrečių įvedimo laukų.
--input-dropdown-icon-color	Žymeklio/rodyklės piktogramų spalva išskleidžiamųjų meniu viduje.
--scrollbar-thumb-color	Spalva, naudojama nuotolinio valdymo pulto valdiklio ir slankiklių nykštukui.
--rgb-primary-color	Pagrindinės spalvos RGB kableliu atskirtas variantas, naudojamas alfa skaidrumui taikyti.
--rgb-primary-text-color	Pagrindinės teksto spalvos RGB kableliu atskirtas variantas, naudojamas alfa skaidrumui taikyti.