@mideind/netskrafl-react 2.0.1 → 2.1.0

package/dist/cjs/css/netskrafl.css

@@ -3206,22 +3206,27 @@ div.netskrafl-racktile {
     0% {
         color: white;
         background-color: var(--cancel-button);
+        border-color: var(--cancel-button);
     }
     45% {
         color: white;
         background-color: var(--cancel-button);
+        border-color: var(--cancel-button);
     }
     50% {
         color: black;
         background-color: white;
+        border-color: white;
     }
     95% {
         color: black;
         background-color: white;
+        border-color: white;
     }
     100% {
         color: white;
         background-color: var(--cancel-button);
+        border-color: var(--cancel-button);
     }
 }
 
@@ -3229,22 +3234,27 @@ div.netskrafl-racktile {
     0% {
         color: white;
         background-color: var(--cancel-button);
+        border-color: var(--cancel-button);
     }
     45% {
         color: white;
         background-color: var(--cancel-button);
+        border-color: var(--cancel-button);
     }
     50% {
         color: black;
         background-color: white;
+        border-color: white;
     }
     95% {
         color: black;
         background-color: white;
+        border-color: white;
     }
     100% {
         color: white;
         background-color: var(--cancel-button);
+        border-color: var(--cancel-button);
     }
 }
 
@@ -3252,22 +3262,27 @@ div.netskrafl-racktile {
     0% {
         color: white;
         background-color: var(--cancel-button);
+        border-color: var(--cancel-button);
     }
     45% {
         color: white;
         background-color: var(--cancel-button);
+        border-color: var(--cancel-button);
     }
     50% {
         color: var(--blank-tile);
         background-color: white;
+        border-color: white;
     }
     95% {
         color: var(--blank-tile);
         background-color: white;
+        border-color: white;
     }
     100% {
         color: white;
         background-color: var(--cancel-button);
+        border-color: var(--cancel-button);
     }
 }
 
@@ -3275,22 +3290,65 @@ div.netskrafl-racktile {
     0% {
         color: white;
         background-color: var(--cancel-button);
+        border-color: var(--cancel-button);
     }
     45% {
         color: white;
         background-color: var(--cancel-button);
+        border-color: var(--cancel-button);
     }
     50% {
         color: var(--blank-tile);
         background-color: white;
+        border-color: white;
     }
     95% {
         color: var(--blank-tile);
         background-color: white;
+        border-color: white;
     }
     100% {
         color: white;
         background-color: var(--cancel-button);
+        border-color: var(--cancel-button);
+    }
+}
+
+/* Text-only animation for tiles (background handled by parent td) */
+
+@keyframes selBlinkText {
+    0% {
+        color: white;
+    }
+    45% {
+        color: white;
+    }
+    50% {
+        color: black;
+    }
+    95% {
+        color: black;
+    }
+    100% {
+        color: white;
+    }
+}
+
+@keyframes selBlankText {
+    0% {
+        color: white;
+    }
+    45% {
+        color: white;
+    }
+    50% {
+        color: var(--blank-tile);
+    }
+    95% {
+        color: var(--blank-tile);
+    }
+    100% {
+        color: white;
     }
 }
 
@@ -3367,19 +3425,83 @@ div.netskrafl-racktile {
 }
 
 .netskrafl-container div.sel {
+    background-color: transparent;
+    color: inherit;
+}
+
+div.netskrafl-blanktile.sel {
+    background-color: transparent;
+    color: inherit;
+}
+
+/* Make the parent td also blink when it contains a selected tile */
+
+.netskrafl-container div.rack td:has(> div.sel),
+.netskrafl-container div.board td:has(> div.sel),
+.netskrafl-container table.board td:has(> div.sel) {
     animation: selBlink 1.2s infinite;
     -webkit-animation: selBlink 1.2s infinite;
 }
 
-div.netskrafl-blanktile.sel {
-    animation: selBlank 1.2s infinite;
-    -webkit-animation: selBlank 1.2s infinite;
+/* Make the parent td match the background of an exchange-selected tile */
+
+div.rack td:has(> div.netskrafl-xchgsel) {
+    background-color: var(--human-color);
+    border-color: var(--human-color);
 }
 
 .netskrafl-container td.sel {
     outline: var(--cancel-button) solid 3px;
 }
 
+/* Container focus styling - remove default outline */
+
+.netskrafl-container:focus {
+    outline: none;
+}
+
+/* Keyboard tile placement target indicator */
+
+.netskrafl-container td.keyboard-target {
+    position: relative;
+    background-color: rgba(102, 178, 102, 0.4); /* Light green highlight */
+}
+
+.netskrafl-container td.keyboard-target::after {
+    font-family: "Glyphicons Regular";
+    content: "\E212"; /* right-arrow */
+    position: absolute;
+    top: calc(50% + 1px);
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 15px;
+    color: var(--cancel-button);
+    opacity: 0.8;
+    animation: pulse 1.5s infinite;
+}
+
+.netskrafl-container td.keyboard-target.vertical::after {
+    content: "\E213"; /* down-arrow */
+}
+
+@keyframes pulse {
+    0% {
+        opacity: 0.4;
+    }
+    25% {
+        opacity: 0.8;
+    }
+    50% {
+        opacity: 1;
+    }
+    75% {
+        opacity: 0.8;
+    }
+    100% {
+        opacity: 0.4;
+    }
+}
+
 .netskrafl-container div.xchg {
     cursor: pointer;
 }
@@ -7585,6 +7707,12 @@ div.netskrafl-container input[type="checkbox"] {
     overflow-y: hidden;
 }
 
+/* Container focus styling - remove default outline */
+
+.netskrafl-container:focus {
+    outline: none;
+}
+
 .netskrafl-container div.gatadagsins-main {
     display: flex;
     position: relative;