@mideind/netskrafl-react 3.4.1 → 3.4.2

package/dist/esm/css/netskrafl.css

@@ -1008,7 +1008,7 @@ div.netskrafl-container {
     /* The outer container fills its parent and paints the background */
     width: 100%;
     height: 100%;
-    overflow: auto;
+    overflow: hidden;
     background-color: var(--container-bg-color);
 }
 
@@ -1020,8 +1020,8 @@ div.netskrafl-container {
     padding-top: 4px;
     /* font-family: var(--primary-font); */
     width: 375px;
-    /* Full height is 667px - we subtract 115px for browser chrome, top and bottom */
-    height: 586px; /* 552px; */
+    height: calc(100vh - 58px);
+    height: calc(100dvh - 58px);
     overflow-x: hidden;
     overflow-y: visible;
     margin: 0 auto;
@@ -2453,7 +2453,7 @@ div.netskrafl-tile.dragging div.letterscore {
     left: 0;
     top: 0;
     width: 375px;
-    height: 552px;
+    height: 100%;
     overflow: hidden;
     font-size: 13px;
     line-height: 23px;
@@ -2740,7 +2740,7 @@ div.netskrafl-tile.dragging div.letterscore {
     top: 0;
     left: 0;
     width: 100%;
-    height: 458px;
+    height: 466px;
     background-color: var(--tab-movelist-background);
     padding-top: 8px;
     padding-bottom: 0;
@@ -2754,7 +2754,7 @@ div.netskrafl-tile.dragging div.letterscore {
     padding: 0;
     overflow: auto;
     width: 100%;
-    height: 350px;
+    height: 356px;
 }
 
 .netskrafl-container div.movelist.bestmoves {
@@ -3192,7 +3192,7 @@ div.netskrafl-tile.dragging div.letterscore {
     top: 0px;
     left: 0px;
     width: 100%;
-    height: 466px;
+    height: 474px;
     background-color: var(--two-letter-background);
     overflow: hidden;
     z-index: 3;
@@ -3257,6 +3257,7 @@ div.netskrafl-tile.dragging div.letterscore {
 
 .netskrafl-container div#tabs,
 .netskrafl-container div#main-tabs {
+    height: 100%;
     border-width: 0;
     padding: 0;
 }
@@ -3265,7 +3266,8 @@ div.netskrafl-tile.dragging div.letterscore {
 .netskrafl-container div#main-tabs > div[role="tabpanel"] {
     position: relative;
     top: -8px;
-    height: 504px;
+    height: calc(100vh - 88px);
+    height: calc(100dvh - 88px);
     /* Prevent scroll from propagating to parent */
     overscroll-behavior: contain;
 }
@@ -3762,7 +3764,8 @@ div.netskrafl-tile.dragging div.letterscore {
 
 .netskrafl-container div #userlist,
 .netskrafl-container div #elolist {
-    height: 396px;
+    height: calc(100vh - 240px);
+    height: calc(100dvh - 240px);
     /* 11 lines @ 36px each */
     overflow-y: auto;
     overflow-x: hidden;
@@ -3771,7 +3774,8 @@ div.netskrafl-tile.dragging div.letterscore {
 }
 
 .netskrafl-container div #gamelist {
-    height: 468px;
+    height: calc(100vh - 124px);
+    height: calc(100dvh - 124px);
     /* 13 lines @ 36px each */
     overflow-y: auto;
     overflow-x: hidden;
@@ -3780,7 +3784,8 @@ div.netskrafl-tile.dragging div.letterscore {
 }
 
 .netskrafl-container div #recentlist {
-    height: 396px;
+    height: calc(100vh - 196px);
+    height: calc(100dvh - 196px);
     /* 11 lines @ 36px each */
     overflow-y: auto;
     overflow-x: hidden;
@@ -3789,7 +3794,8 @@ div.netskrafl-tile.dragging div.letterscore {
 }
 
 .netskrafl-container div #usr-recent {
-    height: 432px;
+    height: calc(100vh - 160px);
+    height: calc(100dvh - 160px);
     /* 12 lines @ 36px each */
     overflow-y: auto;
     overflow-x: hidden;
@@ -3812,7 +3818,7 @@ div.netskrafl-tile.dragging div.letterscore {
     top: 0;
     left: 0;
     width: 100%;
-    height: 442px;
+    height: 450px;
     background-color: var(--tab-games-background);
     overflow: auto;
     z-index: 2;
@@ -6449,14 +6455,6 @@ div.netskrafl-container input[type="checkbox"] {
 @media all and (max-width: 1023px) and (min-height: 632px) {
     /* iPhone X or taller */
     /* Tall mobile phones: use two lines to display the header */
-    .netskrafl-container div.tabbed-page {
-        height: 605px;
-        overflow: hidden;
-    }
-    .netskrafl-container div#tabs > div[role="tabpanel"],
-    .netskrafl-container div#main-tabs > div[role="tabpanel"] {
-        height: 556px;
-    }
     .netskrafl-container div.scoreleft {
         display: inline-block;
         position: relative;
@@ -6527,41 +6525,6 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container div.board-area {
         top: 98px;
     }
-    .netskrafl-container div #userlist,
-    .netskrafl-container div #elolist {
-        height: 424px;
-        /* 14 lines @ 36px each */
-    }
-    .netskrafl-container div #gamelist {
-        height: 576px;
-        /* 16 lines @ 36px each */
-    }
-    .netskrafl-container div #recentlist {
-        height: 504px;
-        /* 14 lines @ 36px each */
-    }
-    .netskrafl-container div #usr-recent {
-        height: 540px;
-        /* 15 lines @ 36px each */
-    }
-    .netskrafl-container div #chall-sent,
-    .netskrafl-container div #chall-received {
-        height: 288px;
-        /* 8 lines @ 36px each */
-    }
-    .netskrafl-container div.chat-container,
-    .netskrafl-container div.twoletter {
-        height: 476px;
-    }
-    .netskrafl-container div.games {
-        height: 452px;
-    }
-    .netskrafl-container div.movelist-container {
-        height: 468px;
-    }
-    .netskrafl-container div.movelist {
-        height: 358px;
-    }
 }
 
 /* iPhone 11 or larger: scale the UI to appear larger on the screen */
@@ -6571,7 +6534,6 @@ div.netskrafl-container input[type="checkbox"] {
     ) {
     .netskrafl-container div.netskrafl-inner {
         margin-top: 4px;
-        height: 652px;
     }
 }
 
@@ -6583,13 +6545,16 @@ div.netskrafl-container input[type="checkbox"] {
         orientation: landscape
     ) {
     /* Mobile screen, landscape mode (width >= 667px AND landscape orientation) */
+    div.netskrafl-container {
+        container-type: inline-size;
+    }
     .netskrafl-container div.netskrafl-inner {
         /* Reference width */
         width: 667px;
         /* Reference height */
         height: 100%;
         max-height: 686px;
-        overflow-y: hidden;
+        overflow: visible;
     }
     .netskrafl-container div.header-logo {
         display: none;
@@ -6635,6 +6600,14 @@ div.netskrafl-container input[type="checkbox"] {
         left: 50%;
         width: 50%;
     }
+    .netskrafl-container div.logo {
+        display: block;
+        position: absolute;
+        top: 8px;
+        left: calc(8px - (100cqw - 667px) / 2);
+        width: 30px;
+        z-index: 10;
+    }
     .netskrafl-container div.board-area {
         position: absolute;
         top: 0;
@@ -6644,6 +6617,9 @@ 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))));
+        transform-origin: right top;
     }
     .netskrafl-container div.rightcol {
         width: 283px;
@@ -6738,7 +6714,8 @@ div.netskrafl-container input[type="checkbox"] {
         display: none;
     }
     .netskrafl-container div.movelist-container {
-        height: 300px;
+        height: calc(100vh - 90px);
+        height: calc(100dvh - var(--header-size, 40px) - 44px);
         padding-top: 0px;
         padding-bottom: 0px;
     }
@@ -6747,7 +6724,9 @@ div.netskrafl-container input[type="checkbox"] {
     }
     .netskrafl-container div.right-area.with-clock div.movelist-container {
         /* If in a clock game, reduce the movelist height by two lines (2 * 20px) */
-        height: 260px;
+        height: calc(100vh - 130px);
+        height: calc(100dvh - var(--header-size, 40px) - 84px);
+        max-height: 260px;
     }
     .netskrafl-container div.movelist-container div.bag {
         display: none;
@@ -6782,7 +6761,10 @@ div.netskrafl-container input[type="checkbox"] {
     }
     .netskrafl-container div.right-area {
         top: 8px;
-        height: 316px;
+        height: calc(100vh - 16px);
+        height: calc(100dvh - 16px);
+        max-height: 316px;
+        margin-top: 0;
         padding-top: 0;
     }
     .netskrafl-container span.list-chall {
@@ -6799,7 +6781,29 @@ div.netskrafl-container input[type="checkbox"] {
     }
     .netskrafl-container div#tabs > div[role="tabpanel"],
     .netskrafl-container div#main-tabs > div[role="tabpanel"] {
-        height: 326px;
+        height: calc(100vh - 152px);
+        height: calc(100dvh - 152px);
+        max-height: 326px;
+    }
+    .netskrafl-container div #userlist,
+    .netskrafl-container div #elolist {
+        height: calc(100vh - 204px);
+        height: calc(100dvh - 204px);
+        max-height: 396px;
+    }
+    .netskrafl-container div #gamelist {
+        height: calc(100vh - 150px);
+        height: calc(100dvh - 150px);
+        max-height: 468px;
+    }
+    .netskrafl-container div #recentlist,
+    .netskrafl-container div #usr-recent {
+        height: calc(100vh - 204px);
+        height: calc(100dvh - 204px);
+        max-height: 396px;
+    }
+    .netskrafl-container div#elo-toggler {
+        top: 6px;
     }
     .netskrafl-container div#tabs-1 span.list-ts-short,
     .netskrafl-container div#tabs-1 span.list-manual,
