Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-12-20 02:38:53 +00:00
Code Activity

Use space tokens in more info dialog area (#28627)

Browse Source 
Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>
This commit is contained in:
Aidan Timson
2025-12-19 15:12:32 +00:00
committed by GitHub
parent 09c9665b2f
commit 6efe444af3
34 changed files with 94 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/dialogs/more-info/components/ha-more-info-control-select-container.ts
View File

@@ -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;

4
src/dialogs/more-info/components/ha-more-info-state-header.ts
View File

@@ -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;

4
src/dialogs/more-info/components/lights/dialog-light-color-favorite.ts
View File

@@ -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;

4
src/dialogs/more-info/components/lights/ha-more-info-light-favorite-colors.ts
View File

@@ -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 {

2
src/dialogs/more-info/components/lights/light-color-rgb-picker.ts
View File

@@ -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;
}
`,
];

10
src/dialogs/more-info/components/more-info-control-style.ts
View File

@@ -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);
}
`;

2
src/dialogs/more-info/components/siren/ha-more-info-siren-advanced-controls.ts
View File

@@ -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);

2
src/dialogs/more-info/components/voice/ha-more-info-view-voice-assistants.ts
View File

@@ -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;
}
`,

4
src/dialogs/more-info/controls/more-info-automation.ts
View File

@@ -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;
}
`;
}

2
src/dialogs/more-info/controls/more-info-camera.ts
View File

@@ -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);
}

8
src/dialogs/more-info/controls/more-info-climate.ts
View File

@@ -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;
}
`,
];

2
src/dialogs/more-info/controls/more-info-configurator.ts
View File

@@ -87,7 +87,7 @@ export class MoreInfoConfigurator extends LitElement {
flex-direction: column;
}
p {
margin: 8px 0;
margin: var(--ha-space-2) 0;
}
a {

2
src/dialogs/more-info/controls/more-info-counter.ts
View File

@@ -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;

2
src/dialogs/more-info/controls/more-info-cover.ts
View File

@@ -194,7 +194,7 @@ class MoreInfoCover extends LitElement {
align-items: center;
}
.main-control > * {
margin: 0 8px;
margin: 0 var(--ha-space-2);
}
`,
];

4
src/dialogs/more-info/controls/more-info-datetime.ts
View File

@@ -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;
}
`;

2
src/dialogs/more-info/controls/more-info-group.ts
View File

@@ -100,7 +100,7 @@ class MoreInfoGroup extends LitElement {
css`
state-card-content {
display: block;
margin-top: 8px;
margin-top: var(--ha-space-2);
}
`,
];

4
src/dialogs/more-info/controls/more-info-humidifier.ts
View File

@@ -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);

4
src/dialogs/more-info/controls/more-info-input_datetime.ts
View File

@@ -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;
}
`;

2
src/dialogs/more-info/controls/more-info-lock.ts
View File

@@ -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% {

14
src/dialogs/more-info/controls/more-info-media_player.ts
View File

@@ -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 {

6
src/dialogs/more-info/controls/more-info-person.ts
View File

@@ -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);
}
`;
}

10
src/dialogs/more-info/controls/more-info-script.ts
View File

@@ -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);
}
`;
}

2
src/dialogs/more-info/controls/more-info-sun.ts
View File

@@ -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;
}
`;
}

2
src/dialogs/more-info/controls/more-info-timer.ts
View File

@@ -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;

30
src/dialogs/more-info/controls/more-info-update.ts
View File

@@ -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);
}
`;
}

2
src/dialogs/more-info/controls/more-info-valve.ts
View File

@@ -173,7 +173,7 @@ class MoreInfoValve extends LitElement {
align-items: center;
}
.main-control > * {
margin: 0 8px;
margin: 0 var(--ha-space-2);
}
`,
];

4
src/dialogs/more-info/controls/more-info-water_heater.ts
View File

@@ -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 {

30
src/dialogs/more-info/controls/more-info-weather.ts
View File

@@ -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;
}

2
src/dialogs/more-info/ha-more-info-history-and-logbook.ts
View File

@@ -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);
}
`;
}

2
src/dialogs/more-info/ha-more-info-history.ts
View File

@@ -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 {

6
src/dialogs/more-info/ha-more-info-info.ts
View File

@@ -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 {

2
src/dialogs/more-info/ha-more-info-logbook.ts
View File

@@ -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 {

3
src/dialogs/more-info/ha-more-info-settings.ts
View File

@@ -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);
}
`,
];

2
src/dialogs/more-info/more-info-content.ts
View File

@@ -119,7 +119,7 @@ class MoreInfoContent extends LitElement {
hui-section {
width: 100%;
display: block;
margin-top: 16px;
margin-top: var(--ha-space-4);
}
`;
}