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:
-        0px 0px 8px 4px rgba(var(--rgb-accent-color), 0.8),
-        inset 0px 2px 8px 4px rgba(var(--rgb-accent-color), 0.4);
+      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);
+    }
+    .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:
-        0px 0px 8px 4px rgba(var(--rgb-accent-color), 0.8),
-        inset 0px 2px 8px 4px rgba(var(--rgb-accent-color), 0.4);
+      --md-focus-ring-color: rgba(var(--rgb-accent-color), 0.6);
       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/components/ha-sidebar.ts

@@ -707,7 +707,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           box-sizing: border-box;
         }
         .menu {
-          height: calc(var(--header-height) + var(--safe-area-inset-top));
+          height: var(--header-height);
           box-sizing: border-box;
           display: flex;
           padding: 0 4px;
@@ -728,7 +728,6 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           padding-left: calc(4px + var(--safe-area-inset-left));
           padding-inline-start: calc(4px + var(--safe-area-inset-left));
           padding-inline-end: initial;
-          padding-top: var(--safe-area-inset-top);
         }
         :host([expanded]) .menu {
           width: calc(256px + var(--safe-area-inset-left));
@@ -756,11 +755,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
 
         ha-fade-in,
         ha-md-list {
-          padding: 4px 0;
-          box-sizing: border-box;
           height: calc(
-            100% - var(--header-height) - var(--safe-area-inset-top) -
-              132px - var(--safe-area-inset-bottom)
+            100% - var(--header-height) - 132px - var(--safe-area-inset-bottom)
           );
         }
 
@@ -771,6 +767,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
         }
 
         ha-md-list {
+          padding: 4px 0;
+          box-sizing: border-box;
           overflow-x: hidden;
           background: none;
           margin-left: var(--safe-area-inset-left);

src/layouts/hass-subpage.ts

@@ -98,11 +98,8 @@ class HassSubpage extends LitElement {
           display: flex;
           align-items: center;
           font-size: var(--ha-font-size-xl);
-          height: calc(var(--header-height) + var(--safe-area-inset-top));
+          height: var(--header-height);
           padding: 8px 12px;
-          padding-top: max(8px, var(--safe-area-inset-top));
-          padding-right: max(12px, var(--safe-area-content-inset-right));
-          padding-left: max(12px, var(--safe-area-content-inset-left));
           background-color: var(--app-header-background-color);
           font-weight: var(--ha-font-weight-normal);
           color: var(--app-header-text-color, white);
@@ -112,9 +109,6 @@ class HassSubpage extends LitElement {
         @media (max-width: 599px) {
           .toolbar {
             padding: 4px;
-            padding-top: max(4px, var(--safe-area-inset-top));
-            padding-right: max(4px, var(--safe-area-inset-right));
-            padding-left: max(4px, var(--safe-area-inset-left));
           }
         }
         .toolbar a {
@@ -146,9 +140,7 @@ class HassSubpage extends LitElement {
         .content {
           position: relative;
           width: 100%;
-          height: calc(
-            100% - 1px - var(--header-height) - var(--safe-area-inset-top)
-          );
+          height: calc(100% - 1px - var(--header-height));
           overflow-y: auto;
           overflow: auto;
           -webkit-overflow-scrolling: touch;

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>