Update sortable styling (#19169)

src/dialogs/area-filter/area-filter-dialog.ts

@@ -207,7 +207,8 @@ export class DialogAreaFilter
           color: var(--disabled-text-color);
         }
         .handle {
-          cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
         }
         .actions {
           display: flex;

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

@@ -319,7 +319,8 @@ export default class HaAutomationAction extends LitElement {
           overflow: hidden;
         }
         .handle {
-          cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
           padding: 12px;
         }
         .handle ha-svg-icon {

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

@@ -543,7 +543,8 @@ export class HaChooseAction extends LitElement implements ActionElement {
           padding: 0 16px 16px 16px;
         }
         .handle {
-          cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
           padding: 12px;
         }
         .handle ha-svg-icon {

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

@@ -358,7 +358,8 @@ export default class HaAutomationCondition extends LitElement {
           overflow: hidden;
         }
         .handle {
-          cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
           padding: 12px;
         }
         .handle ha-svg-icon {

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

@@ -298,7 +298,8 @@ export default class HaAutomationTrigger extends LitElement {
           overflow: hidden;
         }
         .handle {
-          cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
           padding: 12px;
         }
         .handle ha-svg-icon {

src/panels/config/helpers/forms/ha-input_select-form.ts

@@ -285,7 +285,8 @@ class HaInputSelectForm extends LitElement {
           margin-bottom: 8px;
         }
         .handle {
-          cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
           padding-right: 12px;
         }
         .handle ha-svg-icon {

src/panels/lovelace/cards/hui-todo-list-card.ts

@@ -57,6 +57,7 @@ import { findEntities } from "../common/find-entities";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { TodoListCardConfig } from "./types";
+import { sortableStyles } from "../../../resources/ha-sortable-style";
 
 @customElement("hui-todo-list-card")
 export class HuiTodoListCard extends LitElement implements LovelaceCard {
@@ -619,7 +620,9 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
   }
 
   static get styles(): CSSResultGroup {
-    return css`
+    return [
+      sortableStyles,
+      css`
         ha-card {
           height: 100%;
           box-sizing: border-box;
@@ -741,7 +744,8 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
         }
 
         .handle {
-        cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
           height: 24px;
           padding: 16px 4px;
         }
@@ -773,7 +777,8 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
         .warning {
           color: var(--error-color);
         }
-    `;
+      `,
+    ];
   }
 }
 

src/panels/lovelace/components/hui-entity-editor.ts

@@ -181,7 +181,8 @@ export class HuiEntityEditor extends LitElement {
         }
         .entity .handle {
           padding-right: 8px;
-          cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
           padding-inline-end: 8px;
           padding-inline-start: initial;
           direction: var(--direction);

src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts

@@ -460,7 +460,8 @@ export class HuiCardFeaturesEditor extends LitElement {
         }
         .feature .handle {
           padding-right: 8px;
-          cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
           padding-inline-end: 8px;
           padding-inline-start: initial;
           direction: var(--direction);

src/panels/lovelace/editor/hui-entities-card-row-editor.ts

@@ -243,7 +243,8 @@ export class HuiEntitiesCardRowEditor extends LitElement {
 
         .entity .handle {
           padding-right: 8px;
-          cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
           padding-inline-end: 8px;
           padding-inline-start: initial;
           direction: var(--direction);

src/resources/ha-sortable-style.ts

@@ -34,14 +34,22 @@ export const sortableStyles = css`
 
   .sortable-fallback {
     display: none;
+    opacity: 0;
   }
 
   .sortable-ghost {
+    border: 2px solid var(--primary-color);
+    background: rgba(var(--rgb-primary-color), 0.25);
+    border-radius: 4px;
     opacity: 0.4;
   }
 
-  .sortable-fallback {
-    opacity: 0;
+  .sortable-drag {
+    border-radius: 4px;
+    opacity: 1;
+    background: var(--card-background-color);
+    box-shadow: 0px 4px 8px 3px #00000026;
+    cursor: grabbing;
   }
 
   @keyframes keyframes1 {