@mideind/netskrafl-react 3.2.2 → 3.2.4

package/dist/esm/css/netskrafl.css

@@ -808,6 +808,10 @@ div.netskrafl-container.legacy-colors div.at-top-left div.tilecount {
         background-color: #babab2;
     }
 
+div.netskrafl-container.legacy-colors div.at-top-left div.tilecount.trans {
+        background-color: transparent;
+    }
+
 /* Challenge dialog header */
 
 div.netskrafl-container.legacy-colors div.chall-hdr h2 {
@@ -2321,18 +2325,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);
@@ -2342,15 +2334,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;
@@ -2507,7 +2490,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 {
@@ -2892,21 +2874,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;
@@ -2916,7 +2883,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 {
@@ -3754,128 +3720,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;
@@ -3894,24 +3738,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;
@@ -3930,24 +3756,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;
@@ -3964,7 +3772,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 */
@@ -4052,15 +3859,6 @@ div.netskrafl-xchgsel {
     }
 }
 
-@-webkit-keyframes fresh-appear {
-    0% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
-}
-
 div.netskrafl-freshtile {
     color: white;
     background-color: var(--autoplayer-color);
@@ -4069,10 +3867,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 {
@@ -4662,26 +4456,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);
 }
 
@@ -5971,12 +5747,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,
@@ -7081,6 +6855,12 @@ div.netskrafl-container input[type="checkbox"] {
         padding: 0;
         margin: 0;
     }
+    div.blank-rack div.netskrafl-tile {
+        /* Blank dialog tiles have the letter as a direct text child
+        (no .tileletter wrapper), so restore visible font metrics */
+        font-size: 24px;
+        line-height: 32px;
+    }
     div.rack div.netskrafl-tile .tileletter {
         font-size: 24px;
         line-height: 32px;
@@ -8276,6 +8056,50 @@ div.netskrafl-container input[type="checkbox"] {
     }
 }
 
+/* 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 =============== */
 
 /* Mobile styles for Gáta Dagsins */
@@ -10259,3 +10083,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;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mideind/netskrafl-react",
-  "version": "3.2.2",
+  "version": "3.2.4",
   "description": "React UI for Netskrafl",
   "repository": {
     "type": "git",