${
@@ -59,9 +58,9 @@ export class HuiCardPicker extends hassLocalizeLitMixin(LitElement) {
`;
}
- private renderStyle(): TemplateResult {
- return html`
-
- `;
+ @media all and (max-width: 450px), all and (max-height: 500px) {
+ .cards-container paper-button {
+ flex: 1 0 33%;
+ }
+ }
+ `,
+ ];
}
private _cardPicked(ev: Event): void {
diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts
index 292b4c9026..7949e66c06 100644
--- a/src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts
@@ -1,12 +1,16 @@
import {
html,
+ css,
LitElement,
PropertyDeclarations,
TemplateResult,
+ CSSResult,
} from "lit-element";
import "@polymer/paper-dialog/paper-dialog";
import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
+import { haStyleDialog } from "../../../../resources/ha-style";
+
import "./hui-card-picker";
import { HomeAssistant } from "../../../../types";
import { hassLocalizeLitMixin } from "../../../../mixins/lit-localize-mixin";
@@ -51,6 +55,31 @@ export class HuiDialogPickCard extends hassLocalizeLitMixin(LitElement) {
private _skipPick() {
this.cardPicked!({ type: "" });
}
+
+ static get styles(): CSSResult[] {
+ return [
+ haStyleDialog,
+ css`
+ @media all and (max-width: 450px), all and (max-height: 500px) {
+ /* overrule the ha-style-dialog max-height on small screens */
+ paper-dialog {
+ max-height: 100%;
+ height: 100%;
+ }
+ }
+
+ @media all and (min-width: 660px) {
+ paper-dialog {
+ width: 650px;
+ }
+ }
+
+ paper-dialog {
+ max-width: 650px;
+ }
+ `,
+ ];
+ }
}
declare global {
diff --git a/src/panels/lovelace/editor/card-editor/hui-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-edit-card.ts
index 45954811df..519784a0f1 100644
--- a/src/panels/lovelace/editor/card-editor/hui-edit-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-edit-card.ts
@@ -81,82 +81,6 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
};
}
- static get styles(): CSSResult[] {
- return [
- haStyleDialog,
- css`
- @media all and (max-width: 450px), all and (max-height: 500px) {
- :host::before {
- content: "";
- position: fixed;
- z-index: -1;
- top: 0px;
- left: 0px;
- right: 0px;
- bottom: 0px;
- background-color: inherit;
- }
- /* overrule the ha-style-dialog max-height on small screens */
- paper-dialog {
- max-height: 100%;
- height: 100%;
- }
- }
-
- @media all and (min-width: 660px) {
- paper-dialog {
- width: 650px;
- }
- }
-
- paper-dialog {
- max-width: 650px;
- }
-
- .center {
- margin-left: auto;
- margin-right: auto;
- }
- .margin-bot {
- margin-bottom: 24px;
- }
- paper-button paper-spinner {
- width: 14px;
- height: 14px;
- margin-right: 20px;
- }
- paper-spinner {
- display: none;
- }
- paper-spinner[active] {
- display: block;
- }
- .hidden {
- display: none;
- }
- .element-editor {
- margin-bottom: 8px;
- }
- .error {
- color: #ef5350;
- border-bottom: 1px solid #ef5350;
- }
- hr {
- color: #000;
- opacity: 0.12;
- }
- hui-card-preview {
- padding-top: 8px;
- margin-bottom: 4px;
- display: block;
- }
- .toggle-button {
- margin-right: auto;
- }
- `,
- ];
- }
-
private get _dialog(): PaperDialogElement {
return this.shadowRoot!.querySelector("paper-dialog")!;
}
@@ -479,6 +403,72 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
this.closeDialog!();
}
}
+
+ static get styles(): CSSResult[] {
+ return [
+ haStyleDialog,
+ css`
+ @media all and (max-width: 450px), all and (max-height: 500px) {
+ /* overrule the ha-style-dialog max-height on small screens */
+ paper-dialog {
+ max-height: 100%;
+ height: 100%;
+ }
+ }
+
+ @media all and (min-width: 660px) {
+ paper-dialog {
+ width: 650px;
+ }
+ }
+
+ paper-dialog {
+ max-width: 650px;
+ }
+
+ .center {
+ margin-left: auto;
+ margin-right: auto;
+ }
+ .margin-bot {
+ margin-bottom: 24px;
+ }
+ paper-button paper-spinner {
+ width: 14px;
+ height: 14px;
+ margin-right: 20px;
+ }
+ paper-spinner {
+ display: none;
+ }
+ paper-spinner[active] {
+ display: block;
+ }
+ .hidden {
+ display: none;
+ }
+ .element-editor {
+ margin-bottom: 8px;
+ }
+ .error {
+ color: #ef5350;
+ border-bottom: 1px solid #ef5350;
+ }
+ hr {
+ color: #000;
+ opacity: 0.12;
+ }
+ hui-card-preview {
+ padding-top: 8px;
+ margin-bottom: 4px;
+ display: block;
+ }
+ .toggle-button {
+ margin-right: auto;
+ }
+ `,
+ ];
+ }
}
declare global {
diff --git a/src/panels/lovelace/editor/hui-dialog-save-config.ts b/src/panels/lovelace/editor/hui-dialog-save-config.ts
index b13b52cbd0..2499bf2b4d 100644
--- a/src/panels/lovelace/editor/hui-dialog-save-config.ts
+++ b/src/panels/lovelace/editor/hui-dialog-save-config.ts
@@ -1,8 +1,10 @@
import {
html,
+ css,
LitElement,
PropertyDeclarations,
TemplateResult,
+ CSSResult,
} from "lit-element";
import "@polymer/paper-spinner/paper-spinner";
@@ -12,6 +14,8 @@ import "@polymer/paper-dialog/paper-dialog";
import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
import "@polymer/paper-button/paper-button";
+import { haStyleDialog } from "../../../resources/ha-style";
+
import { HomeAssistant } from "../../../types";
import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
@@ -47,7 +51,6 @@ export class HuiSaveConfig extends hassLocalizeLitMixin(LitElement) {
protected render(): TemplateResult | void {
return html`
- ${this.renderStyle()}
${this.localize("ui.panel.lovelace.editor.save_config.header")}
@@ -79,27 +82,6 @@ export class HuiSaveConfig extends hassLocalizeLitMixin(LitElement) {
`;
}
- private renderStyle(): TemplateResult {
- return html`
-
- `;
- }
-
private _closeDialog(): void {
this._dialog.close();
}
@@ -120,6 +102,40 @@ export class HuiSaveConfig extends hassLocalizeLitMixin(LitElement) {
this._saving = false;
}
}
+
+ static get styles(): CSSResult[] {
+ return [
+ haStyleDialog,
+ css`
+ @media all and (max-width: 450px), all and (max-height: 500px) {
+ /* overrule the ha-style-dialog max-height on small screens */
+ paper-dialog {
+ max-height: 100%;
+ height: 100%;
+ }
+ }
+ @media all and (min-width: 660px) {
+ paper-dialog {
+ width: 650px;
+ }
+ }
+ paper-dialog {
+ max-width: 650px;
+ }
+ paper-spinner {
+ display: none;
+ }
+ paper-spinner[active] {
+ display: block;
+ }
+ paper-button paper-spinner {
+ width: 14px;
+ height: 14px;
+ margin-right: 20px;
+ }
+ `,
+ ];
+ }
}
declare global {
diff --git a/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts b/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts
index 3f15f505a6..247e7a3f79 100644
--- a/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts
+++ b/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts
@@ -1,8 +1,10 @@
import {
html,
+ css,
LitElement,
PropertyDeclarations,
TemplateResult,
+ CSSResult,
} from "lit-element";
import "@polymer/paper-spinner/paper-spinner";
import "@polymer/paper-dialog/paper-dialog";
@@ -11,6 +13,9 @@ import "@polymer/paper-dialog/paper-dialog";
import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
import "@polymer/paper-button/paper-button";
import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
+
+import { haStyleDialog } from "../../../../resources/ha-style";
+
import "./hui-lovelace-editor";
import { HomeAssistant } from "../../../../types";
import { LovelaceConfig } from "../../../../data/lovelace";
@@ -53,7 +58,6 @@ export class HuiDialogEditLovelace extends hassLocalizeLitMixin(LitElement) {
protected render(): TemplateResult | void {
return html`
- ${this.renderStyle()}
Edit Lovelace
@@ -125,11 +129,24 @@ export class HuiDialogEditLovelace extends hassLocalizeLitMixin(LitElement) {
return JSON.stringify(this._config) !== JSON.stringify(lovelaceConfig);
}
- private renderStyle(): TemplateResult {
- return html`
-
- `;
+ `,
+ ];
}
}
diff --git a/src/panels/lovelace/editor/view-editor/hui-edit-view.ts b/src/panels/lovelace/editor/view-editor/hui-edit-view.ts
index 537a1ed379..f03ad127e4 100644
--- a/src/panels/lovelace/editor/view-editor/hui-edit-view.ts
+++ b/src/panels/lovelace/editor/view-editor/hui-edit-view.ts
@@ -1,8 +1,10 @@
import {
html,
+ css,
LitElement,
PropertyDeclarations,
TemplateResult,
+ CSSResult,
} from "lit-element";
import "@polymer/paper-spinner/paper-spinner";
@@ -15,6 +17,9 @@ import "@polymer/paper-icon-button/paper-icon-button.js";
import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
import "@polymer/paper-button/paper-button";
import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
+
+import { haStyleDialog } from "../../../../resources/ha-style";
+
import "../../components/hui-entity-editor";
import "./hui-view-editor";
import { HomeAssistant } from "../../../../types";
@@ -115,7 +120,6 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) {
break;
}
return html`
- ${this.renderStyle()}
${this.localize("ui.panel.lovelace.editor.edit_view.header")}
- paper-dialog {
- width: 650px;
- }
- paper-tabs {
- --paper-tabs-selection-bar-color: var(--primary-color);
- text-transform: uppercase;
- border-bottom: 1px solid rgba(0, 0, 0, 0.1);
- }
- paper-button paper-spinner {
- width: 14px;
- height: 14px;
- margin-right: 20px;
- }
- paper-icon-button.delete {
- margin-right: auto;
- color: var(--secondary-text-color);
- }
- paper-spinner {
- display: none;
- }
- paper-spinner[active] {
- display: block;
- }
- .hidden {
- display: none;
- }
- .error {
- color: #ef5350;
- border-bottom: 1px solid #ef5350;
- }
-
- `;
- }
-
private async _delete() {
if (this._cards && this._cards.length > 0) {
alert(
@@ -297,6 +264,57 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) {
private get _creatingView(): boolean {
return this.viewIndex === undefined;
}
+
+ static get styles(): CSSResult[] {
+ return [
+ haStyleDialog,
+ css`
+ @media all and (max-width: 450px), all and (max-height: 500px) {
+ /* overrule the ha-style-dialog max-height on small screens */
+ paper-dialog {
+ max-height: 100%;
+ height: 100%;
+ }
+ }
+ @media all and (min-width: 660px) {
+ paper-dialog {
+ width: 650px;
+ }
+ }
+ paper-dialog {
+ max-width: 650px;
+ }
+ paper-tabs {
+ --paper-tabs-selection-bar-color: var(--primary-color);
+ text-transform: uppercase;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+ }
+ paper-button paper-spinner {
+ width: 14px;
+ height: 14px;
+ margin-right: 20px;
+ }
+ paper-icon-button.delete {
+ margin-right: auto;
+ color: var(--secondary-text-color);
+ }
+ paper-spinner {
+ display: none;
+ }
+ paper-spinner[active] {
+ display: block;
+ }
+ .hidden {
+ display: none;
+ }
+ .error {
+ color: #ef5350;
+ border-bottom: 1px solid #ef5350;
+ }
+
+ `,
+ ];
+ }
}
declare global {