From 6efe444af308d057f0758567a486ff0c9d95ed27 Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Fri, 19 Dec 2025 15:12:32 +0000 Subject: [PATCH] Use space tokens in more info dialog area (#28627) Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com> --- .../ha-more-info-control-select-container.ts | 4 +-- .../components/ha-more-info-state-header.ts | 4 +-- .../lights/dialog-light-color-favorite.ts | 4 +-- .../ha-more-info-light-favorite-colors.ts | 4 +-- .../lights/light-color-rgb-picker.ts | 2 +- .../components/more-info-control-style.ts | 10 +++---- .../ha-more-info-siren-advanced-controls.ts | 2 +- .../ha-more-info-view-voice-assistants.ts | 2 +- .../controls/more-info-automation.ts | 4 +-- .../more-info/controls/more-info-camera.ts | 2 +- .../more-info/controls/more-info-climate.ts | 8 ++--- .../controls/more-info-configurator.ts | 2 +- .../more-info/controls/more-info-counter.ts | 2 +- .../more-info/controls/more-info-cover.ts | 2 +- .../more-info/controls/more-info-datetime.ts | 4 +-- .../more-info/controls/more-info-group.ts | 2 +- .../controls/more-info-humidifier.ts | 4 +-- .../controls/more-info-input_datetime.ts | 4 +-- .../more-info/controls/more-info-lock.ts | 2 +- .../controls/more-info-media_player.ts | 14 ++++----- .../more-info/controls/more-info-person.ts | 6 ++-- .../more-info/controls/more-info-script.ts | 10 +++---- .../more-info/controls/more-info-sun.ts | 2 +- .../more-info/controls/more-info-timer.ts | 2 +- .../more-info/controls/more-info-update.ts | 30 ++++++++++--------- .../more-info/controls/more-info-valve.ts | 2 +- .../controls/more-info-water_heater.ts | 4 +-- .../more-info/controls/more-info-weather.ts | 30 +++++++++---------- .../ha-more-info-history-and-logbook.ts | 2 +- src/dialogs/more-info/ha-more-info-history.ts | 2 +- src/dialogs/more-info/ha-more-info-info.ts | 6 ++-- src/dialogs/more-info/ha-more-info-logbook.ts | 2 +- .../more-info/ha-more-info-settings.ts | 3 +- src/dialogs/more-info/more-info-content.ts | 2 +- 34 files changed, 94 insertions(+), 91 deletions(-) diff --git a/src/dialogs/more-info/components/ha-more-info-control-select-container.ts b/src/dialogs/more-info/components/ha-more-info-control-select-container.ts index 1b3524099c..468a79bab7 100644 --- a/src/dialogs/more-info/components/ha-more-info-control-select-container.ts +++ b/src/dialogs/more-info/components/ha-more-info-control-select-container.ts @@ -37,8 +37,8 @@ export class HaMoreInfoControlSelectContainer extends LitElement { overflow: auto; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ - margin: -2px -24px; - padding: 2px 24px; + margin: -2px calc(var(--ha-space-6) * -1); + padding: 2px var(--ha-space-6); } .controls-scroll::-webkit-scrollbar { display: none; diff --git a/src/dialogs/more-info/components/ha-more-info-state-header.ts b/src/dialogs/more-info/components/ha-more-info-state-header.ts index 6347297660..cd03c54d9b 100644 --- a/src/dialogs/more-info/components/ha-more-info-state-header.ts +++ b/src/dialogs/more-info/components/ha-more-info-state-header.ts @@ -84,8 +84,8 @@ export class HaMoreInfoStateHeader extends LitElement { font-weight: var(--ha-font-weight-medium); line-height: var(--ha-line-height-normal); letter-spacing: 0.1px; - padding: 4px 0; - margin-bottom: 20px; + padding: var(--ha-space-1) 0; + margin-bottom: var(--ha-space-5); cursor: pointer; user-select: none; -webkit-user-select: none; diff --git a/src/dialogs/more-info/components/lights/dialog-light-color-favorite.ts b/src/dialogs/more-info/components/lights/dialog-light-color-favorite.ts index 421a13e39b..61e72cebf5 100644 --- a/src/dialogs/more-info/components/lights/dialog-light-color-favorite.ts +++ b/src/dialogs/more-info/components/lights/dialog-light-color-favorite.ts @@ -268,14 +268,14 @@ class DialogLightColorFavorite extends LitElement { flex-direction: column; align-items: center; justify-content: center; - padding: 24px; + padding: var(--ha-space-6); flex: 1; } .modes { display: flex; flex-direction: row; justify-content: flex-end; - padding: 0 24px; + padding: 0 var(--ha-space-6); } .wheel { width: 30px; diff --git a/src/dialogs/more-info/components/lights/ha-more-info-light-favorite-colors.ts b/src/dialogs/more-info/components/lights/ha-more-info-light-favorite-colors.ts index 2bfe4eeac6..dc9791f7c7 100644 --- a/src/dialogs/more-info/components/lights/ha-more-info-light-favorite-colors.ts +++ b/src/dialogs/more-info/components/lights/ha-more-info-light-favorite-colors.ts @@ -254,14 +254,14 @@ export class HaMoreInfoLightFavoriteColors extends LitElement { display: flex; align-items: center; justify-content: center; - margin: -8px; + margin: calc(var(--ha-space-2) * -1); flex-wrap: wrap; max-width: 250px; user-select: none; } .container > * { - margin: 8px; + margin: var(--ha-space-2); } .color { diff --git a/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts b/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts index 83720297ba..11c8b875b9 100644 --- a/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts +++ b/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts @@ -515,7 +515,7 @@ class LightRgbColorPicker extends LitElement { hr { border-color: var(--divider-color); border-bottom: none; - margin: 16px 0; + margin: var(--ha-space-4) 0; } `, ]; diff --git a/src/dialogs/more-info/components/more-info-control-style.ts b/src/dialogs/more-info/components/more-info-control-style.ts index 5dd3dd966a..ef8a47f70d 100644 --- a/src/dialogs/more-info/components/more-info-control-style.ts +++ b/src/dialogs/more-info/components/more-info-control-style.ts @@ -15,22 +15,22 @@ export const moreInfoControlStyle = css` } .controls:not(:last-child) { - margin-bottom: 24px; + margin-bottom: var(--ha-space-6); } .controls > *:not(:last-child) { - margin-bottom: 24px; + margin-bottom: var(--ha-space-6); } .buttons { display: flex; align-items: center; justify-content: center; - margin-bottom: 12px; + margin-bottom: var(--ha-space-3); } .buttons > * { - margin: 8px; + margin: var(--ha-space-2); } ha-attributes { @@ -38,6 +38,6 @@ export const moreInfoControlStyle = css` width: 100%; } ha-more-info-control-select-container + ha-attributes:not([empty]) { - margin-top: 16px; + margin-top: var(--ha-space-4); } `; diff --git a/src/dialogs/more-info/components/siren/ha-more-info-siren-advanced-controls.ts b/src/dialogs/more-info/components/siren/ha-more-info-siren-advanced-controls.ts index 244fc4208b..9d6b80709e 100644 --- a/src/dialogs/more-info/components/siren/ha-more-info-siren-advanced-controls.ts +++ b/src/dialogs/more-info/components/siren/ha-more-info-siren-advanced-controls.ts @@ -209,7 +209,7 @@ class MoreInfoSirenAdvancedControls extends LitElement { flex-direction: row; justify-content: center; gap: var(--ha-space-4); - margin-top: 16px; + margin-top: var(--ha-space-4); } ha-control-button { --control-button-border-radius: var(--ha-border-radius-xl); diff --git a/src/dialogs/more-info/components/voice/ha-more-info-view-voice-assistants.ts b/src/dialogs/more-info/components/voice/ha-more-info-view-voice-assistants.ts index df78d28d47..8e321b827b 100644 --- a/src/dialogs/more-info/components/voice/ha-more-info-view-voice-assistants.ts +++ b/src/dialogs/more-info/components/voice/ha-more-info-view-voice-assistants.ts @@ -48,7 +48,7 @@ class MoreInfoViewVoiceAssistants extends LitElement { flex-direction: column; align-items: center; justify-content: center; - padding: 24px; + padding: var(--ha-space-6); flex: 1; } `, diff --git a/src/dialogs/more-info/controls/more-info-automation.ts b/src/dialogs/more-info/controls/more-info-automation.ts index b83787bbed..8c2cf6bde5 100644 --- a/src/dialogs/more-info/controls/more-info-automation.ts +++ b/src/dialogs/more-info/controls/more-info-automation.ts @@ -52,7 +52,7 @@ class MoreInfoAutomation extends LitElement { justify-content: space-between; } .actions { - margin: 8px 0; + margin: var(--ha-space-2) 0; display: flex; flex-wrap: wrap; justify-content: center; @@ -60,7 +60,7 @@ class MoreInfoAutomation extends LitElement { hr { border-color: var(--divider-color); border-bottom: none; - margin: 16px 0; + margin: var(--ha-space-4) 0; } `; } diff --git a/src/dialogs/more-info/controls/more-info-camera.ts b/src/dialogs/more-info/controls/more-info-camera.ts index f36895b695..34cb5e7b87 100644 --- a/src/dialogs/more-info/controls/more-info-camera.ts +++ b/src/dialogs/more-info/controls/more-info-camera.ts @@ -106,7 +106,7 @@ class MoreInfoCamera extends LitElement { flex-wrap: wrap; justify-content: flex-end; box-sizing: border-box; - padding: 16px; + padding: var(--ha-space-4); z-index: 1; gap: var(--ha-space-2); } diff --git a/src/dialogs/more-info/controls/more-info-climate.ts b/src/dialogs/more-info/controls/more-info-climate.ts index 0b0e3a4a6b..ac34a39b23 100644 --- a/src/dialogs/more-info/controls/more-info-climate.ts +++ b/src/dialogs/more-info/controls/more-info-climate.ts @@ -511,7 +511,7 @@ class MoreInfoClimate extends LitElement { align-items: center; justify-content: center; text-align: center; - margin-bottom: 40px; + margin-bottom: var(--ha-space-10); } .current div { @@ -534,7 +534,7 @@ class MoreInfoClimate extends LitElement { font-size: var(--ha-font-size-m); line-height: var(--ha-line-height-condensed); letter-spacing: 0.4px; - margin-bottom: 4px; + margin-bottom: var(--ha-space-1); } .current .value { @@ -545,7 +545,7 @@ class MoreInfoClimate extends LitElement { } ha-select { width: 100%; - margin-top: 8px; + margin-top: var(--ha-space-2); } .container-humidity .single-row { @@ -561,7 +561,7 @@ class MoreInfoClimate extends LitElement { } .single-row { - padding: 8px 0; + padding: var(--ha-space-2) 0; } `, ]; diff --git a/src/dialogs/more-info/controls/more-info-configurator.ts b/src/dialogs/more-info/controls/more-info-configurator.ts index 8ac51f1f78..b063ed77bd 100644 --- a/src/dialogs/more-info/controls/more-info-configurator.ts +++ b/src/dialogs/more-info/controls/more-info-configurator.ts @@ -87,7 +87,7 @@ export class MoreInfoConfigurator extends LitElement { flex-direction: column; } p { - margin: 8px 0; + margin: var(--ha-space-2) 0; } a { diff --git a/src/dialogs/more-info/controls/more-info-counter.ts b/src/dialogs/more-info/controls/more-info-counter.ts index 3fa00fb070..d8875918b1 100644 --- a/src/dialogs/more-info/controls/more-info-counter.ts +++ b/src/dialogs/more-info/controls/more-info-counter.ts @@ -62,7 +62,7 @@ class MoreInfoCounter extends LitElement { static styles = css` .actions { - margin: 8px 0; + margin: var(--ha-space-2) 0; display: flex; flex-wrap: wrap; justify-content: center; diff --git a/src/dialogs/more-info/controls/more-info-cover.ts b/src/dialogs/more-info/controls/more-info-cover.ts index b041b44b5e..70dc7defb1 100644 --- a/src/dialogs/more-info/controls/more-info-cover.ts +++ b/src/dialogs/more-info/controls/more-info-cover.ts @@ -194,7 +194,7 @@ class MoreInfoCover extends LitElement { align-items: center; } .main-control > * { - margin: 0 8px; + margin: 0 var(--ha-space-2); } `, ]; diff --git a/src/dialogs/more-info/controls/more-info-datetime.ts b/src/dialogs/more-info/controls/more-info-datetime.ts index 3e3e47336f..e6f4e5726c 100644 --- a/src/dialogs/more-info/controls/more-info-datetime.ts +++ b/src/dialogs/more-info/controls/more-info-datetime.ts @@ -72,8 +72,8 @@ class MoreInfoDatetime extends LitElement { justify-content: flex-end; } ha-date-input + ha-time-input { - margin-left: 4px; - margin-inline-start: 4px; + margin-left: var(--ha-space-1); + margin-inline-start: var(--ha-space-1); margin-inline-end: initial; } `; diff --git a/src/dialogs/more-info/controls/more-info-group.ts b/src/dialogs/more-info/controls/more-info-group.ts index b3f83360cb..ae7f5931e7 100644 --- a/src/dialogs/more-info/controls/more-info-group.ts +++ b/src/dialogs/more-info/controls/more-info-group.ts @@ -100,7 +100,7 @@ class MoreInfoGroup extends LitElement { css` state-card-content { display: block; - margin-top: 8px; + margin-top: var(--ha-space-2); } `, ]; diff --git a/src/dialogs/more-info/controls/more-info-humidifier.ts b/src/dialogs/more-info/controls/more-info-humidifier.ts index 1432ff7d79..291a38b841 100644 --- a/src/dialogs/more-info/controls/more-info-humidifier.ts +++ b/src/dialogs/more-info/controls/more-info-humidifier.ts @@ -217,7 +217,7 @@ class MoreInfoHumidifier extends LitElement { align-items: center; justify-content: center; text-align: center; - margin-bottom: 40px; + margin-bottom: var(--ha-space-10); } .current div { display: flex; @@ -237,7 +237,7 @@ class MoreInfoHumidifier extends LitElement { font-size: var(--ha-font-size-m); line-height: var(--ha-line-height-condensed); letter-spacing: 0.4px; - margin-bottom: 4px; + margin-bottom: var(--ha-space-1); } .current .value { font-size: var(--ha-font-size-xl); diff --git a/src/dialogs/more-info/controls/more-info-input_datetime.ts b/src/dialogs/more-info/controls/more-info-input_datetime.ts index e357f679d7..c80340afbe 100644 --- a/src/dialogs/more-info/controls/more-info-input_datetime.ts +++ b/src/dialogs/more-info/controls/more-info-input_datetime.ts @@ -84,8 +84,8 @@ class MoreInfoInputDatetime extends LitElement { justify-content: flex-end; } ha-date-input + ha-time-input { - margin-left: 4px; - margin-inline-start: 4px; + margin-left: var(--ha-space-1); + margin-inline-start: var(--ha-space-1); margin-inline-end: initial; } `; diff --git a/src/dialogs/more-info/controls/more-info-lock.ts b/src/dialogs/more-info/controls/more-info-lock.ts index df5848a2b3..7259324cbc 100644 --- a/src/dialogs/more-info/controls/more-info-lock.ts +++ b/src/dialogs/more-info/controls/more-info-lock.ts @@ -192,7 +192,7 @@ class MoreInfoLock extends LitElement { margin: 0 auto; } ha-control-button-group + ha-attributes:not([empty]) { - margin-top: 16px; + margin-top: var(--ha-space-4); } @keyframes pulse { 0% { diff --git a/src/dialogs/more-info/controls/more-info-media_player.ts b/src/dialogs/more-info/controls/more-info-media_player.ts index a6479132ea..e181fb9608 100644 --- a/src/dialogs/more-info/controls/more-info-media_player.ts +++ b/src/dialogs/more-info/controls/more-info-media_player.ts @@ -528,11 +528,11 @@ class MoreInfoMediaPlayer extends LitElement { display: flex; align-items: center; gap: var(--ha-space-3); - margin-left: 8px; + margin-left: var(--ha-space-2); } .volume ha-svg-icon { - padding: 4px; + padding: var(--ha-space-1); height: 16px; width: 16px; } @@ -545,17 +545,17 @@ class MoreInfoMediaPlayer extends LitElement { .badge { position: absolute; top: -10px; - left: 16px; + left: var(--ha-space-4); display: flex; justify-content: center; align-items: center; height: 16px; - min-width: 8px; + min-width: var(--ha-space-2); border-radius: var(--ha-border-radius-md); font-weight: var(--ha-font-weight-normal); font-size: var(--ha-font-size-xs); background-color: var(--primary-color); - padding: 0 4px; + padding: 0 var(--ha-space-1); color: var(--text-primary-color); } @@ -572,13 +572,13 @@ class MoreInfoMediaPlayer extends LitElement { display: flex; flex-direction: column; justify-content: space-between; - margin: 8px 0 8px 8px; + margin: var(--ha-space-2) 0 var(--ha-space-2) var(--ha-space-2); } .media-title { font-size: var(--ha-font-size-xl); font-weight: var(--ha-font-weight-bold); - margin-bottom: 4px; + margin-bottom: var(--ha-space-1); } .media-artist { diff --git a/src/dialogs/more-info/controls/more-info-person.ts b/src/dialogs/more-info/controls/more-info-person.ts index efebf00e85..826d2a4a9c 100644 --- a/src/dialogs/more-info/controls/more-info-person.ts +++ b/src/dialogs/more-info/controls/more-info-person.ts @@ -72,12 +72,12 @@ class MoreInfoPerson extends LitElement { justify-content: space-between; } .actions { - margin: 8px 0; + margin: var(--ha-space-2) 0; text-align: right; } ha-map { - margin-top: 16px; - margin-bottom: 16px; + margin-top: var(--ha-space-4); + margin-bottom: var(--ha-space-4); } `; } diff --git a/src/dialogs/more-info/controls/more-info-script.ts b/src/dialogs/more-info/controls/more-info-script.ts index a00fa0e00a..101fb63d6f 100644 --- a/src/dialogs/more-info/controls/more-info-script.ts +++ b/src/dialogs/more-info/controls/more-info-script.ts @@ -227,24 +227,24 @@ class MoreInfoScript extends LitElement { visibility: hidden; color: var(--secondary-text-color); text-align: center; - margin-bottom: 16px; + margin-bottom: var(--ha-space-4); height: 21px; } .queue.has-queue { visibility: visible; } .fields { - padding: 16px; + padding: var(--ha-space-4); border: 1px solid var(--divider-color); border-radius: var(--ha-border-radius-md); - margin-bottom: 16px; + margin-bottom: var(--ha-space-4); } .fields .title { font-weight: var(--ha-font-weight-bold); } ha-control-button ha-svg-icon { z-index: -1; - margin-right: 4px; + margin-right: var(--ha-space-1); } ha-service-control { --service-control-padding: 0; @@ -252,7 +252,7 @@ class MoreInfoScript extends LitElement { } ha-markdown { text-align: center; - padding: 0 16px; + padding: 0 var(--ha-space-4); } `; } diff --git a/src/dialogs/more-info/controls/more-info-sun.ts b/src/dialogs/more-info/controls/more-info-sun.ts index 784e50dc84..499a064781 100644 --- a/src/dialogs/more-info/controls/more-info-sun.ts +++ b/src/dialogs/more-info/controls/more-info-sun.ts @@ -83,7 +83,7 @@ class MoreInfoSun extends LitElement { hr { border-color: var(--divider-color); border-bottom: none; - margin: 16px 0; + margin: var(--ha-space-4) 0; } `; } diff --git a/src/dialogs/more-info/controls/more-info-timer.ts b/src/dialogs/more-info/controls/more-info-timer.ts index 3568caf444..3c92fd82dc 100644 --- a/src/dialogs/more-info/controls/more-info-timer.ts +++ b/src/dialogs/more-info/controls/more-info-timer.ts @@ -80,7 +80,7 @@ class MoreInfoTimer extends LitElement { static styles = css` .actions { - margin: 8px 0; + margin: var(--ha-space-2) 0; display: flex; flex-wrap: wrap; justify-content: center; diff --git a/src/dialogs/more-info/controls/more-info-update.ts b/src/dialogs/more-info/controls/more-info-update.ts index eed05c917b..f537708f5b 100644 --- a/src/dialogs/more-info/controls/more-info-update.ts +++ b/src/dialogs/more-info/controls/more-info-update.ts @@ -448,14 +448,14 @@ class MoreInfoUpdate extends LitElement { hr { border-color: var(--divider-color); border-bottom: none; - margin: 16px 0; + margin: var(--ha-space-4) 0; } ha-expansion-panel { - margin: 16px 0; + margin: var(--ha-space-4) 0; } .summary { - margin-bottom: 16px; + margin-bottom: var(--ha-space-4); } .row { @@ -473,8 +473,10 @@ class MoreInfoUpdate extends LitElement { ); position: sticky; bottom: 0; - margin: 0 -24px 0 -24px; - margin-bottom: calc(-1 * max(var(--safe-area-inset-bottom), 24px)); + margin: 0 calc(var(--ha-space-6) * -1) 0 calc(var(--ha-space-6) * -1); + margin-bottom: calc( + -1 * max(var(--safe-area-inset-bottom), var(--ha-space-6)) + ); box-sizing: border-box; display: flex; flex-direction: column; @@ -486,8 +488,8 @@ class MoreInfoUpdate extends LitElement { ha-md-list { width: 100%; box-sizing: border-box; - margin-bottom: -16px; - margin-top: -4px; + margin-bottom: calc(var(--ha-space-4) * -1); + margin-top: calc(var(--ha-space-1) * -1); --md-sys-color-surface: var( --ha-dialog-surface-background, var(--mdc-theme-surface, #fff) @@ -495,8 +497,8 @@ class MoreInfoUpdate extends LitElement { } ha-md-list-item { - --md-list-item-leading-space: 24px; - --md-list-item-trailing-space: 24px; + --md-list-item-leading-space: var(--ha-space-6); + --md-list-item-trailing-space: var(--ha-space-6); } .actions { @@ -506,7 +508,7 @@ class MoreInfoUpdate extends LitElement { flex-wrap: wrap; justify-content: flex-end; box-sizing: border-box; - padding: 16px; + padding: var(--ha-space-4); z-index: 1; gap: var(--ha-space-2); } @@ -520,12 +522,12 @@ class MoreInfoUpdate extends LitElement { align-items: center; } mwc-linear-progress { - margin-bottom: -8px; - margin-top: 4px; + margin-bottom: calc(var(--ha-space-2) * -1); + margin-top: var(--ha-space-1); } ha-markdown { direction: ltr; - padding-bottom: 16px; + padding-bottom: var(--ha-space-4); box-sizing: border-box; } ha-markdown.hidden { @@ -534,7 +536,7 @@ class MoreInfoUpdate extends LitElement { .loader { height: 80px; box-sizing: border-box; - padding-bottom: 16px; + padding-bottom: var(--ha-space-4); } `; } diff --git a/src/dialogs/more-info/controls/more-info-valve.ts b/src/dialogs/more-info/controls/more-info-valve.ts index 84a0e43eaf..873a00efe5 100644 --- a/src/dialogs/more-info/controls/more-info-valve.ts +++ b/src/dialogs/more-info/controls/more-info-valve.ts @@ -173,7 +173,7 @@ class MoreInfoValve extends LitElement { align-items: center; } .main-control > * { - margin: 0 8px; + margin: 0 var(--ha-space-2); } `, ]; diff --git a/src/dialogs/more-info/controls/more-info-water_heater.ts b/src/dialogs/more-info/controls/more-info-water_heater.ts index afb831aee7..f2c4fc6c96 100644 --- a/src/dialogs/more-info/controls/more-info-water_heater.ts +++ b/src/dialogs/more-info/controls/more-info-water_heater.ts @@ -214,7 +214,7 @@ class MoreInfoWaterHeater extends LitElement { align-items: center; justify-content: center; text-align: center; - margin-bottom: 40px; + margin-bottom: var(--ha-space-10); } .current div { @@ -237,7 +237,7 @@ class MoreInfoWaterHeater extends LitElement { font-size: var(--ha-font-size-m); line-height: var(--ha-line-height-condensed); letter-spacing: 0.4px; - margin-bottom: 4px; + margin-bottom: var(--ha-space-1); } .current .value { diff --git a/src/dialogs/more-info/controls/more-info-weather.ts b/src/dialogs/more-info/controls/more-info-weather.ts index d2cfc5ce5a..ebf0b91f4b 100644 --- a/src/dialogs/more-info/controls/more-info-weather.ts +++ b/src/dialogs/more-info/controls/more-info-weather.ts @@ -440,13 +440,13 @@ class MoreInfoWeather extends LitElement { css` ha-svg-icon { color: var(--state-icon-color); - margin-left: 8px; - margin-inline-start: 8px; + margin-left: var(--ha-space-2); + margin-inline-start: var(--ha-space-2); margin-inline-end: initial; } .section { - margin: 16px 0 8px 0; + margin: var(--ha-space-4) 0 var(--ha-space-2) 0; font-size: 1.2em; } @@ -470,14 +470,14 @@ class MoreInfoWeather extends LitElement { .main { flex: 1; - margin-left: 24px; - margin-inline-start: 24px; + margin-left: var(--ha-space-6); + margin-inline-start: var(--ha-space-6); margin-inline-end: initial; } .attribution { text-align: center; - margin-top: 16px; + margin-top: var(--ha-space-4); } .time-ago, @@ -500,15 +500,15 @@ class MoreInfoWeather extends LitElement { flex-wrap: nowrap; justify-content: space-between; align-items: center; - margin-bottom: 16px; + margin-bottom: var(--ha-space-4); } .icon-image { display: flex; align-items: center; min-width: 64px; - margin-right: 16px; - margin-inline-end: 16px; + margin-right: var(--ha-space-4); + margin-inline-end: var(--ha-space-4); margin-inline-start: initial; } @@ -534,7 +534,7 @@ class MoreInfoWeather extends LitElement { .temp-attribute .temp { position: relative; - margin-right: 24px; + margin-right: var(--ha-space-6); direction: ltr; } @@ -557,8 +557,8 @@ class MoreInfoWeather extends LitElement { .name-state { overflow: hidden; - padding-right: 12px; - padding-inline-end: 12px; + padding-right: var(--ha-space-3); + padding-inline-end: var(--ha-space-3); padding-inline-start: initial; width: 100%; } @@ -572,7 +572,7 @@ class MoreInfoWeather extends LitElement { .forecast { display: flex; justify-content: space-around; - padding: 16px; + padding: var(--ha-space-4); padding-bottom: 0px; overflow-x: auto; scrollbar-color: var(--scrollbar-thumb-color) transparent; @@ -634,8 +634,8 @@ class MoreInfoWeather extends LitElement { } .forecast-image-icon { - padding-top: 4px; - padding-bottom: 4px; + padding-top: var(--ha-space-1); + padding-bottom: var(--ha-space-1); display: flex; justify-content: center; } diff --git a/src/dialogs/more-info/ha-more-info-history-and-logbook.ts b/src/dialogs/more-info/ha-more-info-history-and-logbook.ts index bb442c44e1..33a8b4ee24 100644 --- a/src/dialogs/more-info/ha-more-info-history-and-logbook.ts +++ b/src/dialogs/more-info/ha-more-info-history-and-logbook.ts @@ -58,7 +58,7 @@ export class MoreInfoHistoryAndLogbook extends LitElement { display: block; } ha-more-info-history + ha-more-info-logbook { - margin-top: 16px; + margin-top: var(--ha-space-4); } `; } diff --git a/src/dialogs/more-info/ha-more-info-history.ts b/src/dialogs/more-info/ha-more-info-history.ts index ad6850fc34..53a2b3a5be 100644 --- a/src/dialogs/more-info/ha-more-info-history.ts +++ b/src/dialogs/more-info/ha-more-info-history.ts @@ -264,7 +264,7 @@ export class MoreInfoHistory extends LitElement { flex-direction: row; justify-content: space-between; align-items: center; - margin-bottom: 8px; + margin-bottom: var(--ha-space-2); } .header > a, a:visited { diff --git a/src/dialogs/more-info/ha-more-info-info.ts b/src/dialogs/more-info/ha-more-info-info.ts index 7f551b88bb..a1efad56b2 100644 --- a/src/dialogs/more-info/ha-more-info-info.ts +++ b/src/dialogs/more-info/ha-more-info-info.ts @@ -130,8 +130,8 @@ export class MoreInfoInfo extends LitElement { display: flex; flex-direction: column; flex: 1; - padding: 24px; - padding-bottom: max(var(--safe-area-inset-bottom), 24px); + padding: var(--ha-space-6); + padding-bottom: max(var(--safe-area-inset-bottom), var(--ha-space-6)); } [data-domain="camera"] .content { @@ -153,7 +153,7 @@ export class MoreInfoInfo extends LitElement { ha-more-info-history, ha-more-info-logbook:not(:last-child) { display: block; - margin-bottom: 16px; + margin-bottom: var(--ha-space-4); } ha-alert { diff --git a/src/dialogs/more-info/ha-more-info-logbook.ts b/src/dialogs/more-info/ha-more-info-logbook.ts index 03506514d0..2092c4aee8 100644 --- a/src/dialogs/more-info/ha-more-info-logbook.ts +++ b/src/dialogs/more-info/ha-more-info-logbook.ts @@ -82,7 +82,7 @@ export class MoreInfoLogbook extends LitElement { flex-direction: row; justify-content: space-between; align-items: center; - margin-bottom: 8px; + margin-bottom: var(--ha-space-2); } .header > a, a:visited { diff --git a/src/dialogs/more-info/ha-more-info-settings.ts b/src/dialogs/more-info/ha-more-info-settings.ts index 4cedadb0c2..6349877428 100644 --- a/src/dialogs/more-info/ha-more-info-settings.ts +++ b/src/dialogs/more-info/ha-more-info-settings.ts @@ -83,7 +83,8 @@ export class HaMoreInfoSettings extends LitElement { return [ css` .content { - padding: 8px 24px 24px 24px; + padding: var(--ha-space-2) var(--ha-space-6) var(--ha-space-6) + var(--ha-space-6); } `, ]; diff --git a/src/dialogs/more-info/more-info-content.ts b/src/dialogs/more-info/more-info-content.ts index ed285383d2..c2297a0607 100644 --- a/src/dialogs/more-info/more-info-content.ts +++ b/src/dialogs/more-info/more-info-content.ts @@ -119,7 +119,7 @@ class MoreInfoContent extends LitElement { hui-section { width: 100%; display: block; - margin-top: 16px; + margin-top: var(--ha-space-4); } `; }