Various RTL fixes (#19495)

* Various RTL fixes

* Additional RTL

* Additional fixes

* Revert ha-dialog

* Improve margin-title

* Additional fixes

* Additional fixes

* Fix prettier

* More fixes

* Additional fixes

* Fix prettier

* Fix prettier again

* Additional updates

* Additional fixes

* Final fixes (left only)
This commit is contained in:
Yosi Levy 2024-01-26 18:15:27 +02:00 committed by GitHub
parent a566479ddc
commit 97652bd2f6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
91 changed files with 274 additions and 42 deletions

View File

@ -243,6 +243,8 @@ export class HassioAddonStore extends LitElement {
}
.advanced a {
margin-left: 0.5em;
margin-inline-start: 0.5em;
margin-inline-end: initial;
color: var(--primary-color);
}
`;

View File

@ -1188,11 +1188,13 @@ class HassioAddonInfo extends LitElement {
}
.addon-header {
padding-left: 8px;
padding-inline-start: 8px;
padding-inline-end: initial;
font-size: 24px;
color: var(--ha-card-header-color, --primary-text-color);
}
.addon-version {
float: right;
float: var(--float-end);
font-size: 15px;
vertical-align: middle;
}

View File

@ -395,6 +395,8 @@ export class HassioBackups extends LitElement {
.selected-txt {
font-weight: bold;
padding-left: 16px;
padding-inline-start: 16px;
padding-inline-end: initial;
color: var(--primary-text-color);
}
.table-header .selected-txt {
@ -405,6 +407,8 @@ export class HassioBackups extends LitElement {
}
.header-toolbar .header-btns {
margin-right: -12px;
margin-inline-end: -12px;
margin-inline-start: initial;
}
.header-btns > mwc-button,
.header-btns > ha-icon-button {

View File

@ -60,6 +60,10 @@ class HassioCardContent extends LitElement {
static get styles(): CSSResultGroup {
return css`
:host {
direction: ltr;
}
ha-svg-icon {
margin-right: 24px;
margin-left: 8px;

View File

@ -316,6 +316,8 @@ export class SupervisorBackupContent extends LitElement {
display: flex;
flex-direction: column;
margin-left: 30px;
margin-inline-start: 30px;
margin-inline-end: initial;
}
ha-formfield.password {
display: block;
@ -324,6 +326,8 @@ export class SupervisorBackupContent extends LitElement {
.backup-types {
display: flex;
margin-left: -13px;
margin-inline-start: -13px;
margin-inline-end: initial;
}
.sub-header {
margin-top: 8px;

View File

@ -37,6 +37,8 @@ class SupervisorFormfieldLabel extends LitElement {
}
.label {
margin-right: 4px;
margin-inline-end: 4px;
margin-inline-start: initial;
}
.version {
color: var(--secondary-text-color);
@ -45,6 +47,8 @@ class SupervisorFormfieldLabel extends LitElement {
max-height: 22px;
max-width: 22px;
margin-right: 8px;
margin-inline-end: 8px;
margin-inline-start: initial;
}
`;
}

View File

@ -138,6 +138,9 @@ class HassioCreateBackupDialog extends LitElement {
haStyle,
haStyleDialog,
css`
:host {
direction: var(--direction);
}
ha-circular-progress {
display: block;
text-align: center;

View File

@ -597,6 +597,8 @@ export class DialogHassioNetwork
mwc-button.scan {
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
}
.container {

View File

@ -195,6 +195,8 @@ class HassioRepositoriesDialog extends LitElement {
}
mwc-button {
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
}
ha-circular-progress {
display: block;

View File

@ -360,7 +360,7 @@ class HassioIngressView extends LitElement {
}
.main-title {
margin: 0 0 0 24px;
margin: var(--margin-title);
line-height: 20px;
flex-grow: 1;
}

View File

@ -93,6 +93,8 @@ export class HaAuthFlow extends LitElement {
<style>
ha-auth-flow .store-token {
margin-left: -16px;
margin-inline-start: -16px;
margin-inline-end: initial;
}
a.forgot-password {
color: var(--primary-color);

View File

@ -34,4 +34,8 @@ export function setDirectionStyles(direction: string, element: LitElement) {
"--float-end",
direction === "ltr" ? "right" : "left"
);
element.style.setProperty(
"--margin-title",
direction === "ltr" ? "var(--margin-title-ltr)" : "var(--margin-title-rtl)"
);
}

View File

@ -117,7 +117,6 @@ class HaAlert extends LitElement {
margin-right: 0;
margin-inline-start: 8px;
margin-inline-end: 0;
direction: var(--direction);
}
.title {
margin-top: 2px;

View File

@ -1,4 +1,4 @@
import { mdiChevronRight, mdiSofa } from "@mdi/js";
import { mdiSofa } from "@mdi/js";
import { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event";
@ -6,6 +6,7 @@ import { showAreaFilterDialog } from "../dialogs/area-filter/show-area-filter-di
import { HomeAssistant } from "../types";
import "./ha-svg-icon";
import "./ha-textfield";
import "./ha-icon-next";
export type AreaFilterValue = {
hidden?: string[];
@ -53,11 +54,10 @@ export class HaAreaPicker extends LitElement {
<ha-svg-icon slot="graphic" .path=${mdiSofa}></ha-svg-icon>
<span>${this.label}</span>
<span slot="secondary">${description}</span>
<ha-svg-icon
<ha-icon-next
slot="meta"
.label=${this.hass.localize("ui.common.edit")}
.path=${mdiChevronRight}
></ha-svg-icon>
></ha-icon-next>
</ha-list-item>
`;
}

View File

@ -37,6 +37,10 @@ export class HaCheckListItem extends CheckListItemBase {
.mdc-deprecated-list-item__graphic {
margin-top: var(--check-list-item-graphic-margin-top);
}
:host([graphic="icon"]) .mdc-deprecated-list-item__graphic {
margin-inline-start: 0;
margin-inline-end: var(--mdc-list-item-graphic-margin, 32px);
}
`,
];
}

View File

@ -168,12 +168,18 @@ export class HaExpansionPanel extends LitElement {
}
.summary-icon {
transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
direction: var(--direction);
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
}
:host([leftchevron]) .summary-icon {
margin-left: 0;
margin-right: 8px;
margin-inline-start: 0;
margin-inline-end: 8px;
}
#summary {
@ -188,11 +194,6 @@ export class HaExpansionPanel extends LitElement {
outline: none;
}
.summary-icon {
transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
direction: var(--direction);
}
.summary-icon.expanded {
transform: rotate(180deg);
}

View File

@ -45,6 +45,10 @@ export class HaHeaderBar extends LitElement {
.mdc-top-app-bar__section.mdc-top-app-bar__section--align-end {
flex: none;
}
.mdc-top-app-bar__title {
padding-inline-start: 20px;
padding-inline-end: initial;
}
`,
];
}

View File

@ -42,6 +42,8 @@ class HaLabel extends LitElement {
::slotted([slot="icon"]) {
margin-right: 8px;
margin-left: -8px;
margin-inline-start: -8px;
margin-inline-end: 8px;
display: flex;
color: var(--ha-label-icon-color);
}

View File

@ -132,6 +132,8 @@ class HaMultiTextField extends LitElement {
}
ha-button {
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
}
`,
];

View File

@ -818,6 +818,8 @@ export class HaServiceControl extends ReorderModeMixin(LitElement) {
}
ha-checkbox {
margin-left: -16px;
margin-inline-start: -16px;
margin-inline-end: initial;
}
.help-icon {
color: var(--secondary-text-color);
@ -827,6 +829,11 @@ export class HaServiceControl extends ReorderModeMixin(LitElement) {
display: flex;
align-items: center;
padding-right: 2px;
padding-inline-end: 2px;
padding-inline-start: initial;
}
.description p {
direction: ltr;
}
`;
}

View File

@ -23,6 +23,10 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase {
var(--mdc-theme-primary)
);
}
.mdc-top-app-bar__title {
padding-inline-start: 20px;
padding-inline-end: initial;
}
`,
];
}

View File

@ -320,6 +320,10 @@ export class TopAppBarBaseBase extends BaseElement {
height: 100%;
overflow: auto;
}
.mdc-top-app-bar__title {
padding-inline-start: 20px;
padding-inline-end: initial;
}
`,
];
}

View File

@ -318,10 +318,6 @@ class DialogMediaManage extends LitElement {
display: block;
}
mwc-list {
direction: ltr;
}
.danger {
--mdc-theme-primary: var(--error-color);
}

View File

@ -667,6 +667,8 @@ export class HatScriptGraph extends LitElement {
}
.parent {
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
margin-top: 16px;
}
.error {

View File

@ -51,6 +51,8 @@ class EntityPreviewRow extends LitElement {
.name {
margin-left: 16px;
margin-right: 8px;
margin-inline-start: 16px;
margin-inline-end: 8px;
flex: 1 1 30%;
}
.value {

View File

@ -126,6 +126,8 @@ class StepFlowCreateEntry extends LitElement {
}
.buttons > *:last-child {
margin-left: auto;
margin-inline-start: auto;
margin-inline-end: initial;
}
@media all and (max-width: 450px), all and (max-height: 500px) {
.device {

View File

@ -74,6 +74,8 @@ class MoreInfoDatetime extends LitElement {
}
ha-date-input + ha-time-input {
margin-left: 4px;
margin-inline-start: 4px;
margin-inline-end: initial;
}
`;
}

View File

@ -86,6 +86,8 @@ class MoreInfoInputDatetime extends LitElement {
}
ha-date-input + ha-time-input {
margin-left: 4px;
margin-inline-start: 4px;
margin-inline-end: initial;
}
`;
}

View File

@ -261,6 +261,8 @@ class MoreInfoMediaPlayer extends LitElement {
.browse-media-icon {
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
}
`;
}

View File

@ -330,6 +330,8 @@ class MoreInfoWeather extends LitElement {
ha-svg-icon {
color: var(--paper-item-icon-color);
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
}
mwc-tab-bar {
@ -346,10 +348,15 @@ class MoreInfoWeather extends LitElement {
height: 32px;
align-items: center;
}
.flex > div:last-child {
direction: ltr;
}
.main {
flex: 1;
margin-left: 24px;
margin-inline-start: 24px;
margin-inline-end: initial;
}
.temp,

View File

@ -143,7 +143,7 @@ class HassSubpage extends LitElement {
}
.main-title {
margin: 0 0 0 24px;
margin: var(--margin-title);
line-height: 20px;
flex-grow: 1;
}

View File

@ -302,7 +302,7 @@ class HassTabsSubpage extends LitElement {
max-height: var(--header-height);
line-height: 20px;
color: var(--sidebar-text-color);
margin: var(--main-title-margin, 0 0 0 24px);
margin: var(--main-title-margin, var(--margin-title));
}
.content {
@ -312,6 +312,8 @@ class HassTabsSubpage extends LitElement {
);
margin-left: env(safe-area-inset-left);
margin-right: env(safe-area-inset-right);
margin-inline-start: env(safe-area-inset-left);
margin-inline-end: env(safe-area-inset-right);
height: calc(100% - 1px - var(--header-height));
height: calc(
100% - 1px - var(--header-height) - env(safe-area-inset-bottom)

View File

@ -241,7 +241,7 @@ class DialogCalendarEventDetail extends LitElement {
ha-svg-icon {
width: 40px;
margin-right: 8px;
margin-inline-end: 16px;
margin-inline-end: 8px;
margin-inline-start: initial;
direction: var(--direction);
vertical-align: top;

View File

@ -610,6 +610,8 @@ class DialogCalendarEventEditor extends LitElement {
}
ha-time-input {
margin-left: 16px;
margin-inline-start: 16px;
margin-inline-end: initial;
}
ha-recurrence-rule-editor {
display: block;
@ -633,7 +635,7 @@ class DialogCalendarEventEditor extends LitElement {
ha-svg-icon {
width: 40px;
margin-right: 8px;
margin-inline-end: 16px;
margin-inline-end: 8px;
margin-inline-start: initial;
direction: var(--direction);
vertical-align: top;

View File

@ -275,6 +275,8 @@ export class HaConfigApplicationCredentials extends LitElement {
}
ha-button-menu {
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
}
`;
}

View File

@ -222,6 +222,8 @@ export class HaServiceAction extends LitElement implements ActionElement {
}
ha-checkbox {
margin-left: -16px;
margin-inline-start: -16px;
margin-inline-end: initial;
}
.checkbox-spacer {
width: 32px;

View File

@ -157,6 +157,8 @@ export class HaConversationTrigger
}
mwc-button {
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
}
ha-textfield {
display: block;

View File

@ -191,9 +191,13 @@ export class CloudTTSPref extends LitElement {
}
.row > *:first-child {
margin-right: 8px;
margin-inline-end: 8px;
margin-inline-start: initial;
}
.row > *:last-child {
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
}
.card-actions {
display: flex;

View File

@ -246,6 +246,8 @@ export class HaDeviceEntitiesCard extends LitElement {
}
ha-icon {
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
}
.entity-id {
color: var(--secondary-text-color);

View File

@ -605,6 +605,8 @@ export class HaConfigDeviceDashboard extends LitElement {
css`
ha-button-menu {
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
}
.clear {
color: var(--primary-color);

View File

@ -988,6 +988,7 @@ export class HaConfigEntities extends LitElement {
font-weight: bold;
padding-left: 16px;
padding-inline-start: 16px;
padding-inline-end: initial;
direction: var(--direction);
}
.table-header .selected-txt {
@ -999,6 +1000,7 @@ export class HaConfigEntities extends LitElement {
.header-toolbar .header-btns {
margin-right: -12px;
margin-inline-end: -12px;
margin-inline-start: initial;
direction: var(--direction);
}
.header-btns {
@ -1010,11 +1012,14 @@ export class HaConfigEntities extends LitElement {
}
ha-button-menu {
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
}
.clear {
color: var(--primary-color);
padding-left: 8px;
padding-inline-start: 8px;
padding-inline-end: initial;
text-transform: uppercase;
direction: var(--direction);
}

View File

@ -192,6 +192,8 @@ class HaCounterForm extends LitElement {
}
.row div {
margin-left: 16px;
margin-inline-start: 16px;
margin-inline-end: initial;
}
ha-textfield {
display: block;

View File

@ -231,6 +231,8 @@ class HaInputSelectForm extends LitElement {
}
mwc-button {
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
}
ha-textfield {
display: block;
@ -247,6 +249,8 @@ class HaInputSelectForm extends LitElement {
cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
padding-right: 12px;
padding-inline-end: 12px;
padding-inline-start: initial;
}
.handle ha-svg-icon {
pointer-events: none;

View File

@ -720,6 +720,8 @@ class AddIntegrationDialog extends LitElement {
margin: 0;
margin-bottom: 8px;
margin-left: 48px;
margin-inline-start: 48px;
margin-inline-end: initial;
padding: 24px 24px 0 24px;
color: var(--mdc-dialog-heading-ink-color, rgba(0, 0, 0, 0.87));
font-size: var(--mdc-typography-headline6-font-size, 1.25rem);

View File

@ -1420,8 +1420,12 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
.message div {
flex: 1;
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
padding-top: 2px;
padding-right: 2px;
padding-inline-end: 2px;
padding-inline-start: initial;
overflow-wrap: break-word;
display: -webkit-box;
-webkit-box-orient: vertical;

View File

@ -341,6 +341,8 @@ export class HaIntegrationCard extends LitElement {
color: var(--text-primary-color);
padding: 4px;
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
}
.icon.cloud {
background: var(--info-color);

View File

@ -227,6 +227,8 @@ export class MQTTConfigPanel extends LitElement {
@media screen and (max-width: 600px) {
ha-select {
margin-left: 0px;
margin-inline-start: 0px;
margin-inline-end: initial;
margin-top: 8px;
}
ha-textfield {

View File

@ -226,6 +226,8 @@ class MqttSubscribeCard extends LitElement {
ha-select {
margin-left: 0px;
margin-top: 8px;
margin-inline-start: 0px;
margin-inline-end: initial;
}
ha-textfield {
flex: auto;

View File

@ -255,6 +255,8 @@ class ZHAAddDevicesPage extends LitElement {
.search-button {
margin-top: 16px;
margin-left: 16px;
margin-inline-start: 16px;
margin-inline-end: initial;
}
.help-text {
color: grey;

View File

@ -851,6 +851,8 @@ class DialogZWaveJSAddNode extends LitElement {
.select-inclusion .outline:nth-child(2) {
margin-left: 16px;
margin-inline-start: 16px;
margin-inline-end: initial;
}
.select-inclusion .outline {
@ -869,6 +871,8 @@ class DialogZWaveJSAddNode extends LitElement {
.select-inclusion .outline:nth-child(2) {
margin-left: 0;
margin-inline-start: 0;
margin-inline-end: initial;
margin-top: 16px;
}
}

View File

@ -239,6 +239,8 @@ export class HaConfigLogs extends LitElement {
search-input.header {
--mdc-ripple-color: transparant;
margin-left: -16px;
margin-inline-start: -16px;
margin-inline-end: initial;
}
.content {
direction: ltr;

View File

@ -563,6 +563,8 @@ export class HassioNetwork extends LitElement {
mwc-button.scan {
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
}
ha-expansion-panel {
--expansion-panel-summary-padding: 0 16px;

View File

@ -292,7 +292,12 @@ class DialogUserDetail extends LitElement {
margin-top: 4px;
}
.badge-container > * {
margin: 4px 4px 4px 0;
margin-top: 4px;
margin-bottom: 4px;
margin-right: 4px;
margin-left: 0;
margin-inline-end: 4px;
margin-inline-start: 0;
}
.state {
background-color: rgba(var(--rgb-primary-text-color), 0.15);
@ -303,6 +308,8 @@ class DialogUserDetail extends LitElement {
}
.state:not(:first-child) {
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
}
.row {
display: flex;
@ -310,6 +317,8 @@ class DialogUserDetail extends LitElement {
}
ha-help-tooltip {
margin-left: 4px;
margin-inline-start: 4px;
margin-inline-end: initial;
position: relative;
}
`,

View File

@ -385,6 +385,8 @@ export class EntityVoiceSettings extends SubscribeMixin(LitElement) {
height: 32px;
width: 32px;
margin-right: 16px;
margin-inline-end: 16px;
margin-inline-start: initial;
}
ha-aliases-editor {
display: block;
@ -395,6 +397,8 @@ export class EntityVoiceSettings extends SubscribeMixin(LitElement) {
}
ha-formfield {
margin-left: -8px;
margin-inline-start: -8px;
margin-inline-end: initial;
}
ha-checkbox {
--mdc-checkbox-state-layer-size: 40px;
@ -407,6 +411,8 @@ export class EntityVoiceSettings extends SubscribeMixin(LitElement) {
color: var(--error-color);
--mdc-icon-size: 16px;
margin-right: 4px;
margin-inline-end: 4px;
margin-inline-start: initial;
}
.header {
margin-top: 8px;

View File

@ -824,6 +824,8 @@ export class VoiceAssistantsExpose extends LitElement {
}
ha-button-menu {
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
}
.clear {
color: var(--primary-color);

View File

@ -147,7 +147,7 @@ class PanelDeveloperTools extends LitElement {
}
}
.main-title {
margin: 0 0 0 24px;
margin: var(--margin-title);
line-height: 20px;
flex-grow: 1;
}
@ -163,6 +163,8 @@ class PanelDeveloperTools extends LitElement {
paper-tabs {
margin-left: max(env(safe-area-inset-left), 24px);
margin-right: max(env(safe-area-inset-right), 24px);
margin-inline-start: max(env(safe-area-inset-left), 24px);
margin-inline-end: max(env(safe-area-inset-right), 24px);
--paper-tabs-selection-bar-color: var(
--app-header-selection-bar-color,
var(--app-header-text-color, #fff)

View File

@ -580,6 +580,8 @@ class HaPanelDevService extends LitElement {
}
.switch-mode-container .error {
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
}
.attributes {
width: 100%;

View File

@ -1,6 +1,5 @@
import "@material/mwc-button/mwc-button";
import "@material/mwc-list/mwc-list-item";
import { mdiChevronRight } from "@mdi/js";
import formatISO9075 from "date-fns/formatISO9075";
import {
css,
@ -21,6 +20,7 @@ import "../../../components/ha-form/ha-form";
import "../../../components/ha-selector/ha-selector-datetime";
import "../../../components/ha-selector/ha-selector-number";
import "../../../components/ha-svg-icon";
import "../../../components/ha-icon-next";
import {
adjustStatisticsSum,
fetchStatistics,
@ -165,7 +165,7 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement {
this.hass.config
)}
</span>
<ha-svg-icon slot="meta" .path=${mdiChevronRight}></ha-svg-icon>
<ha-icon-next slot="meta"></ha-icon-next>
</mwc-list-item>
`);
}

View File

@ -139,6 +139,7 @@ class PanelEnergy extends LitElement {
width: 100%;
padding-left: 32px;
padding-inline-start: 32px;
padding-inline-end: initial;
--disabled-text-color: rgba(var(--rgb-text-primary-color), 0.5);
direction: var(--direction);
--date-range-picker-max-height: calc(100vh - 80px);
@ -146,6 +147,7 @@ class PanelEnergy extends LitElement {
:host([narrow]) hui-energy-period-selector {
padding-left: 0px;
padding-inline-start: 0px;
padding-inline-end: initial;
}
:host {
-ms-user-select: none;
@ -189,7 +191,7 @@ class PanelEnergy extends LitElement {
}
}
.main-title {
margin: 0 0 0 24px;
margin: var(--margin-title);
line-height: 20px;
flex-grow: 1;
}
@ -200,7 +202,9 @@ class PanelEnergy extends LitElement {
min-height: 100vh;
box-sizing: border-box;
padding-left: env(safe-area-inset-left);
padding-inline-start: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
padding-inline-end: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
}
hui-view {

View File

@ -353,6 +353,8 @@ export class HuiEnergyGasGraphCard
align-items: center;
padding: 20%;
margin-left: 32px;
margin-inline-start: 32px;
margin-inline-end: initial;
box-sizing: border-box;
}
`;

View File

@ -475,6 +475,8 @@ export class HuiEnergySolarGraphCard
align-items: center;
padding: 20%;
margin-left: 32px;
margin-inline-start: 32px;
margin-inline-end: initial;
box-sizing: border-box;
}
`;

View File

@ -636,6 +636,8 @@ export class HuiEnergyUsageGraphCard
align-items: center;
padding: 20%;
margin-left: 32px;
margin-inline-start: 32px;
margin-inline-end: initial;
box-sizing: border-box;
}
`;

View File

@ -351,6 +351,8 @@ export class HuiEnergyWaterGraphCard
align-items: center;
padding: 20%;
margin-left: 32px;
margin-inline-start: 32px;
margin-inline-end: initial;
box-sizing: border-box;
}
`;

View File

@ -352,6 +352,8 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
.state {
margin-left: 16px;
margin-inline-start: 16px;
margin-inline-end: initial;
position: relative;
bottom: 16px;
color: var(--alarm-state-color);

View File

@ -601,6 +601,8 @@ export class HuiAreaCard
background-color: var(--area-button-color, #727272b2);
border-radius: 50%;
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
--mdc-icon-button-size: 44px;
}
.on {

View File

@ -60,6 +60,8 @@ export class HuiEmptyStateCard extends LitElement implements LovelaceCard {
mwc-button {
margin-left: -8px;
margin-inline-start: -8px;
margin-inline-end: initial;
}
`;
}

View File

@ -346,6 +346,8 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
.box .title {
font-weight: 500;
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
}
ha-icon-button {

View File

@ -95,16 +95,22 @@ export class HuiButtonsBase extends LitElement {
width: 24px;
height: 24px;
margin-left: -4px;
margin-inline-start: -4px;
margin-inline-end: initial;
margin-top: -2px;
}
state-badge.no-text {
width: 26px;
height: 26px;
margin-left: -3px;
margin-inline-start: -3px;
margin-inline-end: initial;
margin-top: -3px;
}
ha-assist-chip state-badge {
margin-right: -4px;
margin-inline-end: -4px;
margin-inline-start: initial;
--mdc-icon-size: 18px;
}
@media all and (max-width: 450px), all and (max-height: 500px) {

View File

@ -627,6 +627,8 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
}
:host([narrow]) .time-handle {
margin-left: auto;
margin-inline-start: auto;
margin-inline-end: initial;
}
.label {
display: flex;
@ -634,12 +636,18 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
justify-content: flex-end;
font-size: 20px;
margin-left: auto;
margin-inline-start: auto;
margin-inline-end: initial;
}
:host([narrow]) .label {
margin-left: unset;
margin-inline-start: unset;
margin-inline-end: initial;
}
mwc-button {
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
flex-shrink: 0;
--mdc-button-outline-color: currentColor;
--primary-color: currentColor;

View File

@ -205,6 +205,8 @@ export class HuiGenericEntityRow extends LitElement {
.info {
margin-left: 16px;
margin-right: 8px;
margin-inline-start: 16px;
margin-inline-end: 8px;
flex: 1 1 30%;
}
.info,
@ -215,10 +217,14 @@ export class HuiGenericEntityRow extends LitElement {
}
.flex ::slotted(*) {
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
min-width: 0;
}
.flex ::slotted([slot="secondary"]) {
margin-left: 0;
margin-inline-start: 0;
margin-inline-end: initial;
}
.secondary,
ha-relative-time {

View File

@ -152,6 +152,7 @@ export class HuiDialogEditCard
if (this._cardConfig && this._cardConfig.type) {
let cardName: string | undefined;
if (isCustomType(this._cardConfig.type)) {
// prettier-ignore
cardName = getCustomCardEntry(
stripCustomPrefix(this._cardConfig.type)
)?.name;
@ -496,6 +497,8 @@ export class HuiDialogEditCard
}
.gui-mode-button {
margin-right: auto;
margin-inline-end: auto;
margin-inline-start: initial;
}
.header {
display: flex;

View File

@ -1,9 +1,10 @@
import "@material/mwc-button";
import { mdiArrowLeft, mdiCodeBraces, mdiListBoxOutline } from "@mdi/js";
import { mdiCodeBraces, mdiListBoxOutline } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { fireEvent, HASSDomEvent } from "../../../common/dom/fire_event";
import "../../../components/ha-icon-button";
import "../../../components/ha-icon-button-prev";
import type { HomeAssistant } from "../../../types";
import type { LovelaceRowConfig } from "../entity-rows/types";
import type { LovelaceHeaderFooterConfig } from "../header-footer/types";
@ -39,11 +40,10 @@ export class HuiSubElementEditor extends LitElement {
return html`
<div class="header">
<div class="back-title">
<ha-icon-button
<ha-icon-button-prev
.label=${this.hass!.localize("ui.common.back")}
.path=${mdiArrowLeft}
@click=${this._goBack}
></ha-icon-button>
></ha-icon-button-prev>
<span slot="title"
>${this.hass.localize(
`ui.panel.lovelace.editor.sub-element-editor.types.${this.config?.type}`

View File

@ -227,6 +227,8 @@ class HuiWeatherEntityRow extends LitElement implements LovelaceRow {
.info {
margin-left: 16px;
margin-inline-start: 16px;
margin-inline-end: initial;
flex: 1 0 60px;
}
@ -273,6 +275,8 @@ class HuiWeatherEntityRow extends LitElement implements LovelaceRow {
justify-content: center;
text-align: right;
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
}
.secondary {

View File

@ -1027,7 +1027,7 @@ class HUIRoot extends LitElement {
}
}
.main-title {
margin: 0 0 0 24px;
margin: var(--margin-title);
line-height: 20px;
flex-grow: 1;
}
@ -1040,6 +1040,8 @@ class HUIRoot extends LitElement {
width: 100%;
height: 100%;
margin-left: 4px;
margin-inline-start: 4px;
margin-inline-end: initial;
}
ha-tabs,
paper-tabs {

View File

@ -89,6 +89,8 @@ export class HuiButtonRow extends LitElement implements LovelaceRow {
flex: 1;
overflow: hidden;
margin-left: 16px;
margin-inline-start: 16px;
margin-inline-end: initial;
display: flex;
justify-content: space-between;
align-items: center;
@ -100,6 +102,8 @@ export class HuiButtonRow extends LitElement implements LovelaceRow {
}
mwc-button {
margin-right: -0.57em;
margin-inline-end: -0.57em;
margin-inline-start: initial;
}
`;
}

View File

@ -138,6 +138,8 @@ class HuiCastRow extends LitElement implements LovelaceRow {
.flex {
flex: 1;
margin-left: 16px;
margin-inline-start: 16px;
margin-inline-end: initial;
display: flex;
justify-content: space-between;
align-items: center;

View File

@ -39,6 +39,8 @@ class HuiSectionRow extends LitElement implements LovelaceRow {
.label {
color: var(--section-header-text-color, var(--primary-text-color));
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
margin-bottom: 8px;
margin-top: 16px;
font-weight: 500;
@ -48,6 +50,8 @@ class HuiSectionRow extends LitElement implements LovelaceRow {
background-color: var(--entities-divider-color, var(--divider-color));
margin-left: -16px;
margin-right: -16px;
margin-inline-start: -16px;
margin-inline-end: -16px;
margin-top: 8px;
}
`;

View File

@ -45,9 +45,11 @@ class HuiTextRow extends LitElement implements LovelaceRow {
}
.name {
margin-left: 16px;
margin-inline-start: 16px;
margin-inline-end: initial;
}
.text {
text-align: right;
text-align: var(--float-end);
}
`;
}

View File

@ -58,6 +58,8 @@ class HuiWeblinkRow extends LitElement implements LovelaceRow {
overflow: hidden;
text-overflow: ellipsis;
margin-left: 16px;
margin-inline-start: 16px;
margin-inline-end: initial;
}
`;
}

View File

@ -226,6 +226,8 @@ class HaPanelMailbox extends LitElement {
ha-tabs {
margin-left: max(env(safe-area-inset-left), 24px);
margin-right: max(env(safe-area-inset-right), 24px);
margin-inline-start: max(env(safe-area-inset-left), 24px);
margin-inline-end: max(env(safe-area-inset-right), 24px);
--paper-tabs-selection-bar-color: #fff;
text-transform: uppercase;
}

View File

@ -411,6 +411,8 @@ class DialogTodoItemEditor extends LitElement {
}
ha-time-input {
margin-left: 16px;
margin-inline-start: 16px;
margin-inline-end: initial;
}
.flex {
display: flex;

View File

@ -429,6 +429,8 @@ const mainStyles = css`
--direction: ltr;
--float-start: left;
--float-end: right;
--margin-title-ltr: 0 0 0 24px;
--margin-title-rtl: 0 24px 0 0;
${unsafeCSS(
Object.entries(derivedStyles)

View File

@ -29,6 +29,8 @@ export const haStyle = css`
app-toolbar [main-title] {
margin-left: 20px;
margin-inline-start: 20px;
margin-inline-end: initial;
}
h1 {

View File

@ -337,14 +337,14 @@ export class HaStateControlClimateTemperature extends LitElement {
private _renderSecondary() {
if (!this.showSecondary) {
return html`<p class="label"></p>`;
return html`<p class="label secondary"></p>`;
}
const currentTemperature = this.stateObj.attributes.current_temperature;
if (currentTemperature && !this.showCurrentAsPrimary) {
return html`
<p class="label">
<p class="label secondary">
<ha-svg-icon .path=${mdiThermometer}></ha-svg-icon>
${this._renderCurrent(currentTemperature, "normal")}
</p>
@ -353,7 +353,7 @@ export class HaStateControlClimateTemperature extends LitElement {
if (this._supportsTargetTemperature && this.showCurrentAsPrimary) {
return html`
<p class="label">
<p class="label secondary">
<ha-svg-icon .path=${mdiThermostat}></ha-svg-icon>
${this._renderTarget(this._targetTemperature.value!, "normal")}
</p>
@ -362,7 +362,7 @@ export class HaStateControlClimateTemperature extends LitElement {
if (this._supportsTargetTemperatureRange && this.showCurrentAsPrimary) {
return html`
<p class="label">
<p class="label secondary">
<ha-svg-icon class="target-icon" .path=${mdiThermostat}></ha-svg-icon>
<button
@click=${this._handleSelectTemp}
@ -387,7 +387,7 @@ export class HaStateControlClimateTemperature extends LitElement {
`;
}
return html`<p class="label"></p>`;
return html`<p class="label secondary"></p>`;
}
private _renderInfo() {
@ -578,6 +578,9 @@ export class HaStateControlClimateTemperature extends LitElement {
.container.sm .target-icon {
display: none;
}
.secondary {
direction: ltr;
}
ha-control-circular-slider {
--control-circular-slider-low-color: var(
--low-color,

View File

@ -40,7 +40,9 @@ class StateCardClimate extends LitElement {
ha-climate-state {
margin-left: 16px;
text-align: right;
margin-inline-start: 16px;
margin-inline-end: initial;
text-align: var(--float-end);
}
`,
];

View File

@ -42,7 +42,9 @@ class StateCardHumidifier extends LitElement {
ha-humidifier-state {
margin-left: 16px;
text-align: right;
margin-inline-start: 16px;
margin-inline-end: initial;
text-align: var(--float-end);
}
`,
];

View File

@ -76,6 +76,8 @@ class StateCardInputText extends LitElement {
css`
ha-textfield {
margin-left: 16px;
margin-inline-start: 16px;
margin-inline-end: initial;
}
`,
];

View File

@ -57,7 +57,9 @@ class StateCardMediaPlayer extends LitElement {
.state {
margin-left: 16px;
text-align: right;
margin-inline-start: 16px;
margin-inline-end: initial;
text-align: var(--float-end);
}
.main-text {

View File

@ -92,7 +92,9 @@ class StateCardTimer extends LitElement {
color: var(--primary-text-color);
margin-left: 16px;
text-align: right;
margin-inline-start: 16px;
margin-inline-end: initial;
text-align: var(--float-end);
line-height: 40px;
white-space: nowrap;
}

View File

@ -47,7 +47,6 @@ export class StateCardUpdate extends LitElement {
word-break: break-word;
display: flex;
align-items: center;
direction: ltr;
justify-content: flex-end;
}
`,

View File

@ -41,7 +41,9 @@ class StateCardWaterHeater extends LitElement {
ha-water_heater-state {
margin-left: 16px;
text-align: right;
margin-inline-start: 16px;
margin-inline-end: initial;
text-align: var(--float-end);
}
`,
];