@@ -6828,17 +6832,6 @@ div.netskrafl-container input[type="checkbox"] {
     }
 }
 
-/* Short landscape screens - scale board down slightly */
-
-@media all and (min-width: 667px) and (orientation: landscape) and (
-        max-height: 360px
-    ) {
-    .netskrafl-container div.board {
-        transform: scale(0.96);
-        transform-origin: center top;
-    }
-}
-
 /* ==========================================================================
    RESPONSIVE: Large screen (iPad and larger, 1024px+)
    ========================================================================== */
@@ -6899,6 +6892,25 @@ div.netskrafl-container input[type="checkbox"] {
         width: 1024px;
         height: 686px;
         overflow-y: hidden;
+        transition: zoom 200ms ease;
+    }
+    /* Scale down to fit within available width when embedded in a sidebar
+       layout; --sidebar-width and --sidebar-width-icon are defined by
+       Málstaður. When standalone (no sidebar), neither rule matches and
+       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))
+        );
+    }
+    :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))
+        );
     }
     .netskrafl-container div.game-container {
         height: 100%;
@@ -7887,7 +7899,6 @@ div.netskrafl-container input[type="checkbox"] {
         width: 32px;
     }
     .netskrafl-container div.tabbed-page {
-        overflow: hidden;
         left: 110px;
         top: 12px;
         width: 900px;
@@ -7910,6 +7921,7 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container div#tabs > div[role="tabpanel"],
     .netskrafl-container div#main-tabs > div[role="tabpanel"] {
         height: 657px;
+        max-height: none;
         top: 0;
     }
     .netskrafl-container div.userid {
@@ -8194,14 +8206,17 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container div #gamelist,
     .netskrafl-container div #elolist {
         height: 504px;
+        max-height: none;
         /* 14 lines @ 36px each */
     }
     .netskrafl-container div #recentlist {
         height: 432px;
+        max-height: none;
         /* 12 lines @ 36px each */
     }
     .netskrafl-container div #usr-recent {
         height: 432px;
+        max-height: none;
         /* 12 lines @ 36px each */
     }
     .netskrafl-container div #chall-sent,