diff --git a/src/panels/lovelace/sections/hui-grid-section.ts b/src/panels/lovelace/sections/hui-grid-section.ts index fdf9317d73..8378b3e173 100644 --- a/src/panels/lovelace/sections/hui-grid-section.ts +++ b/src/panels/lovelace/sections/hui-grid-section.ts @@ -65,20 +65,6 @@ export class GridSection extends LitElement implements LovelaceSectionElement { const editMode = Boolean(this.lovelace?.editMode && !this.isStrategy); return html` - ${this._config.title || this.lovelace?.editMode - ? html` -

- ${this._config.title || - this.hass.localize( - "ui.panel.lovelace.editor.section.unnamed_section" - )} -

- ` - : nothing} - ${editMode - ? html` -
-
- - - -
-
- ` - : nothing} - ${section} + ${ + sectionConfig?.title || this.lovelace?.editMode + ? html` +
+

+ ${sectionConfig?.title || + this.hass.localize( + "ui.panel.lovelace.editor.section.unnamed_section" + )} +

+ ${editMode + ? html` +
+ + + +
+ ` + : nothing} +
+ ` + : nothing + } + ${section} + `; } @@ -346,25 +367,6 @@ export class SectionsView extends LitElement implements LovelaceViewElement { } } - .section-actions { - position: absolute; - top: 0; - right: 0; - inset-inline-end: 0; - inset-inline-start: initial; - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - transition: opacity 0.2s ease-in-out; - background-color: rgba(var(--rgb-card-background-color), 0.3); - border-radius: 18px; - background: var(--secondary-background-color); - --mdc-icon-button-size: 36px; - --mdc-icon-size: 20px; - color: var(--primary-text-color); - } - .handle { cursor: grab; padding: 8px; @@ -396,6 +398,55 @@ export class SectionsView extends LitElement implements LovelaceViewElement { margin: 16px 8px; text-align: center; } + + .section-header { + position: relative; + height: var(--row-height); + margin-bottom: var(--row-gap); + display: flex; + flex-direction: column; + justify-content: flex-end; + } + + .section-title { + color: var(--primary-text-color); + font-size: 20px; + font-weight: normal; + margin: 0px; + letter-spacing: 0.1px; + line-height: 32px; + text-align: var(--ha-view-sections-title-text-align, start); + min-height: 32px; + box-sizing: border-box; + padding: 0 10px 10px; + } + + .section-title.placeholder { + color: var(--secondary-text-color); + font-style: italic; + } + + .section-actions { + position: absolute; + height: 36px; + bottom: calc(-1 * var(--row-gap) - 2px); + right: 0; + inset-inline-end: 0; + inset-inline-start: initial; + opacity: 1; + display: flex; + align-items: center; + justify-content: center; + transition: opacity 0.2s ease-in-out; + background-color: rgba(var(--rgb-card-background-color), 0.3); + border-radius: var(--ha-card-border-radius, 12px); + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; + background: var(--secondary-background-color); + --mdc-icon-button-size: 36px; + --mdc-icon-size: 20px; + color: var(--primary-text-color); + } `; } }