chore: Created a separate CSS class for the invalid parts ("invalid-part-instance-cover") with a separate visual styling.

Author: hummelstrand

packages/webui/src/client/styles/rundownView.scss

@@ -1099,19 +1099,38 @@ svg.icon {
 		}
 		.segment-timeline__part {
 			.segment-timeline__part__invalid-cover {
+				mix-blend-mode: color-burn;
 				background-image:
 					repeating-linear-gradient(
 						45deg,
 						var(--invalid-reason-color-transparent) 0%,
-						var(--invalid-reason-color-transparent) 4px,
-						var(--invalid-reason-color-opaque) 4px,
+						var(--invalid-reason-color-transparent) 6px,
+						var(--invalid-reason-color-opaque) 6px,
 						var(--invalid-reason-color-opaque) 8px
 					),
 					repeating-linear-gradient(
 						-45deg,
 						var(--invalid-reason-color-transparent) 0%,
-						var(--invalid-reason-color-transparent) 4px,
-						var(--invalid-reason-color-opaque) 4px,
+						var(--invalid-reason-color-transparent) 6px,
+						var(--invalid-reason-color-opaque) 6px,
+						var(--invalid-reason-color-opaque) 8px
+					) !important;
+			}
+			.segment-timeline__part__invalid-part-instance-cover {
+				mix-blend-mode: saturation;
+				background-image:
+					repeating-linear-gradient(
+						45deg,
+						var(--invalid-reason-color-transparent) 0%,
+						var(--invalid-reason-color-transparent) 6px,
+						var(--invalid-reason-color-opaque) 6px,
+						var(--invalid-reason-color-opaque) 8px
+					),
+					repeating-linear-gradient(
+						-45deg,
+						var(--invalid-reason-color-transparent) 0%,
+						var(--invalid-reason-color-transparent) 6px,
+						var(--invalid-reason-color-opaque) 6px,
 						var(--invalid-reason-color-opaque) 8px
 					) !important;
 			}
@@ -1583,6 +1602,32 @@ svg.icon {
 					);
 			}
 
+			.segment-timeline__part__invalid-part-instance-cover {
+				position: absolute;
+				top: 0;
+				left: 1px;
+				bottom: 0;
+				right: 1px;
+				z-index: 10;
+				pointer-events: all;
+				mix-blend-mode: saturation; 
+				background-image:
+					repeating-linear-gradient(
+						45deg,
+						var(--invalid-reason-color-transparent) 0%,
+						var(--invalid-reason-color-transparent) 7px,
+						var(--invalid-reason-color-opaque) 7px,
+						var(--invalid-reason-color-opaque) 10px
+					),
+					repeating-linear-gradient(
+						-45deg,
+						var(--invalid-reason-color-transparent) 0%,
+						var(--invalid-reason-color-transparent) 7px,
+						var(--invalid-reason-color-opaque) 7px,
+						var(--invalid-reason-color-opaque) 10px
+					);
+			}
+
 			.segment-timeline__part__floated-cover {
 				position: absolute;
 				top: 0;

packages/webui/src/client/ui/SegmentStoryboard/SegmentStoryboard.scss

@@ -623,6 +623,31 @@ $break-width: 35rem;
 				var(--invalid-reason-color-opaque) 10px
 			);
 	}
+	> .segment-storyboard__part__invalid-part-instance-cover{
+		position: absolute;
+		top: 0;
+		left: 1px;
+		bottom: 0;
+		right: 1px;
+		z-index: 1;
+		pointer-events: all;
+		mix-blend-mode: saturation;
+		background-image:
+			repeating-linear-gradient(
+				45deg,
+				var(--invalid-reason-color-transparent) 0%,
+				var(--invalid-reason-color-transparent) 5px,
+				var(--invalid-reason-color-opaque) 5px,
+				var(--invalid-reason-color-opaque) 10px
+			),
+			repeating-linear-gradient(
+				-45deg,
+				var(--invalid-reason-color-transparent) 0%,
+				var(--invalid-reason-color-transparent) 5px,
+				var(--invalid-reason-color-opaque) 5px,
+				var(--invalid-reason-color-opaque) 10px
+			);
+	}
 
 	> .segment-storyboard__part__floated-cover {
 		position: absolute;