@mideind/netskrafl-react 3.2.0 → 3.2.2

package/dist/esm/css/netskrafl.css

@@ -387,6 +387,7 @@ div.netskrafl-container {
     --board-cell-border-radius: 2.5px;
     --board-cell-border-width-lg: 2px;
     --board-cell-border-radius-lg: 3.5px;
+    --selection-outline-radius: 3.5px;
     --board-cell-border-color: white;
     --board-tile-line-height-lg: 30px;
     --tab-background: #f3f3f6;
@@ -504,6 +505,7 @@ div.netskrafl-container.legacy-colors {
     --board-cell-border-radius: 0;
     --board-cell-border-width-lg: 1px;
     --board-cell-border-radius-lg: 0;
+    --selection-outline-radius: 3.5px;
     --board-cell-border-color: #e8e8e8;
     --board-tile-line-height-lg: 32px;
 
@@ -522,10 +524,30 @@ div.netskrafl-container.legacy-colors {
     --tab-movelist-background: #d6d1c4;
 
     /* Move list gradients for classic scheme */
-    --humangrad-left: linear-gradient(to right, var(--human-color), var(--tab-movelist-background), var(--tab-movelist-background));
-    --humangrad-right: linear-gradient(to right, var(--tab-movelist-background), var(--tab-movelist-background), var(--human-color));
-    --autoplayergrad-left: linear-gradient(to right, var(--autoplayer-color), var(--tab-movelist-background), var(--tab-movelist-background));
-    --autoplayergrad-right: linear-gradient(to right, var(--tab-movelist-background), var(--tab-movelist-background), var(--autoplayer-color));
+    --humangrad-left: linear-gradient(
+        to right,
+        var(--human-color),
+        var(--tab-movelist-background),
+        var(--tab-movelist-background)
+    );
+    --humangrad-right: linear-gradient(
+        to right,
+        var(--tab-movelist-background),
+        var(--tab-movelist-background),
+        var(--human-color)
+    );
+    --autoplayergrad-left: linear-gradient(
+        to right,
+        var(--autoplayer-color),
+        var(--tab-movelist-background),
+        var(--tab-movelist-background)
+    );
+    --autoplayergrad-right: linear-gradient(
+        to right,
+        var(--tab-movelist-background),
+        var(--tab-movelist-background),
+        var(--autoplayer-color)
+    );
     --move-text-color: black;
     --total-background-color: #b5bdc4;
     --total-margin: 2px;
@@ -544,7 +566,6 @@ div.netskrafl-container.legacy-colors {
     /* ---- Legacy Style Overrides (nested) ---- */
 
     /* Button overrides - use classic "white text on colored background" pattern */
-
 }
 
 div.netskrafl-container.legacy-colors div.recallbtn {
@@ -759,7 +780,6 @@ div.netskrafl-container.legacy-colors div.board div.letterscore {
 /* Rack tile overrides for mobile */
 
 div.netskrafl-container.legacy-colors div.rack div.netskrafl-tile {
-        line-height: 34px;
         margin-left: 0;
         padding-right: 0;
     }
@@ -3954,8 +3974,12 @@ div.rack td:has(> div.netskrafl-xchgsel) {
     border-color: var(--human-color);
 }
 
-.netskrafl-container td.sel {
+.netskrafl-container table.board td.sel,
+.netskrafl-container div.rack td.sel {
     outline: var(--cancel-button) solid 3px;
+    border-radius: var(--selection-outline-radius);
+    position: relative;
+    z-index: 1;
 }
 
 /* Container focus styling - remove default outline */
@@ -7043,19 +7067,27 @@ div.netskrafl-container input[type="checkbox"] {
         text-indent: -4px;
     }
     div.rack div.netskrafl-tile {
-        /* Fill the entire rack slot content area */
+        /* Fill the entire rack slot. Font size and line height are
+        set on the inner .tileletter div, not here, to prevent the
+        tile's font metrics from inflating the table cell height
+        beyond its declared size (table cells treat height as a
+        minimum determined partly by the content's font strut). */
         display: block;
         box-sizing: border-box;
-        font-size: 24px;
-        line-height: 32px;
+        font-size: 0;
+        line-height: 0;
         height: 100%;
         width: 100%;
         padding: 0;
         margin: 0;
+    }
+    div.rack div.netskrafl-tile .tileletter {
+        font-size: 24px;
+        line-height: 32px;
         text-indent: -3px;
     }
-    div.rack div.netskrafl-tile.netskrafl-wide,
-    div.rack div.netskrafl-tile.netskrafl-extra-wide {
+    div.rack div.netskrafl-tile.netskrafl-wide .tileletter,
+    div.rack div.netskrafl-tile.netskrafl-extra-wide .tileletter {
         /* Wide character tile */
         text-indent: -6px;
     }
@@ -7081,7 +7113,7 @@ div.netskrafl-container input[type="checkbox"] {
     }
     div.rack div.letterscore {
         left: auto;
-        right: 1px;
+        right: 2px;
         bottom: 1px;
     }
     div.netskrafl-tile.netskrafl-wide div.letterscore,
@@ -7093,7 +7125,7 @@ div.netskrafl-container input[type="checkbox"] {
     div.rack div.netskrafl-tile.netskrafl-wide div.letterscore,
     div.rack div.netskrafl-tile.netskrafl-extra-wide div.letterscore {
         /* Adjust letter score position for wide tiles */
-        right: 1px;
+        right: 2px;
         left: auto;
     }
     div.netskrafl-tile.dragging div.letterscore {
@@ -7154,6 +7186,8 @@ div.netskrafl-container input[type="checkbox"] {
         max-width: 34px;
         height: 34px;
         width: 34px;
+        /* Override board cell border-width that leaks in via table.board td */
+        border-width: 0;
         border-color: var(--rack-slot-background);
         background-color: var(--rack-slot-background);
         box-shadow: 2px 2px 4px 0 var(--rack-shadow);
@@ -8236,6 +8270,10 @@ div.netskrafl-container input[type="checkbox"] {
     div.netskrafl-container.legacy-colors div.board div.netskrafl-tile {
         line-height: var(--board-tile-line-height-lg);
     }
+    /* No box-shadow on rack slots in legacy scheme */
+    div.netskrafl-container.legacy-colors div.rack td {
+        box-shadow: none;
+    }
 }
 
 /* ================= GÁTA DAGSINS STYLES =============== */