Improve imported card container style (#22653)

This commit is contained in:
Paul Bottein 2024-11-04 12:31:22 +01:00 committed by GitHub
parent 32b5d67806
commit 3d9fa462a6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 19 additions and 6 deletions

View File

@ -242,8 +242,9 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
min-height: var(--row-height); min-height: var(--row-height);
} }
.container.edit-mode:not(.import-only) { .container.import-only {
border-start-end-radius: 0px; border: none;
padding: 0 !important;
} }
.card { .card {

View File

@ -1,5 +1,11 @@
import { ResizeController } from "@lit-labs/observers/resize-controller"; import { ResizeController } from "@lit-labs/observers/resize-controller";
import { mdiDelete, mdiDrag, mdiPencil, mdiViewGridPlus } from "@mdi/js"; import {
mdiDelete,
mdiDrag,
mdiEyeOff,
mdiPencil,
mdiViewGridPlus,
} from "@mdi/js";
import type { CSSResultGroup, PropertyValues } from "lit"; import type { CSSResultGroup, PropertyValues } from "lit";
import { LitElement, css, html, nothing } from "lit"; import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
@ -245,6 +251,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
<div class="section imported-cards"> <div class="section imported-cards">
<div class="imported-card-header"> <div class="imported-card-header">
<p class="title"> <p class="title">
<ha-svg-icon .path=${mdiEyeOff}></ha-svg-icon>
${this.hass.localize( ${this.hass.localize(
"ui.panel.lovelace.editor.section.imported_cards_title" "ui.panel.lovelace.editor.section.imported_cards_title"
)} )}
@ -480,9 +487,9 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
} }
.imported-card-header { .imported-card-header {
margin-top: 24px; margin-top: 36px;
padding: 16px 8px; padding: 32px 0 16px 0;
border-top: 2px dashed var(--divider-color); border-top: 4px dotted var(--divider-color);
} }
.imported-card-header .title { .imported-card-header .title {
@ -491,6 +498,11 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
--mdc-icon-size: 18px;
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
} }
.imported-card-header .subtitle { .imported-card-header .subtitle {
margin: 0; margin: 0;