Add indent style to automation action, condition, and option editors (#26709)

src/panels/config/automation/action/ha-automation-action-editor.ts

@@ -9,7 +9,7 @@ import { COLLAPSIBLE_ACTION_ELEMENTS } from "../../../../data/action";
 import { migrateAutomationAction, type Action } from "../../../../data/script";
 import type { HomeAssistant } from "../../../../types";
 import "../ha-automation-editor-warning";
-import { editorStyles } from "../styles";
+import { editorStyles, indentStyle } from "../styles";
 import {
   getAutomationActionType,
   type ActionElement,
@@ -118,7 +118,7 @@ export default class HaAutomationActionEditor extends LitElement {
     this._collapsibleElement?.collapseAll?.();
   }
 
-  static styles = editorStyles;
+  static styles = [editorStyles, indentStyle];
 }
 
 declare global {

src/panels/config/automation/condition/ha-automation-condition-editor.ts

@@ -11,7 +11,7 @@ import { expandConditionWithShorthand } from "../../../../data/automation";
 import { COLLAPSIBLE_CONDITION_ELEMENTS } from "../../../../data/condition";
 import type { HomeAssistant } from "../../../../types";
 import "../ha-automation-editor-warning";
-import { editorStyles } from "../styles";
+import { editorStyles, indentStyle } from "../styles";
 import type { ConditionElement } from "./ha-automation-condition-row";
 
 @customElement("ha-automation-condition-editor")
@@ -123,6 +123,7 @@ export default class HaAutomationConditionEditor extends LitElement {
 
   static styles = [
     editorStyles,
+    indentStyle,
     css`
       :host([action]) .card-content {
         padding: 0;

src/panels/config/automation/option/ha-automation-option-row.ts

@@ -40,7 +40,7 @@ import "../action/ha-automation-action";
 import type HaAutomationAction from "../action/ha-automation-action";
 import "../condition/ha-automation-condition";
 import type HaAutomationCondition from "../condition/ha-automation-condition";
-import { editorStyles, rowStyles } from "../styles";
+import { editorStyles, indentStyle, rowStyles } from "../styles";
 
 @customElement("ha-automation-option-row")
 export default class HaAutomationOptionRow extends LitElement {
@@ -413,6 +413,7 @@ export default class HaAutomationOptionRow extends LitElement {
     return [
       rowStyles,
       editorStyles,
+      indentStyle,
       css`
         li[role="separator"] {
           border-bottom-color: var(--divider-color);

src/panels/config/automation/styles.ts

@@ -62,18 +62,31 @@ export const editorStyles = css`
     border-top: 1px solid var(--divider-color);
     border-bottom: 1px solid var(--divider-color);
   }
-  .card-content.indent {
+`;
+
+export const indentStyle = css`
+  .card-content.indent,
+  .selector-row,
+  :host([indent]) ha-form {
     margin-left: 12px;
-    margin-right: -4px;
     padding: 12px 24px 16px 16px;
     border-left: 2px solid var(--ha-color-border-neutral-quiet);
+    border-bottom: 2px solid var(--ha-color-border-neutral-quiet);
+    border-radius: 0;
+    border-bottom-left-radius: var(--ha-border-radius-lg);
   }
   .card-content.indent.selected,
-  :host([selected]) .card-content.indent {
+  :host([selected]) .card-content.indent,
+  .selector-row.parent-selected,
+  :host([selected]) ha-form {
     border-color: var(--primary-color);
-    background-color: var(--ha-color-fill-primary-quiet-resting);
+    background: var(--ha-color-fill-primary-quiet-resting);
-    border-top-right-radius: var(--ha-border-radius-xl);
+    background: linear-gradient(
-    border-bottom-right-radius: var(--ha-border-radius-xl);
+      to right,
+      var(--ha-color-fill-primary-quiet-resting) 0%,
+      var(--ha-color-fill-primary-quiet-resting) 80%,
+      rgba(var(--rgb-primary-color), 0) 100%
+    );
   }
 `;
 

src/panels/config/script/ha-script-field-row.ts

@@ -15,6 +15,7 @@ import { SELECTOR_SELECTOR_BUILDING_BLOCKS } from "../../../data/selector/select
 import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
+import { indentStyle } from "../automation/styles";
 import "./ha-script-field-selector-editor";
 import type HaScriptFieldSelectorEditor from "./ha-script-field-selector-editor";
 
@@ -254,6 +255,7 @@ export default class HaScriptFieldRow extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyle,
+      indentStyle,
       css`
         ha-button-menu,
         ha-icon-button {
@@ -322,18 +324,6 @@ export default class HaScriptFieldRow extends LitElement {
           border-color: var(--state-inactive-color);
           box-shadow: var(--shadow-default), var(--shadow-focus);
         }
-        .selector-row {
-          margin-left: 12px;
-          padding: 12px 4px 16px 16px;
-          margin-right: -4px;
-          border-left: 2px solid var(--ha-color-border-neutral-quiet);
-        }
-        .selector-row.parent-selected {
-          border-color: var(--primary-color);
-          background-color: var(--ha-color-fill-primary-quiet-resting);
-          border-top-right-radius: var(--ha-border-radius-xl);
-          border-bottom-right-radius: var(--ha-border-radius-xl);
-        }
       `,
     ];
   }

src/panels/config/script/ha-script-field-selector-editor.ts

@@ -16,6 +16,7 @@ import type { Field } from "../../../data/script";
 import { SELECTOR_SELECTOR_BUILDING_BLOCKS } from "../../../data/selector/selector_selector";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
+import { indentStyle } from "../automation/styles";
 
 @customElement("ha-script-field-selector-editor")
 export default class HaScriptFieldSelectorEditor extends LitElement {
@@ -183,19 +184,13 @@ export default class HaScriptFieldSelectorEditor extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyle,
+      indentStyle,
       css`
         :host([indent]) ha-form {
           display: block;
           margin-left: 12px;
           padding: 12px 20px 16px 16px;
           margin-right: -4px;
-          border-left: 2px solid var(--ha-color-border-neutral-quiet);
-        }
-        :host([selected]) ha-form {
-          border-color: var(--primary-color);
-          background-color: var(--ha-color-fill-primary-quiet-resting);
-          border-top-right-radius: var(--ha-border-radius-xl);
-          border-bottom-right-radius: var(--ha-border-radius-xl);
         }
       `,
     ];