@mideind/netskrafl-react 3.4.2 → 3.4.4

package/dist/esm/css/netskrafl.css

@@ -901,6 +901,10 @@ div.netskrafl-container.legacy-colors div.netskrafl-freshtile {
         color: black;
     }
 
+div.netskrafl-container.legacy-colors div.netskrafl-freshtile.netskrafl-blanktile {
+        color: var(--blank-tile);
+    }
+
 div.netskrafl-container.legacy-colors div.rack td.opp {
         border-width: 2px;
         border-color: var(--middle-shadow);
@@ -2686,7 +2690,7 @@ div.netskrafl-tile.dragging div.letterscore {
     top: 0;
     padding-top: 34px;
     left: 0;
-    height: 464px;
+    height: 474px;
     width: 100%;
     font-size: 16px;
     line-height: 16px;
@@ -3818,12 +3822,13 @@ div.netskrafl-tile.dragging div.letterscore {
     top: 0;
     left: 0;
     width: 100%;
+    /* Total height: 474px */
     height: 450px;
+    padding-top: 12px;
+    padding-bottom: 12px;
     background-color: var(--tab-games-background);
     overflow: auto;
     z-index: 2;
-    padding-top: 12px;
-    padding-bottom: 12px;
     border-radius: 4px 4px 0 0;
 }
 
@@ -4109,7 +4114,7 @@ div.netskrafl-freshtile {
 }
 
 div.netskrafl-freshtile.netskrafl-blanktile {
-    color: var(--light-shadow);
+    color: var(--blank-tile);
 }
 
 .netskrafl-container div.highlight0 {
@@ -4303,7 +4308,7 @@ div.highlight1.netskrafl-blanktile {
     top: 0px;
     left: 0px;
     width: 100%;
-    height: 466px;
+    height: 474px;
     background-color: var(--chat-background);
     z-index: 1;
     border-radius: 4px 4px 0 0;
@@ -6542,9 +6547,14 @@ div.netskrafl-container input[type="checkbox"] {
    ========================================================================== */
 
 @media all and (min-width: 667px) and (max-width: 1023px) and (
-        orientation: landscape
-    ) {
-    /* Mobile screen, landscape mode (width >= 667px AND landscape orientation) */
+        max-height: 667px
+    ) and (orientation: landscape) {
+    /* Mobile screens in landscape (width 667–1023px, max-height 667px, landscape orientation) */
+    .netskrafl-container .ui-helper-reset {
+        /* Controls the height of the tab row; 50px is too tall for limited
+           vertical space in landscape */
+        line-height: 40px;
+    }
     div.netskrafl-container {
         container-type: inline-size;
     }
@@ -6617,8 +6627,10 @@ div.netskrafl-container input[type="checkbox"] {
         top: 8px;
         padding-top: 1px;
         background-color: transparent;
-        transform: scale(0.92);
-        transform: scale(min(1, tan(atan2(100dvh - 16px, 408px))));
+        /* 0.88 is the scale required on an iPhone SE to fit the board
+           vertically */
+        transform: scale(0.88);
+        transform: scale(clamp(0.88, calc((100dvh - 16px) / 408px), 1));
         transform-origin: right top;
     }
     .netskrafl-container div.rightcol {
@@ -6739,15 +6751,29 @@ div.netskrafl-container input[type="checkbox"] {
         left: 90px;
     }
     .netskrafl-container div#own-stats {
-        height: 16px;
+        height: 32px;
+        margin-top: 6px;
+        margin-bottom: 6px;
+    }
+    .netskrafl-container div.stats-fig {
+        margin-top: 0;
+        height: 22px;
+        line-height: 22px;
     }
     .netskrafl-container p#own-best {
         left: auto;
         right: 6px;
         top: 0px;
         text-align: right;
-        font-size: 0.85em;
-        line-height: 1.4em;
+        font-size: 13px;
+        line-height: 17px;
+        margin-top: 8px;
+    }
+    .netskrafl-container div#own-toggler {
+        top: -2px;
+    }
+    .netskrafl-container div.toggler span.glyphicon {
+        top: 2px;
     }
     .netskrafl-container div #chall-sent,
     .netskrafl-container div #chall-received {
@@ -6781,29 +6807,41 @@ div.netskrafl-container input[type="checkbox"] {
     }
     .netskrafl-container div#tabs > div[role="tabpanel"],
     .netskrafl-container div#main-tabs > div[role="tabpanel"] {
-        height: calc(100vh - 152px);
-        height: calc(100dvh - 152px);
-        max-height: 326px;
+        height: calc(100vh - 142px);
+        height: calc(100dvh - 142px);
+        max-height: 336px;
+    }
+    .netskrafl-container div#initials {
+        margin-top: 6px;
+        margin-bottom: 6px;
+        height: 32px;
+    }
+    .netskrafl-container div.user-cat#user-headings {
+        line-height: 28px;
     }
     .netskrafl-container div #userlist,
     .netskrafl-container div #elolist {
-        height: calc(100vh - 204px);
-        height: calc(100dvh - 204px);
-        max-height: 396px;
+        height: calc(100vh - 180px);
+        height: calc(100dvh - 180px);
+        max-height: 420px;
     }
     .netskrafl-container div #gamelist {
-        height: calc(100vh - 150px);
-        height: calc(100dvh - 150px);
-        max-height: 468px;
+        height: calc(100vh - 136px);
+        height: calc(100dvh - 136px);
+        max-height: 482px;
     }
     .netskrafl-container div #recentlist,
     .netskrafl-container div #usr-recent {
-        height: calc(100vh - 204px);
-        height: calc(100dvh - 204px);
-        max-height: 396px;
+        height: calc(100vh - 180px);
+        height: calc(100dvh - 180px);
+        max-height: 420px;
+    }
+    .netskrafl-container span#numgames,
+    .netskrafl-container span#numchallenges {
+        margin-top: 12px;
     }
     .netskrafl-container div#elo-toggler {
-        top: 6px;
+        top: 2px;
     }
     .netskrafl-container div#tabs-1 span.list-ts-short,
     .netskrafl-container div#tabs-1 span.list-manual,
@@ -6900,16 +6938,18 @@ div.netskrafl-container input[type="checkbox"] {
        zoom remains at default (1). */
     :has([data-slot="sidebar"][data-state="collapsed"]) div.netskrafl-inner {
         zoom: 0.92;
-        zoom: min(
-            1,
-            tan(atan2(100vw - var(--sidebar-width-icon, 4rem) - 24px, 1024px))
+        zoom: clamp(
+            0.92,
+            calc((100vw - var(--sidebar-width-icon, 4rem) - 24px) / 1024px),
+            1
         );
     }
     :has([data-slot="sidebar"][data-state="expanded"]) div.netskrafl-inner {
         zoom: 0.77;
-        zoom: min(
-            1,
-            tan(atan2(100vw - var(--sidebar-width, 14rem) - 12px, 1024px))
+        zoom: clamp(
+            0.77,
+            calc((100vw - var(--sidebar-width, 14rem) - 12px) / 1024px),
+            1
         );
     }
     .netskrafl-container div.game-container {