Change drag selected styling

src/components/ha-automation-row.ts

@@ -25,6 +25,8 @@ export class HaAutomationRow extends LitElement {
   @property({ type: Boolean, reflect: true, attribute: "building-block" })
   public buildingBlock = false;
 
+  @property({ type: Boolean, reflect: true }) public highlight?: boolean;
+
   @query(".row")
   private _rowElement?: HTMLDivElement;
 
@@ -168,9 +170,20 @@ export class HaAutomationRow extends LitElement {
       margin: 0 12px;
     }
     :host([sort-selected]) .row {
-      box-shadow:
+      outline: solid;
-        0px 0px 8px 4px rgba(var(--rgb-accent-color), 0.8),
+      outline-color: rgba(var(--rgb-accent-color), 0.6);
-        inset 0px 2px 8px 4px rgba(var(--rgb-accent-color), 0.4);
+      outline-offset: -2px;
+      outline-width: 2px;
+      background-color: rgba(var(--rgb-accent-color), 0.08);
+    }
+    .row:hover {
+      background-color: rgba(var(--rgb-primary-text-color), 0.04);
+    }
+    :host([highlight]) .row {
+      background-color: rgba(var(--rgb-primary-color), 0.08);
+    }
+    :host([highlight]) .row:hover {
+      background-color: rgba(var(--rgb-primary-color), 0.16);
     }
   `;
 }

src/components/ha-items-display-editor.ts

@@ -393,10 +393,13 @@ export class HaItemDisplayEditor extends LitElement {
       --md-list-item-one-line-container-height: 48px;
     }
     ha-md-list-item.drag-selected {
-      box-shadow:
+      --md-focus-ring-color: rgba(var(--rgb-accent-color), 0.6);
-        0px 0px 8px 4px rgba(var(--rgb-accent-color), 0.8),
-        inset 0px 2px 8px 4px rgba(var(--rgb-accent-color), 0.4);
       border-radius: 8px;
+      outline: solid;
+      outline-color: rgba(var(--rgb-accent-color), 0.6);
+      outline-offset: -2px;
+      outline-width: 2px;
+      background-color: rgba(var(--rgb-accent-color), 0.08);
     }
     ha-md-list-item ha-icon-button {
       margin-left: -12px;

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

@@ -151,6 +151,8 @@ export default class HaAutomationActionRow extends LitElement {
 
   @property({ type: Boolean }) public last?: boolean;
 
+  @property({ type: Boolean }) public highlight?: boolean;
+
   @property({ type: Boolean, attribute: "sidebar" })
   public optionsInSidebar = false;
 
@@ -447,6 +449,7 @@ export default class HaAutomationActionRow extends LitElement {
                 ))}
               .collapsed=${this._collapsed}
               .selected=${this._selected}
+              .highlight=${this.highlight}
               @toggle-collapsed=${this._toggleCollapse}
               .buildingBlock=${[
                 ...ACTION_BUILDING_BLOCKS,

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

@@ -97,7 +97,7 @@ export default class HaAutomationAction extends LitElement {
                 @move-up=${this._moveUp}
                 @value-changed=${this._actionChanged}
                 .hass=${this.hass}
-                ?highlight=${this.highlightedActions?.includes(action)}
+                .highlight=${this.highlightedActions?.includes(action)}
                 .optionsInSidebar=${this.optionsInSidebar}
                 .sortSelected=${this._rowSortSelected === idx}
                 @stop-sort-selection=${this._stopSortSelection}

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

@@ -116,6 +116,8 @@ export default class HaAutomationConditionRow extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
+  @property({ type: Boolean }) public highlight?: boolean;
+
   @property({ type: Boolean, attribute: "sort-selected" })
   public sortSelected = false;
 
@@ -355,6 +357,7 @@ export default class HaAutomationConditionRow extends LitElement {
               )}
               .collapsed=${this._collapsed}
               .selected=${this._selected}
+              .highlight=${this.highlight}
               @click=${this._toggleSidebar}
               @toggle-collapsed=${this._toggleCollapse}
               .buildingBlock=${CONDITION_BUILDING_BLOCKS.includes(

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

@@ -175,7 +175,7 @@ export default class HaAutomationCondition extends LitElement {
                 @move-up=${this._moveUp}
                 @value-changed=${this._conditionChanged}
                 .hass=${this.hass}
-                ?highlight=${this.highlightedConditions?.includes(cond)}
+                .highlight=${this.highlightedConditions?.includes(cond)}
                 .optionsInSidebar=${this.optionsInSidebar}
                 .sortSelected=${this._rowSortSelected === idx}
                 @stop-sort-selection=${this._stopSortSelection}

src/panels/config/automation/styles.ts

@@ -37,12 +37,6 @@ export const rowStyles = css`
   ha-tooltip {
     cursor: default;
   }
-  :host([highlight]) ha-card {
-    --shadow-default: var(--ha-card-box-shadow, 0 0 0 0 transparent);
-    --shadow-focus: 0 0 0 1px var(--state-inactive-color);
-    border-color: var(--state-inactive-color);
-    box-shadow: var(--shadow-default), var(--shadow-focus);
-  }
   .hidden {
     display: none;
   }

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

@@ -113,6 +113,8 @@ export default class HaAutomationTriggerRow extends LitElement {
 
   @property({ type: Boolean }) public last?: boolean;
 
+  @property({ type: Boolean }) public highlight?: boolean;
+
   @property({ type: Boolean, attribute: "sidebar" })
   public optionsInSidebar = false;
 
@@ -349,6 +351,7 @@ export default class HaAutomationTriggerRow extends LitElement {
               this.trigger.enabled === false}
               @click=${this._toggleSidebar}
               .selected=${this._selected}
+              .highlight=${this.highlight}
               .sortSelected=${this.sortSelected}
               >${this._selected
                 ? "selected"

src/panels/config/automation/trigger/ha-automation-trigger.ts

@@ -92,7 +92,7 @@ export default class HaAutomationTrigger extends LitElement {
                 .hass=${this.hass}
                 .disabled=${this.disabled}
                 .narrow=${this.narrow}
-                ?highlight=${this.highlightedTriggers?.includes(trg)}
+                .highlight=${this.highlightedTriggers?.includes(trg)}
                 .optionsInSidebar=${this.optionsInSidebar}
                 .sortSelected=${this._rowSortSelected === idx}
                 @stop-sort-selection=${this._stopSortSelection}

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

@@ -32,6 +32,8 @@ export default class HaScriptFieldRow extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
+  @property({ type: Boolean }) public highlight?: boolean;
+
   @state() private _yamlMode = false;
 
   @state() private _selected = false;
@@ -61,6 +63,7 @@ export default class HaScriptFieldRow extends LitElement {
           left-chevron
           @toggle-collapsed=${this._toggleCollapse}
           .collapsed=${this._collapsed}
+          .highlight=${this.highlight}
         >
           <h3 slot="header">${this.key}</h3>
 
@@ -83,6 +86,7 @@ export default class HaScriptFieldRow extends LitElement {
             .leftChevron=${SELECTOR_SELECTOR_BUILDING_BLOCKS.includes(
               Object.keys(this.field.selector)[0]
             )}
+            .highlight=${this.highlight}
           >
             <h3 slot="header">
               ${this.hass.localize(
@@ -331,13 +335,6 @@ export default class HaScriptFieldRow extends LitElement {
         li[role="separator"] {
           border-bottom-color: var(--divider-color);
         }
-        :host([highlight]) ha-card {
-          --shadow-default: var(--ha-card-box-shadow, 0 0 0 0 transparent);
-          --shadow-focus: 0 0 0 1px var(--state-inactive-color);
-          border-color: var(--state-inactive-color);
-          box-shadow: var(--shadow-default), var(--shadow-focus);
-        }
-
         .selector-row {
           padding: 12px 0 16px 16px;
         }

src/panels/config/script/ha-script-fields.ts

@@ -43,7 +43,7 @@ export default class HaScriptFields extends LitElement {
                   .disabled=${this.disabled}
                   @value-changed=${this._fieldChanged}
                   .hass=${this.hass}
-                  ?highlight=${this.highlightedFields?.[key] !== undefined}
+                  .highlight=${this.highlightedFields?.[key] !== undefined}
                   .narrow=${this.narrow}
                 >
                 </ha-script-field-row>