@mideind/netskrafl-react 3.2.2 → 3.2.3

package/dist/esm/css/netskrafl.css

@@ -2321,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);
@@ -2342,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;
@@ -2507,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 {
@@ -2892,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;
@@ -2916,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 {
@@ -3754,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;
@@ -3894,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;
@@ -3930,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;
@@ -3964,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 */
@@ -4052,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);
@@ -4069,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 {
@@ -4662,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);
 }
 
@@ -5971,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,
@@ -8276,6 +8046,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 +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;
+    }
+}

package/package.json

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