css added

Author: Dileepadari

build/media_source/com_workflow/scss/components/_workflow-graph-custom.scss

@@ -4,45 +4,22 @@
   background-size: 20px 20px;
 }
 
-.min-vh-80 {
-  height: 80vh;
-}
-
-.min-width-0 {
-  min-width: 0;
-}
-
-.h-40 {
-  height: 40px;
-}
-
-.end-20-px {
-  right: 20px !important;
-}
-.top-25-px {
-  top: 25px !important;
-}
-
-.z-10 {
-  z-index: 10;
-}
-
-.z-20 {
-  z-index: 20;
-}
+.min-vh-80 { height: 80vh; }
+.min-width-0 { min-width: 0; }
+.h-40 { height: 40px; }
+.end-20-px { right: 20px !important; }
+.top-25-px { top: 25px !important; }
+.z-10 { z-index: 10; }
+.z-20 { z-index: 20; }
 
 /* ----- Edges ----- */
 .vue-flow__edge-path {
   stroke-width: 2;
   transition: stroke .2s ease, stroke-width .2s ease;
 }
-
-.vue-flow__edge.selected .vue-flow__edge-path {
-  stroke: var(--primary);
-  stroke-width: 3;
-}
-
+.vue-flow__edge.selected .vue-flow__edge-path,
 .vue-flow__edge:hover .vue-flow__edge-path {
+  stroke: var(--primary);
   stroke-width: 3;
 }
 
@@ -57,7 +34,6 @@
   border: 1px solid var(--border);
   border-radius: 4px;
 }
-
 .vue-flow__edge-label:hover {
   background: var(--gray-100);
   border-color: var(--gray-400);
@@ -70,23 +46,14 @@
 }
 
 /* ----- Nodes ----- */
-.stage-node {
-  position: relative;
-}
-
+.stage-node { position: relative; }
 .stage-node .edge-handler {
   width: 12px !important;
   height: 12px !important;
   background: var(--vf-node-text);
 }
-
-.stage-node:hover .vue-flow__handle {
-  opacity: 1;
-}
-
-.vue-flow__node-stage {
-  max-width: 250px !important;
-}
+.stage-node:hover .vue-flow__handle { opacity: 1; }
+.vue-flow__node-stage { max-width: 250px !important; }
 
 /* ----- Handle ----- */
 .vue-flow__handle {
@@ -99,7 +66,6 @@
   background-color: #000;
   box-shadow: 0 4px 10px rgba(0, 0, 0, .6);
 }
-
 .stage-card-actions button {
   --btn-padding-x: 2px !important;
   --btn-padding-y: 0 !important;
@@ -113,53 +79,128 @@
   line-clamp: 2;
 }
 
-/* ----- Accessibility ----- */
-.sr-only,
+/* ----- Accessibility Utilities ----- */
 .visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+/* Focus indicators */
+:focus {
+  outline: 3px solid #005fcc !important;
+  outline-offset: 3px !important;
+  box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.4) !important;
+}
+
+/* Skip links */
+.skip-link {
   position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}
-
-/* ----- Custom Controls ----- */
-.custom-controls {
-  position: absolute;
-  right: 20px;
-  bottom: 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  padding: 2px;
-  color: var(--black);
-  background-color: var(--backdrop-bg);
-  border-radius: 4px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
-}
-
-.custom-controls-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  color: var(--primary);
-  cursor: pointer;
-  background-color: var(--bg-normal);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-}
-
-.custom-controls-button:hover {
-  background-color: var(--bg-reverted);
-}
-
-.custom-controls-button.active {
-  color: var(--white);
-  background-color: var(--primary);
+  top: -40px;
+  left: 6px;
+  background: #0d6efd;
+  color: #fff;
+  padding: 8px;
+  text-decoration: none;
+  border-radius: 3px;
+  z-index: 9999;
+  transition: top 0.3s;
+}
+.skip-link:focus { top: 6px; }
+/* Ensure child elements inside groups remain usable */
+.vue-flow [role="group"] {
+  pointer-events: none !important;
+  user-select: none;
+}
+.vue-flow [role="group"] > * {
+  pointer-events: auto;
+}
+
+/* ----- Color Contrast for Badges ----- */
+.badge.bg-warning { color: #000; }
+.badge.bg-success,
+.badge.bg-danger { color: #fff; }
+
+/* Add icons + text indicators */
+.badge.bg-success::before { content: "✓ "; font-weight: bold; }
+.badge.bg-danger::before { content: "✗ "; font-weight: bold; }
+.badge.bg-warning::before { content: "⚠ "; font-weight: bold; }
+
+/* Stage-node states */
+.stage-node[data-published="true"] { border-left: 6px solid #28a745 !important; }
+.stage-node[data-published="false"] { border-left: 6px dashed #dc3545 !important; }
+.stage-node[data-default="true"] {
+  border: 4px double #ffc107 !important;
+  background-image: repeating-linear-gradient(
+    45deg, transparent, transparent 10px,
+    rgba(255,193,7,.1) 10px, rgba(255,193,7,.1) 20px
+  ) !important;
+}
+
+/* ----- High Contrast Mode ----- */
+@media (prefers-contrast: high), (forced-colors: active), screen and (-ms-high-contrast: active) {
+  .stage-node,
+  .edge-label,
+  .workflow-browser-actions-list,
+  .custom-controls-button,
+  .badge {
+    border: 2px solid ButtonText !important;
+    background: ButtonFace !important;
+    color: ButtonText !important;
+    forced-color-adjust: none !important;
+  }
+  :focus {
+    outline: 3px solid Highlight !important;
+    background: Highlight !important;
+    color: HighlightText !important;
+  }
+}
+
+/* ----- Reduced Motion ----- */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    transition: none !important;
+    animation: none !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* ----- Touch Targets ----- */
+@media (pointer: coarse) {
+  button,
+  [role="button"],
+  [role="menuitem"],
+  .stage-node,
+  .edge-label,
+  .custom-controls-button {
+    min-height: 48px !important;
+    min-width: 48px !important;
+    padding: 14px 18px !important;
+  }
+}
+
+/* ----- Print Styles ----- */
+@media print {
+  .stage-node,
+  .edge-label {
+    background: #fff !important;
+    color: #000 !important;
+    border: 2px solid #000 !important;
+    box-shadow: none !important;
+  }
+  .workflow-browser-actions-list,
+  .stage-card-actions,
+  .vue-flow__controls,
+  .custom-controls { display: none !important; }
+  .badge::after {
+    content: " (" attr(title) ")" !important;
+    font-size: 11px !important;
+    font-style: italic !important;
+  }
 }