@mideind/netskrafl-react 2.1.1 → 2.2.0

package/dist/esm/css/netskrafl.css

@@ -319,9 +319,6 @@
 
 */
 
-/*
-*/
-
 div.netskrafl-container {
     --logo-primary: #c94314;
     --logo-primary-light: hsl(from var(--logo-primary) h s 75%);
@@ -507,7 +504,6 @@ div.netskrafl-container * {
 
 .netskrafl-container .ui-tabs {
     position: relative;
-    /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
     padding: 3px;
     border-width: 0;
 }
@@ -711,11 +707,11 @@ div.netskrafl-container * {
     text-transform: uppercase;
 }
 
-@media all and (max-width: 360px) {
-    /* Hack to squeeze the content on 360 pixel wide phones */
+@media all and (max-width: 374px) and (orientation: portrait) {
+    /* Scale down for phones narrower than the 375px design width */
     div.netskrafl-container {
         transform: scale(0.96, 1);
-        /* 0.96 = 360/375 */
+        /* 0.96 = 360/375, scales 375px design to fit 360px viewport */
         transform-origin: left top;
     }
 }
@@ -6083,13 +6079,14 @@ div.netskrafl-container input[type="checkbox"] {
 
 /* ================= MOBILE LANDSCAPE UI ====================== */
 
-@media all and (min-width: 667px) {
-    /* Mobile screen, landscape mode */
+@media all and (min-width: 667px) and (orientation: landscape) {
+    /* Mobile screen, landscape mode (width >= 667px AND landscape orientation) */
     div.netskrafl-container {
         /* Reference width */
         width: 667px;
         /* Reference height */
-        height: 375px;
+        height: calc(100dvh - var(--header-size, 3rem));
+        max-height: 686px;
         overflow-y: hidden;
     }
     .netskrafl-container div.tabbed-page {
@@ -6311,14 +6308,15 @@ div.netskrafl-container input[type="checkbox"] {
     }
 }
 
-@media all and (min-width: 667px) and (max-height: 360px) {
+@media all and (min-width: 667px) and (orientation: landscape) and (max-height: 360px) {
+    /* Very short landscape screens - scale board down slightly */
     .netskrafl-container div.board {
         transform: scale(0.96);
         transform-origin: top left;
     }
 }
 
-/* fullscreen.css */
+/* Large screen (iPad and larger) */
 
 @media all and (min-width: 1024px) {
     .netskrafl-container .ui-helper-reset {
@@ -6370,19 +6368,16 @@ div.netskrafl-container input[type="checkbox"] {
         padding-bottom: 1px;
         background-color: var(--tab-background);
     }
-    /* Large screen (iPad and larger) */
     div.netskrafl-container {
         width: 1024px;
-        height: 768px;
-        /* Was 748 */
+        height: 686px;
         overflow-y: hidden;
     }
     .netskrafl-container div.game-container {
-        height: 768px;
+        height: 100%;
     }
     .netskrafl-container div.heading {
         height: auto;
-        /* background-color: @heading-background; */
     }
     .netskrafl-container div.logo {
         display: block;
@@ -6410,7 +6405,7 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container div.info {
         display: block;
         position: absolute;
-        bottom: 152px;
+        bottom: 52px;
         top: auto;
         left: 28px;
         width: 50px;
@@ -6482,7 +6477,7 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container div.board-area {
         margin: 0;
         /* width should not be set here */
-        height: 750px;
+        height: 746px;
     }
     .netskrafl-container div.board {
         position: absolute;
@@ -7607,7 +7602,6 @@ div.netskrafl-container input[type="checkbox"] {
         width: 428px;
         height: 292px;
         padding-top: 12px;
-        /* Override */
     }
     .netskrafl-container span.left-to-move,
     .netskrafl-container span.right-to-move {
@@ -7993,6 +7987,20 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
     color: #333;
 }
 
+.netskrafl-container .date-navigator .solver-count-pill {
+    background-color: var(--malfridur-green);
+    color: white;
+    font-family: var(--number-font);
+    font-size: 11px;
+    font-weight: bold;
+    padding: 2px 8px;
+    border-radius: 10px;
+    margin-left: 10px;
+    min-width: 20px;
+    text-align: center;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
 .netskrafl-container .mobile-date-nav-container {
     display: flex;
     justify-content: center;
@@ -8004,10 +8012,15 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
     padding: 0;
     width: 100%;
     justify-content: center;
-    gap: 20px;
     margin-bottom: 0;
 }
 
+/* Add spacing between date navigator children (replacing gap) */
+
+.netskrafl-container .mobile-date-nav-container .date-navigator > * + * {
+    margin-left: 16px;
+}
+
 /* Mobile status bar - visible on mobile only */
 
 .netskrafl-container div.gatadagsins-mobile-status {
@@ -9227,7 +9240,17 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
     }
 
     .netskrafl-container div.gatadagsins-container {
-        height: 680px;
+        /* Dynamic viewport height minus header, adapts to browser chrome */
+        height: calc(100dvh - var(--header-size, 3rem));
+        max-height: 686px; /* Cap on large screens */
+    }
+
+    .netskrafl-container div.gatadagsins-board-rack-wrapper {
+        justify-content: flex-start; /* Align to the top of the screen */
+    }
+
+    .netskrafl-container div.gatadagsins-board-area {
+        flex: 0 0 auto; /* Don't expand - just fit the board */
     }
 
     .netskrafl-container div.gatadagsins-container div.board {
@@ -9256,7 +9279,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
     }
 
     .netskrafl-container .desktop-date-nav-container {
-        margin-bottom: 10px;
+        margin-bottom: 6px;
     }
 
     /* Desktop tab styling adjustments */
@@ -9319,13 +9342,14 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
         flex-direction: column;
         order: 0;
         margin-top: 0;
+        margin-right: 12px;
         padding-top: 8px;
         padding-bottom: 24px;
         overflow: hidden;
     }
 
     .netskrafl-container div.gatadagsins-rack-area {
-        flex: 0 0 120px;
+        flex: 0 0 104px;
         /* Push left to compensate for row ids
        on the left side of the board */
         padding-left: 36px;
@@ -9377,7 +9401,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
         margin-right: 5px;
     }
 
-    .netskrafl-container div.gatadagsins-container div.info {
-        bottom: 42px;
+    .netskrafl-container div.info {
+        bottom: 72px;
     }
 }