@mideind/netskrafl-react 3.2.1 → 3.2.3

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;
 
@@ -778,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;
     }
@@ -2320,18 +2321,6 @@ div.netskrafl-tile.dragging div.letterscore {
     }
 }
 
-@-webkit-keyframes expand {
-    0% {
-        transform: scale(1);
-    }
-    40% {
-        transform: scale(1.05);
-    }
-    100% {
-        transform: scale(1);
-    }
-}
-
 @keyframes slidein {
     0% {
         transform: scale(0);
@@ -2341,15 +2330,6 @@ div.netskrafl-tile.dragging div.letterscore {
     }
 }
 
-@-webkit-keyframes slidein {
-    0% {
-        transform: scale(0);
-    }
-    100% {
-        transform: scale(1);
-    }
-}
-
 .netskrafl-container div.login-btn-large {
     text-align: center;
     font-size: 19px;
@@ -2506,7 +2486,6 @@ div.netskrafl-tile.dragging div.letterscore {
 .netskrafl-container div.right-tab.chat-alert > span.glyphicon {
     color: var(--cancel-button);
     animation: redBlink 1s infinite;
-    -webkit-animation: redBlink 1s infinite;
 }
 
 .netskrafl-container div.right-area {
@@ -2891,21 +2870,6 @@ div.netskrafl-tile.dragging div.letterscore {
     }
 }
 
-@-webkit-keyframes colorPulseMobile {
-    0% {
-        transform: scale(1);
-    }
-    40% {
-        transform: scale(1.3);
-    }
-    60% {
-        transform: scale(1.3);
-    }
-    100% {
-        transform: scale(1);
-    }
-}
-
 .netskrafl-container span.score-mobile {
     display: inline-block;
     font-weight: 400;
@@ -2915,7 +2879,6 @@ div.netskrafl-tile.dragging div.letterscore {
 
 .netskrafl-container div.submitmove#move-mobile.word-great span.score-mobile {
     animation: colorPulseMobile 1.5s infinite;
-    -webkit-animation: colorPulseMobile 1.5s infinite;
 }
 
 .netskrafl-container div.submitmove#move-mobile span.glyphicon {
@@ -3753,128 +3716,6 @@ div.netskrafl-racktile {
     }
 }
 
-@-webkit-keyframes selBlink {
-    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);
-    }
-}
-
-@keyframes selBlank {
-    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);
-    }
-}
-
-@-webkit-keyframes selBlank {
-    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;
-    }
-}
-
 @keyframes redBlink {
     0% {
         opacity: 1;
@@ -3893,24 +3734,6 @@ div.netskrafl-racktile {
     }
 }
 
-@-webkit-keyframes redBlink {
-    0% {
-        opacity: 1;
-    }
-    30% {
-        opacity: 1;
-    }
-    50% {
-        opacity: 0;
-    }
-    70% {
-        opacity: 1;
-    }
-    100% {
-        opacity: 1;
-    }
-}
-
 @keyframes opacityBlink {
     0% {
         opacity: 1;
@@ -3929,24 +3752,6 @@ div.netskrafl-racktile {
     }
 }
 
-@-webkit-keyframes opacityBlink {
-    0% {
-        opacity: 1;
-    }
-    25% {
-        opacity: 1;
-    }
-    75% {
-        opacity: 1;
-    }
-    80% {
-        opacity: 0.1;
-    }
-    100% {
-        opacity: 0.1;
-    }
-}
-
 .netskrafl-container div.sel {
     background-color: transparent;
     color: inherit;
@@ -3963,7 +3768,6 @@ div.netskrafl-blanktile.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;
 }
 
 /* Make the parent td match the background of an exchange-selected tile */
@@ -3973,8 +3777,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 */
@@ -4047,15 +3855,6 @@ div.netskrafl-xchgsel {
     }
 }
 
-@-webkit-keyframes fresh-appear {
-    0% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
-}
-
 div.netskrafl-freshtile {
     color: white;
     background-color: var(--autoplayer-color);
@@ -4064,10 +3863,6 @@ div.netskrafl-freshtile {
     animation-duration: 100ms;
     animation-delay: 0s;
     animation-fill-mode: forwards;
-    -webkit-animation-name: fresh-appear;
-    -webkit-animation-duration: 100ms;
-    -webkit-animation-delay: 0s;
-    -webkit-animation-fill-mode: forwards;
 }
 
 .netskrafl-container div.highlight0 {
@@ -4657,26 +4452,8 @@ div.highlight1.netskrafl-blanktile {
     }
 }
 
-@-webkit-keyframes colorPulse {
-    0% {
-        color: var(--ok-button);
-    }
-    40% {
-        color: var(--cancel-button);
-        transform: scale(1.05);
-    }
-    60% {
-        color: var(--cancel-button);
-        transform: scale(1.05);
-    }
-    100% {
-        color: var(--ok-button);
-    }
-}
-
 .netskrafl-container div.score.word-great {
     animation: colorPulse 1.5s infinite;
-    -webkit-animation: colorPulse 1.5s infinite;
     border-color: var(--ok-button);
 }
 
@@ -5966,12 +5743,10 @@ div.highlight1.netskrafl-blanktile {
 
 .netskrafl-container .blink {
     animation: opacityBlink 1s infinite;
-    -webkit-animation: opacityBlink 1s infinite;
 }
 
 .netskrafl-container .opp-ready {
     animation: opacityBlink 1s infinite;
-    -webkit-animation: opacityBlink 1s infinite;
 }
 
 .netskrafl-container a.opp-ready:link,
@@ -7062,19 +6837,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;
     }
@@ -7100,7 +6883,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,
@@ -7112,7 +6895,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 {
@@ -7173,6 +6956,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);
@@ -8255,6 +8040,54 @@ 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;
+    }
+}
+
+/* Disable blinking/flashing animations for users who prefer reduced motion */
+
+@media (prefers-reduced-motion: reduce) {
+    .netskrafl-container .blinking {
+        animation: none;
+    }
+    .netskrafl-container table.board td.center:empty::before {
+        animation: none;
+    }
+    .netskrafl-container td.keyboard-target::after {
+        animation: none;
+        opacity: 0.8;
+    }
+    .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: none;
+        background-color: var(--cancel-button);
+        border-color: var(--cancel-button);
+        color: white;
+    }
+    .netskrafl-container .blink {
+        animation: none;
+    }
+    .netskrafl-container .opp-ready {
+        animation: none;
+    }
+    .netskrafl-container div.right-tab.chat-alert > span.glyphicon {
+        animation: none;
+    }
+    .netskrafl-container div.opp-turn.flashing {
+        animation: none;
+    }
+    .netskrafl-container div.score.word-great {
+        animation: none;
+    }
+    .netskrafl-container div.submitmove#move-mobile.word-great span.score-mobile {
+        animation: none;
+    }
+    .netskrafl-container div.animated-netskrafl-logo {
+        animation: none;
+    }
 }
 
 /* ================= GÁTA DAGSINS STYLES =============== */
@@ -10240,3 +10073,11 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
         flex: 1;
     }
 }
+
+/* Disable blinking/flashing animations for users who prefer reduced motion */
+
+@media (prefers-reduced-motion: reduce) {
+    .netskrafl-container .thermometer-current-score.this-player .thermometer-current-circle {
+        animation: none;
+    }
+